added artist-chip element
This commit is contained in:
booploops
parent
23f3a6fbd6
commit
1f36f8e691
6 changed files with 150 additions and 7 deletions
|
|
@ -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>`,
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
50
src/renderer/views/components/artist-chip.ejs
Normal file
50
src/renderer/views/components/artist-chip.ejs
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue