Add volume popup on icon hover (#298)

jeffvli · Apr 21, 2022 · 9410add · 9410add
1 parent d88710c
commit 9410add
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
@@ -748,26 +748,27 @@ const PlayerBar = () => {
                 onWheel={handleVolumeWheel}
               >
                 {/* Volume Slider */}
-                <VolumeIcon
-                  icon={muted ? 'volume-off' : 'volume-down'}
-                  onClick={() => setMuted(!muted)}
-                  size="lg"
-                />
                 <Whisper
                   trigger="hover"
                   placement="top"
                   delay={200}
                   preventOverflow
                   speaker={<Popup>{muted ? t('Muted') : Math.floor(localVolume * 100)}</Popup>}
                 >
-                  <Slider
-                    value={Math.floor(localVolume * 100)}
-                    min={0}
-                    max={100}
-                    onChange={handleVolumeSlider}
-                    toolTipType="text"
+                  <VolumeIcon
+                    icon={muted ? 'volume-off' : 'volume-down'}
+                    onClick={() => setMuted(!muted)}
+                    size="lg"
                   />
                 </Whisper>
+
+                <Slider
+                  value={Math.floor(localVolume * 100)}
+                  min={0}
+                  max={100}
+                  onChange={handleVolumeSlider}
+                  toolTipType="text"
+                />
               </div>
             </PlayerColumn>
           </FlexboxGrid.Item>