add icons to zoom timeline

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,8 @@ import {
   useState,
 } from "react";
 import { isIOS, isMobile } from "react-device-detect";
+import { Button } from "../ui/button";
+import { LuZoomIn, LuZoomOut } from "react-icons/lu";
 
 export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
@@ -37,6 +39,9 @@ export type ReviewTimelineProps = {
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
   getRecordingAvailability?: (time: number) => boolean | undefined;
+  onZoomChange?: (newZoomLevel: number) => void;
+  possibleZoomLevels?: ZoomLevel[];
+  currentZoomLevel?: number;
   children: ReactNode;
 };
 
@@ -63,6 +68,9 @@ export function ReviewTimeline({
   isZooming,
   zoomDirection,
   getRecordingAvailability,
+  onZoomChange,
+  possibleZoomLevels,
+  currentZoomLevel,
   children,
 }: ReviewTimelineProps) {
   const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
@@ -78,6 +86,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 +363,7 @@ export function ReviewTimeline({
   }, [getRecordingAvailability, handlebarTime, segmentDuration]);
 
   return (
+    <>
       <div
         ref={timelineRef}
         className={cn(
@@ -490,6 +506,45 @@ export function ReviewTimeline({
           </>
         )}
       </div>
+
+      {onZoomChange && currentZoomLevelIndex !== -1 && (
+        <div
+          className={`absolute z-30 flex gap-2 ${
+            isMobile
+              ? "bottom-4 right-2 flex-col gap-4"
+              : "bottom-2 left-1/2 -translate-x-1/2"
+          }`}
+        >
+          <Button
+            onClick={() => {
+              const newLevel = Math.max(0, currentZoomLevelIndex - 1);
+              onZoomChange(newLevel);
+            }}
+            variant="outline"
+            disabled={currentZoomLevelIndex === 0}
+            className="p-3"
+            title="Zoom out"
+          >
+            <LuZoomOut className={isMobile ? "size-5" : "size-4"} />
+          </Button>
+          <Button
+            onClick={() => {
+              const newLevel = Math.min(
+                zoomLevels.length - 1,
+                currentZoomLevelIndex + 1,
+              );
+              onZoomChange(newLevel);
+            }}
+            variant="outline"
+            disabled={currentZoomLevelIndex === zoomLevels.length - 1}
+            className="p-3"
+            title="Zoom in"
+          >
+            <LuZoomIn className={isMobile ? "size-5" : "size-4"} />
+          </Button>
+        </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 },
@@ -414,6 +415,8 @@ 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}
               />
             )}
             {isEventsReviewTimeline && (
@@ -441,6 +444,8 @@ 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}
               />
             )}
           </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 },
@@ -799,7 +800,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 +822,8 @@ function DetectionReview({
               dense={isMobile}
               isZooming={isZooming}
               zoomDirection={zoomDirection}
+              onZoomChange={handleZoomChange}
+              possibleZoomLevels={possibleZoomLevels}
             />
           )}
         </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 },
@@ -1010,6 +1011,8 @@ function Timeline({
             onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
             isZooming={isZooming}
             zoomDirection={zoomDirection}
+            onZoomChange={handleZoomChange}
+            possibleZoomLevels={possibleZoomLevels}
           />
         ) : (
           <Skeleton className="size-full" />