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

Get video controls working when video is paused

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-14 09:12:30 -06:00
parent 911277ecf4
commit 14f268e62f
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,6 +75,8 @@ export default function HlsVideoPlayer({
// controls // controls
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [muted, setMuted] = useState(true);
const [volume, setVolume] = useState(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);
@ -85,9 +87,12 @@ export default function HlsVideoPlayer({
className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50" className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50"
video={videoRef.current} video={videoRef.current}
isPlaying={isPlaying} isPlaying={isPlaying}
show={controls} show={visible && controls}
muted={muted}
volume={volume}
controlsOpen={controlsOpen} controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen} setControlsOpen={setControlsOpen}
setMuted={setMuted}
playbackRate={videoRef.current?.playbackRate ?? 1} playbackRate={videoRef.current?.playbackRate ?? 1}
hotKeys={hotKeys} hotKeys={hotKeys}
onPlayPause={(play) => { onPlayPause={(play) => {
@ -155,7 +160,8 @@ export default function HlsVideoPlayer({
autoPlay autoPlay
controls={false} controls={false}
playsInline playsInline
muted muted={muted}
onVolumeChange={() => setVolume(videoRef.current?.volume ?? 1.0)}
onPlay={() => { onPlay={() => {
setIsPlaying(true); setIsPlaying(true);

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

@ -38,11 +38,14 @@ type VideoControlsProps = {
features?: VideoControls; features?: VideoControls;
isPlaying: boolean; isPlaying: boolean;
show: boolean; show: boolean;
muted: boolean;
volume: number;
controlsOpen?: boolean; controlsOpen?: boolean;
playbackRates?: number[]; playbackRates?: number[];
playbackRate: number; playbackRate: number;
hotKeys?: boolean; hotKeys?: boolean;
setControlsOpen?: (open: boolean) => void; setControlsOpen?: (open: boolean) => void;
setMuted: (muted: boolean) => void;
onPlayPause: (play: boolean) => void; onPlayPause: (play: boolean) => void;
onSeek: (diff: number) => void; onSeek: (diff: number) => void;
onSetPlaybackRate: (rate: number) => void; onSetPlaybackRate: (rate: number) => void;
@ -53,11 +56,14 @@ export default function VideoControls({
features = CONTROLS_DEFAULT, features = CONTROLS_DEFAULT,
isPlaying, isPlaying,
show, show,
muted,
volume,
controlsOpen, controlsOpen,
playbackRates = PLAYBACK_RATE_DEFAULT, playbackRates = PLAYBACK_RATE_DEFAULT,
playbackRate, playbackRate,
hotKeys = true, hotKeys = true,
setControlsOpen, setControlsOpen,
setMuted,
onPlayPause, onPlayPause,
onSeek, onSeek,
onSetPlaybackRate, onSetPlaybackRate,
@ -89,18 +95,18 @@ export default function VideoControls({
// volume control // volume control
const VolumeIcon = useMemo(() => { const VolumeIcon = useMemo(() => {
if (!video || video?.muted) { if (volume == 0.0 || muted) {
return MdVolumeOff; return MdVolumeOff;
} else if (video.volume <= 0.33) { } else if (volume <= 0.33) {
return MdVolumeMute; return MdVolumeMute;
} else if (video.volume <= 0.67) { } else if (volume <= 0.67) {
return MdVolumeDown; return MdVolumeDown;
} else { } else {
return MdVolumeUp; return MdVolumeUp;
} }
// only update when specific fields change // only update when specific fields change
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [video?.volume, video?.muted]); }, [volume, muted]);
const onKeyboardShortcut = useCallback( const onKeyboardShortcut = useCallback(
(key: string, down: boolean, repeat: boolean) => { (key: string, down: boolean, repeat: boolean) => {
@ -117,7 +123,7 @@ export default function VideoControls({
break; break;
case "m": case "m":
if (down && !repeat && video) { if (down && !repeat && video) {
video.muted = !video.muted; setMuted(!muted);
} }
break; break;
case " ": case " ":
@ -150,13 +156,13 @@ export default function VideoControls({
className="size-5" className="size-5"
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
video.muted = !video.muted; setMuted(!muted);
}} }}
/> />
{video.muted == false && ( {muted == false && (
<VolumeSlider <VolumeSlider
className="w-20" className="w-20"
value={[video.volume]} value={[volume]}
min={0} min={0}
max={1} max={1}
step={0.02} step={0.02}
@ -193,7 +199,11 @@ export default function VideoControls({
onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))} onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
> >
{playbackRates.map((rate) => ( {playbackRates.map((rate) => (
<DropdownMenuRadioItem key={rate} value={rate.toString()}> <DropdownMenuRadioItem
key={rate}
className="cursor-pointer"
value={rate.toString()}
>
{rate}x {rate}x
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
))} ))}