@designcombo/video 0.0.2 → 0.0.4

package/dist/{SharedSystems-BWe03l6N.js → SharedSystems-Cv0Hv-t_.js}

@@ -1,4 +1,4 @@
-import { F as Ie, u as Ee, l as se, M as v, G as De, v as Oe, S as Fe, x as ae, E as u, e as D, y as S, z as Le, H as O, I as b, R as F, J as ne, K as He, t as m, b as f, i as B, w as L, L as K, N as We, c as Y, B as y, j as U, O as ze, Q as C, k as M, V as w, W as Ve, a as Ne, X as ie, Y as oe, Z as le, _ as ue, C as P, $ as je, a0 as A, a1 as J, D as H, a2 as $e, a3 as qe, P as Ke, d as Ye, T as X, a4 as Q, a5 as Je, a6 as Xe, a7 as Qe } from "./index-C333riU-.js";
+import { F as Ie, u as Ee, l as se, M as v, G as De, v as Oe, S as Fe, x as ae, E as u, e as D, y as S, z as Le, H as O, I as b, R as F, J as ne, K as He, t as m, b as f, i as B, w as L, L as K, N as We, c as Y, B as y, j as U, O as ze, Q as C, k as M, V as w, W as Ve, a as Ne, X as ie, Y as oe, Z as le, _ as ue, C as P, $ as je, a0 as A, a1 as J, D as H, a2 as $e, a3 as qe, P as Ke, d as Ye, T as X, a4 as Q, a5 as Je, a6 as Xe, a7 as Qe } from "./index-CZk_O50g.js";
 import { B as de, c as Ze } from "./colorToUniform-C2jGzNe1.js";
 var et = `in vec2 vMaskCoord;
 in vec2 vTextureCoord;

package/dist/{WebGLRenderer-CKduQ9yw.js → WebGLRenderer-CeXIsNm5.js}

@@ -1,6 +1,6 @@
-import { S as G, E as d, B as v, w as m, D as S, L as j, v as ve, s as U, t as b, a8 as Be, k as K, a9 as Ae, b as p, V as L, j as B, i as A, l as F, M as $, aa as z, ab as Ne, ac as ye, ad as Y, ae as Ce, A as De, R as Ie, e as T } from "./index-C333riU-.js";
+import { S as G, E as d, B as v, w as m, D as S, L as j, v as ve, s as U, t as b, a8 as Be, k as K, a9 as Ae, b as p, V as L, j as B, i as A, l as F, M as $, aa as z, ab as Ne, ac as ye, ad as Y, ae as Ce, A as De, R as Ie, e as T } from "./index-CZk_O50g.js";
 import { b as q } from "./colorToUniform-C2jGzNe1.js";
-import { e as Ge, G as Ue, c as Fe, b as Oe, U as Pe, R as Me, B as Z, d as N, f as Le, S as He, a as we } from "./SharedSystems-BWe03l6N.js";
+import { e as Ge, G as Ue, c as Fe, b as Oe, U as Pe, R as Me, B as Z, d as N, f as Le, S as He, a as we } from "./SharedSystems-Cv0Hv-t_.js";
 class Q {
   constructor() {
     this._tempState = G.for2d(), this._didUploadHash = {};

package/dist/{WebGPURenderer-BSX8DZj-.js → WebGPURenderer-CKsFf2P8.js}

@@ -1,6 +1,6 @@
-import { S as E, g as A, E as p, f as ae, D as S, b as C, B as T, c as ue, d as L, h as M, w as v, i as x, j as ce, k as de, l as k, m as w, M as D, n as H, o as he, p as pe, q as z, s as F, t as R, A as le, R as fe, e as B } from "./index-C333riU-.js";
+import { S as E, g as A, E as p, f as ae, D as S, b as C, B as T, c as ue, d as L, h as M, w as v, i as x, j as ce, k as de, l as k, m as w, M as D, n as H, o as he, p as pe, q as z, s as F, t as R, A as le, R as fe, e as B } from "./index-CZk_O50g.js";
 import { l as ge, a as me } from "./colorToUniform-C2jGzNe1.js";
-import { c as _e, u as be, U as xe, B as ye, G as Ge, e as Se, R as Be, t as Pe, S as Te, a as Ce } from "./SharedSystems-BWe03l6N.js";
+import { c as _e, u as be, U as xe, B as ye, G as Ge, e as Se, R as Be, t as Pe, S as Te, a as Ce } from "./SharedSystems-Cv0Hv-t_.js";
 const y = E.for2d();
 class O {
   start(e, t, r) {

package/dist/{browserAll-CwPYLzJJ.js → browserAll-CVO4QZK1.js}

@@ -1,5 +1,5 @@
-import { T as M, U as Z, P as m, r as te, E as y, a as ie, w as g, e as P, C as V } from "./index-C333riU-.js";
-import "./webworkerAll-aNnyDpl9.js";
+import { T as M, U as Z, P as m, r as te, E as y, a as ie, w as g, e as P, C as V } from "./index-CZk_O50g.js";
+import "./webworkerAll-C-9pdN3u.js";
 class q {
   constructor(e) {
     this._lastTransform = "", this._observer = null, this._tickerAttached = !1, this.updateTranslation = () => {

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

@@ -21,6 +21,7 @@ interface IAudioClipOpts {
  * }),
  */
 export declare class AudioClip extends BaseClip implements IPlaybackCapable {
+    readonly type = "Audio";
     static ctx: AudioContext | null;
     ready: IClip['ready'];
     private _meta;
@@ -47,10 +48,6 @@ export declare class AudioClip extends BaseClip implements IPlaybackCapable {
      * Whether to loop the audio (hybrid JSON structure)
      */
     loop: boolean;
-    /**
-     * Audio volume level (0-1) (hybrid JSON structure)
-     */
-    volume: number;
     /**
      * Load an audio clip from a URL
      * @param url Audio URL

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

@@ -1,5 +1,5 @@
 import { BaseSprite } from '../sprite/base-sprite';
-import { IClip, IClipMeta } from './iclip';
+import { IClip, IClipMeta, ITransitionInfo } from './iclip';
 import { ClipJSON } from '../json-serialization';
 /**
  * Base class for all clips that extends BaseSprite
@@ -7,6 +7,7 @@ import { ClipJSON } from '../json-serialization';
  * and frame management
  */
 export declare abstract class BaseClip extends BaseSprite implements IClip {
+    abstract readonly type: string;
     private lastVf;
     protected destroyed: boolean;
     /**
@@ -14,6 +15,10 @@ export declare abstract class BaseClip extends BaseSprite implements IClip {
      * Used for serialization and reloading from JSON
      */
     src: string;
+    /**
+     * Transition info (optional)
+     */
+    transition?: ITransitionInfo;
     abstract tick(time: number): Promise<{
         video?: VideoFrame | ImageBitmap | null;
         audio?: Float32Array[];

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

@@ -29,7 +29,7 @@ export interface ICaptionClipOpts {
      * @default '#ffffff'
      */
     fill?: string | number | {
-        type: "gradient";
+        type: 'gradient';
         x0: number;
         y0: number;
         x1: number;
@@ -104,7 +104,7 @@ export interface ICaptionClipOpts {
     stroke?: string | number | {
         color: string | number;
         width: number;
-        join?: "miter" | "round" | "bevel";
+        join?: 'miter' | 'round' | 'bevel';
     };
     /**
      * Stroke width in pixels (used when stroke is a simple color)
@@ -115,7 +115,7 @@ export interface ICaptionClipOpts {
      * Text alignment ('left', 'center', 'right')
      * @default 'center'
      */
-    align?: "left" | "center" | "right";
+    align?: 'left' | 'center' | 'right';
     /**
      * Drop shadow configuration
      */
@@ -163,7 +163,8 @@ export interface ICaptionClipOpts {
  * captionClip.duration = 3e6; // 3 seconds
  */
 export declare class CaptionClip extends BaseClip implements IClip {
-    ready: IClip["ready"];
+    readonly type = "Caption";
+    ready: IClip['ready'];
     private _meta;
     get meta(): {
         duration: number;
@@ -208,8 +209,8 @@ export declare class CaptionClip extends BaseClip implements IClip {
             color: string | number;
             alpha: number;
             blur: number;
-            offsetX: number;
-            offsetY: number;
+            distance: number;
+            angle: number;
         } | undefined;
     };
     /**
@@ -239,7 +240,7 @@ export declare class CaptionClip extends BaseClip implements IClip {
     private externalRenderer;
     private pixiApp;
     private originalOpts;
-    constructor(text: string, opts?: ICaptionClipOpts, renderer?: Application["renderer"]);
+    constructor(text: string, opts?: ICaptionClipOpts, renderer?: Application['renderer']);
     private lastLoggedTime;
     updateState(currentTime: number): void;
     /**
@@ -252,11 +253,11 @@ export declare class CaptionClip extends BaseClip implements IClip {
     /**
      * Set an external renderer (e.g., from Studio) to avoid creating our own Pixi App
      */
-    setRenderer(renderer: Application["renderer"]): void;
+    setRenderer(renderer: Application['renderer']): void;
     private getRenderer;
     tick(time: number): Promise<{
         video: ImageBitmap;
-        state: "success";
+        state: 'success';
     }>;
     split(_time: number): Promise<[this, this]>;
     addEffect(effect: {

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

@@ -0,0 +1,37 @@
+import { BaseClip } from './base-clip';
+import { IClip } from './iclip';
+import { EffectKey } from '../effect/glsl/gl-effect';
+export declare class EffectClip extends BaseClip {
+    readonly type = "Effect";
+    ready: IClip['ready'];
+    private _meta;
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * The effect configuration
+     */
+    effect: {
+        id: string;
+        key: EffectKey;
+        name: string;
+    };
+    constructor(effectKey: EffectKey);
+    clone(): Promise<this>;
+    tick(_time: number): Promise<{
+        video: ImageBitmap | undefined;
+        state: 'success';
+    }>;
+    split(_time: number): Promise<[this, this]>;
+    toJSON(main?: boolean): any;
+    /**
+     * Create an EffectClip instance from a JSON object
+     */
+    static fromObject(json: any): Promise<EffectClip>;
+}

package/dist/clips/iclip.d.ts

@@ -4,6 +4,16 @@ export interface IClipMeta {
     height: number;
     duration: number;
 }
+export interface ITransitionInfo {
+    name: string;
+    duration: number;
+    textureUrl?: string;
+    prevClipId?: string;
+    fromClipId?: string;
+    toClipId?: string;
+    start?: number;
+    end?: number;
+}
 /**
  * Interface that all clips must implement
  *
@@ -18,6 +28,10 @@ export interface IClipMeta {
 export interface IClip extends Omit<BaseSprite, 'destroy' | 'ready'> {
     destroy: () => void;
     readonly ready: Promise<IClipMeta>;
+    /**
+     * Clip type (e.g., 'video', 'image', 'text', 'audio')
+     */
+    readonly type: string;
     /**
      * Extract data from clip at specified time
      * @param time Time in microseconds
@@ -65,6 +79,14 @@ export interface IClip extends Omit<BaseSprite, 'destroy' | 'ready'> {
      * @param renderer The PixiJS renderer to use
      */
     setRenderer?(renderer: any): void;
+    /**
+     * Transition info (optional)
+     */
+    transition?: ITransitionInfo;
+    /**
+     * Audio volume level (0-1)
+     */
+    volume: number;
 }
 /**
  * Optional interface for clips that support HTML media element playback

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

@@ -26,7 +26,8 @@ type AnimateImgType = 'avif' | 'webp' | 'png' | 'gif';
  *
  * @see [Video composition](https://webav-tech.github.io/WebAV/demo/2_1-concat-video)
  */
-export declare class ImageClip extends BaseClip {
+export declare class ImageClip extends BaseClip implements IClip {
+    readonly type = "Image";
     ready: IClip['ready'];
     private _meta;
     /**

package/dist/clips/index.d.ts

@@ -6,3 +6,5 @@ export * from './video-clip';
 export { VideoClip } from './video-clip';
 export type { IMP4ClipOpts } from './video-clip';
 export * from './text-clip';
+export * from './effect-clip';
+export * from './transition-clip';

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

@@ -10,7 +10,7 @@ export interface ITextClipOpts {
     fontSize?: number;
     /**
      * Font family
-     * @default 'Arial'
+     * @default 'Roboto'
      */
     fontFamily?: string;
     /**
@@ -28,7 +28,7 @@ export interface ITextClipOpts {
      * @default '#ffffff'
      */
     fill?: string | number | {
-        type: "gradient";
+        type: 'gradient';
         x0: number;
         y0: number;
         x1: number;
@@ -44,8 +44,8 @@ export interface ITextClipOpts {
     stroke?: string | number | {
         color: string | number;
         width: number;
-        join?: "miter" | "round" | "bevel";
-        cap?: "butt" | "round" | "square";
+        join?: 'miter' | 'round' | 'bevel';
+        cap?: 'butt' | 'round' | 'square';
         miterLimit?: number;
     };
     /**
@@ -57,7 +57,16 @@ export interface ITextClipOpts {
      * Text alignment ('left', 'center', 'right')
      * @default 'left'
      */
-    align?: "left" | "center" | "right";
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Alias for align to match UI property naming
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * Vertical alignment ('top', 'center', 'bottom')
+     * @default 'top'
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom' | 'underline' | 'overline' | 'strikethrough';
     /**
      * Drop shadow configuration
      */
@@ -88,6 +97,16 @@ export interface ITextClipOpts {
      * @default 0
      */
     letterSpacing?: number;
+    /**
+     * Text case transformation
+     * @default 'none'
+     */
+    textCase?: 'none' | 'uppercase' | 'lowercase' | 'title';
+    /**
+     * Text decoration ('none', 'underline', 'line-through', 'overline')
+     * @default 'none'
+     */
+    textDecoration?: 'none' | 'underline' | 'line-through' | 'overline';
 }
 /**
  * Text clip using PixiJS Text for rendering
@@ -108,63 +127,45 @@ export interface ITextClipOpts {
  * textClip.duration = 5e6; // 5 seconds
  */
 export declare class TextClip extends BaseClip {
-    ready: IClip["ready"];
+    readonly type = "Text";
+    ready: IClip['ready'];
     private _meta;
     get meta(): {
         duration: number;
         width: number;
         height: number;
     };
+    get width(): number;
+    set width(v: number);
+    get height(): number;
+    set height(v: number);
+    private _text;
     /**
      * Text content (hybrid JSON structure)
      */
-    text: string;
+    get text(): string;
+    set text(v: string);
     /**
      * Text styling (hybrid JSON structure)
      * Provides direct access to styling properties
      */
-    get style(): {
-        fontSize: number | undefined;
-        fontFamily: string | undefined;
-        fontWeight: string | undefined;
-        fontStyle: string | undefined;
-        color: string | number | {
-            type: "gradient";
-            x0: number;
-            y0: number;
-            x1: number;
-            y1: number;
-            colors: Array<{
-                ratio: number;
-                color: string | number;
-            }>;
-        } | undefined;
-        align: "center" | "left" | "right" | undefined;
-        stroke: {
-            color: string | number;
-            width: number;
-            join: "miter" | "round" | "bevel" | undefined;
-            cap: "round" | "butt" | "square" | undefined;
-            miterLimit: number | undefined;
-        } | {
-            color: string | number;
-            width: number;
-            join?: undefined;
-            cap?: undefined;
-            miterLimit?: undefined;
-        } | undefined;
-        shadow: {
-            color: string | number;
-            alpha: number;
-            blur: number;
-            offsetX: number;
-            offsetY: number;
-        } | undefined;
-        wordWrap: boolean | undefined;
-        wordWrapWidth: number | undefined;
-        lineHeight: number | undefined;
-        letterSpacing: number | undefined;
-    };
+    get style(): any;
+    set style(opts: Partial<ITextClipOpts>);
+    /**
+     * Text alignment proxy for compatibility with UI
+     */
+    get textAlign(): 'left' | 'center' | 'right';
+    set textAlign(v: 'left' | 'center' | 'right');
+    /**
+     * Vertical alignment or decoration proxy
+     */
+    get verticalAlign(): string;
+    set verticalAlign(v: string);
+    /**
+     * Text case proxy
+     */
+    get textCase(): string;
+    set textCase(v: 'none' | 'uppercase' | 'lowercase' | 'title');
     private pixiText;
     private textStyle;
     private renderTexture;
@@ -185,13 +186,13 @@ export declare class TextClip extends BaseClip {
         startTime: number;
         duration: number;
     }>;
-    constructor(text: string, opts?: ITextClipOpts, renderer?: Application["renderer"]);
+    constructor(text: string, opts?: ITextClipOpts, renderer?: Application['renderer']);
     /**
      * Set an external renderer (e.g., from Studio) to avoid creating our own Pixi App
      * This is an optimization for Studio preview
      * Can be called before ready() completes
      */
-    setRenderer(renderer: Application["renderer"]): void;
+    setRenderer(renderer: Application['renderer']): void;
     /**
      * Get the renderer for rendering text to RenderTexture
      * Creates a minimal renderer as fallback if no external renderer is provided
@@ -206,7 +207,7 @@ export declare class TextClip extends BaseClip {
     getTexture(): Promise<Texture | null>;
     tick(_time: number): Promise<{
         video: ImageBitmap;
-        state: "success";
+        state: 'success';
     }>;
     split(_time: number): Promise<[this, this]>;
     addEffect(effect: {

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

@@ -0,0 +1,37 @@
+import { BaseClip } from './base-clip';
+import { IClip } from './iclip';
+import { TransitionKey } from '../transition/glsl/gl-transition';
+export declare class TransitionClip extends BaseClip {
+    readonly type = "Transition";
+    ready: IClip['ready'];
+    private _meta;
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * The transition configuration
+     */
+    transitionEffect: {
+        id: string;
+        key: TransitionKey;
+        name: string;
+    };
+    constructor(transitionKey: TransitionKey);
+    clone(): Promise<this>;
+    tick(_time: number): Promise<{
+        video: ImageBitmap | undefined;
+        state: 'success';
+    }>;
+    split(_time: number): Promise<[this, this]>;
+    toJSON(main?: boolean): any;
+    /**
+     * Create a TransitionClip instance from a JSON object
+     */
+    static fromObject(json: any): Promise<TransitionClip>;
+}

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

@@ -20,7 +20,7 @@ export interface IMP4ClipOpts {
      */
     __unsafe_hardwareAcceleration__?: HardwarePreference;
 }
-type ExtMP4Sample = Omit<MP4Sample, "data"> & {
+type ExtMP4Sample = Omit<MP4Sample, 'data'> & {
     is_idr: boolean;
     deleted?: boolean;
     data: null | Uint8Array;
@@ -32,7 +32,7 @@ type ExtMP4Sample = Omit<MP4Sample, "data"> & {
  *
  * @example
  * // Load video clip asynchronously
- * const videoClip = await VideoClip.fromUrl("clip.mp4", {
+ * const videoClip = await VideoClip.fromUrl('clip.mp4', {
  *   x: 0,
  *   y: 0,
  *   width: 1920,
@@ -58,9 +58,10 @@ type ExtMP4Sample = Omit<MP4Sample, "data"> & {
  * @see [Decode and play video](https://webav-tech.github.io/WebAV/demo/1_1-decode-video)
  */
 export declare class VideoClip extends BaseClip implements IPlaybackCapable {
+    readonly type = "Video";
     private insId;
     private logger;
-    ready: IClip["ready"];
+    ready: IClip['ready'];
     private _meta;
     get meta(): {
         duration: number;
@@ -81,7 +82,6 @@ export declare class VideoClip extends BaseClip implements IPlaybackCapable {
     /** Store video transform and rotation info, currently only restores rotation */
     private parsedMatrix;
     private vfRotater;
-    private volume;
     private videoSamples;
     private audioSamples;
     private videoFrameFinder;
@@ -113,7 +113,7 @@ export declare class VideoClip extends BaseClip implements IPlaybackCapable {
      * @returns Promise that resolves to a video clip
      *
      * @example
-     * const videoClip = await VideoClip.fromUrl("clip.mp4", {
+     * const videoClip = await VideoClip.fromUrl('clip.mp4', {
      *   x: 0,
      *   y: 0,
      *   width: 1920,
@@ -134,7 +134,7 @@ export declare class VideoClip extends BaseClip implements IPlaybackCapable {
      *
      * @see [Remove video green screen background](https://webav-tech.github.io/WebAV/demo/3_2-chromakey-video)
      */
-    tickInterceptor: <T extends Awaited<ReturnType<VideoClip["tick"]>>>(time: number, tickRet: T) => Promise<T>;
+    tickInterceptor: <T extends Awaited<ReturnType<VideoClip['tick']>>>(time: number, tickRet: T) => Promise<T>;
     /**
      * Get image frame and audio data at specified time
      * @param time Time in microseconds
@@ -142,7 +142,7 @@ export declare class VideoClip extends BaseClip implements IPlaybackCapable {
     tick(time: number): Promise<{
         video?: VideoFrame;
         audio: Float32Array[];
-        state: "success" | "done";
+        state: 'success' | 'done';
     }>;
     split(time: number): Promise<[this, this]>;
     addEffect(effect: {