From eb17fb8b36bc31c89b65241963da7d131c31c4d4 Mon Sep 17 00:00:00 2001 From: k----n Date: Tue, 8 Oct 2019 10:26:08 -0600 Subject: [PATCH 1/4] Autoplay the next related video --- index.html | 3 ++ js/everything.js | 126 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) diff --git a/index.html b/index.html index 7a3b3aeb..55792bba 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,9 @@

+ diff --git a/js/everything.js b/js/everything.js index 0eee5ad7..3a1bc50d 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,26 @@ 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 +582,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 +623,43 @@ $(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); + } + playList = playList.reverse(); + } + }).fail(function(jqXHR, textStatus, errorThrown) { + logError(jqXHR, textStatus, errorThrown, "Related video lookup error"); + }); + } } else { var currentSearchQuery = getCurrentSearchQuery(); From 6c8075c71a3232e639a703a12bc16647df744bae Mon Sep 17 00:00:00 2001 From: k----n Date: Tue, 8 Oct 2019 12:35:39 -0600 Subject: [PATCH 2/4] Remove code complexity? --- js/everything.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/js/everything.js b/js/everything.js index 3a1bc50d..4d1746c3 100644 --- a/js/everything.js +++ b/js/everything.js @@ -304,15 +304,13 @@ var ZenPlayer = { autoplayState = true; toggleTextElement.text("Stop autoplay"); } - else { - if (autoplayState === true) { + else if (autoplayState === true) { toggleTextElement.text("Start autoplay"); autoplayState = false; - } - else { - toggleTextElement.text("Stop autoplay"); - autoplayState = true; - } + } + else { + toggleTextElement.text("Stop autoplay"); + autoplayState = true; } }); }, From 50ed99420c7f8e22ac827753762f7452dd2f1774 Mon Sep 17 00:00:00 2001 From: k----n Date: Tue, 8 Oct 2019 12:38:45 -0600 Subject: [PATCH 3/4] Lint fix --- js/everything.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/everything.js b/js/everything.js index 4d1746c3..baecbb74 100644 --- a/js/everything.js +++ b/js/everything.js @@ -305,8 +305,8 @@ var ZenPlayer = { toggleTextElement.text("Stop autoplay"); } else if (autoplayState === true) { - toggleTextElement.text("Start autoplay"); - autoplayState = false; + toggleTextElement.text("Start autoplay"); + autoplayState = false; } else { toggleTextElement.text("Stop autoplay"); From a1a82aa96c0cd6f987109e39dbbd606b3d1c9473 Mon Sep 17 00:00:00 2001 From: k----n Date: Wed, 9 Oct 2019 12:02:02 -0600 Subject: [PATCH 4/4] Simplified iterator --- js/everything.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/everything.js b/js/everything.js index baecbb74..4d8d0415 100644 --- a/js/everything.js +++ b/js/everything.js @@ -649,10 +649,9 @@ $(function() { }, success: function(data) { // push items into playlist - for (var i = 0; i < data.items.length; i++) { + for (var i = data.items.length - 1; i > -1; i--) { playList.push(data.items[i].id.videoId); } - playList = playList.reverse(); } }).fail(function(jqXHR, textStatus, errorThrown) { logError(jqXHR, textStatus, errorThrown, "Related video lookup error");