UI tweaks (#22405)

* add shm frame lifetime calculation and update UI for shared memory metrics

* consistent sizing on activity indicator in save buttons

* fix offline overlay overflowing on mobile when in grid mode

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

@@ -135,7 +135,11 @@
     },
     "shm": {
       "title": "SHM (shared memory) allocation",
-      "warning": "The current SHM size of {{total}}MB is too small. Increase it to at least {{min_shm}}MB."
+      "warning": "The current SHM size of {{total}}MB is too small. Increase it to at least {{min_shm}}MB.",
+      "frameLifetime": {
+        "title": "Frame lifetime",
+        "description": "Each camera has {{frames}} frame slots in shared memory. At the fastest camera's frame rate, each frame is available for approximately {{lifetime}}s before being overwritten."
+      }
     },
     "cameraStorage": {
       "title": "Camera Storage",

web/src/components/filter/CameraGroupSelector.tsx

@@ -990,7 +990,7 @@ export function CameraGroupEdit({
           >
             {isLoading ? (
               <div className="flex flex-row items-center gap-2">
-                <ActivityIndicator />
+                <ActivityIndicator className="size-4" />
                 <span>{t("button.saving", { ns: "common" })}</span>
               </div>
             ) : (

web/src/components/overlay/CreateRoleDialog.tsx

@@ -231,7 +231,7 @@ export default function CreateRoleDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
+                        <ActivityIndicator className="size-4" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -454,7 +454,7 @@ export default function CreateTriggerDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-5" />
+                        <ActivityIndicator className="size-4" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (

web/src/components/overlay/CreateUserDialog.tsx

@@ -432,7 +432,7 @@ export default function CreateUserDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
+                        <ActivityIndicator className="size-4" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -177,7 +177,7 @@ export default function EditRoleCamerasDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
+                        <ActivityIndicator className="size-4" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (

web/src/components/overlay/SetPasswordDialog.tsx

@@ -471,7 +471,7 @@ export default function SetPasswordDialog({
                   >
                     {isLoading ? (
                       <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
+                        <ActivityIndicator className="size-4" />
                         <span>{t("button.saving", { ns: "common" })}</span>
                       </div>
                     ) : (

web/src/components/overlay/detail/AnnotationSettingsPane.tsx

@@ -192,7 +192,7 @@ export function AnnotationSettingsPane({
             >
               {isLoading ? (
                 <div className="flex flex-row items-center gap-2">
-                  <ActivityIndicator />
+                  <ActivityIndicator className="size-4" />
                   <span>{t("button.saving", { ns: "common" })}</span>
                 </div>
               ) : (

web/src/components/player/LivePlayer.tsx

@@ -3,6 +3,7 @@ import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeObserver } from "@/hooks/resize-observer";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
@@ -80,6 +81,7 @@ export default function LivePlayer({
   const { t } = useTranslation(["components/player"]);
 
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement | null>(null);
 
   const cameraName = useCameraFriendlyName(cameraConfig);
 
@@ -87,6 +89,10 @@ export default function LivePlayer({
 
   const inDashboard = containerRef?.current == null;
 
+  const [overlayDimensions] = useResizeObserver(overlayRef);
+  const isCompact =
+    overlayDimensions.width > 0 && overlayDimensions.width < 280;
+
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -317,7 +323,14 @@ export default function LivePlayer({
 
   return (
     <div
-      ref={cameraRef ?? internalContainerRef}
+      ref={(node) => {
+        overlayRef.current = node;
+        if (cameraRef) {
+          cameraRef(node);
+        } else {
+          internalContainerRef.current = node;
+        }
+      }}
       data-camera={cameraConfig.name}
       className={cn(
         "relative flex w-full cursor-pointer justify-center outline",
@@ -428,16 +441,18 @@ export default function LivePlayer({
             <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
               <div className="text-md">{t("streamOffline.title")}</div>
               <TbExclamationCircle className="size-6" />
-              <p className="text-center text-sm">
+              {!isCompact && (
-                <Trans
+                <p className="text-center text-sm">
-                  ns="components/player"
+                  <Trans
-                  values={{
+                    ns="components/player"
-                    cameraName: cameraName,
+                    values={{
-                  }}
+                      cameraName: cameraName,
-                >
+                    }}
-                  streamOffline.desc
+                  >
-                </Trans>
+                    streamOffline.desc
-              </p>
+                  </Trans>
+                </p>
+              )}
             </div>
           </div>
         </>
@@ -448,16 +463,18 @@ export default function LivePlayer({
           <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
             <p className="my-5 text-lg">{t("streamOffline.title")}</p>
             <TbExclamationCircle className="mb-3 size-10" />
-            <p className="max-w-96 text-center">
+            {!isCompact && (
-              <Trans
+              <p className="max-w-96 text-center">
-                ns="components/player"
+                <Trans
-                values={{
+                  ns="components/player"
-                  cameraName: cameraName,
+                  values={{
-                }}
+                    cameraName: cameraName,
-              >
+                  }}
-                streamOffline.desc
+                >
-              </Trans>
+                  streamOffline.desc
-            </p>
+                </Trans>
+              </p>
+            )}
           </div>
         </div>
       )}

web/src/components/settings/CameraStreamingDialog.tsx

@@ -391,7 +391,7 @@ export function CameraStreamingDialog({
           >
             {isLoading ? (
               <div className="flex flex-row items-center gap-2">
-                <ActivityIndicator />
+                <ActivityIndicator className="size-4" />
                 <span>{t("button.saving", { ns: "common" })}</span>
               </div>
             ) : (

web/src/components/settings/MotionMaskEditPane.tsx

@@ -440,7 +440,7 @@ export default function MotionMaskEditPane({
                 >
                   {isLoading ? (
                     <div className="flex flex-row items-center gap-2">
-                      <ActivityIndicator />
+                      <ActivityIndicator className="size-4" />
                       <span>{t("button.saving", { ns: "common" })}</span>
                     </div>
                   ) : (

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -461,7 +461,7 @@ export default function ObjectMaskEditPane({
                 >
                   {isLoading ? (
                     <div className="flex flex-row items-center gap-2">
-                      <ActivityIndicator />
+                      <ActivityIndicator className="size-4" />
                       <span>{t("button.saving", { ns: "common" })}</span>
                     </div>
                   ) : (

web/src/components/settings/ZoneEditPane.tsx

@@ -936,7 +936,7 @@ export default function ZoneEditPane({
             >
               {isLoading ? (
                 <div className="flex flex-row items-center gap-2">
-                  <ActivityIndicator />
+                  <ActivityIndicator className="size-4" />
                   <span>{t("button.saving", { ns: "common" })}</span>
                 </div>
               ) : (

web/src/types/stats.ts

@@ -86,6 +86,7 @@ export type StorageStats = {
   used: number;
   mount_type: string;
   min_shm?: number;
+  shm_frame_count?: number;
 };
 
 export type PotentialProblem = {

web/src/views/settings/EnrichmentsSettingsView.tsx

@@ -603,7 +603,7 @@ export default function EnrichmentsSettingsView({
             >
               {isLoading ? (
                 <div className="flex flex-row items-center gap-2">
-                  <ActivityIndicator />
+                  <ActivityIndicator className="size-4" />
                   <span>{t("button.saving", { ns: "common" })}</span>
                 </div>
               ) : (

web/src/views/settings/MotionTunerView.tsx

@@ -299,7 +299,7 @@ export default function MotionTunerView({
             >
               {isLoading ? (
                 <div className="flex flex-row items-center gap-2">
-                  <ActivityIndicator />
+                  <ActivityIndicator className="size-4" />
                   <span>{t("button.saving", { ns: "common" })}</span>
                 </div>
               ) : (

web/src/views/system/StorageMetrics.tsx

@@ -89,6 +89,35 @@ export default function StorageMetrics({
     timezone,
   );
 
+  const shmFrameLifetime = useMemo(() => {
+    if (!stats || !config) {
+      return undefined;
+    }
+
+    const shmFrameCount = stats.service.storage["/dev/shm"]?.shm_frame_count;
+
+    if (!shmFrameCount || shmFrameCount <= 0) {
+      return undefined;
+    }
+
+    let maxCameraFps = 0;
+
+    for (const [name, camStats] of Object.entries(stats.cameras)) {
+      if (config.cameras[name]?.enabled && camStats.camera_fps > 0) {
+        maxCameraFps = Math.max(maxCameraFps, camStats.camera_fps);
+      }
+    }
+
+    if (maxCameraFps === 0) {
+      return undefined;
+    }
+
+    return {
+      frames: shmFrameCount,
+      lifetime: Math.round((shmFrameCount / maxCameraFps) * 10) / 10,
+    };
+  }, [stats, config]);
+
   if (!cameraStorage || !stats || !totalStorage || !config) {
     return;
   }
@@ -148,43 +177,68 @@ export default function StorageMetrics({
         <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
           <div className="mb-5 flex flex-row items-center justify-between">
             /dev/shm
-            {stats.service.storage["/dev/shm"]["total"] <
+            <div className="flex flex-row items-center gap-2">
-              (stats.service.storage["/dev/shm"]["min_shm"] ?? 0) && (
+              {shmFrameLifetime && (
-              <Popover>
+                <Popover>
-                <PopoverTrigger asChild>
+                  <PopoverTrigger asChild>
-                  <button
+                    <button
-                    className="focus:outline-none"
+                      className="focus:outline-none"
-                    aria-label={t("storage.shm.title")}
+                      aria-label={t("storage.shm.frameLifetime.title")}
-                  >
+                    >
-                    <FaExclamationTriangle
+                      <CiCircleAlert
-                      className="size-5 text-danger"
+                        className="size-5"
-                      aria-label={t("storage.shm.title")}
+                        aria-label={t("storage.shm.frameLifetime.title")}
-                    />
+                      />
-                  </button>
+                    </button>
-                </PopoverTrigger>
+                  </PopoverTrigger>
-                <PopoverContent className="w-80">
+                  <PopoverContent className="w-80">
-                  <div className="space-y-2">
+                    <div className="space-y-2">
-                    {t("storage.shm.warning", {
+                      {t("storage.shm.frameLifetime.description", {
-                      total: stats.service.storage["/dev/shm"]["total"],
+                        frames: shmFrameLifetime.frames,
-                      min_shm: stats.service.storage["/dev/shm"]["min_shm"],
+                        lifetime: shmFrameLifetime.lifetime,
-                    })}
+                      })}
-                    <div className="mt-2 flex items-center text-primary">
-                      <Link
-                        to={getLocaleDocUrl(
-                          "frigate/installation#calculating-required-shm-size",
-                        )}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline"
-                      >
-                        {t("readTheDocumentation", { ns: "common" })}
-                        <LuExternalLink className="ml-2 inline-flex size-3" />
-                      </Link>
                     </div>
-                  </div>
+                  </PopoverContent>
-                </PopoverContent>
+                </Popover>
-              </Popover>
+              )}
-            )}
+              {stats.service.storage["/dev/shm"]["total"] <
+                (stats.service.storage["/dev/shm"]["min_shm"] ?? 0) && (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      className="focus:outline-none"
+                      aria-label={t("storage.shm.title")}
+                    >
+                      <FaExclamationTriangle
+                        className="size-5 text-danger"
+                        aria-label={t("storage.shm.title")}
+                      />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80">
+                    <div className="space-y-2">
+                      {t("storage.shm.warning", {
+                        total: stats.service.storage["/dev/shm"]["total"],
+                        min_shm: stats.service.storage["/dev/shm"]["min_shm"],
+                      })}
+                      <div className="mt-2 flex items-center text-primary">
+                        <Link
+                          to={getLocaleDocUrl(
+                            "frigate/installation#calculating-required-shm-size",
+                          )}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline"
+                        >
+                          {t("readTheDocumentation", { ns: "common" })}
+                          <LuExternalLink className="ml-2 inline-flex size-3" />
+                        </Link>
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              )}
+            </div>
           </div>
           <StorageGraph
             graphId="general-shared-memory"