382 lines
No EOL
15 KiB
Text
382 lines
No EOL
15 KiB
Text
<script type="text/x-template" id="mediaitem-smarthints">
|
|
<div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item);$root.search.cursor = -1;$root.search.term == ''" @contextmenu="$root.hintscontext = true;getContextMenu()"
|
|
:class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
|
|
<div class="row" @contextmenu="$root.hintscontext = true;getContextMenu()">
|
|
<div class="col-auto cider-flex-center" @contextmenu="$root.hintscontext = true;getContextMenu()">
|
|
<div class="artwork" :class="{'circle': item.type == 'artists'}">
|
|
<mediaitem-artwork
|
|
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
|
:size="32"></mediaitem-artwork>
|
|
</div>
|
|
</div>
|
|
<div class="col queue-info" @contextmenu="$root.hintscontext = true;getContextMenu()">
|
|
<div class="queue-title text-overflow-elipsis">{{ item.attributes.name }}
|
|
</div>
|
|
<div class="queue-subtitle text-overflow-elipsis">{{
|
|
item.attributes.artistName }}
|
|
</div>
|
|
</div>
|
|
<div class="queue-explicit-icon cider-flex-center"
|
|
v-if="item.attributes.contentRating == 'explicit'">
|
|
<div class="explicit-icon"></div>
|
|
</div>
|
|
<!-- <div class="col queue-duration-info">
|
|
<div class="queue-duration cider-flex-center">
|
|
{{convertTimeToString(item.content.attributes.durationInMillis)}}
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('mediaitem-smarthints', {
|
|
template: '#mediaitem-smarthints',
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
position: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
guid: this.uuidv4(),
|
|
}
|
|
},
|
|
async mounted() {
|
|
},
|
|
methods: {
|
|
uuidv4() {
|
|
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
|
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
|
);
|
|
},
|
|
getContextMenu(event) {
|
|
if (event){
|
|
if (this.item.type === "artists") {
|
|
return this.artistMenu(event)
|
|
} else {
|
|
return this.contextMenu(event)
|
|
}
|
|
} else {
|
|
document.addEventListener('mouseover', event => {
|
|
if (this.item.type === "artists") {
|
|
return this.artistMenu(event)
|
|
} else {
|
|
return this.contextMenu(event)
|
|
}
|
|
},{once: true})}
|
|
|
|
},
|
|
async contextMenu(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) {
|
|
let self = this
|
|
let followAction = "follow"
|
|
let followActions = {
|
|
follow: {
|
|
icon: "./assets/star.svg",
|
|
name: app.getLz('action.favorite'),
|
|
action: () => {
|
|
self.$root.setArtistFavorite(this.item.id, true)
|
|
}
|
|
},
|
|
unfollow: {
|
|
icon: "./assets/star.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: 'a-'+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.attributes.url)
|
|
}
|
|
},
|
|
{
|
|
icon: "./assets/feather/external-link.svg",
|
|
name: app.getLz('action.openArtworkInBrowser'),
|
|
action: () => {
|
|
window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
|
|
}
|
|
},
|
|
|
|
]
|
|
}, event)
|
|
},
|
|
getArtworkUrl(size = -1, includeUrl = false) {
|
|
let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.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
|
|
break;
|
|
}
|
|
if (!includeUrl) {
|
|
return artwork
|
|
} else {
|
|
return `url("${artwork}")`
|
|
}
|
|
},
|
|
},
|
|
beforeDestroy: function () {
|
|
// this.item = null;
|
|
// this.kind = null;
|
|
// this.size = null;
|
|
}
|
|
});
|
|
</script>
|
|
|