Fix Bluetooth & Spotify Improvements (PR #9662) (#9663)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

app/client/connect/SignalQualityIndicator.tsx

@@ -44,7 +44,7 @@ const getStatusConfig = (
       }
     case 'warning':
       return {
-        color: palette.warning.main,
+        color: palette.warning.dark,
         label: 'Weak Signal',
         icon: SignalCellularAlt1BarIcon,
         isAnimated: true,

app/client/control/components/SpotifyControls.tsx

@@ -43,6 +43,10 @@ const SpotifyControls = () => {
   const prevActiveIdRef = useRef<string | undefined>(undefined)
   const lastVolumeSyncTimeRef = useRef<number>(0)
   const hasPendingSendRef = useRef<boolean>(false)
+  const [optimisticIsPlaying, setOptimisticIsPlaying] = useState<
+    boolean | null
+  >(null)
+  const playbackGraceTimerRef = useRef<NodeJS.Timeout | null>(null)
 
   const hrmDevice = useMemo(
     () =>
@@ -198,12 +202,38 @@ const SpotifyControls = () => {
         command === 'NEXT' ||
         command === 'PREVIOUS'
       ) {
+        // Optimistic UI update for Play/Pause
+        if (command === 'PLAY') {
+          setOptimisticIsPlaying(true)
+        } else if (command === 'PAUSE') {
+          setOptimisticIsPlaying(false)
+        }
+
+        // Clear existing timer if any
+        if (playbackGraceTimerRef.current) {
+          clearTimeout(playbackGraceTimerRef.current)
+        }
+
+        playbackGraceTimerRef.current = setTimeout(() => {
+          setOptimisticIsPlaying(null)
+          playbackGraceTimerRef.current = null
+        }, 2500)
+
         sendSpotifyCommand(command)
       }
     },
     [sendSpotifyCommand]
   )
 
+  // Cleanup timers on unmount
+  useEffect(() => {
+    return () => {
+      if (playbackGraceTimerRef.current) {
+        clearTimeout(playbackGraceTimerRef.current)
+      }
+    }
+  }, [])
+
   const handleVolumeChange = useCallback(
     (val: number) => {
       setIsSliding(true)
@@ -315,7 +345,11 @@ const SpotifyControls = () => {
             </Box>
 
             <PlaybackControls
-              isPlaying={spotifyData.playback.is_playing}
+              isPlaying={
+                optimisticIsPlaying !== null
+                  ? optimisticIsPlaying
+                  : spotifyData.playback.is_playing
+              }
               onCommand={handlePlaybackCommand}
               disabled={connectionStatus !== 'Connected'}
             />

constants/bluetooth.ts

@@ -21,7 +21,12 @@ export const MISSED_PACKET_THRESHOLD_BUFFER_MS = 500
 /**
  * Minimum threshold for the watchdog to trigger a missed packet update.
  */
-export const MIN_MISSED_PACKET_THRESHOLD_MS = 1500
+export const MIN_MISSED_PACKET_THRESHOLD_MS = 2000
+
+/**
+ * Total time with no data (in ms) before forcing a reconnect.
+ */
+export const DATA_LIVENESS_TIMEOUT_MS = 30000
 
 /**
  * How many packets to keep in the rolling average history.

constants/spotify.ts

@@ -8,5 +8,5 @@ export const HRM_WEB_PLAYER_NAME = 'HRM Web Player'
 export const SPOTIFY_DEFAULT_TOKEN_EXPIRY_S = 3600
 
 // Centralized constants for Spotify integration
-export const VOLUME_SYNC_GRACE_PERIOD_MS = 600
+export const VOLUME_SYNC_GRACE_PERIOD_MS = 3000
 export const SPOTIFY_BRAND_COLOR = '#1DB954'

context/UserSettingsContext.tsx

@@ -2,6 +2,7 @@
 import React, { createContext, useContext, useEffect } from 'react'
 import usePersistentStorage from '../hooks/usePersistentStorage'
 import { MeasurementSystem, Gender } from '../types/core'
+import isEqual from 'lodash/isEqual'
 
 // Directly define the preferences interface and defaults here
 export interface UserPreferences {
@@ -54,7 +55,24 @@ export const migratePreferences = (stored: unknown): UserPreferences => {
       storedVal !== null &&
       (isTypeMatch || isNullableField)
     ) {
-      ;(acc as Record<string, unknown>)[k] = storedVal
+      let valueToStore = storedVal
+      // Ensure numeric fields are actually numbers
+      const numericFields: Array<keyof UserPreferences> = [
+        'userAge',
+        'userWeight',
+        'userHeight',
+      ]
+      if (
+        numericFields.includes(k) &&
+        typeof storedVal === 'string' &&
+        storedVal !== ''
+      ) {
+        const num = parseFloat(storedVal)
+        if (!isNaN(num)) {
+          valueToStore = num
+        }
+      }
+      ;(acc as Record<string, unknown>)[k] = valueToStore
     }
     return acc
   }, {} as Partial<UserPreferences>)
@@ -84,8 +102,7 @@ export const UserSettingsProvider: React.FC<{ children: React.ReactNode }> = ({
 
   useEffect(() => {
     const migrated = migratePreferences(userPreferences)
-    // Use JSON.stringify for comparison to avoid deep equal dependency
-    if (JSON.stringify(migrated) !== JSON.stringify(userPreferences)) {
+    if (!isEqual(migrated, userPreferences)) {
       setUserPreferences(migrated)
     }
   }, [userPreferences, setUserPreferences])

hooks/useBluetoothHRM.ts

@@ -21,6 +21,7 @@ import {
   MISSED_PACKET_THRESHOLD_BUFFER_MS,
   MIN_MISSED_PACKET_THRESHOLD_MS,
   ROLLING_AVG_HISTORY_LENGTH,
+  DATA_LIVENESS_TIMEOUT_MS,
 } from '@/constants/bluetooth'
 
 const HR_SERVICE_UUID = 'heart_rate'
@@ -61,7 +62,7 @@ interface UseBluetoothHRMProps {
 
 const useBluetoothHRM = (props: UseBluetoothHRMProps = {}) => {
   const {
-    dataLivenessTimeoutMs = 10000,
+    dataLivenessTimeoutMs = DATA_LIVENESS_TIMEOUT_MS,
     userName,
     userAge,
     onHeartRateUpdate,
@@ -221,6 +222,15 @@ const useBluetoothHRM = (props: UseBluetoothHRMProps = {}) => {
           const timeSinceLastData = Date.now() - lastDataTime.current
 
           if (timeSinceLastData > dataLivenessTimeoutMs) {
+            // Fix Race Condition: Don't force a disconnect/reconnect if we are already in a connection state transition
+            if (isConnecting.current) {
+              logger.warn(
+                { timeSinceLastData },
+                'Watchdog: Connection is in progress. Skipping forced disconnect.'
+              )
+              return
+            }
+
             setStatus(BluetoothConnectionStatus.RECONNECTING)
             setCustomStatusMessage(BLUETOOTH_MESSAGES.unstableConnection)
             isTimeoutDisconnect.current = true

hooks/usePersistentStorage.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import Cookies from 'js-cookie'
+import isEqual from 'lodash/isEqual'
 
 let isLocalStorageAvailable: boolean | null = null
 
@@ -37,73 +38,73 @@ function usePersistentStorage<T>(
 ) {
   const { enableCookieFallback = false } = options
 
-  // Read value once during initialization
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === 'undefined') return initialValue
+  // Initialize state with initialValue to avoid hydration mismatches.
+  // The actual stored value will be loaded in a useEffect after mounting.
+  const [storedValue, setStoredValue] = useState<T>(initialValue)
 
-    try {
-      const isLocalAvailable = checkLocalStorage()
-      // Use cookies only if localStorage is unavailable AND fallback is enabled
-      const useCookie = !isLocalAvailable && enableCookieFallback
+  // Use refs to avoid unnecessary re-renders or effect loops
+  const initialValueRef = useRef(initialValue)
+  const keyRef = useRef(key)
+  const isHydrated = useRef(false)
 
-      let item: string | undefined | null = null
+  // Handle hydration and key/initialValue changes
+  useEffect(() => {
+    const isLocalAvailable = checkLocalStorage()
+    const useCookie = !isLocalAvailable && enableCookieFallback
 
-      if (isLocalAvailable) {
-        item = window.localStorage.getItem(key)
-      } else if (useCookie) {
-        item = Cookies.get(key)
-      }
+    const loadFromStorage = () => {
+      try {
+        let item: string | undefined | null = null
+        if (isLocalAvailable) {
+          item = window.localStorage.getItem(key)
+        } else if (useCookie) {
+          item = Cookies.get(key)
+        }
 
-      if (item) {
-        const parsed = JSON.parse(item)
+        if (item) {
+          const parsed = JSON.parse(item)
+          let valueToUse = parsed
 
-        if (isPlainObject(parsed) && isPlainObject(initialValue)) {
-          const merged = { ...initialValue, ...parsed } as T
-          // Sync merged value back to storage if using localStorage
-          if (isLocalAvailable) {
-            window.localStorage.setItem(key, JSON.stringify(merged))
+          if (isPlainObject(parsed) && isPlainObject(initialValue)) {
+            const merged = { ...initialValue, ...parsed } as T
+            valueToUse = merged
+
+            if (isLocalAvailable) {
+              window.localStorage.setItem(key, JSON.stringify(merged))
+            }
           }
-          return merged
+
+          setStoredValue((current) => {
+            if (!isEqual(valueToUse, current)) {
+              return valueToUse
+            }
+            return current
+          })
         }
-        return parsed
+      } catch (error) {
+        console.error(
+          `Error reading or parsing persistent storage key “${key}”`,
+          error
+        )
       }
-    } catch (error) {
-      console.error(
-        `Error reading or parsing persistent storage key “${key}”`,
-        error
-      )
     }
-    return initialValue
-  })
-
-  // Use refs to avoid unnecessary re-renders or effect loops
-  const initialValueRef = useRef(initialValue)
-  const keyRef = useRef(key)
-  const isMounted = useRef(false)
 
-  // Handle key changes or external initialValue changes
-  useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true
+    if (!isHydrated.current) {
+      isHydrated.current = true
+      loadFromStorage()
       return
     }
 
     // Only run if key changed OR initialValue changed significantly
     const keyChanged = keyRef.current !== key
-    const initialValueChanged =
-      JSON.stringify(initialValueRef.current) !== JSON.stringify(initialValue)
+    const initialValueChanged = !isEqual(initialValueRef.current, initialValue)
 
-    if (!keyChanged && !initialValueChanged) return
+    if (keyChanged || initialValueChanged) {
+      keyRef.current = key
+      initialValueRef.current = initialValue
 
-    keyRef.current = key
-    initialValueRef.current = initialValue
-
-    if (typeof window === 'undefined') return
-
-    try {
       const isLocalAvailable = checkLocalStorage()
       const useCookie = !isLocalAvailable && enableCookieFallback
-
       let item: string | undefined | null = null
 
       if (isLocalAvailable) {
@@ -113,39 +114,12 @@ function usePersistentStorage<T>(
       }
 
       if (item) {
-        const parsed = JSON.parse(item)
-        let valueToUse = parsed
-
-        if (isPlainObject(parsed) && isPlainObject(initialValue)) {
-          const merged = { ...initialValue, ...parsed } as T
-          valueToUse = merged
-
-          if (isLocalAvailable) {
-            window.localStorage.setItem(key, JSON.stringify(merged))
-          }
-        }
-
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setStoredValue((current) => {
-          if (JSON.stringify(valueToUse) !== JSON.stringify(current)) {
-            return valueToUse
-          }
-          return current
-        })
+        loadFromStorage()
       } else {
-        // If no item in storage, use initialValue
-        setStoredValue((current) => {
-          if (JSON.stringify(initialValue) !== JSON.stringify(current)) {
-            return initialValue
-          }
-          return current
-        })
+        // Safe to call setStoredValue here because the effect body executes once when dependencies change
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setStoredValue(initialValue)
       }
-    } catch (error) {
-      console.error(
-        `Error reading or parsing persistent storage key “${key}”`,
-        error
-      )
     }
   }, [key, initialValue, enableCookieFallback])
 
@@ -192,7 +166,7 @@ function usePersistentStorage<T>(
         try {
           const parsed = JSON.parse(e.newValue)
           setStoredValue((current) => {
-            if (JSON.stringify(parsed) !== JSON.stringify(current)) {
+            if (!isEqual(parsed, current)) {
               return parsed
             }
             return current

package.json

@@ -74,12 +74,14 @@
     "@mui/material": "^7.3.8",
     "@mui/material-nextjs": "^7.3.8",
     "@spotify/web-api-ts-sdk": "^1.2.0",
+    "@types/lodash": "^4.17.24",
     "express": "^5.2.1",
     "express-rate-limit": "^8.2.1",
     "framer-motion": "^12.29.2",
     "he": "^1.2.0",
     "idb": "^8.0.3",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.23",
     "lodash.throttle": "^4.1.1",
     "next": "16.1.6",
     "next-auth": "^4.24.13",