make the ui faster

api/src/routes/playback.js

@@ -19,7 +19,21 @@ router.post('/play', async (req, res) => {
   try {
     const response = await fetch(`${req.app.locals.botUrl}/play`, { method: 'POST' });
     const result = await response.json();
-    req.app.locals.broadcast('playbackUpdate', { state: 'playing' });
+
+    // Get actual state from bot to ensure accuracy
+    try {
+      const stateResponse = await fetch(`${req.app.locals.botUrl}/state`);
+      const state = await stateResponse.json();
+      req.app.locals.broadcast('playbackUpdate', {
+        state: state.state,
+        position: state.position,
+        volume: state.volume
+      });
+    } catch (broadcastError) {
+      // Fallback to simple broadcast
+      req.app.locals.broadcast('playbackUpdate', { state: 'playing' });
+    }
+
     res.json(result);
   } catch (error) {
     req.app.locals.logger.error(`Error resuming playback: ${error.message}`);
@@ -32,7 +46,21 @@ router.post('/pause', async (req, res) => {
   try {
     const response = await fetch(`${req.app.locals.botUrl}/pause`, { method: 'POST' });
     const result = await response.json();
-    req.app.locals.broadcast('playbackUpdate', { state: 'paused' });
+
+    // Get actual state from bot to ensure accuracy
+    try {
+      const stateResponse = await fetch(`${req.app.locals.botUrl}/state`);
+      const state = await stateResponse.json();
+      req.app.locals.broadcast('playbackUpdate', {
+        state: state.state,
+        position: state.position,
+        volume: state.volume
+      });
+    } catch (broadcastError) {
+      // Fallback to simple broadcast
+      req.app.locals.broadcast('playbackUpdate', { state: 'paused' });
+    }
+
     res.json(result);
   } catch (error) {
     req.app.locals.logger.error(`Error pausing playback: ${error.message}`);
@@ -45,6 +73,28 @@ router.post('/skip', async (req, res) => {
   try {
     const response = await fetch(`${req.app.locals.botUrl}/skip`, { method: 'POST' });
     const result = await response.json();
+
+    // Get updated state immediately and broadcast
+    try {
+      const stateResponse = await fetch(`${req.app.locals.botUrl}/state`);
+      const state = await stateResponse.json();
+
+      if (state.currentTrack) {
+        req.app.locals.broadcast('trackChange', {
+          track: state.currentTrack,
+          queueLength: state.queueLength
+        });
+      }
+
+      req.app.locals.broadcast('playbackUpdate', {
+        state: state.state,
+        position: state.position,
+        volume: state.volume
+      });
+    } catch (broadcastError) {
+      // Polling will catch it
+    }
+
     res.json(result);
   } catch (error) {
     req.app.locals.logger.error(`Error skipping track: ${error.message}`);
@@ -62,7 +112,21 @@ router.post('/volume', async (req, res) => {
       body: JSON.stringify({ volume })
     });
     const result = await response.json();
-    req.app.locals.broadcast('volumeChange', { volume });
+
+    // Get actual state from bot to ensure accuracy
+    try {
+      const stateResponse = await fetch(`${req.app.locals.botUrl}/state`);
+      const state = await stateResponse.json();
+      req.app.locals.broadcast('playbackUpdate', {
+        state: state.state,
+        position: state.position,
+        volume: state.volume
+      });
+    } catch (broadcastError) {
+      // Fallback to simple broadcast
+      req.app.locals.broadcast('playbackUpdate', { volume });
+    }
+
     res.json(result);
   } catch (error) {
     req.app.locals.logger.error(`Error setting volume: ${error.message}`);

web/src/App.jsx

@@ -61,7 +61,7 @@ function App() {
   const handlePlay = async () => {
     try {
       await fetch(`${API_URL}/playback/play`, { method: 'POST' });
-      setPlaybackState('playing');
+      // State will update via WebSocket broadcast
     } catch (error) {
       console.error('Failed to play:', error);
     }
@@ -70,7 +70,7 @@ function App() {
   const handlePause = async () => {
     try {
       await fetch(`${API_URL}/playback/pause`, { method: 'POST' });
-      setPlaybackState('paused');
+      // State will update via WebSocket broadcast
     } catch (error) {
       console.error('Failed to pause:', error);
     }
@@ -91,7 +91,7 @@ function App() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ volume: newVolume })
       });
-      setVolume(newVolume);
+      // Volume will update via WebSocket broadcast
     } catch (error) {
       console.error('Failed to set volume:', error);
     }