From 67c86a270e1eab14d86c46b84cf73291fc242cc8 Mon Sep 17 00:00:00 2001
From: qtchaos <72168435+qtchaos@users.noreply.github.com>
Date: Mon, 26 Feb 2024 22:39:32 +0200
Subject: [PATCH] feat: make volume scrollable with your mouse

---
 src/components/player/atoms/Volume.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/player/atoms/Volume.tsx b/src/components/player/atoms/Volume.tsx
index 35e9dff2..b2ea4cf4 100644
--- a/src/components/player/atoms/Volume.tsx
+++ b/src/components/player/atoms/Volume.tsx
@@ -47,8 +47,22 @@ export function Volume(props: Props) {
   if (dragging) percentage = makePercentage(dragPercentage);
   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 (
-    <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="px-4 text-2xl text-white" onClick={handleClick}>
           <Icon icon={percentage > 0 ? Icons.VOLUME : Icons.VOLUME_X} />