134 lines
No EOL
6.8 KiB
Text
134 lines
No EOL
6.8 KiB
Text
<script type="text/x-template" id="mediaitem-square">
|
|
<template>
|
|
<div tabindex="0"
|
|
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
|
|
<template v-if="isVisible">
|
|
<div class="artwork-container">
|
|
<div class="artwork" @click='app.routeView(item)'>
|
|
<mediaitem-artwork
|
|
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
|
: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="300"
|
|
:type="item.type"></mediaitem-artwork>
|
|
</div>
|
|
<button class="menu-btn" v-if="item.type != 'artists' && item.type != 'stations'" @click="contextMenu"><%- include("../svg/more.svg") %></button>
|
|
<button class="play-btn" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
|
</div>
|
|
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
|
|
{{ item.attributes.name }}
|
|
</div>
|
|
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')" v-if="item.attributes.artistName">
|
|
{{ item.attributes.artistName }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-square', {
|
|
template: '#mediaitem-square',
|
|
props: ['item'],
|
|
data: function () {
|
|
return {
|
|
isVisible: false,
|
|
addedToLibrary: false,
|
|
guid: uuidv4()
|
|
}
|
|
},
|
|
methods: {
|
|
getClasses() {
|
|
switch(this.item.type) {
|
|
default:
|
|
return []
|
|
break;
|
|
case "uploaded-videos":
|
|
return "mediaitem-video";
|
|
break;
|
|
}
|
|
},
|
|
visibilityChanged: function (isVisible, entry) {
|
|
this.isVisible = isVisible
|
|
},
|
|
contextMenu(event) {
|
|
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)
|
|
} else {
|
|
useMenu = "multiple"
|
|
}
|
|
let menus = {
|
|
multiple: {
|
|
items: [
|
|
{
|
|
name: `Play ${app.selectedMediaItems.length} tracks next`,
|
|
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: `Play ${app.selectedMediaItems.length} tracks later`,
|
|
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: {
|
|
items: [
|
|
{
|
|
"name": "Play Next",
|
|
"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": "Play Later",
|
|
"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 = []
|
|
}
|
|
},
|
|
]
|
|
}
|
|
}
|
|
CiderContextMenu.Create(event, menus[useMenu])
|
|
},
|
|
}
|
|
});
|
|
</script> |