Add volume slider improvements (#112)

- Tooltip volume value
- Hover mouse wheel control

src/components/player/PlayerBar.tsx

@@ -150,6 +150,23 @@ const PlayerBar = () => {
     }
   };
 
+  const handleVolumeWheel = (e: any) => {
+    if (e.deltaY > 0) {
+      if (!isDraggingVolume) {
+        setIsDraggingVolume(true);
+      }
+      let vol = Number((playQueue.volume - 0.01).toFixed(2));
+      vol = vol < 0 ? 0 : vol;
+      setLocalVolume(vol);
+      dispatch(setVolume(vol));
+    } else {
+      let vol = Number((playQueue.volume + 0.01).toFixed(2));
+      vol = vol > 1 ? 1 : vol;
+      setLocalVolume(vol);
+      dispatch(setVolume(vol));
+    }
+  };
+
   const handleClickForward = () => {
     if (playQueue[currentEntryList].length > 0) {
       const seekForwardInterval = Number(settings.getSync('seekForwardInterval'));
@@ -691,18 +708,30 @@ const PlayerBar = () => {
                     }
                     onClick={() => setMuted(!muted)}
                     size="lg"
-                    style={{ cursor: 'pointer', marginRight: '15px', padding: '0' }}
-                  />
-                  <CustomSlider
-                    tabIndex={0}
-                    progress
-                    value={Math.floor(localVolume * 100)}
-                    $isDragging={isDraggingVolume}
-                    tooltip={false}
-                    style={{ width: '100px', marginRight: '10px' }}
-                    onChange={handleVolumeSlider}
-                    onKeyDown={handleVolumeKey}
                   />
+                  <Whisper
+                    trigger="hover"
+                    placement="top"
+                    delay={200}
+                    preventOverflow
+                    speaker={
+                      <StyledPopover>
+                        {muted ? 'Muted' : Math.floor(localVolume * 100)}
+                      </StyledPopover>
+                    }
+                  >
+                    <CustomSlider
+                      tabIndex={0}
+                      progress
+                      value={Math.floor(localVolume * 100)}
+                      $isDragging={isDraggingVolume}
+                      tooltip={false}
+                      style={{ width: '100px', marginRight: '10px' }}
+                      onChange={handleVolumeSlider}
+                      onKeyDown={handleVolumeKey}
+                      onWheel={handleVolumeWheel}
+                    />
+                  </Whisper>
                 </Row>
               </Grid>
             </PlayerColumn>

src/components/player/styled.tsx

@@ -114,6 +114,9 @@ export const DurationSpan = styled.span`
 
 export const VolumeIcon = styled(Icon)`
   color: ${(props) => props.theme.colors.layout.playerBar.color};
+  cursor: pointer;
+  margin-right: 15px;
+  padding: 0;
 `;
 
 export const MiniViewContainer = styled.div<{ display: string }>`