melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

player: show volume slider only on icon hover

Browse Source
This commit is contained in:
mkelvers
2026-04-18 06:30:24 +02:00
parent c8e8b80b75
commit 1b8083b087
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/player.ts
View File

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

4
static/style.css
View File

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