web/public/locales/en/views/live.json

@@ -177,10 +177,6 @@
   "noCameras": {
     "title": "No Cameras Configured",
     "description": "Get started by connecting a camera to Frigate.",
-    "buttonText": "Add Camera",
-    "restricted": {
-      "title": "No Cameras Available",
-      "description": "You don't have permission to view any cameras in this group."
-    }
+    "buttonText": "Add Camera"
   }
 }

web/src/components/filter/CameraGroupSelector.tsx

@@ -9,7 +9,7 @@ import useSWR from "swr";
 import { MdHome } from "react-icons/md";
 import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
 import { Button, buttonVariants } from "../ui/button";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { LuPencil, LuPlus } from "react-icons/lu";
 import {
@@ -87,8 +87,6 @@ type CameraGroupSelectorProps = {
 export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
   const { t } = useTranslation(["components/camera"]);
   const { data: config } = useSWR<FrigateConfig>("config");
-  const allowedCameras = useAllowedCameras();
-  const isCustomRole = useIsCustomRole();
 
   // tooltip
 
@@ -121,22 +119,10 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
       return [];
     }
 
-    const allGroups = Object.entries(config.camera_groups);
-
-    // If custom role, filter out groups where user has no accessible cameras
-    if (isCustomRole) {
-      return allGroups
-        .filter(([, groupConfig]) => {
-          // Check if user has access to at least one camera in this group
-          return groupConfig.cameras.some((cameraName) =>
-            allowedCameras.includes(cameraName),
-          );
-        })
-        .sort((a, b) => a[1].order - b[1].order);
-    }
-
-    return allGroups.sort((a, b) => a[1].order - b[1].order);
-  }, [config, allowedCameras, isCustomRole]);
+    return Object.entries(config.camera_groups).sort(
+      (a, b) => a[1].order - b[1].order,
+    );
+  }, [config]);
 
   // add group
 
@@ -153,7 +139,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
         activeGroup={group}
         setGroup={setGroup}
         deleteGroup={deleteGroup}
-        isCustomRole={isCustomRole}
       />
       <Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
         <div
@@ -221,16 +206,14 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
             );
           })}
 
-          {!isCustomRole && (
-            <Button
-              className="bg-secondary text-muted-foreground"
-              aria-label={t("group.add")}
-              size="xs"
-              onClick={() => setAddGroup(true)}
-            >
-              <LuPlus className="size-4 text-primary" />
-            </Button>
-          )}
+          <Button
+            className="bg-secondary text-muted-foreground"
+            aria-label={t("group.add")}
+            size="xs"
+            onClick={() => setAddGroup(true)}
+          >
+            <LuPlus className="size-4 text-primary" />
+          </Button>
           {isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
         </div>
       </Scroller>
@@ -245,7 +228,6 @@ type NewGroupDialogProps = {
   activeGroup?: string;
   setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
   deleteGroup: () => void;
-  isCustomRole?: boolean;
 };
 function NewGroupDialog({
   open,
@@ -254,7 +236,6 @@ function NewGroupDialog({
   activeGroup,
   setGroup,
   deleteGroup,
-  isCustomRole,
 }: NewGroupDialogProps) {
   const { t } = useTranslation(["components/camera"]);
   const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
@@ -280,12 +261,6 @@ function NewGroupDialog({
     `${activeGroup}-draggable-layout`,
   );
 
-  useEffect(() => {
-    if (!open) {
-      setEditState("none");
-    }
-  }, [open]);
-
   // callbacks
 
   const onDeleteGroup = useCallback(
@@ -374,7 +349,13 @@ function NewGroupDialog({
         position="top-center"
         closeButton={true}
       />
-      <Overlay open={open} onOpenChange={setOpen}>
+      <Overlay
+        open={open}
+        onOpenChange={(open) => {
+          setEditState("none");
+          setOpen(open);
+        }}
+      >
         <Content
           className={cn(
             "scrollbar-container overflow-y-auto",
@@ -390,30 +371,28 @@ function NewGroupDialog({
               >
                 <Title>{t("group.label")}</Title>
                 <Description className="sr-only">{t("group.edit")}</Description>
-                {!isCustomRole && (
-                  <div
+                <div
+                  className={cn(
+                    "absolute",
+                    isDesktop && "right-6 top-10",
+                    isMobile && "absolute right-0 top-4",
+                  )}
+                >
+                  <Button
+                    size="sm"
                     className={cn(
-                      "absolute",
-                      isDesktop && "right-6 top-10",
-                      isMobile && "absolute right-0 top-4",
+                      isDesktop &&
+                        "size-6 rounded-md bg-secondary-foreground p-1 text-background",
+                      isMobile && "text-secondary-foreground",
                     )}
+                    aria-label={t("group.add")}
+                    onClick={() => {
+                      setEditState("add");
+                    }}
                   >
-                    <Button
-                      size="sm"
-                      className={cn(
-                        isDesktop &&
-                          "size-6 rounded-md bg-secondary-foreground p-1 text-background",
-                        isMobile && "text-secondary-foreground",
-                      )}
-                      aria-label={t("group.add")}
-                      onClick={() => {
-                        setEditState("add");
-                      }}
-                    >
-                      <LuPlus />
-                    </Button>
-                  </div>
-                )}
+                    <LuPlus />
+                  </Button>
+                </div>
               </Header>
               <div className="flex flex-col gap-4 md:gap-3">
                 {currentGroups.map((group) => (
@@ -422,7 +401,6 @@ function NewGroupDialog({
                     group={group}
                     onDeleteGroup={() => onDeleteGroup(group[0])}
                     onEditGroup={() => onEditGroup(group)}
-                    isReadOnly={isCustomRole}
                   />
                 ))}
               </div>
@@ -534,14 +512,12 @@ type CameraGroupRowProps = {
   group: [string, CameraGroupConfig];
   onDeleteGroup: () => void;
   onEditGroup: () => void;
-  isReadOnly?: boolean;
 };
 
 export function CameraGroupRow({
   group,
   onDeleteGroup,
   onEditGroup,
-  isReadOnly,
 }: CameraGroupRowProps) {
   const { t } = useTranslation(["components/camera"]);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -588,7 +564,7 @@ export function CameraGroupRow({
           </AlertDialogContent>
         </AlertDialog>
 
-        {isMobile && !isReadOnly && (
+        {isMobile && (
           <>
             <DropdownMenu modal={!isDesktop}>
               <DropdownMenuTrigger>
@@ -613,7 +589,7 @@ export function CameraGroupRow({
             </DropdownMenu>
           </>
         )}
-        {!isMobile && !isReadOnly && (
+        {!isMobile && (
           <div className="flex flex-row items-center gap-2">
             <Tooltip>
               <TooltipTrigger asChild>

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -377,7 +377,7 @@ export default function Step1NameCamera({
                           );
                           return selectedBrand &&
                             selectedBrand.value != "other" ? (
-                            <Popover modal={true}>
+                            <Popover>
                               <PopoverTrigger asChild>
                                 <Button
                                   variant="ghost"

web/src/components/settings/wizard/Step3StreamConfig.tsx

@@ -600,7 +600,7 @@ export default function Step3StreamConfig({
                   <Label className="text-sm font-medium text-primary-variant">
                     {t("cameraWizard.step3.roles")}
                   </Label>
-                  <Popover modal={true}>
+                  <Popover>
                     <PopoverTrigger asChild>
                       <Button variant="ghost" size="sm" className="h-4 w-4 p-0">
                         <LuInfo className="size-3" />
@@ -670,7 +670,7 @@ export default function Step3StreamConfig({
                   <Label className="text-sm font-medium text-primary-variant">
                     {t("cameraWizard.step3.featuresTitle")}
                   </Label>
-                  <Popover modal={true}>
+                  <Popover>
                     <PopoverTrigger asChild>
                       <Button variant="ghost" size="sm" className="h-4 w-4 p-0">
                         <LuInfo className="size-3" />

web/src/pages/Live.tsx

@@ -93,23 +93,19 @@ function Live() {
   const allowedCameras = useAllowedCameras();
 
   const includesBirdseye = useMemo(() => {
-    // Restricted users should never have access to birdseye
-    if (isCustomRole) {
-      return false;
-    }
-
     if (
       config &&
       Object.keys(config.camera_groups).length &&
       cameraGroup &&
       config.camera_groups[cameraGroup] &&
-      cameraGroup != "default"
+      cameraGroup != "default" &&
+      (!isCustomRole || "birdseye" in allowedCameras)
     ) {
       return config.camera_groups[cameraGroup].cameras.includes("birdseye");
     } else {
       return false;
     }
-  }, [config, cameraGroup, isCustomRole]);
+  }, [config, cameraGroup, allowedCameras, isCustomRole]);
 
   const cameras = useMemo(() => {
     if (!config) {

web/src/views/classification/ModelSelectionView.tsx

@@ -39,7 +39,6 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import BlurredIconButton from "@/components/button/BlurredIconButton";
-import { Skeleton } from "@/components/ui/skeleton";
 
 const allModelTypes = ["objects", "states"] as const;
 type ModelType = (typeof allModelTypes)[number];
@@ -333,7 +332,9 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
             <ImageShadowOverlay lowerClassName="h-[30%] z-0" />
           </>
         ) : (
-          <Skeleton className="flex size-full items-center justify-center" />
+          <div className="flex size-full items-center justify-center bg-background_alt">
+            <MdModelTraining className="size-16 text-muted-foreground" />
+          </div>
         )}
         <div className="absolute bottom-2 left-3 text-lg text-white smart-capitalize">
           {config.name}

web/src/views/live/LiveDashboardView.tsx

@@ -20,14 +20,7 @@ import {
   FrigateConfig,
 } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   isDesktop,
   isMobile,
@@ -53,8 +46,6 @@ import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { useTranslation } from "react-i18next";
 import { EmptyCard } from "@/components/card/EmptyCard";
 import { BsFillCameraVideoOffFill } from "react-icons/bs";
-import { AuthContext } from "@/context/auth-context";
-import { useIsCustomRole } from "@/hooks/use-is-custom-role";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -383,6 +374,10 @@ export default function LiveDashboardView({
     onSaveMuting(true);
   };
 
+  if (cameras.length == 0 && !includeBirdseye) {
+    return <NoCameraView />;
+  }
+
   return (
     <div
       className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
@@ -444,215 +439,198 @@ export default function LiveDashboardView({
         </div>
       )}
 
-      {cameras.length == 0 && !includeBirdseye ? (
-        <NoCameraView />
-      ) : (
+      {!fullscreen && events && events.length > 0 && (
+        <ScrollArea>
+          <TooltipProvider>
+            <div className="flex items-center gap-2 px-1">
+              {events.map((event) => {
+                return (
+                  <AnimatedEventCard
+                    key={event.id}
+                    event={event}
+                    selectedGroup={cameraGroup}
+                    updateEvents={updateEvents}
+                  />
+                );
+              })}
+            </div>
+          </TooltipProvider>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      )}
+
+      {!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
         <>
-          {!fullscreen && events && events.length > 0 && (
-            <ScrollArea>
-              <TooltipProvider>
-                <div className="flex items-center gap-2 px-1">
-                  {events.map((event) => {
-                    return (
-                      <AnimatedEventCard
-                        key={event.id}
-                        event={event}
-                        selectedGroup={cameraGroup}
-                        updateEvents={updateEvents}
-                      />
-                    );
-                  })}
-                </div>
-              </TooltipProvider>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
-          )}
-
-          {!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
-            <>
+          <div
+            className={cn(
+              "mt-2 grid grid-cols-1 gap-2 px-2 md:gap-4",
+              mobileLayout == "grid" &&
+                "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4",
+              isMobile && "px-0",
+            )}
+          >
+            {includeBirdseye && birdseyeConfig?.enabled && (
               <div
-                className={cn(
-                  "mt-2 grid grid-cols-1 gap-2 px-2 md:gap-4",
-                  mobileLayout == "grid" &&
-                    "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4",
-                  isMobile && "px-0",
-                )}
-              >
-                {includeBirdseye && birdseyeConfig?.enabled && (
-                  <div
-                    className={(() => {
-                      const aspectRatio =
-                        birdseyeConfig.width / birdseyeConfig.height;
-                      if (aspectRatio > 2) {
-                        return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
-                      } else if (aspectRatio < 1) {
-                        return `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
-                      } else {
-                        return "aspect-video";
-                      }
-                    })()}
-                    ref={birdseyeContainerRef}
-                  >
-                    <BirdseyeLivePlayer
-                      birdseyeConfig={birdseyeConfig}
-                      liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
-                      onClick={() => onSelectCamera("birdseye")}
-                      containerRef={birdseyeContainerRef}
-                    />
-                  </div>
-                )}
-                {cameras.map((camera) => {
-                  let grow;
+                className={(() => {
                   const aspectRatio =
-                    camera.detect.width / camera.detect.height;
+                    birdseyeConfig.width / birdseyeConfig.height;
                   if (aspectRatio > 2) {
-                    grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
+                    return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
                   } else if (aspectRatio < 1) {
-                    grow = `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
+                    return `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
                   } else {
-                    grow = "aspect-video";
+                    return "aspect-video";
                   }
-                  const availableStreams = camera.live.streams || {};
-                  const firstStreamEntry =
-                    Object.values(availableStreams)[0] || "";
-
-                  const streamNameFromSettings =
-                    currentGroupStreamingSettings?.[camera.name]?.streamName ||
-                    "";
-                  const streamExists =
-                    streamNameFromSettings &&
-                    Object.values(availableStreams).includes(
-                      streamNameFromSettings,
-                    );
-
-                  const streamName = streamExists
-                    ? streamNameFromSettings
-                    : firstStreamEntry;
-                  const streamType =
-                    currentGroupStreamingSettings?.[camera.name]?.streamType;
-                  const autoLive =
-                    streamType !== undefined
-                      ? streamType !== "no-streaming"
-                      : undefined;
-                  const showStillWithoutActivity =
-                    currentGroupStreamingSettings?.[camera.name]?.streamType !==
-                    "continuous";
-                  const useWebGL =
-                    currentGroupStreamingSettings?.[camera.name]
-                      ?.compatibilityMode || false;
-                  return (
-                    <LiveContextMenu
-                      className={grow}
-                      key={camera.name}
-                      camera={camera.name}
-                      cameraGroup={cameraGroup}
-                      streamName={streamName}
-                      preferredLiveMode={
-                        preferredLiveModes[camera.name] ?? "mse"
-                      }
-                      isRestreamed={isRestreamedStates[camera.name]}
-                      supportsAudio={
-                        supportsAudioOutputStates[streamName]?.supportsAudio ??
-                        false
-                      }
-                      audioState={audioStates[camera.name]}
-                      toggleAudio={() => toggleAudio(camera.name)}
-                      statsState={statsStates[camera.name]}
-                      toggleStats={() => toggleStats(camera.name)}
-                      volumeState={volumeStates[camera.name] ?? 1}
-                      setVolumeState={(value) =>
-                        setVolumeStates({
-                          [camera.name]: value,
-                        })
-                      }
-                      muteAll={muteAll}
-                      unmuteAll={unmuteAll}
-                      resetPreferredLiveMode={() =>
-                        resetPreferredLiveMode(camera.name)
-                      }
-                      config={config}
-                    >
-                      <LivePlayer
-                        cameraRef={cameraRef}
-                        key={camera.name}
-                        className={`${grow} rounded-lg bg-black md:rounded-2xl`}
-                        windowVisible={
-                          windowVisible && visibleCameras.includes(camera.name)
-                        }
-                        cameraConfig={camera}
-                        preferredLiveMode={
-                          preferredLiveModes[camera.name] ?? "mse"
-                        }
-                        autoLive={autoLive ?? globalAutoLive}
-                        showStillWithoutActivity={
-                          showStillWithoutActivity ?? true
-                        }
-                        alwaysShowCameraName={displayCameraNames}
-                        useWebGL={useWebGL}
-                        playInBackground={false}
-                        showStats={statsStates[camera.name]}
-                        streamName={streamName}
-                        onClick={() => onSelectCamera(camera.name)}
-                        onError={(e) => handleError(camera.name, e)}
-                        onResetLiveMode={() =>
-                          resetPreferredLiveMode(camera.name)
-                        }
-                        playAudio={audioStates[camera.name] ?? false}
-                        volume={volumeStates[camera.name]}
-                      />
-                    </LiveContextMenu>
-                  );
-                })}
+                })()}
+                ref={birdseyeContainerRef}
+              >
+                <BirdseyeLivePlayer
+                  birdseyeConfig={birdseyeConfig}
+                  liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+                  onClick={() => onSelectCamera("birdseye")}
+                  containerRef={birdseyeContainerRef}
+                />
               </div>
-              {isDesktop && (
-                <div
-                  className={cn(
-                    "fixed",
-                    isDesktop && "bottom-12 lg:bottom-9",
-                    isMobile && "bottom-12 lg:bottom-16",
-                    hasScrollbar && isDesktop ? "right-6" : "right-3",
-                    "z-50 flex flex-row gap-2",
-                  )}
+            )}
+            {cameras.map((camera) => {
+              let grow;
+              const aspectRatio = camera.detect.width / camera.detect.height;
+              if (aspectRatio > 2) {
+                grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
+              } else if (aspectRatio < 1) {
+                grow = `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
+              } else {
+                grow = "aspect-video";
+              }
+              const availableStreams = camera.live.streams || {};
+              const firstStreamEntry = Object.values(availableStreams)[0] || "";
+
+              const streamNameFromSettings =
+                currentGroupStreamingSettings?.[camera.name]?.streamName || "";
+              const streamExists =
+                streamNameFromSettings &&
+                Object.values(availableStreams).includes(
+                  streamNameFromSettings,
+                );
+
+              const streamName = streamExists
+                ? streamNameFromSettings
+                : firstStreamEntry;
+              const streamType =
+                currentGroupStreamingSettings?.[camera.name]?.streamType;
+              const autoLive =
+                streamType !== undefined
+                  ? streamType !== "no-streaming"
+                  : undefined;
+              const showStillWithoutActivity =
+                currentGroupStreamingSettings?.[camera.name]?.streamType !==
+                "continuous";
+              const useWebGL =
+                currentGroupStreamingSettings?.[camera.name]
+                  ?.compatibilityMode || false;
+              return (
+                <LiveContextMenu
+                  className={grow}
+                  key={camera.name}
+                  camera={camera.name}
+                  cameraGroup={cameraGroup}
+                  streamName={streamName}
+                  preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                  isRestreamed={isRestreamedStates[camera.name]}
+                  supportsAudio={
+                    supportsAudioOutputStates[streamName]?.supportsAudio ??
+                    false
+                  }
+                  audioState={audioStates[camera.name]}
+                  toggleAudio={() => toggleAudio(camera.name)}
+                  statsState={statsStates[camera.name]}
+                  toggleStats={() => toggleStats(camera.name)}
+                  volumeState={volumeStates[camera.name] ?? 1}
+                  setVolumeState={(value) =>
+                    setVolumeStates({
+                      [camera.name]: value,
+                    })
+                  }
+                  muteAll={muteAll}
+                  unmuteAll={unmuteAll}
+                  resetPreferredLiveMode={() =>
+                    resetPreferredLiveMode(camera.name)
+                  }
+                  config={config}
                 >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div
-                        className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
-                        onClick={toggleFullscreen}
-                      >
-                        {fullscreen ? (
-                          <FaCompress className="size-5 md:m-[6px]" />
-                        ) : (
-                          <FaExpand className="size-5 md:m-[6px]" />
-                        )}
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {fullscreen
-                        ? t("button.exitFullscreen", { ns: "common" })
-                        : t("button.fullscreen", { ns: "common" })}
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
+                  <LivePlayer
+                    cameraRef={cameraRef}
+                    key={camera.name}
+                    className={`${grow} rounded-lg bg-black md:rounded-2xl`}
+                    windowVisible={
+                      windowVisible && visibleCameras.includes(camera.name)
+                    }
+                    cameraConfig={camera}
+                    preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                    autoLive={autoLive ?? globalAutoLive}
+                    showStillWithoutActivity={showStillWithoutActivity ?? true}
+                    alwaysShowCameraName={displayCameraNames}
+                    useWebGL={useWebGL}
+                    playInBackground={false}
+                    showStats={statsStates[camera.name]}
+                    streamName={streamName}
+                    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>
+          {isDesktop && (
+            <div
+              className={cn(
+                "fixed",
+                isDesktop && "bottom-12 lg:bottom-9",
+                isMobile && "bottom-12 lg:bottom-16",
+                hasScrollbar && isDesktop ? "right-6" : "right-3",
+                "z-50 flex flex-row gap-2",
               )}
-            </>
-          ) : (
-            <DraggableGridLayout
-              cameras={cameras}
-              cameraGroup={cameraGroup}
-              containerRef={containerRef}
-              cameraRef={cameraRef}
-              includeBirdseye={includeBirdseye}
-              onSelectCamera={onSelectCamera}
-              windowVisible={windowVisible}
-              visibleCameras={visibleCameras}
-              isEditMode={isEditMode}
-              setIsEditMode={setIsEditMode}
-              fullscreen={fullscreen}
-              toggleFullscreen={toggleFullscreen}
-            />
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
+                    onClick={toggleFullscreen}
+                  >
+                    {fullscreen ? (
+                      <FaCompress className="size-5 md:m-[6px]" />
+                    ) : (
+                      <FaExpand className="size-5 md:m-[6px]" />
+                    )}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {fullscreen
+                    ? t("button.exitFullscreen", { ns: "common" })
+                    : t("button.fullscreen", { ns: "common" })}
+                </TooltipContent>
+              </Tooltip>
+            </div>
           )}
         </>
+      ) : (
+        <DraggableGridLayout
+          cameras={cameras}
+          cameraGroup={cameraGroup}
+          containerRef={containerRef}
+          cameraRef={cameraRef}
+          includeBirdseye={includeBirdseye}
+          onSelectCamera={onSelectCamera}
+          windowVisible={windowVisible}
+          visibleCameras={visibleCameras}
+          isEditMode={isEditMode}
+          setIsEditMode={setIsEditMode}
+          fullscreen={fullscreen}
+          toggleFullscreen={toggleFullscreen}
+        />
       )}
     </div>
   );
@@ -660,26 +638,15 @@ export default function LiveDashboardView({
 
 function NoCameraView() {
   const { t } = useTranslation(["views/live"]);
-  const { auth } = useContext(AuthContext);
-  const isCustomRole = useIsCustomRole();
-
-  // Check if this is a restricted user with no cameras in this group
-  const isRestricted = isCustomRole && auth.isAuthenticated;
 
   return (
     <div className="flex size-full items-center justify-center">
       <EmptyCard
         icon={<BsFillCameraVideoOffFill className="size-8" />}
-        title={
-          isRestricted ? t("noCameras.restricted.title") : t("noCameras.title")
-        }
-        description={
-          isRestricted
-            ? t("noCameras.restricted.description")
-            : t("noCameras.description")
-        }
-        buttonText={!isRestricted ? t("noCameras.buttonText") : undefined}
-        link={!isRestricted ? "/settings?page=cameraManagement" : undefined}
+        title={t("noCameras.title")}
+        description={t("noCameras.description")}
+        buttonText={t("noCameras.buttonText")}
+        link="/settings?page=cameraManagement"
       />
     </div>
   );

web/src/views/system/GeneralMetrics.tsx

@@ -729,33 +729,34 @@ export default function GeneralMetrics({
                   ) : (
                     <Skeleton className="aspect-video w-full" />
                   )}
-
-                  {statsHistory[0]?.npu_usages && (
-                    <>
-                      {statsHistory.length != 0 ? (
-                        <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-                          <div className="mb-5">
-                            {t("general.hardwareInfo.npuUsage")}
-                          </div>
-                          {npuSeries.map((series) => (
-                            <ThresholdBarGraph
-                              key={series.name}
-                              graphId={`${series.name}-npu`}
-                              name={series.name}
-                              unit="%"
-                              threshold={GPUUsageThreshold}
-                              updateTimes={updateTimes}
-                              data={[series]}
-                            />
-                          ))}
-                        </div>
-                      ) : (
-                        <Skeleton className="aspect-video w-full" />
-                      )}
-                    </>
-                  )}
                 </>
               )}
+              {statsHistory[0]?.npu_usages && (
+                <div
+                  className={cn("mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2")}
+                >
+                  {statsHistory.length != 0 ? (
+                    <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                      <div className="mb-5">
+                        {t("general.hardwareInfo.npuUsage")}
+                      </div>
+                      {npuSeries.map((series) => (
+                        <ThresholdBarGraph
+                          key={series.name}
+                          graphId={`${series.name}-npu`}
+                          name={series.name}
+                          unit="%"
+                          threshold={GPUUsageThreshold}
+                          updateTimes={updateTimes}
+                          data={[series]}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <Skeleton className="aspect-video w-full" />
+                  )}
+                </div>
+              )}
             </div>
           </>
         )}