[web-src] Generate cover image if not available for now playing page,

and some styling changes for the navbars

web-src/src/components/CoverPlaceholder.vue

@@ -0,0 +1,81 @@
+<template>
+  <img :src="dataURI" :alt="alt_text">
+</template>
+
+<script>
+import SVGRenderer from '@/lib/SVGRenderer'
+import stringToColor from 'string-to-color'
+
+export default {
+  name: 'CoverPlaceholder',
+  props: ['artist', 'album'],
+
+  data () {
+    return {
+      svg: new SVGRenderer(),
+      width: 600,
+      height: 600,
+      font_family: 'sans-serif',
+      font_size: 200,
+      font_weight: 600
+    }
+  },
+
+  computed: {
+    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)
+    }
+  }
+}
+</script>

web-src/src/components/NavbarBottom.vue

@@ -162,11 +162,16 @@
 
         <!-- Outputs: stream volume -->
         <hr class="navbar-divider">
-        <div class="navbar-item">
+        <div class="navbar-item fd-has-margin-bottom">
           <div class="level is-mobile">
             <div class="level-left fd-expanded">
               <div class="level-item" style="flex-grow: 0;">
-                <a class="button is-white is-small" :class="{ 'is-loading': loading }"><span class="icon fd-has-action" :class="{ 'has-text-grey-light': !playing && !loading, 'is-loading': loading }" @click="togglePlay"><i class="mdi mdi-18px mdi-radio-tower"></i></span></a>
+                <a class="button is-white is-small" :class="{ 'is-loading': loading }">
+                  <span class="icon fd-has-action"
+                    :class="{ 'has-text-grey-light': !playing && !loading, 'is-loading': loading }"
+                    @click="togglePlay"><i class="mdi mdi-18px mdi-radio-tower"></i>
+                  </span>
+                </a>
               </div>
               <div class="level-item fd-expanded">
                 <div class="fd-expanded">

web-src/src/components/NavbarTop.vue

@@ -133,14 +133,12 @@ export default {
 
   methods: {
     on_click_outside_settings () {
-      console.log('yyyyy')
       this.show_settings_menu = !this.show_settings_menu
     }
   },
 
   watch: {
     $route (to, from) {
-      console.log('xxxx')
       this.show_settings_menu = false
     }
   }