From 427c6a6afb4fc60c880d8f38c20818503e971c48 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 3 Apr 2024 20:20:47 -0500
Subject: [PATCH] Timeline tweaks (#10816)

* limit handles from overdragging when segments don't fill up timeline

* use separate state for switch

* add key
---
 .../components/filter/ReviewFilterGroup.tsx   | 15 ++++++++-----
 .../components/timeline/ReviewTimeline.tsx    |  6 +++++-
 web/src/hooks/use-draggable-element.ts        | 21 +++++++++++++++----
 web/src/views/events/EventView.tsx            |  2 +-
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 1803cac81..4d2e1db8e 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -2,7 +2,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
 import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -631,16 +631,21 @@ function ShowMotionOnlyButton({
   motionOnly,
   setMotionOnly,
 }: ShowMotionOnlyButtonProps) {
+  const [motionOnlyButton, setMotionOnlyButton] = useState(motionOnly);
+
+  useEffect(
+    () => setMotionOnly(motionOnlyButton),
+    [motionOnlyButton, setMotionOnly],
+  );
+
   return (
     <>
       <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
         <Switch
           className="ml-1"
           id="collapse-motion"
-          checked={motionOnly}
-          onCheckedChange={() => {
-            setMotionOnly(!motionOnly);
-          }}
+          checked={motionOnlyButton}
+          onCheckedChange={setMotionOnlyButton}
         />
         <Label
           className="mx-2 text-secondary-foreground cursor-pointer"
diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index 6d5ba883f..16aec8083 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -58,6 +58,7 @@ export function ReviewTimeline({
   const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
   const [exportStartPosition, setExportStartPosition] = useState(0);
   const [exportEndPosition, setExportEndPosition] = useState(0);
+  const segmentsRef = useRef<HTMLDivElement>(null);
   const handlebarRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const exportStartRef = useRef<HTMLDivElement>(null);
@@ -100,6 +101,7 @@ export function ReviewTimeline({
   } = useDraggableElement({
     contentRef,
     timelineRef,
+    segmentsRef,
     draggableElementRef: handlebarRef,
     segmentDuration,
     showDraggableElement: showHandlebar,
@@ -123,6 +125,7 @@ export function ReviewTimeline({
   } = useDraggableElement({
     contentRef,
     timelineRef,
+    segmentsRef,
     draggableElementRef: exportStartRef,
     segmentDuration,
     showDraggableElement: showExportHandles,
@@ -147,6 +150,7 @@ export function ReviewTimeline({
   } = useDraggableElement({
     contentRef,
     timelineRef,
+    segmentsRef,
     draggableElementRef: exportEndRef,
     segmentDuration,
     showDraggableElement: showExportHandles,
@@ -319,7 +323,7 @@ export function ReviewTimeline({
           : "cursor-auto"
       }`}
     >
-      <div className="flex flex-col relative">
+      <div ref={segmentsRef} className="flex flex-col relative">
         <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
         <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
         {children}
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 1f957e39d..4367907f6 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -6,6 +6,7 @@ import { useTimelineUtils } from "./use-timeline-utils";
 type DraggableElementProps = {
   contentRef: React.RefObject<HTMLElement>;
   timelineRef: React.RefObject<HTMLDivElement>;
+  segmentsRef: React.RefObject<HTMLDivElement>;
   draggableElementRef: React.RefObject<HTMLDivElement>;
   segmentDuration: number;
   showDraggableElement: boolean;
@@ -29,6 +30,7 @@ type DraggableElementProps = {
 function useDraggableElement({
   contentRef,
   timelineRef,
+  segmentsRef,
   draggableElementRef,
   segmentDuration,
   showDraggableElement,
@@ -430,12 +432,18 @@ function useDraggableElement({
   useEffect(() => {
     if (
       timelineRef.current &&
+      segmentsRef.current &&
       draggableElementTime &&
       timelineCollapsed &&
       timelineSegments &&
       segments
     ) {
-      setFullTimelineHeight(timelineRef.current.scrollHeight);
+      setFullTimelineHeight(
+        Math.min(
+          timelineRef.current.scrollHeight,
+          segmentsRef.current.scrollHeight,
+        ),
+      );
       const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
 
       let segmentElement = timelineRef.current.querySelector(
@@ -486,11 +494,16 @@ function useDraggableElement({
   }, [timelineCollapsed, segments]);
 
   useEffect(() => {
-    if (timelineRef.current && segments) {
+    if (timelineRef.current && segments && segmentsRef.current) {
       setScrollEdgeSize(timelineRef.current.clientHeight * 0.03);
-      setFullTimelineHeight(timelineRef.current.scrollHeight);
+      setFullTimelineHeight(
+        Math.min(
+          timelineRef.current.scrollHeight,
+          segmentsRef.current.scrollHeight,
+        ),
+      );
     }
-  }, [timelineRef, segments]);
+  }, [timelineRef, segmentsRef, segments]);
 
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index e0754a275..05cfa182c 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -830,7 +830,7 @@ function MotionReview({
             }
             const detectionType = getDetectionType(camera.name);
             return (
-              <div className={`relative ${spans}`}>
+              <div key={camera.name} className={`relative ${spans}`}>
                 <PreviewPlayer
                   key={camera.name}
                   className={`rounded-2xl ${spans} ${grow}`}