From be9d74d271efd4a53925f521281ae5f4ba02de16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Tue, 6 Nov 2018 13:53:37 +0100 Subject: [PATCH 1/2] Allowing users to define their player's colors --- server/public/assets/js/crypt.js | 32 ++++++++++ server/public/assets/js/embed.js | 55 ++-------------- server/public/assets/js/listeners.js | 18 ++++++ server/public/assets/js/player.js | 6 +- .../public/partials/channel/panel.handlebars | 62 +------------------ 5 files changed, 61 insertions(+), 112 deletions(-) diff --git a/server/public/assets/js/crypt.js b/server/public/assets/js/crypt.js index 9805e47d..d575aa32 100755 --- a/server/public/assets/js/crypt.js +++ b/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; diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index 740732cd..61d6fa86 100755 --- a/server/public/assets/js/embed.js +++ b/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"); - } } } diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 3f5ee2e8..4087fddc 100755 --- a/server/public/assets/js/listeners.js +++ b/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; diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index b54bdb0b..88281691 100755 --- a/server/public/assets/js/player.js +++ b/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)); diff --git a/server/public/partials/channel/panel.handlebars b/server/public/partials/channel/panel.handlebars index b7bab0e0..1908ee78 100755 --- a/server/public/partials/channel/panel.handlebars +++ b/server/public/partials/channel/panel.handlebars @@ -25,67 +25,7 @@ -
  • -
    Client Settings - settings -
    -
    -
      -
    • - - Intelligent - -
      - -
      -
      • - {{#unless client}} -
    • - - Remote - -
      - -
      -
      • -
    • - - Local Mode - -
      - -
      -
      • - {{/unless}} -
    • -
      -
      -

      - 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. -

      - {{#unless client}} -

      - 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. -

      - {{/unless}} -
      -
      -
      • -
    -
    -
    • + {{> channel/client_settings}} {{#unless client}}
  • Remote Control From e16135d616f756cd9a4f39fb0313ac3a2d5753df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Tue, 6 Nov 2018 13:57:21 +0100 Subject: [PATCH 2/2] Added missing settings-file --- .../channel/client_settings.handlebars | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 server/public/partials/channel/client_settings.handlebars diff --git a/server/public/partials/channel/client_settings.handlebars b/server/public/partials/channel/client_settings.handlebars new file mode 100644 index 00000000..376786ad --- /dev/null +++ b/server/public/partials/channel/client_settings.handlebars @@ -0,0 +1,81 @@ +
  • +
    Client Settings + settings +
    +
    +
      +
    • + + Intelligent + +
      + +
      +
      • + {{#unless client}} +
    • + + Remote + +
      + +
      +
      • +
    • + + Local Mode + +
      + +
      +
      • + {{/unless}} +
    • + + Backgroundcolor + +
      + +
      +
      • +
    • +
      + Color +
      + +
      +
      +
      • +
    • +
      +
      +

      + 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. +

      + {{#unless client}} +

      + 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. +

      + {{/unless}} +
      +
      +
      • +
    +
    +