feat(medium): Refactor: Implement Optimistic UI for Spotify Controls

app/client/control/components/SpotifyControls.tsx

@@ -12,15 +12,13 @@ import Select from '@mui/material/Select'
 import Typography from '@mui/material/Typography'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import useVolumePreference, { clampVolume } from '@/hooks/useVolumePreference'
-import { useAppSnackbar } from '@/hooks/useAppSnackbar'
+import { clampVolume } from '@/utils/audioManager'
+import { useSpotifyVolume } from '@/hooks/useSpotifyVolume'
+
 import { useWebSocket } from '@/context/WebSocketContext'
 import { useSpotifyCommand } from '@/hooks/useSpotifyCommand'
 import { SpotifyCommand } from '@/types/websocket'
-import {
-  HRM_WEB_PLAYER_NAME,
-  VOLUME_SYNC_GRACE_PERIOD_MS,
-} from '@/constants/spotify'
+import { HRM_WEB_PLAYER_NAME } from '@/constants/spotify'
 import PlaybackControls from '@/components/shared/PlaybackControls'
 import SpotifySearchInput from '@/components/SpotifySearchInput'
 import VolumeSlider from '@/components/shared/VolumeSlider'
@@ -34,15 +32,11 @@ const SpotifyControls = () => {
     useWebSocket()
   const { execute: executeSpotify } = useSpotifyCommand()
   const { devices = [] } = spotifyData // Default to empty array if undefined
-  const { volume, setVolume, muted, toggleMute } = useVolumePreference()
-  const { showWarning } = useAppSnackbar()
+
   const lastSentVolumeRef = useRef<string | null>(null)
-  const lastWarningTimeRef = useRef<number>(0)
+
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
-  const [isSliding, setIsSliding] = useState(false)
-  const prevActiveIdRef = useRef<string | undefined>(undefined)
-  const lastVolumeSyncTimeRef = useRef<number>(0)
-  const hasPendingSendRef = useRef<boolean>(false)
+
   const [optimisticIsPlaying, setOptimisticIsPlaying] = useState<
     boolean | null
   >(null)
@@ -83,63 +77,15 @@ const SpotifyControls = () => {
     }
   }, [connectionStatus, sendData, spotifyServiceInitialized])
 
-  // 4. Sync selected device and volume with active device
+  // Auto-select HRM Web Player if no active device is available
   useEffect(() => {
     const activeDevice = devices.find((d) => d.is_active)
     const activeId = activeDevice?.id
-
-    // Helper: determine if device should be updated to activeId
-    const shouldUpdateToActive = () => {
-      // Initial sync or active device changed externally
-      if (!prevActiveIdRef.current || activeId !== prevActiveIdRef.current) {
-        return Boolean(activeId)
-      }
-      // Selected device no longer exists or no device selected
-      const selectedStillExists = devices.some((d) => d.id === selectedDeviceId)
-      return (!selectedDeviceId || !selectedStillExists) && Boolean(activeId)
-    }
-
-    if (shouldUpdateToActive()) {
-      setSelectedDeviceId(activeId!)
-    }
-    prevActiveIdRef.current = activeId
-
-    // Sync Volume (if not dragging and not within grace period after send)
-    // We rely on the server as the source of truth for volume, but use a grace period
-    // to prevent local sliders from "jumping" while the user is actively adjusting them.
-    const playbackVolume = spotifyData.playback.volume_percent
-
-    if (isSliding) return
-
-    const timeSinceLastVolumeSend = Date.now() - lastVolumeSyncTimeRef.current
-
-    // Only sync if we haven't sent a volume command recently.
-    // The server broadcasts a SPOTIFY_UPDATE immediately after a SET_VOLUME command,
-    // confirming the new state to all clients.
-    const shouldRespectGracePeriod =
-      hasPendingSendRef.current &&
-      timeSinceLastVolumeSend < VOLUME_SYNC_GRACE_PERIOD_MS
-
-    if (shouldRespectGracePeriod) {
-      return
+    if (activeId && selectedDeviceId !== activeId) {
+      setSelectedDeviceId(activeId)
     }
-
-    // Clear pending flag after grace period
-    if (
-      hasPendingSendRef.current &&
-      timeSinceLastVolumeSend >= VOLUME_SYNC_GRACE_PERIOD_MS
-    ) {
-      hasPendingSendRef.current = false
-    }
-
-    if (activeDevice && typeof playbackVolume === 'number') {
-      if (playbackVolume !== volume) {
-        setVolume(playbackVolume)
-      }
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devices]) // Rely on devices update to trigger sync
+  }, [devices.map((d) => `${d.id}:${d.is_active}`).join(','), selectedDeviceId])
 
   // Auto-select HRM Web Player if no active device is available
   useEffect(() => {
@@ -234,37 +180,17 @@ const SpotifyControls = () => {
     }
   }, [])
 
-  const handleVolumeChange = useCallback(
-    (val: number) => {
-      setIsSliding(true)
-      setVolume(val)
-      if (connectionStatus !== 'Connected') {
-        const now = Date.now()
-        // Throttle warning to once every 3 seconds to avoid spam during sliding
-        if (now - lastWarningTimeRef.current > 3000) {
-          showWarning('Changes not saved: Offline')
-          lastWarningTimeRef.current = now
-        }
-      }
-    },
-    [connectionStatus, showWarning, setVolume]
-  )
-
   const sendVolumeCommand = useCallback(
     (value: number) => {
       if (connectionStatus !== 'Connected') return
       const targetDeviceId = resolveTargetDeviceId()
 
-      // Prevent sending volume command if no device is targeted
       if (!targetDeviceId) return
 
       const sanitized = clampVolume(value)
       const messageKey = `${targetDeviceId}:${sanitized}`
       if (lastSentVolumeRef.current === messageKey) return
 
-      hasPendingSendRef.current = true
-      lastVolumeSyncTimeRef.current = Date.now()
-
       executeSpotify('SET_VOLUME', {
         volume: sanitized,
         deviceId: targetDeviceId,
@@ -275,13 +201,13 @@ const SpotifyControls = () => {
     [connectionStatus, resolveTargetDeviceId, executeSpotify]
   )
 
-  const handleVolumeChangeCommitted = useCallback(
-    (val: number) => {
-      setIsSliding(false)
-      sendVolumeCommand(val)
-    },
-    [sendVolumeCommand]
-  )
+  const {
+    displayVolume,
+    isMuted,
+    handleVolumeChange,
+    handleVolumeChangeCommitted,
+    handleToggleMute,
+  } = useSpotifyVolume(spotifyData.playback.volume_percent, sendVolumeCommand)
 
   useEffect(() => {
     if (connectionStatus !== 'Connected') {
@@ -355,11 +281,11 @@ const SpotifyControls = () => {
             />
 
             <VolumeSlider
-              volume={volume}
-              muted={muted}
+              volume={displayVolume}
+              muted={isMuted}
               onVolumeChange={handleVolumeChange}
               onVolumeChangeCommitted={handleVolumeChangeCommitted}
-              onToggleMute={toggleMute}
+              onToggleMute={handleToggleMute}
               showValue
               sliderColor={SPOTIFY_BRAND_COLOR}
               size="medium"