diff --git a/server/public/assets/html/offline.html b/server/public/assets/html/offline.html index 06f2a172..d1405d6c 100755 --- a/server/public/assets/html/offline.html +++ b/server/public/assets/html/offline.html @@ -10,11 +10,12 @@ - + +
diff --git a/server/public/assets/js/helpers.js b/server/public/assets/js/helpers.js index 707469e3..a3ce2ff5 100755 --- a/server/public/assets/js/helpers.js +++ b/server/public/assets/js/helpers.js @@ -118,6 +118,35 @@ var Helper = { } : null; }, + hslToHex: function(h, s, l) { + h /= 360; + s /= 100; + l /= 100; + var r, g, b; + if (s === 0) { + r = g = b = l; // achromatic + } else { + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + }; + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + var toHex = function(x) { + var hex = Math.round(x * 255).toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; + return '#' + toHex(r) + "" + toHex(g) + "" + toHex(b); + }, + hslToRgb: function(h, s, l) { var r, g, b; @@ -419,78 +448,78 @@ var Helper = { hexToComplimentary: function(hex){ - // Convert hex to rgb - // Credit to Denis http://stackoverflow.com/a/36253499/4939630 - var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')'; + // Convert hex to rgb + // Credit to Denis http://stackoverflow.com/a/36253499/4939630 + var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')'; - // Get array of RGB values - rgb = rgb.replace(/[^\d,]/g, '').split(','); + // Get array of RGB values + rgb = rgb.replace(/[^\d,]/g, '').split(','); - var r = rgb[0], g = rgb[1], b = rgb[2]; + var r = rgb[0], g = rgb[1], b = rgb[2]; - // Convert RGB to HSL - // Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630 - r /= 255.0; - g /= 255.0; - b /= 255.0; - var max = Math.max(r, g, b); - var min = Math.min(r, g, b); - var h, s, l = (max + min) / 2.0; + // Convert RGB to HSL + // Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630 + r /= 255.0; + g /= 255.0; + b /= 255.0; + var max = Math.max(r, g, b); + var min = Math.min(r, g, b); + var h, s, l = (max + min) / 2.0; - if(max == min) { - h = s = 0; //achromatic - } else { - var d = max - min; - s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min)); + if(max == min) { + h = s = 0; //achromatic + } else { + var d = max - min; + s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min)); - if(max == r && g >= b) { - h = 1.0472 * (g - b) / d ; - } else if(max == r && g < b) { - h = 1.0472 * (g - b) / d + 6.2832; - } else if(max == g) { - h = 1.0472 * (b - r) / d + 2.0944; - } else if(max == b) { - h = 1.0472 * (r - g) / d + 4.1888; + if(max == r && g >= b) { + h = 1.0472 * (g - b) / d ; + } else if(max == r && g < b) { + h = 1.0472 * (g - b) / d + 6.2832; + } else if(max == g) { + h = 1.0472 * (b - r) / d + 2.0944; + } else if(max == b) { + h = 1.0472 * (r - g) / d + 4.1888; + } } - } - h = h / 6.2832 * 360.0 + 0; + h = h / 6.2832 * 360.0 + 0; - // Shift hue to opposite side of wheel and convert to [0-1] value - h+= 180; - if (h > 360) { h -= 360; } - h /= 360; + // Shift hue to opposite side of wheel and convert to [0-1] value + h+= 180; + if (h > 360) { h -= 360; } + h /= 360; - // Convert h s and l values into r g and b values - // Adapted from answer by Mohsen http://stackoverflow.com/a/9493060/4939630 - if(s === 0){ - r = g = b = l; // achromatic - } else { - var hue2rgb = function hue2rgb(p, q, t){ - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - }; + // Convert h s and l values into r g and b values + // Adapted from answer by Mohsen http://stackoverflow.com/a/9493060/4939630 + if(s === 0){ + r = g = b = l; // achromatic + } else { + var hue2rgb = function hue2rgb(p, q, t){ + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } - r = Math.round(r * 255); - g = Math.round(g * 255); - b = Math.round(b * 255); + r = Math.round(r * 255); + g = Math.round(g * 255); + b = Math.round(b * 255); - // Convert r b and g values to hex - rgb = b | (g << 8) | (r << 16); - return "#" + (0x1000000 | rgb).toString(16).substring(1); -}, + // Convert r b and g values to hex + rgb = b | (g << 8) | (r << 16); + return "#" + (0x1000000 | rgb).toString(16).substring(1); + }, }; @@ -512,42 +541,42 @@ String.prototype.startsWith = function(searchString, position) { }; function similarity(s1, s2) { - var longer = s1; - var shorter = s2; - if (s1.length < s2.length) { - longer = s2; - shorter = s1; - } - var longerLength = longer.length; - if (longerLength == 0) { - return 1.0; - } - return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength); + var longer = s1; + var shorter = s2; + if (s1.length < s2.length) { + longer = s2; + shorter = s1; + } + var longerLength = longer.length; + if (longerLength == 0) { + return 1.0; + } + return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength); } function editDistance(s1, s2) { - s1 = s1.toLowerCase(); - s2 = s2.toLowerCase(); + s1 = s1.toLowerCase(); + s2 = s2.toLowerCase(); - var costs = new Array(); - for (var i = 0; i <= s1.length; i++) { - var lastValue = i; - for (var j = 0; j <= s2.length; j++) { - if (i == 0) - costs[j] = j; - else { - if (j > 0) { - var newValue = costs[j - 1]; - if (s1.charAt(i - 1) != s2.charAt(j - 1)) - newValue = Math.min(Math.min(newValue, lastValue), - costs[j]) + 1; - costs[j - 1] = lastValue; - lastValue = newValue; + var costs = new Array(); + for (var i = 0; i <= s1.length; i++) { + var lastValue = i; + for (var j = 0; j <= s2.length; j++) { + if (i == 0) + costs[j] = j; + else { + if (j > 0) { + var newValue = costs[j - 1]; + if (s1.charAt(i - 1) != s2.charAt(j - 1)) + newValue = Math.min(Math.min(newValue, lastValue), + costs[j]) + 1; + costs[j - 1] = lastValue; + lastValue = newValue; + } + } } - } + if (i > 0) + costs[s2.length] = lastValue; } - if (i > 0) - costs[s2.length] = lastValue; - } - return costs[s2.length]; + return costs[s2.length]; } diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 81625051..0bf4c2fe 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -630,7 +630,12 @@ var Player = { document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true); $("#nav").css("background-color", Helper.rgbToHsl(color, true)); $(".title-container").css("background-color", Helper.rgbToHsl(color, true)); - $("meta[name=theme-color]").attr("content", Helper.rgbToHex(color[0], color[1], color[2])); + var hexHsl = Helper.rgbToHex(color[0], color[1], color[2]); + try { + var hsl = Helper.rgbToHsl(color, true).replace("hsl(", "").replace(")", "").replace("%", "").replace(/ /g,'').replace("%", "").split(","); + hexHsl = Helper.hslToHex(parseInt(hsl[0]), parseInt(hsl[1]), parseInt(hsl[2])); + } catch(e) {} + $("meta[name=theme-color]").attr("content", hexHsl); if(!client) { var new_color = Helper.rgbToHex(color[0], color[1], color[2]); new_color = Helper.hexToComplimentary(new_color);