feat: Return a valid json if playlist/library query result is empty, implement #175.

interface.py

@@ -232,7 +232,12 @@ def index():
 @requires_auth
 def playlist():
     if len(var.playlist) == 0:
-        return ('', 204)
+        return jsonify({
+            'items': [],
+            'current_index': -1,
+            'length': 0,
+            'start_from': 0
+        })
 
     DEFAULT_DISPLAY_COUNT = 11
     _from = 0
@@ -581,7 +586,11 @@ def library():
                 pass
 
             if not total_count:
-                return '', 204
+                return jsonify({
+                    'items': [],
+                    'total_pages': 0,
+                    'active_page': 0
+                })
 
             if request.form['action'] == 'add':
                 items = dicts_to_items(var.music_db.query_music(condition))

web/js/main.mjs

@@ -164,11 +164,16 @@ function displayPlaylist(data) {
     playlist_loading.hide();
     $('.playlist-item').remove();
     const items = data.items;
+    const length = data.length;
+    if (items.length === 0){
+      playlist_empty.removeClass('d-none');
+      playlist_table.animate({ opacity: 1 }, 200);
+      return;
+    }
     playlist_items = {};
     for (const i in items) {
       playlist_items[items[i].index] = items[i];
     }
-    const length = data.length;
     const start_from = data.start_from;
     playlist_range_from = start_from;
     playlist_range_to = start_from + items.length - 1;
@@ -200,9 +205,7 @@ function displayPlaylist(data) {
     displayActiveItem(data.current_index);
     updatePlayerInfo(playlist_items[data.current_index]);
     bindPlaylistEvent();
-    playlist_table.animate({
+    playlist_table.animate({ opacity: 1 }, 200);
-      opacity: 1,
-    }, 200);
   });
 }
 
@@ -251,11 +254,6 @@ function updatePlaylist() {
       data: data,
       statusCode: {
         200: displayPlaylist,
-        204: function () {
-          playlist_loading.hide();
-          playlist_empty.removeClass('d-none');
-          $('.playlist-item').remove();
-        },
       },
     });
     playlist_table.animate({
@@ -642,11 +640,6 @@ function updateResults(dest_page = 1) {
       data: data,
       statusCode: {
         200: processResults,
-        204: function () {
-          lib_loading.hide();
-          lib_empty.show();
-          page_ul.empty();
-        },
         403: function () {
           location.reload(true);
         },
@@ -738,6 +731,13 @@ function processResults(data) {
     const total_pages = data.total_pages;
     const active_page = data.active_page;
     const items = data.items;
+    if (items.length === 0) {
+      lib_loading.hide();
+      lib_empty.show();
+      page_ul.empty();
+      lib_group.animate({ opacity: 1 }, 200);
+      return;
+    }
     items.forEach(
       function (item) {
         addResultItem(item);
@@ -797,10 +797,7 @@ function processResults(data) {
       page_no_copy.appendTo(page_li_copy);
       page_li_copy.appendTo(page_ul);
     }
-
+    lib_group.animate({ opacity: 1 }, 200);
-    lib_group.animate({
-      opacity: 1,
-    }, 200);
   });
 }
 
@@ -1166,6 +1163,7 @@ function playerSetIdle() {
 function updatePlayerInfo(item) {
   if (!item) {
     playerSetIdle();
+    return;
   }
   playerArtwork.style.display = 'block';
   playerArtworkIdle.style.display = 'none';