@video-editor/renderer 0.0.1-beta.14 → 0.0.1-beta.16

package/dist/index.js

@@ -1,319 +1,451 @@
-import { createValidator as le, createResourceManager as de } from "@video-editor/protocol";
-import { toRaw as pe, isRef as ve, shallowRef as q, unref as L, ref as W, computed as he, effectScope as ye, watch as k } from "@vue/reactivity";
-import { MP4Clip as _ } from "@webav/av-cliper";
-import { file as me } from "opfs-tools";
-import { Application as we, Sprite as F, Texture as R, Graphics as B, Container as Te } from "pixi.js";
-async function xe(t) {
-  const n = new we();
-  return await n.init({ resizeTo: window, ...t }), n;
+import { createValidator as Se, createResourceManager as Ie, getResourceKey as O } from "@video-editor/protocol";
+import { toRaw as be, isRef as Ce, shallowRef as ee, unref as te, ref as re, computed as Re, effectScope as Fe, watch as U } from "@vue/reactivity";
+import { MP4Clip as $ } from "@webav/av-cliper";
+import { file as Ve } from "opfs-tools";
+import { Application as Ae, Sprite as V, Texture as C, Graphics as ae, Container as De } from "pixi.js";
+async function Pe(n) {
+  const o = new Ae();
+  return await o.init({ resizeTo: window, backgroundAlpha: 0, ...n }), o;
 }
-function Ie(t) {
-  const n = /* @__PURE__ */ new Set();
-  for (const a of t.tracks)
-    for (const i of a.children)
-      i.url && n.add(i.url);
-  return n;
+function Ne(n) {
+  const o = /* @__PURE__ */ new Set();
+  for (const a of n.tracks)
+    for (const c of a.children)
+      c.url && o.add(c.url);
+  return o;
 }
-function ge(t, n) {
+function Oe(n, o) {
   const a = [];
-  return t.tracks.forEach((i, u) => {
-    i.children.forEach((s, p) => {
-      s.startTime <= n && n < s.endTime && a.push({ segment: s, trackIndex: u, childIndex: p });
+  return n.tracks.forEach((c, v) => {
+    c.children.forEach((p, w) => {
+      p.startTime <= o && o < p.endTime && a.push({ segment: p, trackIndex: v, childIndex: w });
     });
-  }), a.sort((i, u) => i.trackIndex === u.trackIndex ? i.childIndex - u.childIndex : i.trackIndex - u.trackIndex);
+  }), a.sort((c, v) => c.trackIndex === v.trackIndex ? c.childIndex - v.childIndex : c.trackIndex - v.trackIndex);
 }
-function Me(t, n, a, i) {
-  const u = Ce(n);
-  t instanceof F ? (t.anchor.set(0.5), t.width = a, t.height = i, t.x = a / 2, t.y = i / 2, t.texture.source?.addEventListener?.("error", () => {
-    t.texture = R.from(Se(a, i));
-  }, { once: !0 })) : t instanceof B && (t.clear(), t.rect(0, 0, a, i).fill({ color: G("url" in n && typeof n.url == "string" ? n.url : n.segmentType), alpha: Q(n) ? u : 0.35 }), t.pivot.set(a / 2, i / 2), t.position.set(a / 2, i / 2)), t.alpha = u;
-  const s = Re(n);
-  if (s) {
-    const [p, I] = s.position ?? [0, 0], [v, y] = s.scale ?? [1, 1], h = s.rotation?.[2] ?? 0;
-    t.position.set(a / 2 + p * a / 2, i / 2 - I * i / 2), t.scale.set(v, y), t.rotation = h / 180 * Math.PI;
+function Ue(n, o, a, c) {
+  const v = Le(o);
+  n instanceof V ? (n.anchor.set(0.5), n.width = a, n.height = c, n.x = a / 2, n.y = c / 2, n.texture.source?.addEventListener?.("error", () => {
+    n.texture = C.from($e(a, c));
+  }, { once: !0 })) : n instanceof ae && (n.clear(), n.rect(0, 0, a, c).fill({ color: ce("url" in o && typeof o.url == "string" ? o.url : o.segmentType), alpha: se(o) ? v : 0.35 }), n.pivot.set(a / 2, c / 2), n.position.set(a / 2, c / 2)), n.alpha = v;
+  const p = ze(o);
+  if (p) {
+    const [w, S] = p.position ?? [0, 0], [y, k] = p.scale ?? [1, 1], E = p.rotation?.[2] ?? 0;
+    n.position.set(a / 2 + w * a / 2, c / 2 - S * c / 2), n.scale.set(y, k), n.rotation = E / 180 * Math.PI;
   }
 }
-function H(t, n) {
-  const a = new B();
-  return a.rect(0, 0, 10, 10).fill({ color: G(n ?? t), alpha: 1 }), a;
+function L(n, o) {
+  const a = new ae();
+  return a.rect(0, 0, 10, 10).fill({ color: ce(o ?? n), alpha: 1 }), a;
 }
-function Se(t, n, a) {
-  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${n}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
-  return `data:image/svg+xml;base64,${btoa(i)}`;
+function $e(n, o, a) {
+  const c = `<svg xmlns="http://www.w3.org/2000/svg" width="${n}" height="${o}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
+  return `data:image/svg+xml;base64,${btoa(c)}`;
 }
-function G(t) {
-  let n = 0;
-  for (let a = 0; a < t.length; a++)
-    n = t.charCodeAt(a) + ((n << 5) - n);
-  return n & 16777215;
+function ce(n) {
+  let o = 0;
+  for (let a = 0; a < n.length; a++)
+    o = n.charCodeAt(a) + ((o << 5) - o);
+  return o & 16777215;
 }
-function z(t) {
-  const n = t.tracks.flatMap((a) => a.children.map((i) => i.endTime));
-  return n.length ? Math.max(...n) : 0;
+function ne(n) {
+  const o = n.tracks.flatMap((a) => a.children.map((c) => c.endTime));
+  return o.length ? Math.max(...o) : 0;
 }
-function J(t, n, a) {
-  return Math.min(Math.max(t, n), a);
+function ie(n, o, a) {
+  return Math.min(Math.max(n, o), a);
 }
-function Y(t) {
-  const n = pe(t);
-  return JSON.parse(JSON.stringify(n));
+function oe(n) {
+  const o = be(n);
+  return JSON.parse(JSON.stringify(o));
 }
-function Q(t) {
-  return "opacity" in t;
+function se(n) {
+  return "opacity" in n;
 }
-function Ce(t) {
-  return Q(t) && typeof t.opacity == "number" ? t.opacity : 1;
+function Le(n) {
+  return se(n) && typeof n.opacity == "number" ? n.opacity : 1;
 }
-function De(t) {
-  return "transform" in t;
+function We(n) {
+  return "transform" in n;
 }
-function Re(t) {
-  if (De(t))
-    return t.transform;
+function ze(n) {
+  if (We(n))
+    return n.transform;
 }
-const Ae = "/video-editor-res";
-async function $e(t) {
-  const n = le(), a = ve(t.protocol) ? t.protocol : q(t.protocol), i = q(
-    n.verify(Y(L(a)))
-  ), u = t.app ?? await xe(t.appOptions), s = new Te();
-  u.stage.addChild(s);
-  const p = de({ dir: t.resourceDir }), I = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), f = W(0), T = W(!1), m = he(() => z(i.value));
-  let g, C = 0;
-  async function j(e) {
-    const { protocol: o, at: r, layer: c } = e, l = ie(o, r), x = ge(o, l), d = e.app.renderer.width, w = e.app.renderer.height, M = [];
-    for (const { segment: D } of x) {
-      const P = await e.getDisplay(D);
-      P && (Me(P, D, d, w), ae(D) && await oe(D, l), M.push(P));
+const qe = "/video-editor-res";
+async function Be(n) {
+  const o = Se(), a = Ce(n.protocol) ? n.protocol : ee(n.protocol), c = ee(
+    o.verify(oe(te(a)))
+  ), v = n.app ?? await Pe(n.appOptions), p = new De();
+  v.stage.addChild(p);
+  const w = Ie({ dir: n.resourceDir }), S = /* @__PURE__ */ new Set(), y = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set(), W = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Map(), h = re(0), x = re(!1), g = Re(() => ne(c.value));
+  let I, R = 0;
+  async function ue(e) {
+    const { protocol: r, at: t, layer: i } = e, s = xe(r, t), u = Oe(r, s), d = e.app.renderer.width, f = e.app.renderer.height, l = [];
+    for (const { segment: M } of u) {
+      const b = await e.getDisplay(M);
+      b && (Ue(b, M, d, f), ye(M) && await j(M, s), l.push(b));
     }
-    c.removeChildren();
-    const S = M.filter(Boolean);
-    S.length && c.addChild(...S), e.app.render();
-  }
-  const O = Ee(() => j({
-    app: u,
-    layer: s,
-    protocol: i.value,
-    at: f.value,
-    getDisplay: ee
-  })), N = ye();
-  N.run(() => {
-    k(
-      () => L(a),
+    i.removeChildren();
+    const T = l.filter(Boolean);
+    T.length && i.addChild(...T), e.app.render();
+  }
+  const z = He(() => ue({
+    app: v,
+    layer: p,
+    protocol: c.value,
+    at: h.value,
+    getDisplay: pe
+  })), q = Fe();
+  q.run(() => {
+    U(
+      () => te(a),
       (e) => {
         try {
-          i.value = n.verify(Y(e));
-        } catch (o) {
-          console.error("[renderer] invalid protocol update", o);
+          c.value = o.verify(oe(e));
+        } catch (r) {
+          console.error("[renderer] invalid protocol update", r);
           return;
         }
-        $(), K(i.value), X(i.value), A(), O();
+        H(), de(c.value), fe(c.value), A(), z();
       },
       { deep: !0, immediate: !0 }
-    ), k(f, () => {
-      A(), O();
-    }), k(m, () => A());
+    ), U(h, () => {
+      A(), z();
+    }), U(g, () => A());
   });
   function A() {
-    const e = m.value;
-    e <= 0 ? f.value = 0 : f.value > e ? f.value = e : f.value < 0 && (f.value = 0);
+    const e = g.value;
+    e <= 0 ? h.value = 0 : h.value > e ? h.value = e : h.value < 0 && (h.value = 0);
   }
-  function K(e) {
-    for (const o of Ie(e))
-      I.has(o) || (I.add(o), p.add(o).catch(() => {
+  function de(e) {
+    for (const r of Ne(e))
+      S.has(r) || (S.add(r), Q(r) !== "video" && P(r) && w.add(r).catch(() => {
       }));
   }
-  function X(e) {
-    const o = new Set(e.tracks.flatMap((r) => r.children.map((c) => c.id)));
-    for (const [r, c] of v)
-      o.has(r) || (c.destroy(), v.delete(r));
-    for (const [r, c] of h)
-      o.has(r) || (c.clip.destroy(), h.delete(r));
-  }
-  function $() {
-    s.removeChildren();
-    for (const e of v.values())
-      e.destroy();
-    v.clear(), y.clear();
-    for (const { clip: e } of h.values())
+  function fe(e) {
+    const r = new Set(e.tracks.flatMap((t) => t.children.map((i) => i.id)));
+    for (const [t, i] of y)
+      r.has(t) || (i.destroy(), y.delete(t));
+    for (const [t, i] of m)
+      r.has(t) || (B(i), m.delete(t));
+  }
+  function H() {
+    p.removeChildren();
+    for (const e of y.values())
       e.destroy();
-    h.clear();
+    y.clear(), k.clear();
+    for (const e of m.values())
+      B(e);
+    m.clear();
   }
-  function U() {
-    T.value || (T.value = !0, C = performance.now(), g = requestAnimationFrame(V));
+  function K() {
+    x.value || (x.value = !0, R = performance.now(), I = requestAnimationFrame(_));
   }
-  function E() {
-    T.value = !1, g !== void 0 && cancelAnimationFrame(g), g = void 0;
+  function D() {
+    x.value = !1, I !== void 0 && cancelAnimationFrame(I), I = void 0, ke();
   }
-  function V() {
-    b(), T.value && (g = requestAnimationFrame(V));
+  function _() {
+    J(), x.value && (I = requestAnimationFrame(_));
   }
-  function b(e) {
-    if (!T.value && e === void 0)
+  function J(e) {
+    if (!x.value && e === void 0)
       return;
-    const o = performance.now(), r = e ?? (C ? o - C : 0);
-    C = o, r !== 0 && (f.value = J(
-      f.value + r,
+    const r = performance.now(), t = e ?? (R ? r - R : 0);
+    R = r, t !== 0 && (h.value = ie(
+      h.value + t,
       0,
-      m.value || Number.POSITIVE_INFINITY
-    ), m.value > 0 && f.value >= m.value && E());
+      g.value || Number.POSITIVE_INFINITY
+    ), g.value > 0 && h.value >= g.value && D());
   }
-  function Z(e) {
-    f.value = J(e, 0, m.value || Number.POSITIVE_INFINITY);
+  function le(e) {
+    h.value = ie(e, 0, g.value || Number.POSITIVE_INFINITY);
   }
-  async function ee(e) {
-    const o = v.get(e.id);
-    if (o)
-      return o;
+  async function pe(e) {
     const r = y.get(e.id);
     if (r)
       return r;
-    const c = te(e);
-    y.set(e.id, c);
-    const l = await c;
-    return l && v.set(e.id, l), y.delete(e.id), l;
+    const t = k.get(e.id);
+    if (t)
+      return t;
+    const i = ve(e);
+    k.set(e.id, i);
+    const s = await i;
+    return s && y.set(e.id, s), k.delete(e.id), s;
   }
-  async function te(e) {
+  async function ve(e) {
     if (e.segmentType === "frames" || e.segmentType === "sticker") {
       if (!e.url)
-        return H(e.segmentType);
-      if ("type" in e && e.type === "video") {
-        const r = await ne(e);
-        if (r)
-          return r;
+        return L(e.segmentType);
+      if ("type" in e && e.type === "video" && X(e.url)) {
+        const t = await he(e);
+        return t || L(e.segmentType, e.url);
       }
-      const o = await re(e.url);
-      return o ? new F(o) : H(e.segmentType, e.url);
+      const r = await me(e.url);
+      return r ? new V(r) : L(e.segmentType, e.url);
     }
     e.segmentType !== "text" && (e.segmentType === "effect" || e.segmentType);
   }
-  async function re(e) {
-    const o = e.startsWith("data:"), r = /^https?:\/\//.test(e);
-    if (!o && !r)
+  async function me(e) {
+    const r = e.startsWith("data:"), t = /^https?:\/\//.test(e);
+    if (!r && !t)
       try {
-        await p.add(e);
-        const c = await p.get(e);
-        if (c instanceof HTMLImageElement)
-          return R.from(c);
+        await w.add(e);
+        const i = await w.get(e);
+        if (i instanceof HTMLImageElement)
+          return C.from(i);
       } catch {
       }
-    return await se(e);
+    return await Ee(e);
   }
-  async function ne(e) {
-    const o = h.get(e.id);
-    if (o)
-      return o.sprite;
-    let r;
-    try {
-      await p.add(e.url), r = await ce(e.url);
-    } catch {
-      r = void 0;
+  async function he(e) {
+    const r = m.get(e.id);
+    if (r)
+      return r.sprite;
+    const t = O(e.url);
+    if (t && E.has(t)) {
+      const u = await F(e.url).catch((d) => {
+        console.warn("[renderer] failed to load video via <video>", e.url, d);
+      });
+      return u ? (m.set(e.id, u), u.sprite) : void 0;
     }
-    let c;
-    try {
-      if (r)
-        c = new _(r);
-      else {
-        const S = await fetch(e.url);
-        if (!S.body)
+    const i = await G(e.url).catch((u) => {
+      t && Y(u) && E.add(t), (!t || !W.has(t)) && (t && W.add(t), console.warn("[renderer] failed to load video via MP4Clip", e.url, u));
+    });
+    if (i)
+      return m.set(e.id, i), i.sprite;
+    const s = await F(e.url).catch((u) => {
+      console.warn("[renderer] failed to load video via <video>", e.url, u);
+    });
+    if (s)
+      return m.set(e.id, s), s.sprite;
+  }
+  function Y(e) {
+    if (!(e instanceof Error))
+      return !1;
+    const r = e.message || "";
+    return r.includes("stream is done") || r.includes("not emit ready");
+  }
+  async function j(e, r) {
+    const t = m.get(e.id);
+    if (t)
+      try {
+        const i = e.fromTime ?? 0, s = Math.max(0, r - e.startTime + i), u = Math.floor(s * 1e3);
+        if (t.kind === "frozen") {
+          const f = O(e.url);
+          if (!f)
+            return;
+          const l = await we(e.url, f, { sprite: t.sprite, oldTexture: t.texture });
+          return l ? (m.set(e.id, l), await j(e, r)) : void 0;
+        }
+        if (t.kind === "mp4clip") {
+          const f = await t.clip.tick(u);
+          if (f.video) {
+            const l = t.canvas.getContext("2d");
+            l && (l.drawImage(f.video, 0, 0, t.canvas.width, t.canvas.height), Z(t.texture)), f.video.close();
+          }
+          return;
+        }
+        const d = s / 1e3;
+        if (!Number.isFinite(d) || t.kind !== "element")
           return;
-        c = new _(S.body);
+        await ge(t, {
+          targetSec: d,
+          playbackRate: e.playRate ?? 1
+        });
+      } catch (i) {
+        console.warn("[renderer] update video frame failed", i);
       }
+  }
+  async function we(e, r, t) {
+    if (E.has(r))
+      return await F(e, t).catch(() => {
+      });
+    const i = await G(e, t).catch((s) => {
+      Y(s) && E.add(r);
+    });
+    return i || await F(e, t).catch(() => {
+    });
+  }
+  function ye(e) {
+    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string" && X(e.url);
+  }
+  function xe(e, r) {
+    const t = ne(e);
+    if (t <= 0)
+      return 0;
+    if (r < t)
+      return r;
+    const i = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
+    return Math.max(t - i, 0);
+  }
+  async function Te(e) {
+    const r = n.resourceDir ?? qe;
+    try {
+      const t = O(e);
+      if (!t)
+        return;
+      const i = Ve(`${r}/${t}`, "r");
+      if (await i.exists())
+        return i;
     } catch {
       return;
     }
-    try {
-      await c.ready;
-    } catch {
-      c.destroy();
+  }
+  function P(e) {
+    return !(!e || e.startsWith("data:") || e.startsWith("blob:"));
+  }
+  function ke() {
+    for (const [e, r] of m) {
+      if (r.kind === "mp4clip") {
+        r.clip.destroy(), m.set(e, {
+          kind: "frozen",
+          canvas: r.canvas,
+          texture: r.texture,
+          sprite: r.sprite,
+          meta: r.meta
+        });
+        continue;
+      }
+      r.kind === "element" && r.video.pause();
+    }
+  }
+  function B(e) {
+    if (e.kind === "mp4clip") {
+      e.clip.destroy();
       return;
     }
-    const { width: l, height: x } = c.meta, d = document.createElement("canvas");
-    d.width = l || 1, d.height = x || 1;
-    const w = R.from(d), M = new F(w);
-    return h.set(e.id, { clip: c, canvas: d, texture: w, sprite: M, meta: { width: l, height: x } }), M;
+    e.kind !== "frozen" && (e.video.pause(), e.video.removeAttribute("src"), e.video.load());
   }
-  async function oe(e, o) {
-    const r = h.get(e.id);
-    if (r)
-      try {
-        const c = e.fromTime ?? 0, l = Math.max(0, o - e.startTime + c), x = Math.floor(l * 1e3), d = await r.clip.tick(x);
-        if (d.video) {
-          const w = r.canvas.getContext("2d");
-          w && (w.drawImage(d.video, 0, 0, r.canvas.width, r.canvas.height), ue(r.texture)), d.video.close();
-        }
-      } catch (c) {
-        console.warn("[renderer] update video frame failed", c);
+  function N(e, r, t = 1e3) {
+    return new Promise((i, s) => {
+      const u = window.setTimeout(() => {
+        l(), s(new Error(`Timed out waiting for media event: ${r}`));
+      }, t), d = () => {
+        l(), i();
+      }, f = () => {
+        l();
+        const T = e.error ? `${e.error.code}` : "unknown";
+        s(new Error(`Media error (${T}) while waiting for ${r}`));
+      }, l = () => {
+        window.clearTimeout(u), e.removeEventListener(r, d), e.removeEventListener("error", f);
+      };
+      e.addEventListener(r, d, { once: !0 }), e.addEventListener("error", f, { once: !0 });
+    });
+  }
+  async function G(e, r) {
+    let t;
+    P(e) && (t = await Te(e));
+    let i;
+    try {
+      if (t)
+        i = new $(t);
+      else {
+        const T = await fetch(e);
+        if (!T.body)
+          return;
+        if (P(e)) {
+          const [M, b] = T.body.tee();
+          w.add(e, { body: b }).catch(() => {
+          }), i = new $(M);
+        } else
+          i = new $(T.body);
       }
+      await i.ready;
+      const { width: s, height: u } = i.meta, d = document.createElement("canvas");
+      d.width = s || 1, d.height = u || 1;
+      const f = C.from(d), l = r?.sprite ?? new V(f);
+      return r?.sprite && (r.sprite.texture = f, r.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: i, canvas: d, texture: f, sprite: l, meta: { width: s, height: u } };
+    } catch (s) {
+      throw i?.destroy(), s;
+    }
   }
-  function ae(e) {
-    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string";
+  function Q(e) {
+    const t = e.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
+    return ["mp4", "m4v", "mov", "webm"].includes(t) ? "video" : ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "avif"].includes(t) ? "image" : ["mp3", "wav", "aac", "m4a", "ogg", "flac"].includes(t) ? "audio" : "unknown";
   }
-  function ie(e, o) {
-    const r = z(e);
-    if (r <= 0)
-      return 0;
-    if (o < r)
-      return o;
-    const c = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
-    return Math.max(r - c, 0);
+  function X(e) {
+    const r = Q(e);
+    return !(r === "image" || r === "audio");
   }
-  async function ce(e) {
-    const o = t.resourceDir ?? Ae;
+  async function F(e, r) {
+    const t = document.createElement("video");
+    t.crossOrigin = "anonymous", t.muted = !0, t.playsInline = !0, t.preload = "auto", t.src = e;
     try {
-      const r = me(`${o}/${e}`);
-      if (await r.exists())
-        return r;
-    } catch {
-      return;
+      await N(t, "loadedmetadata", 4e3);
+    } catch (l) {
+      throw t.pause(), t.removeAttribute("src"), t.load(), l;
     }
+    const i = t.videoWidth || 1, s = t.videoHeight || 1, u = document.createElement("canvas");
+    u.width = i, u.height = s;
+    const d = C.from(u), f = r?.sprite ?? new V(d);
+    return r?.sprite && (r.sprite.texture = d, r.oldTexture?.destroy(!0)), { kind: "element", video: t, canvas: u, texture: d, sprite: f, meta: { width: i, height: s } };
   }
-  function se(e) {
-    return new Promise((o) => {
-      const r = new Image();
-      r.crossOrigin = "anonymous", r.onload = () => o(R.from(r)), r.onerror = () => {
-        console.warn("[renderer] failed to load image", e), o(void 0);
-      }, r.src = e;
+  async function ge(e, r) {
+    const { video: t, canvas: i, texture: s } = e;
+    t.playbackRate = Number.isFinite(r.playbackRate) && r.playbackRate > 0 ? r.playbackRate : 1, x.value ? t.play().catch(() => {
+    }) : t.pause();
+    const u = t.currentTime, d = Math.abs(u - r.targetSec), f = x.value ? 0.25 : 0.03;
+    if (Number.isFinite(u) && d > f) {
+      try {
+        t.currentTime = r.targetSec;
+      } catch {
+      }
+      x.value || await N(t, "seeked", 250).catch(() => {
+      });
+    }
+    if (t.readyState < 2 && (await N(t, "canplay", 250).catch(() => {
+    }), t.readyState < 2))
+      return;
+    const l = i.getContext("2d");
+    l && (l.drawImage(t, 0, 0, i.width, i.height), Z(s));
+  }
+  function Ee(e) {
+    return new Promise((r) => {
+      const t = new Image();
+      t.crossOrigin = "anonymous", t.onload = () => r(C.from(t)), t.onerror = () => {
+        console.warn("[renderer] failed to load image", e), r(void 0);
+      }, t.src = e;
     });
   }
-  function ue(e) {
-    const o = e.source;
-    if ("update" in o && typeof o.update == "function") {
-      o.update();
+  function Z(e) {
+    const r = e.source;
+    if ("update" in r && typeof r.update == "function") {
+      r.update();
       return;
     }
     typeof e.update == "function" && e.update();
   }
-  function fe() {
-    E(), N.stop(), $(), s.destroy({ children: !0 }), v.clear(), y.clear(), I.clear(), t.app || u.destroy();
-  }
-  return t.autoPlay && U(), {
-    app: u,
-    layer: s,
-    currentTime: f,
-    duration: m,
-    isPlaying: T,
-    play: U,
-    pause: E,
-    tick: b,
-    seek: Z,
-    destroy: fe
+  function Me() {
+    D(), q.stop(), H(), p.destroy({ children: !0 }), y.clear(), k.clear(), S.clear(), n.app || v.destroy();
+  }
+  return n.autoPlay && K(), {
+    app: v,
+    layer: p,
+    currentTime: h,
+    duration: g,
+    isPlaying: x,
+    play: K,
+    pause: D,
+    tick: J,
+    seek: le,
+    destroy: Me
   };
 }
-function Ee(t) {
-  let n = !1, a = !1;
+function He(n) {
+  let o = !1, a = !1;
   return async () => {
     if (a) {
-      n = !0;
+      o = !0;
       return;
     }
     a = !0;
     do
-      n = !1, await t();
-    while (n);
+      o = !1, await n();
+    while (o);
     a = !1;
   };
 }
 export {
-  $e as createRenderer
+  Be as createRenderer
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/2d/index.ts","../src/helpers.ts","../src/index.ts"],"sourcesContent":["/// <reference types=\"vite/client\" />\nimport type { ApplicationOptions } from 'pixi.js'\nimport { Application } from 'pixi.js'\n\ndeclare global {\n\n  // eslint-disable-next-line vars-on-top\n  var __PIXI_APP__: Application\n}\n\nexport async function createApp(opts?: Partial<ApplicationOptions>) {\n  const app = new Application()\n\n  await app.init({ resizeTo: window, ...opts })\n\n  if (import.meta.env.DEV) {\n    globalThis.__PIXI_APP__ = app\n  }\n\n  return app\n}\n","import type { ITransform, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { PixiDisplayObject } from './types'\nimport { toRaw } from '@vue/reactivity'\nimport { Graphics, Sprite, Texture } from 'pixi.js'\n\nexport function collectResourceUrls(protocol: IVideoProtocol) {\n  const urls = new Set<string>()\n  for (const track of protocol.tracks) {\n    for (const segment of track.children) {\n      if (segment.url)\n        urls.add(segment.url)\n    }\n  }\n  return urls\n}\n\nexport function collectActiveSegments(protocol: IVideoProtocol, at: number) {\n  const active: { segment: SegmentUnion, trackIndex: number, childIndex: number }[] = []\n  protocol.tracks.forEach((track, trackIndex) => {\n    track.children.forEach((segment, childIndex) => {\n      if (segment.startTime <= at && at < segment.endTime)\n        active.push({ segment, trackIndex, childIndex })\n    })\n  })\n\n  return active.sort((a, b) => {\n    if (a.trackIndex === b.trackIndex)\n      return a.childIndex - b.childIndex\n    return a.trackIndex - b.trackIndex\n  })\n}\n\nexport function applyDisplayProps(display: PixiDisplayObject, segment: SegmentUnion, width: number, height: number) {\n  const opacity = readOpacity(segment)\n  // size\n  if (display instanceof Sprite) {\n    display.anchor.set(0.5)\n    display.width = width\n    display.height = height\n    display.x = width / 2\n    display.y = height / 2\n    const src = display.texture.source as { addEventListener?: (type: string, cb: () => void, opts?: AddEventListenerOptions) => void } | undefined\n    src?.addEventListener?.('error', () => {\n      // fallback to a colored rect if texture failed\n      display.texture = Texture.from(placeholderTexture(width, height))\n    }, { once: true })\n  }\n  else if (display instanceof Graphics) {\n    display.clear()\n    display\n      .rect(0, 0, width, height)\n      .fill({ color: stringToColor('url' in segment && typeof segment.url === 'string' ? segment.url : segment.segmentType), alpha: hasOpacity(segment) ? opacity : 0.35 })\n    display.pivot.set(width / 2, height / 2)\n    display.position.set(width / 2, height / 2)\n  }\n\n  display.alpha = opacity\n\n  // simple 2D transform\n  const transform = readTransform(segment)\n  if (transform) {\n    const [px, py] = transform.position ?? [0, 0]\n    const [sx, sy] = transform.scale ?? [1, 1]\n    const rotation = transform.rotation?.[2] ?? 0\n\n    display.position.set(width / 2 + (px * width) / 2, height / 2 - (py * height) / 2)\n    display.scale.set(sx, sy)\n    display.rotation = (rotation / 180) * Math.PI\n  }\n}\n\nexport function placeholder(key: string, url?: string) {\n  const g = new Graphics()\n  g.rect(0, 0, 10, 10).fill({ color: stringToColor(url ?? key), alpha: 1 })\n  return g\n}\n\nexport function placeholderTexture(width: number, height: number, color?: string) {\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><rect width=\"100%\" height=\"100%\" fill=\"${color ?? '#0f172a'}\" fill-opacity=\"0.8\"/></svg>`\n  return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n\nexport function stringToColor(key: string) {\n  let hash = 0\n  for (let i = 0; i < key.length; i++)\n    hash = key.charCodeAt(i) + ((hash << 5) - hash)\n  return hash & 0x00FFFFFF\n}\n\nexport function computeDuration(protocol: IVideoProtocol) {\n  const endTimes = protocol.tracks.flatMap(track => track.children.map(seg => seg.endTime))\n  return endTimes.length ? Math.max(...endTimes) : 0\n}\n\nexport function clamp(num: number, min: number, max: number) {\n  return Math.min(Math.max(num, min), max)\n}\n\nexport function cloneProtocol(protocol: IVideoProtocol) {\n  const raw = toRaw(protocol) as IVideoProtocol\n  // use JSON clone to avoid structuredClone errors on proxies (e.g., Vue reactive)\n  return JSON.parse(JSON.stringify(raw)) as IVideoProtocol\n}\n\nfunction hasOpacity(segment: SegmentUnion): segment is SegmentUnion & { opacity?: number } {\n  return 'opacity' in segment\n}\n\nfunction readOpacity(segment: SegmentUnion) {\n  if (hasOpacity(segment) && typeof segment.opacity === 'number')\n    return segment.opacity\n  return 1\n}\n\nfunction hasTransform(segment: SegmentUnion): segment is SegmentUnion & { transform?: ITransform } {\n  return 'transform' in segment\n}\n\nfunction readTransform(segment: SegmentUnion) {\n  if (hasTransform(segment))\n    return segment.transform\n  return undefined\n}\n","import type { IVideoFramesSegment, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { ComputedRef, Ref, ShallowRef } from '@vue/reactivity'\nimport type { Application, ApplicationOptions } from 'pixi.js'\nimport type { MaybeRef, PixiDisplayObject } from './types'\nimport { createResourceManager, createValidator } from '@video-editor/protocol'\nimport {\n  computed,\n  effectScope,\n  isRef,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from '@vue/reactivity'\nimport { MP4Clip } from '@webav/av-cliper'\nimport { file as opfsFile } from 'opfs-tools'\nimport { Container, Sprite, Texture } from 'pixi.js'\nimport { createApp as create2dApp } from './2d'\nimport {\n  applyDisplayProps,\n  clamp,\n  cloneProtocol,\n  collectActiveSegments,\n  collectResourceUrls,\n  computeDuration,\n  placeholder,\n} from './helpers'\n\nconst DEFAULT_RES_DIR = '/video-editor-res'\n\nexport interface RendererOptions {\n  protocol: MaybeRef<IVideoProtocol>\n  app?: Application\n  appOptions?: Partial<ApplicationOptions>\n  resourceDir?: string\n  autoPlay?: boolean\n}\n\nexport interface Renderer {\n  app: Application\n  layer: Container\n  currentTime: Ref<number>\n  duration: ComputedRef<number>\n  isPlaying: Ref<boolean>\n  play: () => void\n  pause: () => void\n  tick: (deltaMs?: number) => void\n  seek: (time: number) => void\n  destroy: () => void\n}\n\n/**\n * Create a renderer that reacts to protocol updates and drives playback state.\n * - Pass a reactive `protocol` (Ref/readonly/normal object)\n * - Call `play/pause/seek/tick` to drive the timeline\n * - Rendering updates when `protocol` or `currentTime` changes\n */\nexport async function createRenderer(opts: RendererOptions): Promise<Renderer> {\n  const validator = createValidator()\n  const protocolInput: Ref<IVideoProtocol> | ShallowRef<IVideoProtocol>\n    = isRef(opts.protocol) ? opts.protocol : shallowRef(opts.protocol)\n  const validatedProtocol: ShallowRef<IVideoProtocol> = shallowRef(\n    validator.verify(cloneProtocol(unref(protocolInput))),\n  )\n\n  const app = opts.app ?? await create2dApp(opts.appOptions)\n  const layer = new Container()\n  app.stage.addChild(layer)\n\n  const resourceManager = createResourceManager({ dir: opts.resourceDir })\n  const resourceWarmUp = new Set<string>()\n  const displayCache = new Map<string, PixiDisplayObject>()\n  const displayLoading = new Map<string, Promise<PixiDisplayObject | undefined>>()\n  const videoEntries = new Map<string, {\n    clip: MP4Clip\n    canvas: HTMLCanvasElement\n    texture: Texture\n    sprite: Sprite\n    meta?: { width: number, height: number }\n  }>()\n\n  const currentTime = ref(0)\n  const isPlaying = ref(false)\n  const duration = computed(() => computeDuration(validatedProtocol.value))\n\n  let rafId: number | undefined\n  let lastTickAt = 0\n\n  interface RenderTask {\n    app: Application\n    layer: Container\n    protocol: IVideoProtocol\n    at: number\n    getDisplay: (segment: SegmentUnion) => Promise<PixiDisplayObject | undefined>\n  }\n\n  async function renderScene(task: RenderTask) {\n    const { protocol, at, layer } = task\n    const renderAt = normalizeRenderTime(protocol, at)\n    const active = collectActiveSegments(protocol, renderAt)\n    const stageWidth = task.app.renderer.width\n    const stageHeight = task.app.renderer.height\n\n    const renders: (PixiDisplayObject | undefined)[] = []\n    for (const { segment } of active) {\n      const display = await task.getDisplay(segment)\n      if (!display)\n        continue\n      applyDisplayProps(display, segment, stageWidth, stageHeight)\n      if (isVideoSegment(segment))\n        await updateVideoFrame(segment, renderAt)\n      renders.push(display)\n    }\n\n    layer.removeChildren()\n    const cleaned = renders.filter(Boolean) as PixiDisplayObject[]\n    if (cleaned.length)\n      layer.addChild(...cleaned)\n    task.app.render()\n  }\n\n  const queueRender = createRenderQueue(() => renderScene({\n    app,\n    layer,\n    protocol: validatedProtocol.value,\n    at: currentTime.value,\n    getDisplay: getDisplayForSegment,\n  }))\n\n  const scope = effectScope()\n  scope.run(() => {\n    // Sync external protocol mutations into a verified snapshot the renderer can rely on.\n    watch(\n      () => unref(protocolInput),\n      (protocol) => {\n        try {\n          validatedProtocol.value = validator.verify(cloneProtocol(protocol))\n        }\n        catch (err) {\n          console.error('[renderer] invalid protocol update', err)\n          return\n        }\n        clearDisplays()\n        warmUpResources(validatedProtocol.value)\n        cleanupCache(validatedProtocol.value)\n        clampCurrentTime()\n        queueRender()\n      },\n      { deep: true, immediate: true },\n    )\n\n    // React to time changes.\n    watch(currentTime, () => {\n      clampCurrentTime()\n      queueRender()\n    })\n\n    // Keep duration/currentTime in sync with protocol updates.\n    watch(duration, () => clampCurrentTime())\n  })\n\n  function clampCurrentTime() {\n    const nextDuration = duration.value\n    if (nextDuration <= 0)\n      currentTime.value = 0\n    else if (currentTime.value > nextDuration)\n      currentTime.value = nextDuration\n    else if (currentTime.value < 0)\n      currentTime.value = 0\n  }\n\n  function warmUpResources(protocol: IVideoProtocol) {\n    for (const url of collectResourceUrls(protocol)) {\n      if (resourceWarmUp.has(url))\n        continue\n\n      resourceWarmUp.add(url)\n      resourceManager.add(url).catch(() => {\n        // noop – render will fall back to Texture.from(url)\n      })\n    }\n  }\n\n  function cleanupCache(protocol: IVideoProtocol) {\n    const ids = new Set(protocol.tracks.flatMap(track => track.children.map(seg => seg.id)))\n    for (const [id, display] of displayCache) {\n      if (ids.has(id))\n        continue\n      display.destroy()\n      displayCache.delete(id)\n    }\n    for (const [id, entry] of videoEntries) {\n      if (ids.has(id))\n        continue\n      entry.clip.destroy()\n      videoEntries.delete(id)\n    }\n  }\n\n  function clearDisplays() {\n    layer.removeChildren()\n    for (const display of displayCache.values()) {\n      display.destroy()\n    }\n    displayCache.clear()\n    displayLoading.clear()\n    for (const { clip } of videoEntries.values())\n      clip.destroy()\n    videoEntries.clear()\n  }\n\n  function play() {\n    if (isPlaying.value)\n      return\n    isPlaying.value = true\n    lastTickAt = performance.now()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  function pause() {\n    isPlaying.value = false\n    if (rafId !== undefined)\n      cancelAnimationFrame(rafId)\n    rafId = undefined\n  }\n\n  function loop() {\n    tick()\n    if (isPlaying.value)\n      rafId = requestAnimationFrame(loop)\n  }\n\n  function tick(deltaMs?: number) {\n    if (!isPlaying.value && deltaMs === undefined)\n      return\n\n    const now = performance.now()\n    const delta = deltaMs ?? (lastTickAt ? now - lastTickAt : 0)\n    lastTickAt = now\n\n    if (delta === 0)\n      return\n\n    currentTime.value = clamp(\n      currentTime.value + delta,\n      0,\n      duration.value || Number.POSITIVE_INFINITY,\n    )\n\n    if (duration.value > 0 && currentTime.value >= duration.value)\n      pause()\n\n    // render happens via watch on currentTime\n  }\n\n  function seek(time: number) {\n    currentTime.value = clamp(time, 0, duration.value || Number.POSITIVE_INFINITY)\n  }\n\n  async function getDisplayForSegment(segment: SegmentUnion) {\n    const cached = displayCache.get(segment.id)\n    if (cached)\n      return cached\n\n    const loading = displayLoading.get(segment.id)\n    if (loading)\n      return loading\n\n    const promise = loadDisplay(segment)\n    displayLoading.set(segment.id, promise)\n\n    const display = await promise\n    if (display)\n      displayCache.set(segment.id, display)\n\n    displayLoading.delete(segment.id)\n    return display\n  }\n\n  async function loadDisplay(segment: SegmentUnion): Promise<PixiDisplayObject | undefined> {\n    // prioritize static resources via protocol resource manager\n    if (segment.segmentType === 'frames' || segment.segmentType === 'sticker') {\n      if (!segment.url)\n        return placeholder(segment.segmentType)\n\n      if ('type' in segment && segment.type === 'video') {\n        const sprite = await loadVideoSprite(segment)\n        if (sprite)\n          return sprite\n      }\n\n      const texture = await loadTexture(segment.url)\n      if (texture)\n        return new Sprite(texture)\n      return placeholder(segment.segmentType, segment.url)\n    }\n\n    if (segment.segmentType === 'text')\n      return undefined\n\n    if (segment.segmentType === 'effect' || segment.segmentType === 'filter')\n      return undefined\n\n    // audio segments do not render visuals\n    return undefined\n  }\n\n  async function loadTexture(url: string) {\n    const isDataUrl = url.startsWith('data:')\n    const isHttp = /^https?:\\/\\//.test(url)\n\n    if (!isDataUrl && !isHttp) {\n      try {\n        await resourceManager.add(url)\n        const res = await resourceManager.get(url)\n        if (res instanceof HTMLImageElement)\n          return Texture.from(res)\n      }\n      catch {\n        // fall through to direct image load\n      }\n    }\n\n    // load image directly to avoid invalid path issues with http/data URLs\n    return await loadImageTexture(url)\n  }\n\n  async function loadVideoSprite(segment: SegmentUnion & { type: 'video', url: string }): Promise<Sprite | undefined> {\n    const existing = videoEntries.get(segment.id)\n    if (existing)\n      return existing.sprite\n\n    let file\n    try {\n      await resourceManager.add(segment.url)\n      file = await getOpfsFile(segment.url)\n    }\n    catch {\n      file = undefined\n    }\n    let clip: MP4Clip\n    try {\n      if (file) {\n        clip = new MP4Clip(file)\n      }\n      else {\n        const res = await fetch(segment.url)\n        if (!res.body)\n          return undefined\n        clip = new MP4Clip(res.body)\n      }\n    }\n    catch {\n      return undefined\n    }\n\n    try {\n      await clip.ready\n    }\n    catch {\n      clip.destroy()\n      return undefined\n    }\n\n    const { width, height } = clip.meta\n    const canvas = document.createElement('canvas')\n    canvas.width = width || 1\n    canvas.height = height || 1\n    const texture = Texture.from(canvas)\n    const sprite = new Sprite(texture)\n\n    videoEntries.set(segment.id, { clip, canvas, texture, sprite, meta: { width, height } })\n    return sprite\n  }\n\n  async function updateVideoFrame(segment: IVideoFramesSegment, at: number) {\n    const entry = videoEntries.get(segment.id)\n    if (!entry)\n      return\n\n    try {\n      const offsetMs = segment.fromTime ?? 0\n      const relativeMs = Math.max(0, at - segment.startTime + offsetMs)\n      const relativeUs = Math.floor(relativeMs * 1000)\n      const res = await entry.clip.tick(relativeUs)\n      if (res.video) {\n        const ctx = entry.canvas.getContext('2d')\n        if (ctx) {\n          ctx.drawImage(res.video, 0, 0, entry.canvas.width, entry.canvas.height)\n          refreshCanvasTexture(entry.texture)\n        }\n        res.video.close()\n      }\n    }\n    catch (err) {\n      console.warn('[renderer] update video frame failed', err)\n    }\n  }\n\n  function isVideoSegment(segment: SegmentUnion): segment is IVideoFramesSegment {\n    return segment.segmentType === 'frames'\n      && segment.type === 'video'\n      && typeof segment.url === 'string'\n  }\n\n  function normalizeRenderTime(protocol: IVideoProtocol, at: number) {\n    const total = computeDuration(protocol)\n    if (total <= 0)\n      return 0\n    if (at < total)\n      return at\n    // Keep the last visible frame when playback reaches the end.\n    const frameWindow = Math.max(1000 / Math.max(protocol.fps || 30, 1), 1)\n    return Math.max(total - frameWindow, 0)\n  }\n\n  async function getOpfsFile(url: string) {\n    const dir = opts.resourceDir ?? DEFAULT_RES_DIR\n    try {\n      const file = opfsFile(`${dir}/${url}`)\n      if (await file.exists())\n        return file\n    }\n    catch {\n      return undefined\n    }\n    return undefined\n  }\n\n  function loadImageTexture(url: string): Promise<Texture | undefined> {\n    return new Promise((resolve) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => resolve(Texture.from(img))\n      img.onerror = () => {\n        console.warn('[renderer] failed to load image', url)\n        resolve(undefined)\n      }\n      img.src = url\n    })\n  }\n\n  function refreshCanvasTexture(texture: Texture) {\n    const source = texture.source\n    if ('update' in source && typeof source.update === 'function') {\n      source.update()\n      return\n    }\n\n    if (typeof texture.update === 'function')\n      texture.update()\n  }\n\n  function destroy() {\n    pause()\n    scope.stop()\n    clearDisplays()\n    layer.destroy({ children: true })\n    displayCache.clear()\n    displayLoading.clear()\n    resourceWarmUp.clear()\n    if (!opts.app)\n      app.destroy()\n  }\n\n  if (opts.autoPlay)\n    play()\n\n  return {\n    app,\n    layer,\n    currentTime,\n    duration,\n    isPlaying,\n    play,\n    pause,\n    tick,\n    seek,\n    destroy,\n  }\n}\n\nfunction createRenderQueue(job: () => Promise<void> | void) {\n  let queued = false\n  let running = false\n\n  const run = async () => {\n    if (running) {\n      queued = true\n      return\n    }\n    running = true\n    do {\n      queued = false\n      await job()\n    } while (queued)\n    running = false\n  }\n\n  return run\n}\n"],"names":["createApp","opts","app","Application","collectResourceUrls","protocol","urls","track","segment","collectActiveSegments","at","active","trackIndex","childIndex","a","b","applyDisplayProps","display","width","height","opacity","readOpacity","Sprite","Texture","placeholderTexture","Graphics","stringToColor","hasOpacity","transform","readTransform","px","py","sx","sy","rotation","placeholder","key","url","g","color","svg","hash","i","computeDuration","endTimes","seg","clamp","num","min","max","cloneProtocol","raw","toRaw","hasTransform","DEFAULT_RES_DIR","createRenderer","validator","createValidator","protocolInput","isRef","shallowRef","validatedProtocol","unref","create2dApp","layer","Container","resourceManager","createResourceManager","resourceWarmUp","displayCache","displayLoading","videoEntries","currentTime","ref","isPlaying","duration","computed","rafId","lastTickAt","renderScene","task","renderAt","normalizeRenderTime","stageWidth","stageHeight","renders","isVideoSegment","updateVideoFrame","cleaned","queueRender","createRenderQueue","getDisplayForSegment","scope","effectScope","watch","err","clearDisplays","warmUpResources","cleanupCache","clampCurrentTime","nextDuration","ids","id","entry","clip","play","loop","pause","tick","deltaMs","now","delta","seek","time","cached","loading","promise","loadDisplay","sprite","loadVideoSprite","texture","loadTexture","isDataUrl","isHttp","res","loadImageTexture","existing","file","getOpfsFile","MP4Clip","canvas","offsetMs","relativeMs","relativeUs","ctx","refreshCanvasTexture","total","frameWindow","dir","opfsFile","resolve","img","source","destroy","job","queued","running"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/2d/index.ts","../src/helpers.ts","../src/index.ts"],"sourcesContent":["/// <reference types=\"vite/client\" />\nimport type { ApplicationOptions } from 'pixi.js'\nimport { Application } from 'pixi.js'\n\ndeclare global {\n\n  // eslint-disable-next-line vars-on-top\n  var __PIXI_APP__: Application\n}\n\nexport async function createApp(opts?: Partial<ApplicationOptions>) {\n  const app = new Application()\n\n  await app.init({ resizeTo: window, backgroundAlpha: 0, ...opts })\n\n  if (import.meta.env.DEV) {\n    globalThis.__PIXI_APP__ = app\n  }\n\n  return app\n}\n","import type { ITransform, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { PixiDisplayObject } from './types'\nimport { toRaw } from '@vue/reactivity'\nimport { Graphics, Sprite, Texture } from 'pixi.js'\n\nexport function collectResourceUrls(protocol: IVideoProtocol) {\n  const urls = new Set<string>()\n  for (const track of protocol.tracks) {\n    for (const segment of track.children) {\n      if (segment.url)\n        urls.add(segment.url)\n    }\n  }\n  return urls\n}\n\nexport function collectActiveSegments(protocol: IVideoProtocol, at: number) {\n  const active: { segment: SegmentUnion, trackIndex: number, childIndex: number }[] = []\n  protocol.tracks.forEach((track, trackIndex) => {\n    track.children.forEach((segment, childIndex) => {\n      if (segment.startTime <= at && at < segment.endTime)\n        active.push({ segment, trackIndex, childIndex })\n    })\n  })\n\n  return active.sort((a, b) => {\n    if (a.trackIndex === b.trackIndex)\n      return a.childIndex - b.childIndex\n    return a.trackIndex - b.trackIndex\n  })\n}\n\nexport function applyDisplayProps(display: PixiDisplayObject, segment: SegmentUnion, width: number, height: number) {\n  const opacity = readOpacity(segment)\n  // size\n  if (display instanceof Sprite) {\n    display.anchor.set(0.5)\n    display.width = width\n    display.height = height\n    display.x = width / 2\n    display.y = height / 2\n    const src = display.texture.source as { addEventListener?: (type: string, cb: () => void, opts?: AddEventListenerOptions) => void } | undefined\n    src?.addEventListener?.('error', () => {\n      // fallback to a colored rect if texture failed\n      display.texture = Texture.from(placeholderTexture(width, height))\n    }, { once: true })\n  }\n  else if (display instanceof Graphics) {\n    display.clear()\n    display\n      .rect(0, 0, width, height)\n      .fill({ color: stringToColor('url' in segment && typeof segment.url === 'string' ? segment.url : segment.segmentType), alpha: hasOpacity(segment) ? opacity : 0.35 })\n    display.pivot.set(width / 2, height / 2)\n    display.position.set(width / 2, height / 2)\n  }\n\n  display.alpha = opacity\n\n  // simple 2D transform\n  const transform = readTransform(segment)\n  if (transform) {\n    const [px, py] = transform.position ?? [0, 0]\n    const [sx, sy] = transform.scale ?? [1, 1]\n    const rotation = transform.rotation?.[2] ?? 0\n\n    display.position.set(width / 2 + (px * width) / 2, height / 2 - (py * height) / 2)\n    display.scale.set(sx, sy)\n    display.rotation = (rotation / 180) * Math.PI\n  }\n}\n\nexport function placeholder(key: string, url?: string) {\n  const g = new Graphics()\n  g.rect(0, 0, 10, 10).fill({ color: stringToColor(url ?? key), alpha: 1 })\n  return g\n}\n\nexport function placeholderTexture(width: number, height: number, color?: string) {\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><rect width=\"100%\" height=\"100%\" fill=\"${color ?? '#0f172a'}\" fill-opacity=\"0.8\"/></svg>`\n  return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n\nexport function stringToColor(key: string) {\n  let hash = 0\n  for (let i = 0; i < key.length; i++)\n    hash = key.charCodeAt(i) + ((hash << 5) - hash)\n  return hash & 0x00FFFFFF\n}\n\nexport function computeDuration(protocol: IVideoProtocol) {\n  const endTimes = protocol.tracks.flatMap(track => track.children.map(seg => seg.endTime))\n  return endTimes.length ? Math.max(...endTimes) : 0\n}\n\nexport function clamp(num: number, min: number, max: number) {\n  return Math.min(Math.max(num, min), max)\n}\n\nexport function cloneProtocol(protocol: IVideoProtocol) {\n  const raw = toRaw(protocol) as IVideoProtocol\n  // use JSON clone to avoid structuredClone errors on proxies (e.g., Vue reactive)\n  return JSON.parse(JSON.stringify(raw)) as IVideoProtocol\n}\n\nfunction hasOpacity(segment: SegmentUnion): segment is SegmentUnion & { opacity?: number } {\n  return 'opacity' in segment\n}\n\nfunction readOpacity(segment: SegmentUnion) {\n  if (hasOpacity(segment) && typeof segment.opacity === 'number')\n    return segment.opacity\n  return 1\n}\n\nfunction hasTransform(segment: SegmentUnion): segment is SegmentUnion & { transform?: ITransform } {\n  return 'transform' in segment\n}\n\nfunction readTransform(segment: SegmentUnion) {\n  if (hasTransform(segment))\n    return segment.transform\n  return undefined\n}\n","import type { IVideoFramesSegment, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { ComputedRef, Ref, ShallowRef } from '@vue/reactivity'\nimport type { Application, ApplicationOptions } from 'pixi.js'\nimport type { MaybeRef, PixiDisplayObject } from './types'\nimport { createResourceManager, createValidator, getResourceKey } from '@video-editor/protocol'\nimport {\n  computed,\n  effectScope,\n  isRef,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from '@vue/reactivity'\nimport { MP4Clip } from '@webav/av-cliper'\nimport { file as opfsFile } from 'opfs-tools'\nimport { Container, Sprite, Texture } from 'pixi.js'\nimport { createApp as create2dApp } from './2d'\nimport {\n  applyDisplayProps,\n  clamp,\n  cloneProtocol,\n  collectActiveSegments,\n  collectResourceUrls,\n  computeDuration,\n  placeholder,\n} from './helpers'\n\nconst DEFAULT_RES_DIR = '/video-editor-res'\n\nexport interface RendererOptions {\n  protocol: MaybeRef<IVideoProtocol>\n  app?: Application\n  appOptions?: Partial<ApplicationOptions>\n  resourceDir?: string\n  autoPlay?: boolean\n}\n\nexport interface Renderer {\n  app: Application\n  layer: Container\n  currentTime: Ref<number>\n  duration: ComputedRef<number>\n  isPlaying: Ref<boolean>\n  play: () => void\n  pause: () => void\n  tick: (deltaMs?: number) => void\n  seek: (time: number) => void\n  destroy: () => void\n}\n\n/**\n * Create a renderer that reacts to protocol updates and drives playback state.\n * - Pass a reactive `protocol` (Ref/readonly/normal object)\n * - Call `play/pause/seek/tick` to drive the timeline\n * - Rendering updates when `protocol` or `currentTime` changes\n */\nexport async function createRenderer(opts: RendererOptions): Promise<Renderer> {\n  const validator = createValidator()\n  const protocolInput: Ref<IVideoProtocol> | ShallowRef<IVideoProtocol>\n    = isRef(opts.protocol) ? opts.protocol : shallowRef(opts.protocol)\n  const validatedProtocol: ShallowRef<IVideoProtocol> = shallowRef(\n    validator.verify(cloneProtocol(unref(protocolInput))),\n  )\n\n  const app = opts.app ?? await create2dApp(opts.appOptions)\n  const layer = new Container()\n  app.stage.addChild(layer)\n\n  const resourceManager = createResourceManager({ dir: opts.resourceDir })\n  const resourceWarmUp = new Set<string>()\n  const displayCache = new Map<string, PixiDisplayObject>()\n  const displayLoading = new Map<string, Promise<PixiDisplayObject | undefined>>()\n  const mp4ClipUnsupportedKeys = new Set<string>()\n  const mp4ClipErrorLoggedKeys = new Set<string>()\n  type VideoEntry = (\n    | {\n      kind: 'mp4clip'\n      clip: MP4Clip\n      canvas: HTMLCanvasElement\n      texture: Texture\n      sprite: Sprite\n      meta?: { width: number, height: number }\n    }\n    | {\n      kind: 'element'\n      video: HTMLVideoElement\n      canvas: HTMLCanvasElement\n      texture: Texture\n      sprite: Sprite\n      meta?: { width: number, height: number }\n    }\n    | {\n      kind: 'frozen'\n      canvas: HTMLCanvasElement\n      texture: Texture\n      sprite: Sprite\n      meta?: { width: number, height: number }\n    }\n  )\n  const videoEntries = new Map<string, VideoEntry>()\n\n  const currentTime = ref(0)\n  const isPlaying = ref(false)\n  const duration = computed(() => computeDuration(validatedProtocol.value))\n\n  let rafId: number | undefined\n  let lastTickAt = 0\n\n  interface RenderTask {\n    app: Application\n    layer: Container\n    protocol: IVideoProtocol\n    at: number\n    getDisplay: (segment: SegmentUnion) => Promise<PixiDisplayObject | undefined>\n  }\n\n  async function renderScene(task: RenderTask) {\n    const { protocol, at, layer } = task\n    const renderAt = normalizeRenderTime(protocol, at)\n    const active = collectActiveSegments(protocol, renderAt)\n    const stageWidth = task.app.renderer.width\n    const stageHeight = task.app.renderer.height\n\n    const renders: (PixiDisplayObject | undefined)[] = []\n    for (const { segment } of active) {\n      const display = await task.getDisplay(segment)\n      if (!display)\n        continue\n      applyDisplayProps(display, segment, stageWidth, stageHeight)\n      if (isVideoSegment(segment))\n        await updateVideoFrame(segment, renderAt)\n      renders.push(display)\n    }\n\n    layer.removeChildren()\n    const cleaned = renders.filter(Boolean) as PixiDisplayObject[]\n    if (cleaned.length)\n      layer.addChild(...cleaned)\n    task.app.render()\n  }\n\n  const queueRender = createRenderQueue(() => renderScene({\n    app,\n    layer,\n    protocol: validatedProtocol.value,\n    at: currentTime.value,\n    getDisplay: getDisplayForSegment,\n  }))\n\n  const scope = effectScope()\n  scope.run(() => {\n    // Sync external protocol mutations into a verified snapshot the renderer can rely on.\n    watch(\n      () => unref(protocolInput),\n      (protocol) => {\n        try {\n          validatedProtocol.value = validator.verify(cloneProtocol(protocol))\n        }\n        catch (err) {\n          console.error('[renderer] invalid protocol update', err)\n          return\n        }\n        clearDisplays()\n        warmUpResources(validatedProtocol.value)\n        cleanupCache(validatedProtocol.value)\n        clampCurrentTime()\n        queueRender()\n      },\n      { deep: true, immediate: true },\n    )\n\n    // React to time changes.\n    watch(currentTime, () => {\n      clampCurrentTime()\n      queueRender()\n    })\n\n    // Keep duration/currentTime in sync with protocol updates.\n    watch(duration, () => clampCurrentTime())\n  })\n\n  function clampCurrentTime() {\n    const nextDuration = duration.value\n    if (nextDuration <= 0)\n      currentTime.value = 0\n    else if (currentTime.value > nextDuration)\n      currentTime.value = nextDuration\n    else if (currentTime.value < 0)\n      currentTime.value = 0\n  }\n\n  function warmUpResources(protocol: IVideoProtocol) {\n    for (const url of collectResourceUrls(protocol)) {\n      if (resourceWarmUp.has(url))\n        continue\n\n      resourceWarmUp.add(url)\n      if (inferUrlMediaType(url) === 'video')\n        continue\n      if (!shouldUseResourceManager(url))\n        continue\n      resourceManager.add(url).catch(() => {\n        // noop – render will fall back to Texture.from(url)\n      })\n    }\n  }\n\n  function cleanupCache(protocol: IVideoProtocol) {\n    const ids = new Set(protocol.tracks.flatMap(track => track.children.map(seg => seg.id)))\n    for (const [id, display] of displayCache) {\n      if (ids.has(id))\n        continue\n      display.destroy()\n      displayCache.delete(id)\n    }\n    for (const [id, entry] of videoEntries) {\n      if (ids.has(id))\n        continue\n      destroyVideoEntry(entry)\n      videoEntries.delete(id)\n    }\n  }\n\n  function clearDisplays() {\n    layer.removeChildren()\n    for (const display of displayCache.values()) {\n      display.destroy()\n    }\n    displayCache.clear()\n    displayLoading.clear()\n    for (const entry of videoEntries.values())\n      destroyVideoEntry(entry)\n    videoEntries.clear()\n  }\n\n  function play() {\n    if (isPlaying.value)\n      return\n    isPlaying.value = true\n    lastTickAt = performance.now()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  function pause() {\n    isPlaying.value = false\n    if (rafId !== undefined)\n      cancelAnimationFrame(rafId)\n    rafId = undefined\n    freezeVideoEntries()\n  }\n\n  function loop() {\n    tick()\n    if (isPlaying.value)\n      rafId = requestAnimationFrame(loop)\n  }\n\n  function tick(deltaMs?: number) {\n    if (!isPlaying.value && deltaMs === undefined)\n      return\n\n    const now = performance.now()\n    const delta = deltaMs ?? (lastTickAt ? now - lastTickAt : 0)\n    lastTickAt = now\n\n    if (delta === 0)\n      return\n\n    currentTime.value = clamp(\n      currentTime.value + delta,\n      0,\n      duration.value || Number.POSITIVE_INFINITY,\n    )\n\n    if (duration.value > 0 && currentTime.value >= duration.value)\n      pause()\n\n    // render happens via watch on currentTime\n  }\n\n  function seek(time: number) {\n    currentTime.value = clamp(time, 0, duration.value || Number.POSITIVE_INFINITY)\n  }\n\n  async function getDisplayForSegment(segment: SegmentUnion) {\n    const cached = displayCache.get(segment.id)\n    if (cached)\n      return cached\n\n    const loading = displayLoading.get(segment.id)\n    if (loading)\n      return loading\n\n    const promise = loadDisplay(segment)\n    displayLoading.set(segment.id, promise)\n\n    const display = await promise\n    if (display)\n      displayCache.set(segment.id, display)\n\n    displayLoading.delete(segment.id)\n    return display\n  }\n\n  async function loadDisplay(segment: SegmentUnion): Promise<PixiDisplayObject | undefined> {\n    // prioritize static resources via protocol resource manager\n    if (segment.segmentType === 'frames' || segment.segmentType === 'sticker') {\n      if (!segment.url)\n        return placeholder(segment.segmentType)\n\n      if ('type' in segment && segment.type === 'video') {\n        if (isRenderableVideoUrl(segment.url)) {\n          const sprite = await loadVideoSprite(segment)\n          if (sprite)\n            return sprite\n          return placeholder(segment.segmentType, segment.url)\n        }\n      }\n\n      const texture = await loadTexture(segment.url)\n      if (texture)\n        return new Sprite(texture)\n      return placeholder(segment.segmentType, segment.url)\n    }\n\n    if (segment.segmentType === 'text')\n      return undefined\n\n    if (segment.segmentType === 'effect' || segment.segmentType === 'filter')\n      return undefined\n\n    // audio segments do not render visuals\n    return undefined\n  }\n\n  async function loadTexture(url: string) {\n    const isDataUrl = url.startsWith('data:')\n    const isHttp = /^https?:\\/\\//.test(url)\n\n    if (!isDataUrl && !isHttp) {\n      try {\n        await resourceManager.add(url)\n        const res = await resourceManager.get(url)\n        if (res instanceof HTMLImageElement)\n          return Texture.from(res)\n      }\n      catch {\n        // fall through to direct image load\n      }\n    }\n\n    // load image directly to avoid invalid path issues with http/data URLs\n    return await loadImageTexture(url)\n  }\n\n  async function loadVideoSprite(segment: SegmentUnion & { type: 'video', url: string }): Promise<Sprite | undefined> {\n    const existing = videoEntries.get(segment.id)\n    if (existing)\n      return existing.sprite\n\n    const urlKey = getResourceKey(segment.url)\n    if (urlKey && mp4ClipUnsupportedKeys.has(urlKey)) {\n      const spriteFromElement = await loadVideoSpriteViaElement(segment.url).catch((err) => {\n        console.warn('[renderer] failed to load video via <video>', segment.url, err)\n        return undefined\n      })\n      if (spriteFromElement) {\n        videoEntries.set(segment.id, spriteFromElement)\n        return spriteFromElement.sprite\n      }\n      return undefined\n    }\n\n    const spriteFromClip = await loadVideoSpriteViaMP4Clip(segment.url).catch((err) => {\n      if (urlKey && isMp4ClipUnsupported(err))\n        mp4ClipUnsupportedKeys.add(urlKey)\n      if (!urlKey || !mp4ClipErrorLoggedKeys.has(urlKey)) {\n        if (urlKey)\n          mp4ClipErrorLoggedKeys.add(urlKey)\n        console.warn('[renderer] failed to load video via MP4Clip', segment.url, err)\n      }\n      return undefined\n    })\n    if (spriteFromClip) {\n      videoEntries.set(segment.id, spriteFromClip)\n      return spriteFromClip.sprite\n    }\n\n    const spriteFromElement = await loadVideoSpriteViaElement(segment.url).catch((err) => {\n      console.warn('[renderer] failed to load video via <video>', segment.url, err)\n      return undefined\n    })\n    if (spriteFromElement) {\n      videoEntries.set(segment.id, spriteFromElement)\n      return spriteFromElement.sprite\n    }\n\n    return undefined\n  }\n\n  function isMp4ClipUnsupported(err: unknown) {\n    if (!(err instanceof Error))\n      return false\n    const msg = err.message || ''\n    return msg.includes('stream is done') || msg.includes('not emit ready')\n  }\n\n  async function updateVideoFrame(segment: IVideoFramesSegment, at: number) {\n    const entry = videoEntries.get(segment.id)\n    if (!entry)\n      return\n\n    try {\n      const offsetMs = segment.fromTime ?? 0\n      const relativeMs = Math.max(0, at - segment.startTime + offsetMs)\n      const relativeUs = Math.floor(relativeMs * 1000)\n      if (entry.kind === 'frozen') {\n        const urlKey = getResourceKey(segment.url)\n        if (!urlKey)\n          return\n        const revived = await loadVideoEntry(segment.url, urlKey, { sprite: entry.sprite, oldTexture: entry.texture })\n        if (!revived)\n          return\n        videoEntries.set(segment.id, revived)\n        return await updateVideoFrame(segment, at)\n      }\n      if (entry.kind === 'mp4clip') {\n        const res = await entry.clip.tick(relativeUs)\n        if (res.video) {\n          const ctx = entry.canvas.getContext('2d')\n          if (ctx) {\n            ctx.drawImage(res.video, 0, 0, entry.canvas.width, entry.canvas.height)\n            refreshCanvasTexture(entry.texture)\n          }\n          res.video.close()\n        }\n        return\n      }\n\n      const relativeSec = relativeMs / 1000\n      if (!Number.isFinite(relativeSec))\n        return\n      if (entry.kind !== 'element')\n        return\n      await updateVideoElementFrame(entry, {\n        targetSec: relativeSec,\n        playbackRate: segment.playRate ?? 1,\n      })\n    }\n    catch (err) {\n      console.warn('[renderer] update video frame failed', err)\n    }\n  }\n\n  async function loadVideoEntry(url: string, urlKey: string, reuse: { sprite: Sprite, oldTexture?: Texture }) {\n    if (mp4ClipUnsupportedKeys.has(urlKey))\n      return await loadVideoSpriteViaElement(url, reuse).catch(() => undefined)\n\n    const fromClip = await loadVideoSpriteViaMP4Clip(url, reuse).catch((err) => {\n      if (isMp4ClipUnsupported(err))\n        mp4ClipUnsupportedKeys.add(urlKey)\n      return undefined\n    })\n    if (fromClip)\n      return fromClip\n    return await loadVideoSpriteViaElement(url, reuse).catch(() => undefined)\n  }\n\n  function isVideoSegment(segment: SegmentUnion): segment is IVideoFramesSegment {\n    return segment.segmentType === 'frames'\n      && segment.type === 'video'\n      && typeof segment.url === 'string'\n      && isRenderableVideoUrl(segment.url)\n  }\n\n  function normalizeRenderTime(protocol: IVideoProtocol, at: number) {\n    const total = computeDuration(protocol)\n    if (total <= 0)\n      return 0\n    if (at < total)\n      return at\n    // Keep the last visible frame when playback reaches the end.\n    const frameWindow = Math.max(1000 / Math.max(protocol.fps || 30, 1), 1)\n    return Math.max(total - frameWindow, 0)\n  }\n\n  async function getOpfsFile(url: string) {\n    const dir = opts.resourceDir ?? DEFAULT_RES_DIR\n    try {\n      const key = getResourceKey(url)\n      if (!key)\n        return undefined\n      const file = opfsFile(`${dir}/${key}`, 'r')\n      if (await file.exists())\n        return file\n    }\n    catch {\n      return undefined\n    }\n    return undefined\n  }\n\n  function shouldUseResourceManager(url: string) {\n    if (!url)\n      return false\n    if (url.startsWith('data:') || url.startsWith('blob:'))\n      return false\n    return true\n  }\n\n  function freezeVideoEntries() {\n    for (const [id, entry] of videoEntries) {\n      if (entry.kind === 'mp4clip') {\n        entry.clip.destroy()\n        videoEntries.set(id, {\n          kind: 'frozen',\n          canvas: entry.canvas,\n          texture: entry.texture,\n          sprite: entry.sprite,\n          meta: entry.meta,\n        })\n        continue\n      }\n\n      if (entry.kind === 'element')\n        entry.video.pause()\n    }\n  }\n\n  function destroyVideoEntry(entry: VideoEntry) {\n    if (entry.kind === 'mp4clip') {\n      entry.clip.destroy()\n      return\n    }\n\n    if (entry.kind === 'frozen')\n      return\n\n    entry.video.pause()\n    entry.video.removeAttribute('src')\n    entry.video.load()\n  }\n\n  function waitForMediaEvent(target: HTMLMediaElement, type: string, timeoutMs = 1000) {\n    return new Promise<void>((resolve, reject) => {\n      const timer = window.setTimeout(() => {\n        cleanup()\n        reject(new Error(`Timed out waiting for media event: ${type}`))\n      }, timeoutMs)\n\n      const onOk = () => {\n        cleanup()\n        resolve()\n      }\n      const onErr = () => {\n        cleanup()\n        const mediaError = target.error ? `${target.error.code}` : 'unknown'\n        reject(new Error(`Media error (${mediaError}) while waiting for ${type}`))\n      }\n      const cleanup = () => {\n        window.clearTimeout(timer)\n        target.removeEventListener(type, onOk)\n        target.removeEventListener('error', onErr)\n      }\n\n      target.addEventListener(type, onOk, { once: true })\n      target.addEventListener('error', onErr, { once: true })\n    })\n  }\n\n  async function loadVideoSpriteViaMP4Clip(url: string, reuse?: { sprite: Sprite, oldTexture?: Texture }): Promise<VideoEntry | undefined> {\n    let file: ReturnType<typeof opfsFile> | undefined\n    if (shouldUseResourceManager(url))\n      file = await getOpfsFile(url)\n\n    let clip: MP4Clip | undefined\n    try {\n      if (file) {\n        clip = new MP4Clip(file)\n      }\n      else {\n        const res = await fetch(url)\n        if (!res.body)\n          return undefined\n        if (shouldUseResourceManager(url)) {\n          const [clipStream, cacheStream] = res.body.tee()\n          resourceManager.add(url, { body: cacheStream }).catch(() => {})\n          clip = new MP4Clip(clipStream)\n        }\n        else {\n          clip = new MP4Clip(res.body)\n        }\n      }\n\n      await clip.ready\n\n      const { width, height } = clip.meta\n      const canvas = document.createElement('canvas')\n      canvas.width = width || 1\n      canvas.height = height || 1\n      const texture = Texture.from(canvas)\n      const sprite = reuse?.sprite ?? new Sprite(texture)\n      if (reuse?.sprite) {\n        reuse.sprite.texture = texture\n        reuse.oldTexture?.destroy(true)\n      }\n\n      return { kind: 'mp4clip', clip, canvas, texture, sprite, meta: { width, height } }\n    }\n    catch (err) {\n      clip?.destroy()\n      throw err\n    }\n  }\n\n  function inferUrlMediaType(url: string): 'video' | 'image' | 'audio' | 'unknown' {\n    const raw = url.split('#')[0]!.split('?')[0]!\n    const ext = raw.split('/').pop()?.split('.').pop()?.toLowerCase() ?? ''\n    if (['mp4', 'm4v', 'mov', 'webm'].includes(ext))\n      return 'video'\n    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'avif'].includes(ext))\n      return 'image'\n    if (['mp3', 'wav', 'aac', 'm4a', 'ogg', 'flac'].includes(ext))\n      return 'audio'\n    return 'unknown'\n  }\n\n  function isRenderableVideoUrl(url: string) {\n    const kind = inferUrlMediaType(url)\n    if (kind === 'image' || kind === 'audio')\n      return false\n    // Treat unknown as video to support blob URLs or extension-less endpoints.\n    return true\n  }\n\n  async function loadVideoSpriteViaElement(url: string, reuse?: { sprite: Sprite, oldTexture?: Texture }): Promise<VideoEntry | undefined> {\n    const video = document.createElement('video')\n    video.crossOrigin = 'anonymous'\n    video.muted = true\n    video.playsInline = true\n    video.preload = 'auto'\n    video.src = url\n\n    try {\n      await waitForMediaEvent(video, 'loadedmetadata', 4000)\n    }\n    catch (err) {\n      video.pause()\n      video.removeAttribute('src')\n      video.load()\n      throw err\n    }\n\n    const width = video.videoWidth || 1\n    const height = video.videoHeight || 1\n\n    const canvas = document.createElement('canvas')\n    canvas.width = width\n    canvas.height = height\n    const texture = Texture.from(canvas)\n    const sprite = reuse?.sprite ?? new Sprite(texture)\n    if (reuse?.sprite) {\n      reuse.sprite.texture = texture\n      reuse.oldTexture?.destroy(true)\n    }\n\n    return { kind: 'element', video, canvas, texture, sprite, meta: { width, height } }\n  }\n\n  async function updateVideoElementFrame(entry: Extract<VideoEntry, { kind: 'element' }>, opts: { targetSec: number, playbackRate: number }) {\n    const { video, canvas, texture } = entry\n\n    video.playbackRate = Number.isFinite(opts.playbackRate) && opts.playbackRate > 0 ? opts.playbackRate : 1\n    if (isPlaying.value)\n      video.play().catch(() => {})\n    else\n      video.pause()\n\n    const current = video.currentTime\n    const drift = Math.abs(current - opts.targetSec)\n    const driftThreshold = isPlaying.value ? 0.25 : 0.03\n    if (Number.isFinite(current) && drift > driftThreshold) {\n      try {\n        video.currentTime = opts.targetSec\n      }\n      catch {\n        // ignore seek errors for not-yet-ready media\n      }\n      if (!isPlaying.value)\n        await waitForMediaEvent(video, 'seeked', 250).catch(() => {})\n    }\n\n    if (video.readyState < 2) {\n      // Avoid blocking the render queue for too long.\n      await waitForMediaEvent(video, 'canplay', 250).catch(() => {})\n      if (video.readyState < 2)\n        return\n    }\n\n    const ctx = canvas.getContext('2d')\n    if (!ctx)\n      return\n    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)\n    refreshCanvasTexture(texture)\n  }\n\n  function loadImageTexture(url: string): Promise<Texture | undefined> {\n    return new Promise((resolve) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => resolve(Texture.from(img))\n      img.onerror = () => {\n        console.warn('[renderer] failed to load image', url)\n        resolve(undefined)\n      }\n      img.src = url\n    })\n  }\n\n  function refreshCanvasTexture(texture: Texture) {\n    const source = texture.source\n    if ('update' in source && typeof source.update === 'function') {\n      source.update()\n      return\n    }\n\n    if (typeof texture.update === 'function')\n      texture.update()\n  }\n\n  function destroy() {\n    pause()\n    scope.stop()\n    clearDisplays()\n    layer.destroy({ children: true })\n    displayCache.clear()\n    displayLoading.clear()\n    resourceWarmUp.clear()\n    if (!opts.app)\n      app.destroy()\n  }\n\n  if (opts.autoPlay)\n    play()\n\n  return {\n    app,\n    layer,\n    currentTime,\n    duration,\n    isPlaying,\n    play,\n    pause,\n    tick,\n    seek,\n    destroy,\n  }\n}\n\nfunction createRenderQueue(job: () => Promise<void> | void) {\n  let queued = false\n  let running = false\n\n  const run = async () => {\n    if (running) {\n      queued = true\n      return\n    }\n    running = true\n    do {\n      queued = false\n      await job()\n    } while (queued)\n    running = false\n  }\n\n  return run\n}\n"],"names":["createApp","opts","app","Application","collectResourceUrls","protocol","urls","track","segment","collectActiveSegments","at","active","trackIndex","childIndex","a","b","applyDisplayProps","display","width","height","opacity","readOpacity","Sprite","Texture","placeholderTexture","Graphics","stringToColor","hasOpacity","transform","readTransform","px","py","sx","sy","rotation","placeholder","key","url","g","color","svg","hash","i","computeDuration","endTimes","seg","clamp","num","min","max","cloneProtocol","raw","toRaw","hasTransform","DEFAULT_RES_DIR","createRenderer","validator","createValidator","protocolInput","isRef","shallowRef","validatedProtocol","unref","create2dApp","layer","Container","resourceManager","createResourceManager","resourceWarmUp","displayCache","displayLoading","mp4ClipUnsupportedKeys","mp4ClipErrorLoggedKeys","videoEntries","currentTime","ref","isPlaying","duration","computed","rafId","lastTickAt","renderScene","task","renderAt","normalizeRenderTime","stageWidth","stageHeight","renders","isVideoSegment","updateVideoFrame","cleaned","queueRender","createRenderQueue","getDisplayForSegment","scope","effectScope","watch","err","clearDisplays","warmUpResources","cleanupCache","clampCurrentTime","nextDuration","inferUrlMediaType","shouldUseResourceManager","ids","id","entry","destroyVideoEntry","play","loop","pause","freezeVideoEntries","tick","deltaMs","now","delta","seek","time","cached","loading","promise","loadDisplay","isRenderableVideoUrl","sprite","loadVideoSprite","texture","loadTexture","isDataUrl","isHttp","res","loadImageTexture","existing","urlKey","getResourceKey","spriteFromElement","loadVideoSpriteViaElement","spriteFromClip","loadVideoSpriteViaMP4Clip","isMp4ClipUnsupported","msg","offsetMs","relativeMs","relativeUs","revived","loadVideoEntry","ctx","refreshCanvasTexture","relativeSec","updateVideoElementFrame","reuse","fromClip","total","frameWindow","getOpfsFile","dir","file","opfsFile","waitForMediaEvent","target","type","timeoutMs","resolve","reject","timer","cleanup","onOk","onErr","mediaError","clip","MP4Clip","clipStream","cacheStream","canvas","ext","kind","video","current","drift","driftThreshold","img","source","destroy","job","queued","running"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@video-editor/renderer",
   "type": "module",
-  "version": "0.0.1-beta.14",
+  "version": "0.0.1-beta.16",
   "exports": {
     ".": {
       "import": "./dist/index.js"
@@ -21,8 +21,8 @@
     "@webav/av-cliper": "^1.2.7",
     "opfs-tools": "^0.7.4",
     "pixi.js": "^8.14.3",
-    "@video-editor/protocol": "0.0.1-beta.14",
-    "@video-editor/shared": "0.0.1-beta.14"
+    "@video-editor/protocol": "0.0.1-beta.16",
+    "@video-editor/shared": "0.0.1-beta.16"
   },
   "scripts": {
     "build": "vite build",