@twick/video-editor 0.14.3 → 0.14.5

package/dist/components/controls/player-controls.d.ts

@@ -20,6 +20,8 @@ import { TrackElement, Track } from '@twick/timeline';
  *   onRedo={handleRedo}
  *   onDelete={handleDelete}
  *   onSplit={handleSplit}
+ *   zoomLevel={1.0}
+ *   setZoomLevel={handleZoomChange}
  * />
  * ```
  */
@@ -46,6 +48,10 @@ export interface PlayerControlsProps {
     onDelete?: (item: TrackElement | Track) => void;
     /** Optional callback for split operation */
     onSplit?: (item: TrackElement, splitTime: number) => void;
+    /** Current zoom level for timeline */
+    zoomLevel?: number;
+    /** Function to set zoom level */
+    setZoomLevel?: (zoom: number) => void;
     /** Optional CSS class name for styling */
     className?: string;
 }

package/dist/components/player/player-manager.d.ts

@@ -1,8 +1,12 @@
 
-export declare const PlayerManager: ({ videoProps, canvasMode, }: {
+export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, }: {
     videoProps: {
         width: number;
         height: number;
+        backgroundColor?: string;
+    };
+    playerProps?: {
+        quality?: number;
     };
     canvasMode: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/timeline/timeline-manager.d.ts

@@ -1,5 +1,4 @@
-declare const TimelineManager: ({ timelineControls, trackZoom, }: {
-    timelineControls?: React.ReactNode;
+declare const TimelineManager: ({ trackZoom, }: {
     trackZoom: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TimelineManager;

package/dist/components/timeline/timeline-view.d.ts

@@ -1,12 +1,12 @@
 import { Track, TrackElement } from '@twick/timeline';
 
-declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onReorder, onSelectionChange, onElementDrag, }: {
-    timelineControls?: React.ReactNode;
+declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onSelectionChange, onElementDrag, }: {
     zoomLevel: number;
     duration: number;
     tracks: Track[];
     selectedItem: Track | TrackElement | null;
     seekTrack?: React.ReactNode;
+    onAddTrack: () => void;
     onReorder: (tracks: Track[]) => void;
     onElementDrag: ({ element, dragType, updates, }: {
         element: TrackElement;

package/dist/components/track/track-element.d.ts

@@ -5,7 +5,7 @@ export declare const TrackElementView: React.FC<{
     selectedItem: TrackElement | null;
     parentWidth: number;
     duration: number;
-    nextStart: number;
+    nextStart: number | null;
     prevEnd: number;
     allowOverlap: boolean;
     onSelection: (element: TrackElement) => void;

package/dist/components/video-editor.d.ts

@@ -19,6 +19,13 @@ export interface VideoEditorConfig {
         width: number;
         /** Height of the video in pixels */
         height: number;
+        /** Background color of the video */
+        backgroundColor?: string;
+    };
+    playerProps?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
     };
     /** Whether to use canvas mode for rendering */
     canvasMode?: boolean;
@@ -48,8 +55,6 @@ export interface VideoEditorProps {
     rightPanel?: React.ReactNode;
     /** Custom bottom panel component (e.g., effects library) */
     bottomPanel?: React.ReactNode;
-    /** Custom play controls component */
-    playControls?: React.ReactNode;
     /** Whether to show default play controls if no custom controls provided */
     defaultPlayControls?: boolean;
     /** Editor configuration including video properties and mode settings */

package/dist/helpers/types.d.ts

@@ -1,200 +1,69 @@
-/**
- * Represents a media item in the video editor.
- * Defines the structure for images, videos, and audio files
- * that can be used in video editing projects.
- *
- * @example
- * ```js
- * const mediaItem: MediaItem = {
- *   id: "media-123",
- *   type: "video",
- *   url: "https://example.com/video.mp4",
- *   thumbnail: "https://example.com/thumbnail.jpg",
- *   metadata: {
- *     duration: 30,
- *     width: 1920,
- *     height: 1080
- *   }
- * };
- * ```
- */
-export type MediaItem = {
-    /** Unique identifier for the media item */
-    id: string;
-    /** Type of media (image, video, or audio) */
-    type: 'image' | 'video' | 'audio';
-    /** URL or path to the media file */
-    url: string;
-    /** Optional array buffer containing the media data */
-    arrayBuffer?: ArrayBuffer;
-    /** Optional thumbnail URL for the media item */
-    thumbnail?: string;
-    /** Optional metadata about the media item */
-    metadata?: Record<string, any>;
-};
-/**
- * Pagination options for media library queries.
- * Used to control the number of items returned and pagination.
- *
- * @example
- * ```js
- * const pagination: PaginationOptions = {
- *   page: 1,
- *   limit: 20
- * };
- *
- * // Fetch first 20 items
- * const mediaItems = await mediaManager.getMedia(pagination);
- * ```
- */
-export type PaginationOptions = {
-    /** Page number (1-based) */
-    page: number;
-    /** Number of items per page */
-    limit: number;
-};
-/**
- * Search options for filtering media items.
- * Defines search criteria for finding specific media content.
- *
- * @example
- * ```js
- * const searchOptions: SearchOptions = {
- *   query: "nature",
- *   type: "image",
- *   metadata: {
- *     tags: ["landscape", "outdoor"]
- *   }
- * };
- *
- * // Search for nature images with specific tags
- * const results = await mediaManager.searchMedia(searchOptions);
- * ```
- */
-export type SearchOptions = {
-    /** Search query string */
-    query: string;
-    /** Optional media type filter */
-    type?: 'image' | 'video' | 'audio';
-    /** Optional metadata filters */
-    metadata?: Record<string, any>;
-};
-/**
- * Text effect configuration for animated text elements.
- * Defines how text animations are applied to timeline elements.
- *
- * @example
- * ```js
- * const textEffect: TextEffect = {
- *   name: "typewriter",
- *   delay: 0.5,
- *   bufferTime: 0.1,
- *   getSample: (effect) => "Sample text animation"
- * };
- *
- * // Apply text effect to element
- * textElement.setTextEffect(textEffect);
- * ```
- */
-export type TextEffect = {
-    /** Name of the text effect */
-    name: string;
-    /** Delay before effect starts (in seconds) */
-    delay?: number;
-    /** Buffer time between characters (in seconds) */
-    bufferTime?: number;
-    /** Function to get sample text for preview */
-    getSample: (textEffect?: TextEffect) => string;
-};
-/**
- * Animation configuration for timeline elements.
- * Defines how elements are animated during playback.
- *
- * @example
- * ```js
- * const animation: Animation = {
- *   name: "fade",
- *   interval: 0.5,
- *   animate: "enter",
- *   mode: "in",
- *   direction: "center",
- *   options: {
- *     animate: ["enter", "exit"],
- *     direction: ["up", "down", "left", "right"],
- *     mode: ["in", "out"]
- *   },
- *   getSample: (anim) => "Sample animation preview"
- * };
- *
- * // Apply animation to element
- * element.setAnimation(animation);
- * ```
- */
-export type Animation = {
-    /** Name of the animation */
+export interface Animation {
     name: string;
-    /** Interval between animation cycles (in seconds) */
     interval?: number;
-    /** When to apply the animation */
+    duration?: number;
+    intensity?: number;
     animate?: "enter" | "exit" | "both";
-    /** Animation mode (in/out) */
     mode?: "in" | "out";
-    /** Direction of the animation */
     direction?: "up" | "down" | "left" | "right" | "center";
-    /** Available options for the animation */
-    options?: {
-        /** Available animation types */
-        animate?: string[];
-        /** Available directions */
-        direction?: string[];
-        /** Available modes */
-        mode?: string[];
+    options: {
+        animate?: ("enter" | "exit" | "both")[];
+        mode?: ("in" | "out")[];
+        direction?: ("left" | "right" | "center" | "up" | "down")[];
+        intensity?: [number, number];
+        interval?: [number, number];
+        duration?: [number, number];
     };
-    /** Function to get sample preview */
     getSample: (animation?: Animation) => string;
-};
-/**
- * Color scheme for different element types in the timeline.
- * Provides consistent visual distinction between various timeline elements.
- * Each property represents the default color for a specific element type.
- *
- * @example
- * ```js
- * const colors: ElementColors = {
- *   video: "#4B2E83",
- *   text: "#375A7F",
- *   image: "#805A38",
- *   audio: "#3C665B",
- *   // ... other element colors
- * };
- *
- * // Apply color to element
- * element.style.backgroundColor = colors[element.type];
- * ```
- */
+}
+export interface TextEffect {
+    name: string;
+    duration: number;
+    delay?: number;
+    bufferTime?: number;
+    getSample?: () => string;
+}
+export interface MediaItem {
+    id: string;
+    name: string;
+    type: string;
+    url: string;
+    thumbnail?: string;
+    duration?: number;
+    width?: number;
+    height?: number;
+    metadata?: {
+        title?: string;
+        [key: string]: any;
+    };
+    arrayBuffer?: ArrayBuffer;
+}
+export interface PaginationOptions {
+    page: number;
+    limit: number;
+}
+export interface SearchOptions {
+    query?: string;
+    type?: string;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    metadata?: {
+        [key: string]: any;
+    };
+}
 export interface ElementColors {
-    /** Fragment element color */
-    fragment: string;
-    /** Video element color */
     video: string;
-    /** Caption element color */
-    caption: string;
-    /** Image element color */
-    image: string;
-    /** Audio element color */
     audio: string;
-    /** Text element color */
+    image: string;
     text: string;
-    /** Generic element color */
-    element: string;
-    /** Rectangle element color */
+    caption: string;
+    icon: string;
+    circle: string;
     rect: string;
-    /** Frame effect color */
+    element: string;
+    fragment: string;
     frameEffect: string;
-    /** Filters color */
     filters: string;
-    /** Transition color */
     transition: string;
-    /** Animation color */
     animation: string;
 }

package/dist/hooks/use-timeline-manager.d.ts

@@ -20,6 +20,7 @@ import { TrackElement, Track } from '@twick/timeline';
  */
 export declare const useTimelineManager: () => {
     timelineData: import('@twick/timeline/dist/services/data.service').TimelineTrackData | null;
+    onAddTrack: () => void;
     onElementDrag: ({ element, dragType, updates, }: {
         updates: {
             start: number;

package/dist/index.d.ts

@@ -9,7 +9,9 @@ import { animationGifs, getAnimationGif } from './assets';
 import { ANIMATIONS } from './helpers/animation-manager';
 import { TEXT_EFFECTS } from './helpers/text-effects-manager';
 import { default as useTimelineControl } from './hooks/use-timeline-control';
+import { setElementColors } from './helpers/editor.utils';
 
+export { setElementColors };
 export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors };
 export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig };
 export { ANIMATIONS, TEXT_EFFECTS };