Add default image for album art while it loads

malletfils · Dec 21, 2018 · a7fd431 · a7fd431
1 parent bdf9d8f
commit a7fd431
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -126,4 +126,20 @@ export default {
     left: 0px;
     background-color: #3898d6;
 }
+
+/** Set a default image for album art until it loads **/
+.album-art-image .v-image__image {
+  z-index: unset;
+}
+.album-art-image .v-image__image:before {    
+    content: ' ';
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;    
+    background-size: contain;
+    background-image: url("http://localhost:5050/img/empty-album-art.b8a07499.png");    
+}
 </style>
diff --git a/client/src/components/NowPlayingBar.vue b/client/src/components/NowPlayingBar.vue
@@ -7,7 +7,7 @@
             <v-list two-line>
               <v-list-tile avatar>
                 <v-list-tile-avatar tile size="60px">
-                  <v-img :src="albumArtURL"></v-img>
+                  <v-img class="album-art-image" :src="albumArtURL"></v-img>
                 </v-list-tile-avatar>
                 <v-list-tile-content class="pl-3">
                   <v-list-tile-title>{{ track }}</v-list-tile-title>

diff --git a/client/src/views/NowPlaying.vue b/client/src/views/NowPlaying.vue
@@ -19,7 +19,7 @@
               </v-list>
             </v-menu>
           </div>
-          <v-img class="album-art" contain :src="albumArtURL"></v-img>
+          <v-img class="album-art album-art-image" :src="albumArtURL"></v-img>
           <v-flex xs12>
             <div class="text-xs-center">
               <v-card-title primary-title class="d-block">
@@ -101,6 +101,9 @@ export default {
     albumArtURL() {
       return this.$store.getters.albumArtURLForGroup(this.activeZoneGroupId);
     },
+    albumArtPlaceholderURL() {
+      return this.$store.state.defaultAlbumArtURL;
+    },
   },
 };
 </script>

diff --git a/client/src/views/rooms/ZoneGroupDraggable.vue b/client/src/views/rooms/ZoneGroupDraggable.vue
@@ -33,6 +33,7 @@
       <v-layout mb-3 v-bind="albumSectionBreakpoint">
         <div class="pt-3 pl-3 pr-0">
           <v-img
+            class="album-art-image"
             :src="albumArtURL(group.id)"
             height="125px"
             width="125px"