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 currentDuration = 0;
|
||||||
let currentPosition = 0;
|
let currentPosition = 0;
|
||||||
let isUserAdjustingVolume = false;
|
let isUserAdjustingVolume = false;
|
||||||
|
let volumeUpdateTimer = null; // Timer for throttling volume updates
|
||||||
let scripts = [];
|
let scripts = [];
|
||||||
let lastStatus = null; // Store last status for locale switching
|
let lastStatus = null; // Store last status for locale switching
|
||||||
|
|
||||||
@@ -1431,9 +1432,25 @@
|
|||||||
isUserAdjustingVolume = true;
|
isUserAdjustingVolume = true;
|
||||||
const volume = parseInt(e.target.value);
|
const volume = parseInt(e.target.value);
|
||||||
document.getElementById('volume-display').textContent = `${volume}%`;
|
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) => {
|
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);
|
const volume = parseInt(e.target.value);
|
||||||
setVolume(volume);
|
setVolume(volume);
|
||||||
setTimeout(() => { isUserAdjustingVolume = false; }, 500);
|
setTimeout(() => { isUserAdjustingVolume = false; }, 500);
|
||||||
|
|||||||
Reference in New Issue
Block a user