From 464d07d392e809457375d12560fa7df5046f3f7d Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Tue, 17 Sep 2024 17:19:54 +0800
Subject: [PATCH] feat: using the scroll wheel to set the volume

---
 src/pages/Player/VolumeControl.tsx | 54 +++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/pages/Player/VolumeControl.tsx b/src/pages/Player/VolumeControl.tsx
index 6452175..f079c6d 100644
--- a/src/pages/Player/VolumeControl.tsx
+++ b/src/pages/Player/VolumeControl.tsx
@@ -1,9 +1,10 @@
-import { IconButton, Popover, Box, Slider } from '@mui/material'
+import { IconButton, Popover, Box, Slider, Tooltip } from '@mui/material'
 import { useState } from 'react'
 import VolumeUpIcon from '@mui/icons-material/VolumeUp'
 import VolumeDownIcon from '@mui/icons-material/VolumeDown'
 import VolumeOffIcon from '@mui/icons-material/VolumeOff'
 import useUiStore from '@/store/useUiStore'
+import { useWheel } from '@use-gesture/react'
 
 export default function VolumeControl() {
 
@@ -22,23 +23,45 @@ export default function VolumeControl() {
   const [volumeAnchorEl, setVolumeAnchorEl] = useState<HTMLElement | null>(null)
   const volumeOpen = Boolean(volumeAnchorEl)
 
+  const bind = useWheel((state) => {
+    const _volume: number = Number((volume - state.movement[1] / 100).toFixed(0))
+    updateVolume(Math.min(Math.max(_volume, 0), 100))
+  })
+
   return (
-    <div>
-      <IconButton onClick={(event: React.MouseEvent<HTMLButtonElement>) => setVolumeAnchorEl(event.currentTarget)} >
-        {
-          volume === 0
-            ? <VolumeOffIcon />
-            : volume < 50
-              ? <VolumeDownIcon/>
-              : <VolumeUpIcon />
-        }
-      </IconButton>
+    <div {...bind()}>
+      <Tooltip
+        title={volume}
+        placement='top'
+        slotProps={{
+          popper: {
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, -10],
+                },
+              },
+            ],
+          },
+        }}
+      >
+        <IconButton onClick={(event: React.MouseEvent<HTMLButtonElement>) => setVolumeAnchorEl(event.currentTarget)} >
+          {
+            volume === 0
+              ? <VolumeOffIcon />
+              : volume < 50
+                ? <VolumeDownIcon />
+                : <VolumeUpIcon />
+          }
+        </IconButton>
+      </Tooltip>
       <Popover
         open={volumeOpen}
         onClose={() => setVolumeAnchorEl(null)}
         anchorEl={volumeAnchorEl}
         anchorOrigin={{
-          vertical: audioViewIsShow ? 'bottom': 'top',
+          vertical: audioViewIsShow ? 'bottom' : 'top',
           horizontal: 'center',
         }}
         transformOrigin={{
@@ -52,8 +75,9 @@ export default function VolumeControl() {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            padding: '1rem 0.5rem 1rem 0.5rem',
-            gap: '1em',
+            padding: '1rem 0.75rem 1.75rem 0.75rem',
+            gap: '1.5em',
+            minHeight: '240px',
           }}
         >
           {volume}
@@ -65,7 +89,7 @@ export default function VolumeControl() {
             max={100}
             onChange={(_, value) => updateVolume(value as number)}
             sx={{
-              minHeight: '160px',
+              flexGrow: 1,
             }}
           />
         </Box>