From 1b8083b087675f50acadc48d5491bd2221644560 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 18 Apr 2026 06:30:24 +0200
Subject: [PATCH] player: show volume slider only on icon hover

---
 static/player.ts | 6 ++++--
 static/style.css | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/static/player.ts b/static/player.ts
index 0c7cfc2..8a7ad97 100644
--- a/static/player.ts
+++ b/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()
   })
diff --git a/static/style.css b/static/style.css
index c34c426..51b96ce 100644
--- a/static/style.css
+++ b/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;
 }