7746daee54
* added :no-scale for mediaitem-square * cards now scale * changed sweeteners method of scaling items
598 lines
No EOL
21 KiB
Text
598 lines
No EOL
21 KiB
Text
<script type="text/x-template" id="mediaitem-square">
|
|
<div tabindex="0" class="cd-mediaitem-square-container"
|
|
@click.self="app.routeView(item)"
|
|
@controller-click="app.routeView(item)"
|
|
@contextmenu.self="getContextMenu"
|
|
v-observe-visibility="{callback: visibilityChanged}"
|
|
>
|
|
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
|
|
<div style="{'--spcolor': getBgColor()}"
|
|
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
|
|
<div class="artwork-container" v-show="isVisible">
|
|
<div class="unavailable-overlay" v-if="unavailable">
|
|
<div class="codicon codicon-circle-slash"></div>
|
|
</div>
|
|
<div class="artwork" @click='app.routeView(item)'>
|
|
<mediaitem-artwork
|
|
:url="getArtworkUrl()"
|
|
: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"
|
|
:bgcolor="getBgColor()"
|
|
:video-priority="forceVideo"
|
|
:type="item.type"></mediaitem-artwork>
|
|
</div>
|
|
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
|
|
@click="getContextMenu" :aria-label="$root.getLz('term.more')">
|
|
<%- include("../svg/more.svg") %>
|
|
</button>
|
|
<button class="play-btn" v-if="!noplay.includes(item.type)"
|
|
@click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
|
|
<%- 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 ? badge.attributes.artwork.url : '')"
|
|
:size="32"></mediaitem-artwork>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-rect" :class="{'info-rect-card': kind == 'card'}"
|
|
v-show="isVisible"
|
|
:style="{'--bgartwork': getArtworkUrl(size, true)}">
|
|
<div class="title"
|
|
:title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))"
|
|
v-if="item.attributes.artistNames == null || kind != 'card'" @click='app.routeView(item)'>
|
|
<div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name ??
|
|
(item.relationships?.contents?.data[0]?.attributes?.name ??
|
|
(item.attributes?.editorialNotes?.name ?? '')) }}
|
|
</div>
|
|
<div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"
|
|
style="background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
|
|
</div>
|
|
<div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis"
|
|
@click="getSubtitleNavigation()"
|
|
v-if="getSubtitle() != ''">
|
|
{{ getSubtitle() }}
|
|
</div>
|
|
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-square', {
|
|
template: '#mediaitem-square',
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
kind: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '190'
|
|
},
|
|
forceVideo: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
reasonShown: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
},
|
|
noScale: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
},
|
|
'contextExt': { type: Object, required: false },
|
|
},
|
|
data: function () {
|
|
return {
|
|
isVisible: false,
|
|
addedToLibrary: false,
|
|
guid: this.uuidv4(),
|
|
noplay: ["apple-curators", "editorial-elements", "editorial-items"],
|
|
nomenu: ["stations", "apple-curators", "editorial-elements", "editorial-items"],
|
|
app: this.$root,
|
|
badges: this.$root.socialBadges.badgeMap,
|
|
itemBadges: [],
|
|
unavailable: false
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.getBadges()
|
|
if (typeof this.item.attributes.playParams == "object") {
|
|
if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1)) {
|
|
this.unavailable = true
|
|
}
|
|
} else {
|
|
if (this.item.type == "music-movies" || this.item.type == "tv-episodes") {
|
|
this.unavailable = true
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getBgColor() {
|
|
return `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
|
|
},
|
|
getContextMenu(event) {
|
|
if (this.item.type === "artists") {
|
|
return this.artistMenu(event)
|
|
} else {
|
|
return this.contextMenu(event)
|
|
}
|
|
},
|
|
getSubtitle() {
|
|
if (this.kind == "card") {
|
|
if (typeof this.item.attributes.artistNames != "undefined") {
|
|
return this.item.attributes.artistNames
|
|
} else if (typeof this.item.attributes.editorialNotes != "undefined") {
|
|
return this.item?.attributes?.editorialNotes?.short ?? (this.item.attributes?.editorialNotes?.name ?? '')
|
|
} else if (typeof this.item.attributes.artistName != "undefined") {
|
|
return this.item.attributes.artistName
|
|
} else {
|
|
return ''
|
|
}
|
|
} else {
|
|
if (typeof this.item.attributes.artistName != "undefined") {
|
|
return this.item.attributes.artistName
|
|
} else if (typeof this.item.attributes.artist != "undefined") {
|
|
return this.item.attributes.artist.attributes.name
|
|
} else if (typeof this.item.attributes.curatorName != "undefined") {
|
|
return this.item.attributes.curatorName
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
getSubtitleNavigation() {
|
|
if (this.kind === 'card' || this.item.type === "playlists") {
|
|
try {
|
|
if (typeof this.item.attributes.artistName != "undefined") {
|
|
return app.searchAndNavigate(this.item, 'artist')
|
|
} else {
|
|
return app.routeView(this.item)
|
|
}
|
|
} catch (e) {
|
|
return app.routeView(this.item)
|
|
}
|
|
} else {
|
|
if (typeof this.item.attributes.artistName != "undefined") {
|
|
return app.searchAndNavigate(this.item, 'artist')
|
|
} else {
|
|
return app.routeView(this.item)
|
|
}
|
|
}
|
|
},
|
|
async getBadges() {
|
|
const self = this
|
|
const id = ((this.item.attributes?.playParams ?? false) ? this.item.attributes?.playParams.id : null) || this.item.id
|
|
if (id && this.badges[id]) {
|
|
let friends = this.badges[id]
|
|
if (friends) {
|
|
friends.forEach(function (friend) {
|
|
self.app.mk.api.v3.music(`/v1/social/${app.mk.storefrontId}/social-profiles/${friend}`).then(data => {
|
|
self.itemBadges.push(data.data.data[0])
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
revisedRandId() {
|
|
return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
|
|
},
|
|
async isInLibrary() {
|
|
if (this.item.type && !this.item.type.includes("library")) {
|
|
let params = {
|
|
relate: "library",
|
|
"fields": "inLibrary",
|
|
"extend": this.revisedRandId()
|
|
}
|
|
let kind = this.item.type ?? this.item.attributes.playParams.kind
|
|
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
|
if (truekind === "musicVideos") {
|
|
truekind = "music-videos"
|
|
}
|
|
let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
|
|
res = res.data.data[0]
|
|
this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
|
|
} else {
|
|
this.addedToLibrary = true
|
|
}
|
|
},
|
|
async removeFromLibrary(id) {
|
|
let params = {
|
|
relate: "library",
|
|
"fields": "inLibrary",
|
|
"extend": this.revisedRandId()
|
|
}
|
|
let kind = this.item.type ?? this.item.attributes.playParams.kind
|
|
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
|
if (truekind == "musicVideos") {
|
|
truekind = "music-videos"
|
|
}
|
|
let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
|
|
res = res.data.data[0]
|
|
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
|
|
id = res.relationships.library.data[0].id
|
|
}
|
|
|
|
app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`, {},
|
|
{
|
|
fetchOptions: {
|
|
method: "DELETE"
|
|
}
|
|
})
|
|
this.addedToLibrary = true
|
|
},
|
|
uuidv4() {
|
|
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
|
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
|
);
|
|
},
|
|
getArtworkUrl(size = -1, includeUrl = false) {
|
|
let artwork = this.item?.attributes?.artwork ? this.item?.attributes?.artwork?.url : (this.item?.attributes?.editorialArtwork?.subscriptionCover?.url ?? '')
|
|
if (size != -1) {
|
|
artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', ((size === 900) ? "sr" : "cc"))
|
|
}
|
|
switch (this.kind) {
|
|
case "385":
|
|
artwork = this.item.attributes.editorialArtwork?.subscriptionHero?.url ?? (this.item.attributes.artwork?.url ?? (this.item.relationships?.contents?.data[0]?.attributes?.editorialArtwork?.subscriptionHero?.url ?? ''))
|
|
break;
|
|
}
|
|
if (!includeUrl) {
|
|
return artwork
|
|
} else {
|
|
return `url("${artwork}")`
|
|
}
|
|
},
|
|
getClasses() {
|
|
let type = []
|
|
let classes = []
|
|
if(this.noScale) {
|
|
classes.push("noscale")
|
|
}
|
|
try {
|
|
type = this.item.type
|
|
|
|
} catch (e) {
|
|
console.log('sd', this.item)
|
|
}
|
|
|
|
if (this.kind !== "") {
|
|
type = this.kind
|
|
}
|
|
switch (type) {
|
|
default:
|
|
|
|
break;
|
|
case "editorial-elements":
|
|
case "card":
|
|
classes.push("mediaitem-card")
|
|
break;
|
|
case "385": // editorial
|
|
classes.push("mediaitem-brick")
|
|
break;
|
|
case "small":
|
|
classes.push("mediaitem-small")
|
|
break;
|
|
case "music-videos":
|
|
case "uploadedVideo":
|
|
case "uploaded-videos":
|
|
case "library-music-videos":
|
|
classes.push("mediaitem-video")
|
|
break;
|
|
}
|
|
return classes
|
|
},
|
|
visibilityChanged: function (isVisible, entry) {
|
|
this.isVisible = isVisible
|
|
},
|
|
async contextMenu(event) {
|
|
if (this.nomenu.includes(this.item.type)) {
|
|
return
|
|
}
|
|
if (!event) {
|
|
event = this.$refs.main
|
|
} else {
|
|
console.log(event)
|
|
}
|
|
let self = this
|
|
let useMenu = "normal"
|
|
if (app.selectedMediaItems.length <= 1) {
|
|
app.selectedMediaItems = []
|
|
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
|
|
} else {
|
|
useMenu = "multiple"
|
|
}
|
|
let menus = {
|
|
multiple: {
|
|
items: [
|
|
{
|
|
name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
|
|
"icon": "./assets/arrow-bend-up.svg",
|
|
action: () => {
|
|
let itemsToPlay = {}
|
|
app.selectedMediaItems.forEach(item => {
|
|
if (!itemsToPlay[item.kind]) {
|
|
itemsToPlay[item.kind] = []
|
|
}
|
|
itemsToPlay[item.kind].push(item.id)
|
|
})
|
|
// loop through itemsToPlay
|
|
for (let kind in itemsToPlay) {
|
|
let ids = itemsToPlay[kind]
|
|
if (ids.length > 0) {
|
|
app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
|
|
}
|
|
}
|
|
console.log(itemsToPlay)
|
|
app.selectedMediaItems = []
|
|
}
|
|
},
|
|
{
|
|
name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
|
|
"icon": "./assets/arrow-bend-down.svg",
|
|
action: () => {
|
|
let itemsToPlay = {}
|
|
app.selectedMediaItems.forEach(item => {
|
|
if (!itemsToPlay[item.kind]) {
|
|
itemsToPlay[item.kind] = []
|
|
}
|
|
itemsToPlay[item.kind].push(item.id)
|
|
})
|
|
// loop through itemsToPlay
|
|
for (let kind in itemsToPlay) {
|
|
let ids = itemsToPlay[kind]
|
|
if (ids.length > 0) {
|
|
app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
|
|
}
|
|
}
|
|
app.selectedMediaItems = []
|
|
}
|
|
},
|
|
]
|
|
},
|
|
normal: {
|
|
headerItems: [
|
|
{
|
|
"icon": "./assets/feather/heart.svg",
|
|
"id": "love",
|
|
"name": app.getLz('action.love'),
|
|
"hidden": false,
|
|
"disabled": true,
|
|
"action": function () {
|
|
app.love(self.item)
|
|
}
|
|
},
|
|
{
|
|
"icon": "./assets/feather/heart.svg",
|
|
"id": "unlove",
|
|
"active": true,
|
|
"name": app.getLz('action.unlove'),
|
|
"hidden": true,
|
|
"action": function () {
|
|
app.unlove(self.item)
|
|
}
|
|
},
|
|
{
|
|
"icon": "./assets/feather/thumbs-down.svg",
|
|
"id": "dislike",
|
|
"name": app.getLz('action.dislike'),
|
|
"hidden": false,
|
|
"disabled": true,
|
|
"action": function () {
|
|
app.dislike(self.item)
|
|
}
|
|
},
|
|
{
|
|
"icon": "./assets/feather/thumbs-down.svg",
|
|
"id": "undo_dislike",
|
|
"name": app.getLz('action.undoDislike'),
|
|
"active": true,
|
|
"hidden": true,
|
|
"action": function () {
|
|
app.unlove(self.item)
|
|
}
|
|
},
|
|
],
|
|
items: [
|
|
{
|
|
"icon": "./assets/feather/list.svg",
|
|
"id": "addToPlaylist",
|
|
"name": app.getLz('action.addToPlaylist'),
|
|
"action": function () {
|
|
app.promptAddToPlaylist()
|
|
}
|
|
},
|
|
{
|
|
"id": "addToLibrary",
|
|
"icon": "./assets/feather/plus.svg",
|
|
"name": app.getLz('action.addToLibrary'),
|
|
"hidden": false,
|
|
"disabled": true,
|
|
"action": function () {
|
|
let item_id = self.item.attributes.playParams.id ?? self.item.id;
|
|
let data_type = self.item.attributes.playParams.kind ?? self.item.type;
|
|
app.addToLibrary(item_id);
|
|
self.addedToLibrary = true;
|
|
}
|
|
},
|
|
{
|
|
"id": "removeFromLibrary",
|
|
"icon": "./assets/feather/x-circle.svg",
|
|
"name": app.getLz('action.removeFromLibrary'),
|
|
"hidden": true,
|
|
"action": async function () {
|
|
console.log("remove");
|
|
let item_id = self.item.attributes.playParams.id ?? self.item.id;
|
|
let data_type = self.item.attributes.playParams.kind ?? self.item.type;
|
|
await self.removeFromLibrary(item_id);
|
|
self.addedToLibrary = false
|
|
}
|
|
},
|
|
{
|
|
"name": app.getLz('action.playNext'),
|
|
"icon": "./assets/arrow-bend-up.svg",
|
|
"action": function () {
|
|
app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
|
|
app.mk.queue._reindex()
|
|
app.selectedMediaItems = []
|
|
}
|
|
},
|
|
{
|
|
"name": app.getLz('action.playLater'),
|
|
"icon": "./assets/arrow-bend-down.svg",
|
|
"action": function () {
|
|
app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
|
|
app.mk.queue._reindex()
|
|
app.selectedMediaItems = []
|
|
}
|
|
},
|
|
{
|
|
"icon": "./assets/feather/share.svg",
|
|
"name": app.getLz('action.share'),
|
|
"action": function () {
|
|
if (!self.item.attributes.url && self.item.relationships) {
|
|
if (self.item.relationships.catalog) {
|
|
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {
|
|
self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
|
|
})
|
|
}
|
|
} else {
|
|
self.app.copyToClipboard(self.item.attributes.url)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"icon": "./assets/feather/share.svg",
|
|
"name": `${app.getLz('action.share')} (song.link)`,
|
|
"action": function () {
|
|
if (!self.item.attributes.url && self.item.relationships) {
|
|
if (self.item.relationships.catalog) {
|
|
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {
|
|
self.app.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
|
|
})
|
|
}
|
|
} else {
|
|
self.app.songLinkShare(self.item.attributes.url)
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
|
|
// remove the add to playlist option by id "addToPlaylist" using the .filter() method
|
|
menus.normal.items = menus.normal.items.filter(function (item) {
|
|
return item.id != "addToPlaylist"
|
|
})
|
|
}
|
|
app.showMenuPanel(menus[useMenu], event)
|
|
|
|
try {
|
|
await this.isInLibrary().then((_) => {
|
|
if (self.addedToLibrary) {
|
|
menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
|
|
menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
|
|
} else {
|
|
menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
|
|
}
|
|
})
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
try {
|
|
let rating = await app.getRating(self.item)
|
|
if (rating == 0) {
|
|
menus.normal.headerItems.find(x => x.id == 'love').disabled = false
|
|
menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
|
|
} else if (rating == 1) {
|
|
menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
|
|
menus.normal.headerItems.find(x => x.id == 'love').hidden = true
|
|
} else if (rating == -1) {
|
|
menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
|
|
menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
|
|
}
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
if (this.contextExt) {
|
|
if (this.contextExt.normal) {
|
|
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
|
|
}
|
|
if (this.contextExt.multiple) {
|
|
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
|
}
|
|
}
|
|
},
|
|
async artistMenu(event) {
|
|
console.debug(this.item)
|
|
let self = this
|
|
let followAction = "follow"
|
|
let followActions = {
|
|
follow: {
|
|
icon: "./assets/feather/plus-circle.svg",
|
|
name: app.getLz('action.favorite'),
|
|
action: () => {
|
|
self.$root.setArtistFavorite(this.item.id, true)
|
|
}
|
|
},
|
|
unfollow: {
|
|
icon: "./assets/feather/x-circle.svg",
|
|
name: app.getLz('action.removeFavorite'),
|
|
action: () => {
|
|
self.$root.setArtistFavorite(this.item.id, false)
|
|
}
|
|
}
|
|
}
|
|
if (self.app.cfg.home.followedArtists.includes(this.item.id)) {
|
|
followAction = "unfollow"
|
|
}
|
|
app.showMenuPanel({
|
|
items: [
|
|
{
|
|
icon: "./assets/feather/play.svg",
|
|
name: app.getLz('action.startRadio'),
|
|
action: () => {
|
|
app.mk.setStationQueue({ artist: this.item.id }).then(() => {
|
|
app.mk.play()
|
|
})
|
|
}
|
|
},
|
|
followActions[followAction],
|
|
{
|
|
icon: "./assets/feather/share.svg",
|
|
name: app.getLz('term.share'),
|
|
action: () => {
|
|
self.app.copyToClipboard(this.item.id.attributes.url)
|
|
}
|
|
},
|
|
{
|
|
icon: "./assets/feather/external-link.svg",
|
|
name: app.getLz('action.openArtworkInBrowser'),
|
|
action: () => {
|
|
window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
|
|
}
|
|
}
|
|
]
|
|
}, event)
|
|
},
|
|
},
|
|
beforeDestroy: function () {
|
|
// this.item = null;
|
|
// this.kind = null;
|
|
// this.size = null;
|
|
}
|
|
});
|
|
</script> |