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",
+    "buttonText": "Add Camera"
-    "restricted": {
-      "title": "No Cameras Available",
-      "description": "You don't have permission to view any cameras in this group."
-    }
   }
 }

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);
+    return Object.entries(config.camera_groups).sort(
-
+      (a, b) => a[1].order - b[1].order,
-    // 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),
     );
-        })
+  }, [config]);
-        .sort((a, b) => a[1].order - b[1].order);
-    }
-
-    return allGroups.sort((a, b) => a[1].order - b[1].order);
-  }, [config, allowedCameras, isCustomRole]);
 
   // 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,7 +206,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
             );
           })}
 
-          {!isCustomRole && (
           <Button
             className="bg-secondary text-muted-foreground"
             aria-label={t("group.add")}
@@ -230,7 +214,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
           >
             <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,7 +371,6 @@ function NewGroupDialog({
               >
                 <Title>{t("group.label")}</Title>
                 <Description className="sr-only">{t("group.edit")}</Description>
-                {!isCustomRole && (
                 <div
                   className={cn(
                     "absolute",
@@ -413,7 +393,6 @@ function NewGroupDialog({
                     <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 {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-  useCallback,
-  useContext,
-  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,10 +439,6 @@ export default function LiveDashboardView({
         </div>
       )}
 
-      {cameras.length == 0 && !includeBirdseye ? (
-        <NoCameraView />
-      ) : (
-        <>
       {!fullscreen && events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
@@ -503,8 +494,7 @@ export default function LiveDashboardView({
             )}
             {cameras.map((camera) => {
               let grow;
-                  const aspectRatio =
+              const aspectRatio = camera.detect.width / camera.detect.height;
-                    camera.detect.width / camera.detect.height;
               if (aspectRatio > 2) {
                 grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
               } else if (aspectRatio < 1) {
@@ -513,12 +503,10 @@ export default function LiveDashboardView({
                 grow = "aspect-video";
               }
               const availableStreams = camera.live.streams || {};
-                  const firstStreamEntry =
+              const firstStreamEntry = Object.values(availableStreams)[0] || "";
-                    Object.values(availableStreams)[0] || "";
 
               const streamNameFromSettings =
-                    currentGroupStreamingSettings?.[camera.name]?.streamName ||
+                currentGroupStreamingSettings?.[camera.name]?.streamName || "";
-                    "";
               const streamExists =
                 streamNameFromSettings &&
                 Object.values(availableStreams).includes(
@@ -547,9 +535,7 @@ export default function LiveDashboardView({
                   camera={camera.name}
                   cameraGroup={cameraGroup}
                   streamName={streamName}
-                      preferredLiveMode={
+                  preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
-                        preferredLiveModes[camera.name] ?? "mse"
-                      }
                   isRestreamed={isRestreamedStates[camera.name]}
                   supportsAudio={
                     supportsAudioOutputStates[streamName]?.supportsAudio ??
@@ -580,13 +566,9 @@ export default function LiveDashboardView({
                       windowVisible && visibleCameras.includes(camera.name)
                     }
                     cameraConfig={camera}
-                        preferredLiveMode={
+                    preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
-                          preferredLiveModes[camera.name] ?? "mse"
-                        }
                     autoLive={autoLive ?? globalAutoLive}
-                        showStillWithoutActivity={
+                    showStillWithoutActivity={showStillWithoutActivity ?? true}
-                          showStillWithoutActivity ?? true
-                        }
                     alwaysShowCameraName={displayCameraNames}
                     useWebGL={useWebGL}
                     playInBackground={false}
@@ -594,9 +576,7 @@ export default function LiveDashboardView({
                     streamName={streamName}
                     onClick={() => onSelectCamera(camera.name)}
                     onError={(e) => handleError(camera.name, e)}
-                        onResetLiveMode={() =>
+                    onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
-                          resetPreferredLiveMode(camera.name)
-                        }
                     playAudio={audioStates[camera.name] ?? false}
                     volume={volumeStates[camera.name]}
                   />
@@ -652,34 +632,21 @@ export default function LiveDashboardView({
           toggleFullscreen={toggleFullscreen}
         />
       )}
-        </>
-      )}
     </div>
   );
 }
 
 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={
+        title={t("noCameras.title")}
-          isRestricted ? t("noCameras.restricted.title") : t("noCameras.title")
+        description={t("noCameras.description")}
-        }
+        buttonText={t("noCameras.buttonText")}
-        description={
+        link="/settings?page=cameraManagement"
-          isRestricted
-            ? t("noCameras.restricted.description")
-            : t("noCameras.description")
-        }
-        buttonText={!isRestricted ? t("noCameras.buttonText") : undefined}
-        link={!isRestricted ? "/settings?page=cameraManagement" : undefined}
       />
     </div>
   );

web/src/views/system/GeneralMetrics.tsx

@@ -729,9 +729,12 @@ export default function GeneralMetrics({
                   ) : (
                     <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">
@@ -752,9 +755,7 @@ export default function GeneralMetrics({
                   ) : (
                     <Skeleton className="aspect-video w-full" />
                   )}
-                    </>
+                </div>
-                  )}
-                </>
               )}
             </div>
           </>