Improve live view controls

frontend/src/components/camera/CameraPickerDialog.tsx

@@ -8,16 +8,22 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 
 import { CameraPickerGrid } from "components/camera/CameraPickerGrid";
+import { useCameraStore } from "components/camera/useCameraStore";
 
 type CameraPickerDialogProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
 };
 export function CameraPickerDialog({ open, setOpen }: CameraPickerDialogProps) {
+  const { clearSelectedCameras, selectedCameras } = useCameraStore();
   const handleClose = () => {
     setOpen(false);
   };
 
+  const handleClearSelection = () => {
+    clearSelectedCameras();
+  };
+
   return (
     <Dialog
       fullWidth
@@ -44,6 +50,12 @@ export function CameraPickerDialog({ open, setOpen }: CameraPickerDialogProps) {
         <CameraPickerGrid />
       </DialogContent>
       <DialogActions>
+        <Button
+          disabled={selectedCameras.length === 0}
+          onClick={handleClearSelection}
+        >
+          Clear selection
+        </Button>
         <Button onClick={handleClose}>Close</Button>
       </DialogActions>
     </Dialog>

frontend/src/components/camera/useCameraStore.tsx

@@ -13,6 +13,7 @@ interface CameraState {
   selectedCameras: string[];
   toggleCamera: (cameraIdentifier: string) => void;
   selectSingleCamera: (cameraIdentifier: string) => void;
+  clearSelectedCameras: () => void;
   selectionOrder: string[];
   setSelectedCameras: (cameras: string[]) => void;
   setSelectionOrder: (order: string[]) => void;
@@ -58,6 +59,19 @@ export const useCameraStore = create<CameraState>()(
           };
         });
       },
+      clearSelectedCameras: () => {
+        set((state) => {
+          const newCameras = { ...state.cameras };
+          Object.keys(newCameras).forEach((key) => {
+            newCameras[key] = false;
+          });
+          return {
+            cameras: newCameras,
+            selectedCameras: [],
+            selectionOrder: [],
+          };
+        });
+      },
       selectionOrder: [],
       setSelectedCameras: (cameras) => {
         set((state) => {

frontend/src/components/header/SetupErrorBanner.tsx

@@ -2,21 +2,37 @@ import { Warning } from "@carbon/icons-react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
-import { useContext } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 
 import { ViseronContext } from "context/ViseronContext";
 
 export default function SetupErrorBanner() {
   const theme = useTheme();
+  const location = useLocation();
   const { setupStatus } = useContext(ViseronContext);
+  const [hiddenKey, setHiddenKey] = useState<string | null>(null);
 
   const errorCount = setupStatus.components.reduce(
     (sum, comp) => sum + comp.errors.length + (comp.validation_error ? 1 : 0),
     0,
   );
 
-  if (errorCount === 0) {
+  const autoHide = location.pathname === "/live";
+  const hideKey = autoHide ? `${location.key}:${errorCount}` : null;
+  const hidden = hideKey !== null && hiddenKey === hideKey;
+
+  useEffect(() => {
+    if (!autoHide || errorCount === 0 || hideKey === null) {
+      return undefined;
+    }
+    const timeout = window.setTimeout(() => {
+      setHiddenKey(hideKey);
+    }, 6000);
+    return () => window.clearTimeout(timeout);
+  }, [autoHide, errorCount, hideKey]);
+
+  if (errorCount === 0 || hidden) {
     return null;
   }
 

frontend/src/components/player/view/ViewSpeedDial.tsx

@@ -93,7 +93,14 @@ export function ViewSpeedDial({
         ariaLabel="View SpeedDial"
         sx={
           inline
-            ? { ml: 0 }
+            ? {
+                display: "inline-flex",
+                height: size === "small" ? 40 : 56,
+                ml: 0,
+                position: "relative",
+                verticalAlign: "bottom",
+                width: size === "small" ? 40 : 56,
+              }
             : { position: "fixed", bottom, right, zIndex: 1000 }
         }
         icon={<Template size={size === "small" ? 20 : 24} />}

frontend/src/pages/Live.tsx

@@ -600,9 +600,12 @@ export const FloatingMenu = memo(
         <Box
           ref={menuBoxRef}
           sx={{
+            alignItems: "center",
+            display: "flex",
+            gap: 1,
             position: "absolute",
-            bottom: isFullscreen ? 9 : 16,
             left: isFullscreen ? 9 : 25,
+            top: 56,
             zIndex: 1000,
             opacity: isFullscreen && !isMenuVisible ? 0 : 1,
             transition: "opacity 0.3s ease-in-out",
@@ -620,7 +623,6 @@ export const FloatingMenu = memo(
               size="small"
               color="primary"
               onClick={() => setCameraDialogOpen(true)}
-              sx={{ mr: 1 }}
             >
               <VideoAdd size={20} />
             </Fab>
@@ -635,7 +637,6 @@ export const FloatingMenu = memo(
               size="small"
               color="primary"
               onClick={() => setGridLayoutDialogOpen(true)}
-              sx={{ mr: 1 }}
             >
               <Grid size={20} />
             </Fab>