From 357a0e611a5cd4a918e5027b50176efd78401250 Mon Sep 17 00:00:00 2001
From: whatdoineed2do/Ray <whatdoineed2do@nospam.gmail.com>
Date: Sat, 27 Oct 2018 19:57:42 +0100
Subject: [PATCH] [web-ui] 'now playing' page displays artwork if available
 otherwise displays 'default non artwork' image located under
 htdocs/artwork-default.png

---
 web-src/src/pages/PageNowPlaying.vue | 12 ++++++++++++
 web-src/src/store/index.js           |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 50f729d6..7d6d9601 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -11,6 +11,7 @@
         </h2>
         <h3 class="subtitle is-5">
           {{ now_playing.album }}
+          <img class="column is-one-third is-offset-one-third" img :src="artwork_uri" is-square @error="alt_artwork_uri">
         </h3>
         <p class="control has-text-centered fd-progress-now-playing">
           <range-slider
@@ -84,6 +85,13 @@ export default {
     },
     now_playing () {
       return this.$store.getters.now_playing
+    },
+    artwork_uri () {
+      if (this.state.artwork_url === undefined) {
+        return ''
+      }
+      // for dev add 'http://localhost:3689'
+      return this.state.artwork_url + '?item_id=' + this.state.item_id
     }
   },
 
@@ -96,6 +104,10 @@ export default {
       webapi.player_seek(newPosition).catch(() => {
         this.item_progress_ms = this.state.item_progress_ms
       })
+    },
+
+    alt_artwork_uri: function (event) {
+      event.target.src = '/artwork-default.png'
     }
   },
 
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index e274d1c2..4e90cd84 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -29,7 +29,8 @@ export default new Vuex.Store({
       'volume': 0,
       'item_id': 0,
       'item_length_ms': 0,
-      'item_progress_ms': 0
+      'item_progress_ms': 0,
+      'artwork_url': ''
     },
     queue: {
       'version': 0,