Timeline improvements (#16429)

* virtualize event segments * use virtual segments in event review timeline * add segmentkey to props * virtualize motion segments * use virtual segments in motion review timeline * update draggable element hook to use only math * timeline zooming hook * add zooming to event review timeline * update playground * zoomable timeline on recording view * consolidate divs in summary timeline * only calculate motion data for visible motion segments * use swr loading state * fix motion only * keep handlebar centered when zooming * zoom animations * clean up * ensure motion only checks both halves of segment * prevent handlebar jump when using motion only mode
2026-10-21 18:52:37 +10:00 · 2025-02-09 14:13:32 -07:00
parent 1f89844c67
commit cc2dbdcb44
17 changed files with 1157 additions and 515 deletions
@@ -0,0 +1,251 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import MotionSegment from "./MotionSegment";
+import { ReviewSegment, MotionData } from "@/types/review";
+
+type VirtualizedMotionSegmentsProps = {
+  timelineRef: React.RefObject<HTMLDivElement>;
+  segments: number[];
+  events: ReviewSegment[];
+  motion_events: MotionData[];
+  segmentDuration: number;
+  timestampSpread: number;
+  showMinimap: boolean;
+  minimapStartTime?: number;
+  minimapEndTime?: number;
+  contentRef: React.RefObject<HTMLDivElement>;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
+  dense: boolean;
+  motionOnly: boolean;
+  getMotionSegmentValue: (timestamp: number) => number;
+};
+
+export interface VirtualizedMotionSegmentsRef {
+  scrollToSegment: (
+    segmentTime: number,
+    ifNeeded?: boolean,
+    behavior?: ScrollBehavior,
+  ) => void;
+}
+
+const SEGMENT_HEIGHT = 8;
+const OVERSCAN_COUNT = 20;
+
+export const VirtualizedMotionSegments = forwardRef<
+  VirtualizedMotionSegmentsRef,
+  VirtualizedMotionSegmentsProps
+>(
+  (
+    {
+      timelineRef,
+      segments,
+      events,
+      segmentDuration,
+      timestampSpread,
+      showMinimap,
+      minimapStartTime,
+      minimapEndTime,
+      setHandlebarTime,
+      dense,
+      motionOnly,
+      getMotionSegmentValue,
+    },
+    ref,
+  ) => {
+    const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const updateVisibleRange = useCallback(() => {
+      if (timelineRef.current) {
+        const { scrollTop, clientHeight } = timelineRef.current;
+        const start = Math.max(
+          0,
+          Math.floor(scrollTop / SEGMENT_HEIGHT) - OVERSCAN_COUNT,
+        );
+        const end = Math.min(
+          segments.length,
+          Math.ceil((scrollTop + clientHeight) / SEGMENT_HEIGHT) +
+            OVERSCAN_COUNT,
+        );
+        setVisibleRange({ start, end });
+      }
+    }, [segments.length, timelineRef]);
+
+    useEffect(() => {
+      const container = timelineRef.current;
+      if (container) {
+        const handleScroll = () => {
+          window.requestAnimationFrame(updateVisibleRange);
+        };
+
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("resize", updateVisibleRange);
+
+        updateVisibleRange();
+
+        return () => {
+          container.removeEventListener("scroll", handleScroll);
+          window.removeEventListener("resize", updateVisibleRange);
+        };
+      }
+    }, [updateVisibleRange, timelineRef]);
+
+    const scrollToSegment = useCallback(
+      (
+        segmentTime: number,
+        ifNeeded: boolean = true,
+        behavior: ScrollBehavior = "smooth",
+      ) => {
+        const segmentIndex = segments.findIndex((time) => time === segmentTime);
+        if (
+          segmentIndex !== -1 &&
+          containerRef.current &&
+          timelineRef.current
+        ) {
+          const timelineHeight = timelineRef.current.clientHeight;
+          const targetScrollTop = segmentIndex * SEGMENT_HEIGHT;
+          const centeredScrollTop =
+            targetScrollTop - timelineHeight / 2 + SEGMENT_HEIGHT / 2;
+
+          const isVisible =
+            segmentIndex > visibleRange.start + OVERSCAN_COUNT &&
+            segmentIndex < visibleRange.end - OVERSCAN_COUNT;
+
+          if (!ifNeeded || !isVisible) {
+            timelineRef.current.scrollTo({
+              top: Math.max(0, centeredScrollTop),
+              behavior: behavior,
+            });
+          }
+          updateVisibleRange();
+        }
+      },
+      [segments, timelineRef, visibleRange, updateVisibleRange],
+    );
+
+    useImperativeHandle(ref, () => ({
+      scrollToSegment,
+    }));
+
+    const renderSegment = useCallback(
+      (segmentTime: number, index: number) => {
+        const motionStart = segmentTime;
+        const motionEnd = motionStart + segmentDuration;
+
+        const firstHalfMotionValue = getMotionSegmentValue(motionStart);
+        const secondHalfMotionValue = getMotionSegmentValue(
+          motionStart + segmentDuration / 2,
+        );
+
+        const segmentMotion =
+          firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
+        const overlappingReviewItems = events.some(
+          (item) =>
+            (item.start_time >= motionStart && item.start_time < motionEnd) ||
+            ((item.end_time ?? segmentTime) > motionStart &&
+              (item.end_time ?? segmentTime) <= motionEnd) ||
+            (item.start_time <= motionStart &&
+              (item.end_time ?? segmentTime) >= motionEnd),
+        );
+
+        if ((!segmentMotion || overlappingReviewItems) && motionOnly) {
+          return null; // Skip rendering this segment in motion only mode
+        }
+
+        return (
+          <div
+            key={`${segmentTime}_${segmentDuration}`}
+            style={{
+              position: "absolute",
+              top: `${(visibleRange.start + index) * SEGMENT_HEIGHT}px`,
+              height: `${SEGMENT_HEIGHT}px`,
+              width: "100%",
+            }}
+          >
+            <MotionSegment
+              events={events}
+              firstHalfMotionValue={firstHalfMotionValue}
+              secondHalfMotionValue={secondHalfMotionValue}
+              segmentDuration={segmentDuration}
+              segmentTime={segmentTime}
+              timestampSpread={timestampSpread}
+              motionOnly={motionOnly}
+              showMinimap={showMinimap}
+              minimapStartTime={minimapStartTime}
+              minimapEndTime={minimapEndTime}
+              setHandlebarTime={setHandlebarTime}
+              scrollToSegment={scrollToSegment}
+              dense={dense}
+            />
+          </div>
+        );
+      },
+      [
+        events,
+        getMotionSegmentValue,
+        motionOnly,
+        segmentDuration,
+        showMinimap,
+        minimapStartTime,
+        minimapEndTime,
+        setHandlebarTime,
+        scrollToSegment,
+        dense,
+        timestampSpread,
+        visibleRange.start,
+      ],
+    );
+
+    const totalHeight = segments.length * SEGMENT_HEIGHT;
+    const visibleSegments = segments.slice(
+      visibleRange.start,
+      visibleRange.end,
+    );
+
+    return (
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={{ position: "relative", willChange: "transform" }}
+      >
+        <div style={{ height: `${totalHeight}px`, position: "relative" }}>
+          {visibleRange.start > 0 && (
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                height: `${visibleRange.start * SEGMENT_HEIGHT}px`,
+                width: "100%",
+              }}
+              aria-hidden="true"
+            />
+          )}
+          {visibleSegments.map((segmentTime, index) =>
+            renderSegment(segmentTime, index),
+          )}
+          {visibleRange.end < segments.length && (
+            <div
+              style={{
+                position: "absolute",
+                top: `${visibleRange.end * SEGMENT_HEIGHT}px`,
+                height: `${
+                  (segments.length - visibleRange.end) * SEGMENT_HEIGHT
+                }px`,
+                width: "100%",
+              }}
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default VirtualizedMotionSegments;