fixes and changes (#10587)

2024-11-22 08:57:20 -06:00 · 2024-03-21 09:00:04 -05:00 · 2024-03-21 09:00:04 -05:00 · 4040191101
commit 4040191101
parent 865c26ff18
10 changed files with 156 additions and 114 deletions
--- 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
--- 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>
      ))}
--- 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) => {
--- 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,
              }}
--- 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"
--- 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,6 +8,7 @@ type SummarySegmentProps = {
  segmentTime: number;
  segmentDuration: number;
  segmentHeight: number;
+  severityType: ReviewSeverity;
 };

 export function SummarySegment({
@ -15,8 +16,8 @@ export function SummarySegment({
  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>
  );
 }
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/web/src/components/timeline/SummaryTimeline.tsx
@ -8,7 +8,7 @@ import {
 } from "react";
 import { SummarySegment } from "./SummarySegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
-import { ReviewSegment } from "@/types/review";
+import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import { isMobile } from "react-device-detect";

 export type SummaryTimelineProps = {
@ -17,6 +17,7 @@ export type SummaryTimelineProps = {
  timelineEnd: number;
  segmentDuration: number;
  events: ReviewSegment[];
+  severityType: ReviewSeverity;
 };

 export function SummaryTimeline({
@ -25,6 +26,7 @@ export function SummaryTimeline({
  timelineEnd,
  segmentDuration,
  events,
+  severityType,
 }: SummaryTimelineProps) {
  const summaryTimelineRef = useRef<HTMLDivElement>(null);
  const visibleSectionRef = useRef<HTMLDivElement>(null);
@ -35,6 +37,8 @@ export function SummaryTimeline({
  const [initialReviewTimelineScrollTop, setInitialReviewTimelineScrollTop] =
    useState<number>(0);

+  const observer = useRef<ResizeObserver | null>(null);
+
  const { alignStartDateToTimeline } = useTimelineUtils(segmentDuration);

  const timelineStartAligned = useMemo(
@ -62,6 +66,7 @@ export function SummaryTimeline({
            segmentDuration={segmentDuration}
            segmentTime={segmentTime}
            segmentHeight={segmentHeight}
+            severityType={severityType}
          />
        );
      });
@ -72,6 +77,7 @@ export function SummaryTimeline({
    events,
    reviewTimelineDuration,
    segmentHeight,
+    severityType,
  ]);

  const segments = useMemo(
@ -86,34 +92,73 @@ export function SummaryTimeline({
      reviewTimelineDuration,
      segmentHeight,
      generateSegments,
+      severityType,
    ],
  );

+  const setVisibleSectionStyles = useCallback(() => {
+    if (
+      reviewTimelineRef.current &&
+      summaryTimelineRef.current &&
+      visibleSectionRef.current
+    ) {
+      const content = reviewTimelineRef.current;
+      const summary = summaryTimelineRef.current;
+      const {
+        clientHeight: reviewTimelineVisibleHeight,
+        scrollHeight: reviewTimelineFullHeight,
+        scrollTop: scrolled,
+      } = content;
+      const { clientHeight: summaryTimelineVisibleHeight } = summary;
+
+      visibleSectionRef.current.style.top = `${
+        summaryTimelineVisibleHeight * (scrolled / reviewTimelineFullHeight)
+      }px`;
+      visibleSectionRef.current.style.height = `${
+        reviewTimelineVisibleHeight *
+        (reviewTimelineVisibleHeight / reviewTimelineFullHeight)
+      }px`;
+    }
+  }, [reviewTimelineRef, summaryTimelineRef, visibleSectionRef]);
+
  useEffect(() => {
    if (reviewTimelineRef.current && summaryTimelineRef.current) {
      const content = reviewTimelineRef.current;
-      const summary = summaryTimelineRef.current;

      const handleScroll = () => {
-        const {
-          clientHeight: reviewTimelineVisibleHeight,
-          scrollHeight: reviewTimelineFullHeight,
-          scrollTop: scrolled,
-        } = content;
-        const { clientHeight: summaryTimelineVisibleHeight } = summary;
-
-        if (visibleSectionRef.current) {
-          visibleSectionRef.current.style.top = `${summaryTimelineVisibleHeight * (scrolled / reviewTimelineFullHeight)}px`;
-          visibleSectionRef.current.style.height = `${reviewTimelineVisibleHeight * (reviewTimelineVisibleHeight / reviewTimelineFullHeight)}px`;
-        }
+        setVisibleSectionStyles();
      };

+      // Set initial styles
+      setVisibleSectionStyles();
+
+      observer.current = new ResizeObserver(() => {
+        setVisibleSectionStyles();
+        if (summaryTimelineRef.current) {
+          const { clientHeight: summaryTimelineVisibleHeight } =
+            summaryTimelineRef.current;
+
+          setSegmentHeight(
+            summaryTimelineVisibleHeight /
+              (reviewTimelineDuration / segmentDuration),
+          );
+        }
+      });
+      observer.current.observe(content);
+
      content.addEventListener("scroll", handleScroll);
+
      return () => {
        content.removeEventListener("scroll", handleScroll);
      };
    }
-  }, [reviewTimelineRef, summaryTimelineRef]);
+  }, [
+    reviewTimelineRef,
+    summaryTimelineRef,
+    setVisibleSectionStyles,
+    reviewTimelineDuration,
+    segmentDuration,
+  ]);

  useEffect(() => {
    if (summaryTimelineRef.current) {
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@ -63,14 +63,12 @@ function useDraggableElement({
  }, [clientYPosition, timelineRef, isDragging]);

  const getClientYPosition = useCallback(
-    (
-      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
-    ) => {
+    (e: MouseEvent | TouchEvent) => {
      let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
-        clientY = e.nativeEvent.touches[0].clientY;
-      } else if (e.nativeEvent instanceof MouseEvent) {
-        clientY = e.nativeEvent.clientY;
+      if (isMobile && e instanceof TouchEvent) {
+        clientY = e.touches[0].clientY;
+      } else if (e instanceof MouseEvent) {
+        clientY = e.clientY;
      }

      if (clientY) {
@ -113,9 +111,7 @@ function useDraggableElement({
  );

  const handleMouseUp = useCallback(
-    (
-      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
-    ) => {
+    (e: MouseEvent | TouchEvent) => {
      e.preventDefault();
      e.stopPropagation();
      if (isDragging) {
@ -187,9 +183,7 @@ function useDraggableElement({
  );

  const handleMouseMove = useCallback(
-    (
-      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
-    ) => {
+    (e: MouseEvent | TouchEvent) => {
      if (
        !contentRef.current ||
        !timelineRef.current ||
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@ -405,18 +405,19 @@ function UIPlayground() {
                events={mockEvents} // events, including new has_been_reviewed and severity properties
                severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
                contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
-                timelineRef={reviewTimelineRef}
+                timelineRef={reviewTimelineRef} // save a ref to this timeline to connect with the summary timeline
              />
            )}
          </div>
          {isEventsReviewTimeline && (
            <div className="w-[10px]">
              <SummaryTimeline
-                reviewTimelineRef={reviewTimelineRef}
+                reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
                timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
                timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
                segmentDuration={zoomSettings.segmentDuration}
                events={mockEvents}
+                severityType={"alert"} // show only events of this severity on the summary timeline
              />
            </div>
          )}
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -555,6 +555,7 @@ function DetectionReview({
            timelineEnd={timeRange.after}
            segmentDuration={segmentDuration}
            events={reviewItems?.all ?? []}
+            severityType={severity}
          />
        </div>
      </div>