126 lines
No EOL
4.9 KiB
Text
126 lines
No EOL
4.9 KiB
Text
<script type="text/x-template" id="cider-collection-list">
|
|
<div class="content-inner collection-page">
|
|
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
|
|
<div v-if="data['data'] != 'null'" class="well">
|
|
<template v-for="(item, key) in data.data">
|
|
<template v-if="item.type == 'artists'">
|
|
<mediaitem-square :item="item"></mediaitem-square>
|
|
</template>
|
|
<template v-else>
|
|
<mediaitem-list-item
|
|
v-if="getKind(item) == 'song'"
|
|
:index="key"
|
|
:item="item"></mediaitem-list-item>
|
|
<mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
|
|
</template>
|
|
</template>
|
|
<button v-if="triggerEnabled" style="opacity:0;height: 32px;"
|
|
v-observe-visibility="{callback: visibilityChanged}">{{app.getLz('term.showMore')}}
|
|
</button>
|
|
</div>
|
|
<transition name="fabfade">
|
|
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
|
|
<%- include("../svg/arrow-up.svg") %>
|
|
</button>
|
|
</transition>
|
|
<div class="well" v-show="loading"><div class="spinner"></div></div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('cider-collection-list', {
|
|
template: "#cider-collection-list",
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: "artists"
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
triggerEnabled: true,
|
|
canSeeTrigger: false,
|
|
showFab: false,
|
|
commonKind: "song",
|
|
api: this.$root.mk.api,
|
|
loading: false,
|
|
app: this.$root,
|
|
}
|
|
},
|
|
methods: {
|
|
getKind(item) {
|
|
if (typeof item.kind != "undefined") {
|
|
this.commonKind = item.kind;
|
|
return item.kind
|
|
}
|
|
if (typeof item.attributes.playParams != "undefined") {
|
|
this.commonKind = item.attributes.playParams.kind
|
|
return item.attributes.playParams.kind
|
|
}
|
|
return this.commonKind
|
|
},
|
|
scrollToTop() {
|
|
let target = document.querySelector(".header-text")
|
|
document.querySelector("#app-content").scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
},
|
|
getNext() {
|
|
let self = this
|
|
this.triggerEnabled = false;
|
|
if (typeof this.data.next == "undefined") {
|
|
return
|
|
}
|
|
this.loading = true
|
|
|
|
this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
|
|
console.log(response)
|
|
if (!app.collectionList.response.groups) {
|
|
this.data.data = this.data.data.concat(response.data.data);
|
|
if (response.data.next) {
|
|
this.data.next = response.data.next;
|
|
this.triggerEnabled = true;
|
|
}
|
|
this.loading = false
|
|
}else{
|
|
if(!response.data.results[app.collectionList.response.groups]) {
|
|
this.loading = false
|
|
return
|
|
}
|
|
this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
|
|
if (response.data.results[app.collectionList.response.groups].next) {
|
|
this.data.next = response.data.results[app.collectionList.response.groups].next;
|
|
this.triggerEnabled = true;
|
|
this.loading = false
|
|
}
|
|
}
|
|
})
|
|
},
|
|
headerVisibility: function (isVisible, entry) {
|
|
if (isVisible) {
|
|
this.showFab = false;
|
|
} else {
|
|
this.showFab = true;
|
|
}
|
|
},
|
|
visibilityChanged: function (isVisible, entry) {
|
|
if (isVisible) {
|
|
this.canSeeTrigger = true;
|
|
this.getNext();
|
|
} else {
|
|
this.canSeeTrigger = false;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script> |