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

Persist playback rate between cameras

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-14 05:47:21 -06:00
parent f9567aa4e6
commit 00b5cd8db2
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ 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"; import { useOverlayState } from "@/hooks/use-overlay-state";
import { usePersistence } from "@/hooks/use-persistence";
// Android native hls does not seek correctly // Android native hls does not seek correctly
const USE_NATIVE_HLS = !isAndroid; const USE_NATIVE_HLS = !isAndroid;
@ -111,6 +112,11 @@ export default function HlsVideoPlayer({
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [muted, setMuted] = useOverlayState("playerMuted", true); const [muted, setMuted] = useOverlayState("playerMuted", true);
const [volume, setVolume] = useOverlayState("playerVolume", 1.0); const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
const [defaultPlaybackRate] = usePersistence("playbackRate", 1);
const [playbackRate, setPlaybackRate] = useOverlayState(
"playbackRate",
defaultPlaybackRate ?? 1,
);
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);
@ -162,7 +168,7 @@ export default function HlsVideoPlayer({
}} }}
setControlsOpen={setControlsOpen} setControlsOpen={setControlsOpen}
setMuted={(muted) => setMuted(muted, true)} setMuted={(muted) => setMuted(muted, true)}
playbackRate={videoRef.current?.playbackRate ?? 1} playbackRate={playbackRate ?? 1}
hotKeys={hotKeys} hotKeys={hotKeys}
onPlayPause={(play) => { onPlayPause={(play) => {
if (!videoRef.current) { if (!videoRef.current) {
@ -184,9 +190,13 @@ export default function HlsVideoPlayer({
videoRef.current.currentTime = Math.max(0, currentTime + diff); videoRef.current.currentTime = Math.max(0, currentTime + diff);
}} }}
onSetPlaybackRate={(rate) => onSetPlaybackRate={(rate) => {
videoRef.current ? (videoRef.current.playbackRate = rate) : null setPlaybackRate(rate);
}
if (videoRef.current) {
videoRef.current.playbackRate = rate;
}
}}
onUploadFrame={async () => { onUploadFrame={async () => {
if (videoRef.current && onUploadFrame) { if (videoRef.current && onUploadFrame) {
const resp = await onUploadFrame(videoRef.current.currentTime); const resp = await onUploadFrame(videoRef.current.currentTime);
@ -255,8 +265,14 @@ export default function HlsVideoPlayer({
onLoadedMetadata={() => { onLoadedMetadata={() => {
handleLoadedMetadata(); handleLoadedMetadata();
if (videoRef.current && volume) { if (videoRef.current) {
videoRef.current.volume = volume; if (playbackRate) {
videoRef.current.playbackRate = playbackRate;
}
if (volume) {
videoRef.current.volume = volume;
}
} }
}} }}
onEnded={onClipEnded} onEnded={onClipEnded}