fix current zoom level handling

web/src/pages/UIPlayground.tsx

@@ -197,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,
@@ -417,6 +425,7 @@ function UIPlayground() {
                 zoomDirection={zoomDirection} // is the timeline zooming in or out
                 onZoomChange={handleZoomChange}
                 possibleZoomLevels={possibleZoomLevels}
+                currentZoomLevel={currentZoomLevel}
               />
             )}
             {isEventsReviewTimeline && (
@@ -446,6 +455,7 @@ function UIPlayground() {
                 zoomDirection={zoomDirection} // is the timeline zooming in or out
                 onZoomChange={handleZoomChange}
                 possibleZoomLevels={possibleZoomLevels}
+                currentZoomLevel={currentZoomLevel}
               />
             )}
           </div>

web/src/views/events/EventView.tsx

@@ -518,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,
@@ -824,6 +832,7 @@ function DetectionReview({
               zoomDirection={zoomDirection}
               onZoomChange={handleZoomChange}
               possibleZoomLevels={possibleZoomLevels}
+              currentZoomLevel={currentZoomLevel}
             />
           )}
         </div>

web/src/views/recording/RecordingView.tsx

@@ -901,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,
@@ -1013,6 +1021,7 @@ function Timeline({
             zoomDirection={zoomDirection}
             onZoomChange={handleZoomChange}
             possibleZoomLevels={possibleZoomLevels}
+            currentZoomLevel={currentZoomLevel}
           />
         ) : (
           <Skeleton className="size-full" />