[web] Add helper methods in stores

web-src/src/components/ControlMainVolume.vue

@@ -8,7 +8,7 @@
     <div class="media-content">
       <div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />
       <control-slider
-        v-model:value="player.volume"
+        v-model:value="playerStore.volume"
         :max="100"
         @change="changeVolume"
       />
@@ -26,7 +26,7 @@ export default {
   components: { ControlSlider },
   setup() {
     return {
-      player: usePlayerStore()
+      playerStore: usePlayerStore()
     }
   },
   data() {
@@ -36,22 +36,25 @@ export default {
   },
   computed: {
     icon() {
-      return this.player.volume > 0 ? 'volume-high' : 'volume-off'
+      if (this.playerStore.isMuted) {
+        return 'volume-off'
+      }
+      return 'volume-high'
     }
   },
   watch: {
-    'player.volume'() {
+    'playerStore.volume'() {
-      if (this.player.volume > 0) {
+      if (!this.playerStore.isMuted) {
-        this.volume = this.player.volume
+        this.volume = this.playerStore.volume
       }
     }
   },
   methods: {
     changeVolume() {
-      player.setVolume(this.player.volume)
+      player.setVolume(this.playerStore.volume)
     },
     toggle() {
-      this.player.volume = this.player.volume > 0 ? 0 : this.volume
+      this.playerStore.volume = this.playerStore.isMuted ? this.volume : 0
       this.changeVolume()
     }
   }

web-src/src/components/ControlPlayerBack.vue

@@ -26,11 +26,7 @@ export default {
   },
   computed: {
     disabled() {
-      return (
+      return this.queueStore.isEmpty || this.playerStore.isStopped
-        this.queueStore?.count <= 0 ||
-        this.playerStore.isStopped ||
-        this.queueStore.current.data_kind === 'pipe'
-      )
     },
     visible() {
       return ['podcast', 'audiobook'].includes(

web-src/src/components/ControlPlayerForward.vue

@@ -26,11 +26,7 @@ export default {
   },
   computed: {
     disabled() {
-      return (
+      return this.queueStore.isEmpty || this.playerStore.isStopped
-        this.queueStore?.count <= 0 ||
-        this.playerStore.isStopped ||
-        this.queueStore.current.data_kind === 'pipe'
-      )
     },
     visible() {
       return ['podcast', 'audiobook'].includes(

web-src/src/components/ControlPlayerNext.vue

@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     disabled() {
-      return this.queueStore.count <= 0
+      return this.queueStore.isEmpty
     }
   },
   methods: {

web-src/src/components/ControlPlayerPlay.vue

@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     disabled() {
-      return this.queueStore?.count <= 0
+      return this.queueStore.isEmpty
     },
     icon() {
       if (!this.playerStore.isPlaying) {

web-src/src/components/ControlPlayerPrevious.vue

@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     disabled() {
-      return this.queueStore.count <= 0
+      return this.queueStore.isEmpty
     }
   },
   methods: {