administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

use overlay so player state is maintained between camera switches

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-10 08:28:51 -06:00
parent 79de73aeb7
commit ac250cc891
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/player/HlsVideoPlayer.tsx
View File

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