Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-22 02:18:32 +01:00
Code Issues Projects Releases Wiki Activity

UI tweaks (#22405)

Browse Source 
* 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
This commit is contained in:
Josh Hawkins
2026-03-12 17:57:42 -05:00
committed by GitHub
parent 0c988da485
commit 324953d3a5
17 changed files with 147 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/filter/CameraGroupSelector.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/CreateRoleDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/CreateTriggerDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/CreateUserDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/EditRoleCamerasDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/SetPasswordDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/overlay/detail/AnnotationSettingsPane.tsx
View File

@@ -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>
) : (

59
web/src/components/player/LivePlayer.tsx
View File

@@ -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>
)}

2
web/src/components/settings/CameraStreamingDialog.tsx
View File

@@ -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>
) : (

2
web/src/components/settings/MotionMaskEditPane.tsx
View File

@@ -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>
) : (

2
web/src/components/settings/ObjectMaskEditPane.tsx
View File

@@ -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>
) : (

2
web/src/components/settings/ZoneEditPane.tsx
View File

@@ -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>
) : (

1
web/src/types/stats.ts
View File

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

2
web/src/views/settings/EnrichmentsSettingsView.tsx
View File

@@ -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>
) : (

2
web/src/views/settings/MotionTunerView.tsx
View File

@@ -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>
) : (

126
web/src/views/system/StorageMetrics.tsx
View File

@@ -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"