@twick/timeline 0.14.0 → 0.14.2

package/README.md

@@ -1,175 +1,175 @@
-# @twick/timeline
-
-## Timeline Editor CRUD Operations
-
-The TimelineEditor provides a clean interface for managing tracks and elements using the visitor pattern.
-
-### Track Operations
-
-```typescript
-import { TimelineEditor, TimelineOperationContext } from '@twick/timeline';
-
-// Create editor with context
-const context: TimelineOperationContext = {
-  contextId: 'my-editor',
-  setTotalDuration: (duration) => console.log('Duration:', duration),
-  setPresent: (data) => console.log('Present:', data),
-  handleUndo: () => console.log('Undo'),
-  handleRedo: () => console.log('Redo'),
-  handleResetHistory: () => console.log('Reset History'),
-  setLatestProjectVersion: (version) => console.log('Version:', version),
-  setTimelineAction: (action, payload) => console.log('Action:', action, payload),
-};
-
-const editor = new TimelineEditor(context);
-
-// Create a new track
-const track = editor.addTrack('My Video Track');
-
-// Get track by ID
-const trackById = editor.getTrackById(track.getId());
-
-// Get track by name
-const trackByName = editor.getTrackByName('My Video Track');
-
-// Remove track
-editor.removeTrackById(track.getId());
-```
-
-### Element Operations (Using Visitor Pattern)
-
-The TimelineEditor uses the visitor pattern to handle different element types consistently:
-
-```typescript
-import { 
-  TimelineEditor, 
-  TextElement, 
-  VideoElement, 
-  ImageElement,
-  AudioElement,
-  TrackElement
-} from '@twick/timeline';
-
-// Add elements to track
-const textElement = new TextElement('Hello World')
-  .setStart(0)
-  .setEnd(5)
-  .setName('Welcome Text');
-
-const videoElement = new VideoElement('video.mp4', { width: 720, height: 480 })
-  .setStart(0)
-  .setEnd(30)
-  .setName('Main Video');
-
-// Add elements using visitor pattern
-await editor.addElementToTrack(track.getId(), textElement);
-await editor.addElementToTrack(track.getId(), videoElement);
-
-// Update elements
-const updatedTextElement = new TextElement('Updated Text')
-  .setId(textElement.getId()) // Keep same ID
-  .setStart(0)
-  .setEnd(8)
-  .setName('Updated Welcome Text');
-
-editor.updateElementInTrack(track.getId(), updatedTextElement);
-
-// Remove elements
-editor.removeElementFromTrack(track.getId(), textElement);
-```
-
-### Complete CRUD Example
-
-```typescript
-// Create editor and track
-const editor = new TimelineEditor(context);
-const track = editor.addTrack('Demo Track');
-
-// Create elements
-const textElement = new TextElement('Sample Text')
-  .setStart(0)
-  .setEnd(5)
-  .setName('Sample Text Element');
-
-const imageElement = new ImageElement('image.jpg', { width: 300, height: 200 })
-  .setStart(5)
-  .setEnd(10)
-  .setName('Sample Image');
-
-// Add elements
-await editor.addElementToTrack(track.getId(), textElement);
-await editor.addElementToTrack(track.getId(), imageElement);
-
-// Update element
-const updatedText = new TextElement('Updated Sample Text')
-  .setId(textElement.getId())
-  .setStart(0)
-  .setEnd(8)
-  .setName('Updated Text Element');
-
-editor.updateElementInTrack(track.getId(), updatedText);
-
-// Remove element
-editor.removeElementFromTrack(track.getId(), imageElement);
-
-// Get timeline data
-const timelineData = editor.getTimelineData();
-console.log('Timeline:', timelineData);
-```
-
-### Utility Functions
-
-```typescript
-import { 
-  getCurrentElements, 
-  getTotalDuration, 
-  generateShortUuid,
-  isElementId,
-  isTrackId 
-} from '@twick/timeline';
-
-// Get elements currently playing at a specific time
-const currentElements = getCurrentElements(currentTime, tracks);
-
-// Get total duration of all tracks
-const totalDuration = getTotalDuration(trackData);
-
-// Generate unique IDs
-const elementId = generateShortUuid(); // "e-xxxxxxxxxxxx"
-const trackId = generateShortUuid();   // "t-xxxxxxxxxxxx"
-
-// Check ID types
-isElementId('e-123456789abc'); // true
-isTrackId('t-123456789abc');   // true
-```
-
-### Visitor Pattern Benefits
-
-- **Type Safety**: Each element type is handled specifically
-- **Extensibility**: Easy to add new element types
-- **Consistency**: Same pattern for all CRUD operations
-- **Maintainability**: Clean separation of concerns
-
-### React Hook Usage
-
-```typescript
-import { useTimelineContext } from '@twick/timeline';
-
-function MyComponent() {
-  const { editor } = useTimelineContext();
-  
-  // Use editor methods
-  const track = editor.addTrack('My Track');
-  
-  // Add elements
-  const textElement = new TextElement('Hello World')
-    .setStart(0)
-    .setEnd(5);
-    
-  await editor.addElementToTrack(track.getId(), textElement);
-  
-  return <div>Timeline Editor Ready</div>;
-}
-```
-
-
+# @twick/timeline
+
+## Timeline Editor CRUD Operations
+
+The TimelineEditor provides a clean interface for managing tracks and elements using the visitor pattern.
+
+### Track Operations
+
+```typescript
+import { TimelineEditor, TimelineOperationContext } from '@twick/timeline';
+
+// Create editor with context
+const context: TimelineOperationContext = {
+  contextId: 'my-editor',
+  setTotalDuration: (duration) => console.log('Duration:', duration),
+  setPresent: (data) => console.log('Present:', data),
+  handleUndo: () => console.log('Undo'),
+  handleRedo: () => console.log('Redo'),
+  handleResetHistory: () => console.log('Reset History'),
+  setLatestProjectVersion: (version) => console.log('Version:', version),
+  setTimelineAction: (action, payload) => console.log('Action:', action, payload),
+};
+
+const editor = new TimelineEditor(context);
+
+// Create a new track
+const track = editor.addTrack('My Video Track');
+
+// Get track by ID
+const trackById = editor.getTrackById(track.getId());
+
+// Get track by name
+const trackByName = editor.getTrackByName('My Video Track');
+
+// Remove track
+editor.removeTrackById(track.getId());
+```
+
+### Element Operations (Using Visitor Pattern)
+
+The TimelineEditor uses the visitor pattern to handle different element types consistently:
+
+```typescript
+import { 
+  TimelineEditor, 
+  TextElement, 
+  VideoElement, 
+  ImageElement,
+  AudioElement,
+  TrackElement
+} from '@twick/timeline';
+
+// Add elements to track
+const textElement = new TextElement('Hello World')
+  .setStart(0)
+  .setEnd(5)
+  .setName('Welcome Text');
+
+const videoElement = new VideoElement('video.mp4', { width: 720, height: 480 })
+  .setStart(0)
+  .setEnd(30)
+  .setName('Main Video');
+
+// Add elements using visitor pattern
+await editor.addElementToTrack(track.getId(), textElement);
+await editor.addElementToTrack(track.getId(), videoElement);
+
+// Update elements
+const updatedTextElement = new TextElement('Updated Text')
+  .setId(textElement.getId()) // Keep same ID
+  .setStart(0)
+  .setEnd(8)
+  .setName('Updated Welcome Text');
+
+editor.updateElementInTrack(track.getId(), updatedTextElement);
+
+// Remove elements
+editor.removeElementFromTrack(track.getId(), textElement);
+```
+
+### Complete CRUD Example
+
+```typescript
+// Create editor and track
+const editor = new TimelineEditor(context);
+const track = editor.addTrack('Demo Track');
+
+// Create elements
+const textElement = new TextElement('Sample Text')
+  .setStart(0)
+  .setEnd(5)
+  .setName('Sample Text Element');
+
+const imageElement = new ImageElement('image.jpg', { width: 300, height: 200 })
+  .setStart(5)
+  .setEnd(10)
+  .setName('Sample Image');
+
+// Add elements
+await editor.addElementToTrack(track.getId(), textElement);
+await editor.addElementToTrack(track.getId(), imageElement);
+
+// Update element
+const updatedText = new TextElement('Updated Sample Text')
+  .setId(textElement.getId())
+  .setStart(0)
+  .setEnd(8)
+  .setName('Updated Text Element');
+
+editor.updateElementInTrack(track.getId(), updatedText);
+
+// Remove element
+editor.removeElementFromTrack(track.getId(), imageElement);
+
+// Get timeline data
+const timelineData = editor.getTimelineData();
+console.log('Timeline:', timelineData);
+```
+
+### Utility Functions
+
+```typescript
+import { 
+  getCurrentElements, 
+  getTotalDuration, 
+  generateShortUuid,
+  isElementId,
+  isTrackId 
+} from '@twick/timeline';
+
+// Get elements currently playing at a specific time
+const currentElements = getCurrentElements(currentTime, tracks);
+
+// Get total duration of all tracks
+const totalDuration = getTotalDuration(trackData);
+
+// Generate unique IDs
+const elementId = generateShortUuid(); // "e-xxxxxxxxxxxx"
+const trackId = generateShortUuid();   // "t-xxxxxxxxxxxx"
+
+// Check ID types
+isElementId('e-123456789abc'); // true
+isTrackId('t-123456789abc');   // true
+```
+
+### Visitor Pattern Benefits
+
+- **Type Safety**: Each element type is handled specifically
+- **Extensibility**: Easy to add new element types
+- **Consistency**: Same pattern for all CRUD operations
+- **Maintainability**: Clean separation of concerns
+
+### React Hook Usage
+
+```typescript
+import { useTimelineContext } from '@twick/timeline';
+
+function MyComponent() {
+  const { editor } = useTimelineContext();
+  
+  // Use editor methods
+  const track = editor.addTrack('My Track');
+  
+  // Add elements
+  const textElement = new TextElement('Hello World')
+    .setStart(0)
+    .setEnd(5);
+    
+  await editor.addElementToTrack(track.getId(), textElement);
+  
+  return <div>Timeline Editor Ready</div>;
+}
+```
+
+

package/dist/core/addOns/animation.d.ts

@@ -14,11 +14,11 @@ export declare class ElementAnimation {
     getAnimate(): "enter" | "exit" | "both" | undefined;
     getMode(): "in" | "out" | undefined;
     getDirection(): "left" | "center" | "right" | "up" | "down" | undefined;
-    setInterval(interval?: number): void;
-    setIntensity(intensity?: number): void;
-    setAnimate(animate?: "enter" | "exit" | "both"): void;
-    setMode(mode?: "in" | "out"): void;
-    setDirection(direction?: "up" | "down" | "left" | "right" | "center"): void;
+    setInterval(interval?: number): this;
+    setIntensity(intensity?: number): this;
+    setAnimate(animate?: "enter" | "exit" | "both"): this;
+    setMode(mode?: "in" | "out"): this;
+    setDirection(direction?: "up" | "down" | "left" | "right" | "center"): this;
     toJSON(): Animation;
     static fromJSON(json: Animation): ElementAnimation;
 }

package/dist/core/addOns/frame-effect.d.ts

@@ -5,10 +5,12 @@ export declare class ElementFrameEffect {
     private e;
     private props;
     constructor(start: number, end: number);
-    setProps(props: FrameEffectProps): void;
+    setProps(props: FrameEffectProps): this;
     getProps(): FrameEffectProps;
     getStart(): number;
     getEnd(): number;
+    setStart(start: number): this;
+    setEnd(end: number): this;
     toJSON(): FrameEffect;
     static fromJSON(json: FrameEffect): ElementFrameEffect;
 }

package/dist/core/addOns/text-effect.d.ts

@@ -10,10 +10,9 @@ export declare class ElementTextEffect {
     getDuration(): number | undefined;
     getDelay(): number | undefined;
     getBufferTime(): number | undefined;
-    setName(name: string): void;
-    setDuration(duration?: number): void;
-    setDelay(delay?: number): void;
-    setBufferTime(bufferTime?: number): void;
+    setDuration(duration?: number): this;
+    setDelay(delay?: number): this;
+    setBufferTime(bufferTime?: number): this;
     toJSON(): TextEffect;
     static fromJSON(json: TextEffect): ElementTextEffect;
 }

package/dist/core/editor/timeline.editor.d.ts

@@ -26,6 +26,7 @@ export interface TimelineOperationContext {
  */
 export declare class TimelineEditor {
     private context;
+    private totalDuration;
     constructor(context: TimelineOperationContext);
     getContext(): TimelineOperationContext;
     pauseVideo(): void;
@@ -91,4 +92,5 @@ export declare class TimelineEditor {
         tracks: TrackJSON[];
         version: number;
     }): void;
+    getVideoAudio(): Promise<string>;
 }

package/dist/core/elements/audio.element.d.ts

@@ -8,6 +8,10 @@ export declare class AudioElement extends TrackElement {
     constructor(src: string);
     getMediaDuration(): number;
     getStartAt(): number;
+    getEndAt(): number;
+    getSrc(): string;
+    getPlaybackRate(): number;
+    getVolume(): number;
     updateAudioMeta(): Promise<void>;
     setSrc(src: string): Promise<this>;
     setMediaDuration(mediaDuration: number): this;

package/dist/core/elements/video.element.d.ts

@@ -20,6 +20,10 @@ export declare class VideoElement extends TrackElement {
     getObjectFit(): ObjectFit;
     getMediaDuration(): number;
     getStartAt(): number;
+    getEndAt(): number;
+    getSrc(): string;
+    getPlaybackRate(): number;
+    getVolume(): number;
     getPosition(): Position;
     updateVideoMeta(updateFrame?: boolean): Promise<void>;
     setPosition(position: Position): this;
@@ -28,7 +32,6 @@ export declare class VideoElement extends TrackElement {
     setParentSize(parentSize: Size): this;
     setObjectFit(objectFit: ObjectFit): this;
     setFrame(frame: Frame): this;
-    setPlay(play: boolean): this;
     setPlaybackRate(playbackRate: number): this;
     setStartAt(time: number): this;
     setMediaFilter(mediaFilter: string): this;