@designcombo/video 0.0.2 → 0.0.3

package/dist/json-serialization.d.ts

@@ -23,6 +23,10 @@ interface BaseClipJSON {
     zIndex: number;
     opacity: number;
     flip: 'horizontal' | 'vertical' | null;
+    trim?: {
+        from: number;
+        to: number;
+    };
     animation?: {
         keyFrames: Record<string, Partial<{
             x: number;
@@ -130,7 +134,14 @@ export interface CaptionClipJSON extends BaseClipJSON {
     fontUrl?: string;
 }
 export type ClipJSON = VideoClipJSON | AudioClipJSON | ImageClipJSON | TextClipJSON | CaptionClipJSON;
+export interface StudioTrackJSON {
+    id: string;
+    name: string;
+    type: string;
+    clipIds: string[];
+}
 export interface ProjectJSON {
+    tracks?: StudioTrackJSON[];
     clips: ClipJSON[];
     globalEffects?: Array<{
         id: string;

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

@@ -15,6 +15,10 @@ type TKeyFrameOpts = Partial<Record<`${number}%` | 'from' | 'to', Partial<TAnima
  * @see {@link OffscreenSprite}
  */
 export declare abstract class BaseSprite {
+    /**
+     * Unique identifier for the sprite/clip
+     */
+    id: string;
     /**
      * Control display time range of clips, commonly used in editing scenario timeline (track) module
      * from: start time offset in microseconds
@@ -36,6 +40,15 @@ export declare abstract class BaseSprite {
      *    2. Audio uses the simplest interpolation algorithm to change rate, so changing rate will cause pitch variation, for custom algorithm please use {@link VideoClip.tickInterceptor} to implement
      */
     playbackRate: number;
+    /**
+     * Trim range of the source media in microseconds
+     * from: start time in microseconds
+     * to: end time in microseconds
+     */
+    trim: {
+        from: number;
+        to: number;
+    };
     private evtTool;
     /**
      * Listen to property change events
@@ -50,6 +63,10 @@ export declare abstract class BaseSprite {
             height: number;
             angle: number;
             zIndex: number;
+            blur: number;
+            brightness: number;
+            round: number;
+            volume: number;
         }>) => void;
     }[Type]) => (() => void);
     private _left;
@@ -96,6 +113,30 @@ export declare abstract class BaseSprite {
      * Control layering relationship between clips, clips with smaller zIndex will be occluded
      */
     set zIndex(v: number);
+    private _blur;
+    /**
+     * Blur intensity (0.0 to 1.0, where 1.0 is max useful blur, e.g. 50px)
+     */
+    get blur(): number;
+    set blur(v: number);
+    private _brightness;
+    /**
+     * Brightness intensity (0.0 to 1.0, where 0.0 is Normal, 1.0 is Maximum)
+     */
+    get brightness(): number;
+    set brightness(v: number);
+    private _round;
+    /**
+     * Rounded corners intensity (0.0 to 1.0, where 1.0 is a perfect circle/capsule)
+     */
+    get round(): number;
+    set round(v: number);
+    private _volume;
+    /**
+     * Audio volume (0.0 to 1.0)
+     */
+    get volume(): number;
+    set volume(v: number);
     /**
      * Opacity
      */

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

@@ -19,6 +19,9 @@ export declare class PixiSpriteRenderer {
     private canvas;
     private context;
     private destroyed;
+    private blurFilter;
+    private colorMatrixFilter;
+    private roundMask;
     constructor(_pixiApp: Application | null, sprite: IClip, targetContainer?: Container | null);
     /**
      * Update the sprite with a new video frame or Texture
@@ -28,21 +31,9 @@ export declare class PixiSpriteRenderer {
     updateFrame(frame: ImageBitmap | Texture | null): Promise<void>;
     /**
      * Apply sprite transformations to the Pixi Sprite
-     * This reads the current sprite properties (which may have been updated by animations)
-     * and applies them to the Pixi sprite
      */
     private applySpriteTransforms;
-    /**
-     * Update sprite properties without changing the frame
-     * Useful when sprite properties change but frame stays the same
-     */
     updateTransforms(): void;
-    /**
-     * Get the Pixi Sprite instance
-     */
     getSprite(): Sprite | null;
-    /**
-     * Destroy the renderer and clean up resources
-     */
     destroy(): void;
 }

package/dist/studio.d.ts

@@ -11,18 +11,46 @@ export interface IStudioOpts {
     interactivity?: boolean;
 }
 export interface StudioEvents {
-    "selection:created": {
+    'selection:created': {
         selected: IClip[];
     };
-    "selection:updated": {
+    'selection:updated': {
         selected: IClip[];
     };
-    "selection:cleared": {
+    'selection:cleared': {
         deselected: IClip[];
     };
+    'track:added': {
+        track: StudioTrack;
+    };
+    'track:removed': {
+        trackId: string;
+    };
+    'clip:added': {
+        clip: IClip;
+        trackId: string;
+    };
+    'clip:removed': {
+        clipId: string;
+    };
+    currentTime: {
+        currentTime: number;
+    };
+    play: {
+        isPlaying: boolean;
+    };
+    pause: {
+        isPlaying: boolean;
+    };
     [key: string]: any;
     [key: symbol]: any;
 }
+export interface StudioTrack {
+    id: string;
+    name: string;
+    type: string;
+    clipIds: string[];
+}
 /**
  * Interactive preview studio for clips with playback controls
  * Useful for previewing clips before rendering with Compositor
@@ -45,6 +73,7 @@ export interface StudioEvents {
  */
 export declare class Studio extends EventEmitter<StudioEvents> {
     private pixiApp;
+    private tracks;
     private clips;
     private spriteRenderers;
     private artboard;
@@ -66,15 +95,15 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     private destroyed;
     private globalEffects;
     private activeGlobalEffect;
-    private postProcessContainer;
+    private currentGlobalEffectSprite;
     private effectFilters;
-    private scale;
     private clipsNormalContainer;
     private clipsEffectContainer;
     /**
      * Convert hex color string to number
      */
     private hexToNumber;
+    ready: Promise<void>;
     /**
      * Create a new Studio instance
      */
@@ -91,7 +120,35 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * @param clip The clip to add
      * @param audioSource Optional audio source (URL, File, or Blob) for AudioClip playback
      */
-    addClip(clip: IClip, audioSource?: string | File | Blob): Promise<void>;
+    addClip(clip: IClip, options?: {
+        trackId?: string;
+        audioSource?: string | File | Blob;
+    } | string | File | Blob): Promise<void>;
+    /**
+     * Add a new track to the studio
+     */
+    addTrack(track: {
+        name: string;
+        type: string;
+        id?: string;
+    }): StudioTrack;
+    /**
+     * Set tracks (and implicitly clips if they are new)
+     */
+    setTracks(tracks: StudioTrack[]): Promise<void>;
+    /**
+     * Remove a track and all its clips
+     */
+    removeTrack(trackId: string): Promise<void>;
+    /**
+     * Update a clip's properties
+     * Handles consistency between display (from/to) and duration
+     */
+    updateClip(id: string, updates: Partial<IClip>): Promise<void>;
+    /**
+     * Get all tracks
+     */
+    getTracks(): StudioTrack[];
     /**
      * Setup sprite interactivity for click selection
      */
@@ -150,6 +207,7 @@ export declare class Studio extends EventEmitter<StudioEvents> {
         duration?: number;
         id?: string;
     }, clips: IClip[]): string;
+    getTrackIndex(clipId: string): number;
     removeGlobalEffect(id: string): void;
     clearGlobalEffects(): void;
     private updateActiveGlobalEffect;
@@ -193,4 +251,5 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * @param json The JSON project data
      */
     loadFromJSON(json: ProjectJSON): Promise<void>;
+    private loadClipIntoTrack;
 }

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

@@ -1,5 +1,5 @@
-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";
+import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, af as qe, 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, ag as Qe, ah as q, L as Y, ai as U, s as Q, a0 as Je, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Ze, p as et, ab as tt, ac as rt, ae as nt, aj as st, ak as it, al as at, am as H, an as ot, ao as ut, m as ve, ap as te, aq as k, e as b, ar as lt } from "./index-BVO9qrk3.js";
+import { c as A, a as ct, b as dt, B as Te } from "./colorToUniform-C2jGzNe1.js";
 class Pe {
   /**
    * Initialize the plugin with scope of application instance
@@ -86,34 +86,7 @@ class we {
   }
 }
 we.extension = p.Application;
-var dt = `in vec2 aPosition;
-out vec2 vTextureCoord;
-
-uniform vec4 uInputSize;
-uniform vec4 uOutputFrame;
-uniform vec4 uOutputTexture;
-
-vec4 filterVertexPosition( void )
-{
-    vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
-    
-    position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
-    position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
-
-    return vec4(position, 0.0, 1.0);
-}
-
-vec2 filterTextureCoord( void )
-{
-    return aPosition * (uOutputFrame.zw * uInputSize.zw);
-}
-
-void main(void)
-{
-    gl_Position = filterVertexPosition();
-    vTextureCoord = filterTextureCoord();
-}
-`, ht = `in vec2 vTextureCoord;
+var ht = `in vec2 vTextureCoord;
 out vec4 finalColor;
 uniform sampler2D uTexture;
 void main() {
@@ -176,7 +149,7 @@ class ft extends je {
       fragment: { source: re, entryPoint: "mainFragment" },
       name: "passthrough-filter"
     }), t = fe.from({
-      vertex: dt,
+      vertex: qe,
       fragment: ht,
       name: "passthrough-filter"
     });
@@ -756,7 +729,7 @@ class Be {
     const s = r.customShader || this._adaptor.shader;
     this.state.blendMode = e.groupBlendMode;
     const i = s.resources.localUniforms.uniforms;
-    i.uTransformMatrix = e.groupTransform, i.uRound = t._roundPixels | e._roundPixels, z(
+    i.uTransformMatrix = e.groupTransform, i.uRound = t._roundPixels | e._roundPixels, A(
       e.groupColorAlpha,
       i.uColor,
       0
@@ -783,7 +756,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 = D.get(qe);
+      const o = D.get(Qe);
       return i.copyTo(o), o.renderable = e, o.roundPixels = s, o;
     });
   }
@@ -942,7 +915,7 @@ class De {
       return;
     e.state.blendMode = q(e.groupBlendMode, e.texture._source);
     const t = this.localUniforms;
-    t.uniforms.uTransformMatrix = e.groupTransform, t.uniforms.uRound = this.renderer._roundPixels | e._roundPixels, t.update(), z(
+    t.uniforms.uTransformMatrix = e.groupTransform, t.uniforms.uRound = this.renderer._roundPixels | e._roundPixels, t.update(), A(
       e.groupColorAlpha,
       t.uniforms.uColor,
       0
@@ -1262,7 +1235,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 Je(16777215), type: "vec4<f32>" },
           uRound: { value: 1, type: "f32" },
           uResolution: { value: [0, 0], type: "vec2<f32>" }
         }
@@ -1270,7 +1243,7 @@ class Ft extends Q {
     });
   }
 }
-class ze {
+class Ae {
   /**
    * @param renderer - The renderer this sprite batch works for.
    * @param adaptor
@@ -1309,7 +1282,7 @@ class ze {
     const s = this.state;
     n.update(t, e._childrenDirty), e._childrenDirty = !1, s.blendMode = q(e.blendMode, e.texture._source);
     const i = this.localUniforms.uniforms, o = i.uTranslationMatrix;
-    e.worldTransform.copyTo(o), o.prepend(r.globalUniforms.globalUniformData.projectionMatrix), i.uResolution = r.globalUniforms.globalUniformData.resolution, i.uRound = r._roundPixels | e._roundPixels, z(
+    e.worldTransform.copyTo(o), o.prepend(r.globalUniforms.globalUniformData.projectionMatrix), i.uResolution = r.globalUniforms.globalUniformData.resolution, i.uRound = r._roundPixels | e._roundPixels, A(
       e.groupColorAlpha,
       i.uColor,
       0
@@ -1320,18 +1293,18 @@ class ze {
     this.renderer = null, this.defaultShader && (this.defaultShader.destroy(), this.defaultShader = null);
   }
 }
-class Ae extends ze {
+class ze extends Ae {
   constructor(e) {
     super(e, new yt());
   }
 }
-Ae.extension = {
+ze.extension = {
   type: [
     p.WebGLPipes
   ],
   name: "particle"
 };
-class ke extends ze {
+class ke extends Ae {
   constructor(e) {
     super(e, new vt());
   }
@@ -1564,14 +1537,14 @@ class Mt extends Q {
     O ?? (O = xe({
       name: "tiling-sprite-shader",
       bits: [
-        lt,
+        ct,
         Bt,
         _e
       ]
     })), I ?? (I = be({
       name: "tiling-sprite-shader",
       bits: [
-        ct,
+        dt,
         Gt,
         ye
       ]
@@ -1619,11 +1592,11 @@ class Dt extends J {
     });
   }
 }
-function zt(a, e) {
+function At(a, e) {
   const t = a.anchor.x, r = a.anchor.y;
   e[0] = -t * a.width, e[1] = -r * a.height, e[2] = (1 - t) * a.width, e[3] = -r * a.height, e[4] = (1 - t) * a.width, e[5] = (1 - r) * a.height, e[6] = -t * a.width, e[7] = (1 - r) * a.height;
 }
-function At(a, e, t, r) {
+function zt(a, e, t, r) {
   let n = 0;
   const s = a.length / e, i = r.a, o = r.b, u = r.c, c = r.d, h = r.tx, l = r.ty;
   for (t *= e; n < s; ) {
@@ -1636,7 +1609,7 @@ function kt(a, e) {
   let s = 0, i = 0;
   a.applyAnchorToTexture && (s = a.anchor.x, i = a.anchor.y), e[0] = e[6] = -s, e[2] = e[4] = 1 - s, e[1] = e[3] = -i, e[5] = e[7] = 1 - i;
   const o = P.shared;
-  o.copyFrom(a._tileTransform.matrix), o.tx /= a.width, o.ty /= a.height, o.invert(), o.scale(a.width / r, a.height / n), At(e, 2, 0, o);
+  o.copyFrom(a._tileTransform.matrix), o.tx /= a.width, o.ty /= a.height, o.invert(), o.scale(a.width / r, a.height / n), zt(e, 2, 0, o);
 }
 const B = new Dt();
 class Ot {
@@ -1683,7 +1656,7 @@ class Ve {
     const { shader: t } = this._getTilingSpriteData(e);
     t.groups[0] = this._renderer.globalUniforms.bindGroup;
     const r = t.resources.localUniforms.uniforms;
-    r.uTransformMatrix = e.groupTransform, r.uRound = this._renderer._roundPixels | e._roundPixels, z(
+    r.uTransformMatrix = e.groupTransform, r.uRound = this._renderer._roundPixels | e._roundPixels, A(
       e.groupColorAlpha,
       r.uColor,
       0
@@ -1719,7 +1692,7 @@ class Ve {
   }
   _updateBatchableMesh(e) {
     const t = this._getTilingSpriteData(e), { geometry: r } = t, n = e.texture.source.style;
-    n.addressMode !== "repeat" && (n.addressMode = "repeat", n.update()), kt(e, r.uvs), zt(e, r.positions);
+    n.addressMode !== "repeat" && (n.addressMode = "repeat", n.update()), kt(e, r.uvs), At(e, r.positions);
   }
   destroy() {
     this._renderer = null;
@@ -1916,8 +1889,8 @@ class Lt extends Q {
     E ?? (E = xe({
       name: "sdf-shader",
       bits: [
-        Je,
-        Ze(e),
+        Ze,
+        et(e),
         It,
         Vt,
         _e
@@ -1925,8 +1898,8 @@ class Lt extends Q {
     })), V ?? (V = be({
       name: "sdf-shader",
       bits: [
-        et,
-        tt(e),
+        tt,
+        rt(e),
         Et,
         Wt,
         ye
@@ -1936,12 +1909,12 @@ class Lt extends Q {
       gpuProgram: E,
       resources: {
         localUniforms: t,
-        batchSamplers: rt(e)
+        batchSamplers: nt(e)
       }
     });
   }
 }
-class Yt extends at {
+class Yt extends ot {
   destroy() {
     this.context.customShader && this.context.customShader.destroy(), super.destroy();
   }
@@ -1963,11 +1936,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 = nt.getFont(e.text, e._style);
+    const { context: r } = t, n = st.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;
+    const s = it.graphemeSegmenter(e.text), i = e._style;
     let o = n.baseLineOffset;
-    const u = it(s, i, n, !0), c = i.padding, h = u.scale;
+    const u = at(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;
@@ -1980,14 +1953,14 @@ class We {
       for (let S = 0; S < y.charPositions.length; S++) {
         const $e = y.chars[S], R = n.chars[$e];
         if (R?.texture) {
-          const A = R.texture;
+          const z = R.texture;
           r.texture(
-            A,
+            z,
             f || "black",
             Math.round(y.charPositions[S] + R.xOffset),
             Math.round(o + R.yOffset + x),
-            A.orig.width,
-            A.orig.height
+            z.orig.width,
+            z.orig.height
           );
         }
       }
@@ -2041,7 +2014,7 @@ class Xt extends Te {
 }
 function K(a, e) {
   const { texture: t, bounds: r } = a, n = e._style._getFinalPadding();
-  ot(r, e._anchor, t);
+  ut(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;
 }
@@ -2482,9 +2455,9 @@ Ke.extension = {
 b.add(Pe);
 b.add(we);
 b.add(Be);
-b.add(ut);
+b.add(lt);
 b.add(De);
-b.add(Ae);
+b.add(ze);
 b.add(ke);
 b.add(Ke);
 b.add(He);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcombo/video",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Video rendering and processing library",
   "type": "module",
   "publishConfig": {
@@ -27,9 +27,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {