Closes issue #222. Autoplay of suggested next video. Button toggle. Does not play duplicates by maintaining history of all videos.

index.html

@@ -73,6 +73,9 @@ <h3>
                 <button class="btn" id="toggleDescription">
                     Show Description
                 </button>
+                <button class="btn" id="toggleAutoplay">
+                    Autoplay
+                </button>
             </div>
 
             <!-- Plyr controls' icons and Plyr player itself -->

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