openvideo 0.0.1

package/dist/json-serialization.d.ts

@@ -0,0 +1,222 @@
+import { IClip, ITransitionInfo } from './clips';
+interface BaseClipJSON {
+    id?: string;
+    effects?: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+        targets?: number[];
+    }>;
+    src: string;
+    display: {
+        from: number;
+        to: number;
+    };
+    playbackRate: number;
+    duration: number;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    angle: number;
+    zIndex: number;
+    opacity: number;
+    flip: 'horizontal' | 'vertical' | null;
+    trim?: {
+        from: number;
+        to: number;
+    };
+    transition?: ITransitionInfo;
+    style?: any;
+    animation?: {
+        keyFrames: Record<string, Partial<{
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            angle: number;
+            opacity: number;
+        }>>;
+        opts: {
+            duration: number;
+            delay?: number;
+            iterCount?: number;
+        };
+    };
+    main?: boolean;
+}
+export interface VideoJSON extends BaseClipJSON {
+    type: 'Video';
+    audio?: boolean;
+    volume?: number;
+}
+export interface AudioJSON extends BaseClipJSON {
+    type: 'Audio';
+    loop?: boolean;
+    volume?: number;
+}
+export interface ImageJSON extends BaseClipJSON {
+    type: 'Image';
+}
+export interface TextStyleJSON {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    fontStyle?: string;
+    color?: string | number | {
+        type: 'gradient';
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+        colors: Array<{
+            ratio: number;
+            color: string | number;
+        }>;
+    };
+    align?: 'left' | 'center' | 'right';
+    fontUrl?: string;
+    stroke?: {
+        color: string | number;
+        width: number;
+        join?: 'miter' | 'round' | 'bevel';
+        cap?: 'butt' | 'round' | 'square';
+        miterLimit?: number;
+    };
+    shadow?: {
+        color: string | number;
+        alpha: number;
+        blur: number;
+        distance: number;
+        angle: number;
+    };
+    wordWrap?: boolean;
+    wordWrapWidth?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textCase?: 'none' | 'uppercase' | 'lowercase' | 'title';
+    verticalAlign?: 'top' | 'center' | 'bottom';
+    wordsPerLine?: 'single' | 'multiple';
+}
+export interface TextJSON extends BaseClipJSON {
+    type: 'Text';
+    text: string;
+    style?: TextStyleJSON;
+}
+export interface CaptionColorsJSON {
+    appeared?: string;
+    active?: string;
+    activeFill?: string;
+    background?: string;
+    keyword?: string;
+}
+export interface CaptionPositioningJSON {
+    bottomOffset?: number;
+    videoWidth?: number;
+    videoHeight?: number;
+}
+export interface CaptionDataJSON {
+    words?: Array<{
+        text: string;
+        from: number;
+        to: number;
+        isKeyWord: boolean;
+        paragraphIndex?: number;
+    }>;
+    colors?: CaptionColorsJSON;
+    preserveKeywordColor?: boolean;
+    positioning?: CaptionPositioningJSON;
+}
+export interface CaptionJSON extends BaseClipJSON {
+    type: 'Caption';
+    text: string;
+    style?: TextStyleJSON;
+    caption?: CaptionDataJSON;
+    bottomOffset?: number;
+    words?: Array<{
+        text: string;
+        from: number;
+        to: number;
+        isKeyWord: boolean;
+        paragraphIndex?: number;
+    }>;
+    appearedColor?: string;
+    activeColor?: string;
+    activeFillColor?: string;
+    backgroundColor?: string;
+    isKeyWordColor?: string;
+    preservedColorKeyWord?: boolean;
+    videoWidth?: number;
+    videoHeight?: number;
+    fontUrl?: string;
+    mediaId?: string;
+    wordsPerLine?: 'single' | 'multiple';
+}
+export interface EffectJSON extends BaseClipJSON {
+    type: 'Effect';
+    effect: {
+        id: string;
+        key: string;
+        name: string;
+    };
+}
+export interface TransitionJSON extends BaseClipJSON {
+    type: 'Transition';
+    transitionEffect: {
+        id: string;
+        key: string;
+        name: string;
+    };
+    fromClipId: string | null;
+    toClipId: string | null;
+}
+export interface PlaceholderJSON extends BaseClipJSON {
+    type: 'Placeholder';
+}
+export interface GlobalTransitionJSON {
+    key: string;
+    duration: number;
+    clips: string[];
+}
+export type ClipJSON = VideoJSON | AudioJSON | ImageJSON | TextJSON | CaptionJSON | EffectJSON | TransitionJSON | PlaceholderJSON;
+export interface StudioTrackJSON {
+    id: string;
+    name: string;
+    type: string;
+    clipIds: string[];
+}
+export interface ProjectJSON {
+    tracks?: StudioTrackJSON[];
+    clips: ClipJSON[];
+    transition?: GlobalTransitionJSON[];
+    transitions?: GlobalTransitionJSON[];
+    globalEffects?: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
+    settings?: {
+        width?: number;
+        height?: number;
+        fps?: number;
+        bgColor?: string;
+        videoCodec?: string;
+        bitrate?: number;
+        audio?: boolean;
+        metaDataTags?: Record<string, string>;
+    };
+}
+/**
+ * Serialize a clip to JSON format
+ * @param clip The clip to serialize
+ * @param main Whether this is the main clip (for Compositor)
+ */
+export declare function clipToJSON(clip: IClip, main?: boolean): ClipJSON;
+/**
+ * Deserialize JSON to a clip instance
+ * Uses fromObject static method if available (fabric.js pattern), otherwise falls back to manual construction
+ */
+export declare function jsonToClip(json: ClipJSON): Promise<IClip>;
+export {};

package/dist/mp4-utils/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Quick concatenate multiple MP4 file streams, requires all MP4s to have consistent properties,
+ * properties include (but not limited to): audio/video codec format, resolution, sample rate
+ *
+ * @param streams An array of readable streams containing Uint8Array.
+ * @returns Returns a Promise that resolves to a readable stream containing merged MP4 data.
+ * @throws Will throw error if unable to generate file from streams.
+ *
+ * @example
+ * const streams = [stream1, stream2, stream3];
+ * const resultStream = await fastConcatMP4(streams);
+ */
+export declare function fastConcatMP4(streams: ReadableStream<Uint8Array>[]): Promise<ReadableStream<Uint8Array>>;
+/**
+ * Set correct duration value for fMP4 files generated
+ */
+export declare function fixFMP4Duration(stream: ReadableStream<Uint8Array>): Promise<ReadableStream<Uint8Array>>;
+/**
+ * Video dubbing; mix MP4 with audio file, only re-encode audio, video track unchanged
+ * @param mp4Stream - MP4 stream
+ * @param audio - Audio information
+ * @param audio.stream - Audio data stream
+ * @param audio.volume - Audio volume
+ * @param audio.loop - When audio duration is less than video, whether to loop audio stream
+ * @returns Output mixed audio stream
+ */
+export declare function mixinMP4AndAudio(mp4Stream: ReadableStream<Uint8Array>, audio: {
+    stream: ReadableStream<Uint8Array>;
+    volume: number;
+    loop: boolean;
+}): ReadableStream<Uint8Array<ArrayBufferLike>>;

package/dist/mp4-utils/mp4box-utils.d.ts

@@ -0,0 +1,44 @@
+import { AudioTrackOpts, MP4File, MP4Info, MP4Sample, VideoTrackOpts } from 'wrapbox';
+import { file } from 'opfs-tools';
+interface ExtractedConfig {
+    videoTrackConf?: VideoTrackOpts;
+    videoDecoderConf?: VideoDecoderConfig;
+    audioTrackConf?: AudioTrackOpts;
+    audioDecoderConf?: AudioDecoderConfig;
+}
+/**
+ * Extracts video and audio configurations from an MP4 file.
+ */
+export declare function extractFileConfig(file: MP4File, info: MP4Info): ExtractedConfig;
+/**
+ * Quick parse mp4 file, prioritizing header parsing to save memory.
+ */
+export declare function quickParseMP4File(reader: Awaited<ReturnType<ReturnType<typeof file>['createReader']>>, onReady: (data: {
+    mp4boxFile: MP4File;
+    info: MP4Info;
+}) => void, onSamples: (id: number, sampleType: 'video' | 'audio', samples: MP4Sample[]) => void): Promise<void>;
+/**
+ * Parses transformation matrix to extract scale, rotation, and translation.
+ */
+export declare function parseMatrix(matrix?: Int32Array): {
+    scaleX?: undefined;
+    scaleY?: undefined;
+    rotationRad?: undefined;
+    rotationDeg?: undefined;
+    translateX?: undefined;
+    translateY?: undefined;
+    perspective?: undefined;
+} | {
+    scaleX: number;
+    scaleY: number;
+    rotationRad: number;
+    rotationDeg: number;
+    translateX: number;
+    translateY: number;
+    perspective: number;
+};
+/**
+ * Creates a function to rotate VideoFrames using Canvas.
+ */
+export declare function createVFRotater(width: number, height: number, rotationDeg: number): (vf: VideoFrame | null) => VideoFrame | null;
+export {};

package/dist/mp4-utils/sample-transform.d.ts

@@ -0,0 +1,26 @@
+import { MP4File, MP4Info, MP4Sample } from 'wrapbox';
+export type TransformChunk = {
+    chunkType: 'ready';
+    data: {
+        info: MP4Info;
+        file: MP4File;
+    };
+} | {
+    chunkType: 'samples';
+    data: {
+        id: number;
+        type: 'video' | 'audio';
+        samples: MP4Sample[];
+    };
+};
+/**
+ * Transforms a raw byte stream into an MP4Sample stream using mp4box.js.
+ */
+export declare class SampleTransform {
+    readonly readable: ReadableStream<TransformChunk>;
+    readonly writable: WritableStream<Uint8Array>;
+    private inputBufOffset;
+    private isStreamCancelled;
+    constructor();
+    private initMP4Box;
+}

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

@@ -0,0 +1,183 @@
+import { default as EventEmitter } from '../event-emitter';
+type IRectBaseProps = any;
+interface IAnimationOpts {
+    duration: number;
+    delay?: number;
+    iterCount?: number;
+}
+type TAnimateProps = IRectBaseProps & {
+    opacity: number;
+};
+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<T extends BaseSpriteEvents = BaseSpriteEvents> extends EventEmitter<T> {
+    /**
+     * 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
+     * to: end time (from + duration) in microseconds
+     */
+    display: {
+        from: number;
+        to: number;
+    };
+    /**
+     * Duration of the clip in microseconds
+     * Cannot exceed the duration of the referenced {@link IClip}
+     */
+    duration: number;
+    /**
+     * Playback rate of current clip, 1 means normal playback
+     * **Note**
+     *    1. When setting playbackRate, duration must be actively corrected
+     *    2. Audio uses the simplest interpolation algorithm to change rate, so changing rate will cause pitch variation, for custom algorithm please use {@link Video.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;
+    };
+    constructor();
+    protected _left: number;
+    /**
+     * Left position (x coordinate)
+     */
+    get left(): number;
+    set left(v: number);
+    protected _top: number;
+    /**
+     * Top position (y coordinate)
+     */
+    get top(): number;
+    set top(v: number);
+    protected _width: number;
+    /**
+     * Width
+     */
+    get width(): number;
+    set width(v: number);
+    protected _height: number;
+    /**
+     * Height
+     */
+    get height(): number;
+    set height(v: number);
+    private _angle;
+    /**
+     * Rotation angle in degrees
+     */
+    get angle(): number;
+    set angle(v: number);
+    /**
+     * Center point calculated from position and dimensions
+     */
+    get center(): {
+        x: number;
+        y: number;
+    };
+    private _zIndex;
+    get zIndex(): number;
+    /**
+     * Control layering relationship between clips, clips with smaller zIndex will be occluded
+     */
+    set zIndex(v: number);
+    private _opacity;
+    /**
+     * Opacity (0.0 to 1.0)
+     */
+    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
+     */
+    flip: 'horizontal' | 'vertical' | null;
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+        targets?: number[];
+    }>;
+    /**
+     * Styling properties (e.g., stroke, dropShadow, borderRadius)
+     * This is a generic object to hold visual styles across different clip types
+     */
+    protected _style: any;
+    get style(): any;
+    set style(v: any);
+    private animatKeyFrame;
+    private animatOpts;
+    /**
+     * @see {@link IClip.ready}
+     * For clips, this should be Promise<IClipMeta>, but for BaseSprite it's just Promise<void>
+     */
+    ready: Promise<any>;
+    protected _render(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /**
+     * Add animation to clip, usage reference CSS animation
+     *
+     * @example
+     * sprite.setAnimation(
+     *   {
+     *     '0%': { x: 0, y: 0 },
+     *     '25%': { x: 1200, y: 680 },
+     *     '50%': { x: 1200, y: 0 },
+     *     '75%': { x: 0, y: 680 },
+     *     '100%': { x: 0, y: 0 },
+     *   },
+     *   { duration: 4e6, iterCount: 1 },
+     * );
+     *
+     */
+    setAnimation(keyFrame: TKeyFrameOpts, opts: IAnimationOpts): void;
+    /**
+     * If current sprite has animation set, set sprite's animation properties to state at specified time
+     */
+    animate(time: number): void;
+    /**
+     * Copy current sprite's properties to target
+     *
+     * 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>;
+export {};

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

@@ -0,0 +1,49 @@
+import { Application, Sprite, Texture, Container } from 'pixi.js';
+import { IClip } from '../clips/iclip';
+/**
+ * Update sprite transform based on clip properties
+ * Utility function for updating standalone sprites (e.g., video sprites from HTMLVideoElement)
+ * For sprites managed by PixiSpriteRenderer, use renderer.updateTransforms() instead
+ */
+export declare function updateSpriteTransform(clip: IClip, sprite: Sprite): void;
+/**
+ * Renders video frames using Pixi.js
+ * Uses a canvas-based approach: draws frames to a canvas and creates texture from it
+ * This matches the pattern used in other video rendering libraries
+ */
+export declare class PixiSpriteRenderer {
+    private sprite;
+    private targetContainer;
+    private pixiSprite;
+    private texture;
+    private canvas;
+    private context;
+    private root;
+    private strokeGraphics;
+    private maskGraphics;
+    private shadowGraphics;
+    private shadowContainer;
+    private resolution;
+    private destroyed;
+    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
+     *              (VideoFrames are converted to ImageBitmap in getFrame)
+     */
+    updateFrame(frame: ImageBitmap | Texture | null): Promise<void>;
+    /**
+     * Apply sprite transformations to the Pixi Sprite
+     */
+    private applySpriteTransforms;
+    /**
+     * Apply all styles (stroke, borderRadius, dropShadow) to the sprite
+     */
+    private applyStyle;
+    private applyStroke;
+    private applyShadow;
+    updateTransforms(): void;
+    getSprite(): Sprite | null;
+    getRoot(): Container | null;
+    destroy(): void;
+}

package/dist/studio/history-manager.d.ts

@@ -0,0 +1,46 @@
+import { Difference } from 'microdiff';
+import { ClipJSON, ProjectJSON, StudioTrackJSON } from '../json-serialization';
+export interface HistoryOptions {
+    maxSize?: number;
+}
+export interface HistoryState {
+    clips: Record<string, ClipJSON>;
+    tracks: StudioTrackJSON[];
+    settings: any;
+}
+export declare class HistoryManager {
+    private past;
+    private future;
+    private lastState;
+    private maxSize;
+    constructor(options?: HistoryOptions);
+    private projectToHistoryState;
+    /**
+     * Initialize history with the starting state
+     */
+    init(state: ProjectJSON): void;
+    /**
+     * Push a new state to history. Calculates the diff from the last state.
+     */
+    push(newState: ProjectJSON): void;
+    /**
+     * Undo the last action. Returns the patches and the new target state.
+     */
+    undo(currentState: ProjectJSON): {
+        patches: Difference[];
+        state: HistoryState;
+    } | null;
+    /**
+     * Redo the next action. Returns the patches and the new target state.
+     */
+    redo(currentState: ProjectJSON): {
+        patches: Difference[];
+        state: HistoryState;
+    } | null;
+    /**
+     * Apply patches to an object.
+     */
+    private applyPatches;
+    canUndo(): boolean;
+    canRedo(): boolean;
+}

package/dist/studio/resource-manager.d.ts

@@ -0,0 +1,53 @@
+import { file } from 'opfs-tools';
+export declare enum ResourceStatus {
+    PENDING = "pending",
+    LOADING = "loading",
+    COMPLETED = "completed",
+    FAILED = "failed"
+}
+export interface ResourceItem {
+    url: string;
+    status: ResourceStatus;
+    localFile?: ReturnType<typeof file>;
+    error?: Error;
+}
+/**
+ * ResourceManager handles asset preloading and caching in OPFS.
+ * It ensures that resources are downloaded only once and reused across sessions.
+ */
+export declare class ResourceManager {
+    private resources;
+    private loadingPromises;
+    /**
+     * Preload a batch of URLs in parallel.
+     * @param urls Array of URLs to preload
+     */
+    preload(urls: string[]): Promise<void>;
+    /**
+     * Get a ReadableStream for the given URL, with transparent caching.
+     * @param url URL to fetch
+     */
+    static getReadableStream(url: string): Promise<ReadableStream<Uint8Array>>;
+    /**
+     * Get an ImageBitmap for the given URL, with transparent caching.
+     */
+    static getImageBitmap(url: string): Promise<ImageBitmap>;
+    /**
+     * Load a single resource, using cache if available.
+     * @param url URL to load
+     */
+    loadResource(url: string): Promise<ResourceItem>;
+    /**
+     * Resolve a URL to its local OPFS file if available.
+     * @param url URL to resolve
+     */
+    resolve(url: string): Promise<ReturnType<typeof file> | string>;
+    /**
+     * Get the status of a specific resource.
+     */
+    getStatus(url: string): ResourceItem | undefined;
+    /**
+     * Clear instance state (not OPFS cache).
+     */
+    clear(): void;
+}

package/dist/studio/resource-manager.spec.d.ts

@@ -0,0 +1 @@
+export {};