Implement Volume Control Consistency (#1541)

feat: Implement Volume Control Consistency

This commit introduces a consistent volume control experience across the application.

Key changes:
- Created a new presentational `VolumeSlider` component with mute functionality.
- Refactored `SpotifyDisplay.tsx` to use the new `VolumeSlider` and synchronize its state with real-time `spotifyData` from the WebSocket.
- Refactored `app/client/spotify-selection/page.tsx` to use the new `VolumeSlider` and the `useVolumePreference` hook.
- Refactored `app/client/control/components/SpotifyControls.tsx` to use the new `VolumeSlider`.
- Implemented debouncing for all `SET_VOLUME` commands to prevent API flooding.
- Removed the old `VolumeControl.tsx` component and its associated test file.
- Fixed all related unit tests and build errors.

I was unable to complete the frontend verification step due to issues with the Playwright script and the test environment's authentication. The script was unable to trigger the necessary state to render the volume controls. The core functionality is implemented and unit tested.

feat: Address PR feedback for volume control consistency

This commit addresses the feedback from the pull request review for the volume control consistency feature.

Key changes:
- Fixed the missing debounce on the `/client/control` page by implementing a debounced `sendVolumeCommand` in `SpotifyControls.tsx`.
- Improved the accessibility and responsiveness of the `VolumeSlider.tsx` component by replacing `aria-labelledby` with a direct `aria-label` and using a flexible width.
- Added the missing export for the new `VolumeSlider.tsx` component to `components/index.ts`.
- Added a new unit test file for `VolumeSlider.tsx` to verify its rendering, props, and interactions.
- Resolved all build errors and ensured all unit tests are passing.

Frontend verification was attempted but not completed due to issues with the test environment's WebSocket connection. The core functionality has been implemented and unit tested.

fix: Address PR feedback and fix linting errors

This commit addresses the feedback from the pull request review for the volume control consistency feature, and also fixes all linting errors.

Key changes:
- Fixed the missing debounce on the `/client/control` page by implementing a debounced `sendVolumeCommand` in `SpotifyControls.tsx`.
- Improved the accessibility and responsiveness of the `VolumeSlider.tsx` component by replacing `aria-labelledby` with a direct `aria-label` and using a flexible width.
- Added the missing export for the new `VolumeSlider.tsx` component to `components/index.ts`.
- Added a new unit test file for `VolumeSlider.tsx` to verify its rendering, props, and interactions.
- Resolved all build errors and ensured all unit tests are passing.
- Fixed all linting errors by running `pnpm run lint:fix`.

fix: Address final PR feedback and remove extraneous file

This commit addresses the final feedback from the pull request review for the volume control consistency feature.

Key changes:
- Removed the extraneous `hrm@0.10.0` file.
- All previous feedback has been addressed, including debouncing, accessibility, responsiveness, unit tests, and linting.

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

Author: google-labs-jules[bot]

app/client/control/components/SpotifyControls.tsx

@@ -1,8 +1,6 @@
 // File: app/client/control/components/SpotifyControls.tsx
 'use client'
 import MusicNote from '@mui/icons-material/MusicNote'
-import VolumeOff from '@mui/icons-material/VolumeOff'
-import VolumeUp from '@mui/icons-material/VolumeUp'
 import LibraryMusic from '@mui/icons-material/LibraryMusic'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
@@ -11,16 +9,14 @@ import CardContent from '@mui/material/CardContent'
 import FormControl from '@mui/material/FormControl'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
-import Slider from '@mui/material/Slider'
-import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import IconButton from '@mui/material/IconButton'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import useVolumePreference, { clampVolume } from '@/hooks/useVolumePreference'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { SpotifyCommand, SpotifyCommandMessage } from '@/types/websocket'
 import PlaybackControls from './PlaybackControls'
+import VolumeSlider from '@/components/Spotify/VolumeSlider'
 
 const SpotifyControls = () => {
   const router = useRouter()
@@ -30,7 +26,6 @@ const SpotifyControls = () => {
   const { volume, setVolume, muted, toggleMute } = useVolumePreference()
   const lastSentVolumeRef = useRef<string | null>(null)
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
-  const [isDragging, setIsDragging] = useState(false)
   const prevActiveIdRef = useRef<string | undefined>(undefined)
 
   const handleBrowseClick = () => {
@@ -77,11 +72,7 @@ const SpotifyControls = () => {
     prevActiveIdRef.current = activeId
 
     // Sync Volume (if not dragging)
-    if (
-      !isDragging &&
-      activeDevice &&
-      typeof activeDevice.volume_percent === 'number'
-    ) {
+    if (activeDevice && typeof activeDevice.volume_percent === 'number') {
       if (activeDevice.volume_percent !== volume) {
         setVolume(activeDevice.volume_percent)
       }
@@ -154,14 +145,32 @@ const SpotifyControls = () => {
     [connectionStatus, resolveTargetDeviceId, sendData]
   )
 
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useEffect(() => {
     if (connectionStatus !== 'Connected') {
       lastSentVolumeRef.current = null
     }
   }, [connectionStatus])
 
   useEffect(() => {
-    sendVolumeCommand(volume)
+    // Clear any existing timer
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+
+    // Set a new timer to send the volume command after 300ms
+    debounceTimeoutRef.current = setTimeout(() => {
+      sendVolumeCommand(volume)
+    }, 300)
+
+    // Cleanup function to clear the timeout if the component unmounts
+    // or if the volume changes again before the timeout has passed
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+    }
   }, [volume, sendVolumeCommand])
 
   return (
@@ -208,41 +217,13 @@ const SpotifyControls = () => {
               disabled={connectionStatus !== 'Connected'}
             />
 
-            <Stack direction="row" spacing={1} alignItems="center">
-              <IconButton
-                onClick={toggleMute}
-                aria-label={muted ? 'Unmute volume' : 'Mute volume'}
-                size="small"
-                sx={{ color: 'grey.400' }}
-              >
-                {muted ? <VolumeOff /> : <VolumeUp />}
-              </IconButton>
-              <Slider
-                aria-label="Volume control"
-                value={volume}
-                onChange={(_, val) => {
-                  setIsDragging(true)
-                  setVolume(val as number)
-                }}
-                onChangeCommitted={(_, val) => {
-                  setIsDragging(false)
-                  sendVolumeCommand(val as number)
-                }}
-                min={0}
-                max={100}
-                size="small"
-                sx={{
-                  color: '#1DB954',
-                  '& .MuiSlider-thumb': { backgroundColor: 'white' },
-                }}
-              />
-              <Typography
-                variant="caption"
-                sx={{ color: 'grey.400', minWidth: '3ch' }}
-              >
-                {volume}
-              </Typography>
-            </Stack>
+            <VolumeSlider
+              volume={volume}
+              muted={muted}
+              onVolumeChange={setVolume}
+              onToggleMute={toggleMute}
+            />
+
             {devices.length > 0 && (
               <Box sx={{ mt: 2 }}>
                 <Typography variant="body2" sx={{ color: 'grey.400', mb: 1 }}>

app/client/spotify-selection/page.tsx

@@ -14,8 +14,8 @@ import Skeleton from '@mui/material/Skeleton'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import dynamic from 'next/dynamic'
-import { useEffect, useState } from 'react'
-import VolumeControl from '../../../components/Spotify/VolumeControl' // I will recreate this temporarily
+import { useEffect, useState, useRef } from 'react'
+import VolumeSlider from '../../../components/Spotify/VolumeSlider'
 import useVolumePreference from '../../../hooks/useVolumePreference'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { SpotifyCommandMessage } from '../../../types/websocket'
@@ -74,7 +74,8 @@ const SpotifySelectionPage = () => {
       setSelectedDeviceId('')
     }
   }, [availableDevices, selectedDeviceId])
-  const { volume, setVolume } = useVolumePreference()
+  const { volume, setVolume, muted, toggleMute } = useVolumePreference()
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const handlePlaylistSelected = (uri: string) => {
     setSelectedPlaylistUri(uri)
@@ -197,13 +198,21 @@ const SpotifySelectionPage = () => {
                 Next
               </Button>
             </Stack>
-            <VolumeControl
+            <VolumeSlider
               volume={volume}
-              onVolumeChange={setVolume}
-              onVolumeChangeCommitted={(newVolume) =>
-                hasActiveDevice &&
-                sendSpotifyCommand('SET_VOLUME', { volume: newVolume })
-              }
+              muted={muted}
+              onVolumeChange={(newVolume) => {
+                setVolume(newVolume)
+                if (debounceTimeoutRef.current) {
+                  clearTimeout(debounceTimeoutRef.current)
+                }
+                debounceTimeoutRef.current = setTimeout(() => {
+                  if (hasActiveDevice) {
+                    sendSpotifyCommand('SET_VOLUME', { volume: newVolume })
+                  }
+                }, 300)
+              }}
+              onToggleMute={toggleMute}
             />
             {/* Device dropdown */}
             {availableDevices.length > 0 && (

components/Spotify/VolumeControl.tsx

@@ -0,0 +1,55 @@
+// components/Spotify/VolumeSlider.tsx
+import React from 'react'
+import { IconButton, Slider, Stack, Typography } from '@mui/material'
+import { VolumeUp, VolumeOff } from '@mui/icons-material'
+
+interface VolumeSliderProps {
+  volume: number
+  muted: boolean
+  onVolumeChange: (volume: number) => void
+  onToggleMute: () => void
+  showValue?: boolean
+}
+
+const VolumeSlider: React.FC<VolumeSliderProps> = ({
+  volume,
+  muted,
+  onVolumeChange,
+  onToggleMute,
+  showValue = true,
+}) => {
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      alignItems="center"
+      sx={{ flexGrow: 1, minWidth: 150 }}
+    >
+      <IconButton
+        onClick={onToggleMute}
+        size="small"
+        aria-label={muted ? 'Unmute volume' : 'Mute volume'}
+      >
+        {muted || volume === 0 ? <VolumeOff /> : <VolumeUp />}
+      </IconButton>
+      <Slider
+        value={muted ? 0 : volume}
+        onChange={(_, val) => onVolumeChange(val as number)}
+        min={0}
+        max={100}
+        size="small"
+        aria-label="Volume control"
+      />
+      {showValue && (
+        <Typography
+          variant="caption"
+          sx={{ minWidth: '3ch', textAlign: 'right' }}
+        >
+          {muted ? '0' : volume}
+        </Typography>
+      )}
+    </Stack>
+  )
+}
+
+export default VolumeSlider