Add zoom icons to timeline (#20717)

* add icons to zoom timeline

* fix current zoom level handling

* ensure mobile buttons don't stay selected

* remove icons on event review timeline

* add tooltips

web/public/locales/en/views/events.json

@@ -13,6 +13,8 @@
   },
   "timeline": "Timeline",
   "timeline.aria": "Select timeline",
+  "zoomIn": "Zoom In",
+  "zoomOut": "Zoom Out",
   "events": {
     "label": "Events",
     "aria": "Select events",

web/src/components/timeline/EventReviewTimeline.tsx

@@ -10,6 +10,7 @@ import {
   ReviewSegment,
   ReviewSeverity,
   TimelineZoomDirection,
+  ZoomLevel,
 } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
 import {
@@ -42,6 +43,9 @@ export type EventReviewTimelineProps = {
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
   dense?: boolean;
+  onZoomChange?: (newZoomLevel: number) => void;
+  possibleZoomLevels?: ZoomLevel[];
+  currentZoomLevel?: number;
 };
 
 export function EventReviewTimeline({
@@ -69,6 +73,9 @@ export function EventReviewTimeline({
   isZooming,
   zoomDirection,
   dense = false,
+  onZoomChange,
+  possibleZoomLevels,
+  currentZoomLevel,
 }: EventReviewTimelineProps) {
   const internalTimelineRef = useRef<HTMLDivElement>(null);
   const selectedTimelineRef = timelineRef || internalTimelineRef;
@@ -157,6 +164,9 @@ export function EventReviewTimeline({
       scrollToSegment={scrollToSegment}
       isZooming={isZooming}
       zoomDirection={zoomDirection}
+      onZoomChange={onZoomChange}
+      possibleZoomLevels={possibleZoomLevels}
+      currentZoomLevel={currentZoomLevel}
     >
       <VirtualizedEventSegments
         ref={virtualizedSegmentsRef}

web/src/components/timeline/EventSegment.tsx

@@ -235,7 +235,7 @@ export function EventSegment({
                   <div className="flex w-[20px] flex-row justify-center md:w-[40px]">
                     <div className="flex justify-center">
                       <div
-                        className="absolute left-1/2 z-10 ml-[2px] h-[8px] w-[8px] -translate-x-1/2 transform cursor-pointer"
+                        className="absolute left-1/2 z-10 ml-[2px] h-[8px] w-[8px] -translate-x-1/2 transform cursor-pointer md:ml-0"
                         data-severity={severityValue}
                       >
                         <div

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -10,6 +10,7 @@ import {
   MotionData,
   ReviewSegment,
   TimelineZoomDirection,
+  ZoomLevel,
 } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
@@ -47,6 +48,9 @@ export type MotionReviewTimelineProps = {
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
   alwaysShowMotionLine?: boolean;
+  onZoomChange?: (newZoomLevel: number) => void;
+  possibleZoomLevels?: ZoomLevel[];
+  currentZoomLevel?: number;
 };
 
 export function MotionReviewTimeline({
@@ -77,6 +81,9 @@ export function MotionReviewTimeline({
   isZooming,
   zoomDirection,
   alwaysShowMotionLine = false,
+  onZoomChange,
+  possibleZoomLevels,
+  currentZoomLevel,
 }: MotionReviewTimelineProps) {
   const internalTimelineRef = useRef<HTMLDivElement>(null);
   const selectedTimelineRef = timelineRef || internalTimelineRef;
@@ -206,6 +213,9 @@ export function MotionReviewTimeline({
       isZooming={isZooming}
       zoomDirection={zoomDirection}
       getRecordingAvailability={getRecordingAvailability}
+      onZoomChange={onZoomChange}
+      possibleZoomLevels={possibleZoomLevels}
+      currentZoomLevel={currentZoomLevel}
     >
       <VirtualizedMotionSegments
         ref={virtualizedSegmentsRef}

web/src/components/timeline/ReviewTimeline.tsx

@@ -2,7 +2,7 @@ import useDraggableElement from "@/hooks/use-draggable-element";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { cn } from "@/lib/utils";
 import { DraggableElement } from "@/types/draggable-element";
-import { TimelineZoomDirection } from "@/types/review";
+import { TimelineZoomDirection, ZoomLevel } from "@/types/review";
 import {
   ReactNode,
   RefObject,
@@ -13,6 +13,11 @@ import {
   useState,
 } from "react";
 import { isIOS, isMobile } from "react-device-detect";
+import { Button } from "../ui/button";
+import { LuZoomIn, LuZoomOut } from "react-icons/lu";
+import { useTranslation } from "react-i18next";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
@@ -37,6 +42,9 @@ export type ReviewTimelineProps = {
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
   getRecordingAvailability?: (time: number) => boolean | undefined;
+  onZoomChange?: (newZoomLevel: number) => void;
+  possibleZoomLevels?: ZoomLevel[];
+  currentZoomLevel?: number;
   children: ReactNode;
 };
 
@@ -63,8 +71,12 @@ export function ReviewTimeline({
   isZooming,
   zoomDirection,
   getRecordingAvailability,
+  onZoomChange,
+  possibleZoomLevels,
+  currentZoomLevel,
   children,
 }: ReviewTimelineProps) {
+  const { t } = useTranslation("views/events");
   const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
   const [isDraggingExportStart, setIsDraggingExportStart] = useState(false);
   const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
@@ -78,6 +90,13 @@ export function ReviewTimeline({
   const exportEndRef = useRef<HTMLDivElement>(null);
   const exportEndTimeRef = useRef<HTMLDivElement>(null);
 
+  // Use provided zoom levels or fallback to empty array
+  const zoomLevels = possibleZoomLevels ?? [];
+
+  const currentZoomLevelIndex =
+    currentZoomLevel ??
+    zoomLevels.findIndex((level) => level.segmentDuration === segmentDuration);
+
   const isDragging = useMemo(
     () => isDraggingHandlebar || isDraggingExportStart || isDraggingExportEnd,
     [isDraggingHandlebar, isDraggingExportStart, isDraggingExportEnd],
@@ -348,6 +367,7 @@ export function ReviewTimeline({
   }, [getRecordingAvailability, handlebarTime, segmentDuration]);
 
   return (
+    <>
       <div
         ref={timelineRef}
         className={cn(
@@ -490,6 +510,61 @@ export function ReviewTimeline({
           </>
         )}
       </div>
+
+      {onZoomChange && currentZoomLevelIndex !== -1 && (
+        <div
+          className={`absolute z-30 flex gap-2 ${
+            isMobile
+              ? "bottom-4 right-1 flex-col gap-3"
+              : "bottom-2 left-1/2 -translate-x-1/2"
+          }`}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={(e) => {
+                  const newLevel = Math.max(0, currentZoomLevelIndex - 1);
+                  onZoomChange(newLevel);
+                  e.currentTarget.blur();
+                }}
+                variant="outline"
+                disabled={currentZoomLevelIndex === 0}
+                className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
+                type="button"
+              >
+                <LuZoomOut className={cn("size-5 text-primary-variant")} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent>{t("zoomIn")}</TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={(e) => {
+                  const newLevel = Math.min(
+                    zoomLevels.length - 1,
+                    currentZoomLevelIndex + 1,
+                  );
+                  onZoomChange(newLevel);
+                  e.currentTarget.blur();
+                }}
+                variant="outline"
+                disabled={currentZoomLevelIndex === zoomLevels.length - 1}
+                className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
+                type="button"
+              >
+                <LuZoomIn className={cn("size-5 text-primary-variant")} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent>{t("zoomOut")}</TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+        </div>
+      )}
+    </>
   );
 }
 

web/src/pages/UIPlayground.tsx

@@ -9,6 +9,7 @@ import {
   ReviewData,
   ReviewSegment,
   ReviewSeverity,
+  ZoomLevel,
 } from "@/types/review";
 import { Button } from "@/components/ui/button";
 import CameraActivityIndicator from "@/components/indicators/CameraActivityIndicator";
@@ -180,7 +181,7 @@ function UIPlayground() {
     timestampSpread: 15,
   });
 
-  const possibleZoomLevels = useMemo(
+  const possibleZoomLevels: ZoomLevel[] = useMemo(
     () => [
       { segmentDuration: 60, timestampSpread: 15 },
       { segmentDuration: 30, timestampSpread: 5 },
@@ -196,6 +197,14 @@ function UIPlayground() {
     [possibleZoomLevels],
   );
 
+  const currentZoomLevel = useMemo(
+    () =>
+      possibleZoomLevels.findIndex(
+        (level) => level.segmentDuration === zoomSettings.segmentDuration,
+      ),
+    [possibleZoomLevels, zoomSettings.segmentDuration],
+  );
+
   const { zoomLevel, handleZoom, isZooming, zoomDirection } = useTimelineZoom({
     zoomSettings,
     zoomLevels: possibleZoomLevels,
@@ -414,6 +423,9 @@ function UIPlayground() {
                 dense={isMobile} // dense will produce a smaller handlebar and only minute resolution on timestamps
                 isZooming={isZooming} // is the timeline actively zooming?
                 zoomDirection={zoomDirection} // is the timeline zooming in or out
+                onZoomChange={handleZoomChange}
+                possibleZoomLevels={possibleZoomLevels}
+                currentZoomLevel={currentZoomLevel}
               />
             )}
             {isEventsReviewTimeline && (
@@ -441,6 +453,9 @@ function UIPlayground() {
                 dense // dense will produce a smaller handlebar and only minute resolution on timestamps
                 isZooming={isZooming} // is the timeline actively zooming?
                 zoomDirection={zoomDirection} // is the timeline zooming in or out
+                onZoomChange={handleZoomChange}
+                possibleZoomLevels={possibleZoomLevels}
+                currentZoomLevel={currentZoomLevel}
               />
             )}
           </div>

web/src/types/review.ts

@@ -81,6 +81,11 @@ export type ConsolidatedSegmentData = {
 
 export type TimelineZoomDirection = "in" | "out" | null;
 
+export type ZoomLevel = {
+  segmentDuration: number;
+  timestampSpread: number;
+};
+
 export enum ThreatLevel {
   SUSPICIOUS = 1,
   DANGER = 2,

web/src/views/events/EventView.tsx

@@ -19,6 +19,7 @@ import {
   ReviewSeverity,
   ReviewSummary,
   SegmentedReviewData,
+  ZoomLevel,
 } from "@/types/review";
 import { getChunkedTimeRange } from "@/utils/timelineUtil";
 import axios from "axios";
@@ -501,7 +502,7 @@ function DetectionReview({
     timestampSpread: 15,
   });
 
-  const possibleZoomLevels = useMemo(
+  const possibleZoomLevels: ZoomLevel[] = useMemo(
     () => [
       { segmentDuration: 60, timestampSpread: 15 },
       { segmentDuration: 30, timestampSpread: 5 },
@@ -517,6 +518,14 @@ function DetectionReview({
     [possibleZoomLevels],
   );
 
+  const currentZoomLevel = useMemo(
+    () =>
+      possibleZoomLevels.findIndex(
+        (level) => level.segmentDuration === zoomSettings.segmentDuration,
+      ),
+    [possibleZoomLevels, zoomSettings.segmentDuration],
+  );
+
   const { isZooming, zoomDirection } = useTimelineZoom({
     zoomSettings,
     zoomLevels: possibleZoomLevels,
@@ -799,7 +808,7 @@ function DetectionReview({
         </div>
       </div>
       <div className="flex w-[65px] flex-row md:w-[110px]">
-        <div className="no-scrollbar w-[55px] md:w-[100px]">
+        <div className="no-scrollbar relative w-[55px] md:w-[100px]">
           {loading ? (
             <Skeleton className="size-full" />
           ) : (
@@ -821,6 +830,8 @@ function DetectionReview({
               dense={isMobile}
               isZooming={isZooming}
               zoomDirection={zoomDirection}
+              possibleZoomLevels={possibleZoomLevels}
+              currentZoomLevel={currentZoomLevel}
             />
           )}
         </div>

web/src/views/recording/RecordingView.tsx

@@ -22,6 +22,7 @@ import {
   ReviewFilter,
   ReviewSegment,
   ReviewSummary,
+  ZoomLevel,
 } from "@/types/review";
 import { getChunkedTimeDay } from "@/utils/timelineUtil";
 import {
@@ -884,7 +885,7 @@ function Timeline({
     timestampSpread: 15,
   });
 
-  const possibleZoomLevels = useMemo(
+  const possibleZoomLevels: ZoomLevel[] = useMemo(
     () => [
       { segmentDuration: 30, timestampSpread: 15 },
       { segmentDuration: 15, timestampSpread: 5 },
@@ -900,6 +901,14 @@ function Timeline({
     [possibleZoomLevels],
   );
 
+  const currentZoomLevel = useMemo(
+    () =>
+      possibleZoomLevels.findIndex(
+        (level) => level.segmentDuration === zoomSettings.segmentDuration,
+      ),
+    [possibleZoomLevels, zoomSettings.segmentDuration],
+  );
+
   const { isZooming, zoomDirection } = useTimelineZoom({
     zoomSettings,
     zoomLevels: possibleZoomLevels,
@@ -1010,6 +1019,9 @@ function Timeline({
             onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
             isZooming={isZooming}
             zoomDirection={zoomDirection}
+            onZoomChange={handleZoomChange}
+            possibleZoomLevels={possibleZoomLevels}
+            currentZoomLevel={currentZoomLevel}
           />
         ) : (
           <Skeleton className="size-full" />