Add volume popup on icon hover (#298)

src/components/player/PlayerBar.tsx

@@ -748,11 +748,6 @@ const PlayerBar = () => {
                 onWheel={handleVolumeWheel}
               >
                 {/* Volume Slider */}
-                <VolumeIcon
-                  icon={muted ? 'volume-off' : 'volume-down'}
-                  onClick={() => setMuted(!muted)}
-                  size="lg"
-                />
                 <Whisper
                   trigger="hover"
                   placement="top"
@@ -760,6 +755,13 @@ const PlayerBar = () => {
                   preventOverflow
                   speaker={<Popup>{muted ? t('Muted') : Math.floor(localVolume * 100)}</Popup>}
                 >
+                  <VolumeIcon
+                    icon={muted ? 'volume-off' : 'volume-down'}
+                    onClick={() => setMuted(!muted)}
+                    size="lg"
+                  />
+                </Whisper>
+
                 <Slider
                   value={Math.floor(localVolume * 100)}
                   min={0}
@@ -767,7 +769,6 @@ const PlayerBar = () => {
                   onChange={handleVolumeSlider}
                   toolTipType="text"
                 />
-                </Whisper>
               </div>
             </PlayerColumn>
           </FlexboxGrid.Item>