From 39d3206d69f84eab5d03883a6656fb546e553499 Mon Sep 17 00:00:00 2001
From: karitham <kar@karitham.dev>
Date: Sun, 17 May 2026 14:02:52 +0200
Subject: [PATCH] fix: start volume slider at 0 to match initial muted state

Video starts muted per browser autoplay policy. Slider and icon
now start at muted (0 / speaker-muted icon). Click icon to unmute
and restore volume to 1. Dragging slider adjusts volume and
auto-mutes at 0.
---
 templates/room.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/templates/room.html b/templates/room.html
index 6dcd80f..2eabab8 100644
--- a/templates/room.html
+++ b/templates/room.html
@@ -554,8 +554,8 @@
       <div class="main-col">
         <div id="video-container">
           <div class="volume-overlay" id="vol-overlay">
-            <span class="icon" id="vol-icon">&#x1F50A;</span>
-            <input type="range" id="vol-slider" min="0" max="1" step="0.05" value="1" />
+            <span class="icon" id="vol-icon">&#x1F507;</span>
+            <input type="range" id="vol-slider" min="0" max="1" step="0.05" value="0" />
           </div>
         </div>
         <div id="now-playing"></div>
@@ -757,17 +757,25 @@
         // Wire up volume controls (element is in HTML, not created in JS)
         const volSlider = document.getElementById("vol-slider");
         const volIcon = document.getElementById("vol-icon");
+        // Starts muted; user must gesture (click icon or drag slider) to enable audio.
         volSlider.addEventListener("input", () => {
           const v = parseFloat(volSlider.value);
           video.volume = v;
+          video.muted = v === 0;
           volIcon.textContent = v === 0 ? "\u{1F507}" : v < 0.5 ? "\u{1F509}" : "\u{1F50A}";
         });
         volIcon.addEventListener("click", () => {
-          video.muted = !video.muted;
-          volIcon.textContent = video.muted ? "\u{1F507}" : "\u{1F50A}";
-          volSlider.value = video.muted ? "0" : "1";
+          if (video.muted) {
+            video.muted = false;
+            video.volume = 1;
+            volSlider.value = "1";
+            volIcon.textContent = "\u{1F50A}";
+          } else {
+            video.muted = true;
+            volSlider.value = "0";
+            volIcon.textContent = "\u{1F507}";
+          }
         });
-        volSlider.addEventListener("click", (e) => e.stopPropagation());
 
         mediaSource = new MediaSource();
         mediaSource.addEventListener("sourceopen", () => {
-- 
2.51.2