Recording fixes (#11406)

* Fix infinite review items when record is disabled

* Fix showing loading icon while continuing to scrub

* Fix recording layout previews

frigate/review/maintainer.py

@@ -441,11 +441,14 @@ class ReviewSegmentMaintainer(threading.Thread):
                 if camera not in self.indefinite_events:
                     self.indefinite_events[camera] = {}
 
-            if not self.config.cameras[camera].record.enabled:
-                continue
-
             current_segment = self.active_review_segments.get(camera)
 
+            if not self.config.cameras[camera].record.enabled:
+                if current_segment:
+                    self.update_existing_segment(current_segment, frame_time, [])
+
+                continue
+
             if current_segment is not None:
                 if topic == DetectionTypeEnum.video:
                     self.update_existing_segment(

web/src/components/player/PreviewPlayer.tsx

@@ -40,6 +40,33 @@ export default function PreviewPlayer({
 }: PreviewPlayerProps) {
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
 
+  const currentPreview = useMemo(() => {
+    return cameraPreviews.find(
+      (preview) =>
+        preview.camera == camera &&
+        Math.round(preview.start) >= timeRange.after &&
+        Math.floor(preview.end) <= timeRange.before,
+    );
+  }, [cameraPreviews, camera, timeRange]);
+
+  if (currentPreview) {
+    return (
+      <PreviewVideoPlayer
+        className={className}
+        camera={camera}
+        timeRange={timeRange}
+        cameraPreviews={cameraPreviews}
+        initialPreview={currentPreview}
+        startTime={startTime}
+        isScrubbing={isScrubbing}
+        currentHourFrame={currentHourFrame}
+        onControllerReady={onControllerReady}
+        onClick={onClick}
+        setCurrentHourFrame={setCurrentHourFrame}
+      />
+    );
+  }
+
   if (isCurrentHour(timeRange.before)) {
     return (
       <PreviewFramesPlayer
@@ -55,19 +82,10 @@ export default function PreviewPlayer({
   }
 
   return (
-    <PreviewVideoPlayer
-      className={className}
-      camera={camera}
-      timeRange={timeRange}
-      cameraPreviews={cameraPreviews}
-      startTime={startTime}
-      isScrubbing={isScrubbing}
-      currentHourFrame={currentHourFrame}
-      onControllerReady={onControllerReady}
-      onClick={onClick}
-      setCurrentHourFrame={setCurrentHourFrame}
-    />
-  );
+    <div className="size-full flex items-center justify-center rounded-lg text-white md:rounded-2xl">
+      No Preview Found
+    </div>
+  )
 }
 
 export abstract class PreviewController {
@@ -89,6 +107,7 @@ type PreviewVideoPlayerProps = {
   camera: string;
   timeRange: TimeRange;
   cameraPreviews: Preview[];
+  initialPreview?: Preview;
   startTime?: number;
   isScrubbing: boolean;
   currentHourFrame?: string;
@@ -101,6 +120,7 @@ function PreviewVideoPlayer({
   camera,
   timeRange,
   cameraPreviews,
+  initialPreview,
   startTime,
   isScrubbing,
   currentHourFrame,
@@ -147,18 +167,6 @@ function PreviewVideoPlayer({
 
   const [firstLoad, setFirstLoad] = useState(true);
 
-  const initialPreview = useMemo(() => {
-    return cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
-
-    // we only want to calculate this once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const [currentPreview, setCurrentPreview] = useState(initialPreview);
 
   const onPreviewSeeked = useCallback(() => {

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -222,7 +222,7 @@ export default function DynamicVideoPlayer({
           setPreviewController(previewController);
         }}
       />
-      {isLoading && !noRecording && (
+      {!isScrubbing && isLoading && !noRecording && (
         <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       )}
       {!isScrubbing && noRecording && (

web/src/views/events/RecordingView.tsx

@@ -544,7 +544,7 @@ export function RecordingView({
                 className={cn(
                   "flex gap-2 overflow-auto",
                   mainCameraAspect == "tall"
-                    ? "h-full w-48 flex-col"
+                    ? "h-full w-72 flex-col"
                     : `h-28 w-full`,
                   previewRowOverflows ? "" : "items-center justify-center",
                 )}
@@ -559,7 +559,7 @@ export function RecordingView({
                     <div
                       key={cam}
                       className={
-                        mainCameraAspect == "tall" ? undefined : "h-full"
+                        mainCameraAspect == "tall" ? "w-full" : "h-full"
                       }
                       style={{
                         aspectRatio: getCameraAspect(cam),