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

Youtube Playlist URL support #244

Closed
wants to merge 7 commits into from
Closed

Youtube Playlist URL support #244

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c9a07e6
Merge pull request #1 from zen-audio-player/master
apoorvnandan May 1, 2016
a5b0292
Merge branch 'master' of https://github.com/zen-audio-player/zen-audi…
Jul 31, 2016
2362d30
Playlist URL Support
Sep 16, 2016
630f52f
Playlist URL Support Closes #1
Sep 17, 2016
e3d79a3
Review changes Closes #1
Sep 28, 2016
a2aff5a
Code Cleanup
Sep 30, 2016
ea5d364
code clean up
Oct 1, 2016
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
94 changes: 90 additions & 4 deletions js/everything.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,26 @@ function sendKeenEvent(_msg, _data) {
var plyrPlayer;
var youTubeDataApiKey = "AIzaSyCxVxsC5k46b8I-CLXlF3cZHjpiqP_myVk";
var currentVideoID;
var currentListID;
var currentListIndex;
var listData;
var isPlayingPlaylist = false;

function loadList(listID) {
Copy link
Member

Choose a reason for hiding this comment

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

This is necessarily complicated, let's move this logic to zap-common.js and use the same format as the jQuery HTTP requests.

isPlayingPlaylist = true;
currentListIndex = 0;
getYouTubeListItems(
listID,
youTubeDataApiKey,
function(data){
var firstSongID = data.items[0].snippet.resourceId.videoId;
window.location.href = makeListenURL(firstSongID);
},
function(jqXHR, textStatus, errorThrown) {
logError(jqXHR, textStatus, errorThrown, "Search error");
}
);
}

var errorMessage = {
init: function() {
Expand Down Expand Up @@ -145,6 +165,32 @@ var ZenPlayer = {
// Load video into Plyr player
if (plyrPlayer.plyr) {
var that = this;
plyrPlayer.addEventListener("ended", function(event) {
console.log("ended");
if(window.location.href.indexOf("playlistid=") !== -1) {
currentListIndex = getParameterByName(window.location.search, "playlistindex");
currentListIndex++;
currentListID = getParameterByName(window.location.search, "playlistid");
getYouTubeListItems(
currentListID,
youTubeDataApiKey,
function(listData) {
if(currentListIndex < listData.items.length) {
isPlayingPlaylist = true;
var nextSongID = listData.items[currentListIndex].snippet.resourceId.videoId;
window.location.href = makeListenURL(nextSongID);
}
else {
console.log("playlist ended");
}
},
function(jqXHR, textStatus, errorThrown) {
logError(jqXHR, textStatus, errorThrown, "Search error");
}
);
}
});

plyrPlayer.addEventListener("error", function(event) {
if (event && event.detail && typeof event.detail.code === "number") {
handleYouTubeError(event.detail);
Expand Down Expand Up @@ -377,6 +423,11 @@ function getCurrentVideoID() {
return v;
}

function getCurrentListID() {
var listParam = getParameterByName(window.location.search, "list");
return listParam;
}

function getCurrentTimePosition() {
var t = parseInt(getParameterByName(window.location.search, "t"), 10);
if (t > 0 && t < Number.MAX_VALUE) {
Expand All @@ -402,6 +453,20 @@ function makeListenURL(videoID, videoPosition) {
// Remove any #s which break functionality
url = url.replace("#", "");
url += "?v=" + videoID;
if(isPlayingPlaylist) {
url += "&playlistindex=" + currentListIndex + "&playlistid=" + currentListID;
}
if (videoPosition) {
url += "&t=" + videoPosition;
}
return url;
}

function makeListenListURL(listID, videoPosition) {
var url = removeSearchQueryFromURL(window.location.href);
// Remove any #s which break functionality
url = url.replace("#", "");
url += "?list=" + listID;
if (videoPosition) {
url += "&t=" + videoPosition;
}
Expand Down Expand Up @@ -434,8 +499,16 @@ function wrapParseYouTubeVideoID(url) {
}

var info = parseYoutubeVideoID(url);

if (info.id) {
console.log(info);
if(info.listID) {
currentVideoID = info.id;
currentListID= info.listID;
isPlayingPlaylist = true;
currentListIndex = 0;
ga("send", "event", "video ID format", info.format);
return info.id;
}
else if (info.id) {
currentVideoID = info.id;
ga("send", "event", "video ID format", info.format);
return info.id;
Expand Down Expand Up @@ -476,7 +549,8 @@ $(function() {

// How do we know if the value is truly invalid?
// Preload the form from the URL
var currentVideoID = getCurrentVideoID();
currentVideoID = getCurrentVideoID();
currentListID = getCurrentListID();
if (currentVideoID) {
$("#v").attr("value", currentVideoID);
}
Expand Down Expand Up @@ -557,6 +631,9 @@ $(function() {
if (data.items.length === 0) {
window.location.href = makeSearchURL(formValue);
}
else if(currentListID) {
window.location.href = makeListenListURL(currentListID, formValueTime);
}
else {
window.location.href = makeListenURL(videoID, formValueTime);
}
Expand Down Expand Up @@ -593,7 +670,16 @@ $(function() {
}
});
// Load the player
ZenPlayer.init(currentVideoID);
if(window.location.href.indexOf("list=") !== -1) {
console.log("loading list");
isPlayingPlaylist = true;
loadList(currentListID);
}
else {
console.log("loading song : " + currentVideoID);
if(window.location.href.indexOf("playlistid=") !== -1) isPlayingPlaylist = true;
Copy link
Member

Choose a reason for hiding this comment

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

I don't think this line has any effect

ZenPlayer.init(currentVideoID);
}
});

/*eslint-disable */
Expand Down
20 changes: 19 additions & 1 deletion js/zap-common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@ function getYouTubeVideoDescription(videoID, youTubeDataApiKey, onSuccess, onFai
}).fail(onFail);
}

function getYouTubeListItems(listID, youTubeDataApiKey, onSuccess, onFail) {
// Request the playlist items
$.getJSON("https://www.googleapis.com/youtube/v3/playlistItems", {
key: youTubeDataApiKey,
part: "snippet",
playlistId: listID,
maxResults: 50,
type: "video"
}, onSuccess).fail(onFail);
}

// The url parameter could be the video ID
function parseYoutubeVideoID(url) {
var videoInfo = {
Expand All @@ -47,10 +58,17 @@ function parseYoutubeVideoID(url) {
};
var shortUrlDomain = "youtu.be";
var longUrlDomain = "youtube.com";
//var playlistUrlElement = "&list=";

if (url && url.length > 0) {
// youtube playlist url
if(getParameterByName(url, "list") != "") {
videoInfo.format = "list";
videoInfo.listID = getParameterByName(url, "list");
videoInfo.id = getParameterByName(url, "v");
}
// youtube.com format
if (url.indexOf(longUrlDomain) !== -1) {
else if (url.indexOf(longUrlDomain) !== -1) {
videoInfo.format = longUrlDomain;
videoInfo.id = getParameterByName(url, "v");
}
Expand Down