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,148 +367,204 @@ export function ReviewTimeline({
   }, [getRecordingAvailability, handlebarTime, segmentDuration]);
 
   return (
-    <div
+    <>
-      ref={timelineRef}
+      <div
-      className={cn(
+        ref={timelineRef}
-        "no-scrollbar relative h-full select-none overflow-y-auto bg-secondary transition-all duration-500 ease-in-out",
+        className={cn(
-        isZooming && zoomDirection === "in" && "animate-timeline-zoom-in",
+          "no-scrollbar relative h-full select-none overflow-y-auto bg-secondary transition-all duration-500 ease-in-out",
-        isZooming && zoomDirection === "out" && "animate-timeline-zoom-out",
+          isZooming && zoomDirection === "in" && "animate-timeline-zoom-in",
-        isDragging && (showHandlebar || showExportHandles)
+          isZooming && zoomDirection === "out" && "animate-timeline-zoom-out",
-          ? "cursor-grabbing"
+          isDragging && (showHandlebar || showExportHandles)
-          : "cursor-auto",
+            ? "cursor-grabbing"
-      )}
+            : "cursor-auto",
-    >
+        )}
-      <div ref={segmentsRef} className="relative flex flex-col">
+      >
-        <div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
+        <div ref={segmentsRef} className="relative flex flex-col">
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[30px] w-full bg-gradient-to-t from-secondary to-transparent"></div>
+          <div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
-        {children}
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[30px] w-full bg-gradient-to-t from-secondary to-transparent"></div>
+          {children}
+        </div>
+        {children && (
+          <>
+            {showHandlebar && (
+              <div
+                className={`absolute left-0 top-0 ${isDraggingHandlebar && isIOS ? "" : "z-20"} w-full`}
+                role="scrollbar"
+                ref={handlebarRef}
+              >
+                <div
+                  className="flex touch-none select-none items-center justify-center"
+                  onMouseDown={handleHandlebar}
+                  onTouchStart={handleHandlebar}
+                >
+                  <div
+                    className={`relative w-full ${
+                      isDraggingHandlebar ? "cursor-grabbing" : "cursor-grab"
+                    }`}
+                  >
+                    <div
+                      className={`mx-auto rounded-full bg-destructive ${
+                        dense
+                          ? "w-12 md:w-20"
+                          : segmentDuration < 60
+                            ? "w-[80px]"
+                            : "w-20"
+                      } h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-auto -translate-x-1/2 transform bg-destructive/80 px-3" : "static"} flex items-center justify-center`}
+                    >
+                      <div
+                        ref={handlebarTimeRef}
+                        className={`pointer-events-none text-white ${textSizeClasses("handlebar")} z-10`}
+                      ></div>
+                    </div>
+                    <div
+                      className={`absolute h-[4px] w-full bg-destructive ${isDraggingHandlebar && isMobile ? "top-1" : "top-1/2 -translate-y-1/2 transform"}`}
+                    ></div>
+                  </div>
+                </div>
+                {/* TODO: determine if we should keep this tooltip */}
+                {false && isHandlebarInNoRecordingPeriod && (
+                  <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 rounded-md bg-destructive/80 px-4 py-1 text-center text-xs text-white shadow-lg">
+                    No recordings
+                  </div>
+                )}
+              </div>
+            )}
+            {showExportHandles && (
+              <>
+                <div
+                  className={`export-end absolute left-0 top-0 ${isDraggingExportEnd && isIOS ? "" : "z-20"} w-full`}
+                  role="scrollbar"
+                  ref={exportEndRef}
+                >
+                  <div
+                    className="flex touch-none select-none items-center justify-center"
+                    onMouseDown={handleExportEnd}
+                    onTouchStart={handleExportEnd}
+                  >
+                    <div
+                      className={`relative mt-[6.5px] w-full ${
+                        isDraggingExportEnd ? "cursor-grabbing" : "cursor-grab"
+                      }`}
+                    >
+                      <div
+                        className={`mx-auto -mt-4 bg-selected ${
+                          dense
+                            ? "w-12 md:w-20"
+                            : segmentDuration < 60
+                              ? "w-[80px]"
+                              : "w-20"
+                        } h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
+                      >
+                        <div
+                          ref={exportEndTimeRef}
+                          className={`pointer-events-none text-white ${isDraggingExportEnd && isMobile ? "mt-0" : ""} ${textSizeClasses("export_end")} z-10`}
+                        ></div>
+                      </div>
+                      <div
+                        className={`absolute h-[4px] w-full bg-selected ${isDraggingExportEnd && isMobile ? "top-0" : "top-1/2 -translate-y-1/2 transform"}`}
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  ref={exportSectionRef}
+                  className="absolute w-full bg-selected/50"
+                ></div>
+                <div
+                  className={`export-start absolute left-0 top-0 ${isDraggingExportStart && isIOS ? "" : "z-20"} w-full`}
+                  role="scrollbar"
+                  ref={exportStartRef}
+                >
+                  <div
+                    className="flex touch-none select-none items-center justify-center"
+                    onMouseDown={handleExportStart}
+                    onTouchStart={handleExportStart}
+                  >
+                    <div
+                      className={`relative -mt-[6.5px] w-full ${
+                        isDragging ? "cursor-grabbing" : "cursor-grab"
+                      }`}
+                    >
+                      <div
+                        className={`absolute h-[4px] w-full bg-selected ${isDraggingExportStart && isMobile ? "top-[12px]" : "top-1/2 -translate-y-1/2 transform"}`}
+                      ></div>
+                      <div
+                        className={`mx-auto mt-4 bg-selected ${
+                          dense
+                            ? "w-12 md:w-20"
+                            : segmentDuration < 60
+                              ? "w-[80px]"
+                              : "w-20"
+                        } h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
+                      >
+                        <div
+                          ref={exportStartTimeRef}
+                          className={`pointer-events-none text-white ${isDraggingExportStart && isMobile ? "mt-0" : ""} ${textSizeClasses("export_start")} z-10`}
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </>
+        )}
       </div>
-      {children && (
+
-        <>
+      {onZoomChange && currentZoomLevelIndex !== -1 && (
-          {showHandlebar && (
+        <div
-            <div
+          className={`absolute z-30 flex gap-2 ${
-              className={`absolute left-0 top-0 ${isDraggingHandlebar && isIOS ? "" : "z-20"} w-full`}
+            isMobile
-              role="scrollbar"
+              ? "bottom-4 right-1 flex-col gap-3"
-              ref={handlebarRef}
+              : "bottom-2 left-1/2 -translate-x-1/2"
-            >
+          }`}
-              <div
+        >
-                className="flex touch-none select-none items-center justify-center"
+          <Tooltip>
-                onMouseDown={handleHandlebar}
+            <TooltipTrigger asChild>
-                onTouchStart={handleHandlebar}
+              <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"
               >
-                <div
+                <LuZoomOut className={cn("size-5 text-primary-variant")} />
-                  className={`relative w-full ${
+              </Button>
-                    isDraggingHandlebar ? "cursor-grabbing" : "cursor-grab"
+            </TooltipTrigger>
-                  }`}
+            <TooltipPortal>
-                >
+              <TooltipContent>{t("zoomIn")}</TooltipContent>
-                  <div
+            </TooltipPortal>
-                    className={`mx-auto rounded-full bg-destructive ${
+          </Tooltip>
-                      dense
+          <Tooltip>
-                        ? "w-12 md:w-20"
+            <TooltipTrigger asChild>
-                        : segmentDuration < 60
+              <Button
-                          ? "w-[80px]"
+                onClick={(e) => {
-                          : "w-20"
+                  const newLevel = Math.min(
-                    } h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-auto -translate-x-1/2 transform bg-destructive/80 px-3" : "static"} flex items-center justify-center`}
+                    zoomLevels.length - 1,
-                  >
+                    currentZoomLevelIndex + 1,
-                    <div
+                  );
-                      ref={handlebarTimeRef}
+                  onZoomChange(newLevel);
-                      className={`pointer-events-none text-white ${textSizeClasses("handlebar")} z-10`}
+                  e.currentTarget.blur();
-                    ></div>
+                }}
-                  </div>
+                variant="outline"
-                  <div
+                disabled={currentZoomLevelIndex === zoomLevels.length - 1}
-                    className={`absolute h-[4px] w-full bg-destructive ${isDraggingHandlebar && isMobile ? "top-1" : "top-1/2 -translate-y-1/2 transform"}`}
+                className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
-                  ></div>
+                type="button"
-                </div>
-              </div>
-              {/* TODO: determine if we should keep this tooltip */}
-              {false && isHandlebarInNoRecordingPeriod && (
-                <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 rounded-md bg-destructive/80 px-4 py-1 text-center text-xs text-white shadow-lg">
-                  No recordings
-                </div>
-              )}
-            </div>
-          )}
-          {showExportHandles && (
-            <>
-              <div
-                className={`export-end absolute left-0 top-0 ${isDraggingExportEnd && isIOS ? "" : "z-20"} w-full`}
-                role="scrollbar"
-                ref={exportEndRef}
               >
-                <div
+                <LuZoomIn className={cn("size-5 text-primary-variant")} />
-                  className="flex touch-none select-none items-center justify-center"
+              </Button>
-                  onMouseDown={handleExportEnd}
+            </TooltipTrigger>
-                  onTouchStart={handleExportEnd}
+            <TooltipPortal>
-                >
+              <TooltipContent>{t("zoomOut")}</TooltipContent>
-                  <div
+            </TooltipPortal>
-                    className={`relative mt-[6.5px] w-full ${
+          </Tooltip>
-                      isDraggingExportEnd ? "cursor-grabbing" : "cursor-grab"
+        </div>
-                    }`}
-                  >
-                    <div
-                      className={`mx-auto -mt-4 bg-selected ${
-                        dense
-                          ? "w-12 md:w-20"
-                          : segmentDuration < 60
-                            ? "w-[80px]"
-                            : "w-20"
-                      } h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
-                    >
-                      <div
-                        ref={exportEndTimeRef}
-                        className={`pointer-events-none text-white ${isDraggingExportEnd && isMobile ? "mt-0" : ""} ${textSizeClasses("export_end")} z-10`}
-                      ></div>
-                    </div>
-                    <div
-                      className={`absolute h-[4px] w-full bg-selected ${isDraggingExportEnd && isMobile ? "top-0" : "top-1/2 -translate-y-1/2 transform"}`}
-                    ></div>
-                  </div>
-                </div>
-              </div>
-              <div
-                ref={exportSectionRef}
-                className="absolute w-full bg-selected/50"
-              ></div>
-              <div
-                className={`export-start absolute left-0 top-0 ${isDraggingExportStart && isIOS ? "" : "z-20"} w-full`}
-                role="scrollbar"
-                ref={exportStartRef}
-              >
-                <div
-                  className="flex touch-none select-none items-center justify-center"
-                  onMouseDown={handleExportStart}
-                  onTouchStart={handleExportStart}
-                >
-                  <div
-                    className={`relative -mt-[6.5px] w-full ${
-                      isDragging ? "cursor-grabbing" : "cursor-grab"
-                    }`}
-                  >
-                    <div
-                      className={`absolute h-[4px] w-full bg-selected ${isDraggingExportStart && isMobile ? "top-[12px]" : "top-1/2 -translate-y-1/2 transform"}`}
-                    ></div>
-                    <div
-                      className={`mx-auto mt-4 bg-selected ${
-                        dense
-                          ? "w-12 md:w-20"
-                          : segmentDuration < 60
-                            ? "w-[80px]"
-                            : "w-20"
-                      } h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
-                    >
-                      <div
-                        ref={exportStartTimeRef}
-                        className={`pointer-events-none text-white ${isDraggingExportStart && isMobile ? "mt-0" : ""} ${textSizeClasses("export_start")} z-10`}
-                      ></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-        </>
       )}
-    </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" />