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

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;