@video-editor/renderer 0.0.1-beta.26 → 0.0.1-beta.27

package/dist/index.js

@@ -1,660 +1,1014 @@
-import { createValidator as ze, createResourceManager as Ue, getResourceKey as q } from "@video-editor/protocol";
-import { toRaw as De, isRef as Ne, shallowRef as se, unref as de, ref as ue, computed as qe, effectScope as Le, watch as j } from "@vue/reactivity";
-import { renderTxt2ImgBitmap as Be, MP4Clip as D, Combinator as pe, OffscreenSprite as he } from "@webav/av-cliper";
-import { file as _e } from "opfs-tools";
-import { Application as we, Sprite as F, Texture as z, Graphics as me, Container as We } from "pixi.js";
-async function Ye(t) {
-  const o = new we();
-  return await o.init({ resizeTo: window, backgroundAlpha: 0, ...t }), o;
+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 P, 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;
 }
-function Ke(t, o, a, i, c) {
-  const u = o || i, l = a || c;
-  if (!u || !l)
-    return { width: i, height: c };
-  const s = u / l, m = i / c;
-  switch (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) {
     case "none":
-      return { width: u, height: l };
+      return { width: u, height: c };
     case "cover":
-      return s > m ? { width: c * s, height: c } : { width: i, height: i / s };
+      return d > l ? { width: a * d, height: a } : { width: r, height: r / d };
     case "stretch":
-      return { width: i, height: c };
+      return { width: r, height: a };
     default:
-      return s > m ? { width: i, height: i / s } : { width: c * s, height: c };
+      return d > l ? { width: r, height: r / d } : { width: a * d, height: a };
   }
 }
-function je(t, o, a, i, c) {
-  const u = "fillMode" in t ? t.fillMode : void 0, { width: l, height: s } = Ke(
+function Ht(o, t, i, r, a) {
+  const u = "fillMode" in o ? o.fillMode : void 0, { width: c, height: d } = Jt(
     u,
-    i,
-    c,
-    o,
-    a
-  ), m = "transform" in t ? t.transform : void 0, [T, g] = m?.position ?? [0, 0], [k, C] = m?.scale ?? [1, 1], S = m?.rotation?.[2] ?? 0, w = l * k, M = s * C, y = o / 2 + T * o / 2, I = a / 2 - g * a / 2;
+    r,
+    a,
+    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;
   return {
-    width: w,
-    height: M,
-    centerX: y,
-    centerY: I,
-    rotationRad: S / 180 * Math.PI
+    width: k,
+    height: w,
+    centerX: x,
+    centerY: R,
+    rotationRad: M / 180 * Math.PI
   };
 }
-function Xe(t) {
-  const o = /* @__PURE__ */ new Set();
-  for (const a of t.tracks)
-    for (const i of a.children)
-      i.url && o.add(i.url);
-  return o;
+function Qt(o) {
+  const t = /* @__PURE__ */ new Set();
+  for (const i of o.tracks)
+    for (const r of i.children)
+      r.url && t.add(r.url);
+  return t;
 }
-function Ge(t, o) {
-  const a = [];
-  return t.tracks.forEach((i, c) => {
-    i.children.forEach((u, l) => {
-      u.startTime <= o && o < u.endTime && a.push({ segment: u, trackIndex: c, childIndex: l });
+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 });
     });
-  }), a.sort((i, c) => {
-    const u = t.tracks[i.trackIndex], l = t.tracks[c.trackIndex], s = u?.trackType === "frames" && u.isMain, m = l?.trackType === "frames" && l.isMain, T = t.tracks.length, g = s ? 0 : T - i.trackIndex, k = m ? 0 : T - c.trackIndex;
-    return g !== k ? g - k : i.trackIndex === c.trackIndex ? i.childIndex - c.childIndex : i.trackIndex - c.trackIndex;
+  }), 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;
   });
 }
-function Je(t, o, a, i) {
-  const c = Qe(o), u = t instanceof F && t.texture.width || a, l = t instanceof F && t.texture.height || i, s = je(o, a, i, u, l);
-  t instanceof F ? (t.anchor.set(0.5), t.width = s.width, t.height = s.height, t.position.set(s.centerX, s.centerY), t.rotation = s.rotationRad, t.texture.source?.addEventListener?.("error", () => {
-    t.texture = z.from(He(a, i));
-  }, { once: !0 })) : t instanceof me && (t.clear(), t.rect(0, 0, s.width, s.height).fill({ color: ye("url" in o && typeof o.url == "string" ? o.url : o.segmentType), alpha: ve(o) ? c : 0.35 }), t.pivot.set(s.width / 2, s.height / 2), t.position.set(s.centerX, s.centerY), t.rotation = s.rotationRad), t.alpha = c;
+function Zt(o, t, i, r) {
+  const a = ee(t), u = o instanceof P && o.texture.width || i, c = o instanceof P && o.texture.height || r, d = Ht(t, i, r, u, c);
+  o instanceof P ? (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 X(t, o) {
-  const a = new me();
-  return a.rect(0, 0, 10, 10).fill({ color: ye(o ?? t), alpha: 1 }), a;
+function Y(o, t) {
+  const i = new vt();
+  return i.rect(0, 0, 10, 10).fill({ color: gt(t ?? o), alpha: 1 }), i;
 }
-function He(t, o, a) {
-  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${o}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
-  return `data:image/svg+xml;base64,${btoa(i)}`;
+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 ye(t) {
-  let o = 0;
-  for (let a = 0; a < t.length; a++)
-    o = t.charCodeAt(a) + ((o << 5) - o);
-  return o & 16777215;
+function gt(o) {
+  let t = 0;
+  for (let i = 0; i < o.length; i++)
+    t = o.charCodeAt(i) + ((t << 5) - t);
+  return t & 16777215;
 }
-function J(t) {
-  const o = t.tracks.flatMap((a) => a.children.map((i) => i.endTime));
-  return o.length ? Math.max(...o) : 0;
+function J(o) {
+  const t = o.tracks.flatMap((i) => i.children.map((r) => r.endTime));
+  return t.length ? Math.max(...t) : 0;
 }
-function G(t, o, a) {
-  return Math.min(Math.max(t, o), a);
+function X(o, t, i) {
+  return Math.min(Math.max(o, t), i);
 }
-function le(t) {
-  const o = De(t);
-  return JSON.parse(JSON.stringify(o));
+function pt(o) {
+  const t = zt(o);
+  return JSON.parse(JSON.stringify(t));
 }
-function ve(t) {
-  return "opacity" in t;
+function xt(o) {
+  return "opacity" in o;
 }
-function Qe(t) {
-  return ve(t) && typeof t.opacity == "number" ? t.opacity : 1;
+function ee(o) {
+  return xt(o) && typeof o.opacity == "number" ? o.opacity : 1;
 }
-const Ze = 100, O = /* @__PURE__ */ new Map();
-let et = Ze;
-function tt(t, o) {
-  O.delete(t), O.set(t, o);
+class oe {
+  protocol;
+  clips = /* @__PURE__ */ new Map();
+  loadingClips = /* @__PURE__ */ new Map();
+  audioLoops = /* @__PURE__ */ new Map();
+  audioLoopContexts = /* @__PURE__ */ new Map();
+  mp4Loops = /* @__PURE__ */ new Map();
+  mp4States = /* @__PURE__ */ new Map();
+  audioGains = /* @__PURE__ */ new Map();
+  mp4Gains = /* @__PURE__ */ new Map();
+  ctx;
+  lastTime = 0;
+  constructor(t) {
+    this.protocol = t, this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+  }
+  async sync(t, i) {
+    if (!i) {
+      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)
+      if (c.segmentType === "audio") {
+        const d = this.audioKey(c.id);
+        a.add(d), this.ensureAudioLoop(c, t);
+      } else if (c.segmentType === "frames" && "type" in c && c.type === "video") {
+        const d = this.videoKey(c.id);
+        u.add(d);
+      }
+    for (const [c, d] of this.audioLoops)
+      if (!a.has(c)) {
+        d.stop();
+        for (const l of d.sources)
+          try {
+            l.stop(), l.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)
+          try {
+            l.stop(), l.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));
+  }
+  /**
+   * 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)
+      return;
+    const a = this.videoKey(t), u = this.getSegmentVolume(t), c = this.getOrCreateGain(this.mp4Gains, a, u);
+    this.ctx.state === "suspended" && this.ctx.resume().catch(() => {
+    });
+    let d = this.mp4States.get(a);
+    d || (d = {
+      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);
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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)
+        try {
+          a.stop(), a.disconnect();
+        } catch {
+        }
+      this.mp4Loops.delete(i), this.mp4States.delete(i), this.mp4Gains.delete(i);
+    }
+  }
+  /**
+   * @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)
+        return;
+      l.loop.stop();
+      for (const S of l.loop.sources)
+        try {
+          S.stop(), S.disconnect();
+        } catch {
+        }
+      this.mp4Loops.delete(u), this.mp4States.delete(u);
+    }
+    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,
+      startCtxTime: this.ctx.currentTime,
+      fps: a
+    });
+  }
+  destroy() {
+    this.stopAll();
+    for (const t of this.clips.values())
+      t.clip.destroy();
+    this.clips.clear();
+  }
+  stopAll() {
+    for (const t of this.audioLoops.values()) {
+      t.stop();
+      for (const i of t.sources)
+        try {
+          i.stop(0), i.disconnect();
+        } catch {
+        }
+      t.sources.length = 0;
+    }
+    for (const t of this.mp4Loops.values()) {
+      t.stop();
+      for (const i of t.sources)
+        try {
+          i.stop(0), i.disconnect();
+        } catch {
+        }
+      t.sources.length = 0;
+    }
+    for (const t of this.audioGains.values())
+      try {
+        t.disconnect();
+      } catch {
+      }
+    for (const t of this.mp4Gains.values())
+      try {
+        t.disconnect();
+      } catch {
+      }
+    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)
+      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);
+    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, {
+      segment: t,
+      startedAt: this.ctx.currentTime,
+      segmentRelativeMs: d
+    });
+  }
+  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)
+        return;
+      const { audio: M, state: k } = await t.tick(Math.round(c));
+      if (c += p, k === "done")
+        return;
+      if (l) {
+        l = !1;
+        return;
+      }
+      (M?.[0]?.length ?? 0) !== 0 && (d = this.playFrames(M, h, d, a, m));
+    }, Math.round(1e3 / Math.max(r || 30, 1)));
+    return {
+      sources: m,
+      stop: () => {
+        u = !0, window.clearInterval(S);
+      },
+      isStopped: () => u
+    };
+  }
+  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 () => {
+      if (c)
+        return;
+      if (p || (i > 0 && await t.tick(i), p = !0), d += M, u !== void 0 && d > u) {
+        c = !0;
+        return;
+      }
+      const { audio: w, state: x } = await t.tick(d);
+      if (c)
+        return;
+      if (x === "done") {
+        c = !0;
+        return;
+      }
+      if ((w?.[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);
+    };
+    return k(), {
+      sources: m,
+      stop: () => {
+        c = !0;
+      },
+      isStopped: () => c
+    };
+  }
+  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;
+    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);
+    }
+    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;
+      setTimeout(() => {
+        const S = u.indexOf(p);
+        S > -1 && u.splice(S, 1);
+      }, m + 100);
+    }
+    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;
+  }
+  audioKey(t) {
+    return `audio:${t}`;
+  }
+  videoKey(t) {
+    return `video:${t}`;
+  }
+  async loadClip(t) {
+    const i = this.clips.get(t.id);
+    if (i)
+      return i;
+    const r = this.loadingClips.get(t.id);
+    if (r)
+      return r;
+    const a = (async () => {
+      try {
+        const u = await fetch(t.url);
+        if (!u.body) {
+          this.loadingClips.delete(t.id);
+          return;
+        }
+        const c = new jt(u.body), d = { 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;
+      }
+    })();
+    return this.loadingClips.set(t.id, a), a;
+  }
+  findSegmentInProtocol(t) {
+    for (const i of this.protocol.tracks)
+      for (const r of i.children)
+        if (r.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)
+          continue;
+        const a = r.volume;
+        return typeof a == "number" ? a : 1;
+      }
+    return 1;
+  }
+  getClipSampleRate(t) {
+    const i = t.meta;
+    if (!i)
+      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;
+  }
 }
-function rt() {
-  for (; O.size > et; ) {
-    const [t, o] = O.entries().next().value;
-    O.delete(t), o.close?.();
+const re = 100, $ = /* @__PURE__ */ new Map();
+let ie = re;
+function ne(o, t) {
+  $.delete(o), $.set(o, t);
+}
+function ae() {
+  for (; $.size > ie; ) {
+    const [o, t] = $.entries().next().value;
+    $.delete(o), t.close?.();
   }
 }
-function nt(t) {
-  return t.map((o) => o.content).filter(Boolean).join(`
+function se(o) {
+  return o.map((t) => t.content).filter(Boolean).join(`
 `);
 }
-function ot(t) {
-  const o = Array.isArray(t.fontFamily) ? t.fontFamily.join(", ") : t.fontFamily, a = t.fontSize ?? 32, i = t.fontWeight ?? "normal", c = t.fontStyle ?? "normal", u = t.fill ?? "#ffffff", l = t.align ?? "left", s = [
-    `font-size: ${a}px`,
-    `font-weight: ${i}`,
-    `font-style: ${c}`,
+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}`,
-    `text-align: ${l}`,
+    `text-align: ${c}`,
     "white-space: pre-wrap"
   ];
-  if (o && s.push(`font-family: ${o}`), typeof t.letterSpacing == "number" && s.push(`letter-spacing: ${t.letterSpacing}px`), typeof t.leading == "number" && s.push(`line-height: ${t.leading}px`), t.background?.color && s.push(`background: ${t.background.color}`), t.stroke?.color && typeof t.stroke.width == "number" && s.push(`-webkit-text-stroke: ${t.stroke.width}px ${t.stroke.color}`), t.underline && s.push("text-decoration: underline"), t.dropShadow?.color && typeof t.dropShadow.distance == "number") {
-    const m = (t.dropShadow.angle ?? 45) * (Math.PI / 180), T = Math.cos(m) * t.dropShadow.distance, g = Math.sin(m) * t.dropShadow.distance, k = t.dropShadow.blur ?? 0;
-    s.push(`text-shadow: ${T}px ${g}px ${k}px ${t.dropShadow.color}`);
+  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}`);
   }
-  return s.join("; ");
+  return d.join("; ");
 }
-async function it(t, o) {
-  const a = `${o}::${t}`, i = O.get(a);
-  if (i)
-    return tt(a, i), i;
-  const c = await Be(t, o);
-  return O.set(a, c), rt(), c;
+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;
 }
-const at = "/video-editor-res";
-async function ct(t) {
-  const o = ze(), a = Ne(t.protocol) ? t.protocol : se(t.protocol), i = se(
-    o.verify(le(de(a)))
-  ), c = t.app ?? await Ye(t.appOptions), u = new We();
-  c.stage.addChild(u);
-  const l = Ue({ dir: t.resourceDir }), s = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Set(), C = t.videoSourceMode ?? "auto", S = /* @__PURE__ */ new Map(), w = ue(0), M = ue(!1), y = qe(() => J(i.value));
-  let I, $ = 0, x = 0;
-  async function R(e) {
-    const n = x, { protocol: r, at: d, layer: f } = e, p = Pe(r, d), h = Ge(r, p), b = e.app.renderer.width, v = e.app.renderer.height, P = [];
-    for (const { segment: A } of h) {
-      if (n !== x)
+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 = Pt(n, f), g = Mt(n, v), T = e.app.renderer.width, b = e.app.renderer.height;
+    E.sync(f, x.value);
+    const I = [];
+    for (const { segment: U } of g) {
+      if (s !== C)
         return;
-      const N = await e.getDisplay(A);
-      if (n !== x)
+      const O = await e.getDisplay(U);
+      if (s !== C)
         return;
-      if (N && !N.destroyed) {
-        if (Je(N, A, b, v), Re(A) && await W(A, p), n !== x)
+      if (O && !O.destroyed) {
+        if (Zt(O, U, T, b), Ot(U) && await j(U, v), s !== C)
           return;
-        P.push(N);
+        I.push(O);
       }
     }
-    if (n !== x)
+    if (s !== C)
       return;
-    f.removeChildren();
-    const V = P.filter(Boolean);
-    V.length && f.addChild(...V), n === x && e.app.render();
+    y.removeChildren();
+    const F = I.filter(Boolean);
+    F.length && y.addChild(...F), s === C && e.app.render();
   }
-  const E = st(() => R({
-    app: c,
+  const z = fe(() => St({
+    app: a,
     layer: u,
-    protocol: i.value,
+    protocol: r.value,
     at: w.value,
-    getDisplay: Te
-  })), Q = Le();
+    getDisplay: Rt
+  })), Q = Bt();
   Q.run(() => {
-    j(
-      () => de(a),
+    W(
+      () => lt(i),
       (e) => {
         try {
-          i.value = o.verify(le(e));
-        } catch (n) {
-          console.error("[renderer] invalid protocol update", n);
+          r.value = t.verify(pt(e));
+        } catch (s) {
+          console.error("[renderer] invalid protocol update", s);
           return;
         }
-        x += 1, Z(), t.warmUpResources !== !1 && ge(i.value), Se(i.value), L(), t.manualRender || E();
+        C += 1, Z(), o.warmUpResources !== !1 && Tt(r.value), bt(r.value), K(), o.manualRender || z();
       },
       { deep: !0, immediate: !0 }
-    ), t.manualRender || j(w, () => {
-      L(), E();
-    }), j(y, () => L());
+    ), o.manualRender || W(w, () => {
+      K(), z();
+    }), W(R, () => K());
   });
-  function L() {
-    const e = y.value;
+  function K() {
+    const e = R.value;
     e <= 0 ? w.value = 0 : w.value > e ? w.value = e : w.value < 0 && (w.value = 0);
   }
-  function ge(e) {
-    for (const n of Xe(e))
-      s.has(n) || (s.add(n), ie(n) !== "video" && Y(n) && l.add(n).catch(() => {
+  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 Se(e) {
-    const n = /* @__PURE__ */ new Set();
-    for (const r of e.tracks)
-      for (const d of r.children)
-        n.add(d.id);
-    for (const [r, d] of m)
-      n.has(r) || (d.destroy(), m.delete(r));
-    for (const [r, d] of S)
-      n.has(r) || (ne(d), S.delete(r));
+  function 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 m.values())
+    for (const e of l.values())
       e.destroy();
-    m.clear(), T.clear();
-    for (const e of S.values())
-      ne(e);
-    S.clear();
+    l.clear(), p.clear();
+    for (const e of M.values())
+      nt(e);
+    M.clear();
   }
-  function ee() {
-    M.value || (M.value = !0, $ = performance.now(), I = requestAnimationFrame(te));
+  function tt() {
+    x.value || (x.value = !0, L = performance.now(), A = requestAnimationFrame(et));
   }
-  function B() {
-    M.value = !1, I !== void 0 && cancelAnimationFrame(I), I = void 0, t.freezeOnPause !== !1 && Fe();
+  function q() {
+    x.value = !1, A !== void 0 && cancelAnimationFrame(A), A = void 0, E.sync(w.value, !1), o.freezeOnPause !== !1 && $t();
   }
-  function te() {
-    re(), M.value && (I = requestAnimationFrame(te));
+  function et() {
+    ot(), x.value && (A = requestAnimationFrame(et));
   }
-  function re(e) {
-    if (!M.value && e === void 0)
+  function ot(e) {
+    if (!x.value && e === void 0)
       return;
-    const n = performance.now(), r = e ?? ($ ? n - $ : 0);
-    $ = n, r !== 0 && (w.value = G(
-      w.value + r,
+    const s = performance.now(), n = e ?? (L ? s - L : 0);
+    L = s, n !== 0 && (w.value = X(
+      w.value + n,
       0,
-      y.value || Number.POSITIVE_INFINITY
-    ), y.value > 0 && w.value >= y.value && B());
+      R.value || Number.POSITIVE_INFINITY
+    ), R.value > 0 && w.value >= R.value && q());
   }
-  function Me(e) {
-    w.value = G(e, 0, y.value || Number.POSITIVE_INFINITY);
+  function kt(e) {
+    w.value = X(e, 0, R.value || Number.POSITIVE_INFINITY);
   }
-  async function be(e) {
-    w.value = G(e, 0, y.value || Number.POSITIVE_INFINITY), await E();
+  async function Ct(e) {
+    w.value = X(e, 0, R.value || Number.POSITIVE_INFINITY), await z();
   }
-  async function Te(e) {
-    const n = m.get(e.id);
+  async function Rt(e) {
+    const s = l.get(e.id);
+    if (s)
+      return s;
+    const n = p.get(e.id);
     if (n)
       return n;
-    const r = T.get(e.id);
-    if (r)
-      return r;
-    const d = ke(e);
-    T.set(e.id, d);
-    const f = await d;
-    return f && m.set(e.id, f), T.delete(e.id), f;
+    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 ke(e) {
+  async function At(e) {
     if (e.segmentType === "frames" || e.segmentType === "sticker") {
       if (!e.url)
-        return X(e.segmentType);
-      if ("type" in e && e.type === "video" && ae(e.url)) {
-        const r = await Ce(e);
-        return r || X(e.segmentType, 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 n = await Ee(e.url);
-      return n ? new F(n) : X(e.segmentType, e.url);
+      const s = await Lt(e.url);
+      return s ? new P(s) : Y(e.segmentType, e.url);
     }
     if (e.segmentType === "text")
-      return await xe(e);
+      return await It(e);
     e.segmentType === "effect" || e.segmentType;
   }
-  async function xe(e) {
-    const n = nt(e.texts);
-    if (!n)
+  async function It(e) {
+    const s = se(e.texts);
+    if (!s)
       return;
-    const [r] = e.texts;
-    if (!r)
+    const [n] = e.texts;
+    if (!n)
       return;
-    const d = await it(n, ot(r)), f = z.from(d);
-    return new F(f);
+    const f = await de(s, ce(n)), y = V.from(f);
+    return new P(y);
   }
-  async function Ee(e) {
-    const n = e.startsWith("data:"), r = /^https?:\/\//.test(e);
-    if (!n && !r)
+  async function Lt(e) {
+    const s = e.startsWith("data:"), n = /^https?:\/\//.test(e);
+    if (!s && !n)
       try {
-        await l.add(e);
-        const d = await l.get(e);
-        if (d instanceof HTMLImageElement)
-          return z.from(d);
+        await c.add(e);
+        const f = await c.get(e);
+        if (f instanceof HTMLImageElement)
+          return V.from(f);
       } catch {
       }
-    return await Ve(e);
+    return await Vt(e);
   }
-  async function Ce(e) {
-    const n = S.get(e.id);
-    if (n)
-      return n.sprite;
-    const r = q(e.url), d = C !== "element", f = C !== "mp4clip";
-    if (r && g.has(r)) {
-      if (!f)
+  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 p = await U(e.url).catch((h) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, h);
+      const v = await D(e.url).catch((g) => {
+        console.warn("[renderer] failed to load video via <video>", e.url, g);
       });
-      return p ? (S.set(e.id, p), p.sprite) : void 0;
+      return v ? (M.set(e.id, v), v.sprite) : void 0;
     }
-    if (d) {
-      const p = await oe(e.url).catch((h) => {
-        if (r && _(h) && g.add(r), (!r || !k.has(r)) && (r && k.add(r), console.warn("[renderer] failed to load video via MP4Clip", e.url, h)), !f)
-          throw h;
+    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;
       });
-      if (p)
-        return S.set(e.id, p), p.sprite;
+      if (v)
+        return console.info("[renderer] video source: mp4clip", e.url), M.set(e.id, v), v.sprite;
     }
-    if (f) {
-      const p = await U(e.url).catch((h) => {
-        console.warn("[renderer] failed to load video via <video>", e.url, h);
+    if (y) {
+      const v = await D(e.url).catch((g) => {
+        console.warn("[renderer] failed to load video via <video>", e.url, g);
       });
-      if (p)
-        return S.set(e.id, p), p.sprite;
+      if (v)
+        return console.info("[renderer] video source: element", e.url), M.set(e.id, v), v.sprite;
     }
   }
-  function _(e) {
+  function B(e) {
     if (!(e instanceof Error))
       return !1;
-    const n = e.message || "";
-    return n.includes("stream is done") || n.includes("not emit ready") || n.includes("tick video timeout");
+    const s = e.message || "";
+    return s.includes("stream is done") || s.includes("not emit ready") || s.includes("tick video timeout");
   }
-  async function W(e, n) {
-    const r = S.get(e.id);
-    if (r)
+  async function j(e, s) {
+    const n = M.get(e.id);
+    if (n)
       try {
-        const d = e.fromTime ?? 0, f = Math.max(0, n - e.startTime + d), p = Math.floor(f * 1e3);
-        if (r.kind === "frozen") {
-          const b = q(e.url);
-          if (!b)
+        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)
             return;
-          const v = await Ie(e.url, b, { sprite: r.sprite, oldTexture: r.texture });
-          return v ? (S.set(e.id, v), await W(e, n)) : void 0;
+          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;
         }
-        if (r.kind === "mp4clip")
+        if (n.kind === "mp4clip")
           try {
-            const b = await r.clip.tick(p);
-            if (b.video) {
-              const v = r.canvas.getContext("2d");
-              v && (v.drawImage(b.video, 0, 0, r.canvas.width, r.canvas.height), ce(r.texture)), b.video.close();
+            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();
+            }
+            if (x.value && T.audio && T.audio.length > 0) {
+              const b = n.clip.meta?.audioSampleRate ?? 48e3;
+              E.playMp4AudioFrames(e.id, T.audio, b);
             }
             return;
-          } catch (b) {
-            const v = q(e.url);
-            if (v && _(b) && (g.add(v), r.clip.destroy(), C !== "mp4clip")) {
-              const P = await U(e.url, { sprite: r.sprite, oldTexture: r.texture }).catch((V) => {
-                console.warn("[renderer] failed to fallback to <video> after MP4Clip error", e.url, V);
+          } 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);
               });
-              if (P)
-                return S.set(e.id, P), await W(e, n);
+              if (I)
+                return M.set(e.id, I), await j(e, s);
             }
-            v && !k.has(v) && (k.add(v), console.warn("[renderer] MP4Clip tick failed", e.url, b));
+            b && !m.has(b) && (m.add(b), console.warn("[renderer] MP4Clip tick failed", e.url, T));
             return;
           }
-        const h = f / 1e3;
-        if (!Number.isFinite(h) || r.kind !== "element")
+        const g = y / 1e3;
+        if (!Number.isFinite(g) || n.kind !== "element")
           return;
-        await Oe(r, {
-          targetSec: h,
-          playbackRate: e.playRate ?? 1
+        await Ut(n, {
+          targetSec: g,
+          playbackRate: e.playRate ?? 1,
+          volume: e.volume ?? 1
         });
-      } catch (d) {
-        console.warn("[renderer] update video frame failed", d);
+      } catch (f) {
+        console.warn("[renderer] update video frame failed", f);
       }
   }
-  async function Ie(e, n, r) {
-    const d = C !== "element", f = C !== "mp4clip";
-    if (g.has(n)) {
-      if (!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 U(e, r).catch(() => {
+      return await D(e, n).catch(() => {
       });
     }
-    if (d) {
-      const p = await oe(e, r).catch((h) => {
-        if (_(h) && g.add(n), !f)
-          throw h;
+    if (f) {
+      const v = await at(e, n).catch((g) => {
+        if (B(g) && h.add(s), !y)
+          throw g;
       });
-      if (p)
-        return p;
+      if (v)
+        return v;
     }
-    if (f)
-      return await U(e, r).catch(() => {
+    if (y)
+      return await D(e, n).catch(() => {
       });
   }
-  function Re(e) {
-    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string" && ae(e.url);
+  function Ot(e) {
+    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string" && ct(e.url);
   }
-  function Pe(e, n) {
-    const r = J(e);
-    if (r <= 0)
+  function Pt(e, s) {
+    const n = J(e);
+    if (n <= 0)
       return 0;
-    if (n < r)
-      return n;
-    const d = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
-    return Math.max(r - d, 0);
+    if (s < n)
+      return s;
+    const f = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
+    return Math.max(n - f, 0);
   }
-  async function $e(e) {
-    const n = t.resourceDir ?? at;
+  async function rt(e) {
+    const s = o.resourceDir ?? ue;
     try {
-      const r = q(e);
-      if (!r)
+      const n = N(e);
+      if (!n)
         return;
-      const d = _e(`${n}/${r}`, "r");
-      if (await d.exists())
-        return d;
+      const f = Wt(`${s}/${n}`, "r");
+      if (await f.exists())
+        return f;
     } catch {
       return;
     }
   }
-  function Y(e) {
+  function it(e) {
     return !(!e || e.startsWith("data:") || e.startsWith("blob:"));
   }
-  function Fe() {
-    for (const [e, n] of S) {
-      if (n.kind === "mp4clip") {
-        n.clip.destroy(), S.set(e, {
+  function $t() {
+    for (const [e, s] of M) {
+      if (s.kind === "mp4clip") {
+        s.clip.destroy(), M.set(e, {
           kind: "frozen",
-          canvas: n.canvas,
-          texture: n.texture,
-          sprite: n.sprite,
-          meta: n.meta
+          canvas: s.canvas,
+          texture: s.texture,
+          sprite: s.sprite,
+          meta: s.meta
         });
         continue;
       }
-      n.kind === "element" && n.video.pause();
+      s.kind === "element" && s.video.pause();
     }
   }
-  function ne(e) {
+  function nt(e) {
     if (e.kind === "mp4clip") {
       e.clip.destroy();
       return;
     }
-    e.kind !== "frozen" && (e.video.pause(), e.video.removeAttribute("src"), e.video.load());
-  }
-  function K(e, n, r = 1e3) {
-    return new Promise((d, f) => {
-      const p = window.setTimeout(() => {
-        v(), f(new Error(`Timed out waiting for media event: ${n}`));
-      }, r), h = () => {
-        v(), d();
+    if (e.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 = () => {
-        v();
-        const P = e.error ? `${e.error.code}` : "unknown";
-        f(new Error(`Media error (${P}) while waiting for ${n}`));
-      }, v = () => {
-        window.clearTimeout(p), e.removeEventListener(n, h), e.removeEventListener("error", b);
+        window.clearTimeout(v), e.removeEventListener(s, g), e.removeEventListener("error", T);
       };
-      e.addEventListener(n, h, { once: !0 }), e.addEventListener("error", b, { once: !0 });
+      e.addEventListener(s, g, { once: !0 }), e.addEventListener("error", T, { once: !0 });
     });
   }
-  async function oe(e, n) {
-    let r;
-    Y(e) && (r = await $e(e));
-    let d;
+  async function at(e, s) {
+    let n;
+    it(e) && (n = await rt(e), n || (await c.add(e).catch(() => {
+    }), n = await rt(e)));
+    let f;
     try {
-      if (r)
-        d = new D(r);
+      if (n)
+        f = new G(n);
       else {
-        const P = await fetch(e);
-        if (!P.body)
-          return;
-        if (Y(e)) {
-          const [V, A] = P.body.tee();
-          l.add(e, { body: A }).catch(() => {
-          }), d = new D(V);
-        } else
-          d = new D(P.body);
+        const I = await fetch(e);
+        if (I.body)
+          f = new G(I.body);
+        else {
+          const F = await I.arrayBuffer(), U = new ReadableStream({
+            start(O) {
+              O.enqueue(new Uint8Array(F)), O.close();
+            }
+          });
+          f = new G(U);
+        }
       }
-      await d.ready;
-      const { width: f, height: p } = d.meta, h = document.createElement("canvas");
-      h.width = f || 1, h.height = p || 1;
-      const b = z.from(h), v = n?.sprite ?? new F(b);
-      return n?.sprite && (n.sprite.texture = b, n.oldTexture?.destroy(!0)), { kind: "mp4clip", clip: d, canvas: h, texture: b, sprite: v, meta: { width: f, height: p } };
-    } catch (f) {
-      throw d?.destroy(), f;
+      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 P(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;
     }
   }
-  function ie(e) {
-    const r = e.split("#")[0].split("?")[0].split("/").pop()?.split(".").pop()?.toLowerCase() ?? "";
-    return ["mp4", "m4v", "mov", "webm"].includes(r) ? "video" : ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "avif"].includes(r) ? "image" : ["mp3", "wav", "aac", "m4a", "ogg", "flac"].includes(r) ? "audio" : "unknown";
+  function 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 ae(e) {
-    const n = ie(e);
-    return !(n === "image" || n === "audio");
+  function ct(e) {
+    const s = st(e);
+    return !(s === "image" || s === "audio");
   }
-  async function U(e, n) {
-    const r = document.createElement("video");
-    r.crossOrigin = "anonymous", r.muted = !0, r.playsInline = !0, r.preload = "auto", r.src = e;
+  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();
     try {
-      await K(r, "loadedmetadata", 4e3);
-    } catch (v) {
-      throw r.pause(), r.removeAttribute("src"), r.load(), v;
+      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;
     }
-    const d = r.videoWidth || 1, f = r.videoHeight || 1, p = document.createElement("canvas");
-    p.width = d, p.height = f;
-    const h = z.from(p), b = n?.sprite ?? new F(h);
-    return n?.sprite && (n.sprite.texture = h, n.oldTexture?.destroy(!0)), { kind: "element", video: r, canvas: p, texture: h, sprite: b, meta: { width: d, height: f } };
-  }
-  async function Oe(e, n) {
-    const { video: r, canvas: d, texture: f } = e;
-    r.playbackRate = Number.isFinite(n.playbackRate) && n.playbackRate > 0 ? n.playbackRate : 1, M.value ? r.play().catch(() => {
-    }) : r.pause();
-    const p = r.currentTime, h = Math.abs(p - n.targetSec), b = M.value ? 0.25 : 0.03;
-    if (Number.isFinite(p) && h > b) {
+    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 P(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) {
       try {
-        r.currentTime = n.targetSec;
+        n.currentTime = g;
       } catch {
       }
-      M.value || await K(r, "seeked", 250).catch(() => {
+      await _(n, "seeked", 250).catch(() => {
       });
     }
-    if (r.readyState < 2 && (await K(r, "canplay", 250).catch(() => {
-    }), r.readyState < 2))
+    if (n.readyState < 2 && (await _(n, "canplay", 250).catch(() => {
+    }), n.readyState < 2))
       return;
-    const v = d.getContext("2d");
-    v && (v.drawImage(r, 0, 0, d.width, d.height), ce(f));
-  }
-  function Ve(e) {
-    return new Promise((n) => {
-      const r = new Image();
-      r.crossOrigin = "anonymous", r.onload = () => n(z.from(r)), r.onerror = () => {
-        console.warn("[renderer] failed to load image", e), n(void 0);
-      }, r.src = e;
+    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;
     });
   }
-  function ce(e) {
-    const n = e.source;
-    if ("update" in n && typeof n.update == "function") {
-      n.update();
+  function dt(e) {
+    const s = e.source;
+    if ("update" in s && typeof s.update == "function") {
+      s.update();
       return;
     }
     typeof e.update == "function" && e.update();
   }
-  function Ae() {
-    B(), x += 1, Q.stop(), Z(), u.destroy({ children: !0 }), m.clear(), T.clear(), s.clear(), t.app || c.destroy();
+  function Dt() {
+    q(), C += 1, Q.stop(), Z(), u.destroy({ children: !0 }), l.clear(), p.clear(), d.clear(), o.app || a.destroy(), E.destroy();
   }
-  return t.autoPlay && ee(), {
-    app: c,
+  return o.autoPlay && tt(), {
+    app: a,
     layer: u,
     currentTime: w,
-    duration: y,
-    isPlaying: M,
-    play: ee,
-    pause: B,
-    tick: re,
-    seek: Me,
-    renderAt: be,
-    destroy: Ae
+    duration: R,
+    isPlaying: x,
+    play: tt,
+    pause: q,
+    tick: ot,
+    seek: kt,
+    renderAt: Ct,
+    destroy: Dt
   };
 }
-function st(t) {
-  let o = !1, a = !1, i = null, c = null;
+function fe(o) {
+  let t = !1, i = !1, r = null, a = null;
   return async () => {
-    i || (i = new Promise((s) => {
-      c = s;
+    r || (r = new Promise((d) => {
+      a = d;
     }));
-    const l = i;
-    if (a)
-      return o = !0, l;
-    a = !0;
+    const c = r;
+    if (i)
+      return t = !0, c;
+    i = !0;
     do
-      o = !1, await t();
-    while (o);
-    return a = !1, c?.(), i = null, c = null, l;
+      t = !1, await o();
+    while (t);
+    return i = !1, a?.(), r = null, a = null, c;
   };
 }
-function dt(t) {
-  return typeof t == "object" && t !== null && "createReader" in t && "getSize" in t;
+function pe(o) {
+  return typeof o == "object" && o !== null && "createReader" in o && "getSize" in o;
 }
-function ut(t) {
-  return typeof ReadableStream < "u" && t instanceof ReadableStream;
+function he(o) {
+  return typeof ReadableStream < "u" && o instanceof ReadableStream;
 }
-function lt(t) {
-  return typeof t == "string" || t instanceof Blob || dt(t) || ut(t) ? { source: t } : t;
+function me(o) {
+  return typeof o == "string" || o instanceof Blob || pe(o) || he(o) ? { source: o } : o;
 }
-async function fe(t) {
-  if (typeof t == "string") {
-    const o = await fetch(t);
-    if (!o.body)
+async function ht(o) {
+  if (typeof o == "string") {
+    const t = await fetch(o);
+    if (!t.body)
       throw new Error("concatVideos: unable to read video stream from url");
-    return o.body;
+    return t.body;
   }
-  return t instanceof Blob ? t.stream() : t;
+  return o instanceof Blob ? o.stream() : o;
 }
-function ft(t, o) {
-  let a = !1;
-  const i = () => {
-    a || (a = !0, o());
-  }, c = t.getReader();
+function we(o, t) {
+  let i = !1;
+  const r = () => {
+    i || (i = !0, t());
+  }, a = o.getReader();
   return new ReadableStream({
     async pull(u) {
-      const { done: l, value: s } = await c.read();
-      if (l) {
-        i(), u.close();
+      const { done: c, value: d } = await a.read();
+      if (c) {
+        r(), u.close();
         return;
       }
-      u.enqueue(s);
+      u.enqueue(d);
     },
     async cancel(u) {
       try {
-        await c.cancel(u);
+        await a.cancel(u);
       } finally {
-        i();
+        r();
       }
     }
   });
 }
-async function gt(t, o = {}) {
-  if (t.length === 0)
+async function Te(o, t = {}) {
+  if (o.length === 0)
     throw new Error("concatVideos: expected at least one source");
   const {
-    onProgress: a,
-    width: i,
-    height: c,
+    onProgress: i,
+    width: r,
+    height: a,
     ...u
-  } = o, l = t.map(lt), [s, ...m] = l, T = await fe(s.source), g = new D(T);
-  await g.ready;
-  const k = i ?? Math.round(g.meta.width || 0), C = c ?? Math.round(g.meta.height || 0);
-  if (!k || !C)
-    throw g.destroy(), new Error("concatVideos: output width/height is required");
-  const S = new pe({
+  } = t, c = o.map(me), [d, ...l] = c, p = await ht(d.source), h = new G(p);
+  await h.ready;
+  const m = r ?? Math.round(h.meta.width || 0), S = a ?? Math.round(h.meta.height || 0);
+  if (!m || !S)
+    throw h.destroy(), new Error("concatVideos: output width/height is required");
+  const M = new mt({
     ...u,
-    width: k,
-    height: C
+    width: m,
+    height: S
   });
-  a && S.on("OutputProgress", a);
-  let w = 0;
-  const M = async (x) => {
-    const R = x.meta.duration;
-    if (!Number.isFinite(R) || R <= 0)
-      throw x.destroy(), new Error("concatVideos: invalid clip duration");
-    const E = new he(x);
+  i && M.on("OutputProgress", i);
+  let k = 0;
+  const w = async (A) => {
+    const L = A.meta.duration;
+    if (!Number.isFinite(L) || L <= 0)
+      throw A.destroy(), new Error("concatVideos: invalid clip duration");
+    const C = new wt(A);
     try {
-      await E.ready, E.rect.x = 0, E.rect.y = 0, E.rect.w = k, E.rect.h = C, E.time.offset = w, E.time.duration = R, await S.addSprite(E), w += R;
+      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;
     } finally {
-      E.destroy();
+      C.destroy();
     }
   };
   try {
-    await M(g);
-    for (const x of m) {
-      const R = await fe(x.source), E = new D(R);
-      await E.ready, await M(E);
+    await w(h);
+    for (const A of l) {
+      const L = await ht(A.source), C = new G(L);
+      await C.ready, await w(C);
     }
-  } catch (x) {
-    throw S.destroy(), x;
+  } catch (A) {
+    throw M.destroy(), A;
   }
-  const y = w, I = S.output({ maxTime: y }), $ = () => {
-    S.destroy();
+  const x = k, R = M.output({ maxTime: x }), E = () => {
+    M.destroy();
   };
   return {
-    stream: ft(I, $),
-    width: k,
-    height: C,
-    durationMs: Math.round(y / 1e3),
-    destroy: $
+    stream: we(R, E),
+    width: m,
+    height: S,
+    durationMs: Math.round(x / 1e3),
+    destroy: E
   };
 }
 class H {
@@ -665,149 +1019,149 @@ class H {
   renderer;
   app;
   destroyed = !1;
-  constructor(o, a = {}) {
-    this.protocol = o, this.options = a;
-    const i = a.width ?? o.width, c = a.height ?? o.height, u = J(o);
+  constructor(t, i = {}) {
+    this.protocol = t, this.options = i;
+    const r = i.width ?? t.width, a = i.height ?? t.height, u = J(t);
     this.meta = {
-      width: i,
-      height: c,
+      width: r,
+      height: a,
       duration: Math.max(0, Math.round(u * 1e3))
     }, this.ready = this.init();
   }
   async init() {
-    const o = this.options.width ?? this.protocol.width, a = this.options.height ?? this.protocol.height;
-    if (!o || !a)
+    const t = this.options.width ?? this.protocol.width, i = this.options.height ?? this.protocol.height;
+    if (!t || !i)
       throw new Error("ProtocolVideoClip: output width/height is required");
-    const i = new we();
-    await i.init({
-      width: o,
-      height: a,
+    const r = new yt();
+    await r.init({
+      width: t,
+      height: i,
       backgroundAlpha: 0,
       ...this.options.appOptions
-    }), i.ticker.stop(), this.app = i;
-    const c = this.options.rendererOptions ?? {}, u = await ct({
+    }), r.ticker.stop(), this.app = r;
+    const a = this.options.rendererOptions ?? {}, u = await le({
       protocol: this.protocol,
-      app: i,
-      ...c,
+      app: r,
+      ...a,
       autoPlay: !1,
       freezeOnPause: !1,
       manualRender: !0,
-      videoSourceMode: c.videoSourceMode ?? "mp4clip"
+      videoSourceMode: a.videoSourceMode ?? "mp4clip"
     });
     this.renderer = u;
-    const l = u.duration.value;
+    const c = u.duration.value;
     return this.meta = {
-      width: i.renderer.width,
-      height: i.renderer.height,
-      duration: Math.max(0, Math.round(l * 1e3))
+      width: r.renderer.width,
+      height: r.renderer.height,
+      duration: Math.max(0, Math.round(c * 1e3))
     }, this.meta;
   }
-  async tick(o) {
-    const a = [];
+  async tick(t) {
+    const i = [];
     if (this.destroyed)
-      return { audio: a, state: "done" };
+      return { audio: i, state: "done" };
     if (await this.ready, !this.renderer)
-      return { audio: a, state: "done" };
-    const i = this.meta.duration;
-    if (o >= i)
-      return { audio: a, state: "done" };
-    const c = Math.max(0, Math.min(o, i));
-    return await this.renderer.renderAt(c / 1e3), {
+      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), {
       video: new VideoFrame(this.renderer.app.canvas, {
-        timestamp: o
+        timestamp: t
       }),
-      audio: a,
+      audio: i,
       state: "success"
     };
   }
   async clone() {
-    const o = new H(this.protocol, this.options);
-    return await o.ready, o;
+    const t = new H(this.protocol, this.options);
+    return await t.ready, t;
   }
   destroy() {
     this.destroyed || (this.destroyed = !0, this.renderer?.destroy(), this.app?.destroy(!0));
   }
 }
-function pt(t, o) {
-  let a = !1;
-  const i = () => {
-    a || (a = !0, o());
-  }, c = t.getReader();
+function ye(o, t) {
+  let i = !1;
+  const r = () => {
+    i || (i = !0, t());
+  }, a = o.getReader();
   return new ReadableStream({
     async pull(u) {
-      const { done: l, value: s } = await c.read();
-      if (l) {
-        i(), u.close();
+      const { done: c, value: d } = await a.read();
+      if (c) {
+        r(), u.close();
         return;
       }
-      u.enqueue(s);
+      u.enqueue(d);
     },
     async cancel(u) {
       try {
-        await c.cancel(u);
+        await a.cancel(u);
       } finally {
-        i();
+        r();
       }
     }
   });
 }
-async function St(t, o = {}) {
+async function be(o, t = {}) {
   const {
-    width: a,
-    height: i,
-    fps: c,
+    width: i,
+    height: r,
+    fps: a,
     onProgress: u,
-    clipOptions: l,
-    audioSprites: s,
-    ...m
-  } = o, T = a ?? t.width, g = i ?? t.height;
-  if (!T || !g)
+    clipOptions: c,
+    audioSprites: d,
+    ...l
+  } = t, p = i ?? o.width, h = r ?? o.height;
+  if (!p || !h)
     throw new Error("composeProtocol: output width/height is required");
-  const k = c ?? t.fps, C = typeof s == "function", S = m.audio ?? (C ? void 0 : !1), w = new pe({
-    ...m,
-    audio: S,
-    width: T,
-    height: g,
-    fps: k
+  const m = a ?? o.fps, S = typeof d == "function", M = l.audio ?? (S ? void 0 : !1), k = new mt({
+    ...l,
+    audio: M,
+    width: p,
+    height: h,
+    fps: m
   });
-  u && w.on("OutputProgress", u);
-  let M, y;
+  u && k.on("OutputProgress", u);
+  let w, x;
   try {
-    if (M = new H(t, {
-      width: T,
-      height: g,
-      fps: k,
-      ...l,
+    if (w = new H(o, {
+      width: p,
+      height: h,
+      fps: m,
+      ...c,
       rendererOptions: {
         warmUpResources: !1,
-        ...l?.rendererOptions
+        ...c?.rendererOptions
       }
-    }), await M.ready, y = new he(M), await y.ready, y.time.offset = 0, y.time.duration = M.meta.duration, y.rect.x = 0, y.rect.y = 0, y.rect.w = M.meta.width, y.rect.h = M.meta.height, await w.addSprite(y, { main: !0 }), s) {
-      const R = await s(t);
-      for (const E of R)
-        await w.addSprite(E);
+    }), 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 (R) {
-    throw w.destroy(), R;
+  } catch (L) {
+    throw k.destroy(), L;
   }
-  const I = M?.meta.duration ?? 0;
-  if (!I)
+  const R = w?.meta.duration ?? 0;
+  if (!R)
     throw new Error("composeProtocol: protocol has no duration");
-  const $ = w.output({ maxTime: I }), x = () => {
-    y?.destroy(), M?.destroy(), w.destroy();
+  const E = k.output({ maxTime: R }), A = () => {
+    x?.destroy(), w?.destroy(), k.destroy();
   };
   return {
-    stream: pt($, x),
-    width: T,
-    height: g,
-    durationMs: Math.round(I / 1e3),
-    destroy: x
+    stream: ye(E, A),
+    width: p,
+    height: h,
+    durationMs: Math.round(R / 1e3),
+    destroy: A
   };
 }
 export {
   H as ProtocolVideoClip,
-  St as composeProtocol,
-  gt as concatVideos,
-  ct as createRenderer
+  be as composeProtocol,
+  Te as concatVideos,
+  le as createRenderer
 };
 //# sourceMappingURL=index.js.map