Make volume props optional

This commit is contained in:
Nicolas Mowen 2024-04-14 10:00:51 -06:00
parent a90219d5b3
commit d6e437e6c9

View File

@ -38,14 +38,14 @@ type VideoControlsProps = {
features?: VideoControls; features?: VideoControls;
isPlaying: boolean; isPlaying: boolean;
show: boolean; show: boolean;
muted: boolean; muted?: boolean;
volume: number; 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; 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;
@ -95,7 +95,7 @@ export default function VideoControls({
// volume control // volume control
const VolumeIcon = useMemo(() => { const VolumeIcon = useMemo(() => {
if (volume == 0.0 || muted) { if (!volume || volume == 0.0 || muted) {
return MdVolumeOff; return MdVolumeOff;
} else if (volume <= 0.33) { } else if (volume <= 0.33) {
return MdVolumeMute; return MdVolumeMute;
@ -122,7 +122,7 @@ export default function VideoControls({
} }
break; break;
case "m": case "m":
if (down && !repeat && video) { if (setMuted && down && !repeat && video) {
setMuted(!muted); setMuted(!muted);
} }
break; break;
@ -156,13 +156,16 @@ export default function VideoControls({
className="size-5" className="size-5"
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
if (setMuted) {
setMuted(!muted); setMuted(!muted);
}
}} }}
/> />
{muted == false && ( {muted == false && (
<VolumeSlider <VolumeSlider
className="w-20" className="w-20"
value={[volume]} value={[volume ?? 1.0]}
min={0} min={0}
max={1} max={1}
step={0.02} step={0.02}