Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#4,002 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@srikarsunchu ya está trabajando en esto.

Desde el 21/9/2026.

  • #4246 de @srikarsunchu — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
70/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
html, typescript
Área
frontend, web-dev

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
54.1k
Forks
4.9k
Merge medio
7 h 2 min
PR fusionados (30 d)
782

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de heygen-com/hyperframes

Todos los issues de heygen-com/hyperframes

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.