rework fallback image handling

src/library/album/AlbumDetails.vue

@@ -2,7 +2,8 @@
   <div v-if="album">
     <div class="d-flex mb-3">
       <div class="mr-3 mr-md-4 image-container">
-        <b-img height="300" width="300" fluid :src="album.image" />
+        <img v-if="album.image" class="img-fluid" height="300" width="300" :src="album.image">
+        <img v-else class="img-fluid" height="300" width="300" src="@/shared/assets/fallback.svg">
       </div>
       <div>
         <h1>{{ album.name }}</h1>

src/player/Player.vue

@@ -2,7 +2,8 @@
   <div class="d-flex player">
     <div v-if="track" class="d-none d-sm-block">
       <router-link :to="{name: 'album', params: {id: track.albumId}}">
-        <b-img :src="track.image" block width="80px" height="80px" />
+        <img v-if="track.image" width="80px" height="80px" :src="track.image">
+        <img v-else width="80px" height="80px" src="@/shared/assets/fallback.svg">
       </router-link>
     </div>
     <div class="flex-fill">

src/shared/api.ts

@@ -20,7 +20,6 @@ export interface Artist {
   albumCount: number
   description?: string
   starred: boolean
-  image?: string
   lastFmUrl?: string
   musicBrainzUrl?: string
   similarArtist?: Artist[]
@@ -292,7 +291,6 @@ export class API {
       name: item.name,
       description: (item.biography || '').replace(/<a[^>]*>.*?<\/a>/gm, ''),
       starred: !!item.starred,
-      image: item.largeImageUrl || item.mediumImageUrl || item.smallImageUrl,
       albumCount: item.albumCount,
       lastFmUrl: item.lastFmUrl,
       musicBrainzUrl: item.musicBrainzId

src/shared/assets/fallback.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" fill="#999" version="1.1" viewBox="0 0 135.47 135.47"
+  xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#">
+  <rect width="100%" height="100%" fill="#6c757d"/>
+  <g transform="translate(0 -161.53)">
+    <g transform="matrix(1.0344 0 0 1.0869 -2.0685 -19.991)">
+    <rect x="9.9294" y="224.55" width="5.9939" height="23.366" rx="2.997" ry="2.997" />
+    <rect x="19.849" y="215.2" width="5.9939" height="41.989" rx="2.997" ry="2.819" />
+    <rect x="29.768" y="211.49" width="5.9939" height="49.213" rx="2.997" ry="2.997" />
+    <rect x="39.688" y="202.01" width="5.9939" height="58.69" rx="2.997" ry="3.0381" />
+    <rect x="49.607" y="198.3" width="5.9939" height="62.402" rx="2.997" ry="2.997" />
+    <rect x="59.526" y="197.97" width="5.9939" height="62.733" rx="2.997" ry="2.997" />
+    <rect x="69.446" y="201.81" width="5.9939" height="58.889" rx="2.997" ry="2.997" />
+    <rect x="79.365" y="211.29" width="5.9939" height="49.412" rx="2.997" ry="2.997" />
+    <rect x="89.285" y="211.75" width="5.9939" height="48.948" rx="2.997" ry="2.997" />
+    <rect x="99.204" y="216.53" width="5.9939" height="44.176" rx="2.997" ry="2.997" />
+    <rect x="109.12" y="223.55" width="5.9939" height="36.886" rx="2.997" ry="2.997" />
+    <rect x="119.04" y="230.78" width="5.9939" height="22.372" rx="2.997" ry="2.997" />
+    </g>
+  </g>
+</svg>

src/shared/components/Icon.vue

@@ -17,7 +17,6 @@
     BIconSkipEndFill,
     BIconPlus,
     BIconThreeDotsVertical,
-    BIconMusicNoteBeamed,
     BIconBoxArrowRight,
     BIconPersonFill,
     BIconPersonCircle,
@@ -38,7 +37,6 @@
       BIconSkipEndFill,
       BIconPlus,
       BIconThreeDotsVertical,
-      BIconMusicNoteBeamed,
       BIconBoxArrowRight,
       BIconPersonFill,
       BIconPersonCircle,

src/shared/components/ImgContainer.vue

@@ -1,52 +0,0 @@
-<template functional>
-  <div class="fixed-img bg-secondary">
-    <div class="fixed-img-inner">
-      <img v-if="props.src" :src="props.src">
-      <div v-else class="text-muted">
-        <Icon icon="music-note-beamed" />
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="scss">
-  .fixed-img-sq {
-    padding-bottom: 100%;
-  }
-  .fixed-img-rect {
-    padding-bottom: 70%;
-  }
-  .fixed-img {
-    position: relative;
-    width: 100%;
-
-    .tile-img-inner {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-       img {
-
-         width: 100%;
-         height: 100%;
-        object-fit: cover;
-      }
-
-      span {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 4.5rem;
-      }
-    }
-  }
-</style>
-<script lang="ts">
-  import Vue from 'vue'
-
-  export default Vue.extend({
-    props: {
-      square: { type: Boolean, default: false },
-    }
-  })
-</script>

src/shared/components/Tile.vue

@@ -2,7 +2,7 @@
   <div class="tile card">
     <router-link class="tile-img" :to="props.to">
       <img v-if="props.image" :src="props.image">
-      <Icon v-else class="tile-img-fallback text-muted" icon="music-note-beamed" />
+      <img v-else src="@/shared/assets/fallback.svg">
     </router-link>
     <div class="card-body">
       <div class="text-truncate font-weight-bold">
@@ -24,7 +24,6 @@
   .tile-img {
     position: relative;
     width: 100%;
-    background-color: #6c757d;
 
     img {
       position: absolute;
@@ -33,12 +32,4 @@
       object-fit: cover;
     }
   }
-
-  .tile-img-fallback {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 4.5rem;
-  }
 </style>