add to library added to mediaitem-list-item

This commit is contained in:
booploops 2021-12-08 01:11:34 -08:00
parent 6a59de9b16
commit 0b5389a528
5 changed files with 40 additions and 15 deletions

View file

@ -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 ?? '' : '');

View file

@ -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)
}
}
});

View file

@ -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);"

View file

@ -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);"

View file

@ -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