feat: implement timeline caching with cache indicator

2026-07-13 21:52:53 +02:00 · 2025-08-31 13:26:53 +02:00
parent 21dac9f09e
commit e222f15d1d
6 changed files with 672 additions and 66 deletions
@@ -57,6 +57,9 @@ import { useSelectionBox } from "@/hooks/use-selection-box";
 import { SnapIndicator } from "../snap-indicator";
 import { SnapPoint } from "@/hooks/use-timeline-snapping";
 import type { DragData, TimelineTrack, TrackType } from "@/types/timeline";
+import { TimelineCacheIndicator } from "./timeline-cache-indicator";
+import { TimelineMarker } from "./timeline-marker";
+import { useFrameCache } from "@/hooks/use-frame-cache";
 import {
  getTrackHeight,
  getCumulativeHeightBefore,
@@ -85,6 +88,7 @@ export function Timeline() {
  const { mediaFiles, addMediaFile } = useMediaStore();
  const { activeProject } = useProjectStore();
  const { currentTime, duration, seek, setDuration } = usePlaybackStore();
+  const { getRenderStatus } = useFrameCache();
  const [isDragOver, setIsDragOver] = useState(false);
  const { addElementToNewTrack } = useTimelineStore();
  const dragCounterRef = useRef(0);
@@ -637,7 +641,7 @@ export function Timeline() {
        {/* Timeline Header with Ruler */}
        <div className="flex bg-panel sticky top-0 z-10">
          {/* Track Labels Header */}
-          <div className="w-28 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
+          <div className="w-28 shrink-0 bg-panel border-r border-t flex items-center justify-between px-3 py-2">
            {/* Empty space */}
            <span className="text-sm font-medium text-muted-foreground opacity-0">
              .
@@ -658,7 +662,21 @@ export function Timeline() {
            onClick={handleTimelineContentClick}
            data-ruler-area
          >
-            <ScrollArea className="w-full" ref={rulerScrollRef}>
+            <ScrollArea
+              className="w-full"
+              ref={rulerScrollRef}
+              onScroll={(e) => {
+                if (isUpdatingRef.current) return;
+                isUpdatingRef.current = true;
+                const tracksViewport = tracksScrollRef.current;
+                if (tracksViewport) {
+                  tracksViewport.scrollLeft = (
+                    e.currentTarget as HTMLDivElement
+                  ).scrollLeft;
+                }
+                isUpdatingRef.current = false;
+              }}
+            >
              <div
                ref={rulerRef}
                className="relative h-10 select-none cursor-default"
@@ -667,6 +685,14 @@ export function Timeline() {
                }}
                onMouseDown={handleRulerMouseDown}
              >
+                <TimelineCacheIndicator
+                  duration={duration}
+                  zoomLevel={zoomLevel}
+                  tracks={tracks}
+                  mediaFiles={mediaFiles}
+                  activeProject={activeProject}
+                  getRenderStatus={getRenderStatus}
+                />
                {/* Time markers */}
                {(() => {
                  // Calculate appropriate time interval based on zoom level
@@ -693,55 +719,13 @@ export function Timeline() {
                      time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;

                    return (
-                      <div
+                      <TimelineMarker
                        key={i}
-                        className={`absolute top-0 h-4 ${
-                          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")}`;
-                              }
-                              if (minutes > 0) {
-                                return `${minutes}:${Math.floor(secs)
-                                  .toString()
-                                  .padStart(2, "0")}`;
-                              }
-                              if (interval >= 1) {
-                                return `${Math.floor(secs)}s`;
-                              }
-                              return `${secs.toFixed(1)}s`;
-                            };
-                            return formatTime(time);
-                          })()}
-                        </span>
-                      </div>
+                        time={time}
+                        zoomLevel={zoomLevel}
+                        interval={interval}
+                        isMainMarker={isMainMarker}
+                      />
                    );
                  }).filter(Boolean);
                })()}
@@ -836,7 +820,21 @@ export function Timeline() {
              containerRef={tracksContainerRef}
              isActive={selectionBox?.isActive || false}
            />
-            <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
+            <ScrollArea
+              className="w-full h-full"
+              ref={tracksScrollRef}
+              onScroll={(e) => {
+                if (isUpdatingRef.current) return;
+                isUpdatingRef.current = true;
+                const rulerViewport = rulerScrollRef.current;
+                if (rulerViewport) {
+                  rulerViewport.scrollLeft = (
+                    e.currentTarget as HTMLDivElement
+                  ).scrollLeft;
+                }
+                isUpdatingRef.current = false;
+              }}
+            >
              <div
                className="relative flex-1"
                style={{
@@ -1085,7 +1083,7 @@ function TimelineToolbar({

  const currentBookmarked = isBookmarked(currentTime);
  return (
-    <div className="border-b flex items-center justify-between px-2 py-1">
+    <div className=" flex items-center justify-between px-2 py-1">
      <div className="flex items-center gap-1 w-full">
        <TooltipProvider delayDuration={500}>
          <Tooltip>
@@ -0,0 +1,116 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { TimelineTrack } from "@/types/timeline";
+import { MediaFile } from "@/types/media";
+import { TProject } from "@/types/project";
+
+interface CacheSegment {
+  startTime: number;
+  endTime: number;
+  cached: boolean;
+}
+
+interface TimelineCacheIndicatorProps {
+  duration: number;
+  zoomLevel: number;
+  tracks: TimelineTrack[];
+  mediaFiles: MediaFile[];
+  activeProject: TProject | null;
+  getRenderStatus: (
+    time: number,
+    tracks: TimelineTrack[],
+    mediaFiles: MediaFile[],
+    activeProject: TProject | null
+  ) => "cached" | "not-cached";
+}
+
+export function TimelineCacheIndicator({
+  duration,
+  zoomLevel,
+  tracks,
+  mediaFiles,
+  activeProject,
+  getRenderStatus,
+}: TimelineCacheIndicatorProps) {
+  // Calculate cache segments by sampling the timeline
+  const calculateCacheSegments = (): CacheSegment[] => {
+    const segments: CacheSegment[] = [];
+    const sampleRate = 10; // Sample every 0.1 seconds
+    const totalSamples = Math.ceil(duration * sampleRate);
+
+    if (totalSamples === 0) {
+      return [{ startTime: 0, endTime: duration, cached: false }];
+    }
+
+    let currentSegment: CacheSegment | null = null;
+
+    for (let i = 0; i <= totalSamples; i++) {
+      const time = i / sampleRate;
+      const cached =
+        getRenderStatus(time, tracks, mediaFiles, activeProject) === "cached";
+
+      if (!currentSegment) {
+        // Start first segment
+        currentSegment = {
+          startTime: time,
+          endTime: time,
+          cached,
+        };
+      } else if (currentSegment.cached === cached) {
+        // Extend current segment
+        currentSegment.endTime = time;
+      } else {
+        // Finish current segment and start new one
+        segments.push(currentSegment);
+        currentSegment = {
+          startTime: time,
+          endTime: time,
+          cached,
+        };
+      }
+    }
+
+    // Add the last segment
+    if (currentSegment) {
+      currentSegment.endTime = duration;
+      segments.push(currentSegment);
+    }
+
+    return segments;
+  };
+
+  const cacheSegments = calculateCacheSegments();
+
+  return (
+    <div className="absolute top-0 left-0 right-0 h-px z-10 pointer-events-none">
+      {cacheSegments.map((segment, index) => {
+        const startX =
+          segment.startTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+        const endX =
+          segment.endTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+        const width = endX - startX;
+
+        return (
+          <div
+            key={index}
+            className={cn(
+              "absolute top-0 h-px",
+              segment.cached ? "bg-primary" : "bg-border"
+            )}
+            style={{
+              left: `${startX}px`,
+              width: `${width}px`,
+            }}
+            title={
+              segment.cached
+                ? "Cached (fast playback)"
+                : "Not cached (will render)"
+            }
+          />
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,67 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+
+interface TimelineMarkerProps {
+  time: number;
+  zoomLevel: number;
+  interval: number;
+  isMainMarker: boolean;
+}
+
+export function TimelineMarker({
+  time,
+  zoomLevel,
+  interval,
+  isMainMarker,
+}: TimelineMarkerProps) {
+  return (
+    <div
+      className={cn(
+        "absolute top-0 h-4",
+        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={cn(
+          "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")}`;
+            }
+            if (minutes > 0) {
+              return `${minutes}:${Math.floor(secs)
+                .toString()
+                .padStart(2, "0")}`;
+            }
+            if (interval >= 1) {
+              return `${Math.floor(secs)}s`;
+            }
+            return `${secs.toFixed(1)}s`;
+          };
+          return formatTime(time);
+        })()}
+      </span>
+    </div>
+  );
+}