[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.

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>

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 () {

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));
 }
 

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