adds friend badges to mediaitem square, working on adding to playlists/albums
This commit is contained in:
parent
a662192b2d
commit
4390493a9f
4 changed files with 138 additions and 10 deletions
|
@ -16,6 +16,13 @@
|
|||
@click="contextMenu"><%- include("../svg/more.svg") %></button>
|
||||
<button class="play-btn" v-if="!noplay.includes(item.type)"
|
||||
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
||||
<div class="badge-container" v-if="itemBadges.length != 0">
|
||||
<div class="socialBadge" v-for="badge in itemBadges.limit(1)">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="32"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
|
||||
{{ item.attributes.name }}
|
||||
|
@ -54,10 +61,28 @@
|
|||
guid: this.uuidv4(),
|
||||
noplay: ["apple-curators"],
|
||||
nomenu: ["artists", "stations", "apple-curators"],
|
||||
app: this.$root
|
||||
app: this.$root,
|
||||
badges: this.$root.socialBadges.badgeMap,
|
||||
itemBadges: []
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.getBadges()
|
||||
},
|
||||
methods: {
|
||||
async getBadges() {
|
||||
let self = this
|
||||
if(this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
|
||||
let friends = this.badges[this.item.attributes.playParams.id ?? this.item.id]
|
||||
if(friends) {
|
||||
friends.forEach(function (friend) {
|
||||
self.app.mk.api.socialProfile(friend).then(data => {
|
||||
self.itemBadges.push(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
revisedRandId() {
|
||||
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
|
||||
},
|
||||
|
|
|
@ -83,6 +83,17 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`" v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="60"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-time">
|
||||
{{getFormattedDate(data.attributes.releaseDate)}}
|
||||
</div>
|
||||
|
@ -106,7 +117,9 @@
|
|||
drag: false,
|
||||
nameEditing: false,
|
||||
inLibrary: null,
|
||||
app: this.$root
|
||||
app: this.$root,
|
||||
itemBadges: [],
|
||||
badgesRequested: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
@ -117,9 +130,35 @@
|
|||
watch: {
|
||||
data: function () {
|
||||
this.isInLibrary()
|
||||
this.getBadges()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBadges() {
|
||||
return
|
||||
if(this.badgesRequested) {
|
||||
return
|
||||
}
|
||||
this.badgesRequested = true
|
||||
this.itemBadges = []
|
||||
let self = this
|
||||
var id = 0
|
||||
try {
|
||||
id = this.data.attributes.playParams.id
|
||||
} catch (e) {
|
||||
id = this.data.id
|
||||
}
|
||||
this.$root.getSocialBadges((badges) => {
|
||||
let friends = badges[id]
|
||||
if(friends) {
|
||||
friends.forEach(function (friend) {
|
||||
self.app.mk.api.socialProfile(friend).then(data => {
|
||||
self.itemBadges.push(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
async isInLibrary() {
|
||||
if (this.data.type && !this.data.type.includes("library")) {
|
||||
// please keep using vars here
|
||||
|
@ -228,14 +267,16 @@
|
|||
},
|
||||
getFormattedDate: function (date) {
|
||||
if (date == null || date === "") return "";
|
||||
try{
|
||||
var releaseDate = new Date(date);
|
||||
month = new Intl.DateTimeFormat('en-US', { month: 'long'}).format(releaseDate);
|
||||
date = releaseDate.getDate();
|
||||
year = releaseDate.getFullYear();
|
||||
try {
|
||||
var releaseDate = new Date(date);
|
||||
month = new Intl.DateTimeFormat('en-US', {month: 'long'}).format(releaseDate);
|
||||
date = releaseDate.getDate();
|
||||
year = releaseDate.getFullYear();
|
||||
|
||||
return date + " " + month + " " + year;
|
||||
} catch (e){ return ""}
|
||||
return date + " " + month + " " + year;
|
||||
} catch (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue