search

apollographql / spotify-showcase

A Spotify clone that showcases the Apollo GraphQL platform.
MIT License
127 stars 16 forks source link

Show the currently playing track or podcast episode #18

Closed jerelmiller closed 1 year ago

jerelmiller commented 1 year ago

To really make the demo pop, it would be nice to show the currently playing track or podcast episode. This would include the play/pause button, shuffle, repeat, prev/next, and the progress bar.

We have 2 ways we can accomplish getting the playback state:

  1. Use the web playback SDK

This is Spotify's official SDK for handling real-time playback state. This also registers a device that can be targeted by any Spotify player to play through the app itself. This would make for a nicer UX, but forgoes the change for us to show off the possibility of using Apollo Client for real-time UX using subscriptions.

  1. Build our own subscription that targets the Spotify API to get playback state.

Using our own API would be a great way to show off how to use a websocket connection and subscriptions with Apollo Client, with the expense of the nice UX built into the web playback SDK. This might also not allow us to register the app as a playback target. The API however has all we need to control playback, so this could be a great mechanism to demonstrate subscriptions.

jerelmiller commented 1 year ago

Since this demo is for learning purposes, I opted to build our own subscription API that connects to the app's backend. The backend polls the playing state every second to see if there are updates and pushes changes to the client. While this doesn't allow us to register the app as a play target, I think it will be much better for learning purposes.