improvements to song, album search
This commit is contained in:
booploops
parent
4634c2758b
commit
794e1225d0
2 changed files with 66 additions and 16 deletions
|
|
@ -82,6 +82,12 @@ const app = new Vue({
|
|||
topSongsExpanded: false
|
||||
},
|
||||
library: {
|
||||
downloadNotification: {
|
||||
show: false,
|
||||
message: "",
|
||||
total: 0,
|
||||
progress: 0
|
||||
},
|
||||
songs: {
|
||||
sortingOptions: {
|
||||
"albumName": "Album",
|
||||
|
|
@ -456,7 +462,24 @@ const app = new Vue({
|
|||
sortSongs()
|
||||
} else {
|
||||
this.library.songs.displayListing = this.library.songs.listing.filter(item => {
|
||||
if (item.attributes.name.toLowerCase().includes(this.library.songs.search.toLowerCase())) {
|
||||
let itemName = item.attributes.name.toLowerCase()
|
||||
let searchTerm = this.library.songs.search.toLowerCase()
|
||||
let artistName = ""
|
||||
let albumName = ""
|
||||
if (item.attributes.artistName != null) {
|
||||
artistName = item.attributes.artistName.toLowerCase()
|
||||
}
|
||||
if (item.attributes.albumName != null) {
|
||||
albumName = item.attributes.albumName.toLowerCase()
|
||||
}
|
||||
|
||||
// remove any non-alphanumeric characters and spaces from search term and item name
|
||||
searchTerm = searchTerm.replace(/[^a-z0-9 ]/gi, "")
|
||||
itemName = itemName.replace(/[^a-z0-9 ]/gi, "")
|
||||
artistName = artistName.replace(/[^a-z0-9 ]/gi, "")
|
||||
albumName = albumName.replace(/[^a-z0-9 ]/gi, "")
|
||||
|
||||
if (itemName.includes(searchTerm) || artistName.includes(searchTerm) || albumName.includes(searchTerm)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
|
@ -521,7 +544,24 @@ const app = new Vue({
|
|||
sortAlbums()
|
||||
} else {
|
||||
this.library.albums.displayListing = this.library.albums.listing.filter(item => {
|
||||
if (item.attributes.name.toLowerCase().includes(this.library.albums.search.toLowerCase())) {
|
||||
let itemName = item.attributes.name.toLowerCase()
|
||||
let searchTerm = this.library.albums.search.toLowerCase()
|
||||
let artistName = ""
|
||||
let albumName = ""
|
||||
if (item.attributes.artistName != null) {
|
||||
artistName = item.attributes.artistName.toLowerCase()
|
||||
}
|
||||
if (item.attributes.albumName != null) {
|
||||
albumName = item.attributes.albumName.toLowerCase()
|
||||
}
|
||||
|
||||
// remove any non-alphanumeric characters and spaces from search term and item name
|
||||
searchTerm = searchTerm.replace(/[^a-z0-9 ]/gi, "")
|
||||
itemName = itemName.replace(/[^a-z0-9 ]/gi, "")
|
||||
artistName = artistName.replace(/[^a-z0-9 ]/gi, "")
|
||||
albumName = albumName.replace(/[^a-z0-9 ]/gi, "")
|
||||
|
||||
if (itemName.includes(searchTerm) || artistName.includes(searchTerm) || albumName.includes(searchTerm)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
|
@ -577,6 +617,8 @@ const app = new Vue({
|
|||
return
|
||||
}
|
||||
this.library.songs.downloadState = 1
|
||||
this.library.downloadNotification.show = true
|
||||
this.library.downloadNotification.message = "Updating library songs..."
|
||||
|
||||
function downloadChunk() {
|
||||
self.library.songs.downloadState = 1
|
||||
|
|
@ -594,8 +636,11 @@ const app = new Vue({
|
|||
function processChunk(response) {
|
||||
downloaded = response
|
||||
library = library.concat(downloaded.data)
|
||||
self.library.songs.meta.total = downloaded.meta.total
|
||||
self.library.songs.meta.progress = library.length
|
||||
self.library.downloadNotification.show = true
|
||||
self.library.downloadNotification.message = "Updating library songs..."
|
||||
self.library.downloadNotification.total = downloaded.meta.total
|
||||
self.library.downloadNotification.progress = library.length
|
||||
|
||||
if (downloaded.meta.total == 0) {
|
||||
self.library.songs.downloadState = 3
|
||||
return
|
||||
|
|
@ -604,6 +649,7 @@ const app = new Vue({
|
|||
console.log("downloaded.next is undefined")
|
||||
self.library.songs.listing = library
|
||||
self.library.songs.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
self.searchLibrarySongs()
|
||||
localStorage.setItem("librarySongs", JSON.stringify(library))
|
||||
}
|
||||
|
|
@ -613,6 +659,7 @@ const app = new Vue({
|
|||
} else {
|
||||
self.library.songs.listing = library
|
||||
self.library.songs.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
self.searchLibrarySongs()
|
||||
localStorage.setItem("librarySongs", JSON.stringify(library))
|
||||
console.log(library)
|
||||
|
|
@ -637,10 +684,11 @@ const app = new Vue({
|
|||
return
|
||||
}
|
||||
this.library.albums.downloadState = 1
|
||||
this.library.songs.downloadState = 1
|
||||
this.library.downloadNotification.show = true
|
||||
this.library.downloadNotification.message = "Updating library albums..."
|
||||
|
||||
function downloadChunk() {
|
||||
self.library.songs.downloadState = 1
|
||||
self.library.albums.downloadState = 1
|
||||
if (downloaded == null) {
|
||||
app.mk.api.library.albums("", {limit: 100}, {includeResponseMeta: !0}).then((response) => {
|
||||
processChunk(response)
|
||||
|
|
@ -655,10 +703,11 @@ const app = new Vue({
|
|||
function processChunk(response) {
|
||||
downloaded = response
|
||||
library = library.concat(downloaded.data)
|
||||
self.library.songs.meta.total = downloaded.meta.total
|
||||
self.library.songs.meta.progress = library.length
|
||||
self.library.downloadNotification.show = true
|
||||
self.library.downloadNotification.message = "Updating library albums..."
|
||||
self.library.downloadNotification.total = downloaded.meta.total
|
||||
self.library.downloadNotification.progress = library.length
|
||||
if (downloaded.meta.total == 0) {
|
||||
self.library.songs.downloadState = 3
|
||||
self.library.albums.downloadState = 3
|
||||
return
|
||||
}
|
||||
|
|
@ -666,7 +715,7 @@ const app = new Vue({
|
|||
console.log("downloaded.next is undefined")
|
||||
self.library.albums.listing = library
|
||||
self.library.albums.downloadState = 2
|
||||
self.library.songs.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
localStorage.setItem("libraryAlbums", JSON.stringify(library))
|
||||
self.searchLibraryAlbums()
|
||||
}
|
||||
|
|
@ -677,7 +726,7 @@ const app = new Vue({
|
|||
} else {
|
||||
self.library.albums.listing = library
|
||||
self.library.albums.downloadState = 2
|
||||
self.library.songs.downloadState = 2
|
||||
self.library.downloadNotification.show = false
|
||||
localStorage.setItem("libraryAlbums", JSON.stringify(library))
|
||||
self.searchLibraryAlbums()
|
||||
console.log(library)
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@
|
|||
<div class="app-sidebar-header-text">
|
||||
Library
|
||||
</div>
|
||||
<sidebar-library-item name="Recently Added" page="library-recentlyadded"></sidebar-library-item>
|
||||
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
|
||||
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
|
||||
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
|
||||
|
|
@ -193,12 +194,12 @@
|
|||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
|
||||
<div>Updating your library...</div>
|
||||
<div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
|
||||
<div class="app-sidebar-notification" v-if="library.downloadNotification.show">
|
||||
<div>{{ library.downloadNotification.message }}</div>
|
||||
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}</div>
|
||||
<div style="width: 100%">
|
||||
<progress style="width: 80%;" :value="library.songs.meta.progress"
|
||||
:max="library.songs.meta.total"></progress>
|
||||
<progress style="width: 80%;" :value="library.downloadNotification.progress"
|
||||
:max="library.downloadNotification.total"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue