openvideo 0.2.11 → 0.2.13

package/dist/{browserAll-BUI5hLdA.js → browserAll-DG5bDuMQ.js}

@@ -1,5 +1,5 @@
-import { e as a, A as e, C as i, a as s, E as t, F as n, D as d } from "./index-bXwx7D02.js";
-import "./webworkerAll-Bp3Psvud.js";
+import { e as a, A as e, C as i, a as s, E as t, F as n, D as d } from "./index-CFp3iXGD.js";
+import "./webworkerAll-CY-_3YK7.js";
 a.add(e);
 a.mixin(i, s);
 a.add(t);

package/dist/clips/placeholder-clip.d.ts

@@ -4,11 +4,14 @@ export declare class Placeholder extends BaseClip {
     type: string;
     meta: IClipMeta;
     constructor(src: string, meta?: Partial<IClipMeta>, type?: string);
-    private placeholderFrame;
+    private canvas;
+    private ctx;
+    private animationRafId;
+    private renderPending;
     tick(time: number): Promise<{
         video?: ImageBitmap | null;
         audio?: Float32Array[];
-        state: 'done' | 'success';
+        state: "done" | "success";
     }>;
     clone(): Promise<this>;
     split(time: number): Promise<[this, this]>;

package/dist/{index-bXwx7D02.js → index-CFp3iXGD.js}

@@ -18385,7 +18385,7 @@ const Lv = (r) => {
   },
   test: () => !0,
   load: async () => {
-    await import("./browserAll-BUI5hLdA.js");
+    await import("./browserAll-DG5bDuMQ.js");
   }
 }, gC = {
   extension: {
@@ -18395,7 +18395,7 @@ const Lv = (r) => {
   },
   test: () => typeof self < "u" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-Bp3Psvud.js");
+    await import("./webworkerAll-CY-_3YK7.js");
   }
 };
 class at {
@@ -71023,17 +71023,36 @@ class Fc extends zn {
       duration: t.duration || 5e6
     }, this.width = this.meta.width, this.height = this.meta.height, this.duration = this.meta.duration, this.trim.to = this.duration, this.display.to = this.display.from + this.duration, this.ready = Promise.resolve(this.meta);
   }
-  placeholderFrame = null;
+  canvas = null;
+  ctx = null;
+  animationRafId = null;
+  renderPending = !1;
   async tick(e) {
-    if (!this.placeholderFrame) {
-      const t = document.createElement("canvas");
-      t.width = this.meta.width, t.height = this.meta.height;
-      const i = t.getContext("2d");
-      i && (i.fillStyle = "#1e1e1e", i.fillRect(0, 0, t.width, t.height), i.fillStyle = "#ffffff", i.font = `${Math.floor(t.height / 10)}px sans-serif`, i.textAlign = "center", i.textBaseline = "middle", i.fillText("Loading...", t.width / 2, t.height / 2), i.strokeStyle = "#333333", i.lineWidth = 10, i.strokeRect(0, 0, t.width, t.height)), this.placeholderFrame = await createImageBitmap(t);
+    this.canvas || (this.canvas = document.createElement("canvas"), this.canvas.width = this.meta.width, this.canvas.height = this.meta.height, this.ctx = this.canvas.getContext("2d"));
+    const { canvas: t, ctx: i } = this;
+    if (i) {
+      const { width: s, height: o } = t;
+      if (s > 0 && o > 0) {
+        i.fillStyle = "#1e1e1e", i.fillRect(0, 0, s, o);
+        const a = s / 2, l = o / 2, u = 100, c = u / 4, h = performance.now() / 2e3 * Math.PI * 2;
+        i.save();
+        const d = i.createConicGradient(h, a, l);
+        d.addColorStop(0, "#ffffff"), d.addColorStop(0.2, "#ffffff"), d.addColorStop(0.5, "rgba(255, 255, 255, 0.4)"), d.addColorStop(0.8, "rgba(255, 255, 255, 0.1)"), d.addColorStop(1, "rgba(255, 255, 255, 0)"), i.strokeStyle = d, i.lineWidth = c, i.lineCap = "round", i.beginPath(), i.arc(a, l, u, h, h + Math.PI * 1.5), i.stroke(), i.restore(), i.strokeStyle = "#333333", i.lineWidth = 10, i.strokeRect(0, 0, s, o);
+      }
+    }
+    if (this.renderPending = !1, this.animationRafId === null) {
+      const s = () => {
+        if (this.destroyed) {
+          this.animationRafId = null;
+          return;
+        }
+        this.renderPending || (this.renderPending = !0, this.emit("request-render")), this.animationRafId = requestAnimationFrame(s);
+      };
+      this.animationRafId = requestAnimationFrame(s);
     }
     return {
-      video: this.placeholderFrame,
-      state: e >= this.duration ? "done" : "success",
+      video: t.width > 0 && t.height > 0 ? await createImageBitmap(t) : null,
+      state: "success",
       audio: []
     };
   }
@@ -90208,6 +90227,9 @@ class gte {
   textClipResizeHandle = null;
   textClipResizedSx = null;
   textClipResizedSy = null;
+  // Double-click detection state
+  lastPointerDownTime = 0;
+  lastPointerDownClip = null;
   init(e, t) {
     this.selectionGraphics = new Ke(), this.selectionGraphics.visible = !1, this.selectionGraphics.zIndex = 1e3, t.addChild(this.selectionGraphics), e.stage.eventMode = "static", e.stage.hitArea = e.screen, e.stage.on("pointerdown", (i) => this.onStagePointerDown(i)), e.stage.on("globalpointermove", (i) => this.onStagePointerMove(i)), e.stage.on("pointerup", () => this.onStagePointerUp()), e.stage.on("pointerupoutside", () => this.onStagePointerUp());
   }
@@ -90233,6 +90255,7 @@ class gte {
         this.updatePreviewSelection(u);
       } else
         this.selectedClips.size === 0 && this.destroyTransformer();
+      this.studio.pixiApp?.render();
     }
   }
   onStagePointerUp() {
@@ -90307,8 +90330,8 @@ class gte {
     if (t == null) return;
     const i = t.getRoot();
     i != null && (i.eventMode = "static", i.cursor = "pointer", i.on("pointerdown", (n) => {
-      const s = this.getTopmostClipAtPoint(n.global);
-      s && this.selectClip(s, n.shiftKey);
+      const s = Date.now(), o = this.getTopmostClipAtPoint(n.global);
+      o === e && o === this.lastPointerDownClip && s - this.lastPointerDownTime < 350 && (o.type === "Text" || o.type === "Caption") && this.studio.emit("clip:dblclick", { clip: o }), this.lastPointerDownTime = s, this.lastPointerDownClip = o, o && this.selectClip(o, n.shiftKey);
     }), this.interactiveClips.add(e));
   }
   /**
@@ -90434,8 +90457,8 @@ class gte {
       this.studio.emit("transform:start", {
         transformer: this.activeTransformer
       });
-      const o = this.getTopmostClipAtPoint(s.global);
-      o && !this.selectedClips.has(o) && (this.selectClip(o, s.shiftKey), s.stopPropagation());
+      const o = this.getTopmostClipAtPoint(s.global), a = Date.now();
+      o && o === this.lastPointerDownClip && a - this.lastPointerDownTime < 350 && (o.type === "Text" || o.type === "Caption") && this.studio.emit("clip:dblclick", { clip: o }), this.lastPointerDownTime = a, this.lastPointerDownClip = o, o && !this.selectedClips.has(o) && (this.selectClip(o, s.shiftKey), s.stopPropagation());
     }), this.studio.artboard.addChild(this.activeTransformer), this.activeTransformer.showImmediate(), this.studio.pixiApp?.render();
   }
   // Copied Sync Logic
@@ -91745,10 +91768,22 @@ class Yte extends vy {
       ...e
     }, this.selection = new gte(this), this.transport = new vte(this), this.timeline = new yte(this), this.history = new _te(), this.resourceManager = new Do(), this.ready = this.initPixiApp().then(() => {
       this.history.init(this.exportToJSON());
-    }), this.on("clip:removed", this.handleClipRemoved), this.on("clips:removed", this.handleClipsRemoved), this.on("clip:updated", this.handleTimelineChange), this.on("clip:added", this.handleTimelineChange), this.on("clips:added", this.handleTimelineChange), this.on("track:removed", this.handleTimelineChange), this.on("track:added", this.handleTimelineChange);
+    }), this.on("clip:added", (t) => this.handleTimelineChange(t)), this.on("clips:added", (t) => this.handleTimelineChange(t)), this.on(
+      "clip:replaced",
+      (t) => this.handleTimelineChange({ clip: t.newClip })
+    ), this.on("studio:restored", (t) => {
+      t.clips.forEach((i) => this.attachClipEvents(i)), this.handleTimelineChange();
+    }), this.on("clip:removed", this.handleClipRemoved), this.on("clips:removed", this.handleClipsRemoved), this.on("clip:updated", this.handleTimelineChange), this.on("track:removed", () => this.handleTimelineChange()), this.on("track:added", () => this.handleTimelineChange());
+  }
+  attachClipEvents(e) {
+    if (this.clipListeners.has(e)) return;
+    const t = () => {
+      this.updateFrame(this.currentTime);
+    };
+    e.on("request-render", t), this.clipListeners.set(e, t);
   }
-  handleTimelineChange = () => {
-    this.updateFrame(this.currentTime), this.saveHistory();
+  handleTimelineChange = (e) => {
+    e?.clip && this.attachClipEvents(e.clip), e?.clips && e.clips.forEach((t) => this.attachClipEvents(t)), this.updateFrame(this.currentTime), this.saveHistory();
   };
   saveHistory() {
     this.historyPaused || this.processingHistory || (this.history.push(this.exportToJSON()), this.emit("history:changed", {
@@ -91797,7 +91832,7 @@ class Yte extends vy {
     }
     for (const [a, l] of s) {
       let u = this.clipCache.get(a);
-      u || (u = await Va(l), this.clipCache.set(a, u));
+      u || (u = await Va(l), this.clipCache.set(a, u), this.attachClipEvents(u));
       let c;
       for (const h of t.tracks)
         if (h.clipIds.includes(a)) {
@@ -91843,24 +91878,24 @@ class Yte extends vy {
     }
   }
   cleanupClipVisuals = (e) => {
-    for (const [n, s] of this.spriteRenderers)
-      if (n.id === e) {
-        const o = s.getRoot();
-        o && o.parent && o.parent.removeChild(o), s.destroy(), this.spriteRenderers.delete(n);
+    for (const [s, o] of this.spriteRenderers)
+      if (s.id === e) {
+        const a = o.getRoot();
+        a && a.parent && a.parent.removeChild(a), o.destroy(), this.spriteRenderers.delete(s);
         break;
       }
     const t = this.transitionSprites.get(e);
     t && (t.parent && t.parent.removeChild(t), t.destroy(), this.transitionSprites.delete(e)), this.transitionRenderers.get(e) && this.transitionRenderers.delete(e);
-    for (const [n, s] of this.videoSprites)
-      if (n.id === e) {
-        s.parent && s.parent.removeChild(s), s.destroy(), this.videoSprites.delete(n);
-        break;
-      }
-    for (const [n] of this.clipListeners)
-      if (n.id === e) {
-        this.clipListeners.delete(n);
+    for (const [s, o] of this.videoSprites)
+      if (s.id === e) {
+        o.parent && o.parent.removeChild(o), o.destroy(), this.videoSprites.delete(s);
         break;
       }
+    const n = this.timeline.getClipById(e);
+    if (n) {
+      const s = this.clipListeners.get(n);
+      s && (n.off("request-render", s), this.clipListeners.delete(n));
+    }
   };
   handleClipRemoved = ({ clipId: e }) => {
     this.cleanupClipVisuals(e), this.updateFrame(this.currentTime), this.saveHistory();
@@ -91972,9 +92007,11 @@ class Yte extends vy {
    * @param options Options for addition (trackId, etc.)
    */
   async addClip(e, t) {
-    (Array.isArray(e) ? e : [e]).forEach((n) => this.clipCache.set(n.id, n)), this.beginHistoryGroup();
+    const i = Array.isArray(e) ? e : [e];
+    i.forEach((n) => this.clipCache.set(n.id, n)), this.beginHistoryGroup();
     try {
-      return await this.timeline.addClip(e, t);
+      const n = await this.timeline.addClip(e, t);
+      return i.forEach((s) => this.attachClipEvents(s)), n;
     } finally {
       this.endHistoryGroup();
     }

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { a4 as t, p as e, q as i, w as o, v as n, t as r, Y as T, a2 as E, I as m, a9 as f, L as g, V as A, P as I, S as C, s as L, u as P, K as S, O as _, V as l, a8 as O, x as c, o as p, a6 as u, a5 as M, l as d, m as F, z as N, W as x, a0 as R, a7 as U, X as V, a3 as y, a1 as k, y as D, J as h, Z as w, n as B, Q as G, _ as J, r as K, U as j, $ as q } from "./index-bXwx7D02.js";
+import { a4 as t, p as e, q as i, w as o, v as n, t as r, Y as T, a2 as E, I as m, a9 as f, L as g, V as A, P as I, S as C, s as L, u as P, K as S, O as _, V as l, a8 as O, x as c, o as p, a6 as u, a5 as M, l as d, m as F, z as N, W as x, a0 as R, a7 as U, X as V, a3 as y, a1 as k, y as D, J as h, Z as w, n as B, Q as G, _ as J, r as K, U as j, $ as q } from "./index-CFp3iXGD.js";
 export {
   t as ANIMATABLE_PROPERTIES,
   e as Audio,