From fe0ca815a7ad9e963eb7e2e4373c478ec9484095 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Mon, 20 Apr 2020 19:09:07 +0200
Subject: [PATCH] [web-src] Always show cover artwork in album dialog

If no artwork is available or not yet loaded, falls back to the
generated cover artwork. Avoids jumping of dialog after loading of
remote image finished.
---
 ...{CoverPlaceholder.vue => CoverArtwork.vue} | 37 +++++++++++++++++--
 web-src/src/components/ModalDialogAlbum.vue   | 12 ++++--
 web-src/src/mystyles.css                      |  2 +
 web-src/src/pages/PageNowPlaying.vue          | 35 ++++--------------
 4 files changed, 50 insertions(+), 36 deletions(-)
 rename web-src/src/components/{CoverPlaceholder.vue => CoverArtwork.vue} (68%)

diff --git a/web-src/src/components/CoverPlaceholder.vue b/web-src/src/components/CoverArtwork.vue
similarity index 68%
rename from web-src/src/components/CoverPlaceholder.vue
rename to web-src/src/components/CoverArtwork.vue
index 90eb3166..42642a5f 100644
--- a/web-src/src/components/CoverPlaceholder.vue
+++ b/web-src/src/components/CoverArtwork.vue
@@ -1,14 +1,27 @@
 <template>
-  <img :src="dataURI" :alt="alt_text">
+  <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: 'CoverPlaceholder',
-  props: ['artist', 'album'],
+  name: 'CoverArtwork',
+  props: ['artist', 'album', 'artwork_url'],
 
   data () {
     return {
@@ -17,11 +30,17 @@ export default {
       height: 600,
       font_family: 'sans-serif',
       font_size: 200,
-      font_weight: 600
+      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
     },
@@ -76,6 +95,16 @@ export default {
     dataURI () {
       return this.svg.render(this.rendererParams)
     }
+  },
+
+  methods: {
+    artwork_loaded: function () {
+      this.artwork_visible = true
+    },
+
+    artwork_error: function () {
+      this.artwork_visible = false
+    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 4bfcd4dc..e9f0d69b 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -6,14 +6,16 @@
         <div class="modal-content fd-modal-card">
           <div class="card">
             <div class="card-content">
-              <figure class="image is-square fd-has-margin-bottom" v-show="artwork_visible">
-                <img :src="artwork_url" @load="artwork_loaded" @error="artwork_error" class="fd-has-shadow">
-              </figure>
+              <cover-artwork
+                :artwork_url="album.artwork_url"
+                :artist="album.artist"
+                :album="album.name"
+                class="image is-square fd-has-margin-bottom fd-has-shadow" />
               <p class="title is-4">
                 <a class="has-text-link" @click="open_album">{{ album.name }}</a>
               </p>
               <div class="buttons" v-if="media_kind === 'podcast'">
-                <a class="button is-small" v-if="new_tracks > 0" @click="mark_played">Mark as played</a>
+                <a class="button is-small" @click="mark_played">Mark as played</a>
                 <a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
               </div>
               <div class="content is-small">
@@ -51,10 +53,12 @@
 </template>
 
 <script>
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
+  components: { CoverArtwork },
   props: ['show', 'album', 'media_kind', 'new_tracks'],
 
   data () {
diff --git a/web-src/src/mystyles.css b/web-src/src/mystyles.css
index 67f65675..a29fa469 100644
--- a/web-src/src/mystyles.css
+++ b/web-src/src/mystyles.css
@@ -113,6 +113,7 @@ section.fd-tabs-section + section.fd-content {
   height: calc(100vh - 3.25rem - 3.25rem);
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
 .fd-is-fullheight .fd-is-expanded {
@@ -131,6 +132,7 @@ section.fd-tabs-section + section.fd-content {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  object-position: bottom;
   filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3));
 }
 
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 28cb2d34..5c1bb757 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -2,19 +2,11 @@
   <section>
     <div v-if="now_playing.id > 0" class="fd-is-fullheight">
       <div class="fd-is-expanded">
-        <figure @click="open_dialog(now_playing)" class="fd-cover-image">
-          <img
-            v-show="artwork_visible"
-            :src="artwork_url"
-            class="fd-has-action"
-            @load="artwork_loaded"
-            @error="artwork_error">
-          <cover-placeholder
-            v-show="!artwork_visible"
-            :artist="now_playing.artist"
-            :album="now_playing.album"
-            class="fd-has-action" />
-        </figure>
+        <cover-artwork @click="open_dialog(now_playing)"
+          :artwork_url="now_playing.artwork_url"
+          :artist="now_playing.artist"
+          :album="now_playing.album"
+          class="fd-cover-image fd-has-action" />
       </div>
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered">
@@ -68,19 +60,18 @@
 <script>
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
 import RangeSlider from 'vue-range-slider'
-import CoverPlaceholder from '@/components/CoverPlaceholder'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
 export default {
   name: 'PageNowPlaying',
-  components: { ModalDialogQueueItem, RangeSlider, CoverPlaceholder },
+  components: { ModalDialogQueueItem, RangeSlider, CoverArtwork },
 
   data () {
     return {
       item_progress_ms: 0,
       interval_id: 0,
-      artwork_visible: false,
 
       show_details_modal: false,
       selected_item: {}
@@ -113,10 +104,6 @@ export default {
       return this.$store.getters.now_playing
     },
 
-    artwork_url: function () {
-      return webapi.artwork_url_append_size_params(this.now_playing.artwork_url)
-    },
-
     settings_option_show_composer_now_playing () {
       return this.$store.getters.settings_option_show_composer_now_playing
     },
@@ -150,14 +137,6 @@ export default {
       })
     },
 
-    artwork_loaded: function () {
-      this.artwork_visible = true
-    },
-
-    artwork_error: function () {
-      this.artwork_visible = false
-    },
-
     open_dialog: function (item) {
       this.selected_item = item
       this.show_details_modal = true