@video-editor/renderer 0.0.1-beta.22 → 0.0.1-beta.24

package/dist/index.js

@@ -3,149 +3,152 @@ import { toRaw as De, isRef as Ne, shallowRef as se, unref as de, ref as ue, com
 import { renderTxt2ImgBitmap as Be, MP4Clip as z, Combinator as pe, OffscreenSprite as he } from "@webav/av-cliper";
 import { file as _e } from "opfs-tools";
 import { Application as we, Sprite as F, Texture as A, Graphics as me, Container as We } from "pixi.js";
-async function Ye(t) {
+async function Ye(e) {
   const o = new we();
-  return await o.init({ resizeTo: window, backgroundAlpha: 0, ...t }), o;
+  return await o.init({ resizeTo: window, backgroundAlpha: 0, ...e }), o;
 }
-function je(t, o, a, i, c) {
-  const u = o || i, p = a || c;
-  if (!u || !p)
+function je(e, o, a, i, c) {
+  const u = o || i, f = a || c;
+  if (!u || !f)
     return { width: i, height: c };
-  const s = u / p, y = i / c;
-  switch (t) {
+  const s = u / f, m = i / c;
+  switch (e) {
     case "none":
-      return { width: u, height: p };
+      return { width: u, height: f };
     case "cover":
-      return s > y ? { width: c * s, height: c } : { width: i, height: i / s };
+      return s > m ? { width: c * s, height: c } : { width: i, height: i / s };
     case "stretch":
       return { width: i, height: c };
     default:
-      return s > y ? { width: i, height: i / s } : { width: c * s, height: c };
+      return s > m ? { width: i, height: i / s } : { width: c * s, height: c };
   }
 }
-function Ke(t, o, a, i, c) {
-  const u = "fillMode" in t ? t.fillMode : void 0, { width: p, height: s } = je(
+function Ke(e, o, a, i, c) {
+  const u = "fillMode" in e ? e.fillMode : void 0, { width: f, height: s } = je(
     u,
     i,
     c,
     o,
     a
-  ), y = "transform" in t ? t.transform : void 0, [E, S] = y?.position ?? [0, 0], [k, C] = y?.scale ?? [1, 1], g = y?.rotation?.[2] ?? 0, w = p * k, v = s * C, m = o / 2 + E * o / 2, R = a / 2 - S * a / 2;
+  ), m = "transform" in e ? e.transform : void 0, [M, g] = m?.position ?? [0, 0], [E, I] = m?.scale ?? [1, 1], S = m?.rotation?.[2] ?? 0, w = f * E, v = s * I, y = o / 2 + M * o / 2, C = a / 2 - g * a / 2;
   return {
     width: w,
     height: v,
-    centerX: m,
-    centerY: R,
-    rotationRad: g / 180 * Math.PI
+    centerX: y,
+    centerY: C,
+    rotationRad: S / 180 * Math.PI
   };
 }
-function Xe(t) {
+function Xe(e) {
   const o = /* @__PURE__ */ new Set();
-  for (const a of t.tracks)
+  for (const a of e.tracks)
     for (const i of a.children)
       i.url && o.add(i.url);
   return o;
 }
-function Ge(t, o) {
+function Ge(e, o) {
   const a = [];
-  return t.tracks.forEach((i, c) => {
-    i.children.forEach((u, p) => {
-      u.startTime <= o && o < u.endTime && a.push({ segment: u, trackIndex: c, childIndex: p });
+  return e.tracks.forEach((i, c) => {
+    i.children.forEach((u, f) => {
+      u.startTime <= o && o < u.endTime && a.push({ segment: u, trackIndex: c, childIndex: f });
     });
-  }), a.sort((i, c) => i.trackIndex === c.trackIndex ? i.childIndex - c.childIndex : i.trackIndex - c.trackIndex);
+  }), a.sort((i, c) => {
+    const u = e.tracks[i.trackIndex], f = e.tracks[c.trackIndex], s = u?.trackType === "frames" && u.isMain, m = f?.trackType === "frames" && f.isMain, M = e.tracks.length, g = s ? 0 : M - i.trackIndex, E = m ? 0 : M - c.trackIndex;
+    return g !== E ? g - E : i.trackIndex === c.trackIndex ? i.childIndex - c.childIndex : i.trackIndex - c.trackIndex;
+  });
 }
-function Je(t, o, a, i) {
-  const c = Qe(o), u = t instanceof F && t.texture.width || a, p = t instanceof F && t.texture.height || i, s = Ke(o, a, i, u, p);
-  t instanceof F ? (t.anchor.set(0.5), t.width = s.width, t.height = s.height, t.position.set(s.centerX, s.centerY), t.rotation = s.rotationRad, t.texture.source?.addEventListener?.("error", () => {
-    t.texture = A.from(He(a, i));
-  }, { once: !0 })) : t instanceof me && (t.clear(), t.rect(0, 0, s.width, s.height).fill({ color: ye("url" in o && typeof o.url == "string" ? o.url : o.segmentType), alpha: ve(o) ? c : 0.35 }), t.pivot.set(s.width / 2, s.height / 2), t.position.set(s.centerX, s.centerY), t.rotation = s.rotationRad), t.alpha = c;
+function Je(e, o, a, i) {
+  const c = Qe(o), u = e instanceof F && e.texture.width || a, f = e instanceof F && e.texture.height || i, s = Ke(o, a, i, u, f);
+  e instanceof F ? (e.anchor.set(0.5), e.width = s.width, e.height = s.height, e.position.set(s.centerX, s.centerY), e.rotation = s.rotationRad, e.texture.source?.addEventListener?.("error", () => {
+    e.texture = A.from(He(a, i));
+  }, { once: !0 })) : e instanceof me && (e.clear(), e.rect(0, 0, s.width, s.height).fill({ color: ye("url" in o && typeof o.url == "string" ? o.url : o.segmentType), alpha: ve(o) ? c : 0.35 }), e.pivot.set(s.width / 2, s.height / 2), e.position.set(s.centerX, s.centerY), e.rotation = s.rotationRad), e.alpha = c;
 }
-function j(t, o) {
+function j(e, o) {
   const a = new me();
-  return a.rect(0, 0, 10, 10).fill({ color: ye(o ?? t), alpha: 1 }), a;
+  return a.rect(0, 0, 10, 10).fill({ color: ye(o ?? e), alpha: 1 }), a;
 }
-function He(t, o, a) {
-  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${o}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
+function He(e, o, a) {
+  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${o}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
   return `data:image/svg+xml;base64,${btoa(i)}`;
 }
-function ye(t) {
+function ye(e) {
   let o = 0;
-  for (let a = 0; a < t.length; a++)
-    o = t.charCodeAt(a) + ((o << 5) - o);
+  for (let a = 0; a < e.length; a++)
+    o = e.charCodeAt(a) + ((o << 5) - o);
   return o & 16777215;
 }
-function X(t) {
-  const o = t.tracks.flatMap((a) => a.children.map((i) => i.endTime));
+function X(e) {
+  const o = e.tracks.flatMap((a) => a.children.map((i) => i.endTime));
   return o.length ? Math.max(...o) : 0;
 }
-function K(t, o, a) {
-  return Math.min(Math.max(t, o), a);
+function K(e, o, a) {
+  return Math.min(Math.max(e, o), a);
 }
-function le(t) {
-  const o = De(t);
+function fe(e) {
+  const o = De(e);
   return JSON.parse(JSON.stringify(o));
 }
-function ve(t) {
-  return "opacity" in t;
+function ve(e) {
+  return "opacity" in e;
 }
-function Qe(t) {
-  return ve(t) && typeof t.opacity == "number" ? t.opacity : 1;
+function Qe(e) {
+  return ve(e) && typeof e.opacity == "number" ? e.opacity : 1;
 }
 const Ze = 100, O = /* @__PURE__ */ new Map();
 let et = Ze;
-function tt(t, o) {
-  O.delete(t), O.set(t, o);
+function tt(e, o) {
+  O.delete(e), O.set(e, o);
 }
 function rt() {
   for (; O.size > et; ) {
-    const [t, o] = O.entries().next().value;
-    O.delete(t), o.close?.();
+    const [e, o] = O.entries().next().value;
+    O.delete(e), o.close?.();
   }
 }
-function nt(t) {
-  return t.map((o) => o.content).filter(Boolean).join(`
+function nt(e) {
+  return e.map((o) => o.content).filter(Boolean).join(`
 `);
 }
-function ot(t) {
-  const o = Array.isArray(t.fontFamily) ? t.fontFamily.join(", ") : t.fontFamily, a = t.fontSize ?? 32, i = t.fontWeight ?? "normal", c = t.fontStyle ?? "normal", u = t.fill ?? "#ffffff", p = t.align ?? "left", s = [
+function ot(e) {
+  const o = Array.isArray(e.fontFamily) ? e.fontFamily.join(", ") : e.fontFamily, a = e.fontSize ?? 32, i = e.fontWeight ?? "normal", c = e.fontStyle ?? "normal", u = e.fill ?? "#ffffff", f = e.align ?? "left", s = [
     `font-size: ${a}px`,
     `font-weight: ${i}`,
     `font-style: ${c}`,
     `color: ${u}`,
-    `text-align: ${p}`,
+    `text-align: ${f}`,
     "white-space: pre-wrap"
   ];
-  if (o && s.push(`font-family: ${o}`), typeof t.letterSpacing == "number" && s.push(`letter-spacing: ${t.letterSpacing}px`), typeof t.leading == "number" && s.push(`line-height: ${t.leading}px`), t.background?.color && s.push(`background: ${t.background.color}`), t.stroke?.color && typeof t.stroke.width == "number" && s.push(`-webkit-text-stroke: ${t.stroke.width}px ${t.stroke.color}`), t.underline && s.push("text-decoration: underline"), t.dropShadow?.color && typeof t.dropShadow.distance == "number") {
-    const y = (t.dropShadow.angle ?? 45) * (Math.PI / 180), E = Math.cos(y) * t.dropShadow.distance, S = Math.sin(y) * t.dropShadow.distance, k = t.dropShadow.blur ?? 0;
-    s.push(`text-shadow: ${E}px ${S}px ${k}px ${t.dropShadow.color}`);
+  if (o && s.push(`font-family: ${o}`), typeof e.letterSpacing == "number" && s.push(`letter-spacing: ${e.letterSpacing}px`), typeof e.leading == "number" && s.push(`line-height: ${e.leading}px`), e.background?.color && s.push(`background: ${e.background.color}`), e.stroke?.color && typeof e.stroke.width == "number" && s.push(`-webkit-text-stroke: ${e.stroke.width}px ${e.stroke.color}`), e.underline && s.push("text-decoration: underline"), e.dropShadow?.color && typeof e.dropShadow.distance == "number") {
+    const m = (e.dropShadow.angle ?? 45) * (Math.PI / 180), M = Math.cos(m) * e.dropShadow.distance, g = Math.sin(m) * e.dropShadow.distance, E = e.dropShadow.blur ?? 0;
+    s.push(`text-shadow: ${M}px ${g}px ${E}px ${e.dropShadow.color}`);
   }
   return s.join("; ");
 }
-async function it(t, o) {
-  const a = `${o}::${t}`, i = O.get(a);
+async function it(e, o) {
+  const a = `${o}::${e}`, i = O.get(a);
   if (i)
     return tt(a, i), i;
-  const c = await Be(t, o);
+  const c = await Be(e, o);
   return O.set(a, c), rt(), c;
 }
 const at = "/video-editor-res";
-async function ct(t) {
-  const o = ze(), a = Ne(t.protocol) ? t.protocol : se(t.protocol), i = se(
-    o.verify(le(de(a)))
-  ), c = t.app ?? await Ye(t.appOptions), u = new We();
+async function ct(e) {
+  const o = ze(), a = Ne(e.protocol) ? e.protocol : se(e.protocol), i = se(
+    o.verify(fe(de(a)))
+  ), c = e.app ?? await Ye(e.appOptions), u = new We();
   c.stage.addChild(u);
-  const p = Ue({ dir: t.resourceDir }), s = /* @__PURE__ */ new Set(), y = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Set(), C = t.videoSourceMode ?? "auto", g = /* @__PURE__ */ new Map(), w = ue(0), v = ue(!1), m = qe(() => X(i.value));
-  let R, P = 0, b = 0;
-  async function I(e) {
-    const n = b, { protocol: r, at: d, layer: l } = e, f = Pe(r, d), h = Ge(r, f), M = e.app.renderer.width, x = e.app.renderer.height, $ = [];
+  const f = Ue({ dir: e.resourceDir }), s = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Map(), M = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), E = /* @__PURE__ */ new Set(), I = e.videoSourceMode ?? "auto", S = /* @__PURE__ */ new Map(), w = ue(0), v = ue(!1), y = qe(() => X(i.value));
+  let C, P = 0, b = 0;
+  async function R(t) {
+    const n = b, { protocol: r, at: d, layer: l } = t, p = Pe(r, d), h = Ge(r, p), T = t.app.renderer.width, k = t.app.renderer.height, $ = [];
     for (const { segment: V } of h) {
       if (n !== b)
         return;
-      const N = await e.getDisplay(V);
+      const N = await t.getDisplay(V);
       if (n !== b)
         return;
       if (N && !N.destroyed) {
-        if (Je(N, V, M, x), Ie(V) && await re(V, f), n !== b)
+        if (Je(N, V, T, k), Re(V) && await re(V, p), n !== b)
           return;
         $.push(N);
       }
@@ -154,9 +157,9 @@ async function ct(t) {
       return;
     l.removeChildren();
     const D = $.filter(Boolean);
-    D.length && l.addChild(...D), n === b && e.app.render();
+    D.length && l.addChild(...D), n === b && t.app.render();
   }
-  const T = st(() => I({
+  const x = st(() => R({
     app: c,
     layer: u,
     protocol: i.value,
@@ -166,171 +169,171 @@ async function ct(t) {
   J.run(() => {
     Y(
       () => de(a),
-      (e) => {
+      (t) => {
         try {
-          i.value = o.verify(le(e));
+          i.value = o.verify(fe(t));
         } catch (n) {
           console.error("[renderer] invalid protocol update", n);
           return;
         }
-        b += 1, H(), t.warmUpResources !== !1 && ge(i.value), Se(i.value), q(), t.manualRender || T();
+        b += 1, H(), e.warmUpResources !== !1 && ge(i.value), Se(i.value), q(), e.manualRender || x();
       },
       { deep: !0, immediate: !0 }
-    ), t.manualRender || Y(w, () => {
-      q(), T();
-    }), Y(m, () => q());
+    ), e.manualRender || Y(w, () => {
+      q(), x();
+    }), Y(y, () => q());
   });
   function q() {
-    const e = m.value;
-    e <= 0 ? w.value = 0 : w.value > e ? w.value = e : w.value < 0 && (w.value = 0);
+    const t = y.value;
+    t <= 0 ? w.value = 0 : w.value > t ? w.value = t : w.value < 0 && (w.value = 0);
   }
-  function ge(e) {
-    for (const n of Xe(e))
-      s.has(n) || (s.add(n), ie(n) !== "video" && B(n) && p.add(n).catch(() => {
+  function ge(t) {
+    for (const n of Xe(t))
+      s.has(n) || (s.add(n), ie(n) !== "video" && B(n) && f.add(n).catch(() => {
       }));
   }
-  function Se(e) {
-    const n = new Set(e.tracks.flatMap((r) => r.children.map((d) => d.id)));
-    for (const [r, d] of y)
-      n.has(r) || (d.destroy(), y.delete(r));
-    for (const [r, d] of g)
-      n.has(r) || (ne(d), g.delete(r));
+  function Se(t) {
+    const n = new Set(t.tracks.flatMap((r) => r.children.map((d) => d.id)));
+    for (const [r, d] of m)
+      n.has(r) || (d.destroy(), m.delete(r));
+    for (const [r, d] of S)
+      n.has(r) || (ne(d), S.delete(r));
   }
   function H() {
     u.removeChildren();
-    for (const e of y.values())
-      e.destroy();
-    y.clear(), E.clear();
-    for (const e of g.values())
-      ne(e);
-    g.clear();
+    for (const t of m.values())
+      t.destroy();
+    m.clear(), M.clear();
+    for (const t of S.values())
+      ne(t);
+    S.clear();
   }
   function Q() {
-    v.value || (v.value = !0, P = performance.now(), R = requestAnimationFrame(Z));
+    v.value || (v.value = !0, P = performance.now(), C = requestAnimationFrame(Z));
   }
   function L() {
-    v.value = !1, R !== void 0 && cancelAnimationFrame(R), R = void 0, t.freezeOnPause !== !1 && Fe();
+    v.value = !1, C !== void 0 && cancelAnimationFrame(C), C = void 0, e.freezeOnPause !== !1 && Fe();
   }
   function Z() {
-    ee(), v.value && (R = requestAnimationFrame(Z));
+    ee(), v.value && (C = requestAnimationFrame(Z));
   }
-  function ee(e) {
-    if (!v.value && e === void 0)
+  function ee(t) {
+    if (!v.value && t === void 0)
       return;
-    const n = performance.now(), r = e ?? (P ? n - P : 0);
+    const n = performance.now(), r = t ?? (P ? n - P : 0);
     P = n, r !== 0 && (w.value = K(
       w.value + r,
       0,
-      m.value || Number.POSITIVE_INFINITY
-    ), m.value > 0 && w.value >= m.value && L());
+      y.value || Number.POSITIVE_INFINITY
+    ), y.value > 0 && w.value >= y.value && L());
   }
-  function be(e) {
-    w.value = K(e, 0, m.value || Number.POSITIVE_INFINITY);
+  function Me(t) {
+    w.value = K(t, 0, y.value || Number.POSITIVE_INFINITY);
   }
-  async function Me(e) {
-    w.value = K(e, 0, m.value || Number.POSITIVE_INFINITY), await T();
+  async function be(t) {
+    w.value = K(t, 0, y.value || Number.POSITIVE_INFINITY), await x();
   }
-  async function Te(e) {
-    const n = y.get(e.id);
+  async function Te(t) {
+    const n = m.get(t.id);
     if (n)
       return n;
-    const r = E.get(e.id);
+    const r = M.get(t.id);
     if (r)
       return r;
-    const d = xe(e);
-    E.set(e.id, d);
+    const d = xe(t);
+    M.set(t.id, d);
     const l = await d;
-    return l && y.set(e.id, l), E.delete(e.id), l;
-  }
-  async function xe(e) {
-    if (e.segmentType === "frames" || e.segmentType === "sticker") {
-      if (!e.url)
-        return j(e.segmentType);
-      if ("type" in e && e.type === "video" && ae(e.url)) {
-        const r = await Ce(e);
-        return r || j(e.segmentType, e.url);
+    return l && m.set(t.id, l), M.delete(t.id), l;
+  }
+  async function xe(t) {
+    if (t.segmentType === "frames" || t.segmentType === "sticker") {
+      if (!t.url)
+        return j(t.segmentType);
+      if ("type" in t && t.type === "video" && ae(t.url)) {
+        const r = await Ie(t);
+        return r || j(t.segmentType, t.url);
       }
-      const n = await ke(e.url);
-      return n ? new F(n) : j(e.segmentType, e.url);
+      const n = await Ee(t.url);
+      return n ? new F(n) : j(t.segmentType, t.url);
     }
-    if (e.segmentType === "text")
-      return await Ee(e);
-    e.segmentType === "effect" || e.segmentType;
+    if (t.segmentType === "text")
+      return await ke(t);
+    t.segmentType === "effect" || t.segmentType;
   }
-  async function Ee(e) {
-    const n = nt(e.texts);
+  async function ke(t) {
+    const n = nt(t.texts);
     if (!n)
       return;
-    const [r] = e.texts;
+    const [r] = t.texts;
     if (!r)
       return;
     const d = await it(n, ot(r)), l = A.from(d);
     return new F(l);
   }
-  async function ke(e) {
-    const n = e.startsWith("data:"), r = /^https?:\/\//.test(e);
+  async function Ee(t) {
+    const n = t.startsWith("data:"), r = /^https?:\/\//.test(t);
     if (!n && !r)
       try {
-        await p.add(e);
-        const d = await p.get(e);
+        await f.add(t);
+        const d = await f.get(t);
         if (d instanceof HTMLImageElement)
           return A.from(d);
       } catch {
       }
-    return await Ve(e);
+    return await Ve(t);
   }
-  async function Ce(e) {
-    const n = g.get(e.id);
+  async function Ie(t) {
+    const n = S.get(t.id);
     if (n)
       return n.sprite;
-    const r = W(e.url), d = C !== "element", l = C !== "mp4clip";
-    if (r && S.has(r)) {
+    const r = W(t.url), d = I !== "element", l = I !== "mp4clip";
+    if (r && g.has(r)) {
       if (!l)
-        throw new Error(`[renderer] MP4Clip unsupported for ${e.url}`);
-      const f = await U(e.url).catch((h) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, h);
+        throw new Error(`[renderer] MP4Clip unsupported for ${t.url}`);
+      const p = await U(t.url).catch((h) => {
+        console.warn("[renderer] failed to load video via <video>", t.url, h);
       });
-      return f ? (g.set(e.id, f), f.sprite) : void 0;
+      return p ? (S.set(t.id, p), p.sprite) : void 0;
     }
     if (d) {
-      const f = await oe(e.url).catch((h) => {
-        if (r && te(h) && S.add(r), (!r || !k.has(r)) && (r && k.add(r), console.warn("[renderer] failed to load video via MP4Clip", e.url, h)), !l)
+      const p = await oe(t.url).catch((h) => {
+        if (r && te(h) && g.add(r), (!r || !E.has(r)) && (r && E.add(r), console.warn("[renderer] failed to load video via MP4Clip", t.url, h)), !l)
           throw h;
       });
-      if (f)
-        return g.set(e.id, f), f.sprite;
+      if (p)
+        return S.set(t.id, p), p.sprite;
     }
     if (l) {
-      const f = await U(e.url).catch((h) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, h);
+      const p = await U(t.url).catch((h) => {
+        console.warn("[renderer] failed to load video via <video>", t.url, h);
       });
-      if (f)
-        return g.set(e.id, f), f.sprite;
+      if (p)
+        return S.set(t.id, p), p.sprite;
     }
   }
-  function te(e) {
-    if (!(e instanceof Error))
+  function te(t) {
+    if (!(t instanceof Error))
       return !1;
-    const n = e.message || "";
+    const n = t.message || "";
     return n.includes("stream is done") || n.includes("not emit ready");
   }
-  async function re(e, n) {
-    const r = g.get(e.id);
+  async function re(t, n) {
+    const r = S.get(t.id);
     if (r)
       try {
-        const d = e.fromTime ?? 0, l = Math.max(0, n - e.startTime + d), f = Math.floor(l * 1e3);
+        const d = t.fromTime ?? 0, l = Math.max(0, n - t.startTime + d), p = Math.floor(l * 1e3);
         if (r.kind === "frozen") {
-          const M = W(e.url);
-          if (!M)
+          const T = W(t.url);
+          if (!T)
             return;
-          const x = await Re(e.url, M, { sprite: r.sprite, oldTexture: r.texture });
-          return x ? (g.set(e.id, x), await re(e, n)) : void 0;
+          const k = await Ce(t.url, T, { sprite: r.sprite, oldTexture: r.texture });
+          return k ? (S.set(t.id, k), await re(t, n)) : void 0;
         }
         if (r.kind === "mp4clip") {
-          const M = await r.clip.tick(f);
-          if (M.video) {
-            const x = r.canvas.getContext("2d");
-            x && (x.drawImage(M.video, 0, 0, r.canvas.width, r.canvas.height), ce(r.texture)), M.video.close();
+          const T = await r.clip.tick(p);
+          if (T.video) {
+            const k = r.canvas.getContext("2d");
+            k && (k.drawImage(T.video, 0, 0, r.canvas.width, r.canvas.height), ce(r.texture)), T.video.close();
           }
           return;
         }
@@ -339,48 +342,48 @@ async function ct(t) {
           return;
         await Oe(r, {
           targetSec: h,
-          playbackRate: e.playRate ?? 1
+          playbackRate: t.playRate ?? 1
         });
       } catch (d) {
         console.warn("[renderer] update video frame failed", d);
       }
   }
-  async function Re(e, n, r) {
-    const d = C !== "element", l = C !== "mp4clip";
-    if (S.has(n)) {
+  async function Ce(t, n, r) {
+    const d = I !== "element", l = I !== "mp4clip";
+    if (g.has(n)) {
       if (!l)
-        throw new Error(`[renderer] MP4Clip unsupported for ${e}`);
-      return await U(e, r).catch(() => {
+        throw new Error(`[renderer] MP4Clip unsupported for ${t}`);
+      return await U(t, r).catch(() => {
       });
     }
     if (d) {
-      const f = await oe(e, r).catch((h) => {
-        if (te(h) && S.add(n), !l)
+      const p = await oe(t, r).catch((h) => {
+        if (te(h) && g.add(n), !l)
           throw h;
       });
-      if (f)
-        return f;
+      if (p)
+        return p;
     }
     if (l)
-      return await U(e, r).catch(() => {
+      return await U(t, r).catch(() => {
       });
   }
-  function Ie(e) {
-    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string" && ae(e.url);
+  function Re(t) {
+    return t.segmentType === "frames" && t.type === "video" && typeof t.url == "string" && ae(t.url);
   }
-  function Pe(e, n) {
-    const r = X(e);
+  function Pe(t, n) {
+    const r = X(t);
     if (r <= 0)
       return 0;
     if (n < r)
       return n;
-    const d = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
+    const d = Math.max(1e3 / Math.max(t.fps || 30, 1), 1);
     return Math.max(r - d, 0);
   }
-  async function $e(e) {
-    const n = t.resourceDir ?? at;
+  async function $e(t) {
+    const n = e.resourceDir ?? at;
     try {
-      const r = W(e);
+      const r = W(t);
       if (!r)
         return;
       const d = _e(`${n}/${r}`, "r");
@@ -390,13 +393,13 @@ async function ct(t) {
       return;
     }
   }
-  function B(e) {
-    return !(!e || e.startsWith("data:") || e.startsWith("blob:"));
+  function B(t) {
+    return !(!t || t.startsWith("data:") || t.startsWith("blob:"));
   }
   function Fe() {
-    for (const [e, n] of g) {
+    for (const [t, n] of S) {
       if (n.kind === "mp4clip") {
-        n.clip.destroy(), g.set(e, {
+        n.clip.destroy(), S.set(t, {
           kind: "frozen",
           canvas: n.canvas,
           texture: n.texture,
@@ -408,83 +411,83 @@ async function ct(t) {
       n.kind === "element" && n.video.pause();
     }
   }
-  function ne(e) {
-    if (e.kind === "mp4clip") {
-      e.clip.destroy();
+  function ne(t) {
+    if (t.kind === "mp4clip") {
+      t.clip.destroy();
       return;
     }
-    e.kind !== "frozen" && (e.video.pause(), e.video.removeAttribute("src"), e.video.load());
+    t.kind !== "frozen" && (t.video.pause(), t.video.removeAttribute("src"), t.video.load());
   }
-  function _(e, n, r = 1e3) {
+  function _(t, n, r = 1e3) {
     return new Promise((d, l) => {
-      const f = window.setTimeout(() => {
-        x(), l(new Error(`Timed out waiting for media event: ${n}`));
+      const p = window.setTimeout(() => {
+        k(), l(new Error(`Timed out waiting for media event: ${n}`));
       }, r), h = () => {
-        x(), d();
-      }, M = () => {
-        x();
-        const $ = e.error ? `${e.error.code}` : "unknown";
+        k(), d();
+      }, T = () => {
+        k();
+        const $ = t.error ? `${t.error.code}` : "unknown";
         l(new Error(`Media error (${$}) while waiting for ${n}`));
-      }, x = () => {
-        window.clearTimeout(f), e.removeEventListener(n, h), e.removeEventListener("error", M);
+      }, k = () => {
+        window.clearTimeout(p), t.removeEventListener(n, h), t.removeEventListener("error", T);
       };
-      e.addEventListener(n, h, { once: !0 }), e.addEventListener("error", M, { once: !0 });
+      t.addEventListener(n, h, { once: !0 }), t.addEventListener("error", T, { once: !0 });
     });
   }
-  async function oe(e, n) {
+  async function oe(t, n) {
     let r;
-    B(e) && (r = await $e(e));
+    B(t) && (r = await $e(t));
     let d;
     try {
       if (r)
         d = new z(r);
       else {
-        const $ = await fetch(e);
+        const $ = await fetch(t);
         if (!$.body)
           return;
-        if (B(e)) {
+        if (B(t)) {
           const [D, V] = $.body.tee();
-          p.add(e, { body: V }).catch(() => {
+          f.add(t, { body: V }).catch(() => {
           }), d = new z(D);
         } else
           d = new z($.body);
       }
       await d.ready;
-      const { width: l, height: f } = d.meta, h = document.createElement("canvas");
-      h.width = l || 1, h.height = f || 1;
-      const M = A.from(h), x = n?.sprite ?? new F(M);
-      return n?.sprite && (n.sprite.texture = M, n.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: d, canvas: h, texture: M, sprite: x, meta: { width: l, height: f } };
+      const { width: l, height: p } = d.meta, h = document.createElement("canvas");
+      h.width = l || 1, h.height = p || 1;
+      const T = A.from(h), k = n?.sprite ?? new F(T);
+      return n?.sprite && (n.sprite.texture = T, n.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: d, canvas: h, texture: T, sprite: k, meta: { width: l, height: p } };
     } catch (l) {
       throw d?.destroy(), l;
     }
   }
-  function ie(e) {
-    const r = e.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
+  function ie(t) {
+    const r = t.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
     return ["mp4", "m4v", "mov", "webm"].includes(r) ? "video" : ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "avif"].includes(r) ? "image" : ["mp3", "wav", "aac", "m4a", "ogg", "flac"].includes(r) ? "audio" : "unknown";
   }
-  function ae(e) {
-    const n = ie(e);
+  function ae(t) {
+    const n = ie(t);
     return !(n === "image" || n === "audio");
   }
-  async function U(e, n) {
+  async function U(t, n) {
     const r = document.createElement("video");
-    r.crossOrigin = "anonymous", r.muted = !0, r.playsInline = !0, r.preload = "auto", r.src = e;
+    r.crossOrigin = "anonymous", r.muted = !0, r.playsInline = !0, r.preload = "auto", r.src = t;
     try {
       await _(r, "loadedmetadata", 4e3);
-    } catch (x) {
-      throw r.pause(), r.removeAttribute("src"), r.load(), x;
+    } catch (k) {
+      throw r.pause(), r.removeAttribute("src"), r.load(), k;
     }
-    const d = r.videoWidth || 1, l = r.videoHeight || 1, f = document.createElement("canvas");
-    f.width = d, f.height = l;
-    const h = A.from(f), M = n?.sprite ?? new F(h);
-    return n?.sprite && (n.sprite.texture = h, n.oldTexture?.destroy(!0)), { kind: "element", video: r, canvas: f, texture: h, sprite: M, meta: { width: d, height: l } };
+    const d = r.videoWidth || 1, l = r.videoHeight || 1, p = document.createElement("canvas");
+    p.width = d, p.height = l;
+    const h = A.from(p), T = n?.sprite ?? new F(h);
+    return n?.sprite && (n.sprite.texture = h, n.oldTexture?.destroy(!0)), { kind: "element", video: r, canvas: p, texture: h, sprite: T, meta: { width: d, height: l } };
   }
-  async function Oe(e, n) {
-    const { video: r, canvas: d, texture: l } = e;
+  async function Oe(t, n) {
+    const { video: r, canvas: d, texture: l } = t;
     r.playbackRate = Number.isFinite(n.playbackRate) && n.playbackRate > 0 ? n.playbackRate : 1, v.value ? r.play().catch(() => {
     }) : r.pause();
-    const f = r.currentTime, h = Math.abs(f - n.targetSec), M = v.value ? 0.25 : 0.03;
-    if (Number.isFinite(f) && h > M) {
+    const p = r.currentTime, h = Math.abs(p - n.targetSec), T = v.value ? 0.25 : 0.03;
+    if (Number.isFinite(p) && h > T) {
       try {
         r.currentTime = n.targetSec;
       } catch {
@@ -495,85 +498,85 @@ async function ct(t) {
     if (r.readyState < 2 && (await _(r, "canplay", 250).catch(() => {
     }), r.readyState < 2))
       return;
-    const x = d.getContext("2d");
-    x && (x.drawImage(r, 0, 0, d.width, d.height), ce(l));
+    const k = d.getContext("2d");
+    k && (k.drawImage(r, 0, 0, d.width, d.height), ce(l));
   }
-  function Ve(e) {
+  function Ve(t) {
     return new Promise((n) => {
       const r = new Image();
       r.crossOrigin = "anonymous", r.onload = () => n(A.from(r)), r.onerror = () => {
-        console.warn("[renderer] failed to load image", e), n(void 0);
-      }, r.src = e;
+        console.warn("[renderer] failed to load image", t), n(void 0);
+      }, r.src = t;
     });
   }
-  function ce(e) {
-    const n = e.source;
+  function ce(t) {
+    const n = t.source;
     if ("update" in n && typeof n.update == "function") {
       n.update();
       return;
     }
-    typeof e.update == "function" && e.update();
+    typeof t.update == "function" && t.update();
   }
   function Ae() {
-    L(), b += 1, J.stop(), H(), u.destroy({ children: !0 }), y.clear(), E.clear(), s.clear(), t.app || c.destroy();
+    L(), b += 1, J.stop(), H(), u.destroy({ children: !0 }), m.clear(), M.clear(), s.clear(), e.app || c.destroy();
   }
-  return t.autoPlay && Q(), {
+  return e.autoPlay && Q(), {
     app: c,
     layer: u,
     currentTime: w,
-    duration: m,
+    duration: y,
     isPlaying: v,
     play: Q,
     pause: L,
     tick: ee,
-    seek: be,
-    renderAt: Me,
+    seek: Me,
+    renderAt: be,
     destroy: Ae
   };
 }
-function st(t) {
+function st(e) {
   let o = !1, a = !1, i = null, c = null;
   return async () => {
     i || (i = new Promise((s) => {
       c = s;
     }));
-    const p = i;
+    const f = i;
     if (a)
-      return o = !0, p;
+      return o = !0, f;
     a = !0;
     do
-      o = !1, await t();
+      o = !1, await e();
     while (o);
-    return a = !1, c?.(), i = null, c = null, p;
+    return a = !1, c?.(), i = null, c = null, f;
   };
 }
-function dt(t) {
-  return typeof t == "object" && t !== null && "createReader" in t && "getSize" in t;
+function dt(e) {
+  return typeof e == "object" && e !== null && "createReader" in e && "getSize" in e;
 }
-function ut(t) {
-  return typeof ReadableStream < "u" && t instanceof ReadableStream;
+function ut(e) {
+  return typeof ReadableStream < "u" && e instanceof ReadableStream;
 }
-function lt(t) {
-  return typeof t == "string" || t instanceof Blob || dt(t) || ut(t) ? { source: t } : t;
+function ft(e) {
+  return typeof e == "string" || e instanceof Blob || dt(e) || ut(e) ? { source: e } : e;
 }
-async function fe(t) {
-  if (typeof t == "string") {
-    const o = await fetch(t);
+async function le(e) {
+  if (typeof e == "string") {
+    const o = await fetch(e);
     if (!o.body)
       throw new Error("concatVideos: unable to read video stream from url");
     return o.body;
   }
-  return t instanceof Blob ? t.stream() : t;
+  return e instanceof Blob ? e.stream() : e;
 }
-function ft(t, o) {
+function lt(e, o) {
   let a = !1;
   const i = () => {
     a || (a = !0, o());
-  }, c = t.getReader();
+  }, c = e.getReader();
   return new ReadableStream({
     async pull(u) {
-      const { done: p, value: s } = await c.read();
-      if (p) {
+      const { done: f, value: s } = await c.read();
+      if (f) {
         i(), u.close();
         return;
       }
@@ -588,54 +591,54 @@ function ft(t, o) {
     }
   });
 }
-async function gt(t, o = {}) {
-  if (t.length === 0)
+async function gt(e, o = {}) {
+  if (e.length === 0)
     throw new Error("concatVideos: expected at least one source");
   const {
     onProgress: a,
     width: i,
     height: c,
     ...u
-  } = o, p = t.map(lt), [s, ...y] = p, E = await fe(s.source), S = new z(E);
-  await S.ready;
-  const k = i ?? Math.round(S.meta.width || 0), C = c ?? Math.round(S.meta.height || 0);
-  if (!k || !C)
-    throw S.destroy(), new Error("concatVideos: output width/height is required");
-  const g = new pe({
+  } = o, f = e.map(ft), [s, ...m] = f, M = await le(s.source), g = new z(M);
+  await g.ready;
+  const E = i ?? Math.round(g.meta.width || 0), I = c ?? Math.round(g.meta.height || 0);
+  if (!E || !I)
+    throw g.destroy(), new Error("concatVideos: output width/height is required");
+  const S = new pe({
     ...u,
-    width: k,
-    height: C
+    width: E,
+    height: I
   });
-  a && g.on("OutputProgress", a);
+  a && S.on("OutputProgress", a);
   let w = 0;
   const v = async (b) => {
-    const I = b.meta.duration;
-    if (!Number.isFinite(I) || I <= 0)
+    const R = b.meta.duration;
+    if (!Number.isFinite(R) || R <= 0)
       throw b.destroy(), new Error("concatVideos: invalid clip duration");
-    const T = new he(b);
+    const x = new he(b);
     try {
-      await T.ready, T.rect.x = 0, T.rect.y = 0, T.rect.w = k, T.rect.h = C, T.time.offset = w, T.time.duration = I, await g.addSprite(T), w += I;
+      await x.ready, x.rect.x = 0, x.rect.y = 0, x.rect.w = E, x.rect.h = I, x.time.offset = w, x.time.duration = R, await S.addSprite(x), w += R;
     } finally {
-      T.destroy();
+      x.destroy();
     }
   };
   try {
-    await v(S);
-    for (const b of y) {
-      const I = await fe(b.source), T = new z(I);
-      await T.ready, await v(T);
+    await v(g);
+    for (const b of m) {
+      const R = await le(b.source), x = new z(R);
+      await x.ready, await v(x);
     }
   } catch (b) {
-    throw g.destroy(), b;
+    throw S.destroy(), b;
   }
-  const m = w, R = g.output({ maxTime: m }), P = () => {
-    g.destroy();
+  const y = w, C = S.output({ maxTime: y }), P = () => {
+    S.destroy();
   };
   return {
-    stream: ft(R, P),
-    width: k,
-    height: C,
-    durationMs: Math.round(m / 1e3),
+    stream: lt(C, P),
+    width: E,
+    height: I,
+    durationMs: Math.round(y / 1e3),
     destroy: P
   };
 }
@@ -677,11 +680,11 @@ class G {
       videoSourceMode: c.videoSourceMode ?? "mp4clip"
     });
     this.renderer = u;
-    const p = u.duration.value;
+    const f = u.duration.value;
     return this.meta = {
       width: i.renderer.width,
       height: i.renderer.height,
-      duration: Math.max(0, Math.round(p * 1e3))
+      duration: Math.max(0, Math.round(f * 1e3))
     }, this.meta;
   }
   async tick(o) {
@@ -710,15 +713,15 @@ class G {
     this.destroyed || (this.destroyed = !0, this.renderer?.destroy(), this.app?.destroy(!0));
   }
 }
-function pt(t, o) {
+function pt(e, o) {
   let a = !1;
   const i = () => {
     a || (a = !0, o());
-  }, c = t.getReader();
+  }, c = e.getReader();
   return new ReadableStream({
     async pull(u) {
-      const { done: p, value: s } = await c.read();
-      if (p) {
+      const { done: f, value: s } = await c.read();
+      if (f) {
         i(), u.close();
         return;
       }
@@ -733,56 +736,56 @@ function pt(t, o) {
     }
   });
 }
-async function St(t, o = {}) {
+async function St(e, o = {}) {
   const {
     width: a,
     height: i,
     fps: c,
     onProgress: u,
-    clipOptions: p,
+    clipOptions: f,
     audioSprites: s,
-    ...y
-  } = o, E = a ?? t.width, S = i ?? t.height;
-  if (!E || !S)
+    ...m
+  } = o, M = a ?? e.width, g = i ?? e.height;
+  if (!M || !g)
     throw new Error("composeProtocol: output width/height is required");
-  const k = c ?? t.fps, C = typeof s == "function", g = y.audio ?? (C ? void 0 : !1), w = new pe({
-    ...y,
-    audio: g,
-    width: E,
-    height: S,
-    fps: k
+  const E = c ?? e.fps, I = typeof s == "function", S = m.audio ?? (I ? void 0 : !1), w = new pe({
+    ...m,
+    audio: S,
+    width: M,
+    height: g,
+    fps: E
   });
   u && w.on("OutputProgress", u);
-  let v, m;
+  let v, y;
   try {
-    if (v = new G(t, {
-      width: E,
-      height: S,
-      fps: k,
-      ...p,
+    if (v = new G(e, {
+      width: M,
+      height: g,
+      fps: E,
+      ...f,
       rendererOptions: {
         warmUpResources: !1,
-        ...p?.rendererOptions
+        ...f?.rendererOptions
       }
-    }), await v.ready, m = new he(v), await m.ready, m.time.offset = 0, m.time.duration = v.meta.duration, m.rect.x = 0, m.rect.y = 0, m.rect.w = v.meta.width, m.rect.h = v.meta.height, await w.addSprite(m, { main: !0 }), s) {
-      const I = await s(t);
-      for (const T of I)
-        await w.addSprite(T);
+    }), await v.ready, y = new he(v), await y.ready, y.time.offset = 0, y.time.duration = v.meta.duration, y.rect.x = 0, y.rect.y = 0, y.rect.w = v.meta.width, y.rect.h = v.meta.height, await w.addSprite(y, { main: !0 }), s) {
+      const R = await s(e);
+      for (const x of R)
+        await w.addSprite(x);
     }
-  } catch (I) {
-    throw w.destroy(), I;
+  } catch (R) {
+    throw w.destroy(), R;
   }
-  const R = v?.meta.duration ?? 0;
-  if (!R)
+  const C = v?.meta.duration ?? 0;
+  if (!C)
     throw new Error("composeProtocol: protocol has no duration");
-  const P = w.output({ maxTime: R }), b = () => {
-    m?.destroy(), v?.destroy(), w.destroy();
+  const P = w.output({ maxTime: C }), b = () => {
+    y?.destroy(), v?.destroy(), w.destroy();
   };
   return {
     stream: pt(P, b),
-    width: E,
-    height: S,
-    durationMs: Math.round(R / 1e3),
+    width: M,
+    height: g,
+    durationMs: Math.round(C / 1e3),
     destroy: b
   };
 }