Merge pull request owntone#832 from chme/webupdate

Update player web interface to v0.5.6

web-src/.gitignore

@@ -62,3 +62,6 @@ typings/
 
 # dist directory
 dist/
+
+# Visual Studio Code files
+.vscode/

web-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forked-daapd-web",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "forked-daapd web interface",
   "author": "chme <[email protected]>",
   "license": "GPL-2.0",
@@ -20,6 +20,7 @@
     "npm": "^6.11.2",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.2.0",
+    "v-click-outside": "^2.1.4",
     "vue": "^2.6.10",
     "vue-infinite-loading": "^2.4.4",
     "vue-progressbar": "^0.7.5",

web-src/src/components/NavbarBottom.vue

@@ -12,7 +12,7 @@
           </p>
         </div>
       </router-link>
-      <player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px"></player-button-play-pause>
+      <player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px" show_disabled_message></player-button-play-pause>
     </div>
   </nav>
 </template>

web-src/src/components/NavbarItemLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a class="navbar-item" :class="{ 'is-active': is_active }" @click="open_link()" :href="full_path()">
+  <a class="navbar-item" :class="{ 'is-active': is_active }" @click.prevent="open_link()" :href="full_path()">
     <slot></slot>
   </a>
 </template>

web-src/src/components/NavbarTop.vue

@@ -34,7 +34,10 @@
       <div class="navbar-end">
 
         <!-- Outputs dropdown -->
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div class="navbar-item has-dropdown"
+            :class="{ 'is-active': show_outputs_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
+            @click="show_outputs_menu = !show_outputs_menu"
+            v-click-outside="on_click_outside_outputs">
           <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Volume</span></a>
 
           <div class="navbar-dropdown is-right">
@@ -120,7 +123,10 @@
         </div>
 
         <!-- Settings drop down -->
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div class="navbar-item has-dropdown"
+            :class="{ 'is-active': show_settings_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
+            @click="show_settings_menu = !show_settings_menu"
+            v-click-outside="on_click_outside_settings">
           <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop has-text-weight-bold">forked-daapd</span></a>
 
           <div class="navbar-dropdown is-right">
@@ -159,7 +165,10 @@ export default {
 
       playing: false,
       loading: false,
-      stream_volume: 10
+      stream_volume: 10,
+
+      show_outputs_menu: false,
+      show_settings_menu: false
     }
   },
 
@@ -198,6 +207,14 @@ export default {
       this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu)
     },
 
+    on_click_outside_outputs () {
+      this.show_outputs_menu = false
+    },
+
+    on_click_outside_settings () {
+      this.show_settings_menu = false
+    },
+
     set_volume: function (newVolume) {
       webapi.player_volume(newVolume)
     },

web-src/src/components/PlayerButtonNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="play_next">
+  <a v-on:click="play_next" :disabled="disabled">
     <span class="icon"><i class="mdi mdi-skip-forward"></i></span>
   </a>
 </template>
@@ -10,8 +10,18 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonNext',
 
+  computed: {
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+    }
+  },
+
   methods: {
     play_next: function () {
+      if (this.disabled) {
+        return
+      }
+
       webapi.player_next()
     }
   }

web-src/src/components/PlayerButtonPlayPause.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="toggle_play_pause">
+  <a @click="toggle_play_pause" :disabled="disabled">
     <span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing && is_pause_allowed, 'mdi-stop': is_playing && !is_pause_allowed }]"></i></span>
   </a>
 </template>
@@ -10,7 +10,10 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonPlayPause',
 
-  props: ['icon_style'],
+  props: {
+    'icon_style': String,
+    'show_disabled_message': Boolean
+  },
 
   computed: {
     is_playing () {
@@ -20,11 +23,22 @@ export default {
     is_pause_allowed () {
       return (this.$store.getters.now_playing &&
         this.$store.getters.now_playing.data_kind !== 'pipe')
+    },
+
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
     }
   },
 
   methods: {
     toggle_play_pause: function () {
+      if (this.disabled) {
+        if (this.show_disabled_message) {
+          this.$store.dispatch('add_notification', { text: 'Queue is empty', type: 'info', topic: 'connection', timeout: 2000 })
+        }
+        return
+      }
+
       if (this.is_playing && this.is_pause_allowed) {
         webapi.player_pause()
       } else if (this.is_playing && !this.is_pause_allowed) {

web-src/src/components/PlayerButtonPrevious.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="play_previous">
+  <a v-on:click="play_previous" :disabled="disabled">
     <span class="icon"><i class="mdi mdi-skip-backward"></i></span>
   </a>
 </template>
@@ -10,8 +10,18 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonPrevious',
 
+  computed: {
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+    }
+  },
+
   methods: {
     play_previous: function () {
+      if (this.disabled) {
+        return
+      }
+
       webapi.player_previous()
     }
   }

web-src/src/main.js

@@ -6,13 +6,16 @@ import { router } from './router'
 import store from './store'
 import './filter'
 import './progress'
+import vClickOutside from 'v-click-outside'
 import 'bulma/css/bulma.css'
 import 'mdi/css/materialdesignicons.css'
 import 'vue-range-slider/dist/vue-range-slider.css'
 import './mystyles.css'
 
 Vue.config.productionTip = false
 
+Vue.use(vClickOutside)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

web-src/src/pages/PageSearch.vue

@@ -8,7 +8,7 @@
             <form v-on:submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field" autocomplete="off">
                   <span class="icon is-left">
                     <i class="mdi mdi-magnify"></i>
                   </span>

web-src/src/pages/SpotifyPageSearch.vue

@@ -8,7 +8,7 @@
             <form v-on:submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field" autocomplete="off">
                   <span class="icon is-left">
                     <i class="mdi mdi-magnify"></i>
                   </span>