From bf9d20e25e5e168c714de1b4a9acd350eeb46622 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 4 May 2026 18:20:51 +0200
Subject: [PATCH] fix: improve volume slider functionality

---
 static/player.ts                         | 5 ++++-
 templates/components/video_player.gohtml | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/static/player.ts b/static/player.ts
index 239c23b..f7f8c69 100644
--- a/static/player.ts
+++ b/static/player.ts
@@ -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
     }
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index a94c8de..63e7ec8 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -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>