Now Playing… pt. 2
Howdy and Happy Friday!
So, last week I created a Spotify clone, if you wanna read about it you can find it here. I left it with the desire to make it more dynamic. So, this week I did just that. Now before I get started yet again I will probably have to break this up into two posts because I did not fully finish incorporating the logic I needed. That being said I’m going to go over how I was able to make the playlist functional.
For starters, I had to create two new action cases in my reducer file. One that was in charge of setting the playing state, in other words the direct function of playing and pausing a song, and another that was going to set the actual item, in this case the song, that was playing.
Next up was setting up the functions to grab the data I needed. I had to make calls to the API to be able to retrieve the current playing track. I had to set it up for both the whole playlist as well as an individual song.
*NOTE* For the individual song I am still having a bug so I won’t post the full code snippet of that section just yet until I have it worked out.
After making the call to the Spotify API with regards to the on repeat playlist (which in the code snippet below is what the context_uri refers to), in my catch I set up my dispatches for setting the state.
To finish setting up this behavior, on the Play button at the top of the playlist, I set an onClick that will trigger the above snippet.
I finally now have it working! However there are still things I need to work on. As mentioned above, I’m having a little trouble with playing an individual song. I believe the mistake is probably coming from the context_uri I used in the fetch call, either I’m using it incorrectly or I misspelled something. I think once that’s fixed any other little bug I have will be fixed because they’re directly tied to it. Aside from that I just need to finish the functionality for the footer play buttons and then add a few extra lines of CSS and I will be done!
