UI tweaks and fixes (#22448)

* 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

web/src/hooks/use-date-locale.ts

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

web/src/hooks/use-stats.ts

@@ -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 &&
-        !(
+        !isReplayCamera(name)
-          debugReplayStatus?.active && debugReplayStatus?.replay_camera === name
-        )
       ) {
         problems.push({
           text: t("stats.ffmpegHighCpuUsage", {

web/src/lib/const.ts

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

web/src/pages/Replay.tsx

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

web/src/views/events/MotionPreviewsPane.tsx

@@ -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 (isSafari || (isFirefox && isMobile)) {
-    if (!videoRef.current || !preview) {
+      // Safari / iOS can't play at speeds > 2x, so manually step through frames
-      return;
-    }
-
-    if (!isVisible) {
       videoRef.current.pause();
-      videoRef.current.currentTime = clipStart;
+      compatIntervalRef.current = setInterval(() => {
-      return;
+        if (!videoRef.current) {
-    }
+          return;
+        }
 
-    if (videoRef.current.readyState >= 2) {
+        videoRef.current.currentTime += 1;
-      resetPlayback();
+
-      void videoRef.current.play().catch(() => undefined);
+        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
-              <source
+              src={`${baseUrl}${preview.src.substring(1)}`}
-                src={`${baseUrl}${preview.src.substring(1)}`}
+              type={preview.type}
-                type={preview.type}
+            />
-              />
-            )}
           </video>
           {motionHeatmap && (
             <canvas

web/src/views/settings/MotionTunerView.tsx

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