owntone-server/web-src/src/components/CoverArtwork.vue

<template>
  <figure>
    <img
      v-show="artwork_visible"
      :src="artwork_url_with_size"
      @load="artwork_loaded"
      @error="artwork_error"
      @click="$emit('click')">
    <img
      v-show="!artwork_visible"
      :src="dataURI"
      :alt="alt_text"
      @click="$emit('click')">
  </figure>
</template>

<script>
import webapi from '@/webapi'
import SVGRenderer from '@/lib/SVGRenderer'
import stringToColor from 'string-to-color'

export default {
  name: 'CoverArtwork',
  props: ['artist', 'album', 'artwork_url'],

  data () {
    return {
      svg: new SVGRenderer(),
      width: 600,
      height: 600,
      font_family: 'sans-serif',
      font_size: 200,
      font_weight: 600,

      artwork_visible: false
    }
  },

  computed: {
    artwork_url_with_size: function () {
      return webapi.artwork_url_append_size_params(this.artwork_url)
    },

    alt_text () {
      return this.artist + ' - ' + this.album
    },

    caption () {
      if (this.album) {
        return this.album.substring(0, 2)
      }
      if (this.artist) {
        return this.artist.substring(0, 2)
      }
      return ''
    },

    background_color () {
      return stringToColor(this.alt_text)
    },

    is_background_light () {
      // Based on https://stackoverflow.com/a/44615197
      const hex = this.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
    },

    text_color () {
      return this.is_background_light ? '#000000' : '#ffffff'
    },

    rendererParams () {
      return {
        width: this.width,
        height: this.height,
        textColor: this.text_color,
        backgroundColor: this.background_color,
        caption: this.caption,
        fontFamily: this.font_family,
        fontSize: this.font_size,
        fontWeight: this.font_weight
      }
    },

    dataURI () {
      return this.svg.render(this.rendererParams)
    }
  },

  methods: {
    artwork_loaded: function () {
      this.artwork_visible = true
    },

    artwork_error: function () {
      this.artwork_visible = false
    }
  }
}
</script>