@designcombo/video 0.0.2 → 0.0.4

package/dist/json-serialization.d.ts

@@ -1,4 +1,4 @@
-import { IClip } from './clips';
+import { IClip, ITransitionInfo } from './clips';
 interface BaseClipJSON {
     id?: string;
     effects?: Array<{
@@ -23,6 +23,11 @@ interface BaseClipJSON {
     zIndex: number;
     opacity: number;
     flip: 'horizontal' | 'vertical' | null;
+    trim?: {
+        from: number;
+        to: number;
+    };
+    transition?: ITransitionInfo;
     animation?: {
         keyFrames: Record<string, Partial<{
             x: number;
@@ -43,6 +48,7 @@ interface BaseClipJSON {
 export interface VideoClipJSON extends BaseClipJSON {
     type: 'Video';
     audio?: boolean;
+    volume?: number;
 }
 export interface AudioClipJSON extends BaseClipJSON {
     type: 'Audio';
@@ -71,8 +77,8 @@ export interface TextStyleJSON {
         color: string;
         alpha: number;
         blur: number;
-        offsetX: number;
-        offsetY: number;
+        distance: number;
+        angle: number;
     };
     wordWrap?: boolean;
     wordWrapWidth?: number;
@@ -129,9 +135,31 @@ export interface CaptionClipJSON extends BaseClipJSON {
     videoHeight?: number;
     fontUrl?: string;
 }
-export type ClipJSON = VideoClipJSON | AudioClipJSON | ImageClipJSON | TextClipJSON | CaptionClipJSON;
+export interface EffectClipJSON extends BaseClipJSON {
+    type: 'Effect';
+    effect: {
+        id: string;
+        key: string;
+        name: string;
+    };
+}
+export interface TransitionJSON {
+    key: string;
+    duration: number;
+    clips: string[];
+}
+export type ClipJSON = VideoClipJSON | AudioClipJSON | ImageClipJSON | TextClipJSON | CaptionClipJSON | EffectClipJSON;
+export interface StudioTrackJSON {
+    id: string;
+    name: string;
+    type: string;
+    clipIds: string[];
+}
 export interface ProjectJSON {
+    tracks?: StudioTrackJSON[];
     clips: ClipJSON[];
+    transition?: TransitionJSON[];
+    transitions?: TransitionJSON[];
     globalEffects?: Array<{
         id: string;
         key: string;

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

@@ -1,3 +1,4 @@
+import { default as EventEmitter } from '../event-emitter';
 type IRectBaseProps = any;
 interface IAnimationOpts {
     duration: number;
@@ -9,12 +10,30 @@ type TAnimateProps = IRectBaseProps & {
 };
 export type TAnimationKeyFrame = Array<[number, Partial<TAnimateProps>]>;
 type TKeyFrameOpts = Partial<Record<`${number}%` | 'from' | 'to', Partial<TAnimateProps>>>;
+export interface BaseSpriteEvents {
+    propsChange: Partial<{
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        angle: number;
+        zIndex: number;
+        opacity: number;
+        volume: number;
+    }>;
+    [key: string]: any;
+    [key: symbol]: any;
+}
 /**
  * Sprite base class
  *
  * @see {@link OffscreenSprite}
  */
-export declare abstract class BaseSprite {
+export declare abstract class BaseSprite extends EventEmitter<BaseSpriteEvents> {
+    /**
+     * 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,22 +55,16 @@ 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;
-    private evtTool;
     /**
-     * Listen to property change events
-     * @example
-     * sprite.on('propsChange', (changedProps) => {})
-     */
-    on: <Type extends "propsChange">(type: Type, listener: {
-        propsChange: (value: Partial<{
-            left: number;
-            top: number;
-            width: number;
-            height: number;
-            angle: number;
-            zIndex: number;
-        }>) => void;
-    }[Type]) => (() => void);
+     * Trim range of the source media in microseconds
+     * from: start time in microseconds
+     * to: end time in microseconds
+     */
+    trim: {
+        from: number;
+        to: number;
+    };
+    constructor();
     private _left;
     /**
      * Left position (x coordinate)
@@ -78,8 +91,7 @@ export declare abstract class BaseSprite {
     set height(v: number);
     private _angle;
     /**
-     * Rotation angle
-     * @see [MDN Canvas rotate](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rotate)
+     * Rotation angle in degrees
      */
     get angle(): number;
     set angle(v: number);
@@ -96,10 +108,18 @@ export declare abstract class BaseSprite {
      * Control layering relationship between clips, clips with smaller zIndex will be occluded
      */
     set zIndex(v: number);
+    private _opacity;
     /**
-     * Opacity
+     * Opacity (0.0 to 1.0)
      */
-    opacity: number;
+    get opacity(): number;
+    set opacity(v: number);
+    private _volume;
+    /**
+     * Audio volume level (0.0 to 1.0)
+     */
+    get volume(): number;
+    set volume(v: number);
     /**
      * Flip clip horizontally or vertically
      */
@@ -118,7 +138,6 @@ export declare abstract class BaseSprite {
      * For clips, this should be Promise<IClipMeta>, but for BaseSprite it's just Promise<void>
      */
     ready: Promise<any>;
-    constructor();
     protected _render(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /**
      * Add animation to clip, usage reference CSS animation
@@ -148,6 +167,10 @@ export declare abstract class BaseSprite {
      * Used for cloning or copying state between {@link OffscreenSprite} instances
      */
     copyStateTo<T extends BaseSprite>(target: T): void;
+    /**
+     * Update multiple properties at once
+     */
+    update(updates: Partial<this>): void;
     protected destroy(): void;
 }
 export declare function linearTimeFn(time: number, keyFrame: TAnimationKeyFrame, opts: Required<IAnimationOpts>): Partial<TAnimateProps>;

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

@@ -28,21 +28,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

@@ -1,4 +1,7 @@
+import { Texture } from 'pixi.js';
+import { ImageClip } from './clips/image-clip';
 import { IClip } from './clips/iclip';
+import { VideoClip } from './clips/video-clip';
 import { ProjectJSON } from './json-serialization';
 import { EffectKey } from './effect/glsl/gl-effect';
 import { default as EventEmitter } from './event-emitter';
@@ -11,18 +14,49 @@ 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;
+    };
+    'clip:updated': {
+        clip: IClip;
+    };
+    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 +79,7 @@ export interface StudioEvents {
  */
 export declare class Studio extends EventEmitter<StudioEvents> {
     private pixiApp;
+    private tracks;
     private clips;
     private spriteRenderers;
     private artboard;
@@ -56,6 +91,7 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     private interactiveClips;
     private playbackElements;
     private videoSprites;
+    private clipListeners;
     private isPlaying;
     private currentTime;
     private playStartTime;
@@ -66,32 +102,89 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     private destroyed;
     private globalEffects;
     private activeGlobalEffect;
-    private postProcessContainer;
+    private currentGlobalEffectSprite;
     private effectFilters;
-    private scale;
+    private transitionRenderers;
+    private transitionSprites;
+    private transFromTexture;
+    private transToTexture;
+    private transBgGraphics;
     private clipsNormalContainer;
     private clipsEffectContainer;
+    private videoTextureCache;
+    private lastFromFrame;
+    private lastToFrame;
     /**
      * Convert hex color string to number
      */
     private hexToNumber;
+    ready: Promise<void>;
     /**
      * Create a new Studio instance
      */
     constructor(opts: IStudioOpts);
     private initPixiApp;
+    /**
+     * Get studio options
+     */
+    getOptions(): IStudioOpts;
     private handleResize;
     private updateArtboardLayout;
     /**
      * Get the canvas element (creates one if not provided)
      */
     getCanvas(): HTMLCanvasElement;
+    /**
+     * Add a Media clip (Video/Image) to the main track with ripple effect
+     */
+    addMedia(clip: VideoClip | ImageClip): Promise<void>;
+    /**
+     * Add a Transition clip at the join where the selected clip starts.
+     */
+    addTransition(transitionKey: string, duration?: number): Promise<void>;
+    findTrackIdByClipId(clipId: string): string | undefined;
     /**
      * Add a clip to the studio
      * @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>;
+    /**
+     * Get a clip by its ID
+     */
+    getClipById(id: string): IClip | undefined;
+    /**
+     * 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[];
+    /**
+     * Get a clip by ID
+     */
+    getClip(id: string): IClip | undefined;
     /**
      * Setup sprite interactivity for click selection
      */
@@ -105,6 +198,31 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * Remove a clip from the studio
      */
     removeClip(clip: IClip): Promise<void>;
+    /**
+     * Remove a clip by its ID
+     */
+    removeClipById(clipId: string): Promise<void>;
+    /**
+     * Delete all currently selected clips
+     */
+    deleteSelected(): Promise<void>;
+    /**
+     * Duplicate all currently selected clips
+     */
+    duplicateSelected(): Promise<void>;
+    /**
+     * Split the selected clip at the given time or current time
+     */
+    splitSelected(splitTime?: number): Promise<void>;
+    /**
+     * Trim the selected clip from a specified time
+     * @param trimFromSeconds - Number of seconds to trim from the start of the clip
+     */
+    trimSelected(trimFromSeconds: number): Promise<void>;
+    /**
+     * Update properties for all currently selected clips
+     */
+    updateSelected(updates: Partial<IClip>): Promise<void>;
     /**
      * Clear all clips from the studio
      */
@@ -138,7 +256,12 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * Check if currently playing
      */
     getIsPlaying(): boolean;
+    /**
+     * Get currently selected clips
+     */
+    getSelectedClips(): IClip[];
     private renderLoop;
+    private getVideoTexture;
     private updateFrame;
     private recalculateMaxDuration;
     /**
@@ -150,6 +273,16 @@ export declare class Studio extends EventEmitter<StudioEvents> {
         duration?: number;
         id?: string;
     }, clips: IClip[]): string;
+    getTrackIndex(clipId: string): number;
+    /**
+     * Get the frame from the previous clip on the same track for transition
+     */
+    getTransitionFromFrame(clip: IClip, timestamp: number): Promise<ImageBitmap | null | Texture>;
+    private getPreviousClipOnTrack;
+    /**
+     * Renders a clip frame onto a transition texture with red background
+     */
+    private renderClipToTransitionTexture;
     removeGlobalEffect(id: string): void;
     clearGlobalEffects(): void;
     private updateActiveGlobalEffect;
@@ -179,6 +312,18 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * This ensures clip properties are always up-to-date during transformations
      */
     private syncSelectedClipsTransforms;
+    /**
+     * Sync sprite transforms back to clip properties
+     */
+    private syncSpriteToClipProperties;
+    /**
+     * Set the selection to a specific list of clips
+     */
+    setSelection(clips: IClip[]): void;
+    /**
+     * Select clips by their IDs
+     */
+    selectClipsByIds(ids: string[]): void;
     /**
      * Deselect the current clip and hide transform controls
      */
@@ -193,4 +338,5 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * @param json The JSON project data
      */
     loadFromJSON(json: ProjectJSON): Promise<void>;
+    private loadClipIntoTrack;
 }

package/dist/transition/fragment.d.ts

@@ -0,0 +1 @@
+export declare const fragment: (glsl: string) => string;