@video-editor/renderer 0.0.1-beta.30 → 0.0.1-beta.32

package/dist/index.js

@@ -1,100 +1,100 @@
-import { createValidator as Gt, createResourceManager as Nt, getResourceKey as N } from "@video-editor/protocol";
-import { toRaw as zt, isRef as Kt, shallowRef as ut, unref as lt, ref as ft, computed as qt, effectScope as Bt, watch as W } from "@vue/reactivity";
-import { AudioClip as jt, renderTxt2ImgBitmap as _t, MP4Clip as G, Combinator as mt, OffscreenSprite as wt } from "@webav/av-cliper";
-import { file as Wt } from "opfs-tools";
-import { Application as yt, Sprite as O, Texture as V, Graphics as vt, Container as Yt } from "pixi.js";
-async function Xt(o) {
-  const t = new yt();
-  return await t.init({ resizeTo: window, backgroundAlpha: 0, ...o }), t;
+import { createValidator as Wt, createResourceManager as Yt, getResourceKey as W } from "@video-editor/protocol";
+import { toRaw as Xt, isRef as Jt, shallowRef as vt, unref as Mt, ref as gt, computed as Ht, effectScope as Qt, watch as Z } from "@vue/reactivity";
+import { AudioClip as Tt, renderTxt2ImgBitmap as Zt, MP4Clip as K, Combinator as bt, OffscreenSprite as nt } from "@webav/av-cliper";
+import { file as te } from "opfs-tools";
+import { Application as kt, Sprite as V, Texture as G, Graphics as Ct, Container as ee } from "pixi.js";
+async function oe(e) {
+  const t = new kt();
+  return await t.init({ resizeTo: window, backgroundAlpha: 0, ...e }), t;
 }
-function Jt(o, t, i, r, a) {
-  const u = t || r, c = i || a;
-  if (!u || !c)
-    return { width: r, height: a };
-  const d = u / c, l = r / a;
-  switch (o) {
+function ie(e, t, o, i, n) {
+  const a = t || i, c = o || n;
+  if (!a || !c)
+    return { width: i, height: n };
+  const u = a / c, d = i / n;
+  switch (e) {
     case "none":
-      return { width: u, height: c };
+      return { width: a, height: c };
     case "cover":
-      return d > l ? { width: a * d, height: a } : { width: r, height: r / d };
+      return u > d ? { width: n * u, height: n } : { width: i, height: i / u };
     case "stretch":
-      return { width: r, height: a };
+      return { width: i, height: n };
     default:
-      return d > l ? { width: r, height: r / d } : { width: a * d, height: a };
+      return u > d ? { width: i, height: i / u } : { width: n * u, height: n };
   }
 }
-function Ht(o, t, i, r, a) {
-  const u = "fillMode" in o ? o.fillMode : void 0, { width: c, height: d } = Jt(
-    u,
-    r,
+function re(e, t, o, i, n) {
+  const a = "fillMode" in e ? e.fillMode : void 0, { width: c, height: u } = ie(
     a,
+    i,
+    n,
     t,
-    i
-  ), l = "transform" in o ? o.transform : void 0, [p, h] = l?.position ?? [0, 0], [m, S] = l?.scale ?? [1, 1], M = l?.rotation?.[2] ?? 0, k = c * m, w = d * S, x = t / 2 + p * t / 2, R = i / 2 - h * i / 2;
+    o
+  ), d = "transform" in e ? e.transform : void 0, [y, h] = d?.position ?? [0, 0], [w, M] = d?.scale ?? [1, 1], p = d?.rotation?.[2] ?? 0, v = c * w, m = u * M, g = t / 2 + y * t / 2, R = o / 2 - h * o / 2;
   return {
-    width: k,
-    height: w,
-    centerX: x,
+    width: v,
+    height: m,
+    centerX: g,
     centerY: R,
-    rotationRad: M / 180 * Math.PI
+    rotationRad: p / 180 * Math.PI
   };
 }
-function Qt(o) {
+function ne(e) {
   const t = /* @__PURE__ */ new Set();
-  for (const i of o.tracks)
-    for (const r of i.children)
-      r.url && t.add(r.url);
+  for (const o of e.tracks)
+    for (const i of o.children)
+      i.url && t.add(i.url);
   return t;
 }
-function Mt(o, t) {
-  const i = [];
-  return o.tracks.forEach((r, a) => {
-    r.children.forEach((u, c) => {
-      u.startTime <= t && t < u.endTime && i.push({ segment: u, trackIndex: a, childIndex: c });
+function Rt(e, t) {
+  const o = [];
+  return e.tracks.forEach((i, n) => {
+    i.children.forEach((a, c) => {
+      a.startTime <= t && t < a.endTime && o.push({ segment: a, trackIndex: n, childIndex: c });
     });
-  }), i.sort((r, a) => {
-    const u = o.tracks[r.trackIndex], c = o.tracks[a.trackIndex], d = u?.trackType === "frames" && u.isMain, l = c?.trackType === "frames" && c.isMain, p = o.tracks.length, h = d ? 0 : p - r.trackIndex, m = l ? 0 : p - a.trackIndex;
-    return h !== m ? h - m : r.trackIndex === a.trackIndex ? r.childIndex - a.childIndex : r.trackIndex - a.trackIndex;
+  }), o.sort((i, n) => {
+    const a = e.tracks[i.trackIndex], c = e.tracks[n.trackIndex], u = a?.trackType === "frames" && a.isMain, d = c?.trackType === "frames" && c.isMain, y = e.tracks.length, h = u ? 0 : y - i.trackIndex, w = d ? 0 : y - n.trackIndex;
+    return h !== w ? h - w : i.trackIndex === n.trackIndex ? i.childIndex - n.childIndex : i.trackIndex - n.trackIndex;
   });
 }
-function Zt(o, t, i, r) {
-  const a = ee(t), u = o instanceof O && o.texture.width || i, c = o instanceof O && o.texture.height || r, d = Ht(t, i, r, u, c);
-  o instanceof O ? (o.anchor.set(0.5), o.width = d.width, o.height = d.height, o.position.set(d.centerX, d.centerY), o.rotation = d.rotationRad, o.texture.source?.addEventListener?.("error", () => {
-    o.texture = V.from(te(i, r));
-  }, { once: !0 })) : o instanceof vt && (o.clear(), o.rect(0, 0, d.width, d.height).fill({ color: gt("url" in t && typeof t.url == "string" ? t.url : t.segmentType), alpha: xt(t) ? a : 0.35 }), o.pivot.set(d.width / 2, d.height / 2), o.position.set(d.centerX, d.centerY), o.rotation = d.rotationRad), o.alpha = a;
+function ae(e, t, o, i) {
+  const n = ce(t), a = e instanceof V && e.texture.width || o, c = e instanceof V && e.texture.height || i, u = re(t, o, i, a, c);
+  e instanceof V ? (e.anchor.set(0.5), e.width = u.width, e.height = u.height, e.position.set(u.centerX, u.centerY), e.rotation = u.rotationRad, e.texture.source?.addEventListener?.("error", () => {
+    e.texture = G.from(se(o, i));
+  }, { once: !0 })) : e instanceof Ct && (e.clear(), e.rect(0, 0, u.width, u.height).fill({ color: At("url" in t && typeof t.url == "string" ? t.url : t.segmentType), alpha: Et(t) ? n : 0.35 }), e.pivot.set(u.width / 2, u.height / 2), e.position.set(u.centerX, u.centerY), e.rotation = u.rotationRad), e.alpha = n;
 }
-function Y(o, t) {
-  const i = new vt();
-  return i.rect(0, 0, 10, 10).fill({ color: gt(t ?? o), alpha: 1 }), i;
+function tt(e, t) {
+  const o = new Ct();
+  return o.rect(0, 0, 10, 10).fill({ color: At(t ?? e), alpha: 1 }), o;
 }
-function te(o, t, i) {
-  const r = `<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${t}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
-  return `data:image/svg+xml;base64,${btoa(r)}`;
+function se(e, t, o) {
+  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${t}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
+  return `data:image/svg+xml;base64,${btoa(i)}`;
 }
-function gt(o) {
+function At(e) {
   let t = 0;
-  for (let i = 0; i < o.length; i++)
-    t = o.charCodeAt(i) + ((t << 5) - t);
+  for (let o = 0; o < e.length; o++)
+    t = e.charCodeAt(o) + ((t << 5) - t);
   return t & 16777215;
 }
-function J(o) {
-  const t = o.tracks.flatMap((i) => i.children.map((r) => r.endTime));
+function it(e) {
+  const t = e.tracks.flatMap((o) => o.children.map((i) => i.endTime));
   return t.length ? Math.max(...t) : 0;
 }
-function X(o, t, i) {
-  return Math.min(Math.max(o, t), i);
+function et(e, t, o) {
+  return Math.min(Math.max(e, t), o);
 }
-function pt(o) {
-  const t = zt(o);
+function St(e) {
+  const t = Xt(e);
   return JSON.parse(JSON.stringify(t));
 }
-function xt(o) {
-  return "opacity" in o;
+function Et(e) {
+  return "opacity" in e;
 }
-function ee(o) {
-  return xt(o) && typeof o.opacity == "number" ? o.opacity : 1;
+function ce(e) {
+  return Et(e) && typeof e.opacity == "number" ? e.opacity : 1;
 }
-class oe {
+class ue {
   protocol;
   clips = /* @__PURE__ */ new Map();
   loadingClips = /* @__PURE__ */ new Map();
@@ -104,6 +104,8 @@ class oe {
   mp4States = /* @__PURE__ */ new Map();
   audioGains = /* @__PURE__ */ new Map();
   mp4Gains = /* @__PURE__ */ new Map();
+  audioElements = /* @__PURE__ */ new Map();
+  useMediaElementForAudio = !0;
   ctx;
   lastTime = 0;
   constructor(t) {
@@ -112,113 +114,121 @@ class oe {
   setProtocol(t) {
     this.protocol = t;
   }
-  async sync(t, i) {
-    if (!i) {
+  async sync(t, o) {
+    if (!o) {
       this.stopAll(), this.lastTime = t;
       return;
     }
     this.ctx.state === "suspended" && await this.ctx.resume().catch(() => {
     }), Math.abs(t - this.lastTime) > 1e3 && this.stopAll(), this.lastTime = t;
-    const r = Mt(this.protocol, t), a = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Set();
-    for (const { segment: c } of r)
+    const i = Rt(this.protocol, t), n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
+    for (const { segment: c } of i)
       if (c.segmentType === "audio") {
-        const d = this.audioKey(c.id);
-        a.add(d), this.ensureAudioLoop(c, t);
+        const u = this.audioKey(c.id);
+        n.add(u), this.useMediaElementForAudio ? this.syncAudioElement(c, t) : this.ensureAudioLoop(c, t);
       } else if (c.segmentType === "frames" && "type" in c && c.type === "video") {
-        const d = this.videoKey(c.id);
-        u.add(d);
+        const u = this.videoKey(c.id);
+        a.add(u);
       }
-    for (const [c, d] of this.audioLoops)
-      if (!a.has(c)) {
-        d.stop();
-        for (const l of d.sources)
+    for (const [c, u] of this.audioLoops)
+      if (!n.has(c)) {
+        u.stop();
+        for (const d of u.sources)
           try {
-            l.stop(), l.disconnect();
+            d.stop(), d.disconnect();
           } catch {
           }
         this.audioLoops.delete(c), this.audioLoopContexts.delete(c), this.audioGains.delete(c);
       }
-    for (const [c, d] of this.mp4Loops)
-      if (!u.has(c)) {
-        d.stop();
-        for (const l of d.sources)
+    for (const [c, u] of this.audioElements)
+      if (!n.has(c)) {
+        try {
+          u.el.pause(), u.pendingPlay = void 0, u.lastTimelineMs = void 0, u.lastSourceSec = void 0, u.lastSeekTimelineMs = void 0;
+        } catch {
+        }
+        this.findSegmentInProtocol(u.segmentId) || (this.destroyAudioElement(u.el), this.audioElements.delete(c));
+      }
+    for (const [c, u] of this.mp4Loops)
+      if (!a.has(c)) {
+        u.stop();
+        for (const d of u.sources)
           try {
-            l.stop(), l.disconnect();
+            d.stop(), d.disconnect();
           } catch {
           }
         this.mp4Loops.delete(c), this.mp4States.delete(c), this.mp4Gains.delete(c);
       }
     for (const c of this.mp4States.keys())
-      !u.has(c) && !this.mp4Loops.has(c) && (this.mp4States.delete(c), this.mp4Gains.delete(c));
+      !a.has(c) && !this.mp4Loops.has(c) && (this.mp4States.delete(c), this.mp4Gains.delete(c));
   }
   /**
    * Play audio frames from MP4 video directly.
    * Called by renderer after it gets audio data from clip.tick()
    */
-  playMp4AudioFrames(t, i, r) {
-    if (!i || i.length === 0 || !i[0]?.length)
+  playMp4AudioFrames(t, o, i) {
+    if (!o || o.length === 0 || !o[0]?.length)
       return;
-    const a = this.videoKey(t), u = this.getSegmentVolume(t), c = this.getOrCreateGain(this.mp4Gains, a, u);
+    const n = this.videoKey(t), a = this.getSegmentVolume(t), c = this.getOrCreateGain(this.mp4Gains, n, a);
     this.ctx.state === "suspended" && this.ctx.resume().catch(() => {
     });
-    let d = this.mp4States.get(a);
-    d || (d = {
+    let u = this.mp4States.get(n);
+    u || (u = {
       loop: { stop: () => {
       }, sources: [], isStopped: () => !1 },
       startUs: 0,
       startCtxTime: this.ctx.currentTime,
       fps: 30,
       nextStartAt: 0
-    }, this.mp4States.set(a, d)), d.nextStartAt = this.playFrames(i, r, d.nextStartAt ?? 0, c, d.loop.sources);
+    }, this.mp4States.set(n, u)), u.nextStartAt = this.playFrames(o, i, u.nextStartAt ?? 0, c, u.loop.sources);
   }
   /**
    * Reset MP4 audio playback state (call when seeking or pausing)
    */
   resetMp4Audio(t) {
-    const i = this.videoKey(t), r = this.mp4States.get(i);
-    r && (r.nextStartAt = 0);
+    const o = this.videoKey(t), i = this.mp4States.get(o);
+    i && (i.nextStartAt = 0);
   }
   /**
    * Stop and clean up MP4 audio for a video segment
    */
   stopMp4Audio(t) {
-    const i = this.videoKey(t), r = this.mp4States.get(i);
-    if (r) {
-      r.loop.stop();
-      for (const a of r.loop.sources)
+    const o = this.videoKey(t), i = this.mp4States.get(o);
+    if (i) {
+      i.loop.stop();
+      for (const n of i.loop.sources)
         try {
-          a.stop(), a.disconnect();
+          n.stop(), n.disconnect();
         } catch {
         }
-      this.mp4Loops.delete(i), this.mp4States.delete(i), this.mp4Gains.delete(i);
+      this.mp4Loops.delete(o), this.mp4States.delete(o), this.mp4Gains.delete(o);
     }
   }
   /**
    * @deprecated Use playMp4AudioFrames instead
    */
-  ensureMp4Audio(t, i, r, a) {
-    const u = this.videoKey(t), c = this.getSegmentVolume(t), d = this.getOrCreateGain(this.mp4Gains, u, c), l = this.mp4States.get(u);
-    if (l) {
-      d.gain.value = Math.max(0, c);
-      const h = (this.ctx.currentTime - l.startCtxTime) * 1e6, m = l.startUs + h;
-      if (Math.abs(m - r) < 15e4 && l.fps === a)
+  ensureMp4Audio(t, o, i, n) {
+    const a = this.videoKey(t), c = this.getSegmentVolume(t), u = this.getOrCreateGain(this.mp4Gains, a, c), d = this.mp4States.get(a);
+    if (d) {
+      u.gain.value = Math.max(0, c);
+      const h = (this.ctx.currentTime - d.startCtxTime) * 1e6, w = d.startUs + h;
+      if (Math.abs(w - i) < 15e4 && d.fps === n)
         return;
-      l.loop.stop();
-      for (const S of l.loop.sources)
+      d.loop.stop();
+      for (const M of d.loop.sources)
         try {
-          S.stop(), S.disconnect();
+          M.stop(), M.disconnect();
         } catch {
         }
-      this.mp4Loops.delete(u), this.mp4States.delete(u);
+      this.mp4Loops.delete(a), this.mp4States.delete(a);
     }
     this.ctx.state === "suspended" && this.ctx.resume().catch(() => {
     });
-    const p = this.startMp4Loop(i, r, a, d);
-    this.mp4Loops.set(u, p), this.mp4States.set(u, {
-      loop: p,
-      startUs: r,
+    const y = this.startMp4Loop(o, i, n, u);
+    this.mp4Loops.set(a, y), this.mp4States.set(a, {
+      loop: y,
+      startUs: i,
       startCtxTime: this.ctx.currentTime,
-      fps: a
+      fps: n
     });
   }
   destroy() {
@@ -226,22 +236,30 @@ class oe {
     for (const t of this.clips.values())
       t.clip.destroy();
     this.clips.clear();
+    for (const t of this.audioElements.values())
+      this.destroyAudioElement(t.el);
+    this.audioElements.clear();
   }
   stopAll() {
+    for (const t of this.audioElements.values())
+      try {
+        t.el.pause(), t.pendingPlay = void 0, t.lastTimelineMs = void 0, t.lastSourceSec = void 0, t.lastSeekTimelineMs = void 0;
+      } catch {
+      }
     for (const t of this.audioLoops.values()) {
       t.stop();
-      for (const i of t.sources)
+      for (const o of t.sources)
         try {
-          i.stop(0), i.disconnect();
+          o.stop(0), o.disconnect();
         } catch {
         }
       t.sources.length = 0;
     }
     for (const t of this.mp4Loops.values()) {
       t.stop();
-      for (const i of t.sources)
+      for (const o of t.sources)
         try {
-          i.stop(0), i.disconnect();
+          o.stop(0), o.disconnect();
         } catch {
         }
       t.sources.length = 0;
@@ -258,122 +276,183 @@ class oe {
       }
     this.audioLoops.clear(), this.audioLoopContexts.clear(), this.audioGains.clear(), this.mp4Loops.clear(), this.mp4States.clear(), this.mp4Gains.clear();
   }
-  async ensureAudioLoop(t, i) {
-    const r = this.audioKey(t.id), a = await this.loadClip(t);
-    if (!a)
+  async ensureAudioLoop(t, o) {
+    const i = this.audioKey(t.id), n = await this.loadClip(t);
+    if (!n)
       return;
-    const u = t.fromTime ?? 0, c = Math.max(0.1, Math.min(100, t.playRate ?? 1)), d = i - t.startTime, l = u + d * c, p = this.getOrCreateGain(this.audioGains, r, t.volume);
-    this.applyFadeToGain(t, d, p);
-    const h = this.audioLoops.get(r);
+    const a = t.fromTime ?? 0, c = this.normalizePlayRate(t.playRate), u = o - t.startTime, d = a + u * c, y = this.getOrCreateGain(this.audioGains, i, t.volume);
+    this.applyFadeToGain(t, u, y);
+    const h = this.audioLoops.get(i);
     if (h && !h.isStopped())
       return;
-    h && (this.audioLoops.delete(r), this.audioLoopContexts.delete(r));
-    const S = (t.endTime - t.startTime) * c, M = u + S, k = this.startAudioLoop(a.clip, Math.max(0, l) * 1e3, p, c, M * 1e3);
-    this.audioLoops.set(r, k), this.audioLoopContexts.set(r, {
+    h && (this.audioLoops.delete(i), this.audioLoopContexts.delete(i));
+    const M = (t.endTime - t.startTime) * c, p = a + M, v = this.startAudioLoop(n.clip, Math.max(0, d) * 1e3, y, c, p * 1e3);
+    this.audioLoops.set(i, v), this.audioLoopContexts.set(i, {
       segment: t,
       startedAt: this.ctx.currentTime,
-      segmentRelativeMs: d
+      segmentRelativeMs: u
     });
   }
-  applyFadeToGain(t, i, r) {
-    const a = Math.max(0, typeof t.volume == "number" ? t.volume : 1), u = t.endTime - t.startTime, c = t.fadeInDuration ?? 0, d = t.fadeOutDuration ?? 0;
-    let l = 1;
-    c > 0 && i < c && (l = Math.max(0, i / c));
-    const p = u - i;
-    d > 0 && p < d && (l = Math.min(l, Math.max(0, p / d))), r.gain.value = a * l;
-  }
-  startMp4Loop(t, i, r, a) {
-    let u = !1, c = i, d = 0, l = !0;
-    const p = Math.round(1e3 / Math.max(r || 30, 1) * 1e3), h = this.getClipSampleRate(t), m = [], S = window.setInterval(async () => {
-      if (u)
+  syncAudioElement(t, o) {
+    const i = this.audioKey(t.id), n = this.getOrCreateAudioElementState(i, t), a = o - t.startTime, c = this.normalizePlayRate(t.playRate), u = t.fromTime ?? 0, d = u + a * c, h = Math.max(0, t.endTime - t.startTime) * c, w = u + h, M = Math.max(0, w) / 1e3, p = Number.isFinite(n.el.duration) ? Math.max(0, n.el.duration) : void 0, v = p === void 0 ? M : Math.min(M, p), m = Math.max(0, Math.min(d / 1e3, v)), g = d / 1e3 >= v - 0.01;
+    Math.abs(n.el.playbackRate - c) > 1e-3 && (n.el.playbackRate = c);
+    const R = this.computeSegmentVolume(t, a);
+    Math.abs(n.el.volume - R) > 1e-3 && (n.el.volume = R);
+    const P = 0.24, A = 500, E = 300, b = -40, q = n.lastTimelineMs, D = n.lastSourceSec, z = q === void 0 ? 0 : o - q;
+    let O = !1;
+    if (q === void 0)
+      O = !0;
+    else if (z < b || z > E)
+      O = !0;
+    else if (D !== void 0) {
+      const F = D + z * c / 1e3, Y = Math.abs(F - m), _ = n.lastSeekTimelineMs === void 0 || o - n.lastSeekTimelineMs >= A;
+      Y > P && _ && (O = !0);
+    }
+    if (O && Math.abs(n.el.currentTime - m) > 0.06)
+      try {
+        n.el.currentTime = m, n.lastSeekTimelineMs = o;
+      } catch {
+      }
+    if (n.lastTimelineMs = o, n.lastSourceSec = m, g) {
+      if (!n.el.paused)
+        try {
+          n.el.pause();
+        } catch {
+        }
+      n.pendingPlay = void 0;
+      return;
+    }
+    if (n.el.paused && !n.pendingPlay) {
+      const F = n.el.play();
+      F && typeof F.then == "function" && (n.pendingPlay = F.catch(() => {
+      }).finally(() => {
+        n.pendingPlay = void 0;
+      }));
+    }
+  }
+  applyFadeToGain(t, o, i) {
+    i.gain.value = this.computeSegmentVolume(t, o);
+  }
+  startMp4Loop(t, o, i, n) {
+    let a = !1, c = o, u = 0, d = !0;
+    const y = Math.round(1e3 / Math.max(i || 30, 1) * 1e3), h = this.getClipSampleRate(t), w = [], M = window.setInterval(async () => {
+      if (a)
         return;
-      const { audio: M, state: k } = await t.tick(Math.round(c));
-      if (c += p, k === "done")
+      const { audio: p, state: v } = await t.tick(Math.round(c));
+      if (c += y, v === "done")
         return;
-      if (l) {
-        l = !1;
+      if (d) {
+        d = !1;
         return;
       }
-      (M?.[0]?.length ?? 0) !== 0 && (d = this.playFrames(M, h, d, a, m));
-    }, Math.round(1e3 / Math.max(r || 30, 1)));
+      (p?.[0]?.length ?? 0) !== 0 && (u = this.playFrames(p, h, u, n, w));
+    }, Math.round(1e3 / Math.max(i || 30, 1)));
     return {
-      sources: m,
+      sources: w,
       stop: () => {
-        u = !0, window.clearInterval(S);
+        a = !0, window.clearInterval(M);
       },
-      isStopped: () => u
+      isStopped: () => a
     };
   }
-  startAudioLoop(t, i, r, a = 1, u) {
-    let c = !1, d = i, l = 0, p = !1;
-    const h = this.getClipSampleRate(t), m = [], M = Math.round(1e5 * a), k = async () => {
+  startAudioLoop(t, o, i, n = 1, a) {
+    let c = !1, u = o, d = 0, y = !1;
+    const h = this.getClipSampleRate(t), w = [], p = Math.round(1e5 * n), v = async () => {
       if (c)
         return;
-      if (p || (i > 0 && await t.tick(i), p = !0), d += M, u !== void 0 && d > u) {
+      if (y || (o > 0 && await t.tick(o), y = !0), u += p, a !== void 0 && u > a) {
         c = !0;
         return;
       }
-      const { audio: w, state: x } = await t.tick(d);
+      const { audio: m, state: g } = await t.tick(u);
       if (c)
         return;
-      if (x === "done") {
+      if (g === "done") {
         c = !0;
         return;
       }
-      if ((w?.[0]?.length ?? 0) === 0) {
+      if ((m?.[0]?.length ?? 0) === 0) {
         c = !0;
         return;
       }
-      const E = a !== 1 ? this.resampleForPlayRate(w, a) : w;
-      l = this.playFrames(E, h, l, r, m), c || setTimeout(() => k(), 0);
+      d = this.playFrames(m, h, d, i, w, n), c || setTimeout(() => v(), 0);
     };
-    return k(), {
-      sources: m,
+    return v(), {
+      sources: w,
       stop: () => {
         c = !0;
       },
-      isStopped: () => c
+      // Treat loop as active while there are still scheduled sources playing.
+      isStopped: () => c && w.length === 0
     };
   }
-  resampleForPlayRate(t, i) {
-    const r = Math.round(t[0].length / i);
-    return r <= 0 ? t : t.map((a) => {
-      const u = new Float32Array(r);
-      for (let c = 0; c < r; c++) {
-        const d = c * i, l = Math.floor(d), p = Math.min(l + 1, a.length - 1), h = d - l;
-        u[c] = a[l] * (1 - h) + a[p] * h;
-      }
-      return u;
-    });
-  }
-  playFrames(t, i, r, a, u) {
-    const c = Math.max(t.length, 1), d = t[0]?.length ?? 0;
+  playFrames(t, o, i, n, a, c = 1) {
+    const u = Math.max(t.length, 1), d = t[0]?.length ?? 0;
     if (d === 0)
-      return r;
-    const l = this.ctx.createBuffer(c, d, i);
-    for (let m = 0; m < c; m++) {
-      const S = t[m] ?? new Float32Array(d);
-      l.copyToChannel(new Float32Array(S), m);
+      return i;
+    const y = this.ctx.createBuffer(u, d, o);
+    for (let p = 0; p < u; p++) {
+      const v = t[p] ?? new Float32Array(d);
+      y.copyToChannel(new Float32Array(v), p);
     }
-    const p = this.ctx.createBufferSource();
-    p.buffer = l, p.connect(a);
-    const h = Math.max(this.ctx.currentTime, r);
-    if (p.start(h), u) {
-      u.push(p);
-      const m = l.duration * 1e3;
+    const h = this.ctx.createBufferSource();
+    h.buffer = y;
+    const w = Math.max(0.1, c);
+    h.playbackRate.value = w, h.connect(n);
+    const M = Math.max(this.ctx.currentTime, i);
+    if (h.start(M), a) {
+      a.push(h);
+      const p = y.duration / w * 1e3;
       setTimeout(() => {
-        const S = u.indexOf(p);
-        S > -1 && u.splice(S, 1);
-      }, m + 100);
+        const v = a.indexOf(h);
+        v > -1 && a.splice(v, 1);
+      }, p + 100);
+    }
+    return M + y.duration / w;
+  }
+  getOrCreateGain(t, o, i) {
+    const n = t.get(o);
+    if (n)
+      return typeof i == "number" && (n.gain.value = this.normalizeVolume(i)), n;
+    const a = this.ctx.createGain();
+    return a.gain.value = this.normalizeVolume(i), a.connect(this.ctx.destination), t.set(o, a), a;
+  }
+  getOrCreateAudioElementState(t, o) {
+    const i = this.audioElements.get(t);
+    if (i)
+      return i.url !== o.url && (i.el.pause(), i.el.src = o.url, i.el.currentTime = 0, i.url = o.url, i.pendingPlay = void 0, i.lastTimelineMs = void 0, i.lastSourceSec = void 0, i.lastSeekTimelineMs = void 0), i;
+    const n = new Audio(o.url);
+    n.preload = "auto", n.loop = !1, n.volume = this.normalizeVolume(o.volume), n.playbackRate = this.normalizePlayRate(o.playRate);
+    const a = {
+      segmentId: o.id,
+      url: o.url,
+      el: n
+    };
+    return this.audioElements.set(t, a), a;
+  }
+  destroyAudioElement(t) {
+    try {
+      t.pause();
+    } catch {
+    }
+    t.removeAttribute("src");
+    try {
+      t.load();
+    } catch {
     }
-    return h + l.duration;
   }
-  getOrCreateGain(t, i, r) {
-    const a = t.get(i);
-    if (a)
-      return typeof r == "number" && (a.gain.value = Math.max(0, r)), a;
-    const u = this.ctx.createGain();
-    return u.gain.value = Math.max(0, typeof r == "number" ? r : 1), u.connect(this.ctx.destination), t.set(i, u), u;
+  normalizePlayRate(t) {
+    return typeof t != "number" || !Number.isFinite(t) ? 1 : Math.max(0.1, Math.min(100, t));
+  }
+  normalizeVolume(t) {
+    return typeof t != "number" || !Number.isFinite(t) ? 1 : Math.max(0, Math.min(1, t));
+  }
+  computeSegmentVolume(t, o) {
+    const i = this.normalizeVolume(t.volume), n = Math.max(0, t.endTime - t.startTime), a = Math.max(0, t.fadeInDuration ?? 0), c = Math.max(0, t.fadeOutDuration ?? 0);
+    let u = 1;
+    a > 0 && o < a && (u = Math.max(0, o / a));
+    const d = n - o;
+    return c > 0 && d < c && (u = Math.min(u, Math.max(0, d / c))), i * u;
   }
   audioKey(t) {
     return `audio:${t}`;
@@ -382,639 +461,639 @@ class oe {
     return `video:${t}`;
   }
   async loadClip(t) {
-    const i = this.clips.get(t.id);
+    const o = this.clips.get(t.id);
+    if (o)
+      return o;
+    const i = this.loadingClips.get(t.id);
     if (i)
       return i;
-    const r = this.loadingClips.get(t.id);
-    if (r)
-      return r;
-    const a = (async () => {
+    const n = (async () => {
       try {
-        const u = await fetch(t.url);
-        if (!u.body) {
+        const a = await fetch(t.url);
+        if (!a.body) {
           this.loadingClips.delete(t.id);
           return;
         }
-        const c = new jt(u.body), d = { clip: c, ready: c.ready };
+        const c = new Tt(a.body), u = { clip: c, ready: c.ready };
         if (await c.ready, !this.findSegmentInProtocol(t.id)) {
           c.destroy(), this.loadingClips.delete(t.id);
           return;
         }
-        return this.clips.set(t.id, d), this.loadingClips.delete(t.id), d;
-      } catch (u) {
-        console.error(`[AudioManager] Failed to load audio ${t.url}`, u), this.loadingClips.delete(t.id);
+        return this.clips.set(t.id, u), this.loadingClips.delete(t.id), u;
+      } catch (a) {
+        console.error(`[AudioManager] Failed to load audio ${t.url}`, a), this.loadingClips.delete(t.id);
         return;
       }
     })();
-    return this.loadingClips.set(t.id, a), a;
+    return this.loadingClips.set(t.id, n), n;
   }
   findSegmentInProtocol(t) {
-    for (const i of this.protocol.tracks)
-      for (const r of i.children)
-        if (r.id === t) return !0;
+    for (const o of this.protocol.tracks)
+      for (const i of o.children)
+        if (i.id === t) return !0;
     return !1;
   }
   getSegmentVolume(t) {
-    for (const i of this.protocol.tracks)
-      for (const r of i.children) {
-        if (r.id !== t)
+    for (const o of this.protocol.tracks)
+      for (const i of o.children) {
+        if (i.id !== t)
           continue;
-        const a = r.volume;
-        return typeof a == "number" ? a : 1;
+        const n = i.volume;
+        return this.normalizeVolume(n);
       }
     return 1;
   }
   getClipSampleRate(t) {
-    const i = t.meta;
-    if (!i)
+    const o = t.meta;
+    if (!o)
       return 48e3;
-    const r = i.audioSampleRate;
-    if (typeof r == "number" && r > 0)
-      return r;
-    const a = i.sampleRate;
-    return typeof a == "number" && a > 0 ? a : 48e3;
+    const i = o.audioSampleRate;
+    if (typeof i == "number" && i > 0)
+      return i;
+    const n = o.sampleRate;
+    return typeof n == "number" && n > 0 ? n : 48e3;
   }
 }
-const re = 100, $ = /* @__PURE__ */ new Map();
-let ie = re;
-function ne(o, t) {
-  $.delete(o), $.set(o, t);
+const le = 100, $ = /* @__PURE__ */ new Map();
+let de = le;
+function fe(e, t) {
+  $.delete(e), $.set(e, t);
 }
-function ae() {
-  for (; $.size > ie; ) {
-    const [o, t] = $.entries().next().value;
-    $.delete(o), t.close?.();
+function he() {
+  for (; $.size > de; ) {
+    const [e, t] = $.entries().next().value;
+    $.delete(e), t.close?.();
   }
 }
-function se(o) {
-  return o.map((t) => t.content).filter(Boolean).join(`
+function pe(e) {
+  return e.map((t) => t.content).filter(Boolean).join(`
 `);
 }
-function ce(o) {
-  const t = Array.isArray(o.fontFamily) ? o.fontFamily.join(", ") : o.fontFamily, i = o.fontSize ?? 32, r = o.fontWeight ?? "normal", a = o.fontStyle ?? "normal", u = o.fill ?? "#ffffff", c = o.align ?? "left", d = [
-    `font-size: ${i}px`,
-    `font-weight: ${r}`,
-    `font-style: ${a}`,
-    `color: ${u}`,
+function me(e) {
+  const t = Array.isArray(e.fontFamily) ? e.fontFamily.join(", ") : e.fontFamily, o = e.fontSize ?? 32, i = e.fontWeight ?? "normal", n = e.fontStyle ?? "normal", a = e.fill ?? "#ffffff", c = e.align ?? "left", u = [
+    `font-size: ${o}px`,
+    `font-weight: ${i}`,
+    `font-style: ${n}`,
+    `color: ${a}`,
     `text-align: ${c}`,
     "white-space: pre-wrap"
   ];
-  if (t && d.push(`font-family: ${t}`), typeof o.letterSpacing == "number" && d.push(`letter-spacing: ${o.letterSpacing}px`), typeof o.leading == "number" && d.push(`line-height: ${o.leading}px`), o.background?.color && d.push(`background: ${o.background.color}`), o.stroke?.color && typeof o.stroke.width == "number" && d.push(`-webkit-text-stroke: ${o.stroke.width}px ${o.stroke.color}`), o.underline && d.push("text-decoration: underline"), o.dropShadow?.color && typeof o.dropShadow.distance == "number") {
-    const l = (o.dropShadow.angle ?? 45) * (Math.PI / 180), p = Math.cos(l) * o.dropShadow.distance, h = Math.sin(l) * o.dropShadow.distance, m = o.dropShadow.blur ?? 0;
-    d.push(`text-shadow: ${p}px ${h}px ${m}px ${o.dropShadow.color}`);
+  if (t && u.push(`font-family: ${t}`), typeof e.letterSpacing == "number" && u.push(`letter-spacing: ${e.letterSpacing}px`), typeof e.leading == "number" && u.push(`line-height: ${e.leading}px`), e.background?.color && u.push(`background: ${e.background.color}`), e.stroke?.color && typeof e.stroke.width == "number" && u.push(`-webkit-text-stroke: ${e.stroke.width}px ${e.stroke.color}`), e.underline && u.push("text-decoration: underline"), e.dropShadow?.color && typeof e.dropShadow.distance == "number") {
+    const d = (e.dropShadow.angle ?? 45) * (Math.PI / 180), y = Math.cos(d) * e.dropShadow.distance, h = Math.sin(d) * e.dropShadow.distance, w = e.dropShadow.blur ?? 0;
+    u.push(`text-shadow: ${y}px ${h}px ${w}px ${e.dropShadow.color}`);
   }
-  return d.join("; ");
+  return u.join("; ");
 }
-async function de(o, t) {
-  const i = `${t}::${o}`, r = $.get(i);
-  if (r)
-    return ne(i, r), r;
-  const a = await _t(o, t);
-  return $.set(i, a), ae(), a;
+async function ye(e, t) {
+  const o = `${t}::${e}`, i = $.get(o);
+  if (i)
+    return fe(o, i), i;
+  const n = await Zt(e, t);
+  return $.set(o, n), he(), n;
 }
-const ue = "/video-editor-res";
-async function le(o) {
-  const t = Gt(), i = Kt(o.protocol) ? o.protocol : ut(o.protocol), r = ut(
-    t.verify(pt(lt(i)))
-  ), a = o.app ?? await Xt(o.appOptions), u = new Yt();
-  a.stage.addChild(u);
-  const c = Nt({ dir: o.resourceDir }), d = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set(), S = o.videoSourceMode ?? "auto", M = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map(), w = ft(0), x = ft(!1), R = qt(() => J(r.value)), E = new oe(r.value);
-  let A, L = 0, C = 0;
-  async function St(e) {
-    const s = C, { protocol: n, at: f, layer: y } = e, v = Ot(n, f), g = Mt(n, v), T = e.app.renderer.width, b = e.app.renderer.height;
-    E.sync(f, x.value);
+const we = "/video-editor-res";
+async function ve(e) {
+  const t = Wt(), o = Jt(e.protocol) ? e.protocol : vt(e.protocol), i = vt(
+    t.verify(St(Mt(o)))
+  ), n = e.app ?? await oe(e.appOptions), a = new ee();
+  n.stage.addChild(a);
+  const c = Yt({ dir: e.resourceDir }), u = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Set(), M = e.videoSourceMode ?? "auto", p = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map(), m = gt(0), g = gt(!1), R = Ht(() => it(i.value)), P = new ue(i.value);
+  let A, E = 0, b = 0;
+  async function q(r) {
+    const l = b, { protocol: s, at: f, layer: S } = r, x = Kt(s, f), T = Rt(s, x), k = r.app.renderer.width, C = r.app.renderer.height;
+    P.sync(f, g.value);
     const I = [];
-    for (const { segment: U } of g) {
-      if (s !== C)
+    for (const { segment: N } of T) {
+      if (l !== b)
         return;
-      const P = await e.getDisplay(U);
-      if (s !== C)
+      const L = await r.getDisplay(N);
+      if (l !== b)
         return;
-      if (P && !P.destroyed) {
-        if (Zt(P, U, T, b), Pt(U) && await j(U, v), s !== C)
+      if (L && !L.destroyed) {
+        if (ae(L, N, k, C), Gt(N) && await H(N, x), l !== b)
           return;
-        I.push(P);
+        I.push(L);
       }
     }
-    if (s !== C)
+    if (l !== b)
       return;
-    y.removeChildren();
-    const F = I.filter(Boolean);
-    F.length && y.addChild(...F), s === C && e.app.render();
-  }
-  const z = fe(() => St({
-    app: a,
-    layer: u,
-    protocol: r.value,
-    at: w.value,
-    getDisplay: Rt
-  })), Q = Bt();
-  Q.run(() => {
-    W(
-      () => lt(i),
-      (e) => {
+    S.removeChildren();
+    const U = I.filter(Boolean);
+    U.length && S.addChild(...U), l === b && r.app.render();
+  }
+  const D = Me(() => q({
+    app: n,
+    layer: a,
+    protocol: i.value,
+    at: m.value,
+    getDisplay: Lt
+  })), z = Qt();
+  z.run(() => {
+    Z(
+      () => Mt(o),
+      (r) => {
         try {
-          r.value = t.verify(pt(e));
-        } catch (s) {
-          console.error("[renderer] invalid protocol update", s);
+          i.value = t.verify(St(r));
+        } catch (l) {
+          console.error("[renderer] invalid protocol update", l);
           return;
         }
-        E.setProtocol(r.value), C += 1, Z(), o.warmUpResources !== !1 && Tt(r.value), bt(r.value), K(), o.manualRender || z();
+        P.setProtocol(i.value), b += 1, _(), e.warmUpResources !== !1 && F(i.value), Y(i.value), O(), e.manualRender || D();
       },
       { deep: !0, immediate: !0 }
-    ), o.manualRender || W(w, () => {
-      K(), z();
-    }), W(R, () => K());
+    ), e.manualRender || Z(m, () => {
+      O(), D();
+    }), Z(R, () => O());
   });
-  function K() {
-    const e = R.value;
-    e <= 0 ? w.value = 0 : w.value > e ? w.value = e : w.value < 0 && (w.value = 0);
+  function O() {
+    const r = R.value;
+    r <= 0 ? m.value = 0 : m.value > r ? m.value = r : m.value < 0 && (m.value = 0);
   }
-  function Tt(e) {
-    for (const s of Qt(e))
-      d.has(s) || (d.add(s), st(s) !== "video" && it(s) && c.add(s).catch(() => {
+  function F(r) {
+    for (const l of ne(r))
+      u.has(l) || (u.add(l), mt(l) !== "video" && ft(l) && c.add(l).catch(() => {
       }));
   }
-  function bt(e) {
-    const s = /* @__PURE__ */ new Set();
-    for (const n of e.tracks)
-      for (const f of n.children)
-        s.add(f.id);
-    for (const [n, f] of l)
-      s.has(n) || (f.destroy(), l.delete(n));
-    for (const [n, f] of M)
-      s.has(n) || (nt(f), M.delete(n));
-  }
-  function Z() {
-    u.removeChildren();
-    for (const e of l.values())
-      e.destroy();
-    l.clear(), p.clear();
-    for (const e of M.values())
-      nt(e);
-    M.clear();
-  }
-  function tt() {
-    x.value || (x.value = !0, L = performance.now(), A = requestAnimationFrame(et));
-  }
-  function q() {
-    x.value = !1, A !== void 0 && cancelAnimationFrame(A), A = void 0, E.sync(w.value, !1), o.freezeOnPause !== !1 && $t();
-  }
-  function et() {
-    ot(), x.value && (A = requestAnimationFrame(et));
-  }
-  function ot(e) {
-    if (!x.value && e === void 0)
+  function Y(r) {
+    const l = /* @__PURE__ */ new Set();
+    for (const s of r.tracks)
+      for (const f of s.children)
+        l.add(f.id);
+    for (const [s, f] of d)
+      l.has(s) || (f.destroy(), d.delete(s));
+    for (const [s, f] of p)
+      l.has(s) || (ht(f), p.delete(s));
+  }
+  function _() {
+    a.removeChildren();
+    for (const r of d.values())
+      r.destroy();
+    d.clear(), y.clear();
+    for (const r of p.values())
+      ht(r);
+    p.clear();
+  }
+  function ct() {
+    g.value || (g.value = !0, E = performance.now(), A = requestAnimationFrame(ut));
+  }
+  function X() {
+    g.value = !1, A !== void 0 && cancelAnimationFrame(A), A = void 0, P.sync(m.value, !1), e.freezeOnPause !== !1 && qt();
+  }
+  function ut() {
+    lt(), g.value && (A = requestAnimationFrame(ut));
+  }
+  function lt(r) {
+    if (!g.value && r === void 0)
       return;
-    const s = performance.now(), n = e ?? (L ? s - L : 0);
-    L = s, n !== 0 && (w.value = X(
-      w.value + n,
+    const l = performance.now(), s = r ?? (E ? l - E : 0);
+    E = l, s !== 0 && (m.value = et(
+      m.value + s,
       0,
       R.value || Number.POSITIVE_INFINITY
-    ), R.value > 0 && w.value >= R.value && q());
+    ), R.value > 0 && m.value >= R.value && X());
   }
-  function kt(e) {
-    w.value = X(e, 0, R.value || Number.POSITIVE_INFINITY);
+  function Ut(r) {
+    m.value = et(r, 0, R.value || Number.POSITIVE_INFINITY);
   }
-  async function Ct(e) {
-    w.value = X(e, 0, R.value || Number.POSITIVE_INFINITY), await z();
+  async function Ot(r) {
+    m.value = et(r, 0, R.value || Number.POSITIVE_INFINITY), await D();
   }
-  async function Rt(e) {
-    const s = l.get(e.id);
+  async function Lt(r) {
+    const l = d.get(r.id);
+    if (l)
+      return l;
+    const s = y.get(r.id);
     if (s)
       return s;
-    const n = p.get(e.id);
-    if (n)
-      return n;
-    const f = At(e);
-    p.set(e.id, f);
-    const y = await f;
-    return y && l.set(e.id, y), p.delete(e.id), y;
-  }
-  async function At(e) {
-    if (e.segmentType === "frames" || e.segmentType === "sticker") {
-      if (!e.url)
-        return Y(e.segmentType);
-      if ("type" in e && e.type === "video" && ct(e.url)) {
-        const n = await Et(e);
-        return n || Y(e.segmentType, e.url);
+    const f = Vt(r);
+    y.set(r.id, f);
+    const S = await f;
+    return S && d.set(r.id, S), y.delete(r.id), S;
+  }
+  async function Vt(r) {
+    if (r.segmentType === "frames" || r.segmentType === "sticker") {
+      if (!r.url)
+        return tt(r.segmentType);
+      if ("type" in r && r.type === "video" && yt(r.url)) {
+        const s = await zt(r);
+        return s || tt(r.segmentType, r.url);
       }
-      const s = await Lt(e.url);
-      return s ? new O(s) : Y(e.segmentType, e.url);
+      const l = await Dt(r.url);
+      return l ? new V(l) : tt(r.segmentType, r.url);
     }
-    if (e.segmentType === "text")
-      return await It(e);
-    e.segmentType === "effect" || e.segmentType;
+    if (r.segmentType === "text")
+      return await $t(r);
+    r.segmentType === "effect" || r.segmentType;
   }
-  async function It(e) {
-    const s = se(e.texts);
-    if (!s)
+  async function $t(r) {
+    const l = pe(r.texts);
+    if (!l)
       return;
-    const [n] = e.texts;
-    if (!n)
+    const [s] = r.texts;
+    if (!s)
       return;
-    const f = await de(s, ce(n)), y = V.from(f);
-    return new O(y);
+    const f = await ye(l, me(s)), S = G.from(f);
+    return new V(S);
   }
-  async function Lt(e) {
-    const s = e.startsWith("data:"), n = /^https?:\/\//.test(e);
-    if (!s && !n)
+  async function Dt(r) {
+    const l = r.startsWith("data:"), s = /^https?:\/\//.test(r);
+    if (!l && !s)
       try {
-        await c.add(e);
-        const f = await c.get(e);
+        await c.add(r);
+        const f = await c.get(r);
         if (f instanceof HTMLImageElement)
-          return V.from(f);
+          return G.from(f);
       } catch {
       }
-    return await Vt(e);
-  }
-  async function Et(e) {
-    const s = M.get(e.id);
-    if (s)
-      return s.sprite;
-    const n = N(e.url), f = S !== "element", y = S !== "mp4clip";
-    if (n && h.has(n)) {
-      if (!y)
-        throw new Error(`[renderer] MP4Clip unsupported for ${e.url}`);
-      const v = await D(e.url).catch((g) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, g);
+    return await jt(r);
+  }
+  async function zt(r) {
+    const l = p.get(r.id);
+    if (l)
+      return l.sprite;
+    const s = W(r.url), f = M !== "element", S = M !== "mp4clip";
+    if (s && h.has(s)) {
+      if (!S)
+        throw new Error(`[renderer] MP4Clip unsupported for ${r.url}`);
+      const x = await B(r.url).catch((T) => {
+        console.warn("[renderer] failed to load video via <video>", r.url, T);
       });
-      return v ? (M.set(e.id, v), v.sprite) : void 0;
+      return x ? (p.set(r.id, x), x.sprite) : void 0;
     }
     if (f) {
-      const v = await at(e.url).catch((g) => {
-        if (n && B(g) && h.add(n), (!n || !m.has(n)) && (n && m.add(n), console.warn("[renderer] failed to load video via MP4Clip", e.url, g)), !y)
-          throw g;
+      const x = await pt(r.url).catch((T) => {
+        if (s && J(T) && h.add(s), (!s || !w.has(s)) && (s && w.add(s), console.warn("[renderer] failed to load video via MP4Clip", r.url, T)), !S)
+          throw T;
       });
-      if (v)
-        return console.info("[renderer] video source: mp4clip", e.url), M.set(e.id, v), v.sprite;
+      if (x)
+        return console.info("[renderer] video source: mp4clip", r.url), p.set(r.id, x), x.sprite;
     }
-    if (y) {
-      const v = await D(e.url).catch((g) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, g);
+    if (S) {
+      const x = await B(r.url).catch((T) => {
+        console.warn("[renderer] failed to load video via <video>", r.url, T);
       });
-      if (v)
-        return console.info("[renderer] video source: element", e.url), M.set(e.id, v), v.sprite;
+      if (x)
+        return console.info("[renderer] video source: element", r.url), p.set(r.id, x), x.sprite;
     }
   }
-  function B(e) {
-    if (!(e instanceof Error))
+  function J(r) {
+    if (!(r instanceof Error))
       return !1;
-    const s = e.message || "";
-    return s.includes("stream is done") || s.includes("not emit ready") || s.includes("tick video timeout");
+    const l = r.message || "";
+    return l.includes("stream is done") || l.includes("not emit ready") || l.includes("tick video timeout");
   }
-  async function j(e, s) {
-    const n = M.get(e.id);
-    if (n)
+  async function H(r, l) {
+    const s = p.get(r.id);
+    if (s)
       try {
-        const f = e.fromTime ?? 0, y = Math.max(0, s - e.startTime + f), v = Math.floor(y * 1e3);
-        if (n.kind === "frozen") {
-          const T = N(e.url);
-          if (!T)
+        const f = r.fromTime ?? 0, S = Math.max(0, l - r.startTime + f), x = Math.floor(S * 1e3);
+        if (s.kind === "frozen") {
+          const k = W(r.url);
+          if (!k)
             return;
-          const b = await Ft(e.url, T, { sprite: n.sprite, oldTexture: n.texture });
-          return b ? (M.set(e.id, b), await j(e, s)) : void 0;
+          const C = await Nt(r.url, k, { sprite: s.sprite, oldTexture: s.texture });
+          return C ? (p.set(r.id, C), await H(r, l)) : void 0;
         }
-        if (n.kind === "mp4clip")
+        if (s.kind === "mp4clip")
           try {
-            const T = await n.clip.tick(v);
-            if (T.video) {
-              const b = n.canvas.getContext("2d");
-              b && (b.drawImage(T.video, 0, 0, n.canvas.width, n.canvas.height), dt(n.texture)), T.video.close();
+            const k = await s.clip.tick(x);
+            if (k.video) {
+              const C = s.canvas.getContext("2d");
+              C && (C.drawImage(k.video, 0, 0, s.canvas.width, s.canvas.height), wt(s.texture)), k.video.close();
             }
-            if (x.value && T.audio && T.audio.length > 0) {
-              const b = n.clip.meta?.audioSampleRate ?? 48e3;
-              E.playMp4AudioFrames(e.id, T.audio, b);
+            if (g.value && k.audio && k.audio.length > 0) {
+              const C = s.clip.meta?.audioSampleRate ?? 48e3;
+              P.playMp4AudioFrames(r.id, k.audio, C);
             }
             return;
-          } catch (T) {
-            const b = N(e.url);
-            if (b && B(T) && (h.add(b), n.clip.destroy(), S !== "mp4clip")) {
-              const I = await D(e.url, { sprite: n.sprite, oldTexture: n.texture }).catch((F) => {
-                console.warn("[renderer] failed to fallback to <video> after MP4Clip error", e.url, F);
+          } catch (k) {
+            const C = W(r.url);
+            if (C && J(k) && (h.add(C), s.clip.destroy(), M !== "mp4clip")) {
+              const I = await B(r.url, { sprite: s.sprite, oldTexture: s.texture }).catch((U) => {
+                console.warn("[renderer] failed to fallback to <video> after MP4Clip error", r.url, U);
               });
               if (I)
-                return M.set(e.id, I), await j(e, s);
+                return p.set(r.id, I), await H(r, l);
             }
-            b && !m.has(b) && (m.add(b), console.warn("[renderer] MP4Clip tick failed", e.url, T));
+            C && !w.has(C) && (w.add(C), console.warn("[renderer] MP4Clip tick failed", r.url, k));
             return;
           }
-        const g = y / 1e3;
-        if (!Number.isFinite(g) || n.kind !== "element")
+        const T = S / 1e3;
+        if (!Number.isFinite(T) || s.kind !== "element")
           return;
-        await Ut(n, {
-          targetSec: g,
-          playbackRate: e.playRate ?? 1,
-          volume: e.volume ?? 1
+        await Bt(s, {
+          targetSec: T,
+          playbackRate: r.playRate ?? 1,
+          volume: r.volume ?? 1
         });
       } catch (f) {
         console.warn("[renderer] update video frame failed", f);
       }
   }
-  async function Ft(e, s, n) {
-    const f = S !== "element", y = S !== "mp4clip";
-    if (h.has(s)) {
-      if (!y)
-        throw new Error(`[renderer] MP4Clip unsupported for ${e}`);
-      return await D(e, n).catch(() => {
+  async function Nt(r, l, s) {
+    const f = M !== "element", S = M !== "mp4clip";
+    if (h.has(l)) {
+      if (!S)
+        throw new Error(`[renderer] MP4Clip unsupported for ${r}`);
+      return await B(r, s).catch(() => {
       });
     }
     if (f) {
-      const v = await at(e, n).catch((g) => {
-        if (B(g) && h.add(s), !y)
-          throw g;
+      const x = await pt(r, s).catch((T) => {
+        if (J(T) && h.add(l), !S)
+          throw T;
       });
-      if (v)
-        return v;
+      if (x)
+        return x;
     }
-    if (y)
-      return await D(e, n).catch(() => {
+    if (S)
+      return await B(r, s).catch(() => {
       });
   }
-  function Pt(e) {
-    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string" && ct(e.url);
+  function Gt(r) {
+    return r.segmentType === "frames" && r.type === "video" && typeof r.url == "string" && yt(r.url);
   }
-  function Ot(e, s) {
-    const n = J(e);
-    if (n <= 0)
+  function Kt(r, l) {
+    const s = it(r);
+    if (s <= 0)
       return 0;
-    if (s < n)
-      return s;
-    const f = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
-    return Math.max(n - f, 0);
+    if (l < s)
+      return l;
+    const f = Math.max(1e3 / Math.max(r.fps || 30, 1), 1);
+    return Math.max(s - f, 0);
   }
-  async function rt(e) {
-    const s = o.resourceDir ?? ue;
+  async function dt(r) {
+    const l = e.resourceDir ?? we;
     try {
-      const n = N(e);
-      if (!n)
+      const s = W(r);
+      if (!s)
         return;
-      const f = Wt(`${s}/${n}`, "r");
+      const f = te(`${l}/${s}`, "r");
       if (await f.exists())
         return f;
     } catch {
       return;
     }
   }
-  function it(e) {
-    return !(!e || e.startsWith("data:") || e.startsWith("blob:"));
+  function ft(r) {
+    return !(!r || r.startsWith("data:") || r.startsWith("blob:"));
   }
-  function $t() {
-    for (const [e, s] of M) {
-      if (s.kind === "mp4clip") {
-        s.clip.destroy(), M.set(e, {
+  function qt() {
+    for (const [r, l] of p) {
+      if (l.kind === "mp4clip") {
+        l.clip.destroy(), p.set(r, {
           kind: "frozen",
-          canvas: s.canvas,
-          texture: s.texture,
-          sprite: s.sprite,
-          meta: s.meta
+          canvas: l.canvas,
+          texture: l.texture,
+          sprite: l.sprite,
+          meta: l.meta
         });
         continue;
       }
-      s.kind === "element" && s.video.pause();
+      l.kind === "element" && l.video.pause();
     }
   }
-  function nt(e) {
-    if (e.kind === "mp4clip") {
-      e.clip.destroy();
+  function ht(r) {
+    if (r.kind === "mp4clip") {
+      r.clip.destroy();
       return;
     }
-    if (e.kind === "frozen")
+    if (r.kind === "frozen")
       return;
-    e.video.pause();
-    const s = k.get(e.video);
-    s && (URL.revokeObjectURL(s), k.delete(e.video)), e.video.removeAttribute("src"), e.video.load();
-  }
-  function _(e, s, n = 1e3) {
-    return new Promise((f, y) => {
-      const v = window.setTimeout(() => {
-        b(), y(new Error(`Timed out waiting for media event: ${s}`));
-      }, n), g = () => {
-        b(), f();
-      }, T = () => {
-        b();
-        const I = e.error ? `${e.error.code}` : "unknown";
-        y(new Error(`Media error (${I}) while waiting for ${s}`));
-      }, b = () => {
-        window.clearTimeout(v), e.removeEventListener(s, g), e.removeEventListener("error", T);
+    r.video.pause();
+    const l = v.get(r.video);
+    l && (URL.revokeObjectURL(l), v.delete(r.video)), r.video.removeAttribute("src"), r.video.load();
+  }
+  function Q(r, l, s = 1e3) {
+    return new Promise((f, S) => {
+      const x = window.setTimeout(() => {
+        C(), S(new Error(`Timed out waiting for media event: ${l}`));
+      }, s), T = () => {
+        C(), f();
+      }, k = () => {
+        C();
+        const I = r.error ? `${r.error.code}` : "unknown";
+        S(new Error(`Media error (${I}) while waiting for ${l}`));
+      }, C = () => {
+        window.clearTimeout(x), r.removeEventListener(l, T), r.removeEventListener("error", k);
       };
-      e.addEventListener(s, g, { once: !0 }), e.addEventListener("error", T, { once: !0 });
+      r.addEventListener(l, T, { once: !0 }), r.addEventListener("error", k, { once: !0 });
     });
   }
-  async function at(e, s) {
-    let n;
-    it(e) && (n = await rt(e), n || (await c.add(e).catch(() => {
-    }), n = await rt(e)));
+  async function pt(r, l) {
+    let s;
+    ft(r) && (s = await dt(r), s || (await c.add(r).catch(() => {
+    }), s = await dt(r)));
     let f;
     try {
-      if (n)
-        f = new G(n);
+      if (s)
+        f = new K(s);
       else {
-        const I = await fetch(e);
+        const I = await fetch(r);
         if (I.body)
-          f = new G(I.body);
+          f = new K(I.body);
         else {
-          const F = await I.arrayBuffer(), U = new ReadableStream({
-            start(P) {
-              P.enqueue(new Uint8Array(F)), P.close();
+          const U = await I.arrayBuffer(), N = new ReadableStream({
+            start(L) {
+              L.enqueue(new Uint8Array(U)), L.close();
             }
           });
-          f = new G(U);
+          f = new K(N);
         }
       }
       await f.ready;
-      const { width: y, height: v } = f.meta, g = document.createElement("canvas");
-      g.width = y || 1, g.height = v || 1;
-      const T = V.from(g), b = s?.sprite ?? new O(T);
-      return s?.sprite && (s.sprite.texture = T, s.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: f, canvas: g, texture: T, sprite: b, meta: { width: y, height: v } };
-    } catch (y) {
-      throw f?.destroy(), y;
+      const { width: S, height: x } = f.meta, T = document.createElement("canvas");
+      T.width = S || 1, T.height = x || 1;
+      const k = G.from(T), C = l?.sprite ?? new V(k);
+      return l?.sprite && (l.sprite.texture = k, l.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: f, canvas: T, texture: k, sprite: C, meta: { width: S, height: x } };
+    } catch (S) {
+      throw f?.destroy(), S;
     }
   }
-  function st(e) {
-    const n = e.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
-    return ["mp4", "m4v", "mov", "webm"].includes(n) ? "video" : ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "avif"].includes(n) ? "image" : ["mp3", "wav", "aac", "m4a", "ogg", "flac"].includes(n) ? "audio" : "unknown";
+  function mt(r) {
+    const s = r.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
+    return ["mp4", "m4v", "mov", "webm"].includes(s) ? "video" : ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "avif"].includes(s) ? "image" : ["mp3", "wav", "aac", "m4a", "ogg", "flac"].includes(s) ? "audio" : "unknown";
   }
-  function ct(e) {
-    const s = st(e);
-    return !(s === "image" || s === "audio");
+  function yt(r) {
+    const l = mt(r);
+    return !(l === "image" || l === "audio");
   }
-  async function D(e, s) {
-    const n = document.createElement("video");
-    n.crossOrigin = "anonymous", n.muted = !1, n.playsInline = !0, n.preload = "metadata", n.src = e, n.load();
+  async function B(r, l) {
+    const s = document.createElement("video");
+    s.crossOrigin = "anonymous", s.muted = !1, s.playsInline = !0, s.preload = "metadata", s.src = r, s.load();
     try {
-      await _(n, "loadedmetadata", 15e3);
-    } catch (b) {
-      n.pause();
-      const I = k.get(n);
-      throw I && (URL.revokeObjectURL(I), k.delete(n)), n.removeAttribute("src"), n.load(), b;
+      await Q(s, "loadedmetadata", 15e3);
+    } catch (C) {
+      s.pause();
+      const I = v.get(s);
+      throw I && (URL.revokeObjectURL(I), v.delete(s)), s.removeAttribute("src"), s.load(), C;
     }
-    const f = n.videoWidth || 1, y = n.videoHeight || 1, v = document.createElement("canvas");
-    v.width = f, v.height = y;
-    const g = V.from(v), T = s?.sprite ?? new O(g);
-    return s?.sprite && (s.sprite.texture = g, s.oldTexture?.destroy(!0)), { kind: "element", video: n, canvas: v, texture: g, sprite: T, meta: { width: f, height: y } };
-  }
-  async function Ut(e, s) {
-    const { video: n, canvas: f, texture: y } = e;
-    n.playbackRate = Number.isFinite(s.playbackRate) && s.playbackRate > 0 ? s.playbackRate : 1, n.volume = Math.max(0, Math.min(1, s.volume ?? 1)), x.value ? n.play().catch(() => {
-    }) : n.pause();
-    const v = Number.isFinite(n.duration) && n.duration > 0 ? n.duration : null, g = v ? Math.min(s.targetSec, Math.max(v - 0.03, 0)) : s.targetSec, T = n.currentTime, b = Math.abs(T - g), I = x.value ? 0.25 : 0.03;
-    if (Number.isFinite(T) && b > I) {
+    const f = s.videoWidth || 1, S = s.videoHeight || 1, x = document.createElement("canvas");
+    x.width = f, x.height = S;
+    const T = G.from(x), k = l?.sprite ?? new V(T);
+    return l?.sprite && (l.sprite.texture = T, l.oldTexture?.destroy(!0)), { kind: "element", video: s, canvas: x, texture: T, sprite: k, meta: { width: f, height: S } };
+  }
+  async function Bt(r, l) {
+    const { video: s, canvas: f, texture: S } = r;
+    s.playbackRate = Number.isFinite(l.playbackRate) && l.playbackRate > 0 ? l.playbackRate : 1, s.volume = Math.max(0, Math.min(1, l.volume ?? 1)), g.value ? s.play().catch(() => {
+    }) : s.pause();
+    const x = Number.isFinite(s.duration) && s.duration > 0 ? s.duration : null, T = x ? Math.min(l.targetSec, Math.max(x - 0.03, 0)) : l.targetSec, k = s.currentTime, C = Math.abs(k - T), I = g.value ? 0.25 : 0.03;
+    if (Number.isFinite(k) && C > I) {
       try {
-        n.currentTime = g;
+        s.currentTime = T;
       } catch {
       }
-      await _(n, "seeked", 250).catch(() => {
+      await Q(s, "seeked", 250).catch(() => {
       });
     }
-    if (n.readyState < 2 && (await _(n, "canplay", 250).catch(() => {
-    }), n.readyState < 2))
+    if (s.readyState < 2 && (await Q(s, "canplay", 250).catch(() => {
+    }), s.readyState < 2))
       return;
-    const F = f.getContext("2d");
-    F && (F.drawImage(n, 0, 0, f.width, f.height), dt(y));
-  }
-  function Vt(e) {
-    return new Promise((s) => {
-      const n = new Image();
-      n.crossOrigin = "anonymous", n.onload = () => s(V.from(n)), n.onerror = () => {
-        console.warn("[renderer] failed to load image", e), s(void 0);
-      }, n.src = e;
+    const U = f.getContext("2d");
+    U && (U.drawImage(s, 0, 0, f.width, f.height), wt(S));
+  }
+  function jt(r) {
+    return new Promise((l) => {
+      const s = new Image();
+      s.crossOrigin = "anonymous", s.onload = () => l(G.from(s)), s.onerror = () => {
+        console.warn("[renderer] failed to load image", r), l(void 0);
+      }, s.src = r;
     });
   }
-  function dt(e) {
-    const s = e.source;
-    if ("update" in s && typeof s.update == "function") {
-      s.update();
+  function wt(r) {
+    const l = r.source;
+    if ("update" in l && typeof l.update == "function") {
+      l.update();
       return;
     }
-    typeof e.update == "function" && e.update();
+    typeof r.update == "function" && r.update();
   }
-  function Dt() {
-    q(), C += 1, Q.stop(), Z(), u.destroy({ children: !0 }), l.clear(), p.clear(), d.clear(), o.app || a.destroy(), E.destroy();
+  function _t() {
+    X(), b += 1, z.stop(), _(), a.destroy({ children: !0 }), d.clear(), y.clear(), u.clear(), e.app || n.destroy(), P.destroy();
   }
-  return o.autoPlay && tt(), {
-    app: a,
-    layer: u,
-    currentTime: w,
+  return e.autoPlay && ct(), {
+    app: n,
+    layer: a,
+    currentTime: m,
     duration: R,
-    isPlaying: x,
-    play: tt,
-    pause: q,
-    tick: ot,
-    seek: kt,
-    renderAt: Ct,
-    destroy: Dt
+    isPlaying: g,
+    play: ct,
+    pause: X,
+    tick: lt,
+    seek: Ut,
+    renderAt: Ot,
+    destroy: _t
   };
 }
-function fe(o) {
-  let t = !1, i = !1, r = null, a = null;
+function Me(e) {
+  let t = !1, o = !1, i = null, n = null;
   return async () => {
-    r || (r = new Promise((d) => {
-      a = d;
+    i || (i = new Promise((u) => {
+      n = u;
     }));
-    const c = r;
-    if (i)
+    const c = i;
+    if (o)
       return t = !0, c;
-    i = !0;
+    o = !0;
     do
-      t = !1, await o();
+      t = !1, await e();
     while (t);
-    return i = !1, a?.(), r = null, a = null, c;
+    return o = !1, n?.(), i = null, n = null, c;
   };
 }
-function pe(o) {
-  return typeof o == "object" && o !== null && "createReader" in o && "getSize" in o;
+function ge(e) {
+  return typeof e == "object" && e !== null && "createReader" in e && "getSize" in e;
 }
-function he(o) {
-  return typeof ReadableStream < "u" && o instanceof ReadableStream;
+function Se(e) {
+  return typeof ReadableStream < "u" && e instanceof ReadableStream;
 }
-function me(o) {
-  return typeof o == "string" || o instanceof Blob || pe(o) || he(o) ? { source: o } : o;
+function xe(e) {
+  return typeof e == "string" || e instanceof Blob || ge(e) || Se(e) ? { source: e } : e;
 }
-async function ht(o) {
-  if (typeof o == "string") {
-    const t = await fetch(o);
+async function xt(e) {
+  if (typeof e == "string") {
+    const t = await fetch(e);
     if (!t.body)
       throw new Error("concatVideos: unable to read video stream from url");
     return t.body;
   }
-  return o instanceof Blob ? o.stream() : o;
+  return e instanceof Blob ? e.stream() : e;
 }
-function we(o, t) {
-  let i = !1;
-  const r = () => {
-    i || (i = !0, t());
-  }, a = o.getReader();
+function Te(e, t) {
+  let o = !1;
+  const i = () => {
+    o || (o = !0, t());
+  }, n = e.getReader();
   return new ReadableStream({
-    async pull(u) {
-      const { done: c, value: d } = await a.read();
+    async pull(a) {
+      const { done: c, value: u } = await n.read();
       if (c) {
-        r(), u.close();
+        i(), a.close();
         return;
       }
-      u.enqueue(d);
+      a.enqueue(u);
     },
-    async cancel(u) {
+    async cancel(a) {
       try {
-        await a.cancel(u);
+        await n.cancel(a);
       } finally {
-        r();
+        i();
       }
     }
   });
 }
-async function Te(o, t = {}) {
-  if (o.length === 0)
+async function Ne(e, t = {}) {
+  if (e.length === 0)
     throw new Error("concatVideos: expected at least one source");
   const {
-    onProgress: i,
-    width: r,
-    height: a,
-    ...u
-  } = t, c = o.map(me), [d, ...l] = c, p = await ht(d.source), h = new G(p);
+    onProgress: o,
+    width: i,
+    height: n,
+    ...a
+  } = t, c = e.map(xe), [u, ...d] = c, y = await xt(u.source), h = new K(y);
   await h.ready;
-  const m = r ?? Math.round(h.meta.width || 0), S = a ?? Math.round(h.meta.height || 0);
-  if (!m || !S)
+  const w = i ?? Math.round(h.meta.width || 0), M = n ?? Math.round(h.meta.height || 0);
+  if (!w || !M)
     throw h.destroy(), new Error("concatVideos: output width/height is required");
-  const M = new mt({
-    ...u,
-    width: m,
-    height: S
+  const p = new bt({
+    ...a,
+    width: w,
+    height: M
   });
-  i && M.on("OutputProgress", i);
-  let k = 0;
-  const w = async (A) => {
-    const L = A.meta.duration;
-    if (!Number.isFinite(L) || L <= 0)
+  o && p.on("OutputProgress", o);
+  let v = 0;
+  const m = async (A) => {
+    const E = A.meta.duration;
+    if (!Number.isFinite(E) || E <= 0)
       throw A.destroy(), new Error("concatVideos: invalid clip duration");
-    const C = new wt(A);
+    const b = new nt(A);
     try {
-      await C.ready, C.rect.x = 0, C.rect.y = 0, C.rect.w = m, C.rect.h = S, C.time.offset = k, C.time.duration = L, await M.addSprite(C), k += L;
+      await b.ready, b.rect.x = 0, b.rect.y = 0, b.rect.w = w, b.rect.h = M, b.time.offset = v, b.time.duration = E, await p.addSprite(b), v += E;
     } finally {
-      C.destroy();
+      b.destroy();
     }
   };
   try {
-    await w(h);
-    for (const A of l) {
-      const L = await ht(A.source), C = new G(L);
-      await C.ready, await w(C);
+    await m(h);
+    for (const A of d) {
+      const E = await xt(A.source), b = new K(E);
+      await b.ready, await m(b);
     }
   } catch (A) {
-    throw M.destroy(), A;
+    throw p.destroy(), A;
   }
-  const x = k, R = M.output({ maxTime: x }), E = () => {
-    M.destroy();
+  const g = v, R = p.output({ maxTime: g }), P = () => {
+    p.destroy();
   };
   return {
-    stream: we(R, E),
-    width: m,
-    height: S,
-    durationMs: Math.round(x / 1e3),
-    destroy: E
+    stream: Te(R, P),
+    width: w,
+    height: M,
+    durationMs: Math.round(g / 1e3),
+    destroy: P
   };
 }
-class H {
+class at {
   ready;
   meta;
   protocol;
@@ -1022,149 +1101,314 @@ class H {
   renderer;
   app;
   destroyed = !1;
-  constructor(t, i = {}) {
-    this.protocol = t, this.options = i;
-    const r = i.width ?? t.width, a = i.height ?? t.height, u = J(t);
+  constructor(t, o = {}) {
+    this.protocol = t, this.options = o;
+    const i = o.width ?? t.width, n = o.height ?? t.height, a = it(t);
     this.meta = {
-      width: r,
-      height: a,
-      duration: Math.max(0, Math.round(u * 1e3))
+      width: i,
+      height: n,
+      duration: Math.max(0, Math.round(a * 1e3))
     }, this.ready = this.init();
   }
   async init() {
-    const t = this.options.width ?? this.protocol.width, i = this.options.height ?? this.protocol.height;
-    if (!t || !i)
+    const t = this.options.width ?? this.protocol.width, o = this.options.height ?? this.protocol.height;
+    if (!t || !o)
       throw new Error("ProtocolVideoClip: output width/height is required");
-    const r = new yt();
-    await r.init({
+    const i = new kt();
+    await i.init({
       width: t,
-      height: i,
+      height: o,
       backgroundAlpha: 0,
       ...this.options.appOptions
-    }), r.ticker.stop(), this.app = r;
-    const a = this.options.rendererOptions ?? {}, u = await le({
+    }), i.ticker.stop(), this.app = i;
+    const n = this.options.rendererOptions ?? {}, a = await ve({
       protocol: this.protocol,
-      app: r,
-      ...a,
+      app: i,
+      ...n,
       autoPlay: !1,
       freezeOnPause: !1,
       manualRender: !0,
-      videoSourceMode: a.videoSourceMode ?? "mp4clip"
+      videoSourceMode: n.videoSourceMode ?? "mp4clip"
     });
-    this.renderer = u;
-    const c = u.duration.value;
+    this.renderer = a;
+    const c = a.duration.value;
     return this.meta = {
-      width: r.renderer.width,
-      height: r.renderer.height,
+      width: i.renderer.width,
+      height: i.renderer.height,
       duration: Math.max(0, Math.round(c * 1e3))
     }, this.meta;
   }
   async tick(t) {
-    const i = [];
+    const o = [];
     if (this.destroyed)
-      return { audio: i, state: "done" };
+      return { audio: o, state: "done" };
     if (await this.ready, !this.renderer)
-      return { audio: i, state: "done" };
-    const r = this.meta.duration;
-    if (t >= r)
-      return { audio: i, state: "done" };
-    const a = Math.max(0, Math.min(t, r));
-    return await this.renderer.renderAt(a / 1e3), {
+      return { audio: o, state: "done" };
+    const i = this.meta.duration;
+    if (t >= i)
+      return { audio: o, state: "done" };
+    const n = Math.max(0, Math.min(t, i));
+    return await this.renderer.renderAt(n / 1e3), {
       video: new VideoFrame(this.renderer.app.canvas, {
         timestamp: t
       }),
-      audio: i,
+      audio: o,
       state: "success"
     };
   }
   async clone() {
-    const t = new H(this.protocol, this.options);
+    const t = new at(this.protocol, this.options);
     return await t.ready, t;
   }
   destroy() {
     this.destroyed || (this.destroyed = !0, this.renderer?.destroy(), this.app?.destroy(!0));
   }
 }
-function ye(o, t) {
-  let i = !1;
-  const r = () => {
-    i || (i = !0, t());
-  }, a = o.getReader();
+const It = 12e3;
+function be(e, t, o) {
+  return new Promise((i, n) => {
+    const a = globalThis.setTimeout(() => {
+      n(new Error(`composeProtocol: ${o} timed out (${t}ms)`));
+    }, t);
+    e.then((c) => {
+      globalThis.clearTimeout(a), i(c);
+    }).catch((c) => {
+      globalThis.clearTimeout(a), n(c);
+    });
+  });
+}
+class st {
+  constructor(t, o) {
+    this.sourceClip = t, this.config = o, this.ready = this.sourceClip.ready.then((i) => {
+      const n = Math.round(this.config.segmentDurationUs * this.config.playRate), a = Math.max(0, i.duration - this.config.fromUs);
+      return this.clipMeta = {
+        width: i.width,
+        height: i.height,
+        duration: Math.max(0, Math.min(n, a))
+      }, this.meta;
+    });
+  }
+  ready;
+  clipMeta = {
+    width: 0,
+    height: 0,
+    duration: 0
+  };
+  get meta() {
+    return { ...this.clipMeta };
+  }
+  async tick(t) {
+    const o = Math.max(0, Math.round(t)), i = Math.round(o / this.config.playRate);
+    if (i >= this.config.segmentDurationUs)
+      return {
+        audio: [],
+        state: "done"
+      };
+    const n = this.config.fromUs + o, a = await this.sourceClip.tick(n);
+    ke(a.video);
+    const c = this.resolveGain(i);
+    return {
+      audio: Ce(a.audio ?? [], c),
+      state: a.state
+    };
+  }
+  async clone() {
+    const t = await this.sourceClip.clone(), o = new st(t, this.config);
+    return await o.ready, o;
+  }
+  destroy() {
+    this.sourceClip.destroy();
+  }
+  resolveGain(t) {
+    let o = 1;
+    this.config.fadeInUs > 0 && t < this.config.fadeInUs && (o = Math.max(0, t / this.config.fadeInUs));
+    const i = this.config.segmentDurationUs - t;
+    return this.config.fadeOutUs > 0 && i < this.config.fadeOutUs && (o = Math.min(o, Math.max(0, i / this.config.fadeOutUs))), this.config.baseVolume * o;
+  }
+}
+function ke(e) {
+  if (!e || typeof e != "object")
+    return;
+  const t = e.close;
+  typeof t == "function" && t.call(e);
+}
+function Ce(e, t) {
+  return !e.length || t >= 0.999 ? e : t <= 0 ? e.map((o) => new Float32Array(o.length)) : e.map((o) => {
+    const i = new Float32Array(o.length);
+    for (let n = 0; n < o.length; n++)
+      i[n] = o[n] * t;
+    return i;
+  });
+}
+function j(e) {
+  return Number.isFinite(e) ? Math.max(0, Math.round(e * 1e3)) : 0;
+}
+function rt(e) {
+  return typeof e != "number" || !Number.isFinite(e) ? 1 : Math.max(0, Math.min(1, e));
+}
+function Re(e) {
+  return typeof e != "number" || !Number.isFinite(e) ? 1 : Math.max(0.1, Math.min(100, e));
+}
+function Ae(e) {
+  const t = Math.max(0, e.endTime - e.startTime), o = Math.max(0, Math.min(e.fadeInDuration ?? 0, t)), i = Math.max(0, Math.min(e.fadeOutDuration ?? 0, t));
+  return {
+    fromUs: j(e.fromTime ?? 0),
+    segmentDurationUs: j(t),
+    playRate: Re(e.playRate),
+    baseVolume: rt(e.volume),
+    fadeInUs: j(o),
+    fadeOutUs: j(i)
+  };
+}
+function Ee(e) {
+  return e.segmentType === "audio";
+}
+function Ie(e) {
+  return e.segmentType === "frames" && e.type === "video";
+}
+async function Pt(e, t = It) {
+  const o = new AbortController(), i = globalThis.setTimeout(() => o.abort(), t);
+  try {
+    const n = await fetch(e, { signal: o.signal });
+    if (!n.body)
+      throw new Error(`composeProtocol: unable to read resource stream: ${e}`);
+    return n.body;
+  } catch (n) {
+    throw o.signal.aborted ? new Error(`composeProtocol: loading resource timed out (${t}ms): ${e}`) : n;
+  } finally {
+    globalThis.clearTimeout(i);
+  }
+}
+async function Ft(e, t) {
+  const o = Ae(t), i = new st(e, o), n = new nt(i);
+  try {
+    await be(n.ready, It, "prepare audio sprite");
+  } catch (a) {
+    throw n.destroy(), a;
+  }
+  return n.time.offset = j(t.startTime), n.time.duration = o.segmentDurationUs, n.time.playbackRate = o.playRate, n;
+}
+async function Pe(e) {
+  const t = await Pt(e.url), o = new Tt(t);
+  return await Ft(o, e);
+}
+async function Fe(e) {
+  const t = await Pt(e.url), o = new K(t, { audio: !0 });
+  return await Ft(o, e);
+}
+async function Ue(e) {
+  const t = [];
+  for (const n of e.tracks)
+    for (const a of n.children)
+      if (!(a.endTime <= a.startTime)) {
+        if (Ee(a)) {
+          if (rt(a.volume) <= 0)
+            continue;
+          t.push(Pe(a));
+          continue;
+        }
+        if (Ie(a)) {
+          if (rt(a.volume) <= 0)
+            continue;
+          t.push(Fe(a));
+        }
+      }
+  if (!t.length)
+    return [];
+  const o = await Promise.allSettled(t), i = [];
+  for (const n of o) {
+    if (n.status === "fulfilled") {
+      i.push(n.value);
+      continue;
+    }
+    console.warn("[compose] skip audio sprite due to load failure", n.reason);
+  }
+  return i;
+}
+function ot(e) {
+  for (const t of e)
+    t.destroy();
+}
+function Oe(e, t) {
+  let o = !1;
+  const i = () => {
+    o || (o = !0, t());
+  }, n = e.getReader();
   return new ReadableStream({
-    async pull(u) {
-      const { done: c, value: d } = await a.read();
+    async pull(a) {
+      const { done: c, value: u } = await n.read();
       if (c) {
-        r(), u.close();
+        i(), a.close();
         return;
       }
-      u.enqueue(d);
+      a.enqueue(u);
     },
-    async cancel(u) {
+    async cancel(a) {
       try {
-        await a.cancel(u);
+        await n.cancel(a);
       } finally {
-        r();
+        i();
       }
     }
   });
 }
-async function be(o, t = {}) {
+async function Ge(e, t = {}) {
   const {
-    width: i,
-    height: r,
-    fps: a,
-    onProgress: u,
+    width: o,
+    height: i,
+    fps: n,
+    onProgress: a,
     clipOptions: c,
-    audioSprites: d,
-    ...l
-  } = t, p = i ?? o.width, h = r ?? o.height;
-  if (!p || !h)
+    audioSprites: u,
+    ...d
+  } = t, y = o ?? e.width, h = i ?? e.height;
+  if (!y || !h)
     throw new Error("composeProtocol: output width/height is required");
-  const m = a ?? o.fps, S = typeof d == "function", M = l.audio ?? (S ? void 0 : !1), k = new mt({
-    ...l,
-    audio: M,
-    width: p,
+  const w = n ?? e.fps, M = d.audio === !1 ? [] : typeof u == "function" ? await u(e) : await Ue(e), p = d.audio ?? (M.length > 0 ? void 0 : !1), v = new bt({
+    ...d,
+    audio: p,
+    width: y,
     height: h,
-    fps: m
+    fps: w
   });
-  u && k.on("OutputProgress", u);
-  let w, x;
+  a && v.on("OutputProgress", a);
+  let m, g;
   try {
-    if (w = new H(o, {
-      width: p,
+    m = new at(e, {
+      width: y,
       height: h,
-      fps: m,
+      fps: w,
       ...c,
       rendererOptions: {
         warmUpResources: !1,
         ...c?.rendererOptions
       }
-    }), await w.ready, x = new wt(w), await x.ready, x.time.offset = 0, x.time.duration = w.meta.duration, x.rect.x = 0, x.rect.y = 0, x.rect.w = w.meta.width, x.rect.h = w.meta.height, await k.addSprite(x, { main: !0 }), d) {
-      const L = await d(o);
-      for (const C of L)
-        await k.addSprite(C);
-    }
-  } catch (L) {
-    throw k.destroy(), L;
+    }), await m.ready, g = new nt(m), await g.ready, g.time.offset = 0, g.time.duration = m.meta.duration, g.rect.x = 0, g.rect.y = 0, g.rect.w = m.meta.width, g.rect.h = m.meta.height, await v.addSprite(g, { main: !0 });
+    for (const b of M)
+      await v.addSprite(b);
+  } catch (b) {
+    throw ot(M), g?.destroy(), m?.destroy(), v.destroy(), b;
   }
-  const R = w?.meta.duration ?? 0;
+  const R = m?.meta.duration ?? 0;
   if (!R)
-    throw new Error("composeProtocol: protocol has no duration");
-  const E = k.output({ maxTime: R }), A = () => {
-    x?.destroy(), w?.destroy(), k.destroy();
+    throw ot(M), g?.destroy(), m?.destroy(), v.destroy(), new Error("composeProtocol: protocol has no duration");
+  const P = v.output({ maxTime: R });
+  let A = !1;
+  const E = () => {
+    A || (A = !0, ot(M), g?.destroy(), m?.destroy(), v.destroy());
   };
   return {
-    stream: ye(E, A),
-    width: p,
+    stream: Oe(P, E),
+    width: y,
     height: h,
     durationMs: Math.round(R / 1e3),
-    destroy: A
+    destroy: E
   };
 }
 export {
-  H as ProtocolVideoClip,
-  be as composeProtocol,
-  Te as concatVideos,
-  le as createRenderer
+  at as ProtocolVideoClip,
+  Ge as composeProtocol,
+  Ne as concatVideos,
+  ve as createRenderer
 };
 //# sourceMappingURL=index.js.map