[web-src] Disable play/pause/etc. buttons if queue is empty

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/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()
     }
   }