okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

very basic songs search, checks if downloaded.next is undefined

Browse source
This commit is contained in:
booploops 2021-12-04 13:44:26 -08:00
parent 6f856fab2f
commit 6e5fc7fb0b
2 changed files with 69 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

8
resources/cider-ui-tests/index.html
View file

@ -268,10 +268,12 @@
style="width:100%;" style="width:100%;"
spellcheck="false" spellcheck="false"
placeholder="Search..." placeholder="Search..."
@input="searchLibrarySongs"
v-model="library.songs.search"
class="search-input"> class="search-input">
</div> </div>
<mediaitem-list-item :item="item" <mediaitem-list-item :item="item"
v-for="item in library.songs.listing"></mediaitem-list-item> v-for="item in library.songs.displayListing"></mediaitem-list-item>
</template> </template>
</div> </div>
</template> </template>
@ -460,9 +462,9 @@
<template> <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 @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-list-item"> class="cd-mediaitem-list-item">
<div class="artwork" <div class="artwork" v-if="item.attributes.artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 34)} :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url ? item.attributes.artwork.url : '', 34)}
"></div> "></div>
<div class="info-rect"> <div class="info-rect">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">

56
resources/cider-ui-tests/index.js
View file

@ -108,6 +108,8 @@ const app = new Vue({
songs: { songs: {
listing: [], listing: [],
meta: {total: 0, progress: 0}, meta: {total: 0, progress: 0},
search: "",
displayListing: [],
downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete
}, },
albums: { albums: {
@ -121,9 +123,7 @@ const app = new Vue({
}, },
chrome: { chrome: {
artworkReady: false, artworkReady: false,
userinfo: { userinfo: {},
},
menuOpened: false, menuOpened: false,
maximized: false maximized: false
}, },
@ -152,7 +152,18 @@ const app = new Vue({
}) })
document.body.removeAttribute("loading") document.body.removeAttribute("loading")
}, },
searchLibrarySongs() {
let self = this
if (this.library.songs.search == "") {
this.library.songs.displayListing = this.library.songs.listing
} else {
this.library.songs.displayListing = this.library.songs.listing.filter(item => {
if(item.attributes.name.toLowerCase().includes(this.library.songs.search.toLowerCase())) {
return item
}
})
}
},
getSidebarItemClass(page) { getSidebarItemClass(page) {
if (this.page == page) { if (this.page == page) {
return ["active"] return ["active"]
@ -175,39 +186,46 @@ const app = new Vue({
return await this.mkapi(method, library, term, params, params2, attempts + 1) return await this.mkapi(method, library, term, params, params2, attempts + 1)
} }
}, },
async getLibrarySongsFull () { async getLibrarySongsFull() {
let self = this let self = this
let library = [] let library = []
let downloaded = null; let downloaded = null;
if(this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) { if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) {
return return
} }
this.library.songs.downloadState = 1 this.library.songs.downloadState = 1
function downloadChunk () {
if(downloaded == null) { function downloadChunk() {
app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{ if (downloaded == null) {
app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((response) => {
processChunk(response) processChunk(response)
}) })
}else{ } else {
downloaded.next("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{ downloaded.next("", {limit: 100}, {includeResponseMeta: !0}).then((response) => {
processChunk(response) processChunk(response)
}) })
} }
} }
function processChunk (response) {
function processChunk(response) {
downloaded = response downloaded = response
library = library.concat(downloaded.data) library = library.concat(downloaded.data)
self.library.songs.meta.total = downloaded.meta.total self.library.songs.meta.total = downloaded.meta.total
self.library.songs.meta.progress = library.length self.library.songs.meta.progress = library.length
if (downloaded.meta.total > library.length) { if(typeof downloaded.next == "undefined") {
console.log("downloaded.next is undefined")
}
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
console.log(`downloading next chunk - ${library.length} songs so far`) console.log(`downloading next chunk - ${library.length} songs so far`)
downloadChunk() downloadChunk()
} else { } else {
self.library.songs.listing = library self.library.songs.listing = library
self.library.songs.downloadState = 2 self.library.songs.downloadState = 2
self.searchLibrarySongs()
console.log(library) console.log(library)
} }
} }
downloadChunk() downloadChunk()
}, },
async getLibrarySongs() { async getLibrarySongs() {
@ -314,17 +332,16 @@ const app = new Vue({
return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`; return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`;
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {
if(!this.mkReady()) { if (!this.mkReady()) {
return "" return ""
} }
try{ try {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`; return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
} else { } else {
return ""; return "";
} }
} } catch (e) {
catch (e){
return "" return ""
// Does not work // Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => { // this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
@ -343,14 +360,13 @@ const app = new Vue({
} }
}, },
getNowPlayingArtwork(size = 600) { getNowPlayingArtwork(size = 600) {
try{ try {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`; return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
} else { } else {
return ""; return "";
} }
} } catch (e) {
catch (e){
return "" return ""
// Does not work // Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => { // this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {