From 7e3a80eb74af23a36cfff43aa61175e1630222e1 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 22:10:50 +0200
Subject: improve lots of stuff around the editor

---
 apps/web/src/components/editor/timeline.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

(limited to 'apps/web/src/components/editor/timeline.tsx')

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 2e23bfba..4ae42660 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -472,19 +472,12 @@ function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
 
     if (mediaItem.type === "image") {
       return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="w-16 h-12 flex-shrink-0">
-            <ImageTimelineTreatment
-              src={mediaItem.url}
-              alt={mediaItem.name}
-              targetAspectRatio={16 / 9}
-              className="rounded-sm"
-              backgroundType="mirror"
-            />
-          </div>
-          <span className="text-xs text-foreground/80 truncate flex-1">
-            {clip.name}
-          </span>
+        <div className="w-full h-full flex items-center justify-center">
+          <img
+            src={mediaItem.url}
+            alt={mediaItem.name}
+            className="w-full h-full object-cover"
+          />
         </div>
       );
     }
@@ -536,9 +529,9 @@ function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
             track.clips.map((clip, index) => (
               <div
                 key={clip.id}
-                className={`timeline-clip h-full rounded-sm border cursor-grab active:cursor-grabbing transition-colors ${getTrackColor(track.type)} flex items-center px-2 min-w-[80px] overflow-hidden`}
+                className={`timeline-clip h-full rounded-sm border cursor-grab active:cursor-grabbing transition-colors ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden`}
                 style={{
-                  width: `${Math.max(80, (clip.duration / 30) * 400)}px`,
+                  width: `${Math.max(80, clip.duration * 50)}px`,
                 }}
                 draggable={true}
                 onDragStart={(e) => handleClipDragStart(e, clip)}
-- 
cgit v1.3.1