feat(medium): Standardize Spotify track playback command dispatch (#9546)

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/spotify-selection/page.tsx

@@ -43,7 +43,16 @@ const SpotifySelectionPage = () => {
   }
 
   const handlePlaylistPlay = (uri: string) => {
-    executeSpotify('PLAY', { playlistUri: uri })
+    executeSpotify('PLAY', { contextUri: uri })
+  }
+
+  const handleTrackPlay = (index: number) => {
+    if (selectedPlaylistId) {
+      executeSpotify('PLAY', {
+        contextUri: `spotify:playlist:${selectedPlaylistId}`,
+        offset: { position: index },
+      })
+    }
   }
 
   return (
@@ -87,7 +96,7 @@ const SpotifySelectionPage = () => {
       {selectedPlaylistId && (
         <PlaylistDetails
           playlistId={selectedPlaylistId}
-          onTrackPlay={handlePlaylistPlay}
+          onTrackPlay={handleTrackPlay}
         />
       )}
     </Container>

components/Playlist/PlaylistTracksDisplay.tsx

@@ -150,7 +150,7 @@ const PlaylistTracksDisplay = ({ playlistId }: PlaylistTracksDisplayProps) => {
                       onClick={() =>
                         isPlaying
                           ? handlePause()
-                          : handlePlayTrack(playlistUri, index)
+                          : handlePlayTrack(playlistUri, offset + index)
                       }
                       aria-label={isPlaying ? 'Pause' : 'Play'}
                     >

components/Spotify/PlaylistDetails.tsx

@@ -14,7 +14,7 @@ import { SpotifyPlaylistItem as Track } from '../../types/core'
 
 interface PlaylistDetailsProps {
   playlistId: string
-  onTrackPlay: (trackUri: string) => void
+  onTrackPlay: (index: number) => void
 }
 
 const PlaylistDetails: React.FC<PlaylistDetailsProps> = ({
@@ -104,7 +104,7 @@ const PlaylistDetails: React.FC<PlaylistDetailsProps> = ({
           <List dense>
             {tracks.map((track, index) => (
               <ListItem key={`${track.id}-${index}`} divider disablePadding>
-                <ListItemButton onClick={() => onTrackPlay(track.uri)}>
+                <ListItemButton onClick={() => onTrackPlay(index)}>
                   <MusicNote
                     sx={{ mr: 1.5, color: 'text.secondary', fontSize: 20 }}
                   />

services/spotifyPlayerManager.ts

@@ -158,7 +158,7 @@ export class SpotifyPlayerManager {
     command: SpotifyCommand,
     params: SpotifyCommandParameters
   ) {
-    const { deviceId, volume, playlistUri, contextUri, uri } = params
+    const { deviceId, volume, playlistUri, contextUri, uri, offset } = params
     const effectiveContextUri = contextUri || playlistUri
     const sdk = this.sdk
 
@@ -171,18 +171,26 @@ export class SpotifyPlayerManager {
               return sdk.player.startResumePlayback(
                 deviceId as string,
                 undefined,
-                [uri]
+                [uri],
+                offset
               )
             }
             if (effectiveContextUri) {
               return sdk.player.startResumePlayback(
                 deviceId as string,
-                effectiveContextUri
+                effectiveContextUri,
+                undefined,
+                offset
               )
             }
             return sdk.player.startResumePlayback(deviceId as string)
           },
-          { deviceId, contextUri: effectiveContextUri, uri }
+          {
+            deviceId,
+            contextUri: effectiveContextUri,
+            uri,
+            offset: offset?.position,
+          }
         )
         break
       case 'PAUSE':

tests/unit/app/client/spotify-selection/page.test.tsx

@@ -114,7 +114,7 @@ describe('SpotifySelectionPage', () => {
     fireEvent.click(playButton)
 
     expect(executeMock).toHaveBeenCalledWith('PLAY', {
-      playlistUri: 'spotify:playlist:mock1',
+      contextUri: 'spotify:playlist:mock1',
     })
   })
 })

tests/unit/components/Spotify/PlaylistDetails.test.tsx

@@ -85,7 +85,7 @@ describe('PlaylistDetails', () => {
     ).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('Track 1'))
-    expect(onTrackPlay).toHaveBeenCalledWith('spotify:track:1')
+    expect(onTrackPlay).toHaveBeenCalledWith(0)
   })
 
   it('displays the track list and handles play clicks when artists is a string', async () => {
@@ -114,7 +114,7 @@ describe('PlaylistDetails', () => {
     ).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('Track 1'))
-    expect(onTrackPlay).toHaveBeenCalledWith('spotify:track:1')
+    expect(onTrackPlay).toHaveBeenCalledWith(0)
   })
 
   it('displays an error message when the API call fails', async () => {

tests/unit/spotifyPolling.test.ts

@@ -222,7 +222,9 @@ describe('SpotifyPolling Service', () => {
       await spotifyService.handleCommand('PLAY', { playlistUri })
       expect(mockPlayer.startResumePlayback).toHaveBeenCalledWith(
         undefined,
-        playlistUri
+        playlistUri,
+        undefined,
+        undefined
       )
     })
 
@@ -231,7 +233,9 @@ describe('SpotifyPolling Service', () => {
       await spotifyService.handleCommand('PLAY', { contextUri })
       expect(mockPlayer.startResumePlayback).toHaveBeenCalledWith(
         undefined,
-        contextUri
+        contextUri,
+        undefined,
+        undefined
       )
     })
 
@@ -241,7 +245,9 @@ describe('SpotifyPolling Service', () => {
       await spotifyService.handleCommand('PLAY', { contextUri, playlistUri })
       expect(mockPlayer.startResumePlayback).toHaveBeenCalledWith(
         undefined,
-        contextUri
+        contextUri,
+        undefined,
+        undefined
       )
     })
   })

types/core.ts

@@ -232,6 +232,7 @@ export interface SpotifyCommandParameters {
   playlistUri?: string
   contextUri?: string
   uri?: string
+  offset?: { position: number }
 }
 
 /**

utils/socketManager.ts

@@ -435,6 +435,7 @@ const handleIncomingMessage = (
           playlistUri?: string
           contextUri?: string
           uri?: string
+          offset?: { position: number }
         } = {}
         if (commandMsg.deviceId)
           spotifyCommandParams.deviceId = commandMsg.deviceId
@@ -445,6 +446,7 @@ const handleIncomingMessage = (
         if (commandMsg.contextUri)
           spotifyCommandParams.contextUri = commandMsg.contextUri
         if (commandMsg.uri) spotifyCommandParams.uri = commandMsg.uri
+        if (commandMsg.offset) spotifyCommandParams.offset = commandMsg.offset
 
         spotifyService.handleCommand(commandMsg.command, spotifyCommandParams)
         break