From 2aa37920d5f183f9c0de2c42076fa57c5b48320e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 24 Jun 2025 17:51:34 +0200
Subject: refactor: overhaul timeline component, separate into different files

---
 .../components/editor/timeline/timeline-clip.tsx   | 192 +++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 apps/web/src/components/editor/timeline/timeline-clip.tsx

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

diff --git a/apps/web/src/components/editor/timeline/timeline-clip.tsx b/apps/web/src/components/editor/timeline/timeline-clip.tsx
new file mode 100644
index 00000000..69740cd7
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/timeline-clip.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { Button } from "../../ui/button";
+import { MoreVertical, Scissors, Trash2 } from "lucide-react";
+import { useMediaStore } from "@/stores/media-store";
+import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { type TimelineClip } from "@/types/timeline";
+import { useState } from "react";
+
+interface TimelineClipProps {
+  clip: TimelineClip;
+  track: TimelineTrack;
+  zoomLevel: number;
+  isSelected: boolean;
+  onResizeStart: (
+    e: React.MouseEvent,
+    clipId: string,
+    side: "left" | "right"
+  ) => void;
+  onClipDragStart: (e: React.DragEvent, clip: any) => void;
+  onClipDragEnd: (e: React.DragEvent) => void;
+  onSelect: (e: React.MouseEvent) => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  getTrackColor: (type: string) => string;
+}
+
+export function TimelineClip({
+  clip,
+  track,
+  zoomLevel,
+  isSelected,
+  onResizeStart,
+  onClipDragStart,
+  onClipDragEnd,
+  onSelect,
+  onContextMenu,
+  getTrackColor,
+}: TimelineClipProps) {
+  const { mediaItems } = useMediaStore();
+  const { addClipToTrack, updateClipTrim, removeClipFromTrack } =
+    useTimelineStore();
+  const { currentTime } = usePlaybackStore();
+  const [clipMenuOpen, setClipMenuOpen] = useState<string | null>(null);
+
+  const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
+  const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
+  const clipLeft = clip.startTime * 50 * zoomLevel;
+
+  const renderClipContent = (clip: TimelineClip) => {
+    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+
+    if (!mediaItem) {
+      return (
+        <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+      );
+    }
+
+    if (mediaItem.type === "image") {
+      return (
+        <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>
+      );
+    }
+
+    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+      return (
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="w-8 h-8 flex-shrink-0">
+            <img
+              src={mediaItem.thumbnailUrl}
+              alt={mediaItem.name}
+              className="w-full h-full object-cover rounded-sm"
+            />
+          </div>
+          <span className="text-xs text-foreground/80 truncate flex-1">
+            {clip.name}
+          </span>
+        </div>
+      );
+    }
+
+    // Fallback for audio or videos without thumbnails
+    return (
+      <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+    );
+  };
+
+  const handleSplitClip = (clip: TimelineClip) => {
+    // Use current playback time as split point
+    const splitTime = currentTime;
+
+    // Only split if splitTime is within the clip's effective range
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+
+    const firstDuration = splitTime - effectiveStart;
+    const secondDuration = effectiveEnd - splitTime;
+
+    // First part: adjust original clip
+    updateClipTrim(
+      track.id,
+      clip.id,
+      clip.trimStart,
+      clip.trimEnd + secondDuration
+    );
+
+    // Second part: add new clip after split
+    addClipToTrack(track.id, {
+      mediaId: clip.mediaId,
+      name: clip.name + " (cut)",
+      duration: clip.duration,
+      startTime: splitTime,
+      trimStart: clip.trimStart + firstDuration,
+      trimEnd: clip.trimEnd,
+    });
+  };
+
+  const handleDeleteClip = (clipId: string) => {
+    removeClipFromTrack(track.id, clipId);
+  };
+
+  return (
+    <div
+      className={`timeline-clip absolute h-full border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
+      style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
+      onClick={onSelect}
+      tabIndex={0}
+      onContextMenu={onContextMenu}
+    >
+      {/* Left trim handle */}
+      <div
+        className="absolute left-0 top-0 bottom-0 w-2 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
+        onMouseDown={(e) => onResizeStart(e, clip.id, "left")}
+      />
+
+      {/* Clip content */}
+      <div
+        className="flex-1 cursor-grab active:cursor-grabbing relative"
+        draggable={true}
+        onDragStart={(e) => onClipDragStart(e, clip)}
+        onDragEnd={onClipDragEnd}
+      >
+        {renderClipContent(clip)}
+
+        {/* Clip options menu */}
+        <div className="absolute top-1 right-1 z-10">
+          <Button
+            variant="text"
+            size="icon"
+            className="opacity-0 group-hover:opacity-100 transition-opacity"
+            onClick={() => setClipMenuOpen(clip.id)}
+          >
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+          {clipMenuOpen === clip.id && (
+            <div className="absolute right-0 mt-2 w-32 bg-white border rounded shadow z-50">
+              <button
+                className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
+                onClick={() => {
+                  handleSplitClip(clip);
+                  setClipMenuOpen(null);
+                }}
+              >
+                <Scissors className="h-4 w-4 mr-2" /> Split
+              </button>
+              <button
+                className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                onClick={() => handleDeleteClip(clip.id)}
+              >
+                <Trash2 className="h-4 w-4 mr-2" /> Delete
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right trim handle */}
+      <div
+        className="absolute right-0 top-0 bottom-0 w-2 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
+        onMouseDown={(e) => onResizeStart(e, clip.id, "right")}
+      />
+    </div>
+  );
+}
-- 
cgit v1.3.1