From ea7efdd869e93eb1db5c03271710e4798b5f57c9 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sun, 9 Feb 2025 11:13:23 +0100
Subject: [PATCH] [web] Refactor modal dialog for playable items

---
 web-src/src/components/ModalDialogAlbum.vue   | 39 +---------
 .../components/ModalDialogAlbumSpotify.vue    | 42 +----------
 web-src/src/components/ModalDialogArtist.vue  | 42 +----------
 .../components/ModalDialogArtistSpotify.vue   | 42 +----------
 .../src/components/ModalDialogComposer.vue    | 52 +++----------
 .../src/components/ModalDialogDirectory.vue   | 50 ++-----------
 web-src/src/components/ModalDialogGenre.vue   | 44 ++---------
 .../src/components/ModalDialogPlayable.vue    | 75 +++++++++++++++++++
 .../components/ModalDialogPlaylistSpotify.vue | 42 +----------
 web-src/src/components/ModalDialogTrack.vue   | 41 +---------
 .../components/ModalDialogTrackSpotify.vue    | 42 +----------
 web-src/src/i18n/de.json                      | 39 ++--------
 web-src/src/i18n/en.json                      | 39 ++--------
 web-src/src/i18n/fr.json                      | 39 ++--------
 web-src/src/i18n/zh-CN.json                   | 39 ++--------
 web-src/src/i18n/zh-TW.json                   | 39 ++--------
 16 files changed, 157 insertions(+), 549 deletions(-)
 create mode 100644 web-src/src/components/ModalDialogPlayable.vue

diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 23b82495..3a0c2fe8 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -77,17 +77,17 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
-  components: { ModalDialog, CoverArtwork },
+  components: { ModalDialogPlayable, CoverArtwork },
   props: {
     item: { required: true, type: Object },
     media_kind: { default: '', type: String },
@@ -100,25 +100,6 @@ export default {
     }
   },
   computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.album.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.album.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.album.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    },
     media_kind_resolved() {
       return this.media_kind || this.item.media_kind
     }
@@ -161,18 +142,6 @@ export default {
           params: { id: this.item.artist_id }
         })
       }
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index ff913a4e..c87095b6 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -36,17 +36,16 @@
         <div class="title is-6" v-text="item.album_type" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogAlbumSpotify',
-  components: { ModalDialog, CoverArtwork },
+  components: { ModalDialogPlayable, CoverArtwork },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   data() {
@@ -54,27 +53,6 @@ export default {
       artwork_visible: false
     }
   },
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.spotify.album.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.spotify.album.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.spotify.album.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   methods: {
     artwork_error() {
       this.artwork_visible = false
@@ -98,18 +76,6 @@ export default {
         name: 'music-spotify-artist',
         params: { id: this.item.artists[0].id }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index bdc15148..7dbc2bba 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -30,39 +30,17 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogArtist',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.artist.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.artist.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.artist.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   methods: {
     open() {
       this.$emit('close')
@@ -70,18 +48,6 @@ export default {
         name: 'music-artist',
         params: { id: this.item.id }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index 045ae4b2..d982747a 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -22,39 +22,17 @@
         <div class="title is-6" v-text="item.genres.join(', ')" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogArtistSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.spotify.artist.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.spotify.artist.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.spotify.artist.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   methods: {
     open() {
       this.$emit('close')
@@ -62,18 +40,6 @@ export default {
         name: 'music-spotify-artist',
         params: { id: this.item.id }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 651e25ff..b2d176eb 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -1,5 +1,9 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable
+    :expression="expression"
+    :show="show"
+    @close="$emit('close')"
+  >
     <template #content>
       <div class="title is-4">
         <a @click="open_albums" v-text="item.name" />
@@ -33,37 +37,20 @@
         />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from './ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogComposer',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.composer.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.composer.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.composer.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
+    expression() {
+      return `composer is "${this.item.name}" and media_kind is music`
     }
   },
   methods: {
@@ -79,25 +66,6 @@ export default {
         name: 'music-composer-tracks',
         params: { name: this.item.name }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_expression(
-        `composer is "${this.item.name}" and media_kind is music`,
-        false
-      )
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_expression_add(
-        `composer is "${this.item.name}" and media_kind is music`
-      )
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_expression_add_next(
-        `composer is "${this.item.name}" and media_kind is music`
-      )
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index 061849d2..7a92b3a3 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -1,6 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
+  <modal-dialog-playable
+    :expression="expression"
     :show="show"
     :title="item"
     @close="$emit('close')"
@@ -8,54 +8,16 @@
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogDirectory',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: String }, show: Boolean },
   emits: ['close'],
   computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.directory.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.directory.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.directory.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
-  methods: {
-    play() {
-      this.$emit('close')
-      webapi.player_play_expression(
-        `path starts with "${this.item}" order by path asc`,
-        false
-      )
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_expression_add(
-        `path starts with "${this.item}" order by path asc`
-      )
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_expression_add_next(
-        `path starts with "${this.item}" order by path asc`
-      )
+    expression() {
+      return `path starts with "${this.item}" order by path asc`
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 178eed6c..9b0384ae 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -1,5 +1,9 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable
+    :expression="expression"
+    :show="show"
+    @close="$emit('close')"
+  >
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -29,16 +33,15 @@
         />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogGenre',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: {
     item: { required: true, type: Object },
     media_kind: { required: true, type: String },
@@ -46,25 +49,6 @@ export default {
   },
   emits: ['close'],
   computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.genre.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.genre.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.genre.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    },
     expression() {
       return `genre is "${this.item.name}" and media_kind is ${this.media_kind}`
     }
@@ -77,18 +61,6 @@ export default {
         params: { name: this.item.name },
         query: { media_kind: this.media_kind }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_expression(this.expression, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_expression_add(this.expression)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_expression_add_next(this.expression)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
new file mode 100644
index 00000000..7f92950f
--- /dev/null
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -0,0 +1,75 @@
+<template>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #content>
+      <slot name="content" />
+    </template>
+  </modal-dialog>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog.vue'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ModalDialogPlayable',
+  components: { ModalDialog },
+  props: {
+    expression: { default: '', type: String },
+    item: {
+      default() {
+        return {}
+      },
+      type: Object
+    },
+    show: Boolean
+  },
+  emits: ['close'],
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.playable.add'),
+          handler: this.queue_add,
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.playable.add-next'),
+          handler: this.queue_add_next,
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.playable.play'),
+          handler: this.play,
+          icon: 'play'
+        }
+      ]
+    }
+  },
+  methods: {
+    play() {
+      this.$emit('close')
+      if (this.expression) {
+        webapi.player_play_expression(this.expression, false)
+      } else {
+        webapi.player_play_uri(this.item.uri, false)
+      }
+    },
+    queue_add() {
+      this.$emit('close')
+      if (this.expression) {
+        webapi.queue_expression_add(this.expression)
+      } else {
+        webapi.queue_add(this.item.uri)
+      }
+    },
+    queue_add_next() {
+      this.$emit('close')
+      if (this.expression) {
+        webapi.queue_expression_add_next(this.expression)
+      } else {
+        webapi.queue_add_next(this.item.uri)
+      }
+    }
+  }
+}
+</script>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 161eb73b..84ff867a 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
@@ -26,39 +26,17 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogPlaylistSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.spotify.playlist.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.spotify.playlist.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.spotify.playlist.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   methods: {
     open() {
       this.$emit('close')
@@ -66,18 +44,6 @@ export default {
         name: 'playlist-spotify',
         params: { id: this.item.id }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 46fb331e..81b7c0bd 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <p class="title is-4" v-text="item.title" />
       <p class="subtitle" v-text="item.artist" />
@@ -150,18 +150,18 @@
         <div class="title is-6" v-text="item.comment" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
   setup() {
@@ -172,27 +172,6 @@ export default {
       spotify_track: {}
     }
   },
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.track.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.track.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.track.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   watch: {
     item() {
       if (
@@ -282,18 +261,6 @@ export default {
         params: { name: this.item.genre },
         query: { media_kind: this.item.media_kind }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index ac10e04d..0277dbee 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
     <template #content>
       <p class="title is-4" v-text="item.name" />
       <p class="subtitle" v-text="item.artists[0].name" />
@@ -59,39 +59,17 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-  </modal-dialog>
+  </modal-dialog-playable>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
-import webapi from '@/webapi'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 
 export default {
   name: 'ModalDialogTrackSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogPlayable },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-  computed: {
-    actions() {
-      return [
-        {
-          label: this.$t('dialog.spotify.track.add'),
-          handler: this.queue_add,
-          icon: 'playlist-plus'
-        },
-        {
-          label: this.$t('dialog.spotify.track.add-next'),
-          handler: this.queue_add_next,
-          icon: 'playlist-play'
-        },
-        {
-          label: this.$t('dialog.spotify.track.play'),
-          handler: this.play,
-          icon: 'play'
-        }
-      ]
-    }
-  },
   methods: {
     open_album() {
       this.$emit('close')
@@ -106,18 +84,6 @@ export default {
         name: 'music-spotify-artist',
         params: { id: this.item.artists[0].id }
       })
-    },
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.item.uri, false)
-    },
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.item.uri)
-    },
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.item.uri)
     }
   }
 }
diff --git a/web-src/src/i18n/de.json b/web-src/src/i18n/de.json
index ac7f63d3..538c7fd0 100644
--- a/web-src/src/i18n/de.json
+++ b/web-src/src/i18n/de.json
@@ -27,13 +27,10 @@
       }
     },
     "album": {
-      "add-next": "Als nächstes hinzufügen",
-      "add": "Hinzufügen",
       "added-on": "Hinzugefügt am",
       "artist": "Album Künstler",
       "duration": "Dauer",
       "mark-as-played": "Markiere als gespielt",
-      "play": "Spielen",
       "release-date": "Erscheinungsdatum",
       "remove-podcast": "Entferne podcast",
       "tracks": "Track Nummer",
@@ -41,35 +38,26 @@
       "year": "Jahr"
     },
     "artist": {
-      "add-next": "Als nächstes hinzufügen",
-      "add": "Hinzufügen",
       "added-on": "Hinzugefügt am",
       "albums": "Alben",
-      "play": "Spielen",
       "tracks": "Tracks",
       "type": "Art"
     },
     "composer": {
-      "add-next": "Als nächstes hinzufügen",
-      "add": "Hinzufügen",
       "albums": "Alben",
       "duration": "Dauer",
-      "play": "Spielen",
       "tracks": "Tracks"
     },
-    "directory": {
+    "genre": {
+      "albums": "Alben",
+      "duration": "Dauer",
+      "tracks": "Tracks"
+    },
+    "playable": {
       "add-next": "Als nächstes hinzufügen",
       "add": "Hinzufügen",
       "play": "Spielen"
     },
-    "genre": {
-      "add-next": "Als nächstes hinzufügen",
-      "add": "Hinzufügen",
-      "albums": "Alben",
-      "duration": "Dauer",
-      "play": "Spielen",
-      "tracks": "Tracks"
-    },
     "playlist": {
       "add-next": "Als nächstes hinzufügen",
       "add": "Hinzufügen",
@@ -112,43 +100,29 @@
     },
     "spotify": {
       "album": {
-        "add-next": "Als nächstes hinzufügen",
-        "add": "Hinzufügen",
         "album-artist": "Album-Künstler",
-        "play": "Spielen",
         "release-date": "Erscheinungsdatum",
         "type": "Art"
       },
       "artist": {
-        "add-next": "Als nächstes hinzufügen",
-        "add": "Hinzufügen",
         "genres": "Genres",
-        "play": "Spielen",
         "popularity": "Popularität / Followers"
       },
       "playlist": {
-        "add-next": "Als nächstes hinzufügen",
-        "add": "Hinzufügen",
         "owner": "Besitzer",
         "path": "Pfad",
-        "play": "Spielen",
         "tracks": "Tracks"
       },
       "track": {
-        "add-next": "Als nächstes hinzufügen",
-        "add": "Hinzufügen",
         "album-artist": "Album-Künstler",
         "album": "Album",
         "duration": "Dauer",
         "path": "Pfad",
-        "play": "Spielen",
         "position": "Disc / Track",
         "release-date": "Erscheinungsdatum"
       }
     },
     "track": {
-      "add-next": "Als nächstes hinzufügen",
-      "add": "Hinzufügen",
       "added-on": "Hinzugefügt am",
       "album-artist": "Album-Künstler",
       "album": "Album",
@@ -161,7 +135,6 @@
       "mark-as-new": "Markiere als neu",
       "mark-as-played": "Markiere als gespielt",
       "path": "Pfad",
-      "play": "Spielen",
       "position": "Disc / Track",
       "quality": "Qualität",
       "rating-value": "{rating} / 10",
diff --git a/web-src/src/i18n/en.json b/web-src/src/i18n/en.json
index 67500ee7..9b127b3d 100644
--- a/web-src/src/i18n/en.json
+++ b/web-src/src/i18n/en.json
@@ -27,13 +27,10 @@
       }
     },
     "album": {
-      "add-next": "Add Next",
-      "add": "Add",
       "added-on": "Added on",
       "artist": "Album artist",
       "duration": "Duration",
       "mark-as-played": "Mark as played",
-      "play": "Play",
       "release-date": "Release date",
       "remove-podcast": "Remove podcast",
       "tracks": "Tracks",
@@ -41,35 +38,26 @@
       "year": "Year"
     },
     "artist": {
-      "add-next": "Add Next",
-      "add": "Add",
       "added-on": "Added On",
       "albums": "Albums",
-      "play": "Play",
       "tracks": "Tracks",
       "type": "Type"
     },
     "composer": {
-      "add-next": "Add Next",
-      "add": "Add",
       "albums": "Albums",
       "duration": "Duration",
-      "play": "Play",
       "tracks": "Tracks"
     },
-    "directory": {
+    "genre": {
+      "albums": "Albums",
+      "duration": "Duration",
+      "tracks": "Tracks"
+    },
+    "playable": {
       "add-next": "Add Next",
       "add": "Add",
       "play": "Play"
     },
-    "genre": {
-      "add-next": "Add Next",
-      "add": "Add",
-      "albums": "Albums",
-      "duration": "Duration",
-      "play": "Play",
-      "tracks": "Tracks"
-    },
     "playlist": {
       "add-next": "Add Next",
       "add": "Add",
@@ -112,43 +100,29 @@
     },
     "spotify": {
       "album": {
-        "add-next": "Add Next",
-        "add": "Add",
         "album-artist": "Album Artist",
-        "play": "Play",
         "release-date": "Release Date",
         "type": "Type"
       },
       "artist": {
-        "add-next": "Add Next",
-        "add": "Add",
         "genres": "Genres",
-        "play": "Play",
         "popularity": "Popularity / Followers"
       },
       "playlist": {
-        "add-next": "Add Next",
-        "add": "Add",
         "owner": "Owner",
         "path": "Path",
-        "play": "Play",
         "tracks": "Tracks"
       },
       "track": {
-        "add-next": "Add Next",
-        "add": "Add",
         "album-artist": "Album Artist",
         "album": "Album",
         "duration": "Duration",
         "path": "Path",
-        "play": "Play",
         "position": "Disc / Track",
         "release-date": "Release Date"
       }
     },
     "track": {
-      "add-next": "Add Next",
-      "add": "Add",
       "added-on": "Added On",
       "album-artist": "Album Artist",
       "album": "Album",
@@ -161,7 +135,6 @@
       "mark-as-new": "Mark as new",
       "mark-as-played": "Mark as played",
       "path": "Path",
-      "play": "Play",
       "position": "Disc / Track",
       "quality": "Quality",
       "rating-value": "{rating} / 10",
diff --git a/web-src/src/i18n/fr.json b/web-src/src/i18n/fr.json
index 648e3e6d..22141d91 100644
--- a/web-src/src/i18n/fr.json
+++ b/web-src/src/i18n/fr.json
@@ -27,13 +27,10 @@
       }
     },
     "album": {
-      "add-next": "Ajouter ensuite",
-      "add": "Ajouter",
       "added-on": "Ajouté le",
       "artist": "Artiste de l’album",
       "duration": "Durée",
       "mark-as-played": "Marquer comme lu",
-      "play": "Lire",
       "release-date": "Date de sortie",
       "remove-podcast": "Supprimer le podcast",
       "tracks": "Pistes",
@@ -41,35 +38,26 @@
       "year": "Année"
     },
     "artist": {
-      "add-next": "Ajouter ensuite",
-      "add": "Ajouter",
       "added-on": "Ajouté le",
       "albums": "Albums",
-      "play": "Lire",
       "tracks": "Pistes",
       "type": "Type"
     },
     "composer": {
-      "add-next": "Ajouter ensuite",
-      "add": "Ajouter",
       "albums": "Albums",
       "duration": "Durée",
-      "play": "Lire",
       "tracks": "Pistes"
     },
-    "directory": {
+    "genre": {
+      "albums": "Albums",
+      "duration": "Durée",
+      "tracks": "Pistes"
+    },
+    "playable": {
       "add-next": "Ajouter ensuite",
       "add": "Ajouter",
       "play": "Lire"
     },
-    "genre": {
-      "add-next": "Ajouter ensuite",
-      "add": "Ajouter",
-      "albums": "Albums",
-      "duration": "Durée",
-      "play": "Lire",
-      "tracks": "Pistes"
-    },
     "playlist": {
       "add-next": "Ajouter ensuite",
       "add": "Ajouter",
@@ -112,43 +100,29 @@
     },
     "spotify": {
       "album": {
-        "add-next": "Ajouter ensuite",
-        "add": "Ajouter",
         "album-artist": "Artiste de l’album",
-        "play": "Lire",
         "release-date": "Date de sortie",
         "type": "Type"
       },
       "artist": {
-        "add-next": "Ajouter ensuite",
-        "add": "Ajouter",
         "genres": "Genres",
-        "play": "Lire",
         "popularity": "Popularité / Abonnements"
       },
       "playlist": {
-        "add-next": "Ajouter ensuite",
-        "add": "Ajouter",
         "owner": "Propriétaire",
         "path": "Emplacement",
-        "play": "Lire",
         "tracks": "Pistes"
       },
       "track": {
-        "add-next": "Ajouter ensuite",
-        "add": "Ajouter",
         "album-artist": "Artiste de l’album",
         "album": "Album",
         "duration": "Durée",
         "path": "Emplacement",
-        "play": "Lire",
         "position": "Disque / Piste",
         "release-date": "Date de sortie"
       }
     },
     "track": {
-      "add-next": "Ajouter ensuite",
-      "add": "Ajouter",
       "added-on": "Ajouté le",
       "album-artist": "Artiste de l’album",
       "album": "Album",
@@ -161,7 +135,6 @@
       "mark-as-new": "Marquer comme nouveau",
       "mark-as-played": "Marquer comme lu",
       "path": "Emplacement",
-      "play": "Lire",
       "position": "Disque / Piste",
       "quality": "Qualité",
       "rating-value": "{rating} / 10",
diff --git a/web-src/src/i18n/zh-CN.json b/web-src/src/i18n/zh-CN.json
index 5b34aed3..3087aa11 100644
--- a/web-src/src/i18n/zh-CN.json
+++ b/web-src/src/i18n/zh-CN.json
@@ -27,13 +27,10 @@
       }
     },
     "album": {
-      "add-next": "插播",
-      "add": "添加",
       "added-on": "添加时间",
       "artist": "专辑艺人",
       "duration": "时长",
       "mark-as-played": "标记为已播",
-      "play": "播放",
       "release-date": "发行日期",
       "remove-podcast": "移除播客",
       "tracks": "只曲目",
@@ -41,35 +38,26 @@
       "year": "年份"
     },
     "artist": {
-      "add-next": "插播",
-      "add": "添加",
       "added-on": "添加时间",
       "albums": "张专辑",
-      "play": "播放",
       "tracks": "只曲目",
       "type": "类型"
     },
     "composer": {
-      "add-next": "插播",
-      "add": "添加",
       "albums": "张专辑",
       "duration": "时长",
-      "play": "播放",
       "tracks": "只曲目"
     },
-    "directory": {
+    "genre": {
+      "albums": "张专辑",
+      "duration": "时长",
+      "tracks": "只曲目"
+    },
+    "playable": {
       "add-next": "插播",
       "add": "添加",
       "play": "播放"
     },
-    "genre": {
-      "add-next": "插播",
-      "add": "添加",
-      "albums": "张专辑",
-      "duration": "时长",
-      "play": "播放",
-      "tracks": "只曲目"
-    },
     "playlist": {
       "add-next": "插播",
       "add": "添加",
@@ -112,43 +100,29 @@
     },
     "spotify": {
       "album": {
-        "add-next": "插播",
-        "add": "添加",
         "album-artist": "专辑艺人",
-        "play": "播放",
         "release-date": "发行日期",
         "type": "类型"
       },
       "artist": {
-        "add-next": "插播",
-        "add": "添加",
         "genres": "流派",
-        "play": "播放",
         "popularity": "流行度 / 粉丝数"
       },
       "playlist": {
-        "add-next": "插播",
-        "add": "添加",
         "owner": "所有者",
         "path": "路径",
-        "play": "播放",
         "tracks": "曲目"
       },
       "track": {
-        "add-next": "插播",
-        "add": "添加",
         "album-artist": "专辑艺人",
         "album": "专辑",
         "duration": "时长",
         "path": "路径",
-        "play": "播放",
         "position": "盘符 / 曲目",
         "release-date": "发行日期"
       }
     },
     "track": {
-      "add-next": "插播",
-      "add": "添加",
       "added-on": "添加时间",
       "album-artist": "专辑艺人",
       "album": "专辑",
@@ -161,7 +135,6 @@
       "mark-as-new": "标记为最新",
       "mark-as-played": "标记为已播放",
       "path": "路径",
-      "play": "播放",
       "position": "盘符 / 曲目",
       "quality": "质量",
       "rating-value": "{rating} / 10",
diff --git a/web-src/src/i18n/zh-TW.json b/web-src/src/i18n/zh-TW.json
index 4d42d170..f003c264 100644
--- a/web-src/src/i18n/zh-TW.json
+++ b/web-src/src/i18n/zh-TW.json
@@ -27,13 +27,10 @@
       }
     },
     "album": {
-      "add-next": "插播",
-      "add": "新增",
       "added-on": "新增時間",
       "artist": "專輯藝人",
       "duration": "時長",
       "mark-as-played": "標記為已播",
-      "play": "播放",
       "release-date": "發行日期",
       "remove-podcast": "移除Podcast",
       "tracks": "首曲目",
@@ -41,35 +38,26 @@
       "year": "年份"
     },
     "artist": {
-      "add-next": "插播",
-      "add": "新增",
       "added-on": "新增時間",
       "albums": "張專輯",
-      "play": "播放",
       "tracks": "首曲目",
       "type": "類型"
     },
     "composer": {
-      "add-next": "插播",
-      "add": "新增",
       "albums": "張專輯",
       "duration": "時長",
-      "play": "播放",
       "tracks": "首曲目"
     },
-    "directory": {
+    "genre": {
+      "albums": "張專輯",
+      "duration": "時長",
+      "tracks": "首曲目"
+    },
+    "playable": {
       "add-next": "插播",
       "add": "新增",
       "play": "播放"
     },
-    "genre": {
-      "add-next": "插播",
-      "add": "新增",
-      "albums": "張專輯",
-      "duration": "時長",
-      "play": "播放",
-      "tracks": "首曲目"
-    },
     "playlist": {
       "add-next": "插播",
       "add": "新增",
@@ -112,43 +100,29 @@
     },
     "spotify": {
       "album": {
-        "add-next": "插播",
-        "add": "新增",
         "album-artist": "專輯藝人",
-        "play": "播放",
         "release-date": "發行日期",
         "type": "類型"
       },
       "artist": {
-        "add-next": "插播",
-        "add": "新增",
         "genres": "音樂類型",
-        "play": "播放",
         "popularity": "流行度 / 粉絲數"
       },
       "playlist": {
-        "add-next": "插播",
-        "add": "新增",
         "owner": "所有者",
         "path": "路徑",
-        "play": "播放",
         "tracks": "曲目"
       },
       "track": {
-        "add-next": "插播",
-        "add": "新增",
         "album-artist": "專輯藝人",
         "album": "專輯",
         "duration": "時長",
         "path": "路徑",
-        "play": "播放",
         "position": "盤符 / 曲目",
         "release-date": "發行日期"
       }
     },
     "track": {
-      "add-next": "插播",
-      "add": "新增",
       "added-on": "新增時間",
       "album-artist": "專輯藝人",
       "album": "專輯",
@@ -161,7 +135,6 @@
       "mark-as-new": "標記為最新",
       "mark-as-played": "標記為已播放",
       "path": "路徑",
-      "play": "播放",
       "position": "盤符 / 曲目",
       "quality": "品質",
       "rating-value": "{rating} / 10",