Allowing users to define their player's colors

server/public/assets/js/crypt.js

@@ -23,11 +23,43 @@ var Crypt = {
 
         if(window.location.pathname != "/") {
             change_intelligent(Crypt.get_intelligent_list_enabled());
+            if(!conf_arr.hasOwnProperty("color")) {
+                Crypt.set_background_color("dynamic", true);
+            } else {
+                document.querySelector(".backround_switch_class").checked = conf_arr.color == "dynamic";
+                if(conf_arr.color != "dynamic") {
+                    Helper.removeClass(".background_color_container", "hide");
+                    document.querySelector("#background_color_choser").value = conf_arr.color;
+                }
+            }
             Hostcontroller.change_enabled(conf_arr.remote);
             if(conf_arr.width != 100) Player.set_width(conf_arr.width);
         }
     },
 
+    set_background_color: function(value, first) {
+        conf_arr.color = value;
+        if(value != "dynamic" && !first) {
+            Helper.css("#main-container", "background-color", value);
+            Helper.css("#nav", "background-color", value);
+            Helper.css(".title-container", "background-color", value);
+            document.querySelector("meta[name=theme-color]").setAttribute("content", value);
+            Helper.css("#controls", "background", value);
+        } else if(!first){
+            var url = 'https://img.youtube.com/vi/'+Player.np.id+'/mqdefault.jpg';
+            if(videoSource == "soundcloud") url = Player.np.thumbnail;
+            getColor(url);
+        }
+        Crypt.encrypt(conf_arr, "_opt");
+    },
+
+    get_background_color: function(value) {
+        if(!conf_arr.hasOwnProperty("color")) {
+            Crypt.set_background_color("dynamic");
+        }
+        return conf_arr.color;
+    },
+
     get_intelligent_list_enabled: function() {
         if(conf_arr.hasOwnProperty("intelligent")) {
             return conf_arr.intelligent;

server/public/assets/js/embed.js

@@ -78,6 +78,9 @@ var connection_options = {
 var Crypt = {
     crypt_pass: function(pass) {
         return pass;
+    },
+    get_background_color: function() {
+        return "dynamic";
     }
 };
 
@@ -342,10 +345,6 @@ function emit() {
 }
 
 function change_offline(enabled, already_offline){
-    if(client) {
-        offline = false;
-        return;
-    }
     offline = enabled;
     socket.emit("offline", {status: enabled, channel: chan != undefined ? chan.toLowerCase() : ""});
     if(!Helper.mobilecheck()) {
@@ -373,25 +372,13 @@ function change_offline(enabled, already_offline){
     var mouseUp = function(e) {
         dragging = false;
     };
-
     if(enabled){
         Helper.addClass("#viewers", "hide");
         Helper.removeClass(".margin-playbar", "margin-playbar");
         Helper.addClass(".prev playbar", "margin-playbar");
         Helper.removeClass(".prev playbar", "hide");
-        Helper.removeClass("#offline-mode", "waves-cyan");
-        Helper.addClass("#offline-mode", "cyan");
-        Helper.removeClass(".delete-context-menu", "context-menu-disabled");
-        if(!Helper.mobilecheck()) {
-            Helper.tooltip("#offline-mode", {
-                delay: 5,
-                position: "bottom",
-                html: "Disable local mode"
-            });
-        }
 
         if(window.location.pathname != "/"){
-            socket.removeEventListener("color");
             document.getElementById("controls").addEventListener("mouseenter", mouseEnter, false);
             document.getElementById("controls").addEventListener("mouseleave", mouseLeave, false);
             document.getElementById("controls").addEventListener("mousedown", mouseDown, false);
@@ -404,46 +391,14 @@ function change_offline(enabled, already_offline){
             Helper.css("#seekToDuration", "bottom", "50px");
             Helper.addClass("#controls", "ewresize");
         }
-        if(full_playlist != undefined && !already_offline){
+        if(full_playlist != undefined && !already_offline && full_playlist.length > 0){
             for(var x = 0; x < full_playlist.length; x++){
                 full_playlist[x].votes = 0;
             }
+
             List.sortList();
             List.populate_list(full_playlist);
         }
-    } else {
-
-        if(!Admin.logged_in) Helper.addClass(".delete-context-menu", "context-menu-disabled");
-        Helper.removeClass(".margin-playbar", "margin-playbar");
-        Helper.addClass("#playpause", "margin-playbar");
-        Helper.removeClass("#viewers", "hide");
-        Helper.addClass(".prev playbar", "hide");
-        //Helper.addClass(".skip playbar", "hide");
-        Helper.addClass("#offline-mode", "waves-cyan");
-        Helper.removeClass("#offline-mode", "cyan");
-        if(!Helper.mobilecheck()) {
-            Helper.tooltip("#offline-mode", {
-                delay: 5,
-                position: "bottom",
-                html: "Enable local mode"
-            });
-        }
-
-        if(window.location.pathname != "/"){
-            document.getElementById("controls").removeEventListener("mouseenter", mouseEnter, false);
-            document.getElementById("controls").removeEventListener("mouseleave", mouseLeave, false);
-            document.getElementById("controls").removeEventListener("mousedown", mouseDown, false);
-            document.getElementById("controls").removeEventListener("mouseup", mouseUp, false);
-            document.getElementById("controls").removeEventListener("mousemove", seekToMove);
-            document.getElementById("controls").removeEventListener("click", seekToClick);
-            Helper.removeElement("#seekToDuration");
-            socket.on("color", Player.setBGimage);
-            socket.emit("pos", {channel: chan.toLowerCase()});
-            var add = "";
-            //if(private_channel) add = Crypt.getCookie("_uI") + "_";
-            socket.emit("list", {version: parseInt(_VERSION), channel: add + chan.toLowerCase()});
-            Helper.removeClass("#controls", "ewresize");
-        }
     }
 }
 

server/public/assets/js/listeners.js

@@ -904,6 +904,24 @@ function addDynamicListeners() {
         return false;
     });
 
+
+    addListener("change", '.backround_switch_class', function(){
+        if(document.getElementsByClassName("backround_switch_class")[0].checked) {
+            Crypt.set_background_color("dynamic");
+            Helper.addClass(".background_color_container", "hide");
+        } else {
+            Crypt.set_background_color(document.querySelector("#background_color_choser").value);
+            Helper.removeClass(".background_color_container", "hide");
+        }
+    });
+
+    addListener("change", "#background_color_choser", function() {
+        var _color = document.getElementById("background_color_choser").value;
+        if(!document.getElementsByClassName("backround_switch_class")[0].checked) {
+            Crypt.set_background_color(_color);
+        }
+    });
+
     addListener("change", '.remote_switch_class', function()
     {
         var enabled = document.getElementsByName("remote_switch")[0].checked;

server/public/assets/js/player.js

@@ -675,7 +675,7 @@ var Player = {
 
             if(!client && !embed) {
                 document.getElementById("host-title").innerText = title;
-            } 
+            }
             document.getElementById("song-title").innerText = title;
             if(!client) document.getElementById("viewers").innerHTML = outPutWord + " " + v;
             document.getElementById("song-title").setAttribute("title", title);
@@ -923,6 +923,10 @@ var Player = {
 
     setBGimage: function(c){
         var color = c.color;
+        if(Crypt.get_background_color() != "dynamic") {
+            Crypt.set_background_color(Crypt.get_background_color());
+            return;
+        }
         if(window.location.pathname != "/" && ((offline && c.only) || (!offline && !c.only) || (!offline && c.only))) {
             document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true);
             Helper.css("#nav", "background-color", Helper.rgbToHsl(color, true));

server/public/partials/channel/panel.handlebars

@@ -25,67 +25,7 @@
             </ul>
         </div>
     </li>
-    <li class="no-padding">
-        <div class="collapsible-header bold waves-effect">Client Settings
-            <i class="material-icons">settings</i>
-        </div>
-        <div class="collapsible-body info_collapsible">
-            <ul>
-                <li class="hide-on-small-only hide-on-mobile-only">
-                    <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>
-                </li>
-                {{#unless client}}
-                <li class="hide-on-small-only hide-on-mobile-only">
-                    <span class="switch-text">
-                        Remote
-                    </span>
-                    <div class="switch">
-                        <label>
-                            Disabled
-                            <input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
-                            Enabled
-                        </label>
-                    </div>
-                </li>
-                <li>
-                    <span class="switch-text">
-                        Local Mode
-                    </span>
-                    <div class="switch">
-                        <label>
-                            Disabled
-                            <input name="offline_switch" type="checkbox" class="offline_switch_class" /><span class="lever"></span>
-                            Enabled
-                        </label>
-                    </div>
-                </li>
-                {{/unless}}
-                <li>
-                    <div class="row">
-                        <div class="col s10 offset-s1">
-                            <p class="initial-line-height hide-on-mobile-only hide-on-small-only">
-                                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>
-                            {{#unless client}}
-                            <p class="initial-line-height">
-                                By enabling local mode, you won't receive updates in position of the currently playing song, you'll be able to vote as many times as you please, and you can skip to a specific location in the song.
-                            </p>
-                            {{/unless}}
-                        </div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </li>
+    {{> channel/client_settings}}
     {{#unless client}}
     <li class="no-padding remote-panel hide-on-small-only">
         <div class="collapsible-header bold waves-effect">Remote Control