@video-editor/renderer 0.0.1-beta.1

package/README.md

@@ -0,0 +1,26 @@
+# @video-editor/renderer
+
+Reactive renderer that consumes an `IVideoProtocol` and drives a Pixi scene like a lightweight video player.
+
+```ts
+import { createRenderer } from '@video-editor/renderer'
+import { reactive } from '@vue/reactivity'
+
+const protocol = reactive({
+  version: '1.0.0',
+  width: 1920,
+  height: 1080,
+  fps: 30,
+  tracks: [],
+})
+
+const renderer = await createRenderer({ protocol, autoPlay: true })
+
+// drive the player
+renderer.play()
+renderer.seek(1000)
+renderer.tick(16.7) // or rely on requestAnimationFrame loop
+
+// mutate protocol reactively; the renderer will verify and update visuals
+protocol.tracks.push(/* ... */)
+```

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { Application } from 'pixi.js';
+import { ApplicationOptions } from 'pixi.js';
+import { ComputedRef } from '@vue/reactivity';
+import { Container } from 'pixi.js';
+import { IVideoProtocol } from '@video-editor/shared';
+import { Ref } from '@vue/reactivity';
+
+/**
+ * Create a renderer that reacts to protocol updates and drives playback state.
+ * - Pass a reactive `protocol` (Ref/readonly/normal object)
+ * - Call `play/pause/seek/tick` to drive the timeline
+ * - Rendering updates when `protocol` or `currentTime` changes
+ */
+export declare function createRenderer(opts: RendererOptions): Promise<Renderer>;
+
+declare type MaybeRef<T> = T | Ref<T>;
+
+export declare interface Renderer {
+    app: Application;
+    layer: Container;
+    currentTime: Ref<number>;
+    duration: ComputedRef<number>;
+    isPlaying: Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+    tick: (deltaMs?: number) => void;
+    seek: (time: number) => void;
+    destroy: () => void;
+}
+
+export declare interface RendererOptions {
+    protocol: MaybeRef<IVideoProtocol>;
+    app?: Application;
+    appOptions?: Partial<ApplicationOptions>;
+    resourceDir?: string;
+    autoPlay?: boolean;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,310 @@
+import { createValidator as se, createResourceManager as ue } from "@video-editor/protocol";
+import { toRaw as fe, isRef as le, shallowRef as b, unref as q, ref as L, computed as de, effectScope as pe, watch as A } from "@vue/reactivity";
+import { MP4Clip as _ } from "@webav/av-cliper";
+import { file as ve } from "opfs-tools";
+import { Application as ye, Sprite as F, Texture as D, Graphics as Y, Container as he } from "pixi.js";
+async function me(t) {
+  const n = new ye();
+  return await n.init({ resizeTo: window, ...t }), n;
+}
+function we(t) {
+  const n = /* @__PURE__ */ new Set();
+  for (const a of t.tracks)
+    for (const i of a.children)
+      i.url && n.add(i.url);
+  return n;
+}
+function Te(t, n) {
+  const a = [];
+  return t.tracks.forEach((i, u) => {
+    i.children.forEach((s, p) => {
+      s.startTime <= n && n < s.endTime && a.push({ segment: s, trackIndex: u, childIndex: p });
+    });
+  }), a.sort((i, u) => i.trackIndex === u.trackIndex ? i.childIndex - u.childIndex : i.trackIndex - u.trackIndex);
+}
+function xe(t, n, a, i) {
+  const u = Me(n);
+  t instanceof F ? (t.anchor.set(0.5), t.width = a, t.height = i, t.x = a / 2, t.y = i / 2, t.texture.source?.addEventListener?.("error", () => {
+    t.texture = D.from(Ie(a, i));
+  }, { once: !0 })) : t instanceof Y && (t.clear(), t.rect(0, 0, a, i).fill({ color: z("url" in n && typeof n.url == "string" ? n.url : n.segmentType), alpha: B(n) ? u : 0.35 }), t.pivot.set(a / 2, i / 2), t.position.set(a / 2, i / 2)), t.alpha = u;
+  const s = Ce(n);
+  if (s) {
+    const [p, g] = s.position ?? [0, 0], [v, m] = s.scale ?? [1, 1], y = s.rotation?.[2] ?? 0;
+    t.position.set(a / 2 + p * a / 2, i / 2 - g * i / 2), t.scale.set(v, m), t.rotation = y / 180 * Math.PI;
+  }
+}
+function H(t, n) {
+  const a = new Y();
+  return a.rect(0, 0, 10, 10).fill({ color: z(n ?? t), alpha: 1 }), a;
+}
+function Ie(t, n, a) {
+  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${n}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
+  return `data:image/svg+xml;base64,${btoa(i)}`;
+}
+function z(t) {
+  let n = 0;
+  for (let a = 0; a < t.length; a++)
+    n = t.charCodeAt(a) + ((n << 5) - n);
+  return n & 16777215;
+}
+function ge(t) {
+  const n = t.tracks.flatMap((a) => a.children.map((i) => i.endTime));
+  return n.length ? Math.max(...n) : 0;
+}
+function W(t, n, a) {
+  return Math.min(Math.max(t, n), a);
+}
+function J(t) {
+  const n = fe(t);
+  return JSON.parse(JSON.stringify(n));
+}
+function B(t) {
+  return "opacity" in t;
+}
+function Me(t) {
+  return B(t) && typeof t.opacity == "number" ? t.opacity : 1;
+}
+function Se(t) {
+  return "transform" in t;
+}
+function Ce(t) {
+  if (Se(t))
+    return t.transform;
+}
+const De = "/video-editor-res";
+async function ke(t) {
+  const n = se(), a = le(t.protocol) ? t.protocol : b(t.protocol), i = b(
+    n.verify(J(q(a)))
+  ), u = t.app ?? await me(t.appOptions), s = new he();
+  u.stage.addChild(s);
+  const p = ue({ dir: t.resourceDir }), g = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), f = L(0), x = L(!1), w = de(() => ge(i.value));
+  let M, C = 0;
+  async function G(e) {
+    const { protocol: o, at: r, layer: c } = e, l = Te(o, r), I = e.app.renderer.width, d = e.app.renderer.height, h = [];
+    for (const { segment: T } of l) {
+      const P = await e.getDisplay(T);
+      P && (xe(P, T, I, d), ne(T) && await re(T, r), h.push(P));
+    }
+    c.removeChildren();
+    const S = h.filter(Boolean);
+    S.length && c.addChild(...S), e.app.render();
+  }
+  const O = Re(() => G({
+    app: u,
+    layer: s,
+    protocol: i.value,
+    at: f.value,
+    getDisplay: X
+  })), k = pe();
+  k.run(() => {
+    A(
+      () => q(a),
+      (e) => {
+        try {
+          i.value = n.verify(J(e));
+        } catch (o) {
+          console.error("[renderer] invalid protocol update", o);
+          return;
+        }
+        N(), Q(i.value), j(i.value), R(), O();
+      },
+      { deep: !0, immediate: !0 }
+    ), A(f, () => {
+      R(), O();
+    }), A(w, () => R());
+  });
+  function R() {
+    const e = w.value;
+    e <= 0 ? f.value = 0 : f.value > e ? f.value = e : f.value < 0 && (f.value = 0);
+  }
+  function Q(e) {
+    for (const o of we(e))
+      g.has(o) || (g.add(o), p.add(o).catch(() => {
+      }));
+  }
+  function j(e) {
+    const o = new Set(e.tracks.flatMap((r) => r.children.map((c) => c.id)));
+    for (const [r, c] of v)
+      o.has(r) || (c.destroy(), v.delete(r));
+    for (const [r, c] of y)
+      o.has(r) || (c.clip.destroy(), y.delete(r));
+  }
+  function N() {
+    s.removeChildren();
+    for (const e of v.values())
+      e.destroy();
+    v.clear(), m.clear();
+    for (const { clip: e } of y.values())
+      e.destroy();
+    y.clear();
+  }
+  function $() {
+    x.value || (x.value = !0, C = performance.now(), M = requestAnimationFrame(U));
+  }
+  function E() {
+    x.value = !1, M !== void 0 && cancelAnimationFrame(M), M = void 0;
+  }
+  function U() {
+    V(), x.value && (M = requestAnimationFrame(U));
+  }
+  function V(e) {
+    if (!x.value && e === void 0)
+      return;
+    const o = performance.now(), r = e ?? (C ? o - C : 0);
+    C = o, r !== 0 && (f.value = W(
+      f.value + r,
+      0,
+      w.value || Number.POSITIVE_INFINITY
+    ), w.value > 0 && f.value >= w.value && E());
+  }
+  function K(e) {
+    f.value = W(e, 0, w.value || Number.POSITIVE_INFINITY);
+  }
+  async function X(e) {
+    const o = v.get(e.id);
+    if (o)
+      return o;
+    const r = m.get(e.id);
+    if (r)
+      return r;
+    const c = Z(e);
+    m.set(e.id, c);
+    const l = await c;
+    return l && v.set(e.id, l), m.delete(e.id), l;
+  }
+  async function Z(e) {
+    if (e.segmentType === "frames" || e.segmentType === "image") {
+      if (!e.url)
+        return H(e.segmentType);
+      if ("type" in e && e.type === "video") {
+        const r = await te(e);
+        if (r)
+          return r;
+      }
+      const o = await ee(e.url);
+      return o ? new F(o) : H(e.segmentType, e.url);
+    }
+    e.segmentType !== "text" && (e.segmentType === "effect" || e.segmentType);
+  }
+  async function ee(e) {
+    const o = e.startsWith("data:"), r = /^https?:\/\//.test(e);
+    if (!o && !r)
+      try {
+        await p.add(e);
+        const c = await p.get(e);
+        if (c instanceof HTMLImageElement)
+          return D.from(c);
+      } catch {
+      }
+    return await ae(e);
+  }
+  async function te(e) {
+    const o = y.get(e.id);
+    if (o)
+      return o.sprite;
+    let r;
+    try {
+      await p.add(e.url), r = await oe(e.url);
+    } catch {
+      r = void 0;
+    }
+    let c;
+    try {
+      if (r)
+        c = new _(r);
+      else {
+        const T = await fetch(e.url);
+        if (!T.body)
+          return;
+        c = new _(T.body);
+      }
+    } catch {
+      return;
+    }
+    try {
+      await c.ready;
+    } catch {
+      c.destroy();
+      return;
+    }
+    const { width: l, height: I } = c.meta, d = document.createElement("canvas");
+    d.width = l || 1, d.height = I || 1;
+    const h = D.from(d), S = new F(h);
+    return y.set(e.id, { clip: c, canvas: d, texture: h, sprite: S, meta: { width: l, height: I } }), S;
+  }
+  async function re(e, o) {
+    const r = y.get(e.id);
+    if (r)
+      try {
+        const c = e.fromTime ?? 0, l = Math.max(0, o - e.startTime + c), I = Math.floor(l * 1e3), d = await r.clip.tick(I);
+        if (d.video) {
+          const h = r.canvas.getContext("2d");
+          h && (h.drawImage(d.video, 0, 0, r.canvas.width, r.canvas.height), ie(r.texture)), d.video.close();
+        }
+      } catch (c) {
+        console.warn("[renderer] update video frame failed", c);
+      }
+  }
+  function ne(e) {
+    return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string";
+  }
+  async function oe(e) {
+    const o = t.resourceDir ?? De;
+    try {
+      const r = ve(`${o}/${e}`);
+      if (await r.exists())
+        return r;
+    } catch {
+      return;
+    }
+  }
+  function ae(e) {
+    return new Promise((o) => {
+      const r = new Image();
+      r.crossOrigin = "anonymous", r.onload = () => o(D.from(r)), r.onerror = () => {
+        console.warn("[renderer] failed to load image", e), o(void 0);
+      }, r.src = e;
+    });
+  }
+  function ie(e) {
+    const o = e.source;
+    if ("update" in o && typeof o.update == "function") {
+      o.update();
+      return;
+    }
+    typeof e.update == "function" && e.update();
+  }
+  function ce() {
+    E(), k.stop(), N(), s.destroy({ children: !0 }), v.clear(), m.clear(), g.clear(), t.app || u.destroy();
+  }
+  return t.autoPlay && $(), {
+    app: u,
+    layer: s,
+    currentTime: f,
+    duration: w,
+    isPlaying: x,
+    play: $,
+    pause: E,
+    tick: V,
+    seek: K,
+    destroy: ce
+  };
+}
+function Re(t) {
+  let n = !1, a = !1;
+  return async () => {
+    if (a) {
+      n = !0;
+      return;
+    }
+    a = !0;
+    do
+      n = !1, await t();
+    while (n);
+    a = !1;
+  };
+}
+export {
+  ke as createRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/2d/index.ts","../src/helpers.ts","../src/index.ts"],"sourcesContent":["/// <reference types=\"vite/client\" />\nimport type { ApplicationOptions } from 'pixi.js'\nimport { Application } from 'pixi.js'\n\ndeclare global {\n\n  // eslint-disable-next-line vars-on-top\n  var __PIXI_APP__: Application\n}\n\nexport async function createApp(opts?: Partial<ApplicationOptions>) {\n  const app = new Application()\n\n  await app.init({ resizeTo: window, ...opts })\n\n  if (import.meta.env.DEV) {\n    globalThis.__PIXI_APP__ = app\n  }\n\n  return app\n}\n","import type { ITransform, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { PixiDisplayObject } from './types'\nimport { toRaw } from '@vue/reactivity'\nimport { Graphics, Sprite, Texture } from 'pixi.js'\n\nexport function collectResourceUrls(protocol: IVideoProtocol) {\n  const urls = new Set<string>()\n  for (const track of protocol.tracks) {\n    for (const segment of track.children) {\n      if (segment.url)\n        urls.add(segment.url)\n    }\n  }\n  return urls\n}\n\nexport function collectActiveSegments(protocol: IVideoProtocol, at: number) {\n  const active: { segment: SegmentUnion, trackIndex: number, childIndex: number }[] = []\n  protocol.tracks.forEach((track, trackIndex) => {\n    track.children.forEach((segment, childIndex) => {\n      if (segment.startTime <= at && at < segment.endTime)\n        active.push({ segment, trackIndex, childIndex })\n    })\n  })\n\n  return active.sort((a, b) => {\n    if (a.trackIndex === b.trackIndex)\n      return a.childIndex - b.childIndex\n    return a.trackIndex - b.trackIndex\n  })\n}\n\nexport function applyDisplayProps(display: PixiDisplayObject, segment: SegmentUnion, width: number, height: number) {\n  const opacity = readOpacity(segment)\n  // size\n  if (display instanceof Sprite) {\n    display.anchor.set(0.5)\n    display.width = width\n    display.height = height\n    display.x = width / 2\n    display.y = height / 2\n    const src = display.texture.source as { addEventListener?: (type: string, cb: () => void, opts?: AddEventListenerOptions) => void } | undefined\n    src?.addEventListener?.('error', () => {\n      // fallback to a colored rect if texture failed\n      display.texture = Texture.from(placeholderTexture(width, height))\n    }, { once: true })\n  }\n  else if (display instanceof Graphics) {\n    display.clear()\n    display\n      .rect(0, 0, width, height)\n      .fill({ color: stringToColor('url' in segment && typeof segment.url === 'string' ? segment.url : segment.segmentType), alpha: hasOpacity(segment) ? opacity : 0.35 })\n    display.pivot.set(width / 2, height / 2)\n    display.position.set(width / 2, height / 2)\n  }\n\n  display.alpha = opacity\n\n  // simple 2D transform\n  const transform = readTransform(segment)\n  if (transform) {\n    const [px, py] = transform.position ?? [0, 0]\n    const [sx, sy] = transform.scale ?? [1, 1]\n    const rotation = transform.rotation?.[2] ?? 0\n\n    display.position.set(width / 2 + (px * width) / 2, height / 2 - (py * height) / 2)\n    display.scale.set(sx, sy)\n    display.rotation = (rotation / 180) * Math.PI\n  }\n}\n\nexport function placeholder(key: string, url?: string) {\n  const g = new Graphics()\n  g.rect(0, 0, 10, 10).fill({ color: stringToColor(url ?? key), alpha: 1 })\n  return g\n}\n\nexport function placeholderTexture(width: number, height: number, color?: string) {\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><rect width=\"100%\" height=\"100%\" fill=\"${color ?? '#0f172a'}\" fill-opacity=\"0.8\"/></svg>`\n  return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n\nexport function stringToColor(key: string) {\n  let hash = 0\n  for (let i = 0; i < key.length; i++)\n    hash = key.charCodeAt(i) + ((hash << 5) - hash)\n  return hash & 0x00FFFFFF\n}\n\nexport function computeDuration(protocol: IVideoProtocol) {\n  const endTimes = protocol.tracks.flatMap(track => track.children.map(seg => seg.endTime))\n  return endTimes.length ? Math.max(...endTimes) : 0\n}\n\nexport function clamp(num: number, min: number, max: number) {\n  return Math.min(Math.max(num, min), max)\n}\n\nexport function cloneProtocol(protocol: IVideoProtocol) {\n  const raw = toRaw(protocol) as IVideoProtocol\n  // use JSON clone to avoid structuredClone errors on proxies (e.g., Vue reactive)\n  return JSON.parse(JSON.stringify(raw)) as IVideoProtocol\n}\n\nfunction hasOpacity(segment: SegmentUnion): segment is SegmentUnion & { opacity?: number } {\n  return 'opacity' in segment\n}\n\nfunction readOpacity(segment: SegmentUnion) {\n  if (hasOpacity(segment) && typeof segment.opacity === 'number')\n    return segment.opacity\n  return 1\n}\n\nfunction hasTransform(segment: SegmentUnion): segment is SegmentUnion & { transform?: ITransform } {\n  return 'transform' in segment\n}\n\nfunction readTransform(segment: SegmentUnion) {\n  if (hasTransform(segment))\n    return segment.transform\n  return undefined\n}\n","import type { IVideoFramesSegment, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { ComputedRef, Ref, ShallowRef } from '@vue/reactivity'\nimport type { Application, ApplicationOptions } from 'pixi.js'\nimport type { MaybeRef, PixiDisplayObject } from './types'\nimport { createResourceManager, createValidator } from '@video-editor/protocol'\nimport {\n  computed,\n  effectScope,\n  isRef,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from '@vue/reactivity'\nimport { MP4Clip } from '@webav/av-cliper'\nimport { file as opfsFile } from 'opfs-tools'\nimport { Container, Sprite, Texture } from 'pixi.js'\nimport { createApp as create2dApp } from './2d'\nimport {\n  applyDisplayProps,\n  clamp,\n  cloneProtocol,\n  collectActiveSegments,\n  collectResourceUrls,\n  computeDuration,\n  placeholder,\n} from './helpers'\n\nconst DEFAULT_RES_DIR = '/video-editor-res'\n\nexport interface RendererOptions {\n  protocol: MaybeRef<IVideoProtocol>\n  app?: Application\n  appOptions?: Partial<ApplicationOptions>\n  resourceDir?: string\n  autoPlay?: boolean\n}\n\nexport interface Renderer {\n  app: Application\n  layer: Container\n  currentTime: Ref<number>\n  duration: ComputedRef<number>\n  isPlaying: Ref<boolean>\n  play: () => void\n  pause: () => void\n  tick: (deltaMs?: number) => void\n  seek: (time: number) => void\n  destroy: () => void\n}\n\n/**\n * Create a renderer that reacts to protocol updates and drives playback state.\n * - Pass a reactive `protocol` (Ref/readonly/normal object)\n * - Call `play/pause/seek/tick` to drive the timeline\n * - Rendering updates when `protocol` or `currentTime` changes\n */\nexport async function createRenderer(opts: RendererOptions): Promise<Renderer> {\n  const validator = createValidator()\n  const protocolInput: Ref<IVideoProtocol> | ShallowRef<IVideoProtocol>\n    = isRef(opts.protocol) ? opts.protocol : shallowRef(opts.protocol)\n  const validatedProtocol: ShallowRef<IVideoProtocol> = shallowRef(\n    validator.verify(cloneProtocol(unref(protocolInput))),\n  )\n\n  const app = opts.app ?? await create2dApp(opts.appOptions)\n  const layer = new Container()\n  app.stage.addChild(layer)\n\n  const resourceManager = createResourceManager({ dir: opts.resourceDir })\n  const resourceWarmUp = new Set<string>()\n  const displayCache = new Map<string, PixiDisplayObject>()\n  const displayLoading = new Map<string, Promise<PixiDisplayObject | undefined>>()\n  const videoEntries = new Map<string, {\n    clip: MP4Clip\n    canvas: HTMLCanvasElement\n    texture: Texture\n    sprite: Sprite\n    meta?: { width: number, height: number }\n  }>()\n\n  const currentTime = ref(0)\n  const isPlaying = ref(false)\n  const duration = computed(() => computeDuration(validatedProtocol.value))\n\n  let rafId: number | undefined\n  let lastTickAt = 0\n\n  interface RenderTask {\n    app: Application\n    layer: Container\n    protocol: IVideoProtocol\n    at: number\n    getDisplay: (segment: SegmentUnion) => Promise<PixiDisplayObject | undefined>\n  }\n\n  async function renderScene(task: RenderTask) {\n    const { protocol, at, layer } = task\n    const active = collectActiveSegments(protocol, at)\n    const stageWidth = task.app.renderer.width\n    const stageHeight = task.app.renderer.height\n\n    const renders: (PixiDisplayObject | undefined)[] = []\n    for (const { segment } of active) {\n      const display = await task.getDisplay(segment)\n      if (!display)\n        continue\n      applyDisplayProps(display, segment, stageWidth, stageHeight)\n      if (isVideoSegment(segment))\n        await updateVideoFrame(segment, at)\n      renders.push(display)\n    }\n\n    layer.removeChildren()\n    const cleaned = renders.filter(Boolean) as PixiDisplayObject[]\n    if (cleaned.length)\n      layer.addChild(...cleaned)\n    task.app.render()\n  }\n\n  const queueRender = createRenderQueue(() => renderScene({\n    app,\n    layer,\n    protocol: validatedProtocol.value,\n    at: currentTime.value,\n    getDisplay: getDisplayForSegment,\n  }))\n\n  const scope = effectScope()\n  scope.run(() => {\n    // Sync external protocol mutations into a verified snapshot the renderer can rely on.\n    watch(\n      () => unref(protocolInput),\n      (protocol) => {\n        try {\n          validatedProtocol.value = validator.verify(cloneProtocol(protocol))\n        }\n        catch (err) {\n          console.error('[renderer] invalid protocol update', err)\n          return\n        }\n        clearDisplays()\n        warmUpResources(validatedProtocol.value)\n        cleanupCache(validatedProtocol.value)\n        clampCurrentTime()\n        queueRender()\n      },\n      { deep: true, immediate: true },\n    )\n\n    // React to time changes.\n    watch(currentTime, () => {\n      clampCurrentTime()\n      queueRender()\n    })\n\n    // Keep duration/currentTime in sync with protocol updates.\n    watch(duration, () => clampCurrentTime())\n  })\n\n  function clampCurrentTime() {\n    const nextDuration = duration.value\n    if (nextDuration <= 0)\n      currentTime.value = 0\n    else if (currentTime.value > nextDuration)\n      currentTime.value = nextDuration\n    else if (currentTime.value < 0)\n      currentTime.value = 0\n  }\n\n  function warmUpResources(protocol: IVideoProtocol) {\n    for (const url of collectResourceUrls(protocol)) {\n      if (resourceWarmUp.has(url))\n        continue\n\n      resourceWarmUp.add(url)\n      resourceManager.add(url).catch(() => {\n        // noop – render will fall back to Texture.from(url)\n      })\n    }\n  }\n\n  function cleanupCache(protocol: IVideoProtocol) {\n    const ids = new Set(protocol.tracks.flatMap(track => track.children.map(seg => seg.id)))\n    for (const [id, display] of displayCache) {\n      if (ids.has(id))\n        continue\n      display.destroy()\n      displayCache.delete(id)\n    }\n    for (const [id, entry] of videoEntries) {\n      if (ids.has(id))\n        continue\n      entry.clip.destroy()\n      videoEntries.delete(id)\n    }\n  }\n\n  function clearDisplays() {\n    layer.removeChildren()\n    for (const display of displayCache.values()) {\n      display.destroy()\n    }\n    displayCache.clear()\n    displayLoading.clear()\n    for (const { clip } of videoEntries.values())\n      clip.destroy()\n    videoEntries.clear()\n  }\n\n  function play() {\n    if (isPlaying.value)\n      return\n    isPlaying.value = true\n    lastTickAt = performance.now()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  function pause() {\n    isPlaying.value = false\n    if (rafId !== undefined)\n      cancelAnimationFrame(rafId)\n    rafId = undefined\n  }\n\n  function loop() {\n    tick()\n    if (isPlaying.value)\n      rafId = requestAnimationFrame(loop)\n  }\n\n  function tick(deltaMs?: number) {\n    if (!isPlaying.value && deltaMs === undefined)\n      return\n\n    const now = performance.now()\n    const delta = deltaMs ?? (lastTickAt ? now - lastTickAt : 0)\n    lastTickAt = now\n\n    if (delta === 0)\n      return\n\n    currentTime.value = clamp(\n      currentTime.value + delta,\n      0,\n      duration.value || Number.POSITIVE_INFINITY,\n    )\n\n    if (duration.value > 0 && currentTime.value >= duration.value)\n      pause()\n\n    // render happens via watch on currentTime\n  }\n\n  function seek(time: number) {\n    currentTime.value = clamp(time, 0, duration.value || Number.POSITIVE_INFINITY)\n  }\n\n  async function getDisplayForSegment(segment: SegmentUnion) {\n    const cached = displayCache.get(segment.id)\n    if (cached)\n      return cached\n\n    const loading = displayLoading.get(segment.id)\n    if (loading)\n      return loading\n\n    const promise = loadDisplay(segment)\n    displayLoading.set(segment.id, promise)\n\n    const display = await promise\n    if (display)\n      displayCache.set(segment.id, display)\n\n    displayLoading.delete(segment.id)\n    return display\n  }\n\n  async function loadDisplay(segment: SegmentUnion): Promise<PixiDisplayObject | undefined> {\n    // prioritize static resources via protocol resource manager\n    if (segment.segmentType === 'frames' || segment.segmentType === 'image') {\n      if (!segment.url)\n        return placeholder(segment.segmentType)\n\n      if ('type' in segment && segment.type === 'video') {\n        const sprite = await loadVideoSprite(segment)\n        if (sprite)\n          return sprite\n      }\n\n      const texture = await loadTexture(segment.url)\n      if (texture)\n        return new Sprite(texture)\n      return placeholder(segment.segmentType, segment.url)\n    }\n\n    if (segment.segmentType === 'text')\n      return undefined\n\n    if (segment.segmentType === 'effect' || segment.segmentType === 'filter')\n      return undefined\n\n    // audio segments do not render visuals\n    return undefined\n  }\n\n  async function loadTexture(url: string) {\n    const isDataUrl = url.startsWith('data:')\n    const isHttp = /^https?:\\/\\//.test(url)\n\n    if (!isDataUrl && !isHttp) {\n      try {\n        await resourceManager.add(url)\n        const res = await resourceManager.get(url)\n        if (res instanceof HTMLImageElement)\n          return Texture.from(res)\n      }\n      catch {\n        // fall through to direct image load\n      }\n    }\n\n    // load image directly to avoid invalid path issues with http/data URLs\n    return await loadImageTexture(url)\n  }\n\n  async function loadVideoSprite(segment: SegmentUnion & { type: 'video', url: string }): Promise<Sprite | undefined> {\n    const existing = videoEntries.get(segment.id)\n    if (existing)\n      return existing.sprite\n\n    let file\n    try {\n      await resourceManager.add(segment.url)\n      file = await getOpfsFile(segment.url)\n    }\n    catch {\n      file = undefined\n    }\n    let clip: MP4Clip\n    try {\n      if (file) {\n        clip = new MP4Clip(file)\n      }\n      else {\n        const res = await fetch(segment.url)\n        if (!res.body)\n          return undefined\n        clip = new MP4Clip(res.body)\n      }\n    }\n    catch {\n      return undefined\n    }\n\n    try {\n      await clip.ready\n    }\n    catch {\n      clip.destroy()\n      return undefined\n    }\n\n    const { width, height } = clip.meta\n    const canvas = document.createElement('canvas')\n    canvas.width = width || 1\n    canvas.height = height || 1\n    const texture = Texture.from(canvas)\n    const sprite = new Sprite(texture)\n\n    videoEntries.set(segment.id, { clip, canvas, texture, sprite, meta: { width, height } })\n    return sprite\n  }\n\n  async function updateVideoFrame(segment: IVideoFramesSegment, at: number) {\n    const entry = videoEntries.get(segment.id)\n    if (!entry)\n      return\n\n    try {\n      const offsetMs = segment.fromTime ?? 0\n      const relativeMs = Math.max(0, at - segment.startTime + offsetMs)\n      const relativeUs = Math.floor(relativeMs * 1000)\n      const res = await entry.clip.tick(relativeUs)\n      if (res.video) {\n        const ctx = entry.canvas.getContext('2d')\n        if (ctx) {\n          ctx.drawImage(res.video, 0, 0, entry.canvas.width, entry.canvas.height)\n          refreshCanvasTexture(entry.texture)\n        }\n        res.video.close()\n      }\n    }\n    catch (err) {\n      console.warn('[renderer] update video frame failed', err)\n    }\n  }\n\n  function isVideoSegment(segment: SegmentUnion): segment is IVideoFramesSegment {\n    return segment.segmentType === 'frames'\n      && segment.type === 'video'\n      && typeof segment.url === 'string'\n  }\n\n  async function getOpfsFile(url: string) {\n    const dir = opts.resourceDir ?? DEFAULT_RES_DIR\n    try {\n      const file = opfsFile(`${dir}/${url}`)\n      if (await file.exists())\n        return file\n    }\n    catch {\n      return undefined\n    }\n    return undefined\n  }\n\n  function loadImageTexture(url: string): Promise<Texture | undefined> {\n    return new Promise((resolve) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => resolve(Texture.from(img))\n      img.onerror = () => {\n        console.warn('[renderer] failed to load image', url)\n        resolve(undefined)\n      }\n      img.src = url\n    })\n  }\n\n  function refreshCanvasTexture(texture: Texture) {\n    const source = texture.source\n    if ('update' in source && typeof source.update === 'function') {\n      source.update()\n      return\n    }\n\n    if (typeof texture.update === 'function')\n      texture.update()\n  }\n\n  function destroy() {\n    pause()\n    scope.stop()\n    clearDisplays()\n    layer.destroy({ children: true })\n    displayCache.clear()\n    displayLoading.clear()\n    resourceWarmUp.clear()\n    if (!opts.app)\n      app.destroy()\n  }\n\n  if (opts.autoPlay)\n    play()\n\n  return {\n    app,\n    layer,\n    currentTime,\n    duration,\n    isPlaying,\n    play,\n    pause,\n    tick,\n    seek,\n    destroy,\n  }\n}\n\nfunction createRenderQueue(job: () => Promise<void> | void) {\n  let queued = false\n  let running = false\n\n  const run = async () => {\n    if (running) {\n      queued = true\n      return\n    }\n    running = true\n    do {\n      queued = false\n      await job()\n    } while (queued)\n    running = false\n  }\n\n  return run\n}\n"],"names":["createApp","opts","app","Application","collectResourceUrls","protocol","urls","track","segment","collectActiveSegments","at","active","trackIndex","childIndex","a","b","applyDisplayProps","display","width","height","opacity","readOpacity","Sprite","Texture","placeholderTexture","Graphics","stringToColor","hasOpacity","transform","readTransform","px","py","sx","sy","rotation","placeholder","key","url","g","color","svg","hash","i","computeDuration","endTimes","seg","clamp","num","min","max","cloneProtocol","raw","toRaw","hasTransform","DEFAULT_RES_DIR","createRenderer","validator","createValidator","protocolInput","isRef","shallowRef","validatedProtocol","unref","create2dApp","layer","Container","resourceManager","createResourceManager","resourceWarmUp","displayCache","displayLoading","videoEntries","currentTime","ref","isPlaying","duration","computed","rafId","lastTickAt","renderScene","task","stageWidth","stageHeight","renders","isVideoSegment","updateVideoFrame","cleaned","queueRender","createRenderQueue","getDisplayForSegment","scope","effectScope","watch","err","clearDisplays","warmUpResources","cleanupCache","clampCurrentTime","nextDuration","ids","id","entry","clip","play","loop","pause","tick","deltaMs","now","delta","seek","time","cached","loading","promise","loadDisplay","sprite","loadVideoSprite","texture","loadTexture","isDataUrl","isHttp","res","loadImageTexture","existing","file","getOpfsFile","MP4Clip","canvas","offsetMs","relativeMs","relativeUs","ctx","refreshCanvasTexture","dir","opfsFile","resolve","img","source","destroy","job","queued","running"],"mappings":"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"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@video-editor/renderer",
+  "type": "module",
+  "version": "0.0.1-beta.1",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@vue/reactivity": "^3.4.19"
+  },
+  "dependencies": {
+    "@webav/av-cliper": "^1.2.7",
+    "opfs-tools": "^0.7.4",
+    "pixi.js": "^8.14.3",
+    "@video-editor/protocol": "0.0.1-beta.1",
+    "@video-editor/shared": "0.0.1-beta.1"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly",
+    "preview": "vite preview"
+  }
+}