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

Simplify more

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-13 17:12:30 -06:00
parent dad54ca2b0
commit 13fd45c84e
1 changed files with 13 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,7 +94,6 @@ export default function HlsVideoPlayer({
// controls // controls
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [volume, setVolume] = useState(0.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);
@ -126,11 +125,7 @@ export default function HlsVideoPlayer({
break; break;
case "m": case "m":
if (down && !repeat && videoRef.current) { if (down && !repeat && videoRef.current) {
if (videoRef.current.muted) { videoRef.current.muted = !videoRef.current.muted;
videoRef.current.volume = 1;
} else {
videoRef.current.volume = 0;
}
} }
break; break;
case " ": case " ":
@ -179,8 +174,7 @@ export default function HlsVideoPlayer({
autoPlay autoPlay
controls={false} controls={false}
playsInline playsInline
muted={volume == 0.0} muted
onVolumeChange={() => setVolume(videoRef.current?.volume ?? 0.0)}
onPlay={() => { onPlay={() => {
setIsPlaying(true); setIsPlaying(true);
@ -217,7 +211,6 @@ export default function HlsVideoPlayer({
<VideoControls <VideoControls
video={videoRef.current} video={videoRef.current}
isPlaying={isPlaying} isPlaying={isPlaying}
volume={volume}
show={controls} show={controls}
controlsOpen={controlsOpen} controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen} setControlsOpen={setControlsOpen}
@ -230,7 +223,6 @@ export default function HlsVideoPlayer({
type VideoControlsProps = { type VideoControlsProps = {
video: HTMLVideoElement | null; video: HTMLVideoElement | null;
isPlaying: boolean; isPlaying: boolean;
volume: number;
show: boolean; show: boolean;
controlsOpen: boolean; controlsOpen: boolean;
setControlsOpen: (open: boolean) => void; setControlsOpen: (open: boolean) => void;
@ -238,7 +230,6 @@ type VideoControlsProps = {
function VideoControls({ function VideoControls({
video, video,
isPlaying, isPlaying,
volume,
show, show,
controlsOpen, controlsOpen,
setControlsOpen, setControlsOpen,
@ -300,18 +291,19 @@ function VideoControls({
// volume control // volume control
const [showVolume, setShowVolume] = useState(false);
const VolumeIcon = useMemo(() => { const VolumeIcon = useMemo(() => {
if (volume == 0) { if (!video || video?.muted) {
return MdVolumeOff; return MdVolumeOff;
} else if (volume <= 0.33) { } else if (video.volume <= 0.33) {
return MdVolumeMute; return MdVolumeMute;
} else if (volume <= 0.67) { } else if (video.volume <= 0.67) {
return MdVolumeDown; return MdVolumeDown;
} else { } else {
return MdVolumeUp; return MdVolumeUp;
} }
}, [volume]); // only update when specific fields change
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [video?.volume, video?.muted]);
if (!video || !show) { if (!video || !show) {
return; return;
@ -324,24 +316,18 @@ function VideoControls({
<div className="flex justify-normal items-center gap-2"> <div className="flex justify-normal items-center gap-2">
<VolumeIcon <VolumeIcon
className="size-5" className="size-5"
onClick={(e) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
if (volume == 0) { video.muted = !video.muted;
setShowVolume(true);
video.volume = 1;
} else {
setShowVolume(false);
video.volume = 0;
}
}} }}
/> />
{showVolume && ( {video.muted == false && (
<Slider <Slider
className="w-20" className="w-20"
value={[volume]} value={[video.volume]}
min={0} min={0}
max={1} max={1}
step={0.05} step={0.02}
onValueChange={(value) => (video.volume = value[0])} onValueChange={(value) => (video.volume = value[0])}
/> />
)} )}