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-04-28 23:06:13 +02:00 · 2026-03-12 17:57:42 -05:00
parent 0c988da485
commit 324953d3a5
17 changed files with 147 additions and 71 deletions
--- 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>
              ) : (