Miscellaneous fixes (#24846)

* miscellaneous fixes

- keep base path in recording share links
- reject non-positive scale on recordings/unavailable, which looped forever on the event loop
- reject negative vod event padding, which cleared has_clip
- clamp negative preview gif/mp4 offsets
- don't delete exports that are still in progress
- hash on unknown login usernames so timing doesn't reveal valid users
- include the first minute of the events time-of-day filter
- show an error when the push subscription is refused
- don't wipe an unnamed known plates entry when Add is pressed again
- use elapsed hours for export last N hours so DST doesn't shift the range

* fix live audio settings and trigger highlights

- start each camera group's audio from that group's saved settings instead of merging every group
- don't clear the previous trigger's highlight timeout when another trigger fires

* address review feedback

- Discard the export row when an export fails before or during ffmpeg, so it doesn't stay in progress until a restart
- Skip the empty thumbnail path when discarding a failed export
- Measure preview clip duration from the clamped start
- Default live player volume to 1 when the group has no saved setting
- Clear the unsaved registration message when notification registration fails
- Keep a highlight timer per trigger
- Remove the severity order_by in /review, which the start_time order_by replaced

* Hold pandas 3.1 until numpy 2

* fix two-way talk shortcut and detail stream active item after camera switch

* show already running message when a media sync is in progress

* pick the earliest overlapping preview for preview gif and mp4

* unmute camera audio when starting two-way talk from the shortcut

* remove password strength meter and fix confirm password feedback

The strength meter still scored against the old 8 character and character class rules, so any password with a digit, like test1234, showed a full green "Very Strong" bar next to the failing 12 character requirement. The meter is gone and the length checklist is the only feedback. The password field's form message duplicated the checklist, and editing the password never revalidated the confirm field, so a fixed mismatch kept showing "Passwords do not match". Editing the password now revalidates the confirm field once it has a value, and both dialogs show a live match/mismatch indicator in place of the confirm form message.

web/public/locales/en/views/settings.json

@@ -1086,13 +1086,6 @@
             "title": "Confirm Password",
             "placeholder": "Confirm Password"
           },
-          "strength": {
-            "title": "Password strength: ",
-            "weak": "Weak",
-            "medium": "Medium",
-            "strong": "Strong",
-            "veryStrong": "Very Strong"
-          },
           "requirements": {
             "title": "Password requirements:",
             "length": "At least 12 characters"

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -415,10 +415,19 @@ export default function NotificationsSettingsExtras({
               pushSubscription.unsubscribe();
               workerRegistration.unregister();
               setRegistration(null);
+              removeMessage("notification_settings", "registration");
             });
+        })
+        .catch(() => {
+          toast.error(t("notification.toast.error.registerFailed"), {
+            position: "top-center",
+          });
+          workerRegistration.unregister();
+          setRegistration(null);
+          removeMessage("notification_settings", "registration");
         });
     },
-    [addMessage, publicKey, t],
+    [addMessage, removeMessage, publicKey, t],
   );
 
   useEffect(() => {

web/src/components/config-form/theme/fields/KnownPlatesField.tsx

@@ -307,6 +307,9 @@ export function KnownPlatesField(props: FieldProps) {
   );
 
   const handleAddEntry = useCallback(() => {
+    if ("" in data) {
+      return;
+    }
     const next = { ...data, "": [""] };
     onChange(next, fieldPath);
   }, [data, fieldPath, onChange]);

web/src/components/overlay/CreateUserDialog.tsx

@@ -37,12 +37,7 @@ import { useTranslation } from "react-i18next";
 import { isDesktop, isMobile } from "react-device-detect";
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
-import {
-  calculatePasswordStrength,
-  getPasswordRequirements,
-  getPasswordStrengthLabel,
-  getPasswordStrengthColor,
-} from "@/utils/passwordUtil";
+import { getPasswordRequirements } from "@/utils/passwordUtil";
 import {
   MobilePage,
   MobilePageContent,
@@ -123,12 +118,6 @@ export default function CreateUserDialog({
   const passwordsMatch = password === confirmPassword;
   const showMatchIndicator = password && confirmPassword;
 
-  // Password strength calculation
-  const passwordStrength = useMemo(
-    () => calculatePasswordStrength(password),
-    [password],
-  );
-
   const requirements = useMemo(
     () => getPasswordRequirements(password),
     [password],
@@ -224,6 +213,12 @@ export default function CreateUserDialog({
                         type={showPasswordVisible ? "text" : "password"}
                         className="h-10 pr-10"
                         {...field}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          if (form.getValues("confirmPassword")) {
+                            form.trigger("confirmPassword");
+                          }
+                        }}
                       />
                       <Button
                         type="button"
@@ -255,21 +250,6 @@ export default function CreateUserDialog({
 
                   {password && (
                     <div className="mt-2 space-y-2">
-                      <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
-                        <div
-                          className={`${getPasswordStrengthColor(
-                            password,
-                          )} transition-all duration-300`}
-                          style={{ width: `${passwordStrength * 100}%` }}
-                        />
-                      </div>
-                      <p className="text-xs text-muted-foreground">
-                        {t("users.dialog.form.password.strength.title")}
-                        <span className="font-medium">
-                          {getPasswordStrengthLabel(password, t)}
-                        </span>
-                      </p>
-
                       <div className="space-y-1 rounded-md bg-muted/50 p-2">
                         <p className="text-xs font-medium text-muted-foreground">
                           {t("users.dialog.form.password.requirements.title")}
@@ -297,8 +277,6 @@ export default function CreateUserDialog({
                       </div>
                     </div>
                   )}
-
-                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -366,7 +344,6 @@ export default function CreateUserDialog({
                       )}
                     </div>
                   )}
-                  <FormMessage />
                 </FormItem>
               )}
             />

web/src/components/overlay/ExportDialog.tsx

@@ -690,36 +690,8 @@ export function ExportContent({
     (option: ExportOption) => {
       setSelectedOption(option);
 
-      const now = new Date(latestTime * 1000);
-      let start: number;
-
-      switch (option) {
-        case "1":
-          now.setHours(now.getHours() - 1);
-          start = now.getTime() / 1000;
-          break;
-        case "4":
-          now.setHours(now.getHours() - 4);
-          start = now.getTime() / 1000;
-          break;
-        case "8":
-          now.setHours(now.getHours() - 8);
-          start = now.getTime() / 1000;
-          break;
-        case "12":
-          now.setHours(now.getHours() - 12);
-          start = now.getTime() / 1000;
-          break;
-        case "24":
-          now.setHours(now.getHours() - 24);
-          start = now.getTime() / 1000;
-          break;
-        case "custom":
-          start = latestTime - 3600;
-          break;
-        default:
-          start = latestTime - 3600;
-      }
+      const hours = Number(option);
+      const start = latestTime - (Number.isNaN(hours) ? 1 : hours) * 3600;
 
       setRange({
         before: latestTime,

web/src/components/overlay/SetPasswordDialog.tsx

@@ -28,12 +28,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { useIsAdmin } from "@/hooks/use-is-admin";
-import {
-  calculatePasswordStrength,
-  getPasswordRequirements,
-  getPasswordStrengthLabel,
-  getPasswordStrengthColor,
-} from "@/utils/passwordUtil";
+import { getPasswordRequirements } from "@/utils/passwordUtil";
 
 type SetPasswordProps = {
   show: boolean;
@@ -124,12 +119,6 @@ export default function SetPasswordDialog({
   const password = form.watch("password");
   const confirmPassword = form.watch("confirmPassword");
 
-  // Password strength calculation
-  const passwordStrength = useMemo(
-    () => calculatePasswordStrength(password),
-    [password],
-  );
-
   const requirements = useMemo(
     () => getPasswordRequirements(password),
     [password],
@@ -303,6 +292,12 @@ export default function SetPasswordDialog({
                         )}
                         className="h-10 pr-10"
                         autoFocus
+                        onChange={(e) => {
+                          field.onChange(e);
+                          if (form.getValues("confirmPassword")) {
+                            form.trigger("confirmPassword");
+                          }
+                        }}
                       />
                       <Button
                         type="button"
@@ -334,21 +329,6 @@ export default function SetPasswordDialog({
 
                   {password && (
                     <div className="mt-2 space-y-2">
-                      <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
-                        <div
-                          className={`${getPasswordStrengthColor(
-                            password,
-                          )} transition-all duration-300`}
-                          style={{ width: `${passwordStrength * 100}%` }}
-                        />
-                      </div>
-                      <p className="text-xs text-muted-foreground">
-                        {t("users.dialog.form.password.strength.title")}
-                        <span className="font-medium">
-                          {getPasswordStrengthLabel(password, t)}
-                        </span>
-                      </p>
-
                       <div className="space-y-1 rounded-md bg-muted/50 p-2">
                         <p className="text-xs font-medium text-muted-foreground">
                           {t("users.dialog.form.password.requirements.title")}
@@ -376,8 +356,6 @@ export default function SetPasswordDialog({
                       </div>
                     </div>
                   )}
-
-                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -428,18 +406,25 @@ export default function SetPasswordDialog({
                     </div>
                   </FormControl>
 
-                  {password &&
-                    confirmPassword &&
-                    password === confirmPassword && (
-                      <div className="mt-1 flex items-center gap-1.5 text-xs">
-                        <LuCheck className="size-3.5 text-green-500" />
-                        <span className="text-green-600">
-                          {t("users.dialog.form.password.match")}
-                        </span>
-                      </div>
-                    )}
-
-                  <FormMessage />
+                  {password && confirmPassword && (
+                    <div className="mt-1 flex items-center gap-1.5 text-xs">
+                      {password === confirmPassword ? (
+                        <>
+                          <LuCheck className="size-3.5 text-green-500" />
+                          <span className="text-green-600">
+                            {t("users.dialog.form.password.match")}
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <LuX className="size-3.5 text-red-500" />
+                          <span className="text-red-600">
+                            {t("users.dialog.form.password.notMatch")}
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  )}
                 </FormItem>
               )}
             />

web/src/components/timeline/DetailStream.tsx

@@ -147,7 +147,18 @@ export default function DetailStream({
   // away instead of waiting for a future effectiveTime change.
   useEffect(() => {
     if (!reviewItems || reviewItems.length === 0) return;
-    if (activeReviewId) return;
+
+    // an id left over from another camera's items counts as unset
+    if (
+      activeReviewId &&
+      reviewItems.some(
+        (r) =>
+          `review-${r.id ?? r.start_time ?? Math.floor(r.start_time ?? 0)}` ===
+          activeReviewId,
+      )
+    ) {
+      return;
+    }
 
     let target: ReviewSegment | undefined;
     let closest: { r: ReviewSegment; diff: number } | undefined;

web/src/utils/passwordUtil.ts

@@ -1,41 +1,3 @@
-import { TFunction } from "i18next";
-
-export const calculatePasswordStrength = (password: string): number => {
-  if (!password) return 0;
-
-  let strength = 0;
-  if (password.length >= 8) strength += 1;
-  if (/\d/.test(password)) strength += 1;
-  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
-  if (/[A-Z]/.test(password)) strength += 1;
-
-  return strength;
-};
-
 export const getPasswordRequirements = (password: string) => ({
   length: password?.length >= 12,
 });
-
-export const getPasswordStrengthLabel = (
-  password: string,
-  t: TFunction,
-): string => {
-  const strength = calculatePasswordStrength(password);
-
-  if (!password) return "";
-  if (strength < 1)
-    return t("users.dialog.form.password.strength.weak", {
-      ns: "views/settings",
-    });
-  return t("users.dialog.form.password.strength.veryStrong", {
-    ns: "views/settings",
-  });
-};
-
-export const getPasswordStrengthColor = (password: string): string => {
-  const strength = calculatePasswordStrength(password);
-
-  if (!password) return "bg-gray-200";
-  if (strength === 0) return "bg-red-500";
-  return "bg-green-500";
-};

web/src/utils/recordingReviewUrl.ts

@@ -45,8 +45,7 @@ export function createRecordingReviewUrl(
   pathname: string,
   state: RecordingReviewLinkState,
 ): string {
-  const url = new URL(baseUrl);
-  url.pathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
+  const url = new URL(pathname.replace(/^\//, ""), baseUrl);
   url.searchParams.set(
     RECORDING_REVIEW_LINK_PARAM,
     `${state.camera}_${Math.floor(state.timestamp)}`,

web/src/views/live/DraggableGridLayout.tsx

@@ -575,25 +575,19 @@ export default function DraggableGridLayout({
   };
 
   useEffect(() => {
-    if (!allGroupsStreamingSettings) {
-      return;
-    }
-
     const initialAudioStates: AudioState = {};
     const initialVolumeStates: VolumeState = {};
 
-    Object.entries(allGroupsStreamingSettings).forEach(([_, groupSettings]) => {
-      if (groupSettings) {
-        Object.entries(groupSettings).forEach(([camera, cameraSettings]) => {
-          initialAudioStates[camera] = cameraSettings.playAudio ?? false;
-          initialVolumeStates[camera] = cameraSettings.volume ?? 1;
-        });
-      }
-    });
+    Object.entries(currentGroupStreamingSettings ?? {}).forEach(
+      ([camera, cameraSettings]) => {
+        initialAudioStates[camera] = cameraSettings.playAudio ?? false;
+        initialVolumeStates[camera] = cameraSettings.volume ?? 1;
+      },
+    );
 
     setAudioStates(initialAudioStates);
     setVolumeStates(initialVolumeStates);
-  }, [allGroupsStreamingSettings]);
+  }, [currentGroupStreamingSettings, cameraGroup]);
 
   const toggleAudio = (cameraName: string) => {
     setAudioStates((prev) => ({
@@ -800,7 +794,7 @@ export default function DraggableGridLayout({
                   toggleAudio={() => toggleAudio(camera.name)}
                   statsState={statsStates[camera.name]}
                   toggleStats={() => toggleStats(camera.name)}
-                  volumeState={volumeStates[camera.name]}
+                  volumeState={volumeStates[camera.name] ?? 1}
                   setVolumeState={(value) =>
                     setVolumeStates((prev) => ({
                       ...prev,
@@ -845,7 +839,7 @@ export default function DraggableGridLayout({
                     onError={(e) => handleError(camera.name, e)}
                     onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                     playAudio={audioStates[camera.name]}
-                    volume={volumeStates[camera.name]}
+                    volume={volumeStates[camera.name] ?? 1}
                     onLiveAspectChange={liveAspectHandlers[camera.name]}
                   />
                 </GridLiveContextMenu>

web/src/views/live/LiveCameraView.tsx

@@ -511,7 +511,14 @@ export default function LiveCameraView({
     }
   }, [webRTCVerdictPending]);
 
-  useKeyboardListener(["m", "Escape"], (key, modifiers) => {
+  const toggleMic = () => {
+    setMic(!mic);
+    if (!mic && !audio) {
+      setAudio(true);
+    }
+  };
+
+  useKeyboardListener(["m", "t", "Escape"], (key, modifiers) => {
     if (!modifiers.down) {
       return true;
     }
@@ -525,7 +532,7 @@ export default function LiveCameraView({
         break;
       case "t":
         if (supports2WayTalk && talkAvailable) {
-          setMic(!mic);
+          toggleMic();
           return true;
         }
         break;
@@ -792,12 +799,7 @@ export default function LiveCameraView({
                         ? t("twoWayTalk.disable", { ns: "views/live" })
                         : t("twoWayTalk.enable", { ns: "views/live" })
                 }
-                onClick={() => {
-                  setMic(!mic);
-                  if (!mic && !audio) {
-                    setAudio(true);
-                  }
-                }}
+                onClick={toggleMic}
                 disabled={!cameraEnabled || debug || !talkAvailable}
               />
             )}

web/src/views/live/LiveDashboardView.tsx

@@ -326,25 +326,19 @@ export default function LiveDashboardView({
   };
 
   useEffect(() => {
-    if (!allGroupsStreamingSettings) {
-      return;
-    }
-
     const initialAudioStates: AudioState = {};
     const initialVolumeStates: VolumeState = {};
 
-    Object.entries(allGroupsStreamingSettings).forEach(([_, groupSettings]) => {
-      if (groupSettings) {
-        Object.entries(groupSettings).forEach(([camera, cameraSettings]) => {
-          initialAudioStates[camera] = cameraSettings.playAudio ?? false;
-          initialVolumeStates[camera] = cameraSettings.volume ?? 1;
-        });
-      }
-    });
+    Object.entries(currentGroupStreamingSettings ?? {}).forEach(
+      ([camera, cameraSettings]) => {
+        initialAudioStates[camera] = cameraSettings.playAudio ?? false;
+        initialVolumeStates[camera] = cameraSettings.volume ?? 1;
+      },
+    );
 
     setAudioStates(initialAudioStates);
     setVolumeStates(initialVolumeStates);
-  }, [allGroupsStreamingSettings]);
+  }, [currentGroupStreamingSettings, cameraGroup]);
 
   const toggleAudio = (cameraName: string): void => {
     setAudioStates((prev) => ({
@@ -635,7 +629,7 @@ export default function LiveDashboardView({
                           resetPreferredLiveMode(camera.name)
                         }
                         playAudio={audioStates[camera.name] ?? false}
-                        volume={volumeStates[camera.name]}
+                        volume={volumeStates[camera.name] ?? 1}
                       />
                     </LiveContextMenu>
                   );

web/src/views/settings/MediaSyncSettingsView.tsx

@@ -86,17 +86,21 @@ export default function MediaSyncSettingsView() {
           position: "top-center",
           closeButton: true,
         });
-      } else if (response.status === 409) {
-        toast.error(t("maintenance.sync.alreadyRunning"), {
+      }
+    } catch (error) {
+      const alreadyRunning =
+        axios.isAxiosError(error) && error.response?.status === 409;
+      toast.error(
+        t(
+          alreadyRunning
+            ? "maintenance.sync.alreadyRunning"
+            : "maintenance.sync.error",
+        ),
+        {
           position: "top-center",
           closeButton: true,
-        });
-      }
-    } catch {
-      toast.error(t("maintenance.sync.error"), {
-        position: "top-center",
-        closeButton: true,
-      });
+        },
+      );
     } finally {
       setIsSubmitting(false);
     }

web/src/views/settings/TriggerView.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import useSWR from "swr";
@@ -133,6 +133,9 @@ export default function TriggerView({
 
   // watch websocket for updates
   const { payload: triggers_status_ws } = useTriggers();
+  const highlightTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>(
+    {},
+  );
 
   useEffect(() => {
     if (!triggers_status_ws) return;
@@ -148,13 +151,13 @@ export default function TriggerView({
       return current;
     });
 
-    const timeout = setTimeout(() => {
+    const name = triggers_status_ws.name;
+    clearTimeout(highlightTimers.current[name]);
+    highlightTimers.current[name] = setTimeout(() => {
       setTriggeredTrigger((prev) =>
-        (prev || []).filter((name) => name !== triggers_status_ws.name),
+        (prev || []).filter((triggered) => triggered !== name),
       );
     }, 3000);
-
-    return () => clearTimeout(timeout);
   }, [triggers_status_ws, selectedCamera, mutate]);
 
   useEffect(() => {