add to library added to mediaitem-list-item
This commit is contained in:
parent
6a59de9b16
commit
0b5389a528
5 changed files with 40 additions and 15 deletions
|
@ -606,7 +606,10 @@ const app = new Vue({
|
|||
let self = this
|
||||
let library = []
|
||||
let downloaded = null;
|
||||
if ((this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) && !force) {
|
||||
if ((this.library.songs.downloadState == 2) && !force) {
|
||||
return
|
||||
}
|
||||
if(this.library.songs.downloadState == 1) {
|
||||
return
|
||||
}
|
||||
if (localStorage.getItem("librarySongs") != null) {
|
||||
|
@ -824,6 +827,12 @@ const app = new Vue({
|
|||
})
|
||||
}
|
||||
},
|
||||
addToLibrary(id) {
|
||||
let self = this
|
||||
this.mk.addToLibrary(id).then((data)=>{
|
||||
self.getLibrarySongsFull(true)
|
||||
})
|
||||
},
|
||||
loadMXM() {
|
||||
let attempt = 0;
|
||||
const track = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : '');
|
||||
|
|
|
@ -1,12 +1,10 @@
|
|||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div
|
||||
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
v-observe-visibility="{callback: visibilityChanged}"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
class="cd-mediaitem-list-item">
|
||||
<template v-if="isVisible">
|
||||
<div class="isLibrary" v-if="showLibraryStatus == true">
|
||||
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
|
||||
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
|
||||
<button v-else>❤️</button>
|
||||
</div>
|
||||
<div class="artwork" v-if="showArtwork == true">
|
||||
|
@ -15,7 +13,7 @@
|
|||
size="34"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click="playTrack()">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
|
@ -28,18 +26,19 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-rating" v-if="item.attributes.contentRating">
|
||||
<div class="content-rating" v-if="item.attributes.contentRating" @click="playTrack()">
|
||||
{{ item.attributes.contentRating }}
|
||||
</div>
|
||||
<template v-if="showMetaData == true">
|
||||
<template v-if="showMetaData == true" @click="playTrack()">
|
||||
<div class="metainfo">
|
||||
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
|
||||
{{ 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">
|
||||
<div class="duration" v-if="showDuration" @click="playTrack()">
|
||||
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
||||
</div>
|
||||
</template>
|
||||
|
@ -52,7 +51,8 @@
|
|||
template: '#mediaitem-list-item',
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false
|
||||
isVisible: false,
|
||||
addedToLibrary: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -65,6 +65,22 @@
|
|||
methods: {
|
||||
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
|
||||
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
|
||||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
<div tabindex="0" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue