Merge pull request #283 from KhacTuanIT/feature/optimize-timeline-ruler

Optimize timeline performance

5 files changed, 211 insertions, 173 deletions

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..dc0dd4b2 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -83,7 +83,11 @@ export function PropertiesPanel() {
               );
 
               if (mediaItem?.type === "audio") {
-                return <AudioProperties element={element} />;
+                return (
+                  <div key={elementId}>
+                    <AudioProperties element={element} />
+                  </div>
+                );
               }
 
               return (
diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
new file mode 100644
index 00000000..c0efc19e
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
@@ -0,0 +1,24 @@
+import { TimelineCanvasRulerWrapperProps } from "@/types/timeline";
+import React, { forwardRef } from "react";
+
+/**
+ * Wrapper div around the canvas-based timeline ruler.
+ * Captures mouse events for scrubbing and ensures pointer events are properly enabled.
+ */
+const TimelineCanvasRulerWrapper = forwardRef<
+  HTMLDivElement,
+  TimelineCanvasRulerWrapperProps
+>(({ children, onMouseDown, className = "" }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`relative overflow-hidden h-5 w-full select-none cursor-pointer ${className}`}
+      onMouseDown={onMouseDown}
+      data-ruler-wrapper
+    >
+      {children}
+    </div>
+  );
+});
+
+export default TimelineCanvasRulerWrapper;
diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx
new file mode 100644
index 00000000..c40cdbda
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx
@@ -0,0 +1,78 @@
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { TimelineCanvasRulerProps } from "@/types/timeline";
+import React, { useRef, useEffect } from "react";
+
+/**
+ * TimelineCanvasRuler renders the timeline ticks and labels using Canvas.
+ * Should be wrapped by TimelineCanvasRulerWrapper for interaction handling.
+ */
+export default function TimelineCanvasRuler({
+  zoomLevel,
+  duration,
+  width,
+  height = 20,
+}: TimelineCanvasRulerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, width, height);
+
+    const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+
+    const getTimeInterval = () => {
+      if (pixelsPerSecond >= 200) return 0.1;
+      if (pixelsPerSecond >= 100) return 0.5;
+      if (pixelsPerSecond >= 50) return 1;
+      if (pixelsPerSecond >= 25) return 2;
+      if (pixelsPerSecond >= 12) return 5;
+      if (pixelsPerSecond >= 6) return 10;
+      return 30;
+    };
+
+    const mainInterval = getTimeInterval();
+    const tickPerMain = 5;
+    const subInterval = mainInterval / tickPerMain;
+
+    const totalTicks = Math.ceil(duration / subInterval) + 1;
+
+    for (let i = 0; i < totalTicks; i++) {
+      const time = i * subInterval;
+      const x = time * pixelsPerSecond;
+
+      const isMain = i % tickPerMain === 0;
+
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, isMain ? height * 0.3 : height * 0.1);
+      ctx.strokeStyle = isMain ? "#999" : "#ccc";
+      ctx.lineWidth = isMain ? 1 : 0.5;
+      ctx.stroke();
+
+      // Label
+      if (isMain) {
+        ctx.fillStyle = "#666";
+        ctx.font = "10px sans-serif";
+        const mins = Math.floor(time / 60);
+        const secs = Math.floor(time % 60);
+        let label = "";
+        let xTranslate = 10;
+        if (mainInterval < 1) {
+          label = `${time.toFixed(1)}s`;
+        } else if (mins > 0) {
+          label = `${mins}:${secs.toString().padStart(2, "0")}`;
+        } else {
+          label = `${secs}s`;
+          xTranslate = 5;
+        }
+        ctx.fillText(label, x - xTranslate, height - 4);
+      }
+    }
+  }, [zoomLevel, duration, width, height]);
+
+  return (
+    <canvas ref={canvasRef} width={width} height={height} className="block" />
+  );
+}
diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx
index 78aed3a8..390abc3d 100644
--- a/apps/web/src/components/editor/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline-playhead.tsx
@@ -2,10 +2,7 @@
 

 import { useRef } from "react";

 import { TimelineTrack } from "@/types/timeline";

-import {

-  TIMELINE_CONSTANTS,

-  getTotalTracksHeight,

-} from "@/constants/timeline-constants";

+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

 import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";

 

 interface TimelinePlayheadProps {

@@ -16,7 +13,6 @@ interface TimelinePlayheadProps {
   seek: (time: number) => void;

   rulerRef: React.RefObject<HTMLDivElement>;

   rulerScrollRef: React.RefObject<HTMLDivElement>;

-  tracksScrollRef: React.RefObject<HTMLDivElement>;

   trackLabelsRef?: React.RefObject<HTMLDivElement>;

   timelineRef: React.RefObject<HTMLDivElement>;

   playheadRef?: React.RefObject<HTMLDivElement>;

@@ -31,7 +27,6 @@ export function TimelinePlayhead({
   seek,

   rulerRef,

   rulerScrollRef,

-  tracksScrollRef,

   trackLabelsRef,

   timelineRef,

   playheadRef: externalPlayheadRef,

@@ -39,15 +34,13 @@ export function TimelinePlayhead({
 }: TimelinePlayheadProps) {

   const internalPlayheadRef = useRef<HTMLDivElement>(null);

   const playheadRef = externalPlayheadRef || internalPlayheadRef;

-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({

+  const { playheadPosition, handleRulerMouseDown } = useTimelinePlayhead({

     currentTime,

     duration,

     zoomLevel,

     seek,

     rulerRef,

     rulerScrollRef,

-    tracksScrollRef,

-    playheadRef,

   });

 

   // Use timeline container height minus a few pixels for breathing room

@@ -66,14 +59,14 @@ export function TimelinePlayhead({
   return (

     <div

       ref={playheadRef}

-      className="absolute pointer-events-auto z-[100]"

+      className="absolute pointer-events-auto z-[50]"

       style={{

         left: `${leftPosition}px`,

         top: 0,

         height: `${totalHeight}px`,

         width: "2px", // Slightly wider for better click target

       }}

-      onMouseDown={handlePlayheadMouseDown}

+      onMouseDown={handleRulerMouseDown}

     >

       {/* The playhead line spanning full height */}

       <div

@@ -96,21 +89,24 @@ export function useTimelinePlayheadRuler({
   seek,

   rulerRef,

   rulerScrollRef,

-  tracksScrollRef,

-  playheadRef,

-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {

-  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({

+}: Omit<

+  TimelinePlayheadProps,

+  | "tracks"

+  | "trackLabelsRef"

+  | "timelineRef"

+  | "tracksScrollRef"

+  | "playheadRef"

+>) {

+  const { handleRulerMouseDown } = useTimelinePlayhead({

     currentTime,

     duration,

     zoomLevel,

     seek,

     rulerRef,

     rulerScrollRef,

-    tracksScrollRef,

-    playheadRef,

   });

 

-  return { handleRulerMouseDown, isDraggingRuler };

+  return { handleRulerMouseDown };

 }

 

 export { TimelinePlayhead as default };

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 539846b3..bfb663c6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -16,6 +16,8 @@ import {
   Music,
   TypeIcon,
   Lock,
+  ZoomIn,
+  ZoomOut,
   LockOpen,
 } from "lucide-react";
 import {
@@ -55,6 +57,9 @@ import {
   TIMELINE_CONSTANTS,
   snapTimeToFrame,
 } from "@/constants/timeline-constants";
+import { Slider } from "../ui/slider";
+import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";
+import TimelineCanvasRulerWrapper from "./timeline-canvas/timeline-canvas-ruler-wrapper";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their elements.
@@ -94,10 +99,13 @@ export function Timeline() {
   const [isInTimeline, setIsInTimeline] = useState(false);
 
   // Timeline zoom functionality
-  const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
-    containerRef: timelineRef,
-    isInTimeline,
-  });
+  const {
+    zoomLevel,
+    zoomStep,
+    handleChangeZoomLevel,
+    handleChangeZoomStep,
+    handleWheel,
+  } = useTimelineZoom();
 
   // Old marquee selection removed - using new SelectionBox component instead
 
@@ -110,7 +118,6 @@ export function Timeline() {
 
   // Scroll synchronization and auto-scroll to playhead
   const rulerScrollRef = useRef<HTMLDivElement>(null);
-  const tracksScrollRef = useRef<HTMLDivElement>(null);
   const trackLabelsRef = useRef<HTMLDivElement>(null);
   const playheadRef = useRef<HTMLDivElement>(null);
   const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
@@ -127,8 +134,6 @@ export function Timeline() {
     seek,
     rulerRef,
     rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
   });
 
   // Selection box functionality
@@ -198,14 +203,14 @@ export function Timeline() {
       clearSelectedElements();
 
       // Determine if we're clicking in ruler or tracks area
-      const isRulerClick = (e.target as HTMLElement).closest(
-        "[data-ruler-area]"
+      const isTracksAreaClick = (e.target as HTMLElement).closest(
+        "[data-tracks-area]"
       );
 
       let mouseX: number;
       let scrollLeft = 0;
 
-      if (isRulerClick) {
+      if (isTracksAreaClick) {
         // Calculate based on ruler position
         const rulerContent = rulerScrollRef.current?.querySelector(
           "[data-radix-scroll-area-viewport]"
@@ -215,14 +220,7 @@ export function Timeline() {
         mouseX = e.clientX - rect.left;
         scrollLeft = rulerContent.scrollLeft;
       } else {
-        // Calculate based on tracks content position
-        const tracksContent = tracksScrollRef.current?.querySelector(
-          "[data-radix-scroll-area-viewport]"
-        ) as HTMLElement;
-        if (!tracksContent) return;
-        const rect = tracksContent.getBoundingClientRect();
-        mouseX = e.clientX - rect.left;
-        scrollLeft = tracksContent.scrollLeft;
+        return;
       }
 
       const rawTime = Math.max(
@@ -245,7 +243,6 @@ export function Timeline() {
       zoomLevel,
       seek,
       rulerScrollRef,
-      tracksScrollRef,
       clearSelectedElements,
       isSelecting,
       justFinishedSelecting,
@@ -509,14 +506,11 @@ export function Timeline() {
     const rulerViewport = rulerScrollRef.current?.querySelector(
       "[data-radix-scroll-area-viewport]"
     ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
     const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
       "[data-radix-scroll-area-viewport]"
     ) as HTMLElement;
 
-    if (!rulerViewport || !tracksViewport) return;
+    if (!rulerViewport) return;
 
     // Horizontal scroll synchronization between ruler and tracks
     const handleRulerScroll = () => {
@@ -524,7 +518,6 @@ export function Timeline() {
       if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
       lastRulerSync.current = now;
       isUpdatingRef.current = true;
-      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
       isUpdatingRef.current = false;
     };
     const handleTracksScroll = () => {
@@ -532,12 +525,10 @@ export function Timeline() {
       if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
       lastTracksSync.current = now;
       isUpdatingRef.current = true;
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
       isUpdatingRef.current = false;
     };
 
     rulerViewport.addEventListener("scroll", handleRulerScroll);
-    tracksViewport.addEventListener("scroll", handleTracksScroll);
 
     // Vertical scroll synchronization between track labels and tracks content
     if (trackLabelsViewport) {
@@ -547,7 +538,6 @@ export function Timeline() {
           return;
         lastVerticalSync.current = now;
         isUpdatingRef.current = true;
-        tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
         isUpdatingRef.current = false;
       };
       const handleTracksVerticalScroll = () => {
@@ -556,30 +546,22 @@ export function Timeline() {
           return;
         lastVerticalSync.current = now;
         isUpdatingRef.current = true;
-        trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
         isUpdatingRef.current = false;
       };
 
       trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
-      tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
 
       return () => {
         rulerViewport.removeEventListener("scroll", handleRulerScroll);
-        tracksViewport.removeEventListener("scroll", handleTracksScroll);
         trackLabelsViewport.removeEventListener(
           "scroll",
           handleTrackLabelsScroll
         );
-        tracksViewport.removeEventListener(
-          "scroll",
-          handleTracksVerticalScroll
-        );
       };
     }
 
     return () => {
       rulerViewport.removeEventListener("scroll", handleRulerScroll);
-      tracksViewport.removeEventListener("scroll", handleTracksScroll);
     };
   }, []);
 
@@ -739,6 +721,39 @@ export function Timeline() {
               </TooltipTrigger>
               <TooltipContent>Delete element (Delete)</TooltipContent>
             </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className="ml-auto"
+                  variant="text"
+                  size="icon"
+                  onClick={() => handleChangeZoomLevel(zoomLevel - 0.15)}
+                >
+                  <ZoomOut className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Zoom Out</TooltipContent>
+            </Tooltip>
+            <Slider
+              className="max-w-24"
+              max={TIMELINE_CONSTANTS.MAX_ZOOM_STEP}
+              min={0}
+              step={1}
+              value={[zoomStep]}
+              onValueChange={(value) => handleChangeZoomStep(value[0])}
+            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="text"
+                  size="icon"
+                  onClick={() => handleChangeZoomLevel(zoomLevel + 0.15)}
+                >
+                  <ZoomIn className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Zoom In</TooltipContent>
+            </Tooltip>
           </TooltipProvider>
         </div>
         <div className="flex items-center gap-1">
@@ -772,7 +787,6 @@ export function Timeline() {
           seek={seek}
           rulerRef={rulerRef}
           rulerScrollRef={rulerScrollRef}
-          tracksScrollRef={tracksScrollRef}
           trackLabelsRef={trackLabelsRef}
           timelineRef={timelineRef}
           playheadRef={playheadRef}
@@ -790,114 +804,38 @@ export function Timeline() {
         />
         {/* Timeline Header with Ruler */}
         <div className="flex bg-panel sticky top-0 z-10">
-          {/* Track Labels Header */}
-          <div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
-            {/* Empty space */}
-            <span className="text-sm font-medium text-muted-foreground opacity-0">
-              .
-            </span>
-          </div>
+          <div className="w-48 flex-shrink-0 bg-muted/30 border-r h-5 px-3" />
 
-          {/* Timeline Ruler */}
-          <div
-            className="flex-1 relative overflow-hidden h-4"
-            onWheel={handleWheel}
-            onMouseDown={handleSelectionMouseDown}
-            onClick={handleTimelineContentClick}
-            data-ruler-area
-          >
+          <div className="flex-1 overflow-hidden h-5">
             <ScrollArea className="w-full" ref={rulerScrollRef}>
-              <div
+              <TimelineCanvasRulerWrapper
                 ref={rulerRef}
-                className="relative h-4 select-none cursor-default"
-                style={{
-                  width: `${dynamicTimelineWidth}px`,
-                }}
                 onMouseDown={handleRulerMouseDown}
               >
-                {/* Time markers */}
-                {(() => {
-                  // Calculate appropriate time interval based on zoom level
-                  const getTimeInterval = (zoom: number) => {
-                    const pixelsPerSecond =
-                      TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
-                    if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
-                    if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
-                    if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
-                    if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
-                    if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
-                    if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
-                    return 30; // Every 30s when extremely zoomed out
-                  };
-
-                  const interval = getTimeInterval(zoomLevel);
-                  const markerCount = Math.ceil(duration / interval) + 1;
-
-                  return Array.from({ length: markerCount }, (_, i) => {
-                    const time = i * interval;
-                    if (time > duration) return null;
-
-                    const isMainMarker =
-                      time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-
-                    return (
-                      <div
-                        key={i}
-                        className={`absolute top-0 bottom-0 ${
-                          isMainMarker
-                            ? "border-l border-muted-foreground/40"
-                            : "border-l border-muted-foreground/20"
-                        }`}
-                        style={{
-                          left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-                        }}
-                      >
-                        <span
-                          className={`absolute top-1 left-1 text-[0.6rem] ${
-                            isMainMarker
-                              ? "text-muted-foreground font-medium"
-                              : "text-muted-foreground/70"
-                          }`}
-                        >
-                          {(() => {
-                            const formatTime = (seconds: number) => {
-                              const hours = Math.floor(seconds / 3600);
-                              const minutes = Math.floor((seconds % 3600) / 60);
-                              const secs = seconds % 60;
-
-                              if (hours > 0) {
-                                return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
-                              } else if (minutes > 0) {
-                                return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
-                              } else if (interval >= 1) {
-                                return `${Math.floor(secs)}s`;
-                              } else {
-                                return `${secs.toFixed(1)}s`;
-                              }
-                            };
-                            return formatTime(time);
-                          })()}
-                        </span>
-                      </div>
-                    );
-                  }).filter(Boolean);
-                })()}
-              </div>
+                <TimelineCanvasRuler
+                  zoomLevel={zoomLevel}
+                  duration={duration}
+                  width={dynamicTimelineWidth}
+                />
+              </TimelineCanvasRulerWrapper>
             </ScrollArea>
           </div>
         </div>
 
         {/* Tracks Area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Track Labels */}
-          {tracks.length > 0 && (
-            <div
-              ref={trackLabelsRef}
-              className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto"
-              data-track-labels
-            >
-              <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
-                <div className="flex flex-col gap-1">
+        <ScrollArea className="w-full h-full">
+          <div
+            className="flex-1 flex overflow-hidden overflow-y-auto"
+            data-tracks-area
+          >
+            {/* Track Labels */}
+            {tracks.length > 0 && (
+              <div
+                ref={trackLabelsRef}
+                className="w-48 flex-shrink-0 border-r bg-panel-accent "
+                data-track-labels
+              >
+                <div className="flex flex-col gap-1" ref={trackLabelsScrollRef}>
                   {tracks.map((track) => (
                     <div
                       key={track.id}
@@ -915,25 +853,23 @@ export function Timeline() {
                     </div>
                   ))}
                 </div>
-              </ScrollArea>
-            </div>
-          )}
+              </div>
+            )}
 
-          {/* Timeline Tracks Content */}
-          <div
-            className="flex-1 relative overflow-hidden"
-            onWheel={handleWheel}
-            onMouseDown={handleSelectionMouseDown}
-            onClick={handleTimelineContentClick}
-            ref={tracksContainerRef}
-          >
-            <SelectionBox
-              startPos={selectionBox?.startPos || null}
-              currentPos={selectionBox?.currentPos || null}
-              containerRef={tracksContainerRef}
-              isActive={selectionBox?.isActive || false}
-            />
-            <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
+            {/* Timeline Tracks Content */}
+            <div
+              className="flex-1 relative overflow-hidden"
+              onWheel={handleWheel}
+              onMouseDown={handleSelectionMouseDown}
+              onClick={handleTimelineContentClick}
+              ref={tracksContainerRef}
+            >
+              <SelectionBox
+                startPos={selectionBox?.startPos || null}
+                currentPos={selectionBox?.currentPos || null}
+                containerRef={tracksContainerRef}
+                isActive={selectionBox?.isActive || false}
+              />
               <div
                 className="relative flex-1"
                 style={{
@@ -987,9 +923,9 @@ export function Timeline() {
                   </>
                 )}
               </div>
-            </ScrollArea>
+            </div>
           </div>
-        </div>
+        </ScrollArea>
       </div>
     </div>
   );