From 7a236a21b8f5fef79ff43e4bd7627bfe9a4f564a Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sat, 26 Oct 2019 09:58:35 +0200
Subject: [PATCH] [web-src] Disable play/pause/etc. buttons if queue is empty

---
 web-src/src/components/NavbarBottom.vue        |  2 +-
 web-src/src/components/PlayerButtonNext.vue    | 12 +++++++++++-
 .../src/components/PlayerButtonPlayPause.vue   | 18 ++++++++++++++++--
 .../src/components/PlayerButtonPrevious.vue    | 12 +++++++++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 6d9794ee..ae5ccd95 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/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>
diff --git a/web-src/src/components/PlayerButtonNext.vue b/web-src/src/components/PlayerButtonNext.vue
index 74cdc2e7..7d0139fa 100644
--- a/web-src/src/components/PlayerButtonNext.vue
+++ b/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()
     }
   }
diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/PlayerButtonPlayPause.vue
index 10412f26..6ddacb67 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/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) {
diff --git a/web-src/src/components/PlayerButtonPrevious.vue b/web-src/src/components/PlayerButtonPrevious.vue
index 1a4c901e..1afab093 100644
--- a/web-src/src/components/PlayerButtonPrevious.vue
+++ b/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()
     }
   }