From 0785735c9254b3e00ec7912f3280f100bde565e2 Mon Sep 17 00:00:00 2001
From: KhooLy <73142442+KhooLy@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:01:38 +0300
Subject: [PATCH] fix: optimistically update mute/pause icon state instead of
 waiting for the status poll

---
 src/components/ReactPlayerOverlay.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ReactPlayerOverlay.tsx b/src/components/ReactPlayerOverlay.tsx
index f78c709..80dcefd 100644
--- a/src/components/ReactPlayerOverlay.tsx
+++ b/src/components/ReactPlayerOverlay.tsx
@@ -451,6 +451,7 @@ export function ReactPlayerOverlay({ closePlayer, onFirstFrame, initialTitle, in
         } else {
           const icon = pausedRef.current ? 'play' : 'pause';
           flashFeedback(icon, '');
+          setPaused((prev) => !prev);
           sendCmd('cycle pause');
         }
       }
@@ -614,6 +615,7 @@ export function ReactPlayerOverlay({ closePlayer, onFirstFrame, initialTitle, in
       centerClickTimerRef.current = null;
       const icon = pausedRef.current ? 'play' : 'pause';
       flashFeedback(icon, '');
+      setPaused((prev) => !prev);
       sendCmd('cycle pause');
     }, 250);
   }, [flashFeedback, resetActivity, showEpisodePanel, toggleFullscreen, trackPopover]);
@@ -834,7 +836,7 @@ export function ReactPlayerOverlay({ closePlayer, onFirstFrame, initialTitle, in
         {/* Controls row */}
         <div style={{ display: 'flex', alignItems: 'center', padding: '0 8px 14px', gap: 0 }}>
           <button
-            onClick={(e) => { e.stopPropagation(); resetActivity(); flashFeedback(paused ? 'play' : 'pause', ''); sendCmd('cycle pause'); }}
+            onClick={(e) => { e.stopPropagation(); resetActivity(); flashFeedback(paused ? 'play' : 'pause', ''); setPaused((prev) => !prev); sendCmd('cycle pause'); }}
             className="fluxa-ibtn"
             style={{ ...styles.iconBtn, width: 48, height: 48 }}
             title={paused ? 'Play' : 'Pause'}
@@ -852,7 +854,7 @@ export function ReactPlayerOverlay({ closePlayer, onFirstFrame, initialTitle, in
             onMouseEnter={() => { if (volumeHideTimer.current) clearTimeout(volumeHideTimer.current); setShowVolumeSlider(true); }}
             onMouseLeave={() => { volumeHideTimer.current = setTimeout(() => setShowVolumeSlider(false), 200); }}
           >
-            <button onClick={(e) => { e.stopPropagation(); resetActivity(); sendCmd('cycle mute'); }} className="fluxa-ibtn" style={styles.iconBtn} title={muted ? 'Unmute' : 'Mute'}>
+            <button onClick={(e) => { e.stopPropagation(); resetActivity(); setMuted((prev) => !prev); sendCmd('cycle mute'); }} className="fluxa-ibtn" style={styles.iconBtn} title={muted ? 'Unmute' : 'Mute'}>
               <IconVolume muted={muted} level={volumeLevel} />
             </button>
             <div style={{ overflow: 'hidden', width: showVolumeSlider ? 96 : 0, opacity: showVolumeSlider ? 1 : 0, transition: 'width 0.22s ease, opacity 0.18s ease', display: 'flex', alignItems: 'center', paddingRight: showVolumeSlider ? 8 : 0 }}>