fixes and changes

blakeblackshear · Mar 21, 2024 · 4ade2d7 · 4ade2d7
1 parent f113ace
commit 4ade2d7
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 114 deletions.
diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx
@@ -43,7 +43,7 @@ export default function NewReviewData({
 
   return (
     <div className={className}>
-      <div className="flex justify-center items-center md:mr-[115px] pointer-events-auto">
+      <div className="flex justify-center items-center mr-[65px] md:mr-[115px] pointer-events-auto">
         <Button
           className={`${
             hasUpdate

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
@@ -197,7 +197,12 @@ export function EventSegment({
   }, [startTimestamp]);
 
   return (
-    <div key={segmentKey} className={segmentClasses}>
+    <div
+      key={segmentKey}
+      className={segmentClasses}
+      onClick={segmentClick}
+      onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
+    >
       <MinimapBounds
         isFirstSegmentInMinimap={isFirstSegmentInMinimap}
         isLastSegmentInMinimap={isLastSegmentInMinimap}
@@ -219,34 +224,36 @@ export function EventSegment({
       {severity.map((severityValue: number, index: number) => (
         <React.Fragment key={index}>
           {severityValue === displaySeverityType && (
-            <HoverCard openDelay={200} closeDelay={100}>
-              <div
-                className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
-                data-severity={severityValue}
-              >
-                <HoverCardTrigger asChild>
-                  <div
-                    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}
-                    onTouchEnd={(event) =>
-                      handleTouchStart(event, segmentClick)
-                    }
-                  ></div>
-                </HoverCardTrigger>
-                <HoverCardPortal>
-                  <HoverCardContent
-                    className="rounded-2xl w-[250px] p-2"
-                    side="left"
-                  >
-                    <img
-                      className="rounded-lg"
-                      src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
-                    />
-                  </HoverCardContent>
-                </HoverCardPortal>
+            <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]">
+                <div className="flex justify-center">
+                  <HoverCard openDelay={200} closeDelay={100}>
+                    <div
+                      className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
+                      data-severity={severityValue}
+                    >
+                      <HoverCardTrigger asChild>
+                        <div
+                          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]}`}
+                        ></div>
+                      </HoverCardTrigger>
+                      <HoverCardPortal>
+                        <HoverCardContent
+                          className="rounded-2xl w-[250px] p-2"
+                          side="left"
+                        >
+                          <img
+                            className="rounded-lg"
+                            src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
+                          />
+                        </HoverCardContent>
+                      </HoverCardPortal>
+                    </div>
+                  </HoverCard>
+                </div>
               </div>
-            </HoverCard>
+            </div>
           )}
         </React.Fragment>
       ))}

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -11,6 +11,7 @@ import MotionSegment from "./MotionSegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
+import { isDesktop } from "react-device-detect";
 
 export type MotionReviewTimelineProps = {
   segmentDuration: number;
@@ -218,7 +219,7 @@ export function MotionReviewTimeline({
   const segmentsObserver = useRef<IntersectionObserver | null>(null);
   const selectedTimelineRef = timelineRef || internalTimelineRef;
   useEffect(() => {
-    if (selectedTimelineRef.current && segments) {
+    if (selectedTimelineRef.current && segments && isDesktop) {
       segmentsObserver.current = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
@@ -5,7 +5,7 @@ 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 { isDesktop, isMobile } from "react-device-detect";
 import useTapUtils from "@/hooks/use-tap-utils";
 
 type MotionSegmentProps = {
@@ -155,6 +155,11 @@ export function MotionSegment({
       : ""
   }`;
 
+  const animationClassesSecondHalf = `motion-segment ${secondHalfSegmentWidth > 1 ? "hidden" : ""}
+    zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
+  const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 1 ? "hidden" : ""}
+    zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
+
   const severityColors: { [key: number]: string } = {
     1: reviewed
       ? "from-severity_motion-dimmed/50 to-severity_motion/50"
@@ -204,7 +209,7 @@ export function MotionSegment({
           <div className="flex justify-center">
             <div
               key={`${segmentKey}_motion_data_1`}
-              className={`motion-segment ${secondHalfSegmentWidth > 1 ? "hidden" : ""} zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+              className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
               style={{
                 width: secondHalfSegmentWidth,
               }}
@@ -216,7 +221,7 @@ export function MotionSegment({
           <div className="flex justify-center">
             <div
               key={`${segmentKey}_motion_data_2`}
-              className={`motion-segment ${firstHalfSegmentWidth > 1 ? "hidden" : ""} zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+              className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
               style={{
                 width: firstHalfSegmentWidth,
               }}

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
@@ -14,16 +14,8 @@ export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
   handlebarRef: RefObject<HTMLDivElement>;
   handlebarTimeRef: RefObject<HTMLDivElement>;
-  handlebarMouseMove: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
-  handlebarMouseUp: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
+  handlebarMouseMove: (e: MouseEvent | TouchEvent) => void;
+  handlebarMouseUp: (e: MouseEvent | TouchEvent) => void;
   handlebarMouseDown: (
     e:
       | React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -37,31 +29,15 @@ export type ReviewTimelineProps = {
   exportStartTimeRef: RefObject<HTMLDivElement>;
   exportEndRef: RefObject<HTMLDivElement>;
   exportEndTimeRef: RefObject<HTMLDivElement>;
-  exportStartMouseMove: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
-  exportStartMouseUp: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
+  exportStartMouseMove: (e: MouseEvent | TouchEvent) => void;
+  exportStartMouseUp: (e: MouseEvent | TouchEvent) => void;
   exportStartMouseDown: (
     e:
       | React.MouseEvent<HTMLDivElement, MouseEvent>
       | React.TouchEvent<HTMLDivElement>,
   ) => void;
-  exportEndMouseMove: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
-  exportEndMouseUp: (
-    e:
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | React.TouchEvent<HTMLDivElement>,
-  ) => void;
+  exportEndMouseMove: (e: MouseEvent | TouchEvent) => void;
+  exportEndMouseUp: (e: MouseEvent | TouchEvent) => void;
   exportEndMouseDown: (
     e:
       | React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -152,11 +128,7 @@ export function ReviewTimeline({
   );
 
   const handleMouseMove = useCallback(
-    (
-      e:
-        | React.MouseEvent<HTMLDivElement, MouseEvent>
-        | React.TouchEvent<HTMLDivElement>,
-    ) => {
+    (e: MouseEvent | TouchEvent) => {
       switch (draggableElementType) {
         case "export_start":
           exportStartMouseMove(e);
@@ -181,11 +153,7 @@ export function ReviewTimeline({
   );
 
   const handleMouseUp = useCallback(
-    (
-      e:
-        | React.MouseEvent<HTMLDivElement, MouseEvent>
-        | React.TouchEvent<HTMLDivElement>,
-    ) => {
+    (e: MouseEvent | TouchEvent) => {
       switch (draggableElementType) {
         case "export_start":
           exportStartMouseUp(e);
@@ -227,13 +195,32 @@ export function ReviewTimeline({
     exportEndPosition,
   ]);
 
+  const documentRef = useRef<Document | null>(document);
+  useEffect(() => {
+    const documentInstance = documentRef.current;
+
+    if (isDragging) {
+      documentInstance?.addEventListener("mousemove", handleMouseMove);
+      documentInstance?.addEventListener("touchmove", handleMouseMove);
+      documentInstance?.addEventListener("mouseup", handleMouseUp);
+      documentInstance?.addEventListener("touchend", handleMouseUp);
+    } else {
+      documentInstance?.removeEventListener("mousemove", handleMouseMove);
+      documentInstance?.removeEventListener("touchmove", handleMouseMove);
+      documentInstance?.removeEventListener("mouseup", handleMouseUp);
+      documentInstance?.removeEventListener("touchend", handleMouseUp);
+    }
+    return () => {
+      documentInstance?.removeEventListener("mousemove", handleMouseMove);
+      documentInstance?.removeEventListener("touchmove", handleMouseMove);
+      documentInstance?.removeEventListener("mouseup", handleMouseUp);
+      documentInstance?.removeEventListener("touchend", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp, isDragging]);
+
   return (
     <div
       ref={timelineRef}
-      onMouseMove={handleMouseMove}
-      onTouchMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onTouchEnd={handleMouseUp}
       className={`relative h-full overflow-y-auto no-scrollbar select-none bg-secondary ${
         isDragging && (showHandlebar || showExportHandles)
           ? "cursor-grabbing"

diff --git a/web/src/components/timeline/SummarySegment.tsx b/web/src/components/timeline/SummarySegment.tsx
@@ -1,5 +1,5 @@
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
-import { ReviewSegment } from "@/types/review";
+import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import React, { useMemo } from "react";
 // import useTapUtils from "@/hooks/use-tap-utils";
 
@@ -8,15 +8,16 @@ type SummarySegmentProps = {
   segmentTime: number;
   segmentDuration: number;
   segmentHeight: number;
+  severityType: ReviewSeverity;
 };
 
 export function SummarySegment({
   events,
   segmentTime,
   segmentDuration,
   segmentHeight,
+  severityType,
 }: SummarySegmentProps) {
-  const severityType = "all";
   const { getSeverity, getReviewed, displaySeverityType } =
     useEventSegmentUtils(segmentDuration, events, severityType);
 
@@ -44,9 +45,9 @@ export function SummarySegment({
       className="relative w-full"
       style={{ height: segmentHeight }}
     >
-      {severity.map((severityValue: number, index: number) => {
-        return (
-          <React.Fragment key={index}>
+      {severity.map((severityValue: number, index: number) => (
+        <React.Fragment key={index}>
+          {severityValue === displaySeverityType && (
             <div
               className="flex justify-end cursor-pointer"
               style={{ height: segmentHeight }}
@@ -57,9 +58,9 @@ export function SummarySegment({
                 className={`w-[10px] ${severityColors[severityValue]}`}
               ></div>
             </div>
-          </React.Fragment>
-        );
-      })}
+          )}
+        </React.Fragment>
+      ))}
     </div>
   );
 }