Bug fixes (#11332)

* Fix external events saving

* Only show relevant labels

* Set on recordings view too

* Fix video control width on motion page

* use overlay so player state is maintained between camera switches

* use overlay so player state is maintained between camera switches

* mobile only

* Formatting

* Use higher amount

* Only wrap when needed

web/src/components/player/HlsVideoPlayer.tsx

@@ -14,6 +14,7 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { AxiosResponse } from "axios";
 import { toast } from "sonner";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -108,8 +109,8 @@ export default function HlsVideoPlayer({
   // controls
 
   const [isPlaying, setIsPlaying] = useState(true);
-  const [muted, setMuted] = useState(true);
-  const [volume, setVolume] = useState(1.0);
+  const [muted, setMuted] = useOverlayState("playerMuted", true);
+  const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
   const [mobileCtrlTimeout, setMobileCtrlTimeout] = useState<NodeJS.Timeout>();
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
@@ -160,7 +161,7 @@ export default function HlsVideoPlayer({
           fullscreen: !isIOS,
         }}
         setControlsOpen={setControlsOpen}
-        setMuted={setMuted}
+        setMuted={(muted) => setMuted(muted, true)}
         playbackRate={videoRef.current?.playbackRate ?? 1}
         hotKeys={hotKeys}
         onPlayPause={(play) => {
@@ -226,7 +227,9 @@ export default function HlsVideoPlayer({
           controls={false}
           playsInline
           muted={muted}
-          onVolumeChange={() => setVolume(videoRef.current?.volume ?? 1.0)}
+          onVolumeChange={() =>
+            setVolume(videoRef.current?.volume ?? 1.0, true)
+          }
           onPlay={() => {
             setIsPlaying(true);
 
@@ -249,7 +252,13 @@ export default function HlsVideoPlayer({
               : undefined
           }
           onLoadedData={onPlayerLoaded}
-          onLoadedMetadata={handleLoadedMetadata}
+          onLoadedMetadata={() => {
+            handleLoadedMetadata();
+
+            if (videoRef.current && volume) {
+              videoRef.current.volume = volume;
+            }
+          }}
           onEnded={onClipEnded}
           onError={(e) => {
             if (

web/src/components/player/VideoControls.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { isSafari } from "react-device-detect";
+import { isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
   DropdownMenu,
@@ -48,6 +48,7 @@ const CONTROLS_DEFAULT: VideoControls = {
   fullscreen: false,
 };
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
+const MIN_ITEMS_WRAP = 6;
 
 type VideoControlsProps = {
   className?: string;
@@ -170,8 +171,12 @@ export default function VideoControls({
   return (
     <div
       className={cn(
-        "w-[96%] sm:w-auto px-4 py-2 flex flex-wrap sm:flex-nowrap justify-between items-center gap-4 sm:gap-8 text-primary z-50 bg-background/60 rounded-lg",
+        "w-auto px-4 py-2 flex sm:flex-nowrap justify-between items-center gap-4 sm:gap-8 text-primary z-50 bg-background/60 rounded-lg",
         className,
+        isMobileOnly &&
+          Object.values(features).filter((feat) => feat).length >
+            MIN_ITEMS_WRAP &&
+          "flex-wrap min-w-[75%]",
       )}
     >
       {video && features.volume && (