[web] Remove library string-to-color

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",

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",

web-src/src/components/CoverArtwork.vue

@@ -1,9 +1,6 @@
 <template>
   <figure>
-    <img
+    <img v-lazy="{ src: artwork_url, lifecycle }" @click="$emit('click')" />
-      v-lazy="{ src: artwork_url, lifecycle: lazy_lifecycle }"
-      @click="$emit('click')"
-    />
   </figure>
 </template>
 
@@ -21,16 +18,13 @@ export default {
 
   data() {
     return {
-      width: 600,
+      font: { family: 'sans-serif', weight: 'bold' },
-      height: 600,
+      lifecycle: {
-      font_family: 'sans-serif',
-      font_size: 200,
-      font_weight: 600,
-      lazy_lifecycle: {
         error: (el) => {
           el.src = this.dataURI()
         }
-      }
+      },
+      size: 600
     }
   },
 
@@ -52,12 +46,11 @@ export default {
 
   methods: {
     dataURI() {
-      return renderSVG(this.caption, this.alt_text, {
+      return renderSVG({
-        width: this.width,
+        alternate: this.alt_text,
-        height: this.height,
+        caption: this.caption,
-        font_family: this.font_family,
+        font: this.font,
-        font_size: this.font_size,
+        size: this.size
-        font_weight: this.font_weight
       })
     }
   }

web-src/src/lib/SVGRenderer.js

@@ -1,65 +1,33 @@
-/*
+const toColor = (string) => {
- * SVGRenderer taken from https://github.com/bendera/placeholder published under MIT License
+  var hash = 0
- * Copyright (c) 2017 Adam Bender
+  for (var i = 0; i < string.length; i++) {
- * https://github.com/bendera/placeholder/blob/master/LICENSE
+    hash = string.charCodeAt(i) + ((hash << 5) - hash)
- */
+  }
-
+  return (hash & 0x00ffffff).toString(16)
-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
 }
 
-function calc_text_color(background_color) {
+const luminance = (color) => {
-  return is_background_light(background_color) ? '#000000' : '#ffffff'
+  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) {
+export const renderSVG = (data) => {
-  const svg =
+  const color = toColor(data.alternate),
-    `<svg width="${data.width}" height="${data.height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${data.width} ${data.height}" preserveAspectRatio="none">` +
+    svg = `<svg xmlns="http://www.w3.org/2000/svg"
-    `<defs>` +
+    width="${data.size}" height="${data.size}"
-    `<style type="text/css">` +
+    viewBox="0 0 ${data.size} ${data.size}">
-    `    #holder text {` +
+    <rect width="100%" height="100%" fill="#${color}"/>
-    `      fill: ${data.textColor};` +
+    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
-    `      font-family: ${data.fontFamily};` +
+      font-weight="${data.font.weight}" font-family="${data.font.family}"
-    `      font-size: ${data.fontSize}px;` +
+      font-size="${data.size / 3}" fill="${luminance(color) > 0.5 ? '#000000' : '#FFFFFF'}">
-    `      font-weight: ${data.fontWeight};` +
+      ${data.caption}
-    `    }` +
+    </text>
-    `  </style>` +
+  </svg>`
-    `</defs>` +
-    `<g id="holder">` +
-    `  <rect width="100%" height="100%" fill="${data.backgroundColor}"></rect>` +
-    `  <g>` +
-    `    <text text-anchor="middle" x="50%" y="50%" dy=".3em">${data.caption}</text>` +
-    `  </g>` +
-    `</g>` +
-    `</svg>`
-
   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 }