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

fix: improve volume slider functionality

Browse Source
This commit is contained in:
mkelvers
2026-05-04 18:20:51 +02:00
parent feb842ff72
commit bf9d20e25e
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
static/player.ts
View File

@@ -695,11 +695,14 @@ const initPlayer = (): void => {
}
const syncVolumeUI = (): void => {
const volumeValue = video.muted ? 0 : Math.round(video.volume * 100)
if (volumeRange) {
const volumeValue = video.muted ? 0 : Math.round(video.volume * 100)
volumeRange.value = String(volumeValue)
volumeRange.style.setProperty('--volume-percent', `${volumeValue}%`)
}
if (volumeUnderline) {
volumeUnderline.style.height = `${volumeValue}%`
}
if (!video.muted && video.volume > 0) {
lastKnownVolume = video.volume
}

6
templates/components/video_player.gohtml
View File

@@ -20,7 +20,7 @@
<div class="border-accent size-10 animate-spin rounded-full border-4 border-t-transparent"></div>
</div>
<div data-video-overlay class="absolute inset-x-0 bottom-0 bg-linear-to-t from-black/90 via-black/40 to-transparent p-4 transition-opacity duration-300 opacity-0 group-hover:opacity-100 z-40">
<div data-video-overlay class="absolute inset-x-0 bottom-0 bg-linear-to-t from-black/90 via-black/40 to-transparent p-4 pt-16 transition-opacity duration-300 opacity-0 group-hover:opacity-100 z-40">
<div class="flex flex-col gap-3">
<div class="flex items-center justify-between px-2">
<div class="flex items-center gap-4">
@@ -30,10 +30,10 @@
</button>
<div data-volume-wrap class="group/volume relative flex items-center justify-center">
<div data-volume-panel class="pointer-events-none absolute bottom-full left-1/2 flex h-26 w-12 -translate-x-1/2 items-start justify-center opacity-0 transition-opacity group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100">
<div data-volume-panel class="pointer-events-none absolute bottom-full left-1/2 flex h-32 w-12 -translate-x-1/2 items-end justify-center opacity-0 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100">
<div class="relative flex h-24 w-8 items-center justify-center">
<div class="relative z-10 flex h-20 w-1.5 flex-col justify-end rounded-full bg-white/50 shadow-[0_0_6px_rgba(0,0,0,0.6)]">
<input type="range" data-volume-range min="0" max="1" step="0.05" class="absolute -inset-x-4 inset-y-0 z-10 cursor-pointer opacity-0" style="writing-mode: vertical-lr; direction: rtl;">
<input type="range" data-volume-range min="0" max="100" step="5" class="absolute -inset-x-4 inset-y-0 z-10 cursor-pointer opacity-0" style="writing-mode: vertical-lr; direction: rtl;">
<div data-volume-underline class="bg-accent pointer-events-none w-full rounded-full shadow-[0_0_4px_rgba(0,0,0,0.4)]" style="height: 100%"></div>
</div>
</div>