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 <noreply@anthropic.com>
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user