improvements to song, album search

resources/cider-ui-tests/index.js

@@ -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.downloadNotification.show = true
-                self.library.songs.meta.progress = library.length
+                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.downloadNotification.show = true
-                self.library.songs.meta.progress = library.length
+                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)

resources/cider-ui-tests/views/main.ejs

@@ -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 class="app-sidebar-notification" v-if="library.downloadNotification.show">
-                        <div>Updating your library...</div>
+                        <div>{{ library.downloadNotification.message }}</div>
-                        <div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
+                        <div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}</div>
                         <div style="width: 100%">
-                            <progress style="width: 80%;" :value="library.songs.meta.progress"
+                            <progress style="width: 80%;" :value="library.downloadNotification.progress"
-                                :max="library.songs.meta.total"></progress>
+                                :max="library.downloadNotification.total"></progress>
                         </div>
                     </div>
                 </div>