More work on artistInfo component

music_graph/src/components/AlbumCarousel.vue

@@ -1,20 +1,23 @@
 <template>
-    <div>
-        <figure
+    <div v-bind:class="{alone: alone}">
+        <div
             v-for="release in releases"
             v-show="current === release.mbid"
             v-bind:key="release.mbid"
+            style="float: right"
         >
             <figure>
                 <img
                     alt=""
+                    style="height: 128px"
                     width="128"
                     height="128"
                     v-bind:src="api.resolveCoverUrl(release.mbid)"
+                    onerror="this.src='/static/album.png'"
                 >
                 <figcaption>{{release.name}} ({{release.year}})</figcaption>
             </figure>
-        </figure>
+        </div>
     </div>
 </template>
 
@@ -23,7 +26,7 @@ import {MusicGraphApi} from '../MusicGraphApi'
 
 export default {
     name: 'AlbumCarousel',
-    props: ['releases', 'interval'],
+    props: ['releases', 'interval', 'alone'],
     data() {
         return {
             api: new MusicGraphApi(),
@@ -37,18 +40,23 @@ export default {
         }, Number(this.interval))
     },
     watch: {
-        releases: () => {
+        releases: function () {
             this.index = 0
+            this.tick()
         }
     },
     methods: {
         tick() {
-            if (this.index === this.releases.length - 1) {
+            if (this.releases.length === 0) {
+                return
+            }
+
+            if (this.index >= this.releases.length) {
                 this.index = 0
             }
 
-            this.index += 1
             this.current = this.releases[this.index].mbid
+            this.index += 1
         }
     }
 }
@@ -58,7 +66,8 @@ export default {
 
     figure {
         text-align: center;
-        margin: 0 0 10px 0;
-        max-width: 300px;
+        width: 128px;
+        height: 180px;
+        margin: 0 20px 3em 20px;
     }
 </style>

music_graph/src/components/ArtistInfo.vue

@@ -1,14 +1,27 @@
 <template>
     <el-card class="artist-info box-card" v-if="artist !== undefined">
         <div slot="header">
-            <span>{{artist.name}}</span>
+            <span>{{artist.name}}<span class="year" v-if="artistInfo.year!==0">[{{artistInfo.year}}]</span></span>
         </div>
         <div>
             <AlbumCarousel
-                style="float: left"
-                v-bind:releases="artistInfo.releases"
-                interval="750"/>
-            <span>Listeners: {{artist.listeners}}</span>
+                style="float: right"
+                :releases="artistInfo.releases"
+                interval="1250"/>
+            <div>
+                <p v-if="artistInfo.comment!==null"
+                   class="comment"
+                >{{artistInfo.comment}}</p>
+            </div>
+            <div class="tag-group" v-if="artistInfo.tags && artistInfo.tags.length > 0">
+                <span class="tag-group__title">Tags</span>
+                <el-tag
+                    v-for="tag in artistInfo.tags"
+                    v-bind:key="tag.id"
+                    size="small"
+                >{{tag.name}}
+                </el-tag>
+            </div>
         </div>
     </el-card>
 </template>
@@ -39,7 +52,9 @@ export default {
             this.api.getArtistDetails(artist.mbid)
                 .then(info => {
                     this.artistInfo = info
-                    this.artistInfo.releases = this.artistInfo.releases.slice(0, 2)
+                    this.artistInfo.releases = this.artistInfo.releases.filter(r =>
+                        r.labels.indexOf('Album') !== -1 || r.labels.indexOf('EP') !== -1)
+                    this.artistInfo.tags = info.tags.sort((a, b) => b.weight - a.weight).splice(0, 6)
                 })
         }
     }
@@ -48,7 +63,33 @@ export default {
 
 <style scoped>
     .artist-info {
-        margin: 1rem;
+        margin: 0 1em;
         position: fixed;
+        background: rgba(255, 255, 255, 0.92);
+        font-family: "Bitstream Vera Sans";
+    }
+
+    .comment {
+        color: #727c84;
+        margin-bottom: 2em;
+        margin-top: 0;
+        min-width: 300px;
+    }
+
+    .tag-group {
+        max-width: 400px;
+        min-width: 300px;
+    }
+
+    .el-tag {
+        margin-left: 4px;
+        margin-bottom: 4px;
+    }
+
+    .year {
+        margin-left: 0.5em;
+        color: #828c94;
+        font-size: 85%;
+        vertical-align: top;
     }
 </style>