Real-Time Playback for external clients

[leolabs]

By Twitter user @theHuzz:

Any thoughts on real time playback for those not at the party venue?

[NeoLegends]

Good ol' slave mode

[leolabs]

Yeah, we had that in v1 for Mac a long time ago 😄

I liked it, and I think it shouldn't be too difficult to implement.

[robhuzzey]

I was just taking a look at this & was wondering if this should be a feature on by default as in when a person joins the party it automatically jumps to the current position in the playing track or should it be an option?

[robhuzzey]

I think I need some example configs in order to run this locally. I've figured out I need a firebase app & the config for that, as well as a Sentry account & a spotify API key... I am however quite stuck on the TOKEN_EXCHANGE_URL in the spotify config.

So I think adding this to thing adding this info to the README would be really useful... I'm keen to help out once over this hurdle :)

Thanks.

[NeoLegends]

Hey @robhuzzey,

I‘ll refer you to #137 in that I‘ll add build instructions to the readme shortly. :)

For the moment you can also use the endpoints from live Festify. Just go to the page with a clean cache, open dev tools, login to Spotify, and note down the endpoints with something like „google cloud functions“ in their name. You‘ll be able to see which is which by looking at the URL. :)

[NeoLegends]

You can also use the cloud function URLs you get when you deploy the project to firebase.

[NeoLegends]

And you need an API key from fanart.tv in order to get the background images in TV mode. :)

[robhuzzey]

Thanks @NeoLegends I've managed to hack it together so far... I'm a little lost as to the place to add this feature in right now... just familiarising myself with the app & also typescript ;)

Any pointers would be great as I can add this as a PR as soon as it's working :)

[NeoLegends]

The app uses TypeScript, as you already know, and is built on redux, redux-saga and lit-html. Lit-html is used for rendering while redux and redux-saga manage the business logic of the application. So you should be familiar with those two before you can start working on Festify. :)

The place where you‘ll probably want to start is src/sagas/local-player.ts. It contains the saga managing the local instance of the Spotify Web Playback SDK. The saga there is initialized by the one in src/sagas/party-data.ts. That one is responsible for setting up all the required firebase listeners.

[NeoLegends]

@robhuzzey The readme contains some build instructions now. :)

[robhuzzey]

@NeoLegends thanks. I've made a start & luckily I was in the right place. How do you guys test this stuff? I've only got the one premium spotify account. (I'm thinking that it needs more than one person to test the party works as expected & syncs)

[NeoLegends]

Hmm, last time I checked (long time ago) you could get a one month free premium trial account from Spotify. You could use one of them for testing. Also, once you open the PR we get the chance to test it out with our personal accounts and multiple devices. :)

[robhuzzey]

@NeoLegends nice... ok, once I've finished work I will chuck over for an initial proof of concept... I'm not 100% convinced it should be sync mode by default just yet I may add a little UI in the general settings to toggle it :)

[robhuzzey]

@NeoLegends @leolabs ok guys I've made the PR. I'm not 100% sure it's best as I've not worked with type script before. I've tried to keep to your coding style so just shout if it's way off the mark.

Hope this helps?