136 lines
No EOL
6.4 KiB
Text
136 lines
No EOL
6.4 KiB
Text
<script type="text/x-template" id="mediaitem-list-item">
|
|
<template>
|
|
<div v-observe-visibility="{callback: visibilityChanged}"
|
|
@contextmenu="contextMenu"
|
|
class="cd-mediaitem-list-item">
|
|
<template v-if="isVisible">
|
|
<div class="isLibrary" v-if="showLibraryStatus == true">
|
|
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
|
|
<button v-else>❤️</button>
|
|
</div>
|
|
<div class="artwork" v-if="showArtwork == true" @click="playTrack()">
|
|
<mediaitem-artwork
|
|
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
|
size="34"
|
|
:type="item.type"></mediaitem-artwork>
|
|
</div>
|
|
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click.self="playTrack()">
|
|
<div class="title text-overflow-elipsis" @click.self="playTrack()">
|
|
{{ item.attributes.name }}
|
|
</div>
|
|
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
|
|
<template v-if="item.attributes.artistName" >
|
|
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
|
|
{{ item.attributes.artistName }}
|
|
</div>
|
|
<template v-if="item.attributes.albumName"> - </template>
|
|
<template v-if="item.attributes.albumName">
|
|
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
|
|
{{ item.attributes.albumName }}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="content-rating" v-if="item.attributes.contentRating" @click="playTrack()">
|
|
{{ item.attributes.contentRating }}
|
|
</div>
|
|
<template v-if="showMetaData == true" @click="playTrack()">
|
|
<div class="metainfo">
|
|
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
|
|
: "" }}
|
|
</div>
|
|
<div class="metainfo">
|
|
{{ item.attributes.genreNames[0] ?? "" }}
|
|
</div>
|
|
</template>
|
|
<div class="duration" v-if="showDuration" @click="playTrack()">
|
|
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-list-item', {
|
|
template: '#mediaitem-list-item',
|
|
data: function () {
|
|
return {
|
|
isVisible: false,
|
|
addedToLibrary: false
|
|
}
|
|
},
|
|
props: {
|
|
'item': {type: Object, required: true},
|
|
'parent': {type: Object, required: false},
|
|
'index': {type: Object, required: false},
|
|
'show-artwork': {type: Boolean, default: true},
|
|
'show-library-status': {type: Boolean, default: true},
|
|
'show-meta-data': {type: Boolean, default: false},
|
|
'show-duration': {type: Boolean, default: true}
|
|
},
|
|
methods: {
|
|
contextMenu(event) {
|
|
let self = this
|
|
CiderContextMenu.Create(event,
|
|
{
|
|
items: [
|
|
{
|
|
"name": "Start Radio",
|
|
"action": function() {
|
|
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(()=>{
|
|
app.mk.play()
|
|
})
|
|
}
|
|
},
|
|
{
|
|
"name": "Add to Queue",
|
|
"action": function() {
|
|
console.log(self.item)
|
|
app.mk.queue.append([new MusicKit.MediaItem(self.item)])
|
|
}
|
|
},
|
|
{
|
|
"name": "Go to Artist",
|
|
"action": function() {
|
|
app.searchAndNavigate(self.item,'artist')
|
|
}
|
|
},
|
|
{
|
|
"name": "Go to Album",
|
|
"action": function() {
|
|
app.searchAndNavigate(self.item,'album')
|
|
}
|
|
},
|
|
]
|
|
});
|
|
},
|
|
visibilityChanged: function (isVisible, entry) {
|
|
this.isVisible = isVisible
|
|
},
|
|
addToLibrary() {
|
|
let item = this.item
|
|
if(item.attributes.playParams.id) {
|
|
console.log('adding to library', item.attributes.playParams.id)
|
|
app.addToLibrary(item.attributes.playParams.id.toString())
|
|
this.addedToLibrary = true
|
|
}else if(item.id) {
|
|
console.log('adding to library', item.id)
|
|
app.addToLibrary(item.id.toString())
|
|
this.addedToLibrary = true
|
|
}
|
|
},
|
|
playTrack() {
|
|
let item = this.item
|
|
let parent = this.parent
|
|
let childIndex = this.index
|
|
if (parent != null && childIndex != null){
|
|
app.queueParentandplayChild(parent,childIndex);
|
|
} else {
|
|
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script> |