From 806a4174dfa0325e1385a654647e8e0c98d39905 Mon Sep 17 00:00:00 2001
From: simon <fortier.simon@protonmail.com>
Date: Sat, 8 Jun 2019 17:26:45 -0400
Subject: [PATCH] More work on artistInfo component

---
 music_graph/src/components/AlbumCarousel.vue |  27 ++++++---
 music_graph/src/components/ArtistInfo.vue    |  55 ++++++++++++++++---
 music_graph/static/album.png                 | Bin 0 -> 1044 bytes
 3 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 music_graph/static/album.png

diff --git a/music_graph/src/components/AlbumCarousel.vue b/music_graph/src/components/AlbumCarousel.vue
index fe7ab54..210fea4 100644
--- a/music_graph/src/components/AlbumCarousel.vue
+++ b/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>
diff --git a/music_graph/src/components/ArtistInfo.vue b/music_graph/src/components/ArtistInfo.vue
index b36e279..3c4891b 100644
--- a/music_graph/src/components/ArtistInfo.vue
+++ b/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>
diff --git a/music_graph/static/album.png b/music_graph/static/album.png
new file mode 100644
index 0000000000000000000000000000000000000000..80eed4396d683103fe9504ca91ca8f8f4c30a8dd
GIT binary patch
literal 1044
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911L)MWvCLm;Om)7d$|)7e>}peR2rGbfdS
zL1SX=L|c!;4l+mMgSWbB@#$(jny}C+Qb4ruik8Sirxl`6r3O2{aL+PP(bel~%076o
z|LCgb?#=7?)-@^oV0`rG)sh!Vs{iygw{(1butWa+JKJ~n7@ZcMF<G50bK%RXnO;YZ
z`jmz8>{-O_*kZ_V;*8NV6;00bA4~b=<KHLQoc?`h{$l^Lkvtzdk8D0;u=<Gfk;}6~
zn?KtXwuq)q{V}KF%o1)P`=Z#wpS{Hg6C2ar&Xi=$vvAT8vx<0`5N2ZfNb}K(RWGOL
zr^JL=<`-T&WqNIwdVQkC^7T5!bDtRqMH~@Q=?DmL=1dI{TpX%?)T!&+W4V8d$Mq+A
zD~5CS$Z)T4XnynK;Qt5Z+r#RL4*7B&ZG0zw`=10O({6{&dAIK$-*(rA@z41KQ}2BX
zmpX7p{pHtfVzx}bwl{Xa-nQ%w<8<o-4<;+l-lY69lk2C=hdQ_WQ&<mecX&VRc67G<
za(;(dyS(l(u(uz`Xxwz&_MYsUH*fD7ul-lY@OgJp$qU1ymB47>EbxddW?;}$24TjE
zrS@e&LG}_)Usv|WY#hSkI`*eu&j$)gmbgZgIOpf)rskC}I2WZRmZYXAlxLP?D7bt2
z281{Ai320|pQnpsNX4zUmpAe<7;qfeaH;oyernrH=?(rJQ(mlL53l7kV31(oVPIom
zZeTpXkibA~E^SOjb}!AG4zYyV0fOvwaLCgl)FGB6NH;uY{wu>&I02Yk7(8A5T-G@y
GGywqL?lJrT

literal 0
HcmV?d00001