player: show volume slider only on icon hover

static/player.ts

@@ -501,12 +501,14 @@ const initPlayer = (): void => {
     showControls()
   })
 
-  volumeWrap?.addEventListener('mouseenter', () => {
+  muteBtn?.addEventListener('mouseenter', () => {
+    volumeWrap?.classList.add('show-volume')
     isHoveringVolume = true
     showControls()
   })
 
-  volumeWrap?.addEventListener('mouseleave', () => {
+  muteBtn?.addEventListener('mouseleave', () => {
+    volumeWrap?.classList.remove('show-volume')
     isHoveringVolume = false
     showControls()
   })

static/style.css

@@ -84,7 +84,7 @@
   height: 130px;
 }
 
-.volume-wrap:hover .volume-panel,
+.volume-wrap.show-volume .volume-panel,
 .volume-wrap:focus-within .volume-panel,
 .volume-panel:hover,
 .volume-panel:focus-within {
@@ -93,7 +93,7 @@
   pointer-events: auto;
 }
 
-.volume-wrap:hover .volume-underline,
+.volume-wrap.show-volume .volume-underline,
 .volume-wrap:focus-within .volume-underline {
   opacity: 1;
 }