[web] Refactor modal dialog for playable items

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

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

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

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

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`
-      )
     }
   }
 }

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`
     }
   }
 }

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

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>

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

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

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