diff --git a/index.html b/index.html
index e641d06a..4b7f8e76 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,9 @@
+
diff --git a/js/everything.js b/js/everything.js
index 0eee5ad7..4d8d0415 100644
--- a/js/everything.js
+++ b/js/everything.js
@@ -15,6 +15,11 @@ var plyrPlayer;
var youTubeDataApiKey = "AIzaSyCxVxsC5k46b8I-CLXlF3cZHjpiqP_myVk";
var currentVideoID;
+// global playlist, this is populated with an ajax call
+var playList = [];
+var autoplayState = false;
+var videoMetadata = {};
+
var errorMessage = {
init: function() {
// nothing for now
@@ -137,6 +142,7 @@ var ZenPlayer = {
that.setupTitle();
that.setupVideoDescription(videoID);
that.setupPlyrToggle();
+ that.setupAutoplayToggle();
});
plyrPlayer.addEventListener("playing", function() {
@@ -165,6 +171,38 @@ var ZenPlayer = {
updateTweetMessage();
});
+ // when player has finished playing
+ plyrPlayer.addEventListener("ended", function() {
+ videoMetadata = getParsedVideoMetadata();
+ if (videoMetadata) {
+ var isInItems = false;
+ for (var i = 0; i < videoMetadata["items"].length; i++) {
+ if (videoMetadata["items"][i]["id"] === currentVideoID) {
+ isInItems = true;
+ }
+ }
+ if (!isInItems) {
+ videoMetadata["items"].push({"type": "youtube", "id": currentVideoID, "played": true });
+ }
+ videoMetadata["autoplayState"] = autoplayState;
+ }
+ else {
+ videoMetadata = {
+ "autoplayState": autoplayState,
+ "items": [{
+ "type": "youtube",
+ "id": currentVideoID,
+ "played": true
+ }]
+ };
+ }
+ window.sessionStorage.setItem("videoMetadata", JSON.stringify(videoMetadata));
+ if (autoplayState) {
+ var newId = getNewVideoID();
+ that.playNext(newId);
+ }
+ });
+
plyrPlayer.addEventListener("timeupdate", function() {
// Store the current time of the video.
var resumeTime = 0;
@@ -218,6 +256,11 @@ var ZenPlayer = {
});
}
},
+ // play next song from autoplay
+ playNext: function(videoID) {
+ $("#v").val(videoID);
+ $("#form").submit();
+ },
show: function() {
$("#audioplayer").show();
// Hide the demo link as some video is playing
@@ -253,6 +296,24 @@ var ZenPlayer = {
toggleElement(event, ".plyr__video-wrapper", "Player");
});
},
+ setupAutoplayToggle: function() {
+ // toggle auto next song playing
+ $("#toggleAutoplay").click(function(event) {
+ var toggleTextElement = $("#" + event.currentTarget.id);
+ if (!autoplayState) {
+ autoplayState = true;
+ toggleTextElement.text("Stop autoplay");
+ }
+ else if (autoplayState === true) {
+ toggleTextElement.text("Start autoplay");
+ autoplayState = false;
+ }
+ else {
+ toggleTextElement.text("Stop autoplay");
+ autoplayState = true;
+ }
+ });
+ },
getVideoDescription: function(videoID) {
var description = "";
@@ -519,6 +580,37 @@ function pickDemo() {
return demos[Math.floor(Math.random() * demos.length)];
}
+function updateAutoplayToggle(state) {
+ if (state) {
+ $("#toggleAutoplay").text("Stop autoplay");
+ }
+ else {
+ $("#toggleAutoplay").text("Start autoplay");
+ }
+}
+
+function getParsedVideoMetadata() {
+ videoMetadata = window.sessionStorage.getItem("videoMetadata");
+ if (videoMetadata) {
+ videoMetadata = JSON.parse(videoMetadata);
+ }
+ return videoMetadata;
+}
+
+function getNewVideoID() {
+ var nextID = null;
+ nextID = playList.pop();
+ for (var i = 0; i < videoMetadata["items"].length && nextID; i++) {
+ var curVideo = videoMetadata["items"][i];
+ if (curVideo["id"] === nextID) {
+ // restart the for loop
+ nextID = playList.pop();
+ i = -1;
+ }
+ }
+ return nextID;
+}
+
$(function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$("#container").hide();
@@ -529,11 +621,42 @@ $(function() {
errorMessage.init();
+ videoMetadata = getParsedVideoMetadata();
+
+ if (videoMetadata) {
+ autoplayState = videoMetadata["autoplayState"];
+ }
+ if (autoplayState) {
+ updateAutoplayToggle(autoplayState);
+ }
+
// How do we know if the value is truly invalid?
// Preload the form from the URL
var currentVideoID = getCurrentVideoID();
if (currentVideoID) {
$("#v").attr("value", currentVideoID);
+ // get similar videos, populate playList
+ if (!isFileProtocol()) {
+ $.ajax({
+ url: "https://www.googleapis.com/youtube/v3/search",
+ dataType: "json",
+ async: false,
+ data: {
+ key: youTubeDataApiKey,
+ part: "snippet",
+ type: "video",
+ relatedToVideoId: currentVideoID
+ },
+ success: function(data) {
+ // push items into playlist
+ for (var i = data.items.length - 1; i > -1; i--) {
+ playList.push(data.items[i].id.videoId);
+ }
+ }
+ }).fail(function(jqXHR, textStatus, errorThrown) {
+ logError(jqXHR, textStatus, errorThrown, "Related video lookup error");
+ });
+ }
}
else {
var currentSearchQuery = getCurrentSearchQuery();