[web] Fix cover artwork display on different pages #1506

On some pages, the cover artwork was overlapping or not displayed properly. Moreover, the use of the component CoverArtwork has been generalised.

web-src/src/components/ListAlbums.vue

@@ -8,20 +8,14 @@
       />
     </div>
     <div v-else-if="album.isItem" class="media" @click="open_album(album.item)">
-      <div v-if="is_visible_artwork" class="media-left fd-has-action">
+      <div v-if="is_visible_artwork" class="media-left">
-        <div class="image is-64x64 fd-has-shadow fd-has-action">
+        <cover-artwork
-          <figure>
+          :artwork_url="album.item.artwork_url"
-            <img
+          :artist="album.item.artist"
-              v-lazy="{
+          :album="album.item.name"
-                src: artwork_url_with_size(album.item.artwork_url),
+          class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
-                lifecycle: artwork_options.lazy_lifecycle,
+          @click="show_album_details_modal = true"
-                delay: 500
+        />
-              }"
-              :album="album.item.name"
-              :artist="album.item.artist"
-            />
-          </figure>
-        </div>
       </div>
       <div class="media-content fd-has-action is-clipped">
         <div style="margin-top: 0.7rem">
@@ -73,15 +67,14 @@
 </template>
 
 <script>
+import CoverArtwork from '@/components/CoverArtwork.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
-import { renderSVG } from '@/lib/SVGRenderer'
 
 export default {
   name: 'ListAlbums',
-  components: { ModalDialogAlbum, ModalDialog },
+  components: { CoverArtwork, ModalDialogAlbum, ModalDialog },
-
   props: ['albums', 'media_kind', 'hide_group_title'],
   emits: ['play-count-changed', 'podcast-deleted'],
 
@@ -89,25 +82,8 @@ export default {
     return {
       show_details_modal: false,
       selected_album: {},
-
       show_remove_podcast_modal: false,
-      rss_playlist_to_remove: {},
+      rss_playlist_to_remove: {}
-
-      artwork_options: {
-        width: 600,
-        height: 600,
-        font_family: 'sans-serif',
-        font_size: 200,
-        font_weight: 600,
-        lazy_lifecycle: {
-          error: (el) => {
-            el.src = this.dataURI(
-              el.attributes.album.value,
-              el.attributes.artist.value
-            )
-          }
-        }
-      }
     }
   },
 
@@ -166,43 +142,6 @@ export default {
         .then(() => {
           this.$emit('podcast-deleted')
         })
-    },
-
-    artwork_url_with_size: function (artwork_url) {
-      if (this.artwork_options.width > 0 && this.artwork_options.height > 0) {
-        return webapi.artwork_url_append_size_params(
-          artwork_url,
-          this.artwork_options.width,
-          this.artwork_options.height
-        )
-      }
-      return webapi.artwork_url_append_size_params(artwork_url)
-    },
-
-    alt_text(album, artist) {
-      return artist + ' - ' + album
-    },
-
-    caption(album, artist) {
-      if (album) {
-        return album.substring(0, 2)
-      }
-      if (artist) {
-        return artist.substring(0, 2)
-      }
-      return ''
-    },
-
-    dataURI: function (album, artist) {
-      const caption = this.caption(album, artist)
-      const alt_text = this.alt_text(album, artist)
-      return renderSVG(caption, alt_text, {
-        width: this.artwork_options.width,
-        height: this.artwork_options.height,
-        font_family: this.artwork_options.font_family,
-        font_size: this.artwork_options.font_size,
-        font_weight: this.artwork_options.font_weight
-      })
     }
   }
 }

web-src/src/components/ModalDialogAlbum.vue

@@ -10,7 +10,7 @@
                 :artwork_url="album.artwork_url"
                 :artist="album.artist"
                 :album="album.name"
-                class="image is-square fd-has-margin-bottom fd-has-shadow"
+                class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
               />
               <p class="title is-4">
                 <a

web-src/src/components/SpotifyModalDialogAlbum.vue

@@ -6,17 +6,14 @@
         <div class="modal-content fd-modal-card">
           <div class="card">
             <div class="card-content">
-              <figure
+              <cover-artwork
-                v-show="artwork_visible"
+                :artwork_url="artwork_url"
-                class="image is-square fd-has-margin-bottom"
+                :artist="album.artist"
-              >
+                :album="album.name"
-                <img
+                class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
-                  :src="artwork_url"
+                @load="artwork_loaded"
-                  class="fd-has-shadow"
+                @error="artwork_error"
-                  @load="artwork_loaded"
+              />
-                  @error="artwork_error"
-                />
-              </figure>
               <p class="title is-4">
                 <a
                   class="has-text-link"
@@ -96,9 +93,11 @@
 
 <script>
 import webapi from '@/webapi'
+import CoverArtwork from '@/components/CoverArtwork.vue'
 
 export default {
   name: 'SpotifyModalDialogAlbum',
+  components: { CoverArtwork },
   props: ['show', 'album'],
   emits: ['close'],
 

web-src/src/mystyles.scss

@@ -126,7 +126,7 @@ section.hero + section.fd-content {
   top: 52px !important;
 }
 
-.fd-has-shadow {
+.fd-has-shadow img {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
@@ -154,51 +154,50 @@ section.hero + section.fd-content {
 }
 
 .fd-is-fullheight .fd-is-expanded {
-  max-height: calc(100vh - 25rem);
   padding: 1.5rem;
   overflow: hidden;
-  flex-grow: 1;
-  flex-shrink: 1;
-
-  /* Use flex box to properly size children */
-  display: flex;
 }
 
-.fd-cover-image {
+.fd-cover {
   display: flex;
-  flex-grow: 1;
+  justify-content: center;
-  flex-shrink: 1;
+  &-small-image {
-
+    width: 64px;
-  /* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
+    height: 64px;
-  min-width: 0;
+    img {
-  min-height: 0;
+      border-radius: $radius-small;
-  overflow: hidden;
+      max-width: 64px;
-
+      max-height: 64px;
-  /* Padding matches the drop-shadow size of the image */
+    }
-  padding: 10px;
+  }
-}
+  &-medium-image {
-
+    @include from($tablet) {
-.fd-cover-image img {
+      justify-content: right;
-  /* Use object-fit to properly size the cover artwork: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
+    }
-  object-fit: contain;
+    img {
-  object-position: center bottom;
+      border-radius: $radius;
-  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3))
+      max-height: calc(150px - 1.5rem);
-    drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
+    }
-
+  }
-  /* Allow flex item to grow/shrink to fill the whole container size */
+  &-normal-image {
-  flex-grow: 1;
+    img {
-  flex-shrink: 1;
+      border-radius: $radius-large;
-
+      width: 100%;
-  /* Unset height/width to allow flex sizing */
+    }
-  height: unset;
+  }
-  width: unset;
+  &-big-image {
-  max-width: unset;
+    @include mobile {
-  max-height: unset;
+      @media screen and (orientation: landscape) {
-
+        img {
-  /* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
+          display: none;
-  min-width: 0;
+        }
-  min-height: 0;
+      }
-  overflow: hidden;
+    }
+    img {
+      border-radius: $radius-large;
+      max-height: calc(100vh - 26rem);
+    }
+  }
 }
 
 .sortable-chosen .media-right {
@@ -296,13 +295,11 @@ hr.fd-navbar-divider {
 
 .column {
   &.fd-has-cover {
-    max-height: 150px;
-    max-width: 150px;
     @include mobile {
       margin: auto;
     }
     @include from($tablet) {
-      margin: auto 0 auto auto;
+      margin-right: 0;
     }
   }
 }

web-src/src/pages/PageAlbum.vue

@@ -19,14 +19,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
+      <cover-artwork
-        <cover-artwork
+        :artwork_url="album.artwork_url"
-          :artwork_url="album.artwork_url"
+        :artist="album.artist"
-          :artist="album.artist"
+        :album="album.name"
-          :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
-          @click="show_album_details_modal = true"
+        @click="show_album_details_modal = true"
-        />
+      />
-      </p>
     </template>
     <template #content>
       <p

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -19,14 +19,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
+      <cover-artwork
-        <cover-artwork
+        :artwork_url="album.artwork_url"
-          :artwork_url="album.artwork_url"
+        :artist="album.artist"
-          :artist="album.artist"
+        :album="album.name"
-          :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
-          @click="show_album_details_modal = true"
+        @click="show_album_details_modal = true"
-        />
+      />
-      </p>
     </template>
     <template #content>
       <p
@@ -101,11 +100,6 @@ export default {
 
     play: function () {
       webapi.player_play_uri(this.album.uri, false)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
     }
   }
 }

web-src/src/pages/PageNowPlaying.vue

@@ -1,19 +1,17 @@
 <template>
   <section>
     <div v-if="now_playing.id > 0" class="fd-is-fullheight">
-      <div class="fd-is-expanded">
+      <cover-artwork
-        <cover-artwork
+        :artwork_url="now_playing.artwork_url"
-          :artwork_url="now_playing.artwork_url"
+        :artist="now_playing.artist"
-          :artist="now_playing.artist"
+        :album="now_playing.album"
-          :album="now_playing.album"
+        class="fd-has-action fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
-          class="fd-cover-image fd-has-action"
+        @click="open_dialog(now_playing)"
-          @click="open_dialog(now_playing)"
+      />
-        />
-      </div>
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered">
           <p class="control has-text-centered fd-progress-now-playing">
-            <Slider
+            <slider
               ref="slider"
               v-model="item_progress_ms"
               :min="0"

web-src/src/pages/SpotifyPageAlbum.vue

@@ -23,14 +23,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
+      <cover-artwork
-        <cover-artwork
+        :artwork_url="artwork_url"
-          :artwork_url="artwork_url"
+        :artist="album.artist"
-          :artist="album.artist"
+        :album="album.name"
-          :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
-          @click="show_album_details_modal = true"
+        @click="show_album_details_modal = true"
-        />
+      />
-      </p>
     </template>
     <template #content>
       <p

web-src/src/pages/SpotifyPageArtist.vue

@@ -29,15 +29,14 @@
         @click="open_album(album)"
       >
         <template v-if="is_visible_artwork" #artwork>
-          <p class="image is-64x64 fd-has-shadow fd-has-action">
+          <cover-artwork
-            <cover-artwork
+            :artwork_url="artwork_url(album)"
-              :artwork_url="artwork_url(album)"
+            :artist="album.artist"
-              :artist="album.artist"
+            :album="album.name"
-              :album="album.name"
+            class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
-              :maxwidth="64"
+            :maxwidth="64"
-              :maxheight="64"
+            :maxheight="64"
-            />
+          />
-          </p>
         </template>
         <template #actions>
           <a @click.prevent.stop="open_dialog(album)">

web-src/src/pages/SpotifyPageBrowse.vue

@@ -14,15 +14,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
+            <cover-artwork
-              <cover-artwork
+              :artwork_url="artwork_url(album)"
-                :artwork_url="artwork_url(album)"
+              :artist="album.artist"
-                :artist="album.artist"
+              :album="album.name"
-                :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
-                :maxwidth="64"
+              :maxwidth="64"
-                :maxheight="64"
+              :maxheight="64"
-              />
+            />
-            </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -13,15 +13,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
+            <cover-artwork
-              <cover-artwork
+              :artwork_url="artwork_url(album)"
-                :artwork_url="artwork_url(album)"
+              :artist="album.artist"
-                :artist="album.artist"
+              :album="album.name"
-                :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
-                :maxwidth="64"
+              :maxwidth="64"
-                :maxheight="64"
+              :maxheight="64"
-              />
+            />
-            </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">

web-src/src/pages/SpotifyPageSearch.vue

@@ -157,15 +157,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
+            <cover-artwork
-              <cover-artwork
+              :artwork_url="artwork_url(album)"
-                :artwork_url="artwork_url(album)"
+              :artist="album.artist"
-                :artist="album.artist"
+              :album="album.name"
-                :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
-                :maxwidth="64"
+              :maxwidth="64"
-                :maxheight="64"
+              :maxheight="64"
-              />
+            />
-            </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">

web-src/src/templates/ContentWithHero.vue

@@ -11,8 +11,7 @@
                   <slot name="heading-right" />
                 </div>
                 <div
-                  class="column is-three-fifths has-text-centered-mobile"
+                  class="column m-auto is-three-fifths has-text-centered-mobile"
-                  style="margin: auto 0"
                 >
                   <!-- Slot heading left -->
                   <slot name="heading-left" />