Scrolling fixes and motion timeline changes (#10295)

* scrolling updates * only scroll by 1 segment on desktop
2024-03-06 15:35:10 -06:00
parent fb81e44283
commit 90db27e3c8
8 changed files with 220 additions and 139 deletions
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -17,6 +17,7 @@ import {
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
+import useTapUtils from "@/hooks/use-tap-utils";

 type EventSegmentProps = {
  events: ReviewSegment[];
@@ -88,6 +89,8 @@ export function EventSegment({

  const apiHost = useApiHost();

+  const { handleTouchStart } = useTapUtils();
+
  const eventThumbnail = useMemo(() => {
    return getEventThumbnail(segmentTime);
  }, [getEventThumbnail, segmentTime]);
@@ -227,6 +230,9 @@ export function EventSegment({
                    key={`${segmentKey}_${index}_primary_data`}
                    className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
                    onClick={segmentClick}
+                    onTouchStart={(event) =>
+                      handleTouchStart(event, segmentClick)
+                    }
                  ></div>
                </HoverCardTrigger>
                <HoverCardPortal>
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -97,7 +97,7 @@ export function MotionReviewTimeline({
          showMinimap={showMinimap}
          minimapStartTime={minimapStartTime}
          minimapEndTime={minimapEndTime}
-          contentRef={contentRef}
+          setHandlebarTime={setHandlebarTime}
        />
      );
    });
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -1,17 +1,12 @@
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
 import { MotionData, ReviewSegment } from "@/types/review";
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
 import { isMobile } from "react-device-detect";
+import useTapUtils from "@/hooks/use-tap-utils";

 type MotionSegmentProps = {
  events: ReviewSegment[];
@@ -22,7 +17,7 @@ type MotionSegmentProps = {
  showMinimap: boolean;
  minimapStartTime?: number;
  minimapEndTime?: number;
-  contentRef: RefObject<HTMLDivElement>;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
 };

 export function MotionSegment({
@@ -34,7 +29,7 @@ export function MotionSegment({
  showMinimap,
  minimapStartTime,
  minimapEndTime,
-  contentRef,
+  setHandlebarTime,
 }: MotionSegmentProps) {
  const severityType = "all";
  const {
@@ -42,20 +37,18 @@ export function MotionSegment({
    getReviewed,
    displaySeverityType,
    shouldShowRoundedCorners,
-    getEventStart,
  } = useEventSegmentUtils(segmentDuration, events, severityType);

-  const {
-    getMotionSegmentValue,
-    getAudioSegmentValue,
-    interpolateMotionAudioData,
-  } = useMotionSegmentUtils(segmentDuration, motion_events);
+  const { getMotionSegmentValue, interpolateMotionAudioData, getMotionStart } =
+    useMotionSegmentUtils(segmentDuration, motion_events);

  const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
    events,
    segmentDuration,
  );

+  const { handleTouchStart } = useTapUtils();
+
  const severity = useMemo(
    () => getSeverity(segmentTime, displaySeverityType),
    // we know that these deps are correct
@@ -74,19 +67,19 @@ export function MotionSegment({
  );

  const startTimestamp = useMemo(() => {
-    const eventStart = getEventStart(segmentTime);
+    const eventStart = getMotionStart(segmentTime);
    if (eventStart) {
      return alignStartDateToTimeline(eventStart);
    }
    // we know that these deps are correct
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getEventStart, segmentTime]);
+  }, [getMotionStart, segmentTime]);

  const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
  const segmentKey = useMemo(() => segmentTime, [segmentTime]);

  const maxSegmentWidth = useMemo(() => {
-    return isMobile ? 15 : 25;
+    return isMobile ? 30 : 50;
  }, []);

  const alignedMinimapStartTime = useMemo(
@@ -161,32 +154,10 @@ export function MotionSegment({
  };

  const segmentClick = useCallback(() => {
-    if (contentRef.current && startTimestamp) {
-      const element = contentRef.current.querySelector(
-        `[data-segment-start="${startTimestamp - segmentDuration}"]`,
-      );
-      if (element instanceof HTMLElement) {
-        scrollIntoView(element, {
-          scrollMode: "if-needed",
-          behavior: "smooth",
-        });
-        element.classList.add(
-          `outline-severity_${severityType}`,
-          `shadow-severity_${severityType}`,
-        );
-        element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
-        element.classList.remove("outline-0", "shadow-none");
-
-        // Remove the classes after a short timeout
-        setTimeout(() => {
-          element.classList.remove("outline-4", "shadow-[0_0_6px_1px]");
-          element.classList.add("outline-0", "shadow-none");
-        }, 3000);
-      }
+    if (startTimestamp && setHandlebarTime) {
+      setHandlebarTime(startTimestamp);
    }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTimestamp]);
+  }, [startTimestamp, setHandlebarTime]);

  return (
    <div key={segmentKey} className={segmentClasses}>
@@ -210,11 +181,12 @@ export function MotionSegment({

      <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
        <div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
-          <div className="w-[10px] md:w-[20px] flex justify-end">
+          <div className="flex justify-center">
            <div
              key={`${segmentKey}_motion_data_1`}
              className={`h-[2px] rounded-full bg-motion_review`}
              onClick={segmentClick}
+              onTouchStart={(event) => handleTouchStart(event, segmentClick)}
              style={{
                width: interpolateMotionAudioData(
                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
@@ -223,27 +195,15 @@ export function MotionSegment({
              }}
            ></div>
          </div>
-          <div className="w-[10px] md:w-[20px]">
-            <div
-              key={`${segmentKey}_audio_data_1`}
-              className={`h-[2px] rounded-full bg-audio_review`}
-              onClick={segmentClick}
-              style={{
-                width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime + segmentDuration / 2),
-                  maxSegmentWidth,
-                ),
-              }}
-            ></div>
-          </div>
        </div>

        <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
-          <div className="w-[10px] md:w-[20px] flex justify-end">
+          <div className="flex justify-center">
            <div
              key={`${segmentKey}_motion_data_2`}
              className={`h-[2px] rounded-full bg-motion_review`}
              onClick={segmentClick}
+              onTouchStart={(event) => handleTouchStart(event, segmentClick)}
              style={{
                width: interpolateMotionAudioData(
                  getMotionSegmentValue(segmentTime),
@@ -252,19 +212,6 @@ export function MotionSegment({
              }}
            ></div>
          </div>
-          <div className="w-[10px] md:w-[20px]">
-            <div
-              key={`${segmentKey}_audio_data_2`}
-              className={`h-[2px] rounded-full bg-audio_review`}
-              onClick={segmentClick}
-              style={{
-                width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime),
-                  maxSegmentWidth,
-                ),
-              }}
-            ></div>
-          </div>
        </div>
      </div>

--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -44,7 +44,7 @@ export function ReviewTimeline({
      onTouchMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onTouchEnd={handleMouseUp}
-      className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
+      className={`relative h-full overflow-y-auto no-scrollbar bg-secondary ${
        isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
      }`}
    >
@@ -64,7 +64,7 @@ export function ReviewTimeline({
            >
              <div
                className={`bg-destructive rounded-full mx-auto ${
-                  segmentDuration < 60 ? "w-14 md:w-20" : "w-12 md:w-16"
+                  segmentDuration < 60 ? "w-12 md:w-20" : "w-12 md:w-16"
                } h-5 flex items-center justify-center`}
              >
                <div