From d5ec5c611f4b61a5fff247b03526b66ef214385b Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Fri, 6 Feb 2026 18:22:57 +0300 Subject: [PATCH] Update Web UI: Improve volume slider responsiveness - Add real-time volume updates while dragging slider - Throttle updates to 50ms for smooth, responsive feedback - Prevent overwhelming server with excessive API calls - Update volume immediately on mouse release for final value Co-Authored-By: Claude Sonnet 4.5 --- media_server/static/index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/media_server/static/index.html b/media_server/static/index.html index b325a01..93d7f51 100644 --- a/media_server/static/index.html +++ b/media_server/static/index.html @@ -1395,6 +1395,7 @@ let currentDuration = 0; let currentPosition = 0; let isUserAdjustingVolume = false; + let volumeUpdateTimer = null; // Timer for throttling volume updates let scripts = []; let lastStatus = null; // Store last status for locale switching @@ -1431,9 +1432,25 @@ isUserAdjustingVolume = true; const volume = parseInt(e.target.value); document.getElementById('volume-display').textContent = `${volume}%`; + + // Throttle volume updates while dragging (update every 50ms) + if (volumeUpdateTimer) { + clearTimeout(volumeUpdateTimer); + } + volumeUpdateTimer = setTimeout(() => { + setVolume(volume); + volumeUpdateTimer = null; + }, 50); }); volumeSlider.addEventListener('change', (e) => { + // Clear any pending throttled update + if (volumeUpdateTimer) { + clearTimeout(volumeUpdateTimer); + volumeUpdateTimer = null; + } + + // Send final volume update immediately const volume = parseInt(e.target.value); setVolume(volume); setTimeout(() => { isUserAdjustingVolume = false; }, 500);