refactor: type-safety & separate concerns

apps/web/src/hooks/use-aspect-ratio.ts

@@ -6,7 +6,7 @@ import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store";
 export function useAspectRatio() {
   const { canvasPresets } = useEditorStore();
   const { activeProject } = useProjectStore();
-  const { mediaItems } = useMediaStore();
+  const { mediaFiles } = useMediaStore();
   const { tracks } = useTimelineStore();
 
   const canvasSize = activeProject?.canvasSize || DEFAULT_CANVAS_SIZE;
@@ -24,14 +24,14 @@ export function useAspectRatio() {
     for (const track of tracks) {
       for (const element of track.elements) {
         if (element.type === "media") {
-          const mediaItem = mediaItems.find(
-            (item) => item.id === element.mediaId
+          const mediaFile = mediaFiles.find(
+            (file) => file.id === element.mediaId
           );
           if (
-            mediaItem &&
-            (mediaItem.type === "video" || mediaItem.type === "image")
+            mediaFile &&
+            (mediaFile.type === "video" || mediaFile.type === "image")
           ) {
-            return getMediaAspectRatio(mediaItem);
+            return getMediaAspectRatio(mediaFile);
           }
         }
       }

apps/web/src/hooks/use-timeline-element-resize.ts

@@ -9,28 +9,15 @@ interface UseTimelineElementResizeProps {
   element: TimelineElement;
   track: TimelineTrack;
   zoomLevel: number;
-  onUpdateTrim: (
-    trackId: string,
-    elementId: string,
-    trimStart: number,
-    trimEnd: number
-  ) => void;
-  onUpdateDuration: (
-    trackId: string,
-    elementId: string,
-    duration: number
-  ) => void;
 }
 
 export function useTimelineElementResize({
   element,
   track,
   zoomLevel,
-  onUpdateTrim,
-  onUpdateDuration,
 }: UseTimelineElementResizeProps) {
   const [resizing, setResizing] = useState<ResizeState | null>(null);
-  const { mediaItems } = useMediaStore();
+  const { mediaFiles } = useMediaStore();
   const {
     updateElementStartTime,
     updateElementTrim,
@@ -88,11 +75,11 @@ export function useTimelineElementResize({
 
     // Media elements - check the media type
     if (element.type === "media") {
-      const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-      if (!mediaItem) return false;
+      const mediaFile = mediaFiles.find((file) => file.id === element.mediaId);
+      if (!mediaFile) return false;
 
       // Images can be extended (static content)
-      if (mediaItem.type === "image") {
+      if (mediaFile.type === "image") {
         return true;
       }