Fix recording layout previews

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/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),