Now able to change color of list on embed

index.php

@@ -158,6 +158,8 @@
                 <input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
                 <label for="height_embed" class="padding_left_6 embed-label">Height</label>
                 <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
+                <label for="color_embed" class="padding_left_6 embed-label">Color</label>
+                <input type="color" id="color_embed" class="settings_embed" value="#808080" />
               </p>
               <textarea id="embed-area"></textarea>
             </div>

static/css/embed.css

@@ -32,6 +32,10 @@
   color:gray;
 }
 
+.list-song {
+    background-color: rgba(255, 255, 255, 0.04) !important;
+}
+
 #list-song-html {
   display:none;
 }

static/js/embed.js

@@ -19,6 +19,7 @@ var previous_video_id;
 var hash 	 = window.location.hash.substring(1).split("&");
 var chan 	 = hash[0];
 var autoplay = false;
+var color = "#808080";
 
 var connection_options = {
 	'sync disconnect on unload':true,
@@ -28,12 +29,14 @@ var connection_options = {
 
 $(document).ready(function(){
 
-	if(hash.length == 2 && hash[1] == "autoplay"){
+	if(hash.length == 3 && hash[2] == "autoplay"){
 		autoplay = true;
 	}else{
 		paused = true;
 	}
 
+	color = "#" + hash[1];
+
 	$("head").append('<link type="text/css" rel="stylesheet" href="/static/css/embed.css" />');
 	$("head").append('<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" />');
 
@@ -63,6 +66,8 @@ $(document).ready(function(){
 	Playercontrols.initSlider();
 
 	window.setVolume = setVolume;
+	$("#controls").css("background-color", color);
+	$("#playlist").css("background-color", color);
 });
 
 

static/js/listeners.js

@@ -38,6 +38,7 @@ var connect_error         = false;
 var access_token_data_youtube = {};
 var youtube_authenticated = false;
 var chromecastAvailable = false;
+var color               = "808080";
 var castSession;
 
 if(localStorage.debug === undefined){
@@ -228,7 +229,7 @@ function init(){
     $( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
 	$("#search").focus();
 	$("#embed-button").css("display", "inline-block");
-	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
 	$("#search").attr("placeholder", "Find song on YouTube...");
 
 
@@ -424,8 +425,8 @@ function disable_debug(){
 	localStorage.debug = false;
 }
 
-function embed_code(autoplay, width, height){
+function embed_code(autoplay, width, height, color){
-    return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
+    return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + '&' + color + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
 }
 
 function randomString(length){
@@ -582,13 +583,19 @@ $(document).on('click', "#aprilfools", function(){
 $(document).on('keyup mouseup', '#width_embed', function(){
     var that = $(this);
     embed_width = that.val();
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
 });
 
 $(document).on('keyup mouseup', '#height_embed', function(){
     var that = $(this);
     embed_height = that.val();
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+});
+
+$(document).on('input', '#color_embed', function(){
+    var that = $(this);
+    color = that.val().substring(1);
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
 });
 
 $(document).on('click', ".chan-link", function(e){
@@ -709,7 +716,7 @@ $(window).focus(function(){
 $(document).on("change", "#autoplay", function() {
     if(this.checked) embed_autoplay = "&autoplay";
     else embed_autoplay = "";
-	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height));
+	$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
 });
 
 $(document).on("click", "#playbutton_remote", function(e) {