@designcombo/video 0.0.0

package/dist/studio.d.ts

@@ -0,0 +1,142 @@
+import { IClip } from './clips/iclip';
+import { ProjectJSON } from './json-serialization';
+export interface IStudioOpts {
+    width: number;
+    height: number;
+    fps?: number;
+    bgColor?: string;
+    canvas?: HTMLCanvasElement;
+}
+/**
+ * Interactive preview studio for clips with playback controls
+ * Useful for previewing clips before rendering with Compositor
+ *
+ * @example
+ * const studio = new Studio({
+ *   width: 1280,
+ *   height: 720,
+ *   fps: 30,
+ *   bgColor: '#000'
+ * });
+ *
+ * await studio.addClip(spr1);
+ * await studio.addClip(spr2);
+ * studio.play();
+ */
+export declare class Studio {
+    private pixiApp;
+    private clips;
+    private spriteRenderers;
+    private activeTransformer;
+    private selectedClips;
+    private interactiveClips;
+    private playbackElements;
+    private videoSprites;
+    private isPlaying;
+    private currentTime;
+    private playStartTime;
+    private playStartTimestamp;
+    private rafId;
+    private maxDuration;
+    private opts;
+    private destroyed;
+    /**
+     * Convert hex color string to number
+     */
+    private hexToNumber;
+    /**
+     * Create a new Studio instance
+     */
+    constructor(opts: IStudioOpts);
+    private initPixiApp;
+    /**
+     * Get the canvas element (creates one if not provided)
+     */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * 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>;
+    /**
+     * Setup sprite interactivity for click selection
+     */
+    private setupSpriteInteractivity;
+    /**
+     * Setup playback element for a clip (if it supports playback)
+     */
+    private setupPlaybackForClip;
+    private isPlaybackCapable;
+    /**
+     * Remove a clip from the studio
+     */
+    removeClip(clip: IClip): Promise<void>;
+    /**
+     * Clear all clips from the studio
+     */
+    clear(): void;
+    /**
+     * Start playback
+     */
+    play(): Promise<void>;
+    /**
+     * Pause playback
+     */
+    pause(): void;
+    /**
+     * Stop playback and reset to start
+     */
+    stop(): Promise<void>;
+    /**
+     * Seek to a specific time (in microseconds)
+     */
+    seek(time: number): Promise<void>;
+    /**
+     * Get current playback time (in microseconds)
+     */
+    getCurrentTime(): number;
+    /**
+     * Get maximum duration (in microseconds)
+     * Returns 0 if duration is invalid (Infinity, NaN, or <= 0)
+     */
+    getMaxDuration(): number;
+    /**
+     * Check if currently playing
+     */
+    getIsPlaying(): boolean;
+    private renderLoop;
+    private updateFrame;
+    private recalculateMaxDuration;
+    /**
+     * Destroy the studio and clean up resources
+     */
+    destroy(): void;
+    /**
+     * Select a clip and show transform controls
+     */
+    selectClip(clip: IClip, addToSelection?: boolean): void;
+    /**
+     * Create transformer for currently selected clips
+     */
+    private createTransformer;
+    /**
+     * Sync sprite transforms back to clip properties for all selected clips
+     * This ensures clip properties are always up-to-date during transformations
+     */
+    private syncSelectedClipsTransforms;
+    /**
+     * Deselect the current clip and hide transform controls
+     */
+    deselectClip(): void;
+    /**
+     * Export current studio state to JSON
+     * @param sourceUrlMap Optional map of clips to their source URLs (required for proper serialization)
+     */
+    exportToJSON(): ProjectJSON;
+    /**
+     * Load clips from JSON
+     * @param json The JSON project data
+     */
+    loadFromJSON(json: ProjectJSON): Promise<void>;
+}

package/dist/transfomer/parts/handle.d.ts

@@ -0,0 +1,17 @@
+import { Graphics, Point } from 'pixi.js';
+export type Side = 'ml' | 'mr' | 'mt' | 'mb';
+type Corner = 'tl' | 'tr' | 'bl' | 'br' | 'rot';
+export type HandleKind = Corner | Side;
+interface Callbacks {
+    beginDrag: (handle: HandleKind, start: Point) => void;
+    updateDrag: (handle: HandleKind, pos: Point) => void;
+    endDrag: () => void;
+}
+export declare class Handle extends Graphics {
+    #private;
+    private handle;
+    cursor: string;
+    private callbacks;
+    constructor(handle: HandleKind, cursor: string, callbacks: Callbacks);
+}
+export {};

package/dist/transfomer/parts/wireframe.d.ts

@@ -0,0 +1,5 @@
+import { Graphics, Rectangle } from 'pixi.js';
+export declare class Wireframe extends Graphics {
+    constructor();
+    draw(bounds: Rectangle): void;
+}

package/dist/transfomer/transformer.d.ts

@@ -0,0 +1,21 @@
+import { Container, Point } from 'pixi.js';
+import { Wireframe } from './parts/wireframe';
+import { HandleKind } from './parts/handle';
+export declare class Transformer extends Container {
+    #private;
+    group: Container[];
+    wireframe: Wireframe;
+    isDragging: boolean;
+    lastPointer: Point;
+    activeHandle: HandleKind | null;
+    opts: {
+        group: Container[];
+        centeredScaling?: boolean;
+        clip?: any;
+    };
+    constructor(opts: {
+        group: Container[];
+        centeredScaling?: boolean;
+        clip?: any;
+    });
+}

package/dist/utils/audio.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Concatenate multiple Float32Arrays, commonly used for merging PCM data
+ */
+export declare function concatFloat32Array(buffers: Float32Array[]): Float32Array;
+/**
+ * Merge small PCM fragments into a large fragment
+ * @param fragments Small PCM fragments, where each element is raw PCM data from different channels
+ */
+export declare function concatPCMFragments(fragments: Float32Array[][]): Float32Array[];
+/**
+ * Utility function to extract PCM data from AudioData
+ */
+export declare function extractPCM4AudioData(audioData: AudioData): Float32Array[];
+/**
+ * Extract PCM from AudioBuffer
+ */
+export declare function extractPCM4AudioBuffer(audioBuffer: AudioBuffer): Float32Array[];
+/**
+ * Adjust audio data volume
+ * @param audioData - Audio object to adjust
+ * @param volume - Volume adjustment coefficient (0.0 - 1.0)
+ * @returns New audio data with adjusted volume
+ */
+export declare function adjustAudioDataVolume(audioData: AudioData, volume: number): AudioData;
+/**
+ * Mix PCM data from dual-channel audio tracks and interleave multiple channels into a single Float32Array output
+ * @param audios - A 2D array where each element is a Float32Array array representing PCM data from an audio stream.
+ * The first element of each Float32Array array is left channel data, and the second element (if present) is right channel data.
+ * If only left channel data exists, the right channel will reuse the left channel data.
+ *
+ * @returns Returns a Float32Array with left and right channels interleaved.
+ *
+ * @example
+ *
+ * const audios = [
+ *   [new Float32Array([0.1, 0.2, 0.3]), new Float32Array([0.4, 0.5, 0.6])],
+ *   [new Float32Array([0.7, 0.8, 0.9])],
+ * ];
+ * const mixed = mixinPCM(audios);
+ */
+export declare function mixinPCM(audios: Float32Array[][]): Float32Array;
+/**
+ * Resample PCM audio data.
+ *
+ * @param pcmData - A Float32Array array where each element represents PCM data from one channel.
+ * @param curRate - Current sample rate.
+ * @param target - Target parameters object.
+ * @param target.rate - Target sample rate.
+ * @param target.chanCount - Target channel count.
+ *
+ * @returns Returns a Promise that resolves to a Float32Array array where each element represents PCM data from one channel after resampling.
+ *
+ * @example
+ *
+ * const pcmData = [new Float32Array([0.1, 0.2, 0.3]), new Float32Array([0.4, 0.5, 0.6])];
+ * const curRate = 44100;
+ * const target = { rate: 48000, chanCount: 2 };
+ * const resampled = await audioResample(pcmData, curRate, target);
+ */
+export declare function audioResample(pcmData: Float32Array[], curRate: number, target: {
+    rate: number;
+    chanCount: number;
+}): Promise<Float32Array[]>;
+/**
+ * Extract a circular slice from the given Float32Array, looping from 0 when exceeding boundaries
+ *
+ * Mainly used for slicing PCM data to implement looped playback
+ *
+ * @param data - Input Float32Array.
+ * @param start - Start index of the slice.
+ * @param end - End index of the slice.
+ * @returns Returns a new Float32Array containing data from start to end.
+ *
+ * @example
+ * const data = new Float32Array([0, 1, 2, 3, 4, 5]);
+ * ringSliceFloat32Array(data, 4, 6); // => Float32Array [4, 5, 0]
+ */
+export declare function ringSliceFloat32Array(data: Float32Array, start: number, end: number): Float32Array;
+/**
+ * Change PCM data playback rate, where 1 means normal playback, 0.5 means half speed, and 2 means double speed
+ */
+export declare function changePCMPlaybackRate(pcmData: Float32Array, playbackRate: number): Float32Array<ArrayBuffer>;

package/dist/utils/chromakey.d.ts

@@ -0,0 +1,24 @@
+interface IChromakeyOpts {
+    keyColor: [number, number, number];
+    similarity: number;
+    smoothness: number;
+    spill: number;
+}
+type ImgSource = HTMLVideoElement | HTMLCanvasElement | HTMLImageElement | ImageBitmap | OffscreenCanvas | VideoFrame;
+/**
+ * Green screen keying
+ * keyColor Background color to remove, if not provided will use first pixel
+ * similarity Background color similarity threshold, too small may retain background, too large may remove more non-background pixels
+ * smoothness Smoothness; too small may cause jagged edges, too large causes overall transparency
+ * spill Saturation; too small may retain green spill, too large causes image to become grayscale
+ * @param opts: {
+ *   keyColor?: [r, g, b]
+ *   similarity: number
+ *   smoothness: number
+ *   spill: number
+ * }
+ */
+export declare const createChromakey: (opts: Omit<IChromakeyOpts, "keyColor"> & {
+    keyColor?: [number, number, number];
+}) => (imgSource: ImgSource) => Promise<ImageBitmap | VideoFrame>;
+export {};

package/dist/utils/color.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Convert color string or number to PixiJS color number
+ */
+export declare function parseColor(color: string | number | undefined): number | undefined;

package/dist/utils/common.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Pause the current execution environment for a period of time.
+ * @param time - Pause duration in milliseconds.
+ * @example
+ * await sleep(1000);  // Pause for 1 second
+ */
+export declare function sleep(time: number): Promise<void>;

package/dist/utils/dom.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Create a new HTML element
+ * @param tagName - Tag name of the element to create
+ * @returns Newly created HTML element
+ */
+export declare function createEl(tagName: string): HTMLElement;
+/**
+ * Render text as an image
+ * @param text - Text to render
+ * @param cssText - CSS styles to apply to the text
+ * @returns Rendered image element
+ */
+export declare function renderTxt2Img(text: string, cssText: string, opts?: {
+    font?: {
+        name: string;
+        url: string;
+    };
+    onCreated?: (el: HTMLElement) => void;
+}): Promise<HTMLImageElement>;
+/**
+ * Render text as {@link ImageBitmap} for creating {@link ImageClip}
+ * @param text - Text to render
+ * @param cssText - CSS styles to apply to the text
+ * @param opts - Options
+ * @param opts.font - Custom font
+ * @param opts.onCreated - Callback after creation
+ *
+ * @example
+ * new ImageClip(
+ *   await renderTxt2ImgBitmap(
+ *     'Watermark',
+ *    `font-size:40px; color: white; text-shadow: 2px 2px 6px red; font-family: CustomFont;`,
+ *    {
+ *      font: {
+ *        name: 'CustomFont',
+ *        url: '/CustomFont.ttf',
+ *      },
+ *    },
+ *   )
+ * )
+ */
+export declare function renderTxt2ImgBitmap(text: string, cssText: string, opts?: {
+    font?: {
+        name: string;
+        url: string;
+    };
+    onCreated?: (el: HTMLElement) => void;
+}): Promise<ImageBitmap>;

package/dist/utils/fonts.d.ts

@@ -0,0 +1,16 @@
+export interface IFont {
+    name: string;
+    url: string;
+}
+export declare class FontManager {
+    private static instance;
+    private fonts;
+    private constructor();
+    static getInstance(): FontManager;
+    addFont(font: IFont): Promise<void>;
+    loadFonts(fonts: IFont[]): Promise<void>;
+    removeFont(fontName: string): void;
+    clear(): void;
+    getLoadedFonts(): string[];
+}
+export declare const fontManager: FontManager;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './audio';
+export * from './chromakey';
+export * from './common';
+export * from './dom';
+export * from './video';

package/dist/utils/srt-parser.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Parse SRT subtitle format
+ * Returns array of subtitle segments with start, end, and text
+ */
+export interface SubtitleSegment {
+    start: number;
+    end: number;
+    text: string;
+}
+/**
+ * Parse SRT subtitle content into segments
+ * @param srt SRT file content as string
+ * @returns Array of subtitle segments
+ */
+export declare function parseSrt(srt: string): SubtitleSegment[];

package/dist/utils/video.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Decode image stream, return an array of video frames.
+ *
+ * @param stream - Readable stream containing image data.
+ * @param type - MIME type of the image, e.g. 'image/jpeg'.
+ *
+ * @returns Returns a Promise that resolves to an array of {@link VideoFrame} after decoding completes.
+ *
+ * @see [Decode animated image](https://webav-tech.github.io/WebAV/demo/1_3-decode-image)
+ *
+ * @example
+ *
+ * const frames = await decodeImg(
+ *   (await fetch('<gif url>')).body!,
+ *   `image/gif`,
+ * );
+ */
+export declare function decodeImg(stream: ReadableStream<Uint8Array>, type: string): Promise<VideoFrame[]>;