From 9d2fd50fbc764308b1ebad8a43fa0556e77b9937 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 7 Jul 2025 23:21:06 +0200
Subject: refactor: centralize track colors and timeline constants

---
 .../web/src/components/editor/timeline-element.tsx | 24 ++++++++--------------
 1 file changed, 9 insertions(+), 15 deletions(-)

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

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 211c4e9b..0d258607 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -19,6 +19,10 @@ import AudioWaveform from "./audio-waveform";
 import { toast } from "sonner";
 import { TimelineElementProps, TrackType } from "@/types/timeline";
 import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
+import {
+  getTrackElementClasses,
+  TIMELINE_CONSTANTS,
+} from "@/lib/timeline-constants";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -67,7 +71,10 @@ export function TimelineElement({
 
   const effectiveDuration =
     element.duration - element.trimStart - element.trimEnd;
-  const elementWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
+  const elementWidth = Math.max(
+    TIMELINE_CONSTANTS.ELEMENT_MIN_WIDTH,
+    effectiveDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel
+  );
 
   // Use real-time position during drag, otherwise use stored position
   const isBeingDragged = dragState.elementId === element.id;
@@ -77,19 +84,6 @@ export function TimelineElement({
       : element.startTime;
   const elementLeft = elementStartTime * 50 * zoomLevel;
 
-  const getTrackColor = (type: TrackType) => {
-    switch (type) {
-      case "media":
-        return "bg-blue-500/20 border-blue-500/30";
-      case "text":
-        return "bg-purple-500/20 border-purple-500/30";
-      case "audio":
-        return "bg-green-500/20 border-green-500/30";
-      default:
-        return "bg-gray-500/20 border-gray-500/30";
-    }
-  };
-
   const handleDeleteElement = () => {
     removeElementFromTrack(track.id, element.id);
     setElementMenuOpen(false);
@@ -271,7 +265,7 @@ export function TimelineElement({
       onMouseLeave={resizing ? handleResizeEnd : undefined}
     >
       <div
-        className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackColor(
+        className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
           track.type
         )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
           isBeingDragged ? "z-50" : "z-10"
-- 
cgit v1.3.1