From 1d77ddab88f1efe9ba59b97af8c61aba7b6ba476 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 12 May 2025 07:28:42 -0500
Subject: [PATCH] Add camera name tooltip to previews in recording view

---
 web/src/views/recording/RecordingView.tsx | 62 ++++++++++++++---------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 9e38503d1..c09835c19 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -50,6 +50,11 @@ import { useFullscreen } from "@/hooks/use-fullscreen";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type RecordingViewProps = {
   startCamera: string;
@@ -670,31 +675,38 @@ export function RecordingView({
                   }
 
                   return (
-                    <div
-                      key={cam}
-                      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);
-                        }}
-                        onClick={() => onSelectCamera(cam)}
-                      />
-                    </div>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div
+                          key={cam}
+                          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);
+                            }}
+                            onClick={() => onSelectCamera(cam)}
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent className="smart-capitalize">
+                        {cam}
+                      </TooltipContent>
+                    </Tooltip>
                   );
                 })}
                 <div className="w-2" />