From db7eef27c99b8f009ca3c74115eb034a13fdf1f3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 16 Oct 2025 07:41:49 -0600
Subject: [PATCH] Add camera previews back

---
 web/src/views/recording/RecordingView.tsx | 107 +++++++++++-----------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index b495d043b..aa15d693f 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -774,62 +774,61 @@ export function RecordingView({
                   containerRef={mainLayoutRef}
                 />
               </div>
-              {isDesktop &&
-                effectiveCameras.length > 1 &&
-                timelineType !== "detail" && (
-                  <div
-                    ref={previewRowRef}
-                    className={cn(
-                      "scrollbar-container flex gap-2 overflow-auto",
-                      mainCameraAspect == "tall"
-                        ? "h-full w-72 flex-col"
-                        : `h-28 w-full`,
-                      previewRowOverflows ? "" : "items-center justify-center",
-                    )}
-                  >
-                    <div className="w-2" />
-                    {effectiveCameras.map((cam) => {
-                      if (cam == mainCamera || cam == "birdseye") {
-                        return;
-                      }
+              {isDesktop && effectiveCameras.length > 1 && (
+                <div
+                  ref={previewRowRef}
+                  className={cn(
+                    "scrollbar-container flex gap-2 overflow-auto",
+                    mainCameraAspect == "tall"
+                      ? "h-full w-72 flex-col"
+                      : `h-28 w-full`,
+                    previewRowOverflows ? "" : "items-center justify-center",
+                    timelineType == "detail" && "mt-4",
+                  )}
+                >
+                  <div className="w-2" />
+                  {effectiveCameras.map((cam) => {
+                    if (cam == mainCamera || cam == "birdseye") {
+                      return;
+                    }
 
-                      return (
-                        <Tooltip key={cam}>
-                          <TooltipTrigger asChild>
-                            <div
-                              className={
-                                mainCameraAspect == "tall" ? "w-full" : "h-full"
-                              }
-                              style={{
-                                aspectRatio: getCameraAspect(cam),
+                    return (
+                      <Tooltip key={cam}>
+                        <TooltipTrigger asChild>
+                          <div
+                            className={
+                              mainCameraAspect == "tall" ? "w-full" : "h-full"
+                            }
+                            style={{
+                              aspectRatio: getCameraAspect(cam),
+                            }}
+                          >
+                            <PreviewPlayer
+                              previewRef={previewRef}
+                              className="size-full"
+                              camera={cam}
+                              timeRange={currentTimeRange}
+                              cameraPreviews={allPreviews ?? []}
+                              startTime={startTime}
+                              isScrubbing={scrubbing}
+                              isVisible={visiblePreviews.includes(cam)}
+                              onControllerReady={(controller) => {
+                                previewRefs.current[cam] = controller;
+                                controller.scrubToTimestamp(startTime);
                               }}
-                            >
-                              <PreviewPlayer
-                                previewRef={previewRef}
-                                className="size-full"
-                                camera={cam}
-                                timeRange={currentTimeRange}
-                                cameraPreviews={allPreviews ?? []}
-                                startTime={startTime}
-                                isScrubbing={scrubbing}
-                                isVisible={visiblePreviews.includes(cam)}
-                                onControllerReady={(controller) => {
-                                  previewRefs.current[cam] = controller;
-                                  controller.scrubToTimestamp(startTime);
-                                }}
-                                onClick={() => onSelectCamera(cam)}
-                              />
-                            </div>
-                          </TooltipTrigger>
-                          <TooltipContent className="smart-capitalize">
-                            <CameraNameLabel camera={cam} />
-                          </TooltipContent>
-                        </Tooltip>
-                      );
-                    })}
-                    <div className="w-2" />
-                  </div>
-                )}
+                              onClick={() => onSelectCamera(cam)}
+                            />
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent className="smart-capitalize">
+                          <CameraNameLabel camera={cam} />
+                        </TooltipContent>
+                      </Tooltip>
+                    );
+                  })}
+                  <div className="w-2" />
+                </div>
+              )}
             </div>
           </div>
           <Timeline