Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closes #229, add Youtube playlist for ZAP #247

Closed
wants to merge 18 commits into from
Closed

Closes #229, add Youtube playlist for ZAP #247

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
448f622
Add Zen Audio Player YouTube private playlist under the user authenti…
i-radwan Oct 11, 2016
49c4a99
Add videos to playlists if they don't exist
i-radwan Oct 12, 2016
7526e02
Reuse already made Zap playlist instead of creating one in case of lo…
i-radwan Oct 12, 2016
9b3b3bb
Fix some styling
i-radwan Oct 15, 2016
05910d9
Handle remote Zap playlist delete.
i-radwan Jan 25, 2017
aea5ea2
Add queue div to html file which will display user videos
i-radwan Jan 30, 2017
267aa94
Confirm before deleting from zap plylist videos queue
i-radwan Jan 30, 2017
a44e831
Fix style.css formatting
i-radwan Jan 30, 2017
17c2d45
Style everything.js
i-radwan Jan 30, 2017
9703ecf
add comments for keys
i-radwan Jan 30, 2017
f3bef03
Replace rgba with rgb
i-radwan Jan 30, 2017
655abcf
Merge branch 'master' into master
i-radwan Jan 30, 2017
92e0445
Merge 2 functions (the one which gets the youtube playlist videos and…
i-radwan Jan 30, 2017
aa5f50a
Merge branch 'master' of https://github.com/hemoali/zen-audio-player.…
i-radwan Jan 30, 2017
5ea8b61
Load the playlist queue immediately after signing in
i-radwan Jan 30, 2017
2d8ab2c
Add missing javascript api file
i-radwan Jan 30, 2017
f09ed5d
Remove api.js
i-radwan Jan 31, 2017
7837ba7
Allow Google API calls only on http
i-radwan Jan 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@
<script src="bower_components/urijs/src/URI.min.js"></script>
<script src="js/zap-common.js"></script>
<script src="js/everything.js"></script>
<script src="https://apis.google.com/js/api.js?onload=handleClientLoad"></script>

<script src="bower_components/plyr/dist/plyr.js"></script>

<script src="js/api.js"></script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file isn't checked in

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sry about that, just checked it in.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try again

Copy link
Author

@i-radwan i-radwan Jan 30, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 !?

Copy link
Author

@i-radwan i-radwan Jan 31, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

</head>

<body>
Expand Down Expand Up @@ -153,7 +153,8 @@ <h3>Sponsored by:</h3>
"logo": "https://zenplayer.audio/img/zen-audio-player-905.png"
}

</script>
</script>

</body>

</html>
Expand Down
67 changes: 35 additions & 32 deletions js/everything.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -774,40 +774,43 @@ function makeApiCall() {
* It also checks if the current playing video isn't in the Youtube playlist, it calls the fucntion which adds it
*/
function getUserVideosFromZapPlaylist() {
var request = gapi.client.youtube.playlistItems.list({
part: "snippet",
mine: true,
maxResults: 50,
playlistId: localStorage.getItem(LOCALSTORAGE_PLAYLIST_ID_KEY)
});
request.execute(function (response) {
if (response.code === 404) {
// playlist not found
checkIfUserAlreadyHasZapYoutubePlaylist();
}
else {
youtubeVideos = response.items;
if (youtubeVideos.length > 0) {
// Check if current played video not in playlist add it
if (getCurrentVideoID()) {
var doesTheVideoExist = false;
for (var i = 0; i < youtubeVideos.length; i++) {
if (youtubeVideos[i].snippet.resourceId.videoId === currentVideoID) {
doesTheVideoExist = true;
break;
if (localStorage.getItem(LOCALSTORAGE_PLAYLIST_ID_KEY) && !youtubeVideos && !getCurrentSearchQuery()) {
var request = gapi.client.youtube.playlistItems.list({
part: "snippet",
mine: true,
maxResults: 50,
playlistId: localStorage.getItem(LOCALSTORAGE_PLAYLIST_ID_KEY)
});
request.execute(function (response) {
if (response.code === 404) {
// playlist not found
checkIfUserAlreadyHasZapYoutubePlaylist();
}
else {
youtubeVideos = response.items;
if (youtubeVideos.length > 0) {
// Check if current played video not in playlist add it
if (getCurrentVideoID()) {
var doesTheVideoExist = false;
for (var i = 0; i < youtubeVideos.length; i++) {
if (youtubeVideos[i].snippet.resourceId.videoId === currentVideoID) {
doesTheVideoExist = true;
break;
}
}
if (!doesTheVideoExist) {
addVideoToPlaylist(currentVideoID);
}
}
if (!doesTheVideoExist) {
addVideoToPlaylist(currentVideoID);
}
// Add videos to queue
fetchYoutubeVideosIntoQueue();
}
// Add videos to queue
fetchYoutubeVideosIntoQueue();
}
}
});
});
}
}


/**
* This function uses the filled youtubeVideos array and fills the UI videos queue
*/
Expand Down Expand Up @@ -852,10 +855,8 @@ function handleAPILoaded() {
checkIfUserAlreadyHasZapYoutubePlaylist();
}
// Get user videos and store them into array
if (localStorage.getItem(LOCALSTORAGE_PLAYLIST_ID_KEY) && !youtubeVideos && !getCurrentSearchQuery()) {
getUserVideosFromZapPlaylist();
}
else if (getCurrentSearchQuery()) {
getUserVideosFromZapPlaylist();
if (getCurrentSearchQuery()) {
$(".queue").hide(); // Hide queue in case of search keyword exists
}
}
Expand All @@ -877,6 +878,7 @@ function checkIfUserAlreadyHasZapYoutubePlaylist() {
break;
}
}
getUserVideosFromZapPlaylist();
if (!isZenPlaylistFound) {
addNewPlaylistToYoutube();
}
Expand Down Expand Up @@ -904,6 +906,7 @@ function addNewPlaylistToYoutube() {
if (result) { // get and store playlist ID
var playlistId = result.id;
localStorage.setItem(LOCALSTORAGE_PLAYLIST_ID_KEY, playlistId);
getUserVideosFromZapPlaylist();
}
else {
alert("Could not create Zen Audio Player playlist");
Expand Down