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();