Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 11:30:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #943 from qtchaos/scroll-volume

Browse Source 
Allow users to change volume with scroll wheel
This commit is contained in:
William Oldham 2024-02-26 20:56:30 +00:00 committed by GitHub
commit ba4713b130
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/player/atoms/Volume.tsx
View File

@ -47,8 +47,22 @@ export function Volume(props: Props) {
if (dragging) percentage = makePercentage(dragPercentage); if (dragging) percentage = makePercentage(dragPercentage);
const percentageString = makePercentageString(percentage); const percentageString = makePercentageString(percentage);
const handleWheel = useCallback(
(event: React.WheelEvent<HTMLDivElement>) => {
event.preventDefault();
let newVolume = volume - event.deltaY / 1000;
newVolume = Math.max(0, Math.min(newVolume, 1));
setVolume(newVolume);
},
[volume, setVolume],
);
return ( return (
<div className={props.className} onMouseEnter={handleMouseEnter}> <div
className={props.className}
onMouseEnter={handleMouseEnter}
onWheel={handleWheel}
>
<div className="pointer-events-auto flex cursor-pointer items-center py-0"> <div className="pointer-events-auto flex cursor-pointer items-center py-0">
<div className="px-4 text-2xl text-white" onClick={handleClick}> <div className="px-4 text-2xl text-white" onClick={handleClick}>
<Icon icon={percentage > 0 ? Icons.VOLUME : Icons.VOLUME_X} /> <Icon icon={percentage > 0 ? Icons.VOLUME : Icons.VOLUME_X} />