@codingfactory/mediables-vue 2.0.1

package/dist/video-engine/adapters/MediablesCompositionAdapter.d.ts

@@ -0,0 +1,56 @@
+import * as core from '../core/mediables-engine.js';
+import type { VideoRecipe, AppliedFilter } from '../../types/video';
+import { TimelineResolvedFrame } from '../types';
+export declare class MediablesCompositionAdapter {
+    readonly composition: core.Composition;
+    private player;
+    private clips;
+    private clipTimelineStart;
+    private initPromise;
+    private fitMode;
+    private fps;
+    private resizeObserver;
+    private filterCache;
+    constructor(width?: number, height?: number, fps?: number, options?: {
+        fitMode?: 'none' | 'contain' | 'cover';
+    });
+    private isDebug;
+    private dbg;
+    private setupEventHandlers;
+    private onPlay;
+    private onPause;
+    private onFrameUpdate;
+    attachPlayer(element: HTMLDivElement): Promise<void>;
+    private setupResponsiveScaling;
+    loadFromRecipe(recipe: VideoRecipe): Promise<void>;
+    private addTimelineClip;
+    private addTextOverlay;
+    private applyFiltersToClip;
+    private updateExistingFilterInstance;
+    setClipFilters(clipId: string, filters: AppliedFilter[]): void;
+    private createPixiFilter;
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    seekToTime(seconds: number): void;
+    get currentFrame(): number;
+    get currentTime(): string;
+    get currentTimeInSeconds(): number;
+    get duration(): number;
+    get durationInSeconds(): number;
+    export(options?: {
+        fps?: number;
+        onProgress?: (percent: number) => void;
+    }): Promise<Blob>;
+    destroy(): void;
+    private animationFrameId;
+    private startRenderLoop;
+    private stopRenderLoop;
+    private lastRenderedFrame;
+    moveClip(clipId: string, newTimelineStart: number): void;
+    setFitMode(mode: 'none' | 'contain' | 'cover'): void;
+    private applyFitModeToClips;
+    private applyFitToClip;
+    trimClip(clipId: string, sourceIn: number, sourceOut: number): void;
+    resolveSourceFrame(timelineFrame: number): TimelineResolvedFrame;
+}

package/dist/video-engine/adapters/PixiFrameExporter.d.ts

@@ -0,0 +1,52 @@
+/**
+ * PIXI Frame-by-Frame Video Exporter
+ *
+ * Captures each frame from the PIXI canvas (which already has filters applied)
+ * and encodes them with WebCodecs + mp4-muxer for exact 1:1 preview-to-export parity.
+ *
+ * Audio is extracted from the source video, trimmed to match, and muxed alongside
+ * the video frames. If the source has no audio or AudioEncoder is unavailable,
+ * the export proceeds silently (video-only).
+ */
+export interface PixiExportOptions {
+    /** Width of the output video in pixels */
+    width: number;
+    /** Height of the output video in pixels */
+    height: number;
+    /** Frames per second */
+    fps: number;
+    /** Video bitrate in bps (default: 5 Mbps) */
+    bitrate?: number;
+    /** Audio bitrate in bps (default: 128 kbps) */
+    audioBitrate?: number;
+    /** Trim start in seconds (source time, default: 0) */
+    trimStart?: number;
+    /** Trim end in seconds (source time, default: full duration) */
+    trimEnd?: number;
+    /** Source video URL (needed to extract audio) */
+    sourceUrl?: string;
+    /** Progress callback (0-100) */
+    onProgress?: (percent: number) => void;
+    /** Abort signal for cancellation */
+    signal?: AbortSignal;
+}
+export interface PixiFrameProvider {
+    /**
+     * Seek the underlying video to `timeSec`, render through PIXI with filters,
+     * and return the PIXI canvas with the rendered frame.
+     */
+    captureFrameAt(timeSec: number): Promise<HTMLCanvasElement | null>;
+    /** Video duration in seconds (reactive ref) */
+    duration: {
+        value: number;
+    };
+}
+/**
+ * Check if the browser supports the required WebCodecs APIs.
+ */
+export declare function isWebCodecsSupported(): boolean;
+/**
+ * Export a video by capturing frames from a PIXI preview (with filters applied)
+ * and encoding them into an MP4 file, with audio from the source.
+ */
+export declare function exportWithPixiFrames(provider: PixiFrameProvider, options: PixiExportOptions): Promise<Blob>;

package/dist/video-engine/adapters/RenderQueue.d.ts

@@ -0,0 +1,119 @@
+/**
+ * RenderQueue - Manages multiple export jobs with concurrency control
+ * Tracks job status, handles retries, and maintains export history
+ */
+import { EventEmitter } from '../utils/EventEmitter';
+import { type ExportOptions, type ExportResult } from './ExportManager';
+import type { Composition } from '../core/mediables-engine.js';
+export interface RenderJob {
+    id: string;
+    name: string;
+    composition: Composition;
+    options: ExportOptions;
+    status: 'pending' | 'processing' | 'completed' | 'failed' | 'canceled';
+    progress: number;
+    result?: ExportResult;
+    error?: Error;
+    createdAt: Date;
+    startedAt?: Date;
+    completedAt?: Date;
+    retryCount: number;
+    maxRetries: number;
+}
+export interface QueueOptions {
+    maxConcurrent?: number;
+    maxRetries?: number;
+    retryDelay?: number;
+    autoStart?: boolean;
+    persistHistory?: boolean;
+    maxHistorySize?: number;
+}
+export declare class RenderQueue extends EventEmitter {
+    private jobs;
+    private queue;
+    private activeJobs;
+    private history;
+    private options;
+    private isRunning;
+    private localStorage;
+    constructor(options?: QueueOptions);
+    /**
+     * Add a job to the queue
+     */
+    addJob(name: string, composition: Composition, options?: ExportOptions): string;
+    /**
+     * Start processing the queue
+     */
+    start(): void;
+    /**
+     * Stop processing the queue
+     */
+    stop(): void;
+    /**
+     * Process next jobs in the queue
+     */
+    private processNextJobs;
+    /**
+     * Process a single job
+     */
+    private processJob;
+    /**
+     * Cancel a specific job
+     */
+    cancelJob(jobId: string): boolean;
+    /**
+     * Cancel all pending jobs
+     */
+    cancelAll(): void;
+    /**
+     * Get job by ID
+     */
+    getJob(jobId: string): RenderJob | undefined;
+    /**
+     * Get all jobs
+     */
+    getAllJobs(): RenderJob[];
+    /**
+     * Get queue status
+     */
+    getStatus(): {
+        isRunning: boolean;
+        pendingCount: number;
+        activeCount: number;
+        completedCount: number;
+        failedCount: number;
+    };
+    /**
+     * Add job to history
+     */
+    private addToHistory;
+    /**
+     * Get export history
+     */
+    getHistory(): RenderJob[];
+    /**
+     * Clear export history
+     */
+    clearHistory(): void;
+    /**
+     * Save history to localStorage
+     */
+    private saveHistory;
+    /**
+     * Load history from localStorage
+     */
+    private loadHistory;
+    /**
+     * Generate unique job ID
+     */
+    private generateJobId;
+    /**
+     * Get queue statistics
+     */
+    getStatistics(): {
+        totalJobs: number;
+        avgExportTime: number;
+        successRate: number;
+        totalExportSize: number;
+    };
+}

package/dist/video-engine/adapters/TextOverlayManager.d.ts

@@ -0,0 +1,93 @@
+import * as core from '../core/mediables-engine.js';
+type Composition = core.Composition;
+type TextClip = core.TextClip;
+export interface TextOverlayConfig {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    color?: string;
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | {
+        x: number | string;
+        y: number | string;
+    };
+    startTime?: number;
+    duration?: number;
+    animation?: {
+        type: 'fade-in' | 'fade-out' | 'rotate' | 'scale' | 'slide' | 'typewriter' | 'custom';
+        duration?: number;
+        easing?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
+        rotation?: {
+            from: number;
+            to: number;
+        };
+        scale?: {
+            from: number;
+            to: number;
+        };
+        translate?: {
+            fromX: number;
+            toX: number;
+            fromY: number;
+            toY: number;
+        };
+    };
+    textAlign?: 'left' | 'center' | 'right';
+    textBaseline?: 'top' | 'middle' | 'bottom';
+}
+export declare class TextOverlayManager {
+    private composition;
+    private textClips;
+    private fonts;
+    private nextId;
+    constructor(composition: Composition);
+    private initializeDefaultFonts;
+    /**
+     * Load a custom web font
+     */
+    loadWebFont(name: string, url: string, family: string, weight?: string): Promise<void>;
+    /**
+     * Load a local font
+     */
+    loadLocalFont(name: string, family: string, weight?: string): void;
+    /**
+     * Add a text overlay to the composition
+     */
+    addTextOverlay(config: TextOverlayConfig): Promise<string>;
+    /**
+     * Apply animation to text clip configuration
+     */
+    private applyAnimation;
+    /**
+     * Update an existing text overlay
+     */
+    updateTextOverlay(id: string, config: Partial<TextOverlayConfig>): Promise<void>;
+    /**
+     * Remove a text overlay
+     */
+    removeTextOverlay(id: string): Promise<void>;
+    /**
+     * Get all text overlays
+     */
+    getTextOverlays(): Map<string, TextClip>;
+    /**
+     * Clear all text overlays
+     */
+    clearAllTextOverlays(): Promise<void>;
+    /**
+     * Get all text overlays as an array (for VideoEditorModal compatibility)
+     */
+    getOverlays(): Array<{
+        id: string;
+        config: TextOverlayConfig;
+    }>;
+    /**
+     * Create animated captions from transcript
+     */
+    addCaptions(transcript: any, // Would be core.Transcript type
+    preset?: 'classic' | 'cascade' | 'guinea' | 'solar' | 'spotlight' | 'whisper', position?: {
+        x?: string | number;
+        y?: string | number;
+    }): Promise<void>;
+}
+export {};

package/dist/video-engine/adapters/TimelineAdapter.d.ts

@@ -0,0 +1,58 @@
+import * as core from '../core/mediables-engine.js';
+import type { TimelineClip, VideoRecipe } from '../../types/video';
+/**
+ * Adapter for converting between mediables timeline format and video engine clips
+ * Handles frame/second conversion and clip transformations
+ */
+export declare class TimelineAdapter {
+    private fps;
+    constructor(fps?: number);
+    /**
+     * Update the working FPS
+     */
+    setFps(fps: number): void;
+    /**
+     * Convert mediables timeline clip to video engine clip
+     */
+    convertTimelineClipToEngine(clip: TimelineClip, source: core.VideoSource): Promise<core.VideoClip>;
+    /**
+     * Convert video engine clip back to mediables timeline format
+     */
+    convertEngineClipToTimeline(engineClip: core.VideoClip, id: string, url: string): TimelineClip;
+    /**
+     * Convert entire recipe timeline to video engine composition
+     */
+    buildCompositionFromRecipe(recipe: VideoRecipe, composition: core.Composition): Promise<void>;
+    /**
+     * Extract timeline from composition
+     */
+    extractTimelineFromComposition(composition: core.Composition): TimelineClip[];
+    /**
+     * Apply transformations to a clip
+     */
+    private applyTransformations;
+    /**
+     * Convert seconds to frames
+     */
+    secondsToFrames(seconds: number): number;
+    /**
+     * Convert frames to seconds
+     */
+    framesToSeconds(frames: number): number;
+    /**
+     * Get human-readable time from frames
+     */
+    framesToTime(frames: number): string;
+    /**
+     * Format seconds to HH:MM:SS format
+     */
+    formatTime(seconds: number): string;
+    /**
+     * Parse HH:MM:SS or MM:SS format to seconds
+     */
+    parseTime(timeString: string): number;
+    /**
+     * Parse time string to frames
+     */
+    timeToFrames(time: string): number;
+}

package/dist/video-engine/adapters/TransitionManager.d.ts

@@ -0,0 +1,76 @@
+import * as core from '../core/mediables-engine.js';
+type Composition = core.Composition;
+type Clip = core.Clip;
+export type TransitionType = 'fade' | 'dissolve' | 'wipe-left' | 'wipe-right' | 'wipe-up' | 'wipe-down' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'cross-fade' | 'dip-to-black' | 'dip-to-white';
+export type EasingType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
+export interface TransitionConfig {
+    type: TransitionType;
+    duration: number;
+    easing?: EasingType;
+}
+export interface TransitionPreview {
+    type: TransitionType;
+    name: string;
+    description: string;
+    thumbnail?: string;
+}
+export declare class TransitionManager {
+    private composition;
+    private transitions;
+    private nextId;
+    static readonly TRANSITIONS: TransitionPreview[];
+    constructor(composition: Composition);
+    /**
+     * Apply a transition between two clips
+     */
+    applyTransition(fromClip: Clip, toClip: Clip, config: TransitionConfig): Promise<string>;
+    /**
+     * Apply fade transition
+     */
+    private applyFadeTransition;
+    /**
+     * Apply cross-fade/dissolve transition
+     */
+    private applyCrossFadeTransition;
+    /**
+     * Apply wipe transition
+     */
+    private applyWipeTransition;
+    /**
+     * Apply slide transition
+     */
+    private applySlideTransition;
+    /**
+     * Apply zoom transition
+     */
+    private applyZoomTransition;
+    /**
+     * Apply dip transition (fade through color)
+     */
+    private applyDipTransition;
+    /**
+     * Find the track containing a clip
+     */
+    private findTrackForClip;
+    /**
+     * Remove a transition
+     */
+    removeTransition(id: string): void;
+    /**
+     * Get all transitions
+     */
+    getTransitions(): Map<string, TransitionConfig>;
+    /**
+     * Get available transition types
+     */
+    static getAvailableTransitions(): TransitionPreview[];
+    /**
+     * Preview a transition (returns a description)
+     */
+    static previewTransition(type: TransitionType): TransitionPreview | undefined;
+    /**
+     * Type guard to check if a clip is a VideoClip
+     */
+    private isVideoClip;
+}
+export {};

package/dist/video-engine/adapters/WebCodecsExport.d.ts

@@ -0,0 +1,36 @@
+/**
+ * WebCodecs-based video export using VideoFrame API
+ * WebCodecs is the only supported client-side export path.
+ */
+import { MediablesCompositionAdapter } from './MediablesCompositionAdapter';
+interface WebCodecsExportOptions {
+    width: number;
+    height: number;
+    fps: number;
+    bitrate?: number;
+    onProgress?: (percent: number) => void;
+    signal?: AbortSignal;
+}
+export declare class WebCodecsExporter {
+    private adapter;
+    private composition;
+    private videoEncoder;
+    private muxer;
+    private tempContainerEl;
+    constructor(adapter: MediablesCompositionAdapter);
+    private isDebug;
+    private dbg;
+    /**
+     * Check if WebCodecs is supported
+     */
+    static isSupported(): boolean;
+    /**
+     * Export video using WebCodecs VideoEncoder
+     */
+    export(options: WebCodecsExportOptions): Promise<Blob>;
+    /**
+     * Clean up resources
+     */
+    dispose(): void;
+}
+export {};

package/dist/video-engine/compositions/examples/example.d.ts

@@ -0,0 +1,2 @@
+import { Composition } from '../../core/mediables-engine.js';
+export declare const composition: Composition;

package/dist/video-engine/filters/CSSFilterSystem.d.ts

@@ -0,0 +1,213 @@
+/**
+ * Comprehensive CSS Filter System for Video
+ * Replaces PIXI filters with native CSS filters for better performance and reliability
+ */
+export interface CSSFilterDefinition {
+    id: string;
+    name: string;
+    category: 'color' | 'blur' | 'distort' | 'stylize' | 'light' | 'adjust';
+    cssFunction: (params: any) => string;
+    defaultParams: Record<string, any>;
+    controls: FilterControl[];
+    svgFilter?: (params: any) => string;
+}
+export interface FilterControl {
+    id: string;
+    type: 'slider' | 'color' | 'select' | 'checkbox';
+    label: string;
+    property: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    default: any;
+    unit?: string;
+}
+export interface AppliedCSSFilter {
+    id: string;
+    filterId: string;
+    params: Record<string, any>;
+    enabled: boolean;
+}
+/**
+ * Comprehensive CSS Filter Definitions
+ * Maps all common video effects to CSS/SVG filters
+ */
+export declare const CSS_FILTER_DEFINITIONS: Record<string, CSSFilterDefinition>;
+/**
+ * CSS Filter Manager - Handles filter application and combination
+ */
+export declare class CSSFilterManager {
+    private filters;
+    private svgContainer;
+    private instanceCounter;
+    constructor();
+    /**
+     * Initialize SVG container for complex filters
+     */
+    private initSVGContainer;
+    /**
+     * Add or update a filter
+     */
+    addFilter(filterId: string, params?: Record<string, any>): string;
+    /**
+     * Update filter parameters
+     */
+    updateFilter(instanceId: string, params: Record<string, any>): void;
+    /**
+     * Remove a filter
+     */
+    removeFilter(instanceId: string): void;
+    /**
+     * Generate combined CSS filter string
+     */
+    getCSSFilterString(): string;
+    /**
+     * Apply filters to a canvas context
+     */
+    applyToContext(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Clear all filters
+     */
+    clear(): void;
+    /**
+     * Get all active filters
+     */
+    getFilters(): AppliedCSSFilter[];
+    /**
+     * Enable/disable a filter
+     */
+    toggleFilter(instanceId: string, enabled?: boolean): void;
+    /**
+     * Create a preset from current filters
+     */
+    createPreset(): AppliedCSSFilter[];
+    /**
+     * Load a preset
+     */
+    loadPreset(preset: AppliedCSSFilter[]): void;
+}
+/**
+ * Predefined filter presets for quick application
+ */
+export declare const CSS_FILTER_PRESETS: {
+    warmSunset: {
+        filterId: string;
+        params: {
+            value: number;
+        };
+    }[];
+    coolMorning: {
+        filterId: string;
+        params: {
+            value: number;
+        };
+    }[];
+    hollywood: ({
+        filterId: string;
+        params: {
+            value: number;
+            color?: undefined;
+            intensity?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            color: string;
+            intensity: number;
+            value?: undefined;
+        };
+    })[];
+    valencia: ({
+        filterId: string;
+        params: {
+            amount: number;
+            value?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            value: number;
+            amount?: undefined;
+        };
+    })[];
+    nashville: ({
+        filterId: string;
+        params: {
+            amount: number;
+            value?: undefined;
+            degrees?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            value: number;
+            amount?: undefined;
+            degrees?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            degrees: number;
+            amount?: undefined;
+            value?: undefined;
+        };
+    })[];
+    oldFilm: ({
+        filterId: string;
+        params: {
+            amount: number;
+            value?: undefined;
+            radius?: undefined;
+            darkness?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            value: number;
+            amount?: undefined;
+            radius?: undefined;
+            darkness?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            radius: number;
+            darkness: number;
+            amount?: undefined;
+            value?: undefined;
+        };
+    })[];
+    cyberpunk: ({
+        filterId: string;
+        params: {
+            value: number;
+            color?: undefined;
+            intensity?: undefined;
+            offset?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            color: string;
+            intensity: number;
+            value?: undefined;
+            offset?: undefined;
+        };
+    } | {
+        filterId: string;
+        params: {
+            offset: number;
+            value?: undefined;
+            color?: undefined;
+            intensity?: undefined;
+        };
+    })[];
+};
+/**
+ * Export all filter IDs for UI
+ */
+export declare const VIDEO_CSS_FILTER_IDS: string[];
+/**
+ * Helper to convert PIXI filter names to CSS filter IDs
+ */
+export declare const PIXI_TO_CSS_FILTER_MAP: Record<string, string | null>;