Use separate persistent mute and temporary forced mute states

This commit is contained in:
0x464e 2026-03-30 13:56:05 +03:00
parent bdc838cc5a
commit 3acff5212e
No known key found for this signature in database
GPG Key ID: E6D221DF6CBFBFFA

View File

@ -216,7 +216,11 @@ export default function HlsVideoPlayer({
const [tallCamera, setTallCamera] = useState(false); const [tallCamera, setTallCamera] = useState(false);
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true); const [persistedMuted, setPersistedMuted] = useUserPersistence(
"hlsPlayerMuted",
true,
);
const [temporaryMuted, setTemporaryMuted] = useState(false);
const [volume, setVolume] = useOverlayState("playerVolume", 1.0); const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1); const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
const [playbackRate, setPlaybackRate] = useOverlayState( const [playbackRate, setPlaybackRate] = useOverlayState(
@ -232,6 +236,16 @@ export default function HlsVideoPlayer({
height: number; height: number;
}>({ width: 0, height: 0 }); }>({ width: 0, height: 0 });
const muted = persistedMuted || temporaryMuted;
const onSetMuted = useCallback(
(muted: boolean) => {
setTemporaryMuted(false);
setPersistedMuted(muted);
},
[setPersistedMuted],
);
useEffect(() => { useEffect(() => {
if (!isDesktop) { if (!isDesktop) {
return; return;
@ -297,7 +311,7 @@ export default function HlsVideoPlayer({
fullscreen: supportsFullscreen, fullscreen: supportsFullscreen,
}} }}
setControlsOpen={setControlsOpen} setControlsOpen={setControlsOpen}
setMuted={(muted) => setMuted(muted)} setMuted={onSetMuted}
playbackRate={playbackRate ?? 1} playbackRate={playbackRate ?? 1}
hotKeys={hotKeys} hotKeys={hotKeys}
onPlayPause={onPlayPause} onPlayPause={onPlayPause}
@ -404,9 +418,20 @@ export default function HlsVideoPlayer({
: undefined : undefined
} }
onVolumeChange={() => { onVolumeChange={() => {
setVolume(videoRef.current?.volume ?? 1.0, true); if (!videoRef.current) {
if (!frigateControls) { return;
setMuted(videoRef.current?.muted); }
setVolume(videoRef.current.volume ?? 1.0, true);
if (frigateControls) {
if (videoRef.current.muted && !persistedMuted) {
setTemporaryMuted(true);
} else if (!videoRef.current.muted && temporaryMuted) {
setTemporaryMuted(false);
}
} else {
setPersistedMuted(videoRef.current.muted);
} }
}} }}
onPlay={() => { onPlay={() => {