@designcombo/video 0.0.1 → 0.0.2

package/dist/json-serialization.d.ts

@@ -1,5 +1,13 @@
 import { IClip } from './clips';
 interface BaseClipJSON {
+    id?: string;
+    effects?: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+        targets?: number[];
+    }>;
     src: string;
     display: {
         from: number;
@@ -124,6 +132,12 @@ export interface CaptionClipJSON extends BaseClipJSON {
 export type ClipJSON = VideoClipJSON | AudioClipJSON | ImageClipJSON | TextClipJSON | CaptionClipJSON;
 export interface ProjectJSON {
     clips: ClipJSON[];
+    globalEffects?: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
     settings?: {
         width?: number;
         height?: number;

package/dist/sprite/base-sprite.d.ts

@@ -104,6 +104,13 @@ export declare abstract class BaseSprite {
      * Flip clip horizontally or vertically
      */
     flip: 'horizontal' | 'vertical' | null;
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+        targets?: number[];
+    }>;
     private animatKeyFrame;
     private animatOpts;
     /**

package/dist/sprite/pixi-sprite-renderer.d.ts

@@ -19,7 +19,7 @@ export declare class PixiSpriteRenderer {
     private canvas;
     private context;
     private destroyed;
-    constructor(pixiApp: Application | null, sprite: IClip, targetContainer?: Container | null);
+    constructor(_pixiApp: Application | null, sprite: IClip, targetContainer?: Container | null);
     /**
      * Update the sprite with a new video frame or Texture
      * @param frame ImageBitmap, Texture, or null to render

package/dist/studio.d.ts

@@ -1,11 +1,27 @@
 import { IClip } from './clips/iclip';
 import { ProjectJSON } from './json-serialization';
+import { EffectKey } from './effect/glsl/gl-effect';
+import { default as EventEmitter } from './event-emitter';
 export interface IStudioOpts {
     width: number;
     height: number;
     fps?: number;
     bgColor?: string;
     canvas?: HTMLCanvasElement;
+    interactivity?: boolean;
+}
+export interface StudioEvents {
+    "selection:created": {
+        selected: IClip[];
+    };
+    "selection:updated": {
+        selected: IClip[];
+    };
+    "selection:cleared": {
+        deselected: IClip[];
+    };
+    [key: string]: any;
+    [key: symbol]: any;
 }
 /**
  * Interactive preview studio for clips with playback controls
@@ -22,8 +38,12 @@ export interface IStudioOpts {
  * await studio.addClip(spr1);
  * await studio.addClip(spr2);
  * studio.play();
+ *
+ * studio.on('selection:created', ({ selected }) => {
+ *   console.log('Selection created', selected);
+ * });
  */
-export declare class Studio {
+export declare class Studio extends EventEmitter<StudioEvents> {
     private pixiApp;
     private clips;
     private spriteRenderers;
@@ -44,11 +64,17 @@ export declare class Studio {
     private maxDuration;
     private opts;
     private destroyed;
+    private globalEffects;
+    private activeGlobalEffect;
+    private postProcessContainer;
+    private effectFilters;
+    private scale;
+    private clipsNormalContainer;
+    private clipsEffectContainer;
     /**
      * Convert hex color string to number
      */
     private hexToNumber;
-    ready: Promise<void>;
     /**
      * Create a new Studio instance
      */
@@ -115,6 +141,19 @@ export declare class Studio {
     private renderLoop;
     private updateFrame;
     private recalculateMaxDuration;
+    /**
+     * Apply global effect to the current scene
+     */
+    moveClipToEffectContainer(clip: IClip, toEffect?: boolean): void;
+    applyGlobalEffect(key: EffectKey, options: {
+        startTime: number;
+        duration?: number;
+        id?: string;
+    }, clips: IClip[]): string;
+    removeGlobalEffect(id: string): void;
+    clearGlobalEffects(): void;
+    private updateActiveGlobalEffect;
+    private applyGlobalEffectIfNeeded;
     /**
      * Destroy the studio and clean up resources
      */

package/dist/{webworkerAll-DChKIQQa.js → webworkerAll-aNnyDpl9.js}

@@ -1,5 +1,5 @@
-import { E as p, U as $e, T as ee, G as he, a as fe, M as P, m as C, h as pe, F as v, t as w, a6 as N, R as $, w as Y, z as me, a3 as G, a4 as ge, d as F, B as T, D as j, x as M, ad as je, ae as q, J as L, af as U, S as Q, _ as qe, Z as X, o as xe, s as _e, a8 as be, ab as ye, p as Qe, q as Je, a9 as Ze, aa as et, ac as tt, ag as rt, ah as nt, ai as st, aj as H, ak as it, al as at, n as ve, am as te, an as k, e as b, ao as ot } from "./index-BuRTeJh6.js";
-import { F as ut, S as D, c as z, a as lt, b as ct, B as Te } from "./colorToUniform-B0NRe8Du.js";
+import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, M as P, l as C, d as pe, I as v, t as w, a8 as $, R as N, w as L, H as me, a5 as G, a6 as ge, c as F, B as T, D as j, S as M, y as D, af as qe, ag as q, L as Y, ah as U, s as Q, a0 as Qe, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Je, p as Ze, ab as et, ac as tt, ae as rt, ai as nt, aj as st, ak as it, al as H, am as at, an as ot, m as ve, ao as te, ap as k, e as b, aq as ut } from "./index-C333riU-.js";
+import { c as z, a as lt, b as ct, B as Te } from "./colorToUniform-C2jGzNe1.js";
 class Pe {
   /**
    * Initialize the plugin with scope of application instance
@@ -62,7 +62,7 @@ class we {
       {
         configurable: !0,
         set(t) {
-          this._ticker && this._ticker.remove(this.render, this), this._ticker = t, t && t.add(this.render, this, $e.LOW);
+          this._ticker && this._ticker.remove(this.render, this), this._ticker = t, t && t.add(this.render, this, Ne.LOW);
         },
         get() {
           return this._ticker;
@@ -169,7 +169,7 @@ fn mainFragment(
     return textureSample(uTexture, uSampler, uv);
 }
 `;
-class ft extends ut {
+class ft extends je {
   constructor() {
     const e = he.from({
       vertex: { source: re, entryPoint: "mainVertex" },
@@ -234,7 +234,7 @@ function pt(a, e) {
   }
   return e.matrix = t, e;
 }
-const mt = new N({
+const mt = new $({
   attributes: {
     aPosition: {
       buffer: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
@@ -440,7 +440,7 @@ class Se {
       shader: e,
       state: e._state,
       topology: "triangle-list"
-    }), r.type === $.WEBGL && r.renderTarget.finishRenderPass();
+    }), r.type === N.WEBGL && r.renderTarget.finishRenderPass();
   }
   /**
    * Sets up the filter textures including input texture and back texture if needed.
@@ -570,7 +570,7 @@ class Se {
         break;
       }
       if (y.blendRequired && !(i.backBuffer?.useBackBuffer ?? !0)) {
-        Y("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options."), f = !1;
+        L("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options."), f = !1;
         break;
       }
       f = !0, d || (d = y.blendRequired);
@@ -606,7 +606,7 @@ Se.extension = {
   ],
   name: "filter"
 };
-const Fe = class Re extends N {
+const Fe = class Re extends $ {
   constructor(...e) {
     let t = e[0] ?? {};
     t instanceof Float32Array && (G(ge, "use new MeshGeometry({ positions, uvs, indices }) instead"), t = {
@@ -721,13 +721,13 @@ class _t {
   }
   destroy() {
     this.batches.forEach((e) => {
-      M.return(e);
+      D.return(e);
     }), this.batches.length = 0;
   }
 }
 class Be {
   constructor(e, t) {
-    this.state = D.for2d(), this.renderer = e, this._adaptor = t, this.renderer.runners.contextChange.add(this);
+    this.state = M.for2d(), this.renderer = e, this._adaptor = t, this.renderer.runners.contextChange.add(this);
   }
   contextChange() {
     this._adaptor.contextChange(this.renderer);
@@ -783,7 +783,7 @@ class Be {
   _updateBatchesForRenderable(e, t) {
     const r = e.context, n = this.renderer.graphicsContext.getGpuContext(r), s = this.renderer._roundPixels | e._roundPixels;
     t.batches = n.batches.map((i) => {
-      const o = M.get(je);
+      const o = D.get(qe);
       return i.copyTo(o), o.renderable = e, o.roundPixels = s, o;
     });
   }
@@ -1033,7 +1033,7 @@ function le(a, e) {
     if (e !== i.dynamic)
       continue;
     t.push(`offset = index + ${r}`), t.push(i.code);
-    const o = L(i.format);
+    const o = Y(i.format);
     r += o.stride / 4;
   }
   t.push(`
@@ -1052,11 +1052,11 @@ class Pt {
     const t = this._size = e.size ?? 1e3, r = e.properties;
     let n = 0, s = 0;
     for (const h in r) {
-      const l = r[h], d = L(l.format);
+      const l = r[h], d = Y(l.format);
       l.dynamic ? s += d.stride : n += d.stride;
     }
     this._dynamicStride = s / 4, this._staticStride = n / 4, this.staticAttributeBuffer = new U(t * 4 * n), this.dynamicAttributeBuffer = new U(t * 4 * s), this.indexBuffer = ue(t);
-    const i = new N();
+    const i = new $();
     let o = 0, u = 0;
     this._staticBuffer = new F({
       data: new Float32Array(1),
@@ -1070,7 +1070,7 @@ class Pt {
       usage: T.VERTEX | T.COPY_DST
     });
     for (const h in r) {
-      const l = r[h], d = L(l.format);
+      const l = r[h], d = Y(l.format);
       l.dynamic ? (i.addAttribute(l.attributeName, {
         buffer: this._dynamicBuffer,
         stride: this._dynamicStride * 4,
@@ -1262,7 +1262,7 @@ class Ft extends Q {
         // this will be replaced with the local uniforms from the particle container
         uniforms: {
           uTranslationMatrix: { value: new P(), type: "mat3x3<f32>" },
-          uColor: { value: new qe(16777215), type: "vec4<f32>" },
+          uColor: { value: new Qe(16777215), type: "vec4<f32>" },
           uRound: { value: 1, type: "f32" },
           uResolution: { value: [0, 0], type: "vec2<f32>" }
         }
@@ -1276,12 +1276,12 @@ class ze {
    * @param adaptor
    */
   constructor(e, t) {
-    this.state = D.for2d(), this.localUniforms = new C({
+    this.state = M.for2d(), this.localUniforms = new C({
       uTranslationMatrix: { value: new P(), type: "mat3x3<f32>" },
       uColor: { value: new Float32Array(4), type: "vec4<f32>" },
       uRound: { value: 1, type: "f32" },
       uResolution: { value: [0, 0], type: "vec2<f32>" }
-    }), this.renderer = e, this.adaptor = t, this.defaultShader = new Ft(), this.state = D.for2d();
+    }), this.renderer = e, this.adaptor = t, this.defaultShader = new Ft(), this.state = M.for2d();
   }
   validateRenderable(e) {
     return !1;
@@ -1653,7 +1653,7 @@ class Ot {
 }
 class Ve {
   constructor(e) {
-    this._state = D.default2d, this._renderer = e;
+    this._state = M.default2d, this._renderer = e;
   }
   validateRenderable(e) {
     const t = this._getTilingSpriteData(e), r = t.canBatch;
@@ -1727,7 +1727,7 @@ class Ve {
   _updateCanBatch(e) {
     const t = this._getTilingSpriteData(e), r = e.texture;
     let n = !0;
-    return this._renderer.type === $.WEBGL && (n = this._renderer.context.supports.nonPowOf2wrapping), t.canBatch = r.textureMatrix.isSimple && (n || r.source.isPowerOfTwo), t.canBatch;
+    return this._renderer.type === N.WEBGL && (n = this._renderer.context.supports.nonPowOf2wrapping), t.canBatch = r.textureMatrix.isSimple && (n || r.source.isPowerOfTwo), t.canBatch;
   }
 }
 Ve.extension = {
@@ -1905,7 +1905,7 @@ const It = {
   }
 };
 let E, V;
-class Yt extends Q {
+class Lt extends Q {
   constructor(e) {
     const t = new C({
       uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
@@ -1916,8 +1916,8 @@ class Yt extends Q {
     E ?? (E = xe({
       name: "sdf-shader",
       bits: [
-        Qe,
-        Je(e),
+        Je,
+        Ze(e),
         It,
         Vt,
         _e
@@ -1925,8 +1925,8 @@ class Yt extends Q {
     })), V ?? (V = be({
       name: "sdf-shader",
       bits: [
-        Ze,
-        et(e),
+        et,
+        tt(e),
         Et,
         Wt,
         ye
@@ -1936,12 +1936,12 @@ class Yt extends Q {
       gpuProgram: E,
       resources: {
         localUniforms: t,
-        batchSamplers: tt(e)
+        batchSamplers: rt(e)
       }
     });
   }
 }
-class Lt extends it {
+class Yt extends at {
   destroy() {
     this.context.customShader && this.context.customShader.destroy(), super.destroy();
   }
@@ -1963,11 +1963,11 @@ class We {
     de(e, t), this._renderer.renderPipes.graphics.updateRenderable(t), t.context.customShader && this._updateDistanceField(e);
   }
   _updateContext(e, t) {
-    const { context: r } = t, n = rt.getFont(e.text, e._style);
-    r.clear(), n.distanceField.type !== "none" && (r.customShader || (r.customShader = new Yt(this._renderer.limits.maxBatchableTextures)));
-    const s = nt.graphemeSegmenter(e.text), i = e._style;
+    const { context: r } = t, n = nt.getFont(e.text, e._style);
+    r.clear(), n.distanceField.type !== "none" && (r.customShader || (r.customShader = new Lt(this._renderer.limits.maxBatchableTextures)));
+    const s = st.graphemeSegmenter(e.text), i = e._style;
     let o = n.baseLineOffset;
-    const u = st(s, i, n, !0), c = i.padding, h = u.scale;
+    const u = it(s, i, n, !0), c = i.padding, h = u.scale;
     let l = u.width, d = u.height + u.offsetY;
     i._stroke && (l += i._stroke.width / h, d += i._stroke.width / h), r.translate(-e._anchor._x * l - c, -e._anchor._y * d - c).scale(h, h);
     const f = n.applyFillAsTint ? i._fill.color : 16777215;
@@ -1978,7 +1978,7 @@ class We {
     for (let _ = 0; _ < u.lines.length; _++) {
       const y = u.lines[_];
       for (let S = 0; S < y.charPositions.length; S++) {
-        const Ne = y.chars[S], R = n.chars[Ne];
+        const $e = y.chars[S], R = n.chars[$e];
         if (R?.texture) {
           const A = R.texture;
           r.texture(
@@ -1998,7 +1998,7 @@ class We {
     return e._gpuData[this._renderer.uid] || this.initGpuText(e);
   }
   initGpuText(e) {
-    const t = new Lt();
+    const t = new Yt();
     return e._gpuData[this._renderer.uid] = t, this._updateContext(e, t), t;
   }
   _updateDistanceField(e) {
@@ -2041,11 +2041,11 @@ class Xt extends Te {
 }
 function K(a, e) {
   const { texture: t, bounds: r } = a, n = e._style._getFinalPadding();
-  at(r, e._anchor, t);
+  ot(r, e._anchor, t);
   const s = e._anchor._x * n * 2, i = e._anchor._y * n * 2;
   r.minX -= n - s, r.minY -= n - i, r.maxX -= n - s, r.maxY -= n - i;
 }
-class Ye {
+class Le {
   constructor(e) {
     this._renderer = e;
   }
@@ -2092,7 +2092,7 @@ class Ye {
     this._renderer = null;
   }
 }
-Ye.extension = {
+Le.extension = {
   type: [
     p.WebGLPipes,
     p.WebGPUPipes,
@@ -2105,7 +2105,7 @@ function Ht() {
   return /^((?!chrome|android).)*safari/i.test(a);
 }
 const Kt = new me();
-function Le(a, e, t, r) {
+function Ye(a, e, t, r) {
   const n = Kt;
   n.minX = 0, n.minY = 0, n.maxX = a.width / r | 0, n.maxY = a.height / r | 0;
   const s = v.getOptimalTexture(
@@ -2116,7 +2116,7 @@ function Le(a, e, t, r) {
   );
   return s.source.uploadMethodId = "image", s.source.resource = a, s.source.alphaMode = "premultiply-alpha-on-upload", s.frame.width = e / r, s.frame.height = t / r, s.source.emit("update", s.source), s.updateUvs(), s;
 }
-function Nt(a, e) {
+function $t(a, e) {
   const t = e.fontFamily, r = [], n = {}, s = /font-family:([^;"\s]+)/g, i = a.match(s);
   function o(u) {
     n[u] || (r.push(u), n[u] = !0);
@@ -2136,14 +2136,14 @@ function Nt(a, e) {
   }
   return r;
 }
-async function $t(a) {
+async function Nt(a) {
   const t = await (await j.get().fetch(a)).blob(), r = new FileReader();
   return await new Promise((s, i) => {
     r.onloadend = () => s(r.result), r.onerror = i, r.readAsDataURL(t);
   });
 }
 async function jt(a, e) {
-  const t = await $t(e);
+  const t = await Nt(e);
   return `@font-face {
         font-family: "${a.fontFamily}";
         font-weight: ${a.fontWeight};
@@ -2204,7 +2204,7 @@ function Zt(a, e, t) {
 }
 class Xe {
   constructor(e) {
-    this._activeTextures = {}, this._renderer = e, this._createCanvas = e.type === $.WEBGPU;
+    this._activeTextures = {}, this._renderer = e, this._createCanvas = e.type === N.WEBGPU;
   }
   /**
    * @param options
@@ -2249,7 +2249,7 @@ class Xe {
     t && (t.usageCount--, t.usageCount === 0 && (t.texture ? this._cleanUp(t.texture) : t.promise.then((r) => {
       t.texture = r, this._cleanUp(t.texture);
     }).catch(() => {
-      Y("HTMLTextSystem: Failed to clean texture");
+      L("HTMLTextSystem: Failed to clean texture");
     }), this._activeTextures[e] = null));
   }
   /**
@@ -2261,26 +2261,26 @@ class Xe {
     return this._buildTexturePromise(e);
   }
   async _buildTexturePromise(e) {
-    const { text: t, style: r, resolution: n, textureStyle: s } = e, i = M.get(Ue), o = Nt(t, r), u = await qt(o), c = xt(t, r, u, i), h = Math.ceil(Math.ceil(Math.max(1, c.width) + r.padding * 2) * n), l = Math.ceil(Math.ceil(Math.max(1, c.height) + r.padding * 2) * n), d = i.image, f = 2;
+    const { text: t, style: r, resolution: n, textureStyle: s } = e, i = D.get(Ue), o = $t(t, r), u = await qt(o), c = xt(t, r, u, i), h = Math.ceil(Math.ceil(Math.max(1, c.width) + r.padding * 2) * n), l = Math.ceil(Math.ceil(Math.max(1, c.height) + r.padding * 2) * n), d = i.image, f = 2;
     d.width = (h | 0) + f, d.height = (l | 0) + f;
     const g = Qt(t, r, n, u, i);
     await Zt(d, g, Ht() && o.length > 0);
     const m = d;
     let x;
     this._createCanvas && (x = Jt(d, n));
-    const _ = Le(
+    const _ = Ye(
       x ? x.canvas : m,
       d.width - f,
       d.height - f,
       n
     );
-    return s && (_.source.style = s), this._createCanvas && (this._renderer.texture.initSource(_.source), ve.returnCanvasAndContext(x)), M.return(i), _;
+    return s && (_.source.style = s), this._createCanvas && (this._renderer.texture.initSource(_.source), ve.returnCanvasAndContext(x)), D.return(i), _;
   }
   returnTexturePromise(e) {
     e.then((t) => {
       this._cleanUp(t);
     }).catch(() => {
-      Y("HTMLTextSystem: Failed to clean texture");
+      L("HTMLTextSystem: Failed to clean texture");
     });
   }
   _cleanUp(e) {
@@ -2371,7 +2371,7 @@ class Ke {
       text: s,
       style: i,
       resolution: u
-    }), l = Le(h.canvas, c.width, c.height, u);
+    }), l = Ye(h.canvas, c.width, c.height, u);
     if (o && (l.source.style = o), i.trim && (c.pad(i.padding), l.frame.copyFrom(c), l.frame.scale(1 / u), l.updateUvs()), i.filters) {
       const d = this._applyFilters(l, i.filters);
       return this.returnTexture(l), k.returnCanvasAndContext(h), d;
@@ -2482,7 +2482,7 @@ Ke.extension = {
 b.add(Pe);
 b.add(we);
 b.add(Be);
-b.add(ot);
+b.add(ut);
 b.add(De);
 b.add(Ae);
 b.add(ke);
@@ -2490,7 +2490,7 @@ b.add(Ke);
 b.add(He);
 b.add(We);
 b.add(Xe);
-b.add(Ye);
+b.add(Le);
 b.add(Ve);
 b.add(Ee);
 b.add(Se);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcombo/video",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Video rendering and processing library",
   "type": "module",
   "publishConfig": {