add artist images back
This commit is contained in:
vapormusic
parent
76f640a088
commit
a2f82d65d7
4 changed files with 51 additions and 10 deletions
|
|
@ -3911,6 +3911,21 @@ const app = new Vue({
|
|||
checkForUpdate() {
|
||||
ipcRenderer.send('check-for-update')
|
||||
},
|
||||
async loadArtistImage(id){
|
||||
try {
|
||||
let u = await fetch(`https://music.apple.com/${app.mk.storefrontId}/artist/${id}`);
|
||||
let html = await u.text();
|
||||
function getStringBetween(str, start, end) {
|
||||
const result = str.match(new RegExp(start + "(.*)" + end));
|
||||
|
||||
return result[1];
|
||||
}
|
||||
let string = getStringBetween(html, '<meta property="og:image:secure_url" content="', "cw.png").replace(`1200x630`, `300x300.png`);
|
||||
return await string;
|
||||
} catch (err) {
|
||||
return await ''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<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.id != null" :url="artist.attributes.artwork.url" :size="32"></mediaitem-artwork>
|
||||
<mediaitem-artwork v-if="artist.id != null" :url="artistimage" :size="32"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="artist-chip__name">
|
||||
<span>{{ item.attributes.name }}</span>
|
||||
|
|
@ -16,24 +16,30 @@
|
|||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
artist: {
|
||||
id: null
|
||||
}
|
||||
},
|
||||
artistimage : ''
|
||||
}
|
||||
},
|
||||
template: '#artist-chip',
|
||||
async mounted() {
|
||||
let artistId = this.item.id
|
||||
|
||||
if(typeof this.item.relationships.catalog == "object") {
|
||||
artistId = this.item.relationships.catalog.data[0].id
|
||||
}
|
||||
app.mk.api.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
|
||||
app.mk.api.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(async (response) => {
|
||||
this.artist = response.data.data[0];
|
||||
if (this.artistimage == '' && artistId != null){
|
||||
this.artistimage = (await this.$root.loadArtistImage(artistId) ?? '').replace('300x300','50x50')
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div class="artwork" @click='app.routeView(item)'>
|
||||
<mediaitem-artwork
|
||||
:url="getArtworkUrl()"
|
||||
:url="mainimageurl"
|
||||
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
|
||||
:size="size"
|
||||
shadow="subtle"
|
||||
|
|
@ -77,7 +77,8 @@
|
|||
app: this.$root,
|
||||
badges: this.$root.socialBadges.badgeMap,
|
||||
itemBadges: [],
|
||||
unavailable: false
|
||||
unavailable: false,
|
||||
mainimageurl: '',
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
|
@ -91,6 +92,7 @@
|
|||
this.unavailable = true
|
||||
}
|
||||
}
|
||||
this.getMainImage()
|
||||
},
|
||||
methods: {
|
||||
getBgColor() {
|
||||
|
|
@ -205,7 +207,10 @@
|
|||
);
|
||||
},
|
||||
getArtworkUrl(size = -1, includeUrl = false) {
|
||||
let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
|
||||
let artwork = this.item.attributes?.artwork ? this.item.attributes.artwork?.url : ''
|
||||
// if (artwork == '' && this.item.type == "artists" && this.item.id != null) {
|
||||
// artwork = (await app.loadArtistImage(this.item.id)).toString();
|
||||
// }
|
||||
if(size != -1) {
|
||||
artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', ((size === 900) ? "sr" : "cc"))
|
||||
}
|
||||
|
|
@ -220,6 +225,12 @@
|
|||
return `url("${artwork}")`
|
||||
}
|
||||
},
|
||||
async getMainImage(){
|
||||
this.mainimageurl = this.getArtworkUrl()
|
||||
if (this.mainimageurl == '' && this.item.id != null && this.item.type == "artists") {
|
||||
this.mainimageurl = await this.app.loadArtistImage(this.item.id)
|
||||
}
|
||||
},
|
||||
getClasses() {
|
||||
let type = this.item.type
|
||||
if (this.kind != "") {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
|
||||
<mediaitem-artwork
|
||||
shadow="large"
|
||||
:url="data.attributes?.artwork ? data.attributes.artwork?.url : ''"
|
||||
:url="artistimage"
|
||||
size="190" type="artists"></mediaitem-artwork>
|
||||
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
|
||||
app.mk.play()
|
||||
|
|
@ -143,9 +143,18 @@
|
|||
return {
|
||||
topSongsExpanded: false,
|
||||
app: this.$root,
|
||||
headerVisible: true
|
||||
headerVisible: true,
|
||||
artistimage : ''
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
this.artistimage = this.data.attributes?.artwork ? this.data.attributes.artwork?.url : ''
|
||||
|
||||
if (this.artistimage == '' && this.data.id != null){
|
||||
this.artistimage = await this.app.loadArtistImage(this.data.id)
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue