add context menu to dashboards

web/src/views/live/DraggableGridLayout.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
-import { LivePlayerError, LivePlayerMode } from "@/types/live";
+import { LivePlayerMode } from "@/types/live";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -43,6 +43,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
+import LiveContextMenu from "@/components/menu/LiveContextMenu";
 
 type DraggableGridLayoutProps = {
   cameras: CameraConfig[];
@@ -83,8 +84,13 @@ export default function DraggableGridLayout({
 
   // preferred live modes per camera
 
-  const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
+  const {
-    useCameraLiveMode(cameras, windowVisible);
+    preferredLiveModes,
+    setPreferredLiveModes,
+    resetPreferredLiveMode,
+    isRestreamedStates,
+    supportsAudioOutputStates,
+  } = useCameraLiveMode(cameras, windowVisible);
 
   const [globalAutoLive] = usePersistence("autoLiveView", true);
 
@@ -359,6 +365,34 @@ export default function DraggableGridLayout({
     placeholder.h = layoutItem.h;
   };
 
+  // audio states
+
+  const [audioStates, setAudioStates] = useState<Record<string, boolean>>({});
+  const [volumeStates, setVolumeStates] = useState<Record<string, number>>({});
+
+  const toggleAudio = (cameraName: string): void => {
+    setAudioStates((prev) => ({
+      ...prev,
+      [cameraName]: !prev[cameraName],
+    }));
+  };
+
+  const muteAll = (): void => {
+    const updatedStates: Record<string, boolean> = {};
+    visibleCameras.forEach((cameraName) => {
+      updatedStates[cameraName] = false;
+    });
+    setAudioStates(updatedStates);
+  };
+
+  const unmuteAll = (): void => {
+    const updatedStates: Record<string, boolean> = {};
+    visibleCameras.forEach((cameraName) => {
+      updatedStates[cameraName] = true;
+    });
+    setAudioStates(updatedStates);
+  };
+
   return (
     <>
       <Toaster position="top-center" closeButton={true} />
@@ -381,7 +415,7 @@ export default function DraggableGridLayout({
         </div>
       ) : (
         <div
-          className="no-scrollbar my-2 overflow-x-hidden px-2 pb-8"
+          className="no-scrollbar my-2 select-none overflow-x-hidden px-2 pb-8"
           ref={gridContainerRef}
         >
           <EditGroupDialog
@@ -451,7 +485,29 @@ export default function DraggableGridLayout({
                 currentGroupStreamingSettings?.[camera.name]
                   ?.compatibilityMode || false;
               return (
-                <LivePlayerGridItem
+                <GridLiveContextMenu
+                  key={camera.name}
+                  camera={camera.name}
+                  preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                  isRestreamed={isRestreamedStates[camera.name]}
+                  supportsAudio={
+                    supportsAudioOutputStates[streamName].supportsAudio
+                  }
+                  audioState={audioStates[camera.name]}
+                  toggleAudio={() => toggleAudio(camera.name)}
+                  volumeState={volumeStates[camera.name]}
+                  setVolumeState={(value) =>
+                    setVolumeStates({
+                      [camera.name]: value,
+                    })
+                  }
+                  muteAll={muteAll}
+                  unmuteAll={unmuteAll}
+                  resetPreferredLiveMode={() =>
+                    resetPreferredLiveMode(camera.name)
+                  }
+                >
+                  <LivePlayer
                     key={camera.name}
                     streamName={streamName}
                     autoLive={autoLive ?? globalAutoLive}
@@ -470,6 +526,7 @@ export default function DraggableGridLayout({
                     }
                     cameraConfig={camera}
                     preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                    playInBackground={false}
                     onClick={() => {
                       !isEditMode && onSelectCamera(camera.name);
                     }}
@@ -485,9 +542,9 @@ export default function DraggableGridLayout({
                       });
                     }}
                     onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
-                >
+                  />
                   {isEditMode && showCircles && <CornerCircles />}
-                </LivePlayerGridItem>
+                </GridLiveContextMenu>
               );
             })}
           </ResponsiveGridLayout>
@@ -630,49 +687,47 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
   },
 );
 
-type LivePlayerGridItemProps = {
+type GridLiveContextMenuProps = {
   style?: React.CSSProperties;
-  className: string;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
   onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
   onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
   children?: React.ReactNode;
-  cameraRef: (node: HTMLElement | null) => void;
+  camera: string;
-  windowVisible: boolean;
+  preferredLiveMode: string;
-  cameraConfig: CameraConfig;
+  isRestreamed: boolean;
-  preferredLiveMode: LivePlayerMode;
+  supportsAudio: boolean;
-  onClick: () => void;
+  audioState: boolean;
-  onError: (e: LivePlayerError) => void;
+  toggleAudio: () => void;
-  onResetLiveMode: () => void;
+  volumeState?: number;
-  streamName: string;
+  setVolumeState: (volumeState: number) => void;
-  autoLive: boolean;
+  muteAll: () => void;
-  showStillWithoutActivity: boolean;
+  unmuteAll: () => void;
-  useWebGL: boolean;
+  resetPreferredLiveMode: () => void;
 };
 
-const LivePlayerGridItem = React.forwardRef<
+const GridLiveContextMenu = React.forwardRef<
   HTMLDivElement,
-  LivePlayerGridItemProps
+  GridLiveContextMenuProps
 >(
   (
     {
       style,
-      className,
       onMouseDown,
       onMouseUp,
       onTouchEnd,
       children,
-      cameraRef,
+      camera,
-      windowVisible,
-      cameraConfig,
       preferredLiveMode,
-      onClick,
+      isRestreamed,
-      onError,
+      supportsAudio,
-      onResetLiveMode,
+      audioState,
-      autoLive,
+      toggleAudio,
-      showStillWithoutActivity,
+      volumeState,
-      streamName,
+      setVolumeState,
-      useWebGL,
+      muteAll,
+      unmuteAll,
+      resetPreferredLiveMode,
       ...props
     },
     ref,
@@ -686,23 +741,21 @@ const LivePlayerGridItem = React.forwardRef<
         onTouchEnd={onTouchEnd}
         {...props}
       >
-        <LivePlayer
+        <LiveContextMenu
-          cameraRef={cameraRef}
+          camera={camera}
-          className={className}
-          windowVisible={windowVisible}
-          cameraConfig={cameraConfig}
           preferredLiveMode={preferredLiveMode}
-          streamName={streamName}
+          isRestreamed={isRestreamed}
-          onClick={onClick}
+          supportsAudio={supportsAudio}
-          onError={onError}
+          audioState={audioState}
-          onResetLiveMode={onResetLiveMode}
+          toggleAudio={toggleAudio}
-          containerRef={ref as React.RefObject<HTMLDivElement>}
+          volumeState={volumeState}
-          autoLive={autoLive}
+          setVolumeState={setVolumeState}
-          playInBackground={false}
+          muteAll={muteAll}
-          showStillWithoutActivity={showStillWithoutActivity}
+          unmuteAll={unmuteAll}
-          useWebGL={useWebGL}
+          resetPreferredLiveMode={resetPreferredLiveMode}
-        />
+        >
           {children}
+        </LiveContextMenu>
       </div>
     );
   },

web/src/views/live/LiveDashboardView.tsx

@@ -36,6 +36,7 @@ import { LivePlayerError } from "@/types/live";
 import { FaCompress, FaExpand } from "react-icons/fa";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { useResizeObserver } from "@/hooks/resize-observer";
+import LiveContextMenu from "@/components/menu/LiveContextMenu";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -188,8 +189,13 @@ export default function LiveDashboardView({
     };
   }, []);
 
-  const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
+  const {
-    useCameraLiveMode(cameras, windowVisible);
+    preferredLiveModes,
+    setPreferredLiveModes,
+    resetPreferredLiveMode,
+    isRestreamedStates,
+    supportsAudioOutputStates,
+  } = useCameraLiveMode(cameras, windowVisible);
 
   const [allGroupsStreamingSettings, setAllGroupsStreamingSettings] =
     useState<AllGroupsStreamingSettings>({});
@@ -237,9 +243,37 @@ export default function LiveDashboardView({
     [setPreferredLiveModes],
   );
 
+  // audio states
+
+  const [audioStates, setAudioStates] = useState<Record<string, boolean>>({});
+  const [volumeStates, setVolumeStates] = useState<Record<string, number>>({});
+
+  const toggleAudio = (cameraName: string): void => {
+    setAudioStates((prev) => ({
+      ...prev,
+      [cameraName]: !prev[cameraName],
+    }));
+  };
+
+  const muteAll = (): void => {
+    const updatedStates: Record<string, boolean> = {};
+    visibleCameras.forEach((cameraName) => {
+      updatedStates[cameraName] = false;
+    });
+    setAudioStates(updatedStates);
+  };
+
+  const unmuteAll = (): void => {
+    const updatedStates: Record<string, boolean> = {};
+    visibleCameras.forEach((cameraName) => {
+      updatedStates[cameraName] = true;
+    });
+    setAudioStates(updatedStates);
+  };
+
   return (
     <div
-      className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"
+      className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
       ref={containerRef}
     >
       {isMobile && (
@@ -364,6 +398,30 @@ export default function LiveDashboardView({
                 grow = "aspect-video";
               }
               return (
+                <LiveContextMenu
+                  key={camera.name}
+                  camera={camera.name}
+                  preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                  isRestreamed={isRestreamedStates[camera.name]}
+                  supportsAudio={
+                    supportsAudioOutputStates[
+                      Object.values(camera.live.streams)?.[0]
+                    ]?.supportsAudio ?? false
+                  }
+                  audioState={audioStates[camera.name]}
+                  toggleAudio={() => toggleAudio(camera.name)}
+                  volumeState={volumeStates[camera.name]}
+                  setVolumeState={(value) =>
+                    setVolumeStates({
+                      [camera.name]: value,
+                    })
+                  }
+                  muteAll={muteAll}
+                  unmuteAll={unmuteAll}
+                  resetPreferredLiveMode={() =>
+                    resetPreferredLiveMode(camera.name)
+                  }
+                >
                   <LivePlayer
                     cameraRef={cameraRef}
                     key={camera.name}
@@ -380,7 +438,10 @@ export default function LiveDashboardView({
                     onClick={() => onSelectCamera(camera.name)}
                     onError={(e) => handleError(camera.name, e)}
                     onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
+                    playAudio={audioStates[camera.name] ?? false}
+                    volume={volumeStates[camera.name]}
                   />
+                </LiveContextMenu>
               );
             })}
           </div>