Only allow visible cameras to go live on dashboard (#10671)

* Only show live cameras that are currently visible

* Add back black background

* fix

web/src/components/player/LivePlayer.tsx

@@ -10,10 +10,10 @@ import { useCameraActivity } from "@/hooks/use-camera-activity";
 import { useRecordingsState } from "@/api/ws";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
-import { isDesktop } from "react-device-detect";
 import CameraActivityIndicator from "../indicators/CameraActivityIndicator";
 
 type LivePlayerProps = {
+  cameraRef?: (ref: HTMLDivElement | null) => void;
   className?: string;
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
@@ -26,6 +26,7 @@ type LivePlayerProps = {
 };
 
 export default function LivePlayer({
+  cameraRef = undefined,
   className,
   cameraConfig,
   preferredLiveMode,
@@ -140,6 +141,8 @@ export default function LivePlayer({
 
   return (
     <div
+      ref={cameraRef}
+      data-camera={cameraConfig.name}
       className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
         activeTracking
           ? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
@@ -171,13 +174,11 @@ export default function LivePlayer({
         )}
       </div>
 
-      {isDesktop && (
-        <div className="absolute right-2 top-2 size-4">
-          {recording == "ON" && (
-            <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
-          )}
-        </div>
-      )}
+      <div className="absolute right-2 top-2 size-4">
+        {recording == "ON" && (
+          <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
+        )}
+      </div>
     </div>
   );
 }

web/src/components/player/PreviewPlayer.tsx

@@ -234,7 +234,7 @@ function PreviewVideoPlayer({
 
   return (
     <div
-      className={`relative w-full rounded-2xl overflow-hidden ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
+      className={`relative w-full rounded-2xl bg-black overflow-hidden ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
       onClick={onClick}
     >
       {currentHourFrame && (
@@ -247,7 +247,7 @@ function PreviewVideoPlayer({
         ref={canvasRef}
         width={videoWidth}
         height={videoHeight}
-        className={`absolute h-full left-1/2 -translate-x-1/2 bg-black ${!loaded && hasCanvas ? "" : "hidden"}`}
+        className={`absolute h-full left-1/2 -translate-x-1/2 ${!loaded && hasCanvas ? "" : "hidden"}`}
       />
       <video
         ref={previewRef}
@@ -281,7 +281,7 @@ function PreviewVideoPlayer({
         <Skeleton className="absolute inset-0" />
       )}
       {cameraPreviews && !currentPreview && (
-        <div className="absolute inset-0 bg-black text-white rounded-2xl flex justify-center items-center">
+        <div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
           No Preview Found
         </div>
       )}