No recordings indicator on History timeline (#20715)

* black background

* fix backend logic

* fixes

* ensure data being sent to api is segment aligned

* tweak

* tweaks to keep motion review as-is

* fix for half segment fractional seconds when using zooming

web/src/components/timeline/ReviewTimeline.tsx

@@ -36,6 +36,7 @@ export type ReviewTimelineProps = {
   scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
+  getRecordingAvailability?: (time: number) => boolean | undefined;
   children: ReactNode;
 };
 
@@ -61,6 +62,7 @@ export function ReviewTimeline({
   scrollToSegment,
   isZooming,
   zoomDirection,
+  getRecordingAvailability,
   children,
 }: ReviewTimelineProps) {
   const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
@@ -326,6 +328,25 @@ export function ReviewTimeline({
     }
   }, [isDraggingHandlebar, onHandlebarDraggingChange]);
 
+  const isHandlebarInNoRecordingPeriod = useMemo(() => {
+    if (!getRecordingAvailability || handlebarTime === undefined) return false;
+
+    // Check current segment
+    const currentAvailability = getRecordingAvailability(handlebarTime);
+    if (currentAvailability !== false) return false;
+
+    // Check if at least one adjacent segment also has no recordings
+    const beforeAvailability = getRecordingAvailability(
+      handlebarTime - segmentDuration,
+    );
+    const afterAvailability = getRecordingAvailability(
+      handlebarTime + segmentDuration,
+    );
+
+    // If current segment has no recordings AND at least one adjacent segment also has no recordings
+    return beforeAvailability === false || afterAvailability === false;
+  }, [getRecordingAvailability, handlebarTime, segmentDuration]);
+
   return (
     <div
       ref={timelineRef}
@@ -380,6 +401,12 @@ export function ReviewTimeline({
                   ></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 && (