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

Intelligent list
2025-10-29 18:00:23 +00:00 · 2018-10-29 14:31:55 +01:00
parent 4dcd03d042 d315851667
commit 3998817b62
9 changed files with 274 additions and 84 deletions
--- a/server/public/assets/css/style.css
+++ b/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;
--- a/server/public/assets/js/channel.js
+++ b/server/public/assets/js/channel.js
@@ -34,10 +34,10 @@ var Channel = {
            if(cast_ready_connect || chromecastAvailable || chromecastReady) {
                Helper.addClass(".volume-container", "volume-container-cast");
            }
-	    if(!embed) {
-	    	document.querySelector("#main-container").insertAdjacentHTML("beforeend", "<a id='hide-playlist' class='hide-on-small-only hide-playlist-button' href='#!'><i class='material-icons'>keyboard_arrow_right</i></div>");
-	          document.querySelector("#hide-playlist").style.left = (document.querySelector("#video-container").offsetWidth - document.querySelector("#hide-playlist").offsetWidth) + "px";
-	    }
+    	    if(!embed) {
+    	    	document.querySelector("#main-container").insertAdjacentHTML("beforeend", "<a id='hide-playlist' class='hide-on-small-only hide-playlist-button' href='#!'><i class='material-icons'>keyboard_arrow_right</i></div>");
+    	          document.querySelector("#hide-playlist").style.left = (document.querySelector("#video-container").offsetWidth - document.querySelector("#hide-playlist").offsetWidth) + "px";
+    	    }
            //Player.soundcloud_player = document.querySelector("#soundcloud_player");
        }
        List.calculate_song_heights();
@@ -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();
--- 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);
--- a/server/public/assets/js/embed.js
+++ b/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;
--- a/server/public/assets/js/functions.js
+++ b/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};
--- 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) {}
    }
 };
--- a/server/public/assets/js/list.js
+++ b/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,79 +398,105 @@ var List = {
            if(document.querySelectorAll("#empty-channel-message").length > 0) {
                document.querySelector("#empty-channel-message").remove();
            }
-            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){
-                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");
+            if(intelligentList) {
+                intelligentQueue.push({
+                    type: "add",
+                    element: added,
+                });
            } else {
-                Helper.css(".next_page_hide", "display", "inline-flex");
-                Helper.css(".next_page", "display", "none");
+                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){
+                    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");
+                }
            }
        }
    },

-    deleted_song: function(deleted, removed) {
+    deleted_song: function(deleted, removed, intelligentSecond, deleted_index) {
        try{
            var index              = List.getIndexOfSong(deleted);
-            //if(!removed) to_delete.style.height = 0;
-            var nextToChange;
-            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];
-                //Helper.css(document.querySelector("#wrapper").children[List.page], "display", "inline-flex");
-                //Helper.css(document.querySelector("#wrapper").children[List.page], "height", List.element_height + "px");
-            } else if(document.querySelector("#wrapper").children.length > List.page + (List.can_fit)){
-                //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "height", 0 + "px");
-                nextToChange = document.querySelector("#wrapper").children[List.page + (List.can_fit)];
-                //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "display", "inline-flex");
-                //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "height", List.element_height + "px");
-            }
-            if(List.page >= document.querySelector("#wrapper").children.length - 1){
-                List.dynamicContentPage(-1);
-                Helper.css(".next_page_hide", "display", "inline-flex");
-                Helper.css(".next_page", "display", "none");
-                Helper.css(".last_page_hide", "display", "inline-flex");
-                Helper.css(".last_page", "display", "none");
-            } else if(List.page + List.can_fit + 1 >= document.querySelector("#wrapper").children.length - 1){
-                Helper.css(".next_page_hide", "display", "inline-flex");
-                Helper.css(".next_page", "display", "none");
-                Helper.css(".last_page_hide", "display", "inline-flex");
-                Helper.css(".last_page", "display", "none");
-            }
+            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];
+                    //Helper.css(document.querySelector("#wrapper").children[List.page], "display", "inline-flex");
+                    //Helper.css(document.querySelector("#wrapper").children[List.page], "height", List.element_height + "px");
+                } else if(document.querySelector("#wrapper").children.length > List.page + (List.can_fit)){
+                    //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "height", 0 + "px");
+                    nextToChange = document.querySelector("#wrapper").children[List.page + (List.can_fit)];
+                    //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "display", "inline-flex");
+                    //Helper.css(document.querySelector("#wrapper").children[List.page + (List.can_fit)], "height", List.element_height + "px");
+                }
+                if(List.page >= document.querySelector("#wrapper").children.length - 1){
+                    List.dynamicContentPage(-1);
+                    Helper.css(".next_page_hide", "display", "inline-flex");
+                    Helper.css(".next_page", "display", "none");
+                    Helper.css(".last_page_hide", "display", "inline-flex");
+                    Helper.css(".last_page", "display", "none");
+                } else if(List.page + List.can_fit + 1 >= document.querySelector("#wrapper").children.length - 1){
+                    Helper.css(".next_page_hide", "display", "inline-flex");
+                    Helper.css(".next_page", "display", "none");
+                    Helper.css(".last_page_hide", "display", "inline-flex");
+                    Helper.css(".last_page", "display", "none");
+                }

-            if(List.page <= index && List.page - List.can_fit <= index) {
-                Helper.addClass("#" + deleted, "side_away");
+                if(List.page <= index && List.page - List.can_fit <= index) {
+                    Helper.addClass("#" + deleted, "side_away");

-                //document.getElementById(deleted).querySelector(".mobile-delete").remove();
-                Helper.css("#" + deleted, "transform", "translateX(-100%)");
-                setTimeout(function() {
-                    Helper.removeElement("#" + deleted);
-                    /*var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
-                    if(wrapperChildren.length > List.can_fit) {
-                        Helper.css(wrapperChildren[List.can_fit], "display", "inline-flex");
-                    }*/
+                    //document.getElementById(deleted).querySelector(".mobile-delete").remove();
+                    Helper.css("#" + deleted, "transform", "translateX(-100%)");
+                    setTimeout(function() {
+                        Helper.removeElement("#" + deleted);
+                        /*var wrapperChildren = [].slice.call(document.querySelector("#wrapper").children);
+                        if(wrapperChildren.length > List.can_fit) {
+                            Helper.css(wrapperChildren[List.can_fit], "display", "inline-flex");
+                        }*/
+                        if(nextToChange != undefined) {
+                            Helper.css(nextToChange, "display", "inline-flex");
+                            Helper.css(nextToChange, "height", List.element_height + "px");
+                        }
+                    }, 300);
+                } else {
+                    Helper.removeElement("#"+deleted);
                    if(nextToChange != undefined) {
                        Helper.css(nextToChange, "display", "inline-flex");
                        Helper.css(nextToChange, "height", List.element_height + "px");
                    }
-                }, 300);
-            } else {
-                Helper.removeElement("#"+deleted);
-                if(nextToChange != undefined) {
-                    Helper.css(nextToChange, "display", "inline-flex");
-                    Helper.css(nextToChange, "height", List.element_height + "px");
                }
+                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});
+                //}
            }
-            full_playlist.splice(List.getIndexOfSong(deleted), 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;

-        List.sortList();
-        Helper.removeElement("#"+voted);
-        List.insertAtIndex(song_voted_on, false);
+
+        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) {
-                //Helper.css(wrapperChildren[List.can_fit], "display", "inline-flex");
-            }*/
-        } 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) {
@@ -1276,7 +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;}
    }
 };
--- a/server/public/assets/js/listeners.js
+++ b/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);

--- a/server/public/partials/channel/panel.handlebars
+++ b/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