Towards issue zen-audio-player#222. Has GUI toggle for autoplay next …

…video. History also maintained of all videos played to avoid duplicates

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

@@ -60,6 +60,13 @@ var plyrPlayer;
 var youTubeDataApiKey = "AIzaSyCxVxsC5k46b8I-CLXlF3cZHjpiqP_myVk";
 var currentVideoID;
 
+// global playlist, this is populated with an ajax call
+var playList = [];
+var autoplayState;
+
+
+
+
 var errorMessage = {
     init: function() {
         // nothing for now
@@ -177,6 +184,7 @@ var ZenPlayer = {
                 that.setupTitle();
                 that.setupVideoDescription();
                 that.setupPlyrToggle();
+                that.setupAutoplayToggle();
             });
 
             plyrPlayer.addEventListener("playing", function() {
@@ -206,11 +214,64 @@ var ZenPlayer = {
                     seconds: plyrPlayer.plyr.embed.getDuration(),
                     youtubeID: plyrPlayer.plyr.embed.getVideoData().video_id
                 });
-
                 // Show player
                 that.show();
                 updateTweetMessage();
             });
+			// when player has finished playing
+            plyrPlayer.addEventListener("ended", function() {
+                if (autoplayState !== null && autoplayState === "true") {
+                    plyrPlayer.removeEventListener("ended");
+					/*
+					 idMap is dict- history of all songs played till now, of the form
+					 <key=videoId>: <value=true>. It is stored in the session storage of the
+					 browser. When the player has finished playing, the last entry from the playlist
+					 is picked as a possible candidate and checked for presence in idMap. If its present ie its
+					 already been played, we pop() and get the new last entry from playlist, looking for a new song. Whatever
+					 is a valid new entry gets added to the dict which is then written to session storage again
+					*/
+					// if playList songs left
+                    if (playList.length !== 0)
+					{
+						// get autoplay candidate from playlist
+                        var newId = playList[playList.length - 1];
+						// load 'history' dict from storage
+                        var idMap  = window.sessionStorage.getItem("idMap");
+                        idMap = JSON.parse(idMap);
+                        // first time?
+                        if (idMap !== null && newId !== "")
+						{
+                            // keep popping till unique next song found
+                            while ( (newId in idMap) && (playList.length !== 0))
+							{
+                                playList.pop();
+                                if (playList.length >= 1)
+                                {
+                                    newId = playList[playList.length - 1];
+                                }
+                            }
+					// nothing to be played if empty playlist
+                            if (playList.length === 0)
+                            {
+                                newId = null;
+                            }
+                            else {
+								// write 'history' dict to storage
+                                idMap[newId] = true;
+                                window.sessionStorage.setItem("idMap", JSON.stringify(idMap));
+                            }
+                        }
+                        else {
+                            idMap = {};
+                            idMap[newId] = true;
+                            window.sessionStorage.setItem("idMap", JSON.stringify(idMap));
+                        }
+						// play the new song from autoplay
+                        that.playNext(newId);
+                    }
+                }
+            });
+
 
             plyrPlayer.addEventListener("timeupdate", function() {
                 // Store the current time of the video.
@@ -250,6 +311,12 @@ var ZenPlayer = {
             });
         }
     },
+    // play next song from autoplay
+    playNext:function(videoID) {
+        $("#v").attr("value", videoID);
+        $("#form").submit();
+    },
+
     show: function() {
         $("#audioplayer").show();
     },
@@ -280,11 +347,35 @@ 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 === null)
+			{
+                autoplayState = "true";
+                toggleTextElement.text("Stop autoplay");
+            }
+            else {
+                if (autoplayState === "true")
+				{
+                    toggleTextElement.text("Start autoplay");
+                    autoplayState = "false";
+                }
+				else {
+                    toggleTextElement.text("Stop autoplay");
+                    autoplayState = "true";
+                }
+            }
+            window.sessionStorage.setItem("autoplayState", autoplayState);
+        });
+    },
     getVideoDescription: function(videoID) {
         var description = "";
 
         if (isFileProtocol()) {
-            console.log("Skipping video description request as we're running the site locally.");
             $("#toggleDescription").hide();
         }
         else {
@@ -342,10 +433,9 @@ function updateTweetMessage() {
     );
 }
 
-function logError(jqXHR, textStatus, errorThrown, _errorMessage) {
+function logError(jqXHR, textStatus, errorThrown, errorMessage) {
     var responseText = JSON.parse(jqXHR.error().responseText);
     errorMessage.show(responseText.error.errors[0].message);
-    console.log(_errorMessage, errorThrown);
 }
 
 function toggleElement(event, toggleID, buttonText) {
@@ -473,12 +563,47 @@ $(function() {
     }
 
     errorMessage.init();
+    autoplayState = window.sessionStorage.getItem("autoplayState");
+    if (autoplayState !== null)
+	{
+        if (autoplayState === "true")
+		{
+            $("#toggleAutoplay").text("Stop autoplay");
+        }
+        else {
+            $("#toggleAutoplay").text("Start autoplay");
+        }
+    }
 
     // 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
+        $.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, "Lookup error");
+        });
+
+
+
     }
     else {
         var currentSearchQuery = getCurrentSearchQuery();