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
2026-03-13 11:57:36 +03:00 · 2026-03-12 17:57:42 -05:00 · 2026-03-12 17:57:42 -05:00 · 324953d3a5
commit 324953d3a5
parent 0c988da485
17 changed files with 147 additions and 71 deletions
--- a/web/public/locales/en/views/system.json
+++ b/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",
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/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>
            ) : (
--- a/web/src/components/overlay/CreateRoleDialog.tsx
+++ b/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>
                    ) : (
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/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>
                    ) : (
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/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>
                    ) : (
--- a/web/src/components/overlay/EditRoleCamerasDialog.tsx
+++ b/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>
                    ) : (
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/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>
                    ) : (
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/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>
              ) : (
--- a/web/src/components/player/LivePlayer.tsx
+++ b/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">
-                <Trans
-                  ns="components/player"
-                  values={{
-                    cameraName: cameraName,
-                  }}
-                >
-                  streamOffline.desc
-                </Trans>
-              </p>
+              {!isCompact && (
+                <p className="text-center text-sm">
+                  <Trans
+                    ns="components/player"
+                    values={{
+                      cameraName: cameraName,
+                    }}
+                  >
+                    streamOffline.desc
+                  </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">
-              <Trans
-                ns="components/player"
-                values={{
-                  cameraName: cameraName,
-                }}
-              >
-                streamOffline.desc
-              </Trans>
-            </p>
+            {!isCompact && (
+              <p className="max-w-96 text-center">
+                <Trans
+                  ns="components/player"
+                  values={{
+                    cameraName: cameraName,
+                  }}
+                >
+                  streamOffline.desc
+                </Trans>
+              </p>
+            )}
          </div>
        </div>
      )}
--- a/web/src/components/settings/CameraStreamingDialog.tsx
+++ b/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>
            ) : (
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/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>
                  ) : (
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/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>
                  ) : (
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/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>
              ) : (
--- a/web/src/types/stats.ts
+++ b/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 = {
--- a/web/src/views/settings/EnrichmentsSettingsView.tsx
+++ b/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>
              ) : (
--- a/web/src/views/settings/MotionTunerView.tsx
+++ b/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>
              ) : (
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/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"] <
-              (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 className="flex flex-row items-center gap-2">
+              {shmFrameLifetime && (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      className="focus:outline-none"
+                      aria-label={t("storage.shm.frameLifetime.title")}
+                    >
+                      <CiCircleAlert
+                        className="size-5"
+                        aria-label={t("storage.shm.frameLifetime.title")}
+                      />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80">
+                    <div className="space-y-2">
+                      {t("storage.shm.frameLifetime.description", {
+                        frames: shmFrameLifetime.frames,
+                        lifetime: shmFrameLifetime.lifetime,
+                      })}
                    </div>
-                  </div>
-                </PopoverContent>
-              </Popover>
-            )}
+                  </PopoverContent>
+                </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"