Add low-latency volume control via WebSocket

- Send volume updates through WebSocket instead of HTTP POST
- Reduce throttle from 50ms to 16ms (~60 updates/sec)
- Fall back to HTTP if WebSocket is disconnected

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

media_server/routes/media.py

@@ -309,6 +309,12 @@ async def websocket_endpoint(
                     "type": "status",
                     "data": status_data.model_dump(),
                 })
+            elif data.get("type") == "volume":
+                # Low-latency volume control via WebSocket
+                volume = data.get("volume")
+                if volume is not None:
+                    controller = get_media_controller()
+                    await controller.set_volume(int(volume))
 
     except WebSocketDisconnect:
         await ws_manager.disconnect(websocket)

media_server/static/js/app.js

@@ -236,14 +236,14 @@
                 const volume = parseInt(e.target.value);
                 document.getElementById('volume-display').textContent = `${volume}%`;
 
-                // Throttle volume updates while dragging (update every 50ms)
+                // Throttle volume updates while dragging (update every 16ms via WebSocket)
                 if (volumeUpdateTimer) {
                     clearTimeout(volumeUpdateTimer);
                 }
                 volumeUpdateTimer = setTimeout(() => {
                     setVolume(volume);
                     volumeUpdateTimer = null;
-                }, 50);
+                }, 16);
             });
 
             volumeSlider.addEventListener('change', (e) => {
@@ -302,14 +302,14 @@
                 document.getElementById('volume-display').textContent = `${volume}%`;
                 document.getElementById('volume-slider').value = volume;
 
-                // Throttle volume updates while dragging
+                // Throttle volume updates while dragging (update every 16ms via WebSocket)
                 if (volumeUpdateTimer) {
                     clearTimeout(volumeUpdateTimer);
                 }
                 volumeUpdateTimer = setTimeout(() => {
                     setVolume(volume);
                     volumeUpdateTimer = null;
-                }, 50);
+                }, 16);
             });
 
             miniVolumeSlider.addEventListener('change', (e) => {
@@ -697,8 +697,13 @@
         }
 
         function setVolume(volume) {
+            // Use WebSocket for low-latency volume updates
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'volume', volume: volume }));
+            } else {
                 sendCommand('volume', { volume: volume });
             }
+        }
 
         function toggleMute() {
             sendCommand('mute');