moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fix-volume-in-video' into 'main' 

Fix volume controls

Closes #1771

See merge request soapbox-pub/soapbox!3209
This commit is contained in:
Alex Gleason 2024-11-03 22:14:11 +00:00
parent 069b6e504b 270d1806a9
commit a11042cb76
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/features/video/index.tsx
View File

@ -226,6 +226,9 @@ const Video: React.FC<IVideo> = ({
if (video.current) { if (video.current) {
video.current.volume = slideamt; video.current.volume = slideamt;
const isMuted = slideamt <= 0;
video.current.muted = isMuted;
setMuted(isMuted);
} }
setVolume(slideamt); setVolume(slideamt);
@ -386,13 +389,6 @@ const Video: React.FC<IVideo> = ({
setFullscreen(isFullscreen()); setFullscreen(isFullscreen());
}, []); }, []);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
const handleSeekEnter = () => { const handleSeekEnter = () => {
setSeekHovered(true); setSeekHovered(true);
}; };
@ -401,17 +397,20 @@ const Video: React.FC<IVideo> = ({
setSeekHovered(false); setSeekHovered(false);
}; };
const handleVolumeEnter = () => { const handleVolumeEnter = (e: React.MouseEvent) => {
if (isMobile) return;
setVolumeHovered(true); setVolumeHovered(true);
}; };
const handleVolumeLeave = () => { const handleVolumeLeave = (e: React.MouseEvent) => {
if (isMobile) return;
setVolumeHovered(false); setVolumeHovered(false);
}; };
const handleClickStart = () => { const handleClickStart = () => {
setHovered(true); setHovered(true);
setHovered(true);
if (timeoutRef.current) { if (timeoutRef.current) {
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
@ -562,7 +561,7 @@ const Video: React.FC<IVideo> = ({
/> />
<div <div
className={clsx('absolute inset-x-0 bottom-0 z-20 box-border bg-gradient-to-t from-black/70 to-transparent px-[15px] opacity-0 transition-opacity duration-100 ease-linear', { 'opacity-100': paused || hovered })} className={clsx('absolute inset-x-0 bottom-0 z-20 box-border bg-gradient-to-t from-black/70 to-transparent px-[15px] opacity-0 transition-opacity duration-100 ease-linear', { 'opacity-100': paused || hovered || volumeHovered })}
> >
<div className='relative h-6 cursor-pointer' onMouseDown={handleMouseDown} onMouseEnter={handleSeekEnter} onMouseLeave={handleSeekLeave} ref={seek}> <div className='relative h-6 cursor-pointer' onMouseDown={handleMouseDown} onMouseEnter={handleSeekEnter} onMouseLeave={handleSeekLeave} ref={seek}>
<div <div
@ -606,8 +605,8 @@ const Video: React.FC<IVideo> = ({
type='button' type='button'
title={intl.formatMessage(muted ? messages.unmute : messages.mute)} title={intl.formatMessage(muted ? messages.unmute : messages.mute)}
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
onMouseEnter={handleMouseEnter} onMouseEnter={handleVolumeEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleVolumeLeave}
className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 focus:text-white focus:opacity-100 active:text-white active:opacity-100 ' className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 focus:text-white focus:opacity-100 active:text-white active:opacity-100 '
, { 'py-[10px]': fullscreen })} , { 'py-[10px]': fullscreen })}
onClick={toggleMute} onClick={toggleMute}