Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

player: window.__hf from @hyperframes/shader-transitions makes an src embed reject its own composition

已关闭
  • 哪里不对？
#4,002 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@srikarsunchu 已经在做这个了。

开始于 2026年9月21日。

  • #4246 来自 @srikarsunchu —— 未关闭
  • #5244 来自 @user-github-me —— 未关闭

评估

难度
3/5
预计耗时
1-2 天
新手友好度
70/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
html, typescript
领域
frontend, web-dev

调研方向

Start by serving the reproduction folder over HTTP and opening host.html, comparing the ready and error events from comp-clean.html and comp-shader.html. Then trace the player’s src runtime probe and timeline adapter decision; done means both embedded compositions report ready with duration 10 instead of the shader case timing out.

由索引模型根据 Issue 内容生成。

描述

triage/needs-triage
Summary

<hyperframes-player src="..."> treats the mere existence of window.__hf in the composition
frame as "the core runtime is present". But @hyperframes/shader-transitions — the sibling
package, at the same version — creates that global itself at the end of HyperShader.init():

// @hyperframes/shader-transitions 0.8.41, dist/index.global.js
let gr = window;
return gr.__hf = gr.__hf || {}, gr.__hf.shaderTransitionsReady = Qo, ...

So any composition that uses shader transitions and registers its own timeline
(window.__timelines) — i.e. an authored GSAP composition, not one bundled by the CLI — can never
be played through the player when loaded with src. The probe:

  1. sees hasRuntime = !!(win.__hf || win.__player) → true, so it never injects the runtime
    (we() returns false); and
  2. hasRuntimeBridge() → true, so _resolveDirectTimelineAdapterFromWindow() returns null
    and the direct-timeline adapter is refused.

Nothing is ever resolved, and 8 s later the element emits
error: "Composition timeline not found after 8s". The frame stays black.

window.__hf is a namespace, not a bridge — shader-transitions only ever augments it (it polls
for window.__hf.seek and warns "the engine bridge did not initialize" when the core runtime is
absent). The presence check should be for the bridge itself (__player, or a callable
__hf.seek), not for the object.

Reproduction

Two identical compositions; the only difference is the three lines shader-transitions would have
run. No GSAP needed — the stub has exactly the shape the player duck-types for.

timeline.js

window.__timelines = { main: (function () {
  var t = 0;
  return {
    duration: function () { return 10; },
    time: function (v) { if (v === undefined) return t; t = v; return this; },
    seek: function (v) { t = v; return this; },
    play: function () { return this; },
    pause: function () { return this; },
  };
})() };

comp-clean.html

<!doctype html><html><head><meta charset="utf-8"></head><body>
  <div id="root" data-composition-id="main" data-width="1080" data-height="1920"></div>
  <script src="timeline.js"></script>
</body></html>

comp-shader.html — identical, plus what HyperShader.init() leaves behind:

<!doctype html><html><head><meta charset="utf-8"></head><body>
  <div id="root" data-composition-id="main" data-width="1080" data-height="1920"></div>
  <script>
    window.__hf = window.__hf || {};
    window.__hf.shaderTransitionsReady = Promise.resolve();
  </script>
  <script src="timeline.js"></script>
</body></html>

host.html

<script src="https://cdn.jsdelivr.net/npm/@hyperframes/[email protected]/dist/hyperframes-player.global.js"></script>
<hyperframes-player id="a" src="comp-clean.html"  width="1080" height="1920"></hyperframes-player>
<hyperframes-player id="b" src="comp-shader.html" width="1080" height="1920"></hyperframes-player>
<script>
  for (const id of ["a", "b"])
    for (const type of ["ready", "error"])
      document.getElementById(id).addEventListener(type, (e) =>
        console.log(id, type, e.detail));
</script>

Serve the folder over http and open host.html.

Actual
a ready {duration: 10}
b error {message: "Composition timeline not found after 8s"}
Expected

Both report ready. A composition does not stop being playable because it also uses
@hyperframes/shader-transitions.

Environment
  • @hyperframes/player 0.8.41, @hyperframes/shader-transitions 0.8.41, hyperframes 0.8.41
  • Chromium 141, Linux
Notes

The same compositions render correctly with hyperframes render, because the CLI injects the core
runtime into the document before loading it — window.__player then exists and the player takes
the runtime path. The failure is specific to embedding an authored composition with src.

主要语言
TypeScript
星标
54.1k
派生
4.9k
平均合并
7 小时 21 分钟
30 天内合并 PR
722

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

heygen-com/hyperframes 的其他 Issue

查看 heygen-com/hyperframes 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。