From bde2231a909e955804f44ff92423e610f02b9f5c Mon Sep 17 00:00:00 2001
From: qtchaos <72168435+qtchaos@users.noreply.github.com>
Date: Wed, 13 Mar 2024 23:20:17 +0200
Subject: [PATCH 1/2] fix: set touch-action to none

---
 src/components/player/atoms/Volume.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/player/atoms/Volume.tsx b/src/components/player/atoms/Volume.tsx
index b2ea4cf4..6f97a14f 100644
--- a/src/components/player/atoms/Volume.tsx
+++ b/src/components/player/atoms/Volume.tsx
@@ -63,7 +63,7 @@ export function Volume(props: Props) {
       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 touch-none">
         <div className="px-4 text-2xl text-white" onClick={handleClick}>
           <Icon icon={percentage > 0 ? Icons.VOLUME : Icons.VOLUME_X} />
         </div>

From 39bcf8c270422027f0c3ed6d074fa0419b74bc42 Mon Sep 17 00:00:00 2001
From: qtchaos <72168435+qtchaos@users.noreply.github.com>
Date: Fri, 22 Mar 2024 17:42:18 +0200
Subject: [PATCH 2/2] fix: add overflow-y-hidden for mac users

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

diff --git a/src/components/player/atoms/Volume.tsx b/src/components/player/atoms/Volume.tsx
index 6f97a14f..62662de1 100644
--- a/src/components/player/atoms/Volume.tsx
+++ b/src/components/player/atoms/Volume.tsx
@@ -41,8 +41,13 @@ export function Volume(props: Props) {
 
   const handleMouseEnter = useCallback(async () => {
     if (await canChangeVolume()) setHovering(true);
+    document.body.classList.add("overflow-y-hidden");
   }, [setHovering]);
 
+  const handleMouseLeave = () => {
+    document.body.classList.remove("overflow-y-hidden");
+  };
+
   let percentage = makePercentage(volume * 100);
   if (dragging) percentage = makePercentage(dragPercentage);
   const percentageString = makePercentageString(percentage);
@@ -61,6 +66,7 @@ export function Volume(props: Props) {
     <div
       className={props.className}
       onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       onWheel={handleWheel}
     >
       <div className="pointer-events-auto flex cursor-pointer items-center py-0 touch-none">