@codingfactory/mediables-vue 2.0.1

package/dist/video-engine/VideoEngine.d.ts

@@ -0,0 +1,267 @@
+/**
+ * Main VideoEngine class
+ * Provides high-level API for video editing operations
+ */
+import type { VideoComposition, VideoClip, TextOverlay, Transition, Filter, ExportOptions, ExportResult, EngineState, EngineOptions, AudioTrack, BrowserCapabilities, PerformanceMetrics, PerformanceBottleneck, OptimizationSuggestion, MemoryUsage, EngineEvent } from './types';
+interface FilterDefinition {
+    type: string;
+    name: string;
+    min: number;
+    max: number;
+    default: number;
+}
+interface TransitionDefinition {
+    type: string;
+    name: string;
+}
+export default class VideoEngine {
+    private adapter;
+    private composition;
+    private state;
+    private lastError;
+    private eventListeners;
+    private options;
+    private currentTime;
+    private isPlaying;
+    private playbackRate;
+    private previewCanvas;
+    private exportProgress;
+    private memoryUsage;
+    constructor();
+    /**
+     * Initialize the video engine
+     */
+    initialize(options?: EngineOptions): Promise<void>;
+    /**
+     * Destroy the engine and cleanup resources
+     */
+    destroy(): void;
+    /**
+     * Reset the engine to initial state
+     */
+    reset(): Promise<void>;
+    /**
+     * Load a composition
+     */
+    loadComposition(composition: VideoComposition): Promise<void>;
+    /**
+     * Get current composition
+     */
+    getComposition(): VideoComposition | null;
+    /**
+     * Clear current composition
+     */
+    clearComposition(): Promise<void>;
+    /**
+     * Save current composition
+     */
+    saveComposition(): VideoComposition;
+    /**
+     * Play video
+     */
+    play(): void;
+    /**
+     * Pause video
+     */
+    pause(): void;
+    /**
+     * Stop video
+     */
+    stop(): void;
+    /**
+     * Seek to time
+     */
+    seek(time: number): Promise<void>;
+    /**
+     * Get current time
+     */
+    getCurrentTime(): number;
+    /**
+     * Get duration
+     */
+    getDuration(): number;
+    /**
+     * Get engine state
+     */
+    getState(): EngineState;
+    /**
+     * Set playback rate
+     */
+    setPlaybackRate(rate: number): void;
+    /**
+     * Add a clip
+     */
+    addClip(clip: VideoClip): Promise<void>;
+    /**
+     * Remove a clip
+     */
+    removeClip(clipId: string): Promise<void>;
+    /**
+     * Update a clip
+     */
+    updateClip(clipId: string, updates: Partial<VideoClip>): Promise<void>;
+    /**
+     * Move a clip
+     */
+    moveClip(clipId: string, newStartTime: number, newTrack?: number): Promise<void>;
+    /**
+     * Trim a clip
+     */
+    trimClip(clipId: string, inPoint: number, outPoint: number): Promise<void>;
+    /**
+     * Split a clip
+     */
+    splitClip(clipId: string, splitTime: number): Promise<[VideoClip, VideoClip]>;
+    /**
+     * Apply a filter
+     */
+    applyFilter(filter: Filter): Promise<void>;
+    /**
+     * Remove a filter
+     */
+    removeFilter(filterId: string): Promise<void>;
+    /**
+     * Update a filter
+     */
+    updateFilter(filterId: string, updates: Partial<Filter>): Promise<void>;
+    /**
+     * Get available filters
+     */
+    getAvailableFilters(): FilterDefinition[];
+    /**
+     * Add text overlay
+     */
+    addTextOverlay(text: TextOverlay): Promise<void>;
+    /**
+     * Remove text overlay
+     */
+    removeTextOverlay(textId: string): Promise<void>;
+    /**
+     * Update text overlay
+     */
+    updateTextOverlay(textId: string, updates: Partial<TextOverlay>): Promise<void>;
+    /**
+     * Add transition
+     */
+    addTransition(transition: Transition): Promise<void>;
+    /**
+     * Remove transition
+     */
+    removeTransition(transitionId: string): Promise<void>;
+    /**
+     * Update transition
+     */
+    updateTransition(transitionId: string, updates: Partial<Transition>): Promise<void>;
+    /**
+     * Get available transitions
+     */
+    getAvailableTransitions(): TransitionDefinition[];
+    /**
+     * Set volume
+     */
+    setVolume(clipId: string, volume: number): void;
+    /**
+     * Mute clip
+     */
+    muteClip(clipId: string, muted: boolean): void;
+    /**
+     * Add audio track
+     */
+    addAudioTrack(audio: AudioTrack): Promise<void>;
+    /**
+     * Remove audio track
+     */
+    removeAudioTrack(trackId: string): Promise<void>;
+    /**
+     * Export video
+     */
+    export(_options: ExportOptions): Promise<ExportResult>;
+    /**
+     * Start export
+     */
+    startExport(options: ExportOptions): void;
+    /**
+     * Cancel export
+     */
+    cancelExport(): void;
+    /**
+     * Check if can export
+     */
+    canExport(_options: ExportOptions): Promise<boolean>;
+    /**
+     * Get export progress
+     */
+    getExportProgress(): number;
+    /**
+     * Check if currently playing
+     */
+    getIsPlaying(): boolean;
+    /**
+     * Get current playback rate
+     */
+    getPlaybackRate(): number;
+    /**
+     * Render frame
+     */
+    renderFrame(time: number): Promise<void>;
+    /**
+     * Get preview canvas
+     */
+    getPreviewCanvas(): HTMLCanvasElement;
+    /**
+     * Get preview dimensions
+     */
+    getPreviewDimensions(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Set preview quality
+     */
+    setPreviewQuality(quality: 'low' | 'medium' | 'high'): void;
+    /**
+     * Get performance metrics
+     */
+    getPerformanceMetrics(): PerformanceMetrics;
+    /**
+     * Analyze performance
+     */
+    analyzePerformance(): Promise<PerformanceBottleneck[]>;
+    /**
+     * Get optimization suggestions
+     */
+    getOptimizationSuggestions(): Promise<OptimizationSuggestion[]>;
+    /**
+     * Get memory usage
+     */
+    getMemoryUsage(): MemoryUsage;
+    /**
+     * Check capabilities
+     */
+    checkCapabilities(): Promise<BrowserCapabilities>;
+    /**
+     * Check codec support
+     */
+    isCodecSupported(codec: string): Promise<boolean>;
+    /**
+     * Get max resolution
+     */
+    getMaxResolution(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Event handling
+     */
+    on(event: EngineEvent, handler: Function): void;
+    off(event: EngineEvent, handler: Function): void;
+    once(event: EngineEvent, handler: Function): void;
+    private emit;
+    /**
+     * Error handling
+     */
+    simulateCriticalError(error: Error): void;
+    getLastError(): Error | null;
+    clearError(): void;
+}
+export {};

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

@@ -0,0 +1,106 @@
+import * as core from '../core/mediables-engine.js';
+type Composition = core.Composition;
+type AudioClip = core.AudioClip;
+type AudioSource = core.AudioSource;
+type Track = core.Track;
+export interface AudioTrackConfig {
+    source: string | File | AudioSource;
+    volume?: number;
+    startTime?: number;
+    duration?: number;
+    fadeIn?: number;
+    fadeOut?: number;
+    loop?: boolean;
+    name?: string;
+}
+export interface AudioLayer {
+    id: string;
+    name: string;
+    clip: AudioClip;
+    track: Track;
+    config: AudioTrackConfig;
+}
+export declare class AudioManager {
+    private composition;
+    private audioLayers;
+    private audioSources;
+    private nextId;
+    private masterVolume;
+    constructor(composition: Composition);
+    /**
+     * Load an audio source
+     */
+    loadAudioSource(url: string, name?: string): Promise<AudioSource>;
+    /**
+     * Add background music track
+     */
+    addBackgroundMusic(config: AudioTrackConfig): Promise<string>;
+    /**
+     * Add an audio track to the composition
+     */
+    addAudioTrack(config: AudioTrackConfig): Promise<string>;
+    /**
+     * Create volume keyframes for fade effects
+     */
+    private createVolumeKeyframes;
+    /**
+     * Update audio track volume
+     */
+    updateVolume(id: string, volume: number): Promise<void>;
+    /**
+     * Apply fade in effect to an audio track
+     */
+    applyFadeIn(id: string, duration: number): Promise<void>;
+    /**
+     * Apply fade out effect to an audio track
+     */
+    applyFadeOut(id: string, duration: number): Promise<void>;
+    /**
+     * Remove an audio track
+     */
+    removeAudioTrack(id: string): Promise<void>;
+    /**
+     * Mute/unmute an audio track
+     */
+    muteTrack(id: string, muted: boolean): Promise<void>;
+    /**
+     * Set master volume (affects all tracks)
+     */
+    setMasterVolume(volume: number): void;
+    /**
+     * Get master volume
+     */
+    getMasterVolume(): number;
+    /**
+     * Get all audio layers
+     */
+    getAudioLayers(): AudioLayer[];
+    /**
+     * Get audio layer by ID
+     */
+    getAudioLayer(id: string): AudioLayer | undefined;
+    /**
+     * Clear all audio tracks
+     */
+    clearAllAudioTracks(): Promise<void>;
+    /**
+     * Sync audio with video timeline
+     */
+    syncWithVideo(videoStartTime: number, videoEndTime: number): Promise<void>;
+    /**
+     * Export audio configuration for saving
+     */
+    exportConfiguration(): Array<{
+        id: string;
+        name: string;
+        config: AudioTrackConfig;
+    }>;
+    /**
+     * Import audio configuration
+     */
+    importConfiguration(configs: Array<{
+        name: string;
+        config: AudioTrackConfig;
+    }>): Promise<void>;
+}
+export {};

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

@@ -0,0 +1,106 @@
+/**
+ * CSS Filter Adapter for Video Composition
+ * Replaces PIXI filters with native CSS filters for reliable video export
+ */
+import * as core from '../core/mediables-engine.js';
+import type { VideoRecipe, AppliedFilter } from '../../types/video';
+export declare class CSSFilterCompositionAdapter {
+    readonly composition: core.Composition;
+    private clips;
+    private clipTimelineStart;
+    private initPromise;
+    private fitMode;
+    private fps;
+    private resizeObserver;
+    private clipFilterManagers;
+    private currentFilterString;
+    private originalComputeFrame;
+    private renderCanvas;
+    private renderContext;
+    constructor(width?: number, height?: number, fps?: number, options?: {
+        fitMode?: 'none' | 'contain' | 'cover';
+    });
+    /**
+     * Setup render interception to apply CSS filters
+     */
+    private setupRenderInterception;
+    /**
+     * Apply CSS filters to the composition's canvas
+     */
+    private applyCSSFiltersToCanvas;
+    /**
+     * Get the currently active clip ID based on playback position
+     */
+    private getCurrentClipId;
+    /**
+     * Load a recipe and create the composition
+     */
+    loadRecipe(recipe: VideoRecipe, mediaUrls?: Record<string, string>): Promise<void>;
+    /**
+     * Convenience alias used by legacy callers.
+     * Resolves the media URL and delegates to `loadRecipe()`.
+     */
+    loadFromRecipe(recipe: VideoRecipe): Promise<void>;
+    /**
+     * Move a clip to a new timeline start (seconds).
+     */
+    moveClip(clipId: string, newTimelineStart: number): void;
+    /**
+     * Trim a clip's source range (seconds).
+     * Only applies to video clips.
+     */
+    trimClip(clipId: string, sourceIn: number, sourceOut: number): void;
+    /**
+     * Apply CSS filters to a clip
+     */
+    private applyFiltersToClip;
+    /**
+     * Update filters for a clip
+     */
+    setClipFilters(clipId: string, filters: AppliedFilter[]): void;
+    /**
+     * Get CSS filter string for export
+     * This is crucial for video export to work correctly
+     */
+    getCSSFilterStringForExport(frame: number): string;
+    /**
+     * Add a timeline clip
+     */
+    private addTimelineClip;
+    /**
+     * Add text overlay
+     */
+    private addTextOverlay;
+    /**
+     * Apply fit mode to clip
+     */
+    private applyFitToClip;
+    /**
+     * Attach player element
+     */
+    attachPlayer(element: HTMLDivElement): Promise<void>;
+    /**
+     * Playback controls
+     */
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    seekToTime(seconds: number): void;
+    /**
+     * Export helpers
+     */
+    get duration(): core.Timestamp;
+    get durationInSeconds(): number;
+    get currentTimeInSeconds(): number;
+    get width(): number;
+    get height(): number;
+    setFitMode(mode: 'none' | 'contain' | 'cover'): void;
+    /**
+     * Clean up
+     */
+    dispose(): void;
+    /**
+     * Legacy alias for `dispose()`.
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,88 @@
+/**
+ * ExportManager - Handles video export using Mediables video engine's Encoder
+ * Supports multiple formats, quality presets, and progress tracking
+ */
+import type { Composition } from '../core/mediables-engine.js';
+import { EventEmitter } from '../utils/EventEmitter.js';
+export interface ExportOptions {
+    format?: 'mp4' | 'webm';
+    quality?: 'high' | 'medium' | 'low' | 'custom';
+    resolution?: {
+        width: number;
+        height: number;
+    };
+    fps?: number;
+    bitrate?: number;
+    watermark?: {
+        text?: string;
+        imageUrl?: string;
+        position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+        opacity?: number;
+    };
+    onProgress?: (percent: number) => void;
+    signal?: AbortSignal;
+}
+export interface ExportResult {
+    blob: Blob;
+    format: string;
+    resolution: {
+        width: number;
+        height: number;
+    };
+    fps: number;
+    duration: number;
+    size: number;
+    exportTime: number;
+}
+export declare class ExportManager extends EventEmitter {
+    private composition;
+    private encoder;
+    private isExporting;
+    private exportStartTime;
+    private abortController;
+    constructor(composition: Composition);
+    /**
+     * Export the composition with specified options
+     */
+    export(options?: ExportOptions): Promise<ExportResult>;
+    /**
+     * Ensure composition duration is non-trivial and renderer is initialized
+     */
+    private ensureCompositionReady;
+    /**
+     * Apply quality preset to get export configuration
+     */
+    private applyQualityPreset;
+    /**
+     * Add watermark to the composition
+     */
+    private addWatermark;
+    /**
+     * Convert watermark position to x/y coordinates
+     */
+    private getWatermarkPosition;
+    /**
+     * Set up progress tracking
+     */
+    private setupProgressTracking;
+    /**
+     * Cancel the current export
+     */
+    cancel(): void;
+    /**
+     * Clean up resources
+     */
+    private cleanup;
+    /**
+     * Check if export is in progress
+     */
+    get exporting(): boolean;
+    /**
+     * Get supported export formats
+     */
+    static getSupportedFormats(): string[];
+    /**
+     * Check if WebCodecs API is available
+     */
+    static isWebCodecsSupported(): boolean;
+}

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

@@ -0,0 +1,96 @@
+/**
+ * FilterBridge - Bridge between PIXI filters and Mediables video engine
+ *
+ * Maps mediables filter types to PIXI filters for video engine rendering
+ */
+import type { Filter as PIXIFilter } from '@pixi/core';
+import type { AppliedFilter } from '../../types/video';
+export declare class FilterBridge {
+    private pixiFilters;
+    private filterParams;
+    private filterTypes;
+    private filterIntensity;
+    private composition;
+    constructor(composition?: any);
+    /**
+     * Set the composition to apply filters to
+     */
+    setComposition(composition: any): void;
+    /**
+     * Map mediables filter type to PIXI filter
+     */
+    mapMediablesToPIXI(filter: AppliedFilter): PIXIFilter | null;
+    /**
+     * Create a blur filter
+     */
+    private createBlurFilter;
+    /**
+     * Create a brightness filter using ColorMatrix
+     */
+    private createBrightnessFilter;
+    /**
+     * Create a contrast filter using ColorMatrix
+     */
+    private createContrastFilter;
+    /**
+     * Create a saturation filter using ColorMatrix
+     */
+    private createSaturationFilter;
+    /**
+     * Create a hue filter using ColorMatrix
+     */
+    private createHueFilter;
+    /**
+     * Create a vintage filter effect
+     */
+    private createVintageFilter;
+    /**
+     * Create a grayscale filter
+     */
+    private createGrayscaleFilter;
+    /**
+     * Create a sepia filter
+     */
+    private createSepiaFilter;
+    /**
+     * Apply filters to composition
+     */
+    applyFilters(filters: AppliedFilter[]): Promise<void>;
+    /**
+     * Apply a single filter to the composition
+     */
+    private applyToComposition;
+    /**
+     * Update filter parameters in real-time
+     */
+    updateFilterParams(filterId: string, params: any): void;
+    /**
+     * Get current filter parameters
+     */
+    getFilterParams(filterId: string): any;
+    /**
+     * Remove a specific filter
+     */
+    removeFilter(filterId: string): void;
+    /**
+     * Clear all filters
+     */
+    clearFilters(): void;
+    /**
+     * Get all active PIXI filters
+     */
+    getActiveFilters(): PIXIFilter[];
+    /**
+     * Export filter configuration for recipe
+     */
+    exportFilterConfig(): AppliedFilter[];
+    /**
+     * Import filter configuration from recipe
+     */
+    importFilterConfig(filters: AppliedFilter[]): Promise<void>;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}
+export default FilterBridge;