diff --git a/web-src/package-lock.json b/web-src/package-lock.json index c0aed525..1e2b9b09 100644 --- a/web-src/package-lock.json +++ b/web-src/package-lock.json @@ -18,7 +18,6 @@ "mdi-vue": "^3.0.13", "reconnectingwebsocket": "^1.0.0", "spotify-web-api-js": "^1.5.2", - "string-to-color": "^2.2.2", "vue": "^3.4.15", "vue-i18n": "^9.9.0", "vue-router": "^4.2.5", @@ -1224,11 +1223,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/colornames": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz", - "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==" - }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -1834,17 +1828,6 @@ "node": ">=8" } }, - "node_modules/hex-rgb": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz", - "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==", - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -2073,21 +2056,6 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, - "node_modules/lodash.padend": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz", - "integrity": "sha512-sOQs2aqGpbl27tmCS1QNZA09Uqp01ZzWfDUoD+xzTii0E7dSQfRKcRetFwa+uXaxaqL+TKm7CgD2JdKP7aZBSw==" - }, - "node_modules/lodash.trimstart": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/lodash.trimstart/-/lodash.trimstart-4.5.1.tgz", - "integrity": "sha512-b/+D6La8tU76L/61/aN0jULWHkT0EeJCmVstPBn/K9MtD2qBW83AsBNrr63dKuWYwVMO7ucv13QNO/Ek/2RKaQ==" - }, - "node_modules/lodash.words": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.words/-/lodash.words-4.2.0.tgz", - "integrity": "sha512-mXxqd8Yx9BGPij3lZKFSdOsjOTbL4krbCCp9slEozaN4EMppA2dFmK/f8HeohodprY6W0vOdiQ5WFgPaTI75xQ==" - }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -2509,14 +2477,6 @@ "node": ">=0.10.0" } }, - "node_modules/rgb-hex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-3.0.0.tgz", - "integrity": "sha512-8h7ZcwxCBDKvchSWbWngJuSCqJGQ6nDuLLg+QcRyQDbX9jMWt+PpPeXAhSla0GOooEomk3lCprUpGkMdsLjKyg==", - "engines": { - "node": ">=8" - } - }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -2668,19 +2628,6 @@ "resolved": "https://registry.npmjs.org/spotify-web-api-js/-/spotify-web-api-js-1.5.2.tgz", "integrity": "sha512-ie1gbg1wCabfobIkXTIBLUMyULS/hMCpF44Cdx2pAO0/+FrjhNSDjlDzcwCEDy+ZIo3Fscs+Gkg/GTeQ/ijo+Q==" }, - "node_modules/string-to-color": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/string-to-color/-/string-to-color-2.2.2.tgz", - "integrity": "sha512-XeA2goP7PNsSlz8RRn6KhYswnMf5Tl+38ajfy8n4oZJyMGC4qqKgHNHsZ/3qwvr42NRIjf9eSr721SyetDeMkA==", - "dependencies": { - "colornames": "^1.1.1", - "hex-rgb": "^4.1.0", - "lodash.padend": "^4.6.1", - "lodash.trimstart": "^4.5.1", - "lodash.words": "^4.2.0", - "rgb-hex": "^3.0.0" - } - }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", diff --git a/web-src/package.json b/web-src/package.json index ca26ba05..a50a8093 100644 --- a/web-src/package.json +++ b/web-src/package.json @@ -22,7 +22,6 @@ "mdi-vue": "^3.0.13", "reconnectingwebsocket": "^1.0.0", "spotify-web-api-js": "^1.5.2", - "string-to-color": "^2.2.2", "vue": "^3.4.15", "vue-i18n": "^9.9.0", "vue-router": "^4.2.5", diff --git a/web-src/src/components/CoverArtwork.vue b/web-src/src/components/CoverArtwork.vue index 9c697036..d1e07c77 100644 --- a/web-src/src/components/CoverArtwork.vue +++ b/web-src/src/components/CoverArtwork.vue @@ -1,9 +1,6 @@ @@ -21,16 +18,13 @@ export default { data() { return { - width: 600, - height: 600, - font_family: 'sans-serif', - font_size: 200, - font_weight: 600, - lazy_lifecycle: { + font: { family: 'sans-serif', weight: 'bold' }, + lifecycle: { error: (el) => { el.src = this.dataURI() } - } + }, + size: 600 } }, @@ -52,12 +46,11 @@ export default { methods: { dataURI() { - return renderSVG(this.caption, this.alt_text, { - width: this.width, - height: this.height, - font_family: this.font_family, - font_size: this.font_size, - font_weight: this.font_weight + return renderSVG({ + alternate: this.alt_text, + caption: this.caption, + font: this.font, + size: this.size }) } } diff --git a/web-src/src/lib/SVGRenderer.js b/web-src/src/lib/SVGRenderer.js index a4ee6a5e..b019393e 100644 --- a/web-src/src/lib/SVGRenderer.js +++ b/web-src/src/lib/SVGRenderer.js @@ -1,65 +1,33 @@ -/* - * SVGRenderer taken from https://github.com/bendera/placeholder published under MIT License - * Copyright (c) 2017 Adam Bender - * https://github.com/bendera/placeholder/blob/master/LICENSE - */ - -import stringToColor from 'string-to-color' - -function is_background_light(background_color) { - // Based on https://stackoverflow.com/a/44615197 - const hex = background_color.replace(/#/, '') - const r = parseInt(hex.substr(0, 2), 16) - const g = parseInt(hex.substr(2, 2), 16) - const b = parseInt(hex.substr(4, 2), 16) - - const luma = [0.299 * r, 0.587 * g, 0.114 * b].reduce((a, b) => a + b) / 255 - - return luma > 0.5 +const toColor = (string) => { + var hash = 0 + for (var i = 0; i < string.length; i++) { + hash = string.charCodeAt(i) + ((hash << 5) - hash) + } + return (hash & 0x00ffffff).toString(16) } -function calc_text_color(background_color) { - return is_background_light(background_color) ? '#000000' : '#ffffff' +const luminance = (color) => { + return ( + [0.2126, 0.7152, 0.0722].reduce( + (luminance, factor, index) => + luminance + + Number('0x' + color.slice(index * 2, index * 2 + 2)) * factor, + 0 + ) / 255 + ) } -function createSVG(data) { - const svg = - `` + - `` + - `` + - `` + - `` + - ` ` + - ` ` + - ` ${data.caption}` + - ` ` + - `` + - `` - +export const renderSVG = (data) => { + const color = toColor(data.alternate), + svg = ` + + + ${data.caption} + + ` return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}` } - -function renderSVG(caption, alt_text, params) { - const background_color = stringToColor(alt_text) - const text_color = calc_text_color(background_color) - const paramsSVG = { - width: params.width, - height: params.height, - textColor: text_color, - backgroundColor: background_color, - caption, - fontFamily: params.font_family, - fontSize: params.font_size, - fontWeight: params.font_weight - } - return createSVG(paramsSVG) -} - -export { renderSVG }