Added functionality for intelligent playlist, making voting and such easier on many listeners

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

server/public/assets/js/crypt.js

@@ -22,11 +22,27 @@ var Crypt = {
         }
 
         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);

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;

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

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) {}
     }
 };

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", "<span id='empty-channel-message'>The playlist is empty.</span>");
             }
-
+            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);
+                if(full_playlist.length >= 2) {
+                    var index = full_playlist.length - 2;
+                    List.insertAtIndex(full_playlist[index], false, true);
+                }
             }
             var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
-            if(wrapperChildren.length >= List.can_fit && intelligentList) {
-                console.log(wrapperChildren[List.can_fit]);
+            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.can_fit - 1 - i], "display", "inline-flex");
+                    Helper.css(wrapperChildren[List.page + List.can_fit - 1 - i], "display", "inline-flex");
                 }
             }
-        } catch(e) {}
+            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;}
     }
 };

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

server/public/partials/channel/panel.handlebars

@@ -4,7 +4,7 @@
 </div>
 <ul class="collapsible collapsible-accordion settings-collapsible">
     {{> channel/settings}}
-    <li class="no-padding">
+    <li class="no-padding active">
         <div class="collapsible-header bold waves-effect">Channel Info
             <i class="material-icons">info_outline</i>
         </div>
@@ -25,6 +25,34 @@
             </ul>
         </div>
     </li>
+    <li class="no-padding hide-on-small-only">
+        <div class="collapsible-header bold waves-effect">Intelligent Playlist
+            <i class="material-icons">sentiment_satisfied_alt</i>
+        </div>
+        <div class="collapsible-body info_collapsible">
+            <ul>
+                <li>
+                    <span class="switch-text">
+                        Intelligent
+                    </span>
+                    <div class="switch">
+                        <label>
+                            Disabled
+                            <input name="intelligent_switch" type="checkbox" class="intelligent_switch_class" checked /><span class="lever"></span>
+                            Enabled
+                        </label>
+                    </div>
+                    <div class="row">
+                        <div class="col s10 offset-s1">
+                            <p class="initial-line-height">
+                                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.
+                            </p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </li>
     {{#unless client}}
     <li class="no-padding remote-panel hide-on-small-only">
         <div class="collapsible-header bold waves-effect">Remote Control