From 7ef4e9dd74248f2aacaaa154cc42d09ef4d6677e Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sat, 10 Nov 2018 05:16:25 +0100
Subject: [PATCH] [web-src] Make artwork responsive, change error handling if
 an item has no artwork plus some small styling changes

---
 web-src/src/mystyles.css             | 32 +++++++++++++++++++
 web-src/src/pages/PageNowPlaying.vue | 46 +++++++++++++++++-----------
 web-src/src/store/index.js           |  3 +-
 web-src/vue.config.js                |  5 ++-
 4 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/web-src/src/mystyles.css b/web-src/src/mystyles.css
index cd90a98d..3f1e4353 100644
--- a/web-src/src/mystyles.css
+++ b/web-src/src/mystyles.css
@@ -30,12 +30,40 @@ a.navbar-item {
   cursor: move;
 }
 
+.fd-has-margin-top {
+  margin-top: 24px;
+}
+
+.fd-has-margin-bottom {
+  margin-bottom: 24px;
+}
+
+.fd-has-padding-left-right {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
 .fd-is-text-clipped {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.fd-is-fullheight {
+  height: calc(100vh - 3.25rem - 3.25rem);
+}
+
+.fd-is-fullheight-body {
+  flex-shrink: 1;
+  overflow: hidden;
+  height: 100%
+}
+
+.fd-image-fullheight {
+  height: 100%;
+  width: auto;
+}
+
 .fd-tabs-section {
   padding-bottom: 0;
 }
@@ -44,6 +72,10 @@ a.navbar-item {
   top: 52px !important;
 }
 
+.fd-has-shadow {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 .sortable-chosen .media-right {
   visibility: hidden;
 }
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 7d6d9601..7c294ca4 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -1,18 +1,23 @@
 <template>
-  <section class="hero">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <p class="heading">NOW PLAYING</p>
-        <h1 class="title is-3">
+  <section class="hero fd-is-fullheight">
+    <div class="hero-head fd-has-padding-left-right">
+      <div class="container has-text-centered fd-has-margin-top">
+        <h1 class="title is-4">
           {{ now_playing.title }}
         </h1>
-        <h2 class="title is-5">
+        <h2 class="title is-6">
           {{ now_playing.artist }}
         </h2>
-        <h3 class="subtitle is-5">
+        <h3 class="subtitle is-6">
           {{ now_playing.album }}
-          <img class="column is-one-third is-offset-one-third" img :src="artwork_uri" is-square @error="alt_artwork_uri">
         </h3>
+      </div>
+    </div>
+    <div class="hero-body fd-is-fullheight-body has-text-centered" v-show="artwork_visible">
+      <img :src="artwork_url" class="fd-has-shadow fd-image-fullheight" @load="artwork_loaded" @error="artwork_error">
+    </div>
+    <div class="hero-foot fd-has-padding-left-right">
+      <div class="container has-text-centered fd-has-margin-bottom">
         <p class="control has-text-centered fd-progress-now-playing">
           <range-slider
             class="seek-slider fd-has-action"
@@ -27,14 +32,14 @@
         <p class="content">
           <span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
         </p>
-        <p class="control has-text-centered">
+        <div class="buttons has-addons is-centered">
           <player-button-previous class="button is-medium"></player-button-previous>
           <player-button-play-pause class="button is-medium" icon_style="mdi-36px"></player-button-play-pause>
           <player-button-next class="button is-medium"></player-button-next>
           <player-button-repeat class="button is-medium is-light"></player-button-repeat>
           <player-button-shuffle class="button is-medium is-light"></player-button-shuffle>
           <player-button-consume class="button is-medium is-light"></player-button-consume>
-        </p>
+        </div>
       </div>
     </div>
   </section>
@@ -58,7 +63,8 @@ export default {
   data () {
     return {
       item_progress_ms: 0,
-      interval_id: 0
+      interval_id: 0,
+      artwork_visible: false
     }
   },
 
@@ -86,12 +92,12 @@ export default {
     now_playing () {
       return this.$store.getters.now_playing
     },
-    artwork_uri () {
-      if (this.state.artwork_url === undefined) {
-        return ''
+
+    artwork_url: function () {
+      if (this.now_playing.artwork_url && this.now_playing.artwork_url.startsWith('/')) {
+        return this.now_playing.artwork_url + '?maxwidth=600&maxheight=600'
       }
-      // for dev add 'http://localhost:3689'
-      return this.state.artwork_url + '?item_id=' + this.state.item_id
+      return this.now_playing.artwork_url
     }
   },
 
@@ -106,8 +112,12 @@ export default {
       })
     },
 
-    alt_artwork_uri: function (event) {
-      event.target.src = '/artwork-default.png'
+    artwork_loaded: function () {
+      this.artwork_visible = true
+    },
+
+    artwork_error: function () {
+      this.artwork_visible = false
     }
   },
 
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index 4e90cd84..e274d1c2 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -29,8 +29,7 @@ export default new Vuex.Store({
       'volume': 0,
       'item_id': 0,
       'item_length_ms': 0,
-      'item_progress_ms': 0,
-      'artwork_url': ''
+      'item_progress_ms': 0
     },
     queue: {
       'version': 0,
diff --git a/web-src/vue.config.js b/web-src/vue.config.js
index 8e265314..2548b5c4 100644
--- a/web-src/vue.config.js
+++ b/web-src/vue.config.js
@@ -7,7 +7,7 @@ module.exports = {
 
   // Output path for the generated index.html
   indexPath: 'index.html',
-  
+
   assetsDir: 'player',
 
   // Do not add hashes to the generated js/css filenames, would otherwise
@@ -25,6 +25,9 @@ module.exports = {
     proxy: {
       '/api': {
         target: 'http://localhost:3689',
+      },
+      '/artwork': {
+        target: 'http://localhost:3689',
       }
     }
   }