@codingfactory/mediables-vue 2.0.1

package/dist/composables/useTheme.d.ts

@@ -0,0 +1,7 @@
+export declare function useTheme(): {
+    isDarkMode: import("vue").Ref<boolean, boolean>;
+    currentTheme: import("vue").ComputedRef<"light" | "dark">;
+    toggleTheme: () => void;
+    initTheme: () => void;
+    applyTheme: () => void;
+};

package/dist/composables/useToast.d.ts

@@ -0,0 +1,25 @@
+export interface Toast {
+    id: string;
+    message: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    duration?: number;
+}
+export declare function useToast(): {
+    toasts: import("vue").Ref<{
+        id: string;
+        message: string;
+        type: "success" | "error" | "warning" | "info";
+        duration?: number | undefined;
+    }[], Toast[] | {
+        id: string;
+        message: string;
+        type: "success" | "error" | "warning" | "info";
+        duration?: number | undefined;
+    }[]>;
+    show: (message: string, type?: Toast["type"], duration?: number) => string;
+    remove: (id: string) => void;
+    success: (message: string, duration?: number) => string;
+    error: (message: string, duration?: number) => string;
+    warning: (message: string, duration?: number) => string;
+    info: (message: string, duration?: number) => string;
+};

package/dist/composables/useVideoEditor.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Video Editor Composable
+ *
+ * Core logic for video editing operations
+ */
+import type { VideoRecipe, VideoMedia, AppliedFilter, TextOverlayRecipe, AudioTrackRecipe } from '../types/video';
+import { CSSFilterCompositionAdapter } from '../video-engine/adapters/CSSFilterAdapter';
+export declare function useVideoEditor(mediaUuid: string, initialRecipe?: VideoRecipe, initialMedia?: VideoMedia): {
+    currentFrame: import("vue").Ref<any, any>;
+    playheadPosition: import("vue").ComputedRef<number>;
+    timelineClips: import("vue").ComputedRef<{
+        id: string;
+        type: "clip" | "video";
+        timelineStart: number;
+        timelineEnd: number;
+        startTime?: number | undefined;
+        endTime?: number | undefined;
+        track?: number | undefined;
+        sourceIn: number;
+        sourceOut: number;
+        sourceMinIn?: number | undefined;
+        sourceMaxOut?: number | undefined;
+        speed?: number | undefined;
+        filters?: {
+            id: string;
+            filterId: string;
+            params: Record<string, any>;
+            intensity: number;
+            ffmpegCommand?: string | undefined;
+        }[] | undefined;
+        thumbnail?: string | undefined;
+        label?: string | undefined;
+        url?: string | undefined;
+        muted?: boolean | undefined;
+        scale?: number | undefined;
+        duration?: number | undefined;
+        transform?: {
+            x?: number | undefined;
+            y?: number | undefined;
+            rotation?: number | undefined;
+            opacity?: number | undefined;
+            scale?: number | undefined;
+        } | undefined;
+    }[]>;
+    totalDuration: import("vue").ComputedRef<number>;
+    hasChanges: import("vue").ComputedRef<boolean>;
+    isPlaying: import("vue").ComputedRef<boolean>;
+    selectedClip: import("vue").ComputedRef<{
+        id: string;
+        type: "clip" | "video";
+        timelineStart: number;
+        timelineEnd: number;
+        startTime?: number | undefined;
+        endTime?: number | undefined;
+        track?: number | undefined;
+        sourceIn: number;
+        sourceOut: number;
+        sourceMinIn?: number | undefined;
+        sourceMaxOut?: number | undefined;
+        speed?: number | undefined;
+        filters?: {
+            id: string;
+            filterId: string;
+            params: Record<string, any>;
+            intensity: number;
+            ffmpegCommand?: string | undefined;
+        }[] | undefined;
+        thumbnail?: string | undefined;
+        label?: string | undefined;
+        url?: string | undefined;
+        muted?: boolean | undefined;
+        scale?: number | undefined;
+        duration?: number | undefined;
+        transform?: {
+            x?: number | undefined;
+            y?: number | undefined;
+            rotation?: number | undefined;
+            opacity?: number | undefined;
+            scale?: number | undefined;
+        } | undefined;
+    } | null>;
+    zoomLevel: import("vue").ComputedRef<number>;
+    playbackSpeed: import("vue").Ref<number, number>;
+    useVideoEngine: import("vue").Ref<boolean, boolean>;
+    compositionAdapter: import("vue").ComputedRef<CSSFilterCompositionAdapter | null>;
+    fps: import("vue").Ref<number, number>;
+    useFrameMode: import("vue").Ref<boolean, boolean>;
+    handleTrim: (clipId: string, edge: "start" | "end", newTime: number) => void;
+    handleSplit: (time: number) => void;
+    handleClipSelect: (clipId: string | null) => void;
+    splitAtPlayhead: () => void;
+    deleteSelectedClip: () => void;
+    duplicateSelectedClip: () => void;
+    setFilters: (filters: AppliedFilter[]) => void;
+    setTextOverlays: (overlays: TextOverlayRecipe[]) => void;
+    setAudioTracks: (tracks: AudioTrackRecipe[]) => void;
+    moveClip: (clipId: string, newStart: number) => void;
+    saveDraft: () => VideoRecipe;
+    clearHasChanges: () => void;
+    resetChanges: () => boolean;
+    generateRecipe: () => VideoRecipe;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    setZoomLevel: (value: number) => void;
+    fitToWindow: () => void;
+    togglePlayback: () => void;
+    setPlaying: (playing: boolean) => void;
+    seekTo: (time: number) => void;
+    frameForward: () => void;
+    frameBackward: () => void;
+    skipToStart: () => void;
+    skipToEnd: () => void;
+    setPlaybackSpeed: (speed: number) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+    initializeComposition: (width?: number, height?: number) => Promise<void>;
+    syncCompositionWithState: () => Promise<void>;
+    syncWithComposition: (_composition: any) => void;
+    convertToFrames: (seconds: number) => number;
+    convertToSeconds: (frames: number) => number;
+    seekToFrame: (frame: number) => void;
+    toggleFrameMode: () => void;
+    onCompositionReady: () => void;
+    onCompositionError: (error: Error) => void;
+};

package/dist/composables/useVideoFilters.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Video Filters Composable
+ *
+ * Keeps video filter definitions aligned with the centralized filter registry
+ * used by the image editor, while preserving legacy video-compatible fallbacks
+ * for uploader flows and older saved recipes.
+ */
+import type { AppliedFilter } from '../types/video';
+type FilterParamPrimitive = number | boolean | string;
+type FilterParamValue = FilterParamPrimitive | null;
+type FilterParamMap = Record<string, FilterParamValue>;
+interface VideoFilterControl {
+    id: string;
+    type: string;
+    label: string;
+    property?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    default?: FilterParamPrimitive;
+    unit?: string;
+}
+interface VideoFilterDefinition {
+    id: string;
+    name: string;
+    category: string;
+    controls: VideoFilterControl[];
+    params: VideoFilterControl[];
+    defaultParams: FilterParamMap;
+    paramRanges: Record<string, {
+        min: number;
+        max: number;
+        step: number;
+    }>;
+}
+interface FilterPresetEntry {
+    filterId: string;
+    params: FilterParamMap;
+    intensity: number;
+}
+interface FilterPreset {
+    id: string;
+    name: string;
+    filters: FilterPresetEntry[];
+    created_at: string;
+}
+export declare function useVideoFilters(): {
+    videoCompatibleFilters: import("vue").ComputedRef<VideoFilterDefinition[]>;
+    activeFilters: import("vue").Ref<{
+        id: string;
+        filterId: string;
+        params: Record<string, any>;
+        intensity: number;
+        ffmpegCommand?: string | undefined;
+    }[], AppliedFilter[] | {
+        id: string;
+        filterId: string;
+        params: Record<string, any>;
+        intensity: number;
+        ffmpegCommand?: string | undefined;
+    }[]>;
+    selectedFilter: import("vue").Ref<{
+        id: string;
+        name: string;
+        category: string;
+        controls: {
+            id: string;
+            type: string;
+            label: string;
+            property?: string | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+            default?: FilterParamPrimitive | undefined;
+            unit?: string | undefined;
+        }[];
+        params: {
+            id: string;
+            type: string;
+            label: string;
+            property?: string | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+            default?: FilterParamPrimitive | undefined;
+            unit?: string | undefined;
+        }[];
+        defaultParams: FilterParamMap;
+        paramRanges: Record<string, {
+            min: number;
+            max: number;
+            step: number;
+        }>;
+    } | null, VideoFilterDefinition | {
+        id: string;
+        name: string;
+        category: string;
+        controls: {
+            id: string;
+            type: string;
+            label: string;
+            property?: string | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+            default?: FilterParamPrimitive | undefined;
+            unit?: string | undefined;
+        }[];
+        params: {
+            id: string;
+            type: string;
+            label: string;
+            property?: string | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+            default?: FilterParamPrimitive | undefined;
+            unit?: string | undefined;
+        }[];
+        defaultParams: FilterParamMap;
+        paramRanges: Record<string, {
+            min: number;
+            max: number;
+            step: number;
+        }>;
+    } | null>;
+    previewFilter: import("vue").Ref<{
+        id: string;
+        filterId: string;
+        params: Record<string, any>;
+        intensity: number;
+        ffmpegCommand?: string | undefined;
+    } | null, AppliedFilter | {
+        id: string;
+        filterId: string;
+        params: Record<string, any>;
+        intensity: number;
+        ffmpegCommand?: string | undefined;
+    } | null>;
+    filterPresets: import("vue").Ref<{
+        id: string;
+        name: string;
+        filters: {
+            filterId: string;
+            params: FilterParamMap;
+            intensity: number;
+        }[];
+        created_at: string;
+    }[], FilterPreset[] | {
+        id: string;
+        name: string;
+        filters: {
+            filterId: string;
+            params: FilterParamMap;
+            intensity: number;
+        }[];
+        created_at: string;
+    }[]>;
+    filterParams: FilterParamMap;
+    hasActiveFilters: import("vue").ComputedRef<boolean>;
+    filtersByCategory: import("vue").ComputedRef<Record<string, VideoFilterDefinition[]>>;
+    applyFilter: (filterId?: string) => AppliedFilter | undefined;
+    previewFilterEffect: (filterId: string) => void;
+    updateFilterParams: (params: Record<string, unknown>) => void;
+    removeFilter: (filterId: string) => void;
+    reorderFilters: (fromIndex: number, toIndex: number) => void;
+    updateFilterIntensity: (filterId: string, intensity: number) => void;
+    toggleFilter: (filterId: string) => void;
+    clearAllFilters: () => void;
+    saveFilterPreset: (name: string) => FilterPreset;
+    loadFilterPreset: (presetId: string) => void;
+    deleteFilterPreset: (presetId: string) => void;
+    getFilterSummary: () => string;
+    setActiveFilters(filters: AppliedFilter[]): void;
+};
+export {};

package/dist/composables/useVideoPlayer.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Composable for video player functionality
+ * Handles playback, controls, token refresh, and live streaming
+ */
+import type { VideoPlayerOptions } from '../types/video';
+interface ApiClient {
+    get<T>(url: string): Promise<T>;
+}
+interface UseVideoPlayerOptions extends VideoPlayerOptions {
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onError?: (error: string) => void;
+    onTimeUpdate?: (time: number) => void;
+}
+export declare function useVideoPlayer(options?: UseVideoPlayerOptions): {
+    videoEl: import("vue").Ref<HTMLVideoElement | undefined, HTMLVideoElement | undefined>;
+    liveVideoEl: import("vue").Ref<HTMLVideoElement | undefined, HTMLVideoElement | undefined>;
+    playing: import("vue").Ref<boolean, boolean>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+    volume: import("vue").Ref<number, number>;
+    muted: import("vue").Ref<boolean, boolean>;
+    isFullscreen: import("vue").Ref<boolean, boolean>;
+    bufferedRanges: import("vue").Ref<TimeRanges | undefined, TimeRanges | undefined>;
+    bufferedPercent: import("vue").ComputedRef<number>;
+    playbackRate: import("vue").Ref<number, number>;
+    isLoading: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<string | null, string | null>;
+    status: import("vue").Ref<"error" | "paused" | "playing" | "ready" | "ended" | "loading" | "idle" | "live", "error" | "paused" | "playing" | "ready" | "ended" | "loading" | "idle" | "live">;
+    currentPlaybackUrl: import("vue").Ref<string, string>;
+    tokenExpiresAt: import("vue").Ref<Date | null, Date | null>;
+    play: () => Promise<void>;
+    pause: () => void;
+    togglePlayPause: () => void;
+    seek: (time: number) => void;
+    skipForward: (seconds?: number) => void;
+    skipBackward: (seconds?: number) => void;
+    toggleMute: () => void;
+    setVolume: (value: number) => void;
+    setPlaybackRate: (rate: number) => void;
+    toggleFullscreen: () => Promise<void>;
+    togglePiP: () => Promise<void>;
+    retry: () => Promise<void>;
+    refreshToken: () => Promise<void>;
+    setupLiveStream: (streamUrl: string) => Promise<void>;
+    setApiClient: (client: ApiClient) => void;
+    shouldRefreshToken: () => boolean;
+};
+export {};

package/dist/composables/useVideoUpload.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Composable for video upload functionality
+ * Handles direct upload to provider, progress tracking, and resumable uploads
+ */
+import type { VideoMedia, VideoUploadProgress } from '../types/video';
+interface UseVideoUploadOptions {
+    collection?: string;
+    ownerUuid?: string;
+    ownerType?: string;
+    maxFileSize?: number;
+    maxDuration?: number;
+    allowedFormats?: string[];
+    autoUpload?: boolean;
+    resumable?: boolean;
+    chunkSize?: number;
+    onUploadStart?: (upload: VideoUploadProgress) => void;
+    onUploadProgress?: (upload: VideoUploadProgress) => void;
+    onUploadComplete?: (media: VideoMedia) => void;
+    onUploadError?: (error: Error, upload: VideoUploadProgress) => void;
+    onFilesSelected?: (files: File[]) => void;
+}
+export interface VideoUploadApiClient {
+    post<T>(url: string, data: unknown): Promise<T>;
+    get<T>(url: string): Promise<T>;
+}
+export declare function useVideoUpload(options?: UseVideoUploadOptions): {
+    uploads: import("vue").ComputedRef<{
+        id: string;
+        file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        filename: string;
+        progress: number;
+        status: "pending" | "uploading" | "processing" | "completed" | "error" | "cancelled";
+        error?: string | undefined;
+        mediaUuid?: string | undefined;
+        media?: {
+            uuid: string;
+            filename: string;
+            url?: string | undefined;
+            file?: {
+                readonly lastModified: number;
+                readonly name: string;
+                readonly webkitRelativePath: string;
+                readonly size: number;
+                readonly type: string;
+                arrayBuffer: {
+                    (): Promise<ArrayBuffer>;
+                    (): Promise<ArrayBuffer>;
+                };
+                bytes: {
+                    (): Promise<Uint8Array<ArrayBuffer>>;
+                    (): Promise<Uint8Array<ArrayBuffer>>;
+                };
+                slice: {
+                    (start?: number, end?: number, contentType?: string): Blob;
+                    (start?: number, end?: number, contentType?: string): Blob;
+                };
+                stream: {
+                    (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                    (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                };
+                text: {
+                    (): Promise<string>;
+                    (): Promise<string>;
+                };
+            } | undefined;
+            mime_type: string;
+            size: number;
+            duration: number;
+            width: number;
+            height: number;
+            aspect_ratio: string;
+            frame_rate: number;
+            bitrate?: number | undefined;
+            has_audio: boolean;
+            has_captions?: boolean | undefined;
+            thumbnail_url?: string | undefined;
+            thumbnail_time?: number | undefined;
+            poster_url?: string | undefined;
+            playback_url?: string | undefined;
+            token_expires_at?: string | undefined;
+            provider: "local" | "bunny" | "cloudflare";
+            provider_asset_id?: string | undefined;
+            playback_id?: string | undefined;
+            processing_status: "pending" | "processing" | "ready" | "failed";
+            processing_progress: number;
+            created_at: string;
+            updated_at: string;
+        } | undefined;
+        bytesTotal: number;
+        bytesUploaded: number;
+        startedAt: Date;
+        completedAt?: Date | undefined;
+        uploadSpeed?: number | undefined;
+        timeRemaining?: number | undefined;
+    }[]>;
+    isUploading: import("vue").ComputedRef<boolean>;
+    totalProgress: import("vue").ComputedRef<number>;
+    openFilePicker: () => void;
+    handleFileSelect: (files: File[]) => Promise<void>;
+    validateFile: (file: File) => boolean;
+    startUpload: (file: File) => Promise<void>;
+    cancelUpload: (uploadId: string) => void;
+    retryUpload: (uploadId: string) => Promise<void>;
+    removeUpload: (uploadId: string) => void;
+    clearCompleted: () => void;
+    setApiClient: (client: VideoUploadApiClient) => void;
+};
+export {};

package/dist/filters/controlMapping.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Filter Control Mapping System
+ * Provides utilities for mapping filter controls to components and validating values
+ */
+import type { ControlDefinition } from './registry';
+/**
+ * Map a control type to a component name
+ * @param controlType The type of control from the filter definition
+ * @returns The name of the Vue component to use for this control
+ */
+export declare function mapControlTypeToComponent(controlType: string): string;
+/**
+ * Validate a control value against its definition
+ * @param value The value to validate
+ * @param control The control definition
+ * @returns The validated value (potentially corrected if out of bounds)
+ */
+export declare function validateControlValue(value: any, control: ControlDefinition): any;
+/**
+ * Generate a full set of parameters for a filter from its controls
+ * @param controls The control definitions
+ * @returns An object with the default parameters
+ */
+export declare function generateDefaultParams(controls: ControlDefinition[]): Record<string, any>;
+/**
+ * Convert a control value to the appropriate type based on the control definition
+ * @param value The value to convert
+ * @param control The control definition
+ * @returns The converted value
+ */
+export declare function convertControlValue(value: any, control: ControlDefinition): any;

package/dist/filters/css-registry.d.ts

@@ -0,0 +1,83 @@
+/**
+ * CSS Filter Registry System
+ * Centralized storage and management for CSS filter definitions
+ * Used for video filters to ensure preview matches export
+ */
+/**
+ * Interface for a filter control definition
+ * Defines the UI representation of a filter parameter
+ * Extends FilterControl from CSSFilterSystem with additional optional UI properties
+ */
+export interface ControlDefinition {
+    id: string;
+    type: 'slider' | 'toggle' | 'color' | 'select' | 'range' | 'button' | 'text' | 'checkbox';
+    label: string;
+    property: string;
+    action?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | boolean | string;
+    unit?: string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    tooltip?: string;
+}
+/**
+ * Interface for a CSS filter definition
+ * Contains all metadata needed to create and manage a CSS filter
+ */
+export interface CSSFilterRegistryDefinition {
+    id: string;
+    name: string;
+    category: string;
+    description?: string;
+    thumbnail?: string;
+    cssFilterId: string;
+    defaultParams: Record<string, any>;
+    controls: ControlDefinition[];
+    params?: ControlDefinition[];
+}
+export declare const CSS_FILTER_CATEGORIES: {
+    id: string;
+    name: string;
+    icon: string;
+}[];
+/**
+ * Register a CSS filter in the global registry
+ */
+export declare function registerCSSFilter(definition: CSSFilterRegistryDefinition): CSSFilterRegistryDefinition;
+/**
+ * Get a CSS filter definition by ID
+ */
+export declare function getCSSFilter(id: string): CSSFilterRegistryDefinition | undefined;
+/**
+ * Get all registered CSS filter definitions
+ */
+export declare function getAllCSSFilters(): CSSFilterRegistryDefinition[];
+/**
+ * Get CSS filters by category
+ */
+export declare function getCSSFiltersByCategory(category: string): CSSFilterRegistryDefinition[];
+/**
+ * Initialize CSS filter registry with all available filters
+ */
+export declare function initializeCSSFilterRegistry(): void;
+/**
+ * Get registered CSS filters as video filter format
+ * (For compatibility with existing components)
+ */
+export declare function getRegisteredCSSFilters(): {
+    id: string;
+    name: string;
+    category: string;
+    controls: ControlDefinition[];
+    params: ControlDefinition[];
+    defaultParams: Record<string, any>;
+}[];
+/**
+ * Check if CSS filter registry is initialized
+ */
+export declare function isCSSRegistryInitialized(): boolean;

package/dist/filters/definitions/adjustment.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/adjustmentAdvanced.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/advancedBloom.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/alpha.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/ascii.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/backdropBlur.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/bevel.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/bloom.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/blur.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/bulgePinch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;

package/dist/filters/definitions/colorGradient.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").FilterDefinition;
+export default _default;