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 (