refactor: type-safety & separate concerns

1 files changed, 3 insertions, 7 deletions

diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index a1a33837..300c4c7b 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -40,10 +40,8 @@ export function TimelineElement({
   onElementMouseDown,
   onElementClick,
 }: TimelineElementProps) {
-  const { mediaItems } = useMediaStore();
+  const { mediaFiles } = useMediaStore();
   const {
-    updateElementTrim,
-    updateElementDuration,
     removeElementFromTrack,
     removeElementFromTrackWithRipple,
     dragState,
@@ -58,7 +56,7 @@ export function TimelineElement({
 
   const mediaItem =
     element.type === "media"
-      ? mediaItems.find((item) => item.id === element.mediaId)
+      ? mediaFiles.find((file) => file.id === element.mediaId)
       : null;
   const hasAudio = mediaItem?.type === "audio" || mediaItem?.type === "video";
 
@@ -67,8 +65,6 @@ export function TimelineElement({
       element,
       track,
       zoomLevel,
-      onUpdateTrim: updateElementTrim,
-      onUpdateDuration: updateElementDuration,
     });
 
   const { requestRevealMedia } = useMediaPanelStore.getState();
@@ -190,7 +186,7 @@ export function TimelineElement({
     }
 
     // Render media element ->
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
+    const mediaItem = mediaFiles.find((file) => file.id === element.mediaId);
     if (!mediaItem) {
       return (
         <span className="text-xs text-foreground/80 truncate">