Closes #229, add Youtube playlist for ZAP #247
Conversation
…osing playlist ID
Add soem constants to avoid hard-conding
When the user deletes the playlist of Zap, a new one gets created.
Fetch videos from the playlist and fill the html queue div Add some styling Allow the user to delete video from the queue instantaly
… the one which adds new videos to the list) into one function to reduce requests
| <script src="bower_components/plyr/dist/plyr.js"></script> | ||
|
|
||
| <script src="js/api.js"></script> |
There was a problem hiding this comment.
This file isn't checked in
There was a problem hiding this comment.
Sry about that, just checked it in.
There was a problem hiding this comment.
Any clues on how to get rid of this error (which occurs when including this js file or https://apis.google.com/js/api.js?onload=handleClientLoad)
1) should have required HTML elements !?
There was a problem hiding this comment.
Well, I think I've figured out the problem 😩. The Google Client ID configurations allow requests from certain domains only, the authentication request has to come from one of these domains only, the test uses file:// protocol, which in turn gets rejected from Google and Zombie receives 400 bad request response.
To bypass this error, I replaced this line:
var indexHTMLURL = "file://" + path.join(__dirname, "..", "index.html");
by
var indexHTMLURL = "http://localhost/open-source/zen-audio-player.github.io/index.html";
in test/index.js
But now after this error is bypassed, another error appears 😫. The empty search form check, which applies a submit button press and waits for the local site test error message. Due to using the HTTP protocol, the function isFileProtocol will return false which won't show the error message local site test, thus the assert fails. I hope I didn't miss anything and I think it makes sense now 😄
** To solve both issues I restricted Google API calls to http only and kept the indexHTMLURL to the original one...
Use google's api.js
|
@hemoali please resolve the merge conflicts |
|
Closing due to inactivity |
Closes #229
This pull request contains the required modifications to allow the users to have some kind of history playlist stored in their Youtube account. This playlist is also displayed on the website page, which allows for quick access to Zen Audio Player Youtube playlist.
Types of changes
What types of changes does your code introduce? Check all the boxes that apply:
Description
The website has a new button named Sign in which allows the user to sign in using his Google account (via OAuth2), after that a new playlist gets added to his account named "Zen Audio Player". When the user uses ZAP to play any video it gets added automatically to the playlist.
New HTML component has also been added to the main page, it's just a queue that displays the videos in the playlist allowing the user to click on any of these videos to play it, or click the delete icon to remove from the playlist.
Notes
Due to testing purposes I've used my own Youtube API key, you will find this comment
// ToDo: assign to youTubeDataApiKeyineverything.js.Also, there's the OAuth2 Client ID, you may need to replace this with a specific one.
For any errors, required features, improvements, improper code style or improper code design please let me know 😃
More to add:
Final checklist:
Go over all the following points and check all the boxes that apply
If you're unsure about any of these, don't hesitate to ask. We're here to help!