Fix: Spotify UI and playback fixes from PR review (#9667)

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/api/spotify/playlists/[playlistId]/tracks/route.ts

@@ -104,6 +104,7 @@ async function getPlaylistTracks(
           images: track.album.images,
         },
         duration_ms: track.duration_ms,
+        duration: track.duration_ms, // Legacy fallback
         uri: track.uri,
       }
     })

components/Spotify/TrackListItem.tsx

@@ -50,6 +50,7 @@ export const TrackListItem: React.FC<TrackListItemProps> = ({
           <Avatar
             variant="rounded"
             src={albumThumbnail}
+            alt={track.name}
             sx={{ width: 32, height: 32 }}
           >
             <MusicNoteIcon fontSize="small" />

tests/unit/app/api/spotify/playlists/[playlistId]/tracks/route.test.ts

@@ -59,6 +59,7 @@ describe('GET /api/spotify/playlists/[playlistId]/tracks', () => {
         name: 'Album 1',
       },
       duration_ms: 180000,
+      duration: 180000,
       uri: 'spotify:track:t1',
     })
   })

types/websocket.ts

@@ -11,6 +11,7 @@ import type {
   SpotifyPlaybackState as SpotifyData, // Single source of truth for playback state
   TimerMode,
   SpotifyCommand,
+  SpotifyCommandParameters,
 } from './core'
 
 // --- WebSocket Connection & Augmentation ---
@@ -153,18 +154,9 @@ export interface TimerConfigMessage {
   restDuration: number
 }
 
-export interface SpotifyCommandMessage {
+export interface SpotifyCommandMessage extends SpotifyCommandParameters {
   type: 'SPOTIFY_COMMAND'
   command: SpotifyCommand
-  deviceId?: string
-  volume?: number
-  playlistUri?: string // Added to support your incoming message
-  contextUri?: string // Generic support for albums/artists
-  uri?: string
-  offset?: {
-    position?: number
-    uri?: string
-  }
 }
 
 interface GetStateMessage {
@@ -256,7 +248,8 @@ const SpotifyCommandMessageSchema = z.object({
   uri: z.string().optional(),
   offset: z
     .object({
-      position: z.number(),
+      position: z.number().optional(),
+      uri: z.string().optional(),
     })
     .optional(),
 })