mirror of
https://github.com/owntone/owntone-server.git
synced 2024-12-27 15:45:56 -05:00
[web] Remove library string-to-color
This commit is contained in:
Alain Nussbaumer
parent
b845453274
commit
aa57cd443f
53
web-src/package-lock.json
generated
53
web-src/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<figure>
|
||||
<img
|
||||
v-lazy="{ src: artwork_url, lifecycle: lazy_lifecycle }"
|
||||
@click="$emit('click')"
|
||||
/>
|
||||
<img v-lazy="{ src: artwork_url, lifecycle }" @click="$emit('click')" />
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 =
|
||||
`<svg width="${data.width}" height="${data.height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${data.width} ${data.height}" preserveAspectRatio="none">` +
|
||||
`<defs>` +
|
||||
`<style type="text/css">` +
|
||||
` #holder text {` +
|
||||
` fill: ${data.textColor};` +
|
||||
` font-family: ${data.fontFamily};` +
|
||||
` font-size: ${data.fontSize}px;` +
|
||||
` font-weight: ${data.fontWeight};` +
|
||||
` }` +
|
||||
` </style>` +
|
||||
`</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>`
|
||||
|
||||
export const renderSVG = (data) => {
|
||||
const color = toColor(data.alternate),
|
||||
svg = `<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="${data.size}" height="${data.size}"
|
||||
viewBox="0 0 ${data.size} ${data.size}">
|
||||
<rect width="100%" height="100%" fill="#${color}"/>
|
||||
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
|
||||
font-weight="${data.font.weight}" font-family="${data.font.family}"
|
||||
font-size="${data.size / 3}" fill="${luminance(color) > 0.5 ? '#000000' : '#FFFFFF'}">
|
||||
${data.caption}
|
||||
</text>
|
||||
</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 }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user