Allowing users to define their player's colors

This commit is contained in:
Kasper Rynning-Tønnesen
2018-11-06 13:53:37 +01:00
parent 2003383967
commit be9d74d271
5 changed files with 61 additions and 112 deletions

View File

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

View File

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

View File

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

View File

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