Review timeline improvements (#10102)

* make event bars clickable * outline and scroll when segment is clicked * match outline colors to event type * hover thumbnails * make event bars clickable * outline and scroll when segment is clicked * match outline colors to event type * hover thumbnails * fix merge from rebase * remove minimap opacity classes * live player outline colors * safelist shadow classes
2024-02-27 13:41:26 -06:00
parent 8663fbba01
commit 622e9741c0
6 changed files with 203 additions and 73 deletions
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -126,7 +126,7 @@ export default function LivePlayer({
    <div
      className={`relative flex justify-center w-full outline ${
        activeTracking
-          ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
+          ? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-severity_alert"
          : "outline-0"
      } transition-all duration-500 ${className}`}
    >
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -10,6 +10,7 @@ import {
 import EventSegment from "./EventSegment";
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
+import { TooltipProvider } from "../ui/tooltip";

 export type EventReviewTimelineProps = {
  segmentDuration: number;
@@ -102,7 +103,7 @@ export function EventReviewTimeline({

      return (
        <EventSegment
-          key={segmentTime}
+          key={segmentTime + severityType}
          events={events}
          segmentDuration={segmentDuration}
          segmentTime={segmentTime}
@@ -111,6 +112,7 @@ export function EventReviewTimeline({
          minimapStartTime={minimapStartTime}
          minimapEndTime={minimapEndTime}
          severityType={severityType}
+          contentRef={contentRef}
        />
      );
    });
@@ -122,6 +124,7 @@ export function EventReviewTimeline({
    showMinimap,
    minimapStartTime,
    minimapEndTime,
+    events,
  ]);

  const segments = useMemo(
@@ -210,39 +213,44 @@ export function EventReviewTimeline({
  ]);

  return (
-    <div
-      ref={timelineRef}
-      className={`relative w-[120px] md:w-[100px] h-full overflow-y-scroll no-scrollbar bg-secondary ${
-        isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
-      }`}
-    >
-      <div className="flex flex-col">{segments}</div>
-      {showHandlebar && (
-        <div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
-          <div className={`flex items-center justify-center `}>
-            <div
-              ref={scrollTimeRef}
-              className={`relative w-full ${
-                isDragging ? "cursor-grabbing" : "cursor-grab"
-              }`}
-              onMouseDown={handleMouseDown}
-            >
+    <TooltipProvider skipDelayDuration={3000}>
+      <div
+        ref={timelineRef}
+        className={`relative w-[120px] md:w-[100px] h-full overflow-y-scroll no-scrollbar bg-secondary ${
+          isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
+        }`}
+      >
+        <div className="flex flex-col">{segments}</div>
+        {showHandlebar && (
+          <div
+            className={`absolute left-0 top-0 z-20 w-full `}
+            role="scrollbar"
+          >
+            <div className={`flex items-center justify-center `}>
              <div
-                className={`bg-destructive rounded-full mx-auto ${
-                  segmentDuration < 60 ? "w-20" : "w-16"
-                } h-5 flex items-center justify-center`}
+                ref={scrollTimeRef}
+                className={`relative w-full ${
+                  isDragging ? "cursor-grabbing" : "cursor-grab"
+                }`}
+                onMouseDown={handleMouseDown}
              >
                <div
-                  ref={currentTimeRef}
-                  className="text-white text-xs z-10"
-                ></div>
+                  className={`bg-destructive rounded-full mx-auto ${
+                    segmentDuration < 60 ? "w-20" : "w-16"
+                  } h-5 flex items-center justify-center`}
+                >
+                  <div
+                    ref={currentTimeRef}
+                    className="text-white text-xs z-10"
+                  ></div>
+                </div>
+                <div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
              </div>
-              <div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
            </div>
          </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </TooltipProvider>
  );
 }

--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -1,7 +1,16 @@
+import { useApiHost } from "@/api";
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useSegmentUtils } from "@/hooks/use-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { Tooltip, TooltipContent } from "../ui/tooltip";
+import { TooltipTrigger } from "@radix-ui/react-tooltip";

 type EventSegmentProps = {
  events: ReviewSegment[];
@@ -12,6 +21,7 @@ type EventSegmentProps = {
  minimapStartTime?: number;
  minimapEndTime?: number;
  severityType: ReviewSeverity;
+  contentRef: RefObject<HTMLDivElement>;
 };

 type MinimapSegmentProps = {
@@ -131,12 +141,15 @@ export function EventSegment({
  minimapStartTime,
  minimapEndTime,
  severityType,
+  contentRef,
 }: EventSegmentProps) {
  const {
    getSeverity,
    getReviewed,
    displaySeverityType,
    shouldShowRoundedCorners,
+    getEventStart,
+    getEventThumbnail,
  } = useSegmentUtils(segmentDuration, events, severityType);

  const { alignDateToTimeline } = useEventUtils(events, segmentDuration);
@@ -145,15 +158,35 @@ export function EventSegment({
    () => getSeverity(segmentTime, displaySeverityType),
    [getSeverity, segmentTime]
  );
+
  const reviewed = useMemo(
    () => getReviewed(segmentTime),
    [getReviewed, segmentTime]
  );
-  const { roundTop, roundBottom } = useMemo(
+
+  const {
+    roundTopPrimary,
+    roundBottomPrimary,
+    roundTopSecondary,
+    roundBottomSecondary,
+  } = useMemo(
    () => shouldShowRoundedCorners(segmentTime),
    [shouldShowRoundedCorners, segmentTime]
  );

+  const startTimestamp = useMemo(() => {
+    const eventStart = getEventStart(segmentTime);
+    if (eventStart) {
+      return alignDateToTimeline(eventStart);
+    }
+  }, [getEventStart, segmentTime]);
+
+  const apiHost = useApiHost();
+
+  const eventThumbnail = useMemo(() => {
+    return getEventThumbnail(segmentTime);
+  }, [getEventThumbnail, segmentTime]);
+
  const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
  const segmentKey = useMemo(() => segmentTime, [segmentTime]);

@@ -204,13 +237,7 @@ export function EventSegment({
  }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);

  const segmentClasses = `flex flex-row ${
-    showMinimap
-      ? isInMinimapRange
-        ? "bg-card"
-        : isLastSegmentInMinimap
-          ? ""
-          : "opacity-70"
-      : ""
+    showMinimap ? (isInMinimapRange ? "bg-muted" : "bg-background") : ""
  } ${
    isFirstSegmentInMinimap || isLastSegmentInMinimap
      ? "relative h-2 border-b border-gray-500"
@@ -229,6 +256,29 @@ export function EventSegment({
      : "from-severity_alert-dimmed to-severity_alert",
  };

+  const segmentClick = useCallback(() => {
+    if (contentRef.current && startTimestamp) {
+      const element = contentRef.current.querySelector(
+        `[data-segment-start="${startTimestamp - segmentDuration}"]`
+      );
+      if (element instanceof HTMLElement) {
+        debounceScrollIntoView(element);
+        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);
+      }
+    }
+  }, [startTimestamp]);
+
  return (
    <div key={segmentKey} className={segmentClasses}>
      <MinimapBounds
@@ -257,20 +307,31 @@ export function EventSegment({
      {severity.map((severityValue, index) => (
        <React.Fragment key={index}>
          {severityValue === displaySeverityType && (
-            <div
-              className="mr-3 w-[8px] h-2 flex justify-left items-end"
-              data-severity={severityValue}
-            >
+            <Tooltip delayDuration={300}>
              <div
-                key={`${segmentKey}_${index}_primary_data`}
-                className={`
-            w-full h-2 bg-gradient-to-r
-            ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
-            ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
-            ${severityColors[severityValue]}
-          `}
-              ></div>
-            </div>
+                className="mr-3 w-[8px] h-2 flex justify-left items-end"
+                data-severity={severityValue}
+              >
+                <TooltipTrigger 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}
+                  ></div>
+                </TooltipTrigger>
+                <TooltipContent className="rounded-2xl" side="left">
+                  <img
+                    className="rounded-lg"
+                    src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
+                  />
+                </TooltipContent>
+              </div>
+            </Tooltip>
          )}

          {severityValue !== displaySeverityType && (
@@ -278,11 +339,11 @@ export function EventSegment({
              <div
                key={`${segmentKey}_${index}_secondary_data`}
                className={`
-            w-1 h-2 bg-gradient-to-r
-            ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
-            ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
-            ${severityColors[severityValue]}
-          `}
+                  w-1 h-2 bg-gradient-to-r
+                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
+                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
+                  ${severityColors[severityValue]}
+                `}
              ></div>
            </div>
          )}