administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 06:08:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI tweaks and fixes (#22448)

Browse Source 
* fix double scrollbar in debug replay

* always hide ffmpeg cpu warnings for replay cameras

* add slovenian

* fix motion previews on safari and ios

match the logic used in ScrubbablePreview for manually stepping currentTime at the correct rate

* prevent motion recalibration when opening motion tuner
This commit is contained in:
Josh Hawkins 2026-03-15 07:26:23 -05:00 committed by GitHub
parent 687fefb343
commit 310b5dfe05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/hooks/use-date-locale.ts
View File

@ -38,6 +38,7 @@ const localeMap: Record<string, () => Promise<Locale>> = {
th: () => import("date-fns/locale/th").then((module) => module.th),
ca: () => import("date-fns/locale/ca").then((module) => module.ca),
hr: () => import("date-fns/locale/hr").then((module) => module.hr),
sl: () => import("date-fns/locale/sl").then((module) => module.sl),
};
export function useDateLocale(): Locale {

6
web/src/hooks/use-stats.ts
View File

@ -106,13 +106,11 @@ export default function useStats(stats: FrigateStats | undefined) {
const cameraName = config?.cameras?.[name]?.friendly_name ?? name;
// Skip ffmpeg warnings for replay cameras when debug replay is active
// Skip ffmpeg warnings for replay cameras
if (
!isNaN(ffmpegAvg) &&
ffmpegAvg >= CameraFfmpegThreshold.error &&
!(
debugReplayStatus?.active && debugReplayStatus?.replay_camera === name
)
!isReplayCamera(name)
) {
problems.push({
text: t("stats.ffmpegHighCpuUsage", {

1
web/src/lib/const.ts
View File

@ -26,6 +26,7 @@ export const supportedLanguageKeys = [
"pl",
"hr",
"sk",
"sl",
"lt",
"uk",
"cs",

17
web/src/pages/Replay.tsx
View File

@ -381,7 +381,7 @@ export default function Replay() {
</div>
{/* Side panel */}
<div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-4/12">
<div className="order-last mb-2 mt-2 flex h-full w-full flex-col overflow-hidden rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-4/12">
<div className="mb-5 flex flex-col space-y-2">
<Heading as="h3" className="mb-0">
{t("title")}
@ -399,7 +399,10 @@ export default function Replay() {
<p>{t("description")}</p>
</div>
</div>
<Tabs defaultValue="debug" className="flex h-full w-full flex-col">
<Tabs
defaultValue="debug"
className="flex min-h-0 w-full flex-1 flex-col"
>
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="debug">
{t("debug.debugging", { ns: "views/settings" })}
@ -409,7 +412,10 @@ export default function Replay() {
{t("websocket_messages")}
</TabsTrigger>
</TabsList>
<TabsContent value="debug" className="mt-2">
<TabsContent
value="debug"
className="scrollbar-container mt-2 overflow-y-auto"
>
<div className="mt-2 space-y-6">
<div className="my-2.5 flex flex-col gap-2.5">
{DEBUG_OPTION_KEYS.map((key) => {
@ -554,7 +560,10 @@ export default function Replay() {
</div>
</div>
</TabsContent>
<TabsContent value="objects" className="mt-2">
<TabsContent
value="objects"
className="scrollbar-container mt-2 overflow-y-auto"
>
<ObjectList
cameraConfig={replayCameraConfig}
objects={objects}

89
web/src/views/events/MotionPreviewsPane.tsx
View File

@ -9,6 +9,7 @@ import {
useState,
} from "react";
import { isCurrentHour } from "@/utils/dateUtil";
import { isFirefox, isMobile, isSafari } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { CameraConfig } from "@/types/frigateConfig";
import useSWR from "swr";
@ -305,31 +306,46 @@ function MotionPreviewClip({
);
}, [clipStart, preview, range.end_time]);
const compatIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
useEffect(() => {
return () => {
if (compatIntervalRef.current) {
clearInterval(compatIntervalRef.current);
}
};
}, []);
const resetPlayback = useCallback(() => {
if (!videoRef.current || !preview) {
return;
}
if (compatIntervalRef.current) {
clearInterval(compatIntervalRef.current);
compatIntervalRef.current = null;
}
videoRef.current.currentTime = clipStart;
videoRef.current.playbackRate = playbackRate;
}, [clipStart, playbackRate, preview]);
useEffect(() => {
if (!videoRef.current || !preview) {
return;
}
if (!isVisible) {
if (isSafari || (isFirefox && isMobile)) {
// Safari / iOS can't play at speeds > 2x, so manually step through frames
videoRef.current.pause();
videoRef.current.currentTime = clipStart;
return;
}
compatIntervalRef.current = setInterval(() => {
if (!videoRef.current) {
return;
}
if (videoRef.current.readyState >= 2) {
resetPlayback();
void videoRef.current.play().catch(() => undefined);
videoRef.current.currentTime += 1;
if (videoRef.current.currentTime >= clipEnd) {
videoRef.current.currentTime = clipStart;
}
}, 1000 / playbackRate);
} else {
videoRef.current.playbackRate = playbackRate;
}
}, [clipStart, isVisible, preview, resetPlayback]);
}, [clipStart, clipEnd, playbackRate, preview]);
const drawDimOverlay = useCallback(() => {
if (!dimOverlayCanvasRef.current) {
@ -463,15 +479,17 @@ function MotionPreviewClip({
{showLoadingIndicator && (
<Skeleton className="absolute inset-0 z-10 rounded-lg md:rounded-2xl" />
)}
{preview ? (
{preview && isVisible ? (
<>
<video
ref={videoRef}
className="size-full bg-black object-contain"
preload="auto"
autoPlay
playsInline
preload={isVisible ? "metadata" : "none"}
muted
autoPlay={isVisible}
disableRemotePlayback
loop
onLoadedMetadata={() => {
setVideoLoaded(true);
@ -481,36 +499,21 @@ function MotionPreviewClip({
height: videoRef.current.videoHeight,
});
}
if (!isVisible) {
return;
}
resetPlayback();
if (videoRef.current) {
void videoRef.current.play().catch(() => undefined);
}
}}
onCanPlay={() => {
setVideoLoaded(true);
if (!isVisible) {
return;
}
if (videoRef.current) {
void videoRef.current.play().catch(() => undefined);
}
}}
onPlay={() => setVideoPlaying(true)}
onPlay={() => {
setVideoPlaying(true);
resetPlayback();
}}
onLoadedData={() => setVideoLoaded(true)}
onError={() => {
setVideoLoaded(true);
setVideoPlaying(true);
}}
onTimeUpdate={() => {
if (!videoRef.current || !preview || !isVisible) {
if (!videoRef.current || !preview) {
return;
}
@ -519,12 +522,10 @@ function MotionPreviewClip({
}
}}
>
{isVisible && (
<source
src={`${baseUrl}${preview.src.substring(1)}`}
type={preview.type}
/>
)}
<source
src={`${baseUrl}${preview.src.substring(1)}`}
type={preview.type}
/>
</video>
{motionHeatmap && (
<canvas

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

@ -4,7 +4,7 @@ import useSWR from "swr";
import axios from "axios";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import {
@ -63,6 +63,8 @@ export default function MotionTunerView({
improve_contrast: undefined,
});
const userInteractedRef = useRef(false);
const cameraConfig = useMemo(() => {
if (config && selectedCamera) {
return config.cameras[selectedCamera];
@ -70,6 +72,7 @@ export default function MotionTunerView({
}, [config, selectedCamera]);
useEffect(() => {
userInteractedRef.current = false;
if (cameraConfig) {
setMotionSettings({
threshold: cameraConfig.motion.threshold,
@ -87,24 +90,29 @@ export default function MotionTunerView({
}, [selectedCamera]);
useEffect(() => {
if (!motionSettings.threshold) return;
if (!motionSettings.threshold || !userInteractedRef.current) return;
sendMotionThreshold(motionSettings.threshold);
}, [motionSettings.threshold, sendMotionThreshold]);
useEffect(() => {
if (!motionSettings.contour_area) return;
if (!motionSettings.contour_area || !userInteractedRef.current) return;
sendMotionContourArea(motionSettings.contour_area);
}, [motionSettings.contour_area, sendMotionContourArea]);
useEffect(() => {
if (motionSettings.improve_contrast === undefined) return;
if (
motionSettings.improve_contrast === undefined ||
!userInteractedRef.current
)
return;
sendImproveContrast(motionSettings.improve_contrast ? "ON" : "OFF");
}, [motionSettings.improve_contrast, sendImproveContrast]);
const handleMotionConfigChange = (newConfig: Partial<MotionSettings>) => {
userInteractedRef.current = true;
setMotionSettings((prevConfig) => ({ ...prevConfig, ...newConfig }));
setUnsavedChanges(true);
setChangedValue(true);