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?

[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 https://github.com/Selz/plyr/issues/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: https://github.com/Selz/plyr/issues/3

[apoorvnandan]

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

[shakeelmohamed]

@apoorvnandan sounds like a plan, good luck with exams!

[shakeelmohamed]

@apoorvnandan are you still interested in doing this? 😃

[apoorvnandan]

Yes, I'm interested! :) Are we making our own playlists using plyr or working on the plyr issue (Selz/plyr#3) first? Because it seemed to me they were working on optimizing the player by enabling it to break a video into multiple short videos and playing them smoothly one after the other without the user noticing whereas we were about to provide support for youtube playlist urls and embed some playlist functionality, so maybe we don't need to worry about the memory problems discussed there. We can simply load the next song after the current one has ended as is done in youtube playlists.

[shakeelmohamed]

@apoorvnandan I see. maybe we should implement it without Plyr. We might be waiting for a very long time otherwise.

We can simply load the next song after the current one has ended as is done in youtube playlists.

I think this should be an option, not sure what the right default value would be. This is basically just the native autoplay feature for YouTube. I'm curious if it "just works" if we call loadPlaylist on the YouTube iFrame API directly - might be worth trying out

[apoorvnandan]

I'll check it out and see if it works.

[apoorvnandan]

Are there some restrictions associated with our Youtube API Key? When I attempt to get the list of playlist items using GET https://www.googleapis.com/youtube/v3/playlistItems?key=AIzaSyCxVxsC5k46b8I-CLXlF3cZHjpiqP_myVk&part=snippet&id=PLx0sYbCqOb8QTF1DCJVfQrtWknZFzuoAE

I get the following response.

{
 "error": {
  "errors": [
   {
    "domain": "usageLimits",
    "reason": "ipRefererBlocked",
    "message": "The referrer null does not match the referrer restrictions configured on your API key. Please use the API Console to update your key restrictions.",
    "extendedHelp": "https://console.developers.google.com/apis/credentials?project=217347261485"
   }
  ],
  "code": 403,
  "message": "The referrer null does not match the referrer restrictions configured on your API key. Please use the API Console to update your key restrictions."
 }
} 

[shakeelmohamed]

You need to make the request from a web server. If you add a jquery get to everything.js and log the output you can run npm start then look in the browser console.

[shakeelmohamed]

@apoorvnandan ping 😃

[apoorvnandan]

@shakeelmohamed I'm so so sorry for the late response. I actually had the playlist URLs working fine about 2 weeks ago but I did not give an update here as I wanted to check the code for bugs and also clean it up (remove all the console.logs :) ) Shall I open a PR to discuss the changes I have made?

[shakeelmohamed]

Shall I open a PR to discuss the changes I have made?

@apoorvnandan please do!

[k----n]

If anybody is looking to implement this, https://codepen.io/onigetoc/pen/veWNbP is a good starting point for how to load and parse the playlist. I made a PR (#336 ) based on that code, and I think it wouldn't be that hard to also add in playlists to the playlist I created on PR #336 .