feat: trim videos properly, draggable trim edges to both sides, cleaned up logic and optimized

1 files changed, 27 insertions, 0 deletions

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 12129afa..ac4a45dc 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -5,6 +5,8 @@ export interface TimelineClip {
   mediaId: string;

   name: string;

   duration: number;

+  trimStart: number;

+  trimEnd: number;

 }

 

 export interface TimelineTrack {

@@ -33,6 +35,12 @@ interface TimelineStore {
     clipId: string,

     newIndex: number

   ) => void;

+  updateClipTrim: (

+    trackId: string,

+    clipId: string,

+    trimStart: number,

+    trimEnd: number

+  ) => void;

 

   // Computed values

   getTotalDuration: () => number;

@@ -64,6 +72,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     const newClip: TimelineClip = {

       ...clipData,

       id: crypto.randomUUID(),

+      trimStart: 0,

+      trimEnd: 0,

     };

 

     set((state) => ({

@@ -138,6 +148,23 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     }));

   },

 

+  updateClipTrim: (trackId, clipId, trimStart, trimEnd) => {

+    set((state) => ({

+      tracks: state.tracks.map((track) =>

+        track.id === trackId

+          ? {

+              ...track,

+              clips: track.clips.map((clip) =>

+                clip.id === clipId

+                  ? { ...clip, trimStart, trimEnd }

+                  : clip

+              ),

+            }

+          : track

+      ),

+    }));

+  },

+

   getTotalDuration: () => {

     const { tracks } = get();

     if (tracks.length === 0) return 0;