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

fix(ui): use CSS group-hover for reliable volume panel display

Browse Source
This commit is contained in:
mkelvers
2026-04-20 18:08:54 +02:00
parent 92a69fdb35
commit d767e73815
2 changed files with 26 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/player.ts
View File

@@ -31,6 +31,7 @@ const initPlayer = (): void => {
const volumeRange = container.querySelector('[data-volume-range]') as HTMLInputElement
const iconVolume = container.querySelector('[data-icon-volume]') as SVGElement
const iconMuted = container.querySelector('[data-icon-muted]') as SVGElement
const volumeUnderline = container.querySelector('[data-volume-underline]') as HTMLElement
const timeDisplay = container.querySelector('[data-time]') as HTMLElement
const progressWrap = container.querySelector('[data-progress-wrap]') as HTMLElement
const progress = container.querySelector('[data-progress]') as HTMLElement
@@ -84,7 +85,6 @@ const initPlayer = (): void => {
}
let controlsTimeout: number | undefined
let isScrubbing = false
let isHoveringVolume = false
let lastKnownVolume = 1
let activeSubtitles: Array<{ start: number, end: number, text: string }> = []
let currentSubtitleTracks: Array<{ lang: string, label: string, url: string }> = []
@@ -627,7 +627,7 @@ const initPlayer = (): void => {
container.classList.add('show-controls')
window.clearTimeout(controlsTimeout)
controlsTimeout = window.setTimeout(() => {
if (!isScrubbing && !isHoveringVolume && !video.paused) {
if (!isScrubbing && !video.paused) {
container.classList.remove('show-controls')
}
}, 2000)
@@ -852,35 +852,12 @@ const initPlayer = (): void => {
showControls()
})
const setVolumePanelOpen = (isOpen: boolean): void => {
if (volumePanel) {
volumePanel.classList.toggle('volume-panel-visible', isOpen)
}
volumeWrap?.classList.toggle('is-volume-open', isOpen)
isHoveringVolume = isOpen
if (isOpen) showControls()
}
volumeRange?.addEventListener('pointerdown', () => {
volumePanel?.classList.add('is-dragging')
})
const openVolumePanel = (): void => {
setVolumePanelOpen(true)
}
const closeVolumePanel = (): void => {
setVolumePanelOpen(false)
}
closeVolumePanel()
muteBtn?.addEventListener('mouseenter', openVolumePanel)
volumeWrap?.addEventListener('mouseleave', closeVolumePanel)
volumeWrap?.addEventListener('focusin', openVolumePanel)
volumeWrap?.addEventListener('focusout', (event: FocusEvent) => {
const nextTarget = event.relatedTarget
if (nextTarget instanceof Node && volumeWrap.contains(nextTarget)) return
closeVolumePanel()
window.addEventListener('pointerup', () => {
volumePanel?.classList.remove('is-dragging')
})
backwardBtn?.addEventListener('click', () => seekBy(-10))

39
web/components/watch/video_player.templ
View File

@@ -114,26 +114,24 @@ templ VideoPlayer(data shared.WatchPageData) {
</button>
<div
data-volume-wrap
class="relative flex h-9 w-9 items-center justify-center overflow-visible sm:h-10 sm:w-10"
class="group/volume relative flex h-9 w-9 items-center justify-center overflow-visible sm:h-10 sm:w-10"
>
<span
data-volume-bridge
class="volume-bridge-off absolute inset-x-0 bottom-full h-[calc(100%+26px)]"
></span>
<div
data-volume-panel
class="volume-panel pointer-events-none absolute bottom-[calc(100%+26px)] left-1/2 z-30 -translate-x-1/2 opacity-0 invisible transition-opacity"
class="pointer-events-none absolute bottom-full left-1/2 z-30 -translate-x-1/2 pb-3 opacity-0 invisible transition-all duration-200 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-hover/volume:visible focus-within:pointer-events-auto focus-within:opacity-100 focus-within:visible [&.is-dragging]:pointer-events-auto [&.is-dragging]:opacity-100 [&.is-dragging]:visible"
>
<input
data-volume-range
type="range"
min="0"
max="100"
step="1"
value="100"
class="h-24 w-4 cursor-pointer appearance-none bg-transparent accent-white [writing-mode:vertical-lr] [direction:rtl]"
aria-label="Volume"
/>
<div class="flex items-center justify-center rounded-md bg-[#2B2B2B] px-3 py-3 shadow-xl">
<input
data-volume-range
type="range"
min="0"
max="100"
step="1"
value="100"
class="h-24 w-1.5 cursor-pointer rounded-full bg-white/20 accent-[#e50914] outline-none [writing-mode:vertical-lr] [direction:rtl]"
aria-label="Volume"
/>
</div>
</div>
<button
data-mute
@@ -161,10 +159,11 @@ templ VideoPlayer(data shared.WatchPageData) {
<line x1="20" y1="9" x2="16" y2="15" stroke="white" stroke-width="1.85" stroke-linecap="round"/>
</svg>
</button>
<span
class="volume-underline pointer-events-none absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 bg-white opacity-0 transition-opacity"
></span>
</div>
<span
data-volume-underline
class="volume-underline pointer-events-none absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 bg-white opacity-0 transition-opacity"
></span>
</div>
<span
data-time
class="min-w-0 text-sm text-white tabular-nums sm:text-base"