YouTube playlists

[shakeelmohamed]

Things to investigate:

• What does a playlist URL look like?
• What does an embedded playlist look like?
• How does the YouTube iframe API work w/ playlists?

If anyone works on this, I suggest starting by adding an autoplay queue (when enabled). This will establish how playlists are viewed.
Related: does a newer version of the plyr library already support playlists? If so, can we lift it?

[shakeelmohamed]

This will be non-trivial: http://stackoverflow.com/questions/23286808/youtube-iframe-api-fails-load-or-cue-playlist

[apoorvnandan]

Playlist URL for Billboard Top Songs 2016 is https://www.youtube.com/watch?v=HL1UzIK-flA&list=PL55713C70BA91BD6E

We can load playlists using the YouTube API with the function loadPlaylist like this
player.loadPlaylist({'list':'PLV74gdMl9L6V3OLsFvRMbf85uys4jOGVy'});

This makes the playlist appear as a sidebar. The sidebar slides out from the left on clicking a button at the top-left corner of the player. It then looks like this:

Since we have the player hidden by default, we can display our own list as we can get the data of the youtube videos in the playlist using the URL and YouTube API in JSON format from GET https://www.googleapis.com/youtube/v3/playlistItems

How does this sound? I will implement the list and post screenshots.

Note: If, in future, we start using audio.js or plyr, the display of the list will be handled by them.

[monicacheung]

I think it's 100% we are going to use plyr. We have a PR for incorporating plyr.

[shakeelmohamed]

@apoorvnandan This sounds like a great approach!

We're currently working on getting plyr support in #153.
Do you want to start with mocking up the design for how playlists might look?
Ideally this work will start after #153 is merged

[apoorvnandan]

I'll start with some mocks till #153 gets merged. From what I read on plyr's documentation, playlists is in the "planned development" section so we will have to display our own list.
I was thinking of something simple and similar to audio.js playlists:

[shakeelmohamed]

@apoorvnandan We might start by adding playlist support to Plyr, then work on integrating playlist functionality here once #153 is done. Does that make sense?

Ping @sampotts: what's your take on this? What can we do to help move sampotts/plyr#3 along?

[apoorvnandan]

Yeah that makes sense. I would like to help in adding playlist support to Plyr too.

[shakeelmohamed]

When we get around to this, we may want to use OAuth so users can listen to their private playlists (including watch later)

[shakeelmohamed]

FYI @apoorvnandan we've added plyr support now. If you're going to do this, don't worry about the UI at all. Leave a comment on the plyr issue as well when/if you start on this: sampotts/plyr#3

[apoorvnandan]

The plyr player looks great. I have my final exams going on so I'll start the work after four days.