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>
   );
 }