Individual live view (#10178)

* Get live camera view working

* Get ptz working

* Add button for ptz presets

* Add camera feature buttons

* Add button for camera audio

* Cleanup

* Cleanup mobile live

* Only use landscape check on mobile

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -0,0 +1,60 @@
+import { IconType } from "react-icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { isDesktop } from "react-device-detect";
+
+const variants = {
+  primary: {
+    active: "font-bold text-primary-foreground bg-primary",
+    inactive: "text-muted-foreground bg-muted",
+  },
+  secondary: {
+    active: "font-bold text-primary",
+    inactive: "text-muted-foreground",
+  },
+};
+
+type CameraFeatureToggleProps = {
+  className?: string;
+  variant?: "primary" | "secondary";
+  isActive: boolean;
+  Icon: IconType;
+  title: string;
+  onClick?: () => void;
+};
+
+export default function CameraFeatureToggle({
+  className = "",
+  variant = "primary",
+  isActive,
+  Icon,
+  title,
+  onClick,
+}: CameraFeatureToggleProps) {
+  const content = (
+    <div
+      onClick={onClick}
+      className={`${className} flex flex-col justify-center items-center rounded-lg ${
+        variants[variant][isActive ? "active" : "inactive"]
+      }`}
+    >
+      <Icon className="size-5 md:m-[6px]" />
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return content;
+}

web/src/components/player/LivePlayer.tsx

@@ -20,6 +20,8 @@ type LivePlayerProps = {
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
+  playAudio?: boolean;
+  onClick?: () => void;
 };
 
 export default function LivePlayer({
@@ -28,6 +30,8 @@ export default function LivePlayer({
   preferredLiveMode,
   showStillWithoutActivity = true,
   windowVisible = true,
+  playAudio = false,
+  onClick,
 }: LivePlayerProps) {
   // camera activity
 
@@ -35,8 +39,10 @@ export default function LivePlayer({
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
-    () => windowVisible && (activeMotion || activeTracking),
-    [activeMotion, activeTracking, windowVisible],
+    () =>
+      !showStillWithoutActivity ||
+      (windowVisible && (activeMotion || activeTracking)),
+    [activeMotion, activeTracking, showStillWithoutActivity, windowVisible],
   );
 
   // camera live state
@@ -91,6 +97,7 @@ export default function LivePlayer({
         className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
+        audioEnabled={playAudio}
         onPlaying={() => setLiveReady(true)}
       />
     );
@@ -101,6 +108,7 @@ export default function LivePlayer({
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
           playbackEnabled={cameraActive}
+          audioEnabled={playAudio}
           onPlaying={() => setLiveReady(true)}
         />
       );
@@ -127,11 +135,12 @@ export default function LivePlayer({
 
   return (
     <div
-      className={`relative flex justify-center w-full outline ${
+      className={`relative flex justify-center w-full outline cursor-pointer ${
         activeTracking
           ? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_2px] shadow-severity_alert"
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
+      onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>

web/src/components/player/MsePlayer.tsx

@@ -5,6 +5,7 @@ type MSEPlayerProps = {
   camera: string;
   className?: string;
   playbackEnabled?: boolean;
+  audioEnabled?: boolean;
   onPlaying?: () => void;
 };
 
@@ -12,6 +13,7 @@ function MSEPlayer({
   camera,
   className,
   playbackEnabled = true,
+  audioEnabled = false,
   onPlaying,
 }: MSEPlayerProps) {
   let connectTS: number = 0;
@@ -273,7 +275,7 @@ function MSEPlayer({
       playsInline
       preload="auto"
       onLoadedData={onPlaying}
-      muted
+      muted={!audioEnabled}
     />
   );
 }

web/src/components/player/WebRTCPlayer.tsx

@@ -5,6 +5,7 @@ type WebRtcPlayerProps = {
   className?: string;
   camera: string;
   playbackEnabled?: boolean;
+  audioEnabled?: boolean;
   onPlaying?: () => void;
 };
 
@@ -12,6 +13,7 @@ export default function WebRtcPlayer({
   className,
   camera,
   playbackEnabled = true,
+  audioEnabled = false,
   onPlaying,
 }: WebRtcPlayerProps) {
   // camera states
@@ -160,7 +162,7 @@ export default function WebRtcPlayer({
       className={className}
       autoPlay
       playsInline
-      muted
+      muted={!audioEnabled}
       onLoadedData={onPlaying}
     />
   );