mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-29 15:26:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make volume scrollable with your mouse

Browse source
This commit is contained in:
qtchaos 2024-02-26 22:39:32 +02:00
parent c1731fdbc9
commit 67c86a270e
No known key found for this signature in database
GPG key ID: 7DA98B2B9EF06A90
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} />