added artist-chip element

src/main/base/browserwindow.ts

@@ -52,6 +52,7 @@ export class BrowserWindow {
                 "pages/plugins-github",
                 "pages/replay",
                 "pages/audiolabs",
+                "pages/zoo",
                 "components/mediaitem-artwork",
                 "components/artwork-material",
                 "components/menu-panel",
@@ -80,9 +81,15 @@ export class BrowserWindow {
                 "components/lyrics-view",
                 "components/fullscreen",
                 "components/miniplayer",
-                "components/castmenu"
+                "components/castmenu",
+                "components/artist-chip",
             ],
             appRoutes: [
+                {
+                    page: "zoo",
+                    component: "<cider-zoo></cider-zoo>",
+                    condition: "page == 'zoo'"
+                },
                 {
                     page: "podcasts",
                     component: `<apple-podcasts></apple-podcasts>`,

src/renderer/less/elements.less

@@ -1703,6 +1703,65 @@ input[type=checkbox][switch]:checked:active::before {
   align-items: center;
 }
 
+.artist-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px 0px;
+  border-radius: 4px;
+  color: white;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px;
+
+  &:hover {
+    background: var(--selected);
+  }
+
+  .artist-chip__follow {
+    appearance: none;
+    border: 0;
+    height: 32px;
+    width: 32px;
+    background: #ffffff0f;
+    margin: 0px 0px 0px 10px;
+    font-weight: bold;
+    color: white;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    flex: 0 0 32px;
+
+    &:hover {
+      background: var(--selected);
+    }
+  }
+
+  .artist-chip__image {
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 100%;
+    overflow: hidden;
+    margin: 0px 12px 0px 0px;
+    pointer-events: none;
+    flex: 0 0 32px;
+
+    .mediaitem-artwork {
+      border-radius: inherit;
+    }
+  }
+  .artist-chip__name {
+    pointer-events: none;
+  }
+}
+
 .search-panel {
   background: rgb(0 0 0 / 50%);
 }

src/renderer/less/pages.less

@@ -376,7 +376,7 @@
         .playlist-name {
           font-weight: 700;
           font-size: 1.6rem;
-          margin-bottom: 6px;
+          //margin-bottom: 6px;
           margin-right: 6px;
           flex-shrink: unset;
         }

src/renderer/views/components/artist-chip.ejs

@@ -0,0 +1,50 @@
+<script type="text/x-template" id="artist-chip">
+    <div class="artist-chip" @click.self="route">
+        <div class="artist-chip__image">
+            <mediaitem-artwork v-if="artist != null" :url="artist.attributes.artwork.url" :size="32"></mediaitem-artwork>
+        </div>
+        <div class="artist-chip__name">
+            <span>{{ item.attributes.name }}</span>
+        </div>
+        <button @click="followArtist" v-if="!$root.cfg.home.followedArtists.includes(item.id)" class="artist-chip__follow codicon codicon-add"></button>
+        <button @click="unfollowArtist" v-else class="artist-chip__follow codicon codicon-check"></button>
+    </div>
+</script>
+
+<script>
+    Vue.component('artist-chip', {
+        props: {
+            item: {
+                type: Object,
+                required: true
+            }
+        },
+        data: function() {
+            return {
+                artist: null
+            }
+        },
+        template: '#artist-chip',
+        async mounted() {
+            app.mk.api.v3.music(`/v1/catalog/us/artists/${this.item.id}`).then(response => {
+                this.artist = response.data.data[0];
+            });
+        },
+        methods: {
+            route() {
+               app.appRoute(`artist/${this.item.id}`);
+            },
+            followArtist () {
+                app.cfg.home.followedArtists.push(this.item.id)
+                notyf.success(`You are now following ${this.item.attributes.name}`)
+            },
+            unfollowArtist () {
+                let index = app.cfg.home.followedArtists.indexOf(this.item.id)
+                if (index > -1) {
+                    app.cfg.home.followedArtists.splice(index, 1)
+                }
+                notyf.success(`You have unfollowed ${this.item.attributes.name}`)
+            }
+        }
+    });
+</script>

src/renderer/views/pages/cider-playlist.ejs

@@ -39,10 +39,11 @@
                                                                                            @change="editPlaylist"
                                                                                            @keydown.enter="editPlaylist"/></div>
                                     <div class="playlist-artist item-navigate"
-                                         v-if="getArtistName(data) != ''"
+                                         v-if="getArtistName(data) != '' && !useArtistChip"
                                          @click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
                                         {{getArtistName(data)}}
                                     </div>
+                                    <artist-chip v-if="useArtistChip" :item="data.relationships.artists.data[0]"></artist-chip>
                                     <div class="playlist-desc" v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
                                         <div v-if="data.attributes.description.short" class="content" v-html="data.attributes.description.short"></div>
                                         <div v-else-if="data.attributes.description.standard" class="content" v-html="data.attributes.description.standard"></div>
@@ -198,7 +199,8 @@
                 app: this.$root,
                 itemBadges: [],
                 badgesRequested: false,
-                headerVisible: true
+                headerVisible: true,
+                useArtistChip: false
             }
         },
         mounted: function () {
@@ -248,10 +250,11 @@
                 setTimeout(() => this.confirm = false, 3000);
             },
             getArtistName(data) {
-                console.log(data.attributes)
                 if (data.attributes.artistName) {
+                    this.useArtistChip = true
                     return data.attributes.artistName
                 } else if (data.attributes.artist) {
+                    this.useArtistChip = true
                     return data.attributes.artist.attributes.name
                 } else if (data.attributes.curatorName) {
                     return data.attributes.curatorName

src/renderer/views/pages/zoo.ejs

@@ -1,9 +1,33 @@
-<template v-if="page == 'zoo'">
+<script type="text/x-template" id="cider-zoo">
     <div class="content-inner">
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}
         <div class="spinner"></div>
         <button class="md-btn">Cider Button</button>
+        <artist-chip
+        v-if="artistLoaded"
+        :item="artist"
+        ></artist-chip>
     </div>
-</template>
+</script>
+<script>
+    Vue.component('cider-zoo', {
+        template: '#cider-zoo',
+        data: function () {
+            return {
+                artistLoaded: false,
+                    artist: {}
+            }
+        },
+        async mounted() {
+            app.mk.api.v3.music("/v1/catalog/us/artists/669831761").then(response => {
+                this.artist = response.data.data[0];
+                this.artistLoaded = true;
+            });
+        },
+        methods: {
+
+        }
+    });
+</script>