diff --git a/index.html b/index.html
index 93a3a426..03b5183e 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,9 @@
+
diff --git a/js/everything.js b/js/everything.js
old mode 100644
new mode 100755
index d20c60d8..ebe37094
--- a/js/everything.js
+++ b/js/everything.js
@@ -59,6 +59,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
@@ -177,6 +182,7 @@ var ZenPlayer = {
that.setupTitle();
that.setupVideoDescription(videoID);
that.setupPlyrToggle();
+ that.setupAutoplayToggle();
});
plyrPlayer.addEventListener("playing", function() {
@@ -211,6 +217,30 @@ var ZenPlayer = {
that.show();
updateTweetMessage();
});
+ // when player has finished playing
+ plyrPlayer.addEventListener("ended", function() {
+ videoMetaData = getParsedVideoMetaData();
+ if (videoMetaData) {
+ 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.
@@ -258,6 +288,12 @@ var ZenPlayer = {
});
}
},
+ // play next song from autoplay
+ playNext:function(videoID) {
+ $("#v").attr("value", videoID);
+ $("#form").submit();
+ },
+
show: function() {
$("#audioplayer").show();
},
@@ -289,6 +325,31 @@ 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;
+ }
+ }
+ // need to load videoMetaData, change autoplay toggle and set it back again
+ /* videoMetaData = window.sessionStorage.getItem("videoMetaData");
+ videoMetaData = JSON.parse(videoMetaData);
+ videoMetaData["autoplayState"] = autoplayState;
+ window.sessionStorage.setItem("videoMetaData", JSON.stringify(videoMetaData));*/
+ });
+ },
getVideoDescription: function(videoID) {
var description = "";
@@ -501,6 +562,44 @@ function pickDemo() {
return demos[Math.floor(Math.random() * demos.length)];
}
+function updateAutoplayToggle(state) {
+ if (state === true) {
+ $("#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() {
+ /*
+ videoMetaData contains two variables, an autoplay state and information (list) about all videos played till now.
+ It is stored in session storage, and retrieved when relevant entries need to be added/modified.
+ */
+ // if playList songs left
+ var nextID = null;
+ while (playList.length > 0) {
+ 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();
@@ -518,11 +617,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 = 0; i < data.items.length; 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();