hover thumbnails

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

web/src/components/timeline/EventSegment.tsx

@@ -1,3 +1,4 @@
+import { useApiHost } from "@/api";
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useSegmentUtils } from "@/hooks/use-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
@@ -8,6 +9,8 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { Tooltip, TooltipContent } from "../ui/tooltip";
+import { TooltipTrigger } from "@radix-ui/react-tooltip";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -146,6 +149,7 @@ export function EventSegment({
     displaySeverityType,
     shouldShowRoundedCorners,
     getEventStart,
+    getEventThumbnail,
   } = useSegmentUtils(segmentDuration, events, severityType);
 
   const { alignDateToTimeline } = useEventUtils(events, segmentDuration);
@@ -154,22 +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) {
-      console.log("event start: " + new Date(eventStart * 1000));
       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]);
 
@@ -247,7 +264,6 @@ export function EventSegment({
 
   const segmentClick = useCallback(() => {
     if (contentRef.current && startTimestamp) {
-      console.log(new Date(startTimestamp * 1000));
       const element = contentRef.current.querySelector(
         `[data-segment-start="${startTimestamp - segmentDuration}"]`
       );
@@ -297,23 +313,31 @@ export function EventSegment({
       {severity.map((severityValue, index) => (
         <React.Fragment key={index}>
           {severityValue === displaySeverityType && (
-            <div
+            <Tooltip delayDuration={300}>
-              className="mr-3 w-[8px] h-2 flex justify-left items-end"
-              data-severity={severityValue}
-            >
               <div
-                key={`${segmentKey}_${index}_primary_data`}
+                className="mr-3 w-[8px] h-2 flex justify-left items-end"
-                className={`
+                data-severity={severityValue}
-            w-full h-2 bg-gradient-to-r
+              >
-            ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
+                <TooltipTrigger asChild>
-            ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
+                  <div
-            ${severityColors[severityValue]}
+                    key={`${segmentKey}_${index}_primary_data`}
-          `}
+                    className={`
-                onClick={() => {
+                      w-full h-2 bg-gradient-to-r
-                  segmentClick();
+                      ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""}
-                }}
+                      ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""}
-              ></div>
+                      ${severityColors[severityValue]}
-            </div>
+                    `}
+                    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 && (
@@ -321,11 +345,11 @@ export function EventSegment({
               <div
                 key={`${segmentKey}_${index}_secondary_data`}
                 className={`
-            w-1 h-2 bg-gradient-to-r
+                  w-1 h-2 bg-gradient-to-r
-            ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
+                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
-            ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
+                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
-            ${severityColors[severityValue]}
+                  ${severityColors[severityValue]}
-          `}
+                `}
               ></div>
             </div>
           )}

web/src/hooks/use-segment-utils.ts

@@ -84,7 +84,14 @@ export const useSegmentUtils = (
   );
 
   const shouldShowRoundedCorners = useCallback(
-    (segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
+    (
+      segmentTime: number
+    ): {
+      roundTopPrimary: boolean;
+      roundBottomPrimary: boolean;
+      roundTopSecondary: boolean;
+      roundBottomSecondary: boolean;
+    } => {
       const prevSegmentTime = segmentTime - segmentDuration;
       const nextSegmentTime = segmentTime + segmentDuration;
 
@@ -134,23 +141,26 @@ export const useSegmentUtils = (
         );
       });
 
-      let roundTop = false;
+      let roundTopPrimary = false;
-      let roundBottom = false;
+      let roundBottomPrimary = false;
+      let roundTopSecondary = false;
+      let roundBottomSecondary = false;
 
       if (hasOverlappingSeverityEvent) {
-        roundBottom = !hasPrevSeverityEvent;
+        roundBottomPrimary = !hasPrevSeverityEvent;
-        roundTop = !hasNextSeverityEvent;
+        roundTopPrimary = !hasNextSeverityEvent;
-      } else if (hasOverlappingOtherEvent) {
+      }
-        roundBottom = !hasPrevOtherEvent;
+
-        roundTop = !hasNextOtherEvent;
+      if (hasOverlappingOtherEvent) {
-      } else {
+        roundBottomSecondary = !hasPrevOtherEvent;
-        roundTop = !hasNextSeverityEvent || !hasNextOtherEvent;
+        roundTopSecondary = !hasNextOtherEvent;
-        roundBottom = !hasPrevSeverityEvent || !hasPrevOtherEvent;
       }
 
       return {
-        roundTop,
+        roundTopPrimary,
-        roundBottom,
+        roundBottomPrimary,
+        roundTopSecondary,
+        roundBottomSecondary,
       };
     },
     [events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
@@ -171,6 +181,21 @@ export const useSegmentUtils = (
     [events, getSegmentStart, getSegmentEnd, severityType]
   );
 
+  const getEventThumbnail = useCallback(
+    (time: number): string => {
+      const matchingEvent = events.find((event) => {
+        return (
+          time >= getSegmentStart(event.start_time) &&
+          time < getSegmentEnd(event.end_time) &&
+          event.severity == severityType
+        );
+      });
+
+      return matchingEvent?.thumb_path ?? "";
+    },
+    [events, getSegmentStart, getSegmentEnd, severityType]
+  );
+
   return {
     getSegmentStart,
     getSegmentEnd,
@@ -179,5 +204,6 @@ export const useSegmentUtils = (
     getReviewed,
     shouldShowRoundedCorners,
     getEventStart,
+    getEventThumbnail
   };
-};
+};