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}`);