Merge pull request #438 from zoff-music/feature/intelligent-list

Intelligent list

server/public/assets/css/style.css

@@ -2036,7 +2036,7 @@ nav ul li:hover, nav ul li.active {
     transition: all .1s ease;
 }
 
-.vote-container{
+.vote-container, .deleted-vote-container{
     height: 100%;
     width: 90%;
 }
@@ -2766,6 +2766,11 @@ nav ul li:hover, nav ul li.active {
     border: none;
 }
 
+.disabled-vote{
+    cursor: not-allowed !important;
+    background: rgba(255,255,255,.2);
+}
+
 .hide
 {
     display:none !important;

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");
@@ -182,6 +179,7 @@ var Channel = {
         }
         if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization();
         setup_suggested_listener();
+        if(!Helper.mobilecheck()) Helper.removeClass(".intelligent-accordion", "hide-on-small-only");
         if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
             setup_now_playing_listener();
             get_list_listener();

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,6 +3,7 @@ var timed_remove_check;
 var gotten_np = false;
 var song_title = "";
 var paused = false;
+var intelligentList = false;
 var client = false;
 var _VERSION;
 try {
@@ -19,6 +20,8 @@ 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,6 +611,44 @@ function loadChromecastVideo() {
     });
 }
 
+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++) {
+        var currentElement = intelligentQueue[i];
+        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, 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");
+            if(document.querySelector("#wrapper").children.length > List.page + List.can_fit){
+                Helper.css(".next_page_hide", "display", "none");
+                Helper.removeClass(".next_page", "hide");
+                Helper.css(".last_page_hide", "display", "none");
+                Helper.css(".next_page", "display", "inline-flex");
+                Helper.css(".last_page", "display", "inline-flex");
+            } else {
+                Helper.css(".next_page_hide", "display", "inline-flex");
+                Helper.css(".next_page", "display", "none");
+            }
+        }
+    }
+    intelligentQueue = [];
+}
+
 function updateChromecastMetadata() {
     if(!chromecastAvailable) return;
     var image = {url:'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', heigth: 180, width: 320};

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,8 +121,9 @@ var List = {
     insertAtIndex: function(song_info, transition, change) {
         if(document.querySelector("#wrapper") == null) return;
         var i = List.getIndexOfSong(song_info.id);
-        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) {
@@ -397,6 +398,12 @@ var List = {
             if(document.querySelectorAll("#empty-channel-message").length > 0) {
                 document.querySelector("#empty-channel-message").remove();
             }
+            if(intelligentList) {
+                intelligentQueue.push({
+                    type: "add",
+                    element: added,
+                });
+            } else {
                 List.insertAtIndex(added, true);
                 Helper.css(document.querySelector("#wrapper").children[List.page + List.can_fit], "display", "none");
                 if(document.querySelector("#wrapper").children.length > List.page + List.can_fit){
@@ -410,13 +417,30 @@ var List = {
                     Helper.css(".next_page", "display", "none");
                 }
             }
+        }
     },
 
-    deleted_song: function(deleted, removed) {
+    deleted_song: function(deleted, removed, intelligentSecond, deleted_index) {
         try{
             var index              = List.getIndexOfSong(deleted);
+            if(intelligentList && !intelligentSecond) {
+                intelligentQueue.push({
+                    type: "delete",
+                    element: full_playlist[index],
+                    index: index,
+                });
+                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";
+                Helper.addClass(this_element.querySelector(".vote-container"), "deleted-vote-container");
+                Helper.removeClass(this_element.querySelector(".vote-container"), "clickable");
+                Helper.removeClass(this_element.querySelector(".vote-container"), "vote-container");
+                return;
+            } 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];
@@ -464,12 +488,15 @@ var List = {
                         Helper.css(nextToChange, "height", List.element_height + "px");
                     }
                 }
-            full_playlist.splice(List.getIndexOfSong(deleted), 1);
+                var index = List.getIndexOfSong(deleted);
+                if(index != -1) full_playlist.splice(index, 1);
                 Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
                 //}
+            }
 
         } catch(err) {
-            full_playlist.splice(List.getIndexOfSong(deleted), 1);
+            var index = List.getIndexOfSong(deleted);
+            if(index != -1) full_playlist.splice(index, 1);
             if(!List.empty){
                 try {
                     document.getElementById(deleted).remove();
@@ -503,14 +530,25 @@ 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;
         full_playlist[index_of_song].added = time;
 
+
+        if(intelligentList) {
+            document.getElementById(voted).querySelector(".list-votes").innerText = full_playlist[index_of_song].votes;
+            intelligentQueue.push({
+                type: "vote",
+                element: song_voted_on
+            });
+            List.sortList();
+        } else {
             List.sortList();
             Helper.removeElement("#"+voted);
             List.insertAtIndex(song_voted_on, false);
+        }
     },
 
     song_change_prev: function(time) {
@@ -537,16 +575,29 @@ var List = {
     song_change: function(time, remove) {
         try{
             var length = full_playlist.length - 1;
-            document.querySelector("#wrapper").children[0].remove();
+
             if(full_playlist.length <= 1) {
                 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
+
+            while (i--) {
+                var current = intelligentQueue[i];
+                if (current.type == "delete") {
+                    intelligentQueue.splice(i, 1);
+                    Helper.removeElement("#" + current.element.id);
+                    deleted_elements += 1;
+                }
+            }
+            try {
+                document.getElementById(full_playlist[0].id).remove();
+            } catch(e) {};
             if(!remove){
                 full_playlist[length].now_playing   = false;
             } else {
@@ -559,13 +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 && 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) {
         }
-            /*var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
-            if(wrapperChildren.length > List.can_fit) {
-                //Helper.css(wrapperChildren[List.can_fit], "display", "inline-flex");
-            }*/
-        } catch(e) {}
     },
 
     vote: function(id, vote) {
@@ -1276,7 +1335,7 @@ var List = {
             for(var i = 0; i < full_playlist.length; i++) {
                 if(full_playlist[i].id == id) return i;
             }
-
+            return -1;
-        } catch(e) {}
+        } catch(e) {return -1;}
     }
 };

server/public/assets/js/listeners.js

@@ -17,6 +17,9 @@ var scUsingWidget = false;
 var SC_player;
 var previewing = false;
 var sc_initialized = false;
+var intelligentQueue = [];
+var intelligentList = false;
+var deleted_elements = 0;
 var soundcloud_enabled = true;
 var local_new_channel = false;
 var sc_need_initialization = true;
@@ -902,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;
@@ -1853,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);
 
@@ -1865,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 intelligent-accordion">
+        <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 and moved around when the playlist is in focus. If things are jumping too much around in the playlist when voting, you should enable this.
+                            </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