style: set min/max height for timeline

1 files changed, 136 insertions, 63 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index f1dd04a7..c397dd1a 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -40,10 +40,32 @@ export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.

   // You can drag media here to add it to your project.

   // Clips can be trimmed, deleted, and moved.

-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } =

-    useTimelineStore();

+  const {

+    tracks,

+    addTrack,

+    addClipToTrack,

+    removeTrack,

+    toggleTrackMute,

+    removeClipFromTrack,

+    getTotalDuration,

+    selectedClips,

+    clearSelectedClips,

+    setSelectedClips,

+    updateClipTrim,

+    undo,

+    redo,

+  } = useTimelineStore();

   const { mediaItems, addMediaItem } = useMediaStore();

-  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();

+  const {

+    currentTime,

+    duration,

+    seek,

+    setDuration,

+    isPlaying,

+    toggle,

+    setSpeed,

+    speed,

+  } = usePlaybackStore();

   const [isDragOver, setIsDragOver] = useState(false);

   const [isProcessing, setIsProcessing] = useState(false);

   const [zoomLevel, setZoomLevel] = useState(1);

@@ -53,7 +75,7 @@ export function Timeline() {
 

   // Unified context menu state

   const [contextMenu, setContextMenu] = useState<{

-    type: 'track' | 'clip';

+    type: "track" | "clip";

     trackId: string;

     clipId?: string;

     x: number;

@@ -92,7 +114,10 @@ export function Timeline() {
   // Keyboard event for deleting selected clips

   useEffect(() => {

     const handleKeyDown = (e: KeyboardEvent) => {

-      if ((e.key === "Delete" || e.key === "Backspace") && selectedClips.length > 0) {

+      if (

+        (e.key === "Delete" || e.key === "Backspace") &&

+        selectedClips.length > 0

+      ) {

         selectedClips.forEach(({ trackId, clipId }) => {

           removeClipFromTrack(trackId, clipId);

         });

@@ -148,10 +173,15 @@ export function Timeline() {
   useEffect(() => {

     if (!marquee || !marquee.active) return;

     const handleMouseMove = (e: MouseEvent) => {

-      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY });

+      setMarquee(

+        (prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY }

+      );

     };

     const handleMouseUp = (e: MouseEvent) => {

-      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false });

+      setMarquee(

+        (prev) =>

+          prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }

+      );

     };

     window.addEventListener("mousemove", handleMouseMove);

     window.addEventListener("mouseup", handleMouseUp);

@@ -177,7 +207,8 @@ export function Timeline() {
       return;

     }

     // Clamp to timeline bounds

-    const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));

+    const clamp = (val: number, min: number, max: number) =>

+      Math.max(min, Math.min(max, val));

     const bx1 = clamp(x1, 0, rect.width);

     const bx2 = clamp(x2, 0, rect.width);

     const by1 = clamp(y1, 0, rect.height);

@@ -203,10 +234,14 @@ export function Timeline() {
     });

     if (newSelection.length > 0) {

       if (marquee.additive) {

-        const selectedSet = new Set(selectedClips.map((c) => c.trackId + ':' + c.clipId));

+        const selectedSet = new Set(

+          selectedClips.map((c) => c.trackId + ":" + c.clipId)

+        );

         newSelection = [

           ...selectedClips,

-          ...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)),

+          ...newSelection.filter(

+            (c) => !selectedSet.has(c.trackId + ":" + c.clipId)

+          ),

         ];

       }

       setSelectedClips(newSelection);

@@ -214,7 +249,14 @@ export function Timeline() {
       clearSelectedClips();

     }

     setMarquee(null);

-  }, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]);

+  }, [

+    marquee,

+    tracks,

+    zoomLevel,

+    selectedClips,

+    setSelectedClips,

+    clearSelectedClips,

+  ]);

 

   const handleDragEnter = (e: React.DragEvent) => {

     // When something is dragged over the timeline, show overlay

@@ -254,7 +296,9 @@ export function Timeline() {
     dragCounterRef.current = 0;

 

     // Ignore timeline clip drags - they're handled by track-specific handlers

-    const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip");

+    const hasTimelineClip = e.dataTransfer.types.includes(

+      "application/x-timeline-clip"

+    );

     if (hasTimelineClip) {

       return;

     }

@@ -327,14 +371,14 @@ export function Timeline() {
     const clickX = e.clientX - rect.left;

     const clickedTime = clickX / (50 * zoomLevel);

     const clampedTime = Math.max(0, Math.min(duration, clickedTime));

-    

+

     seek(clampedTime);

   };

 

   const handleTimelineAreaClick = (e: React.MouseEvent) => {

     if (e.target === e.currentTarget) {

       clearSelectedClips();

-      

+

       // Calculate the clicked time position and seek to it

       handleSeekToPosition(e);

     }

@@ -351,21 +395,27 @@ export function Timeline() {
   };

 

   // --- Playhead Scrubbing Handlers ---

-  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {

-    e.preventDefault();

-    setIsScrubbing(true);

-    handleScrub(e);

-  }, [duration, zoomLevel]);

+  const handlePlayheadMouseDown = useCallback(

+    (e: React.MouseEvent) => {

+      e.preventDefault();

+      setIsScrubbing(true);

+      handleScrub(e);

+    },

+    [duration, zoomLevel]

+  );

 

-  const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {

-    const timeline = timelineRef.current;

-    if (!timeline) return;

-    const rect = timeline.getBoundingClientRect();

-    const x = e.clientX - rect.left;

-    const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));

-    setScrubTime(time);

-    seek(time); // update video preview in real time

-  }, [duration, zoomLevel, seek]);

+  const handleScrub = useCallback(

+    (e: MouseEvent | React.MouseEvent) => {

+      const timeline = timelineRef.current;

+      if (!timeline) return;

+      const rect = timeline.getBoundingClientRect();

+      const x = e.clientX - rect.left;

+      const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));

+      setScrubTime(time);

+      seek(time); // update video preview in real time

+    },

+    [duration, zoomLevel, seek]

+  );

 

   useEffect(() => {

     if (!isScrubbing) return;

@@ -383,7 +433,8 @@ export function Timeline() {
     };

   }, [isScrubbing, scrubTime, seek, handleScrub]);

 

-  const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;

+  const playheadPosition =

+    isScrubbing && scrubTime !== null ? scrubTime : currentTime;

 

   const dragProps = {

     onDragEnter: handleDragEnter,

@@ -399,14 +450,20 @@ export function Timeline() {
       return;

     }

     selectedClips.forEach(({ trackId, clipId }) => {

-      const track = tracks.find(t => t.id === trackId);

-      const clip = track?.clips.find(c => c.id === clipId);

+      const track = tracks.find((t) => t.id === trackId);

+      const clip = track?.clips.find((c) => c.id === clipId);

       if (clip && track) {

         const splitTime = currentTime;

         const effectiveStart = clip.startTime;

-        const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

+        const effectiveEnd =

+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

         if (splitTime > effectiveStart && splitTime < effectiveEnd) {

-          updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime));

+          updateClipTrim(

+            track.id,

+            clip.id,

+            clip.trimStart,

+            clip.trimEnd + (effectiveEnd - splitTime)

+          );

           addClipToTrack(track.id, {

             mediaId: clip.mediaId,

             name: clip.name + " (split)",

@@ -427,14 +484,17 @@ export function Timeline() {
       return;

     }

     selectedClips.forEach(({ trackId, clipId }) => {

-      const track = tracks.find(t => t.id === trackId);

-      const clip = track?.clips.find(c => c.id === clipId);

+      const track = tracks.find((t) => t.id === trackId);

+      const clip = track?.clips.find((c) => c.id === clipId);

       if (clip && track) {

         addClipToTrack(track.id, {

           mediaId: clip.mediaId,

           name: clip.name + " (copy)",

           duration: clip.duration,

-          startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,

+          startTime:

+            clip.startTime +

+            (clip.duration - clip.trimStart - clip.trimEnd) +

+            0.1,

           trimStart: clip.trimStart,

           trimEnd: clip.trimEnd,

         });

@@ -449,8 +509,8 @@ export function Timeline() {
       return;

     }

     selectedClips.forEach(({ trackId, clipId }) => {

-      const track = tracks.find(t => t.id === trackId);

-      const clip = track?.clips.find(c => c.id === clipId);

+      const track = tracks.find((t) => t.id === trackId);

+      const clip = track?.clips.find((c) => c.id === clipId);

       if (clip && track) {

         // Add a new freeze frame clip at the playhead

         addClipToTrack(track.id, {

@@ -478,20 +538,23 @@ export function Timeline() {
     toast.success("Deleted selected clip(s)");

   };

 

-

   // Prevent explorer zooming in/out when in timeline

   useEffect(() => {

     const preventZoom = (e: WheelEvent) => {

       // if (isInTimeline && (e.ctrlKey || e.metaKey)) {

-      if (isInTimeline && (e.ctrlKey || e.metaKey) && timelineRef.current?.contains(e.target as Node)) {

+      if (

+        isInTimeline &&

+        (e.ctrlKey || e.metaKey) &&

+        timelineRef.current?.contains(e.target as Node)

+      ) {

         e.preventDefault();

       }

     };

 

-    document.addEventListener('wheel', preventZoom, { passive: false });

-    

+    document.addEventListener("wheel", preventZoom, { passive: false });

+

     return () => {

-      document.removeEventListener('wheel', preventZoom);

+      document.removeEventListener("wheel", preventZoom);

     };

   }, [isInTimeline]);

 

@@ -820,15 +883,15 @@ export function Timeline() {
           {/* Timeline Tracks Content */}

           <div className="flex-1 relative overflow-hidden">

             <div

-              className="w-full h-[600px] overflow-hidden flex"

+              className="w-full h-full overflow-hidden flex"

               ref={timelineRef}

               style={{ position: "relative" }}

             >

-              {/* Timeline grid and clips area (with left margin for sidebar) */}

+              {/* Timeline grid and clips area (with left margin for sifdebar) */}

               <div

                 className="relative flex-1"

                 style={{

-                  height: `${tracks.length * 60}px`,

+                  height: `${Math.max(200, Math.min(800, tracks.length * 60))}px`,

                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,

                 }}

                 onClick={handleTimelineAreaClick}

@@ -1057,7 +1120,15 @@ function TimelineTrackContent({
 }: {

   track: TimelineTrack;

   zoomLevel: number;

-  setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void;

+  setContextMenu: (

+    menu: {

+      type: "track" | "clip";

+      trackId: string;

+      clipId?: string;

+      x: number;

+      y: number;

+    } | null

+  ) => void;

 }) {

   const { mediaItems } = useMediaStore();

   const {

@@ -1202,7 +1273,7 @@ function TimelineTrackContent({
             return;

           }

         }

-      } catch (error) { }

+      } catch (error) {}

     }

 

     // Calculate drop position for overlap checking

@@ -1580,18 +1651,19 @@ function TimelineTrackContent({
 

   return (

     <div

-      className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver

-        ? wouldOverlap

-          ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"

-          : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"

-        : "hover:bg-muted/20"

-        }`}

+      className={`w-full h-full transition-all duration-150 ease-out ${

+        isDraggedOver

+          ? wouldOverlap

+            ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"

+            : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"

+          : "hover:bg-muted/20"

+      }`}

       onContextMenu={(e) => {

         e.preventDefault();

         // Only show track menu if we didn't click on a clip

         if (!(e.target as HTMLElement).closest(".timeline-clip")) {

           setContextMenu({

-            type: 'track',

+            type: "track",

             trackId: track.id,

             x: e.clientX,

             y: e.clientY,

@@ -1609,12 +1681,13 @@ function TimelineTrackContent({
       <div className="h-full relative track-clips-container min-w-full">

         {track.clips.length === 0 ? (

           <div

-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping

-              ? wouldOverlap

-                ? "border-red-500 bg-red-500/10 text-red-600"

-                : "border-blue-500 bg-blue-500/10 text-blue-600"

-              : "border-muted/30"

-              }`}

+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${

+              isDropping

+                ? wouldOverlap

+                  ? "border-red-500 bg-red-500/10 text-red-600"

+                  : "border-blue-500 bg-blue-500/10 text-blue-600"

+                : "border-muted/30"

+            }`}

           >

             {isDropping

               ? wouldOverlap

@@ -1645,7 +1718,7 @@ function TimelineTrackContent({
                     const isSelected = selectedClips.some(

                       (c) => c.trackId === track.id && c.clipId === clip.id

                     );

-                    

+

                     if (e.metaKey || e.ctrlKey || e.shiftKey) {

                       // Multi-selection mode: toggle the clip

                       selectClip(track.id, clip.id, true);

@@ -1662,7 +1735,7 @@ function TimelineTrackContent({
                     e.preventDefault();

                     e.stopPropagation();

                     setContextMenu({

-                      type: 'clip',

+                      type: "clip",

                       trackId: track.id,

                       clipId: clip.id,

                       x: e.clientX,