Debounce on search

phpbg · Aug 14, 2021 · 540d113 · 540d113
1 parent c18ea40
commit 540d113
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "dayjs": "^1.10.6",
     "electron-squirrel-startup": "^1.0.0",
     "fast-xml-parser": "^3.19.0",
+    "lodash-es": "^4.17.21",
     "node-ssdp": "^4.0.1",
     "soap": "^0.40.0",
     "vue": "^3.2.2"

diff --git a/src/index.html b/src/index.html
@@ -56,7 +56,7 @@ <h2 v-if="currentMediaServer">
         <span v-if="currentContainer">{{ currentContainer['dc:title'] }}</span>
         <span v-if="!currentContainer">{{ currentMediaServer.name }}</span>
     </h2>
-    <input id="search" v-if="currentMediaServer && searchCapabilities" v-model="search" placeholder="search">
+    <input id="search" v-if="currentMediaServer && searchCapabilities" v-model="searchTerm" placeholder="search">
     <ol id="libraryObjects" v-if="libraryObjects">
         <li v-for="item in libraryObjects" @click="selectItem(item)"
             :class="{ playing: item['@_id'] === currentPlayingItem?.['@_id'] }">

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@
 
 // Alternatively, omit the .prod from the path for Vue debugging purposes.
 import {createApp} from '../node_modules/vue/dist/vue.esm-browser.prod.js';
+import debounce from '../node_modules/lodash-es/debounce.js'
 
 let api = window.muspnpapi;
 dayjs.extend(dayjs_plugin_duration);
@@ -69,15 +70,15 @@ window.app = createApp({
             transportInfo: null,
             currentVolume: null,
             searchCapabilities: null,
-            search: null,
+            searchTerm: null,
             searchCache: createObservableCache()
         }
     },
     watch: {
         currentMediaServer: function (device) {
             this.showSpinner = true;
             this.libraryObjectsCache = createObservableCache();
-            this.search = null;
+            this.searchTerm = null;
             this.searchCache = createObservableCache()
             this.selectedItem = [];
             this.searchCapabilities = null;
@@ -115,18 +116,8 @@ window.app = createApp({
                 }
             }
         },
-        search: function (search) {
-            if (! search) {
-                return;
-            }
-            const searchStr = this.searchCapabilities.map(sc => `${sc} contains "${search}"`).join(' or ')
-            return api
-                .search({id: 0, start: 0, count: 0, search: searchStr})
-                .then(result => {
-                    if (result.UpdateID == null || this.searchCache?.[search]?.UpdateID !== result.UpdateID) {
-                        this.searchCache[search] = result;
-                    }
-                })
+        searchTerm: function (search) {
+            this.search(search);
         },
     },
     created: function () {
@@ -135,7 +126,9 @@ window.app = createApp({
             get(target, propKey) {
                 // Proxy API for automatic error cleanup
                 // NB: api is a frozen object so we're a bit restricted here...
-                app.error = null;
+                if (! ['getPositionInfo', 'getTransportInfo'].includes(propKey)) {
+                    app.error = null;
+                }
                 return target[propKey];
             }
         };
@@ -152,6 +145,8 @@ window.app = createApp({
         api
             .ssdpSearch()
             .catch(err => this.error = err);
+
+        this.search = debounce(this._search, 500);
     },
     computed: {
         currentContainer: function () {
@@ -206,8 +201,8 @@ window.app = createApp({
             return this._currentPosition_currentPosition.format('HH:mm:ss')
         },
         libraryObjects: function () {
-            if (this.search) {
-                return this.searchCache[this.search]?.Result;
+            if (this.searchTerm) {
+                return this.searchCache[this.searchTerm]?.Result;
             }
             if (this.currentContainer == null) {
                 return this.libraryObjectsCache?.[0]?.Result;
@@ -235,7 +230,7 @@ window.app = createApp({
         },
         selectItem: function (item) {
             if (item['upnp:class'].startsWith('object.container')) {
-                this.search = null;
+                this.searchTerm = null;
                 this.selectedItem.push(item);
                 this.browse({id: item['@_id'], start: 0, count: 0});
                 return;
@@ -307,6 +302,21 @@ window.app = createApp({
                 .then(() => this.startRefresh(5000))
                 .catch(err => this.error = err);
         },
+        _search: function (search) {
+            if (! search) {
+                return;
+            }
+            this.showSpinner = true;
+            const searchStr = this.searchCapabilities.map(sc => `${sc} contains "${search}"`).join(' or ')
+            return api
+                .search({id: 0, start: 0, count: 0, search: searchStr})
+                .then(result => {
+                    if (result.UpdateID == null || this.searchCache?.[search]?.UpdateID !== result.UpdateID) {
+                        this.searchCache[search] = result;
+                    }
+                    this.showSpinner = false;
+                })
+        },
         seek: function (e) {
             if (this._currentPosition_duration == null || this._currentPosition_currentPosition == null) {
                 return;