From 6443974c7acc64298af3949612a5fb8c699bfdf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Mon, 29 Oct 2018 14:19:59 +0100 Subject: [PATCH] Added functionality for intelligent playlist, making voting and such easier on many listeners --- server/public/assets/js/channel.js | 3 -- server/public/assets/js/crypt.js | 18 +++++++- server/public/assets/js/embed.js | 3 +- server/public/assets/js/functions.js | 17 +++++-- server/public/assets/js/hostcontroller.js | 6 +-- server/public/assets/js/list.js | 44 +++++++++--------- server/public/assets/js/listeners.js | 45 ++++++++++++++++++- .../public/partials/channel/panel.handlebars | 30 ++++++++++++- 8 files changed, 131 insertions(+), 35 deletions(-) diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index 72938431..d8d7dbdf 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -117,9 +117,6 @@ var Channel = { draggable: Helper.mobilecheck(), onOpenStart: function(el) { Helper.addClass(".hamburger-sidenav", "open"); - try { - M.Collapsible.getInstance(document.querySelector(".settings-collapsible")).open(1); - } catch(e) {} }, onCloseStart: function(el) { Helper.removeClass(".hamburger-sidenav", "open"); diff --git a/server/public/assets/js/crypt.js b/server/public/assets/js/crypt.js index 5c427a4c..9805e47d 100755 --- a/server/public/assets/js/crypt.js +++ b/server/public/assets/js/crypt.js @@ -20,13 +20,29 @@ var Crypt = { } catch(err) { conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt"); } - + if(window.location.pathname != "/") { + change_intelligent(Crypt.get_intelligent_list_enabled()); Hostcontroller.change_enabled(conf_arr.remote); if(conf_arr.width != 100) Player.set_width(conf_arr.width); } }, + get_intelligent_list_enabled: function() { + if(conf_arr.hasOwnProperty("intelligent")) { + return conf_arr.intelligent; + } else { + conf_arr.intelligent = false; + Crypt.encrypt(conf_arr, "_opt"); + return false; + } + }, + + set_intelligent_list_enabled: function(enabled) { + conf_arr.intelligent = enabled; + Crypt.encrypt(conf_arr, "_opt"); + }, + decrypt: function(cookie, name) { if(Crypt.getCookie(name) === undefined) { cookie = Crypt.create_cookie(name); diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index ebf1fd26..740732cd 100755 --- a/server/public/assets/js/embed.js +++ b/server/public/assets/js/embed.js @@ -3,7 +3,7 @@ var timed_remove_check; var gotten_np = false; var song_title = ""; var paused = false; -var intelligentList = true; +var intelligentList = false; var client = false; var _VERSION; try { @@ -21,6 +21,7 @@ if(window.location.hostname == "localhost" || window.location.hostname == "clien var SC_player; var durationTimeout; var intelligentQueue = []; +var deleted_elements = 0; var sc_need_initialization = true; var sc_initialized = false; var startTime = 0; diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 651af658..f0aa3031 100644 --- a/server/public/assets/js/functions.js +++ b/server/public/assets/js/functions.js @@ -611,18 +611,26 @@ function loadChromecastVideo() { }); } -window.clearIntelligentQueue = clearIntelligentQueue; +function enable_intelligent_list() { + if(Crypt.get_intelligent_list_enabled()) { + intelligentList = true; + } +} + +function change_intelligent(enabled) { + document.querySelector(".intelligent_switch_class").checked = enabled; +} function clearIntelligentQueue() { + intelligentList = false; for(var i = 0; i < intelligentQueue.length; i++) { - console.log(intelligentQueue[i]); var currentElement = intelligentQueue[i]; - console.log(currentElement); if(currentElement.type == "vote") { Helper.removeElement("#"+currentElement.element.id); List.insertAtIndex(currentElement.element, false); } else if(currentElement.type == "delete") { - List.deleted_song(currentElement.element.id, false, true); + List.deleted_song(currentElement.element.id, false, true, currentElement.index); + deleted_elements += 1; } else if(currentElement.type == "add") { List.insertAtIndex(currentElement.element, true); Helper.css(document.querySelector("#wrapper").children[List.page + List.can_fit], "display", "none"); @@ -638,6 +646,7 @@ function clearIntelligentQueue() { } } } + intelligentQueue = []; } function updateChromecastMetadata() { diff --git a/server/public/assets/js/hostcontroller.js b/server/public/assets/js/hostcontroller.js index e53ba090..c3d20749 100755 --- a/server/public/assets/js/hostcontroller.js +++ b/server/public/assets/js/hostcontroller.js @@ -35,7 +35,7 @@ var Hostcontroller = { host_on_action: function(arr) { if(client) return; - if(enabled){ + if(Hostcontroller.enabled){ if(arr.type == "volume") { try { Playercontrols.visualVolume(arr.value); @@ -75,9 +75,9 @@ var Hostcontroller = { change_enabled:function(val){ if(client) return; - enabled = val; + Hostcontroller.enabled = val; try { - document.querySelector(".remote_switch_class").checked = enabled; + document.querySelector(".remote_switch_class").checked = Hostcontroller.enabled; }catch(e) {} } }; diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index 40938d3c..2d5a3831 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -121,9 +121,9 @@ var List = { insertAtIndex: function(song_info, transition, change) { if(document.querySelector("#wrapper") == null) return; var i = List.getIndexOfSong(song_info.id); - console.log(i, song_info); - var display = "none"; + if(i == -1) return; if(!song_info.now_playing){ + var display = "none"; if(i >= List.page && i < List.page + (List.can_fit)) display = "inline-flex" var add = List.generateSong(song_info, transition, false, true, false, display, false); if(i === 0) { @@ -420,17 +420,16 @@ var List = { } }, - deleted_song: function(deleted, removed, intelligentSecond) { + deleted_song: function(deleted, removed, intelligentSecond, deleted_index) { try{ - console.log(deleted); var index = List.getIndexOfSong(deleted); - console.log("place 2"); if(intelligentList && !intelligentSecond) { intelligentQueue.push({ type: "delete", element: full_playlist[index], + index: index, }); - full_playlist.splice(List.getIndexOfSong(deleted), 1); + if(index != -1) full_playlist.splice(index, 1); var this_element = document.getElementById(deleted); Helper.addClass(this_element, "disabled-vote"); this_element.querySelector(".vote-span").innerText = "Deleted"; @@ -441,6 +440,7 @@ var List = { } else { //if(!removed) to_delete.style.height = 0; var nextToChange; + if(index == -1) index = deleted_index; if(index < List.page && document.querySelector("#wrapper").children.length - (List.page + 2) >= 0){ //Helper.css(document.querySelector("#wrapper").children[List.page], "height", 0 + "px"); nextToChange = document.querySelector("#wrapper").children[List.page]; @@ -495,7 +495,6 @@ var List = { } } catch(err) { - console.log(err); var index = List.getIndexOfSong(deleted); if(index != -1) full_playlist.splice(index, 1); if(!List.empty){ @@ -531,6 +530,7 @@ var List = { voted_song: function(voted, time) { var index_of_song = List.getIndexOfSong(voted); + if(index_of_song == -1) return; var song_voted_on = full_playlist[index_of_song]; full_playlist[index_of_song].votes += 1; @@ -538,7 +538,6 @@ var List = { if(intelligentList) { - console.log(full_playlist[index_of_song].votes, full_playlist[index_of_song]); document.getElementById(voted).querySelector(".list-votes").innerText = full_playlist[index_of_song].votes; intelligentQueue.push({ type: "vote", @@ -581,13 +580,13 @@ var List = { List.empty = true; Helper.setHtml("#wrapper", "The playlist is empty."); } - + var newLast = full_playlist[0]; full_playlist[0].now_playing = true; full_playlist[0].votes = 0; full_playlist[0].guids = []; full_playlist[0].added = time; var i = intelligentQueue.length - var deleted_elements = 0; + while (i--) { var current = intelligentQueue[i]; if (current.type == "delete") { @@ -611,17 +610,21 @@ var List = { full_playlist.push(full_playlist.shift()); if(!remove){ - List.insertAtIndex(full_playlist[document.querySelector("#wrapper").children.length], false, true); - } - var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children); - if(wrapperChildren.length >= List.can_fit && intelligentList) { - console.log(wrapperChildren[List.can_fit]); - for(var i = 0; i < deleted_elements + 1; i++) { - //Helper.css(wrapperChildren[List.can_fit - 2], "display", "inline-flex"); - Helper.css(wrapperChildren[List.can_fit - 1 - i], "display", "inline-flex"); + if(full_playlist.length >= 2) { + var index = full_playlist.length - 2; + List.insertAtIndex(full_playlist[index], false, true); } } - } catch(e) {} + var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children); + if(wrapperChildren.length >= List.can_fit && deleted_elements > 0) { + for(var i = 0; i < deleted_elements + 1; i++) { + //Helper.css(wrapperChildren[List.can_fit - 2], "display", "inline-flex"); + Helper.css(wrapperChildren[List.page + List.can_fit - 1 - i], "display", "inline-flex"); + } + } + deleted_elements = 0; + } catch(e) { + } }, vote: function(id, vote) { @@ -1332,6 +1335,7 @@ var List = { for(var i = 0; i < full_playlist.length; i++) { if(full_playlist[i].id == id) return i; } - } catch(e) {} + return -1; + } catch(e) {return -1;} } }; diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 11eaef9e..26bede0e 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -18,7 +18,8 @@ var SC_player; var previewing = false; var sc_initialized = false; var intelligentQueue = []; -var intelligentList = true; +var intelligentList = false; +var deleted_elements = 0; var soundcloud_enabled = true; var local_new_channel = false; var sc_need_initialization = true; @@ -904,10 +905,23 @@ function addDynamicListeners() { addListener("change", '.remote_switch_class', function() { - Hostcontroller.change_enabled(document.getElementsByName("remote_switch")[0].checked); + var enabled = document.getElementsByName("remote_switch")[0].checked; + Hostcontroller.change_enabled(enabled); Crypt.set_remote(enabled); }); + addListener("change", '.intelligent_switch_class', function() + { + var enabled = document.getElementsByName("intelligent_switch")[0].checked; + change_intelligent(enabled); + Crypt.set_intelligent_list_enabled(enabled); + if(enabled) { + toast("Enabled intelligent playlist!"); + } else { + toast("Disabled intelligent playlist."); + } + }); + addListener("change", '.offline_switch_class', function() { offline = document.getElementsByName("offline_switch")[0].checked; @@ -1855,6 +1869,31 @@ function addDynamicListeners() { image_timeout = setTimeout(function(){ that.querySelector(".card-reveal").setAttribute("style", "display: none;"); }, 100); + } else if(!Helper.mobilecheck() && Crypt.get_intelligent_list_enabled()){ + try { + if(event.target.id == "wrapper" && event.relatedTarget.id != "context-menu-overlay" && event.relatedTarget.className.indexOf("context-menu-list") == -1 && event.relatedTarget.className.indexOf("context-menu-item") == -1) { + clearIntelligentQueue(); + } else if(event.target.id == "context-menu-overlay" || event.relatedTarget.className.indexOf("context-menu-list") >= 0 || event.relatedTarget.className.indexOf("context-menu-item") >= 0) { + var related = event.relatedTarget; + if(related.id == "wrapper" || related.className.indexOf("context-menu-list") >= 0 || related.className.indexOf("context-menu-item") >= 0) { + enable_intelligent_list(); + return; + } + var parent = related.parentElement; + while(parent != null) { + try { + if(parent.id == "wrapper" || parent.className.indexOf("context-menu-list") >= 0 || parent.className.indexOf("context-menu-item") >= 0) { + enable_intelligent_list(); + return; + } + } catch(e){} + try { + parent = parent.parentElement; + } catch(e){break;} + } + clearIntelligentQueue(); + } + } catch(e) {} } }, true); @@ -1867,6 +1906,8 @@ function addDynamicListeners() { image_timeout = setTimeout(function(){ that.querySelector(".card-reveal").setAttribute("style", "display: block;transform: translateY(-100%);"); }, 50); + } else if(event.target.id == "wrapper") { + enable_intelligent_list(); } }, true); diff --git a/server/public/partials/channel/panel.handlebars b/server/public/partials/channel/panel.handlebars index 6543fffe..9e647154 100755 --- a/server/public/partials/channel/panel.handlebars +++ b/server/public/partials/channel/panel.handlebars @@ -4,7 +4,7 @@ +
  • +
    Intelligent Playlist + sentiment_satisfied_alt +
    +
    +
      +
    • + + Intelligent + +
      + +
      +
      +
      +

      + When enabling intelligent playlist, playlist elements are not updated when the playlist is in focus. This helps with playlists with many listeners, making changes to the list at the same time. +

      +
      +
      +
      • +
    +
    +
    • {{#unless client}}
  • Remote Control