Merge pull request #1128 from chme/web_next

Player web interface v0.8.2

web-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forked-daapd-web",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": true,
   "description": "forked-daapd web interface",
   "author": "chme <christian.meffert@googlemail.com>",
@@ -11,16 +11,16 @@
     "dev": "vue-cli-service serve"
   },
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.0",
     "bulma": "^0.9.1",
     "bulma-switch": "^2.0.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.7.0",
     "mdi": "^2.2.43",
     "moment": "^2.29.1",
     "moment-duration-format": "^2.3.2",
-    "npm": "^6.14.8",
+    "npm": "^6.14.9",
     "reconnectingwebsocket": "^1.0.0",
-    "spotify-web-api-js": "^1.5.0",
+    "spotify-web-api-js": "^1.5.1",
     "string-to-color": "^2.2.2",
     "v-click-outside": "^3.1.2",
     "vue": "^2.6.12",
@@ -28,26 +28,26 @@
     "vue-observe-visibility": "^0.4.6",
     "vue-progressbar": "^0.7.5",
     "vue-range-slider": "^0.6.0",
-    "vue-router": "^3.4.7",
-    "vue-scrollto": "^2.19.1",
+    "vue-router": "^3.4.9",
+    "vue-scrollto": "^2.20.0",
     "vue-tiny-lazyload-img": "^0.1.0",
-    "vuedraggable": "^2.24.2",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.7",
-    "@vue/cli-plugin-eslint": "^4.5.7",
-    "@vue/cli-service": "^4.5.7",
+    "@vue/cli-plugin-babel": "^4.5.9",
+    "@vue/cli-plugin-eslint": "^4.5.9",
+    "@vue/cli-service": "^4.5.9",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.11.0",
+    "eslint": "^7.14.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^7.0.1",
-    "sass": "^1.27.0",
-    "sass-loader": "^10.0.3",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^7.1.0",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
     "vue-template-compiler": "^2.6.12"
   },
   "license": "GPL-2.0"

web-src/src/components/CoverArtwork.vue

@@ -3,6 +3,7 @@
     <img v-lazyload
       :data-src="artwork_url_with_size"
       :data-err="dataURI"
+      :key="artwork_url_with_size"
       @click="$emit('click')">
   </figure>
 </template>

web-src/src/components/TabsSearch.vue

@@ -5,18 +5,18 @@
         <div class="column is-four-fifths">
           <div class="tabs is-centered is-small is-toggle is-toggle-rounded">
             <ul>
-              <router-link tag="li" :to="{ path: '/search/library', query: $route.query }" active-class="is-active">
-                <a>
+              <li :class="{ 'is-active': $route.path === '/search/library' }">
+                <a @click="search_library">
                   <span class="icon is-small"><i class="mdi mdi-library-books"></i></span>
                   <span class="">Library</span>
                 </a>
-              </router-link>
-              <router-link tag="li" :to="{ path: '/search/spotify', query: $route.query }" active-class="is-active">
-                <a>
+              </li>
+              <li :class="{ 'is-active': $route.path === '/search/spotify' }">
+                <a @click="search_spotify">
                   <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
                   <span class="">Spotify</span>
                 </a>
-              </router-link>
+              </li>
             </ul>
           </div>
         </div>
@@ -29,10 +29,46 @@
 export default {
   name: 'TabsSearch',
 
+  props: ['query'],
+
   computed: {
     spotify_enabled () {
       return this.$store.state.spotify.webapi_token_valid
     }
+  },
+
+  methods: {
+    search_library: function () {
+      if (!this.query) {
+        return
+      }
+
+      this.$router.push({
+        path: '/search/library',
+        query: {
+          type: 'track,artist,album,playlist,audiobook,podcast',
+          query: this.query,
+          limit: 3,
+          offset: 0
+        }
+      })
+    },
+
+    search_spotify: function () {
+      if (!this.query) {
+        return
+      }
+
+      this.$router.push({
+        path: '/search/spotify',
+        query: {
+          type: 'track,artist,album,playlist,audiobook,podcast',
+          query: this.query,
+          limit: 3,
+          offset: 0
+        }
+      })
+    }
   }
 }
 </script>

web-src/src/pages/PageSearch.vue

@@ -26,7 +26,7 @@
       </div>
     </section>
 
-    <tabs-search></tabs-search>
+    <tabs-search :query="search_query"></tabs-search>
 
     <!-- Tracks -->
     <content-with-heading v-if="show_tracks && tracks.total">

web-src/src/pages/SpotifyPageSearch.vue

@@ -23,7 +23,7 @@
       </div>
     </section>
 
-    <tabs-search></tabs-search>
+    <tabs-search :query="search_query"></tabs-search>
 
     <!-- Tracks -->
     <content-with-heading v-if="show_tracks && tracks.total">
@@ -271,9 +271,7 @@ export default {
 
       this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query)
 
-      if (this.query.type.includes(',')) {
-        this.search_all()
-      }
+      this.search_all()
     },
 
     spotify_search: function () {