[web] Simplify property translations

web-src/src/components/ModalDialogAlbum.vue

@@ -25,15 +25,15 @@ export default {
       if (this.media_kind_resolved === 'podcast') {
         if (this.item.data_kind === 'url') {
           return [
-            { label: 'dialog.album.mark-as-played', action: this.mark_played },
+            { label: 'dialog.album.mark-as-played', handler: this.mark_played },
             {
               label: 'dialog.album.remove-podcast',
-              action: this.remove_podcast
+              handler: this.remove_podcast
             }
           ]
         }
         return [
-          { label: 'dialog.album.mark-as-played', action: this.mark_played }
+          { label: 'dialog.album.mark-as-played', handler: this.mark_played }
         ]
       }
       return []
@@ -44,32 +44,32 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         image: this.item.artwork_url,
         artist: this.item.artist,
         album: this.item.name,
         properties: [
           {
-            label: 'dialog.album.artist',
+            label: 'property.artist',
             value: this.item.artist,
-            action: this.open_artist
+            handler: this.open_artist
           },
           {
-            label: 'dialog.album.release-date',
+            label: 'property.release-date',
             value: this.$filters.date(this.item.date_released)
           },
-          { label: 'dialog.album.year', value: this.item.year },
-          { label: 'dialog.album.tracks', value: this.item.track_count },
+          { label: 'property.year', value: this.item.year },
+          { label: 'property.tracks', value: this.item.track_count },
           {
-            label: 'dialog.album.duration',
+            label: 'property.duration',
             value: this.$filters.durationInHours(this.item.length_ms)
           },
           {
-            label: 'dialog.album.type',
+            label: 'property.type',
             value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
           },
           {
-            label: 'dialog.album.added-on',
+            label: 'property.added-on',
             value: this.$filters.datetime(this.item.time_added)
           }
         ]

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -21,19 +21,19 @@ export default {
         image: this.item?.images?.[0]?.url || '',
         artist: this.item.artist || '',
         album: this.item.name || '',
-        action: this.open,
+        handler: this.open,
         properties: [
           {
-            label: 'dialog.spotify.album.album-artist',
+            label: 'property.album-artist',
             value: this.item?.artists?.[0]?.name,
-            action: this.open_artist
+            handler: this.open_artist
           },
           {
-            label: 'dialog.spotify.album.release-date',
+            label: 'property.release-date',
             value: this.$filters.date(this.item.release_date)
           },
           {
-            label: 'dialog.spotify.album.type',
+            label: 'property.type',
             value: this.item.album_type
           }
         ]

web-src/src/components/ModalDialogArtist.vue

@@ -18,16 +18,16 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         properties: [
-          { label: 'dialog.artist.albums', value: this.item.album_count },
-          { label: 'dialog.artist.tracks', value: this.item.track_count },
+          { label: 'property.albums', value: this.item.album_count },
+          { label: 'property.tracks', value: this.item.track_count },
           {
-            label: 'dialog.artist.type',
+            label: 'property.type',
             value: this.$t(`data.kind.${this.item.data_kind}`)
           },
           {
-            label: 'dialog.artist.added-on',
+            label: 'property.added-on',
             value: this.$filters.datetime(this.item.time_added)
           }
         ]

web-src/src/components/ModalDialogArtistSpotify.vue

@@ -18,16 +18,16 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         properties: [
           {
-            label: 'dialog.spotify.artist.popularity',
+            label: 'property.popularity',
             value: [this.item.popularity, this.item.followers?.total].join(
               ' / '
             )
           },
           {
-            label: 'dialog.spotify.artist.genres',
+            label: 'property.genres',
             value: this.item.genres?.join(', ')
           }
         ]

web-src/src/components/ModalDialogComposer.vue

@@ -17,22 +17,22 @@ export default {
   computed: {
     playable() {
       return {
-        action: this.open_albums,
         name: this.item.name,
+        handler: this.open_albums,
         expression: `composer is "${this.item.name}" and media_kind is music`,
         properties: [
           {
-            label: 'dialog.composer.albums',
+            label: 'property.albums',
             value: this.item.album_count,
-            action: this.open_albums
+            handler: this.open_albums
           },
           {
-            label: 'dialog.composer.tracks',
+            label: 'property.tracks',
             value: this.item.track_count,
-            action: this.open_tracks
+            handler: this.open_tracks
           },
           {
-            label: 'dialog.composer.duration',
+            label: 'property.duration',
             value: this.$filters.durationInHours(this.item.length_ms)
           }
         ]

web-src/src/components/ModalDialogGenre.vue

@@ -22,19 +22,19 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         expression: `genre is "${this.item.name}" and media_kind is ${this.media_kind}`,
         properties: [
           {
-            label: 'dialog.genre.albums',
+            label: 'property.albums',
             value: this.item.album_count
           },
           {
-            label: 'dialog.genre.tracks',
+            label: 'property.tracks',
             value: this.item.track_count
           },
           {
-            label: 'dialog.genre.duration',
+            label: 'property.duration',
             value: this.$filters.durationInHours(this.item.length_ms)
           }
         ]

web-src/src/components/ModalDialogPlayable.vue

@@ -2,7 +2,7 @@
   <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
     <template #content>
       <div class="title is-4">
-        <a v-if="item.action" @click="item.action" v-text="item.name"></a>
+        <a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
         <span v-else v-text="item.name" />
       </div>
       <cover-artwork
@@ -18,7 +18,7 @@
           :key="button.label"
           v-t="button.label"
           class="button is-small"
-          @click="button.action"
+          @click="button.handler"
         />
       </div>
       <div
@@ -29,8 +29,8 @@
         <div v-t="property.label" class="is-size-7 is-uppercase" />
         <div class="title is-6">
           <a
-            v-if="property.action"
-            @click="property.action"
+            v-if="property.handler"
+            @click="property.handler"
             v-text="property.value"
           />
           <span v-else class="title is-6" v-text="property.value" />

web-src/src/components/ModalDialogPlaylist.vue

@@ -22,15 +22,15 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         uris: this.uris,
         properties: [
-          { label: 'dialog.playlist.tracks', value: this.item.item_count },
+          { label: 'property.tracks', value: this.item.item_count },
           {
-            label: 'dialog.playlist.type',
+            label: 'property.type',
             value: this.$t(`playlist.type.${this.item.type}`)
           },
-          { label: 'dialog.playlist.path', value: this.item.path }
+          { label: 'property.path', value: this.item.path }
         ]
       }
     }

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -18,17 +18,17 @@ export default {
     playable() {
       return {
         name: this.item.name,
-        action: this.open,
+        handler: this.open,
         properties: [
           {
-            label: 'dialog.spotify.playlist.owner',
+            label: 'property.owner',
             value: this.item.owner?.display_name
           },
           {
-            label: 'dialog.spotify.playlist.tracks',
+            label: 'property.tracks',
             value: this.item.tracks?.total
           },
-          { label: 'dialog.spotify.playlist.path', value: this.item.uri }
+          { label: 'property.path', value: this.item.uri }
         ]
       }
     }

web-src/src/components/ModalDialogQueueItem.vue

@@ -4,10 +4,7 @@
       <div class="title is-4" v-text="item.title" />
       <div class="subtitle" v-text="item.artist" />
       <div v-if="item.album" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.album')"
-        />
+        <div v-t="'property.album'" class="is-size-7 is-uppercase" />
         <div class="title is-6">
           <a @click="open_album" v-text="item.album" />
         </div>
@@ -15,7 +12,7 @@
       <div v-if="item.album_artist" class="mb-3">
         <div
           class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.album-artist')"
+          v-text="$t('property.album-artist')"
         />
         <div class="title is-6">
           <a @click="open_album_artist" v-text="item.album_artist" />
@@ -45,73 +42,45 @@
         </div>
       </div>
       <div v-if="item.disc_number" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.position')"
-        />
+        <div class="is-size-7 is-uppercase" v-text="$t('property.position')" />
         <div
           class="title is-6"
           v-text="[item.disc_number, item.track_number].join(' / ')"
         />
       </div>
       <div v-if="item.length_ms" class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.duration')"
-        />
+        <div class="is-size-7 is-uppercase" v-text="$t('property.duration')" />
         <div
           class="title is-6"
           v-text="$filters.durationInHours(item.length_ms)"
         />
       </div>
       <div class="mb-3">
-        <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.path')"
-        />
+        <div class="is-size-7 is-uppercase" v-text="$t('property.path')" />
         <div class="title is-6" v-text="item.path" />
       </div>
       <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('property.type')" />
         <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.type')"
+          class="title is-6"
+          v-text="
+            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+          "
         />
-        <div class="title is-6">
-          <span
-            v-text="
-              `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-            "
-          />
-        </div>
       </div>
       <div v-if="item.samplerate" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('property.quality')" />
         <div
-          class="is-size-7 is-uppercase"
-          v-text="$t('dialog.queue-item.quality')"
+          class="title is-6"
+          v-text="
+            $t('dialog.track.quality-value', {
+              format: item.type,
+              bitrate: item.bitrate,
+              channels: $filters.channels(item.channels),
+              samplerate: item.samplerate
+            })
+          "
         />
-        <div class="title is-6">
-          <span v-text="item.type" />
-          <span
-            v-if="item.samplerate"
-            v-text="
-              $t('dialog.queue-item.samplerate', {
-                rate: item.samplerate
-              })
-            "
-          />
-          <span
-            v-if="item.channels"
-            v-text="
-              $t('dialog.queue-item.channels', {
-                channels: $filters.channels(item.channels)
-              })
-            "
-          />
-          <span
-            v-if="item.bitrate"
-            v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
-          />
-        </div>
       </div>
     </template>
   </modal-dialog>

web-src/src/components/ModalDialogTrack.vue

@@ -30,11 +30,11 @@ export default {
     buttons() {
       if (this.item.media_kind === 'podcast') {
         if (this.item.play_count > 0) {
-          return [{ label: 'dialog.track.mark-as-new', action: this.mark_new }]
+          return [{ label: 'dialog.track.mark-as-new', handler: this.mark_new }]
         }
         if (this.item.play_count === 0) {
           return [
-            { label: 'dialog.track.mark-as-played', action: this.mark_played }
+            { label: 'dialog.track.mark-as-played', handler: this.mark_played }
           ]
         }
       }
@@ -45,36 +45,36 @@ export default {
         name: this.item.title,
         properties: [
           {
-            label: 'dialog.track.album',
+            label: 'property.album',
             value: this.item.album,
-            action: this.open_album
+            handler: this.open_album
           },
           {
-            label: 'dialog.track.album-artist',
+            label: 'property.album-artist',
             value: this.item.album_artist,
-            action: this.open_artist
+            handler: this.open_artist
           },
-          { label: 'dialog.track.composer', value: this.item.composer },
+          { label: 'property.composer', value: this.item.composer },
           {
-            label: 'dialog.track.release-date',
+            label: 'property.release-date',
             value: this.$filters.date(this.item.date_released)
           },
-          { label: 'dialog.track.year', value: this.item.year },
-          { label: 'dialog.track.genre', value: this.item.genre },
+          { label: 'property.year', value: this.item.year },
+          { label: 'property.genre', value: this.item.genre },
           {
-            label: 'dialog.track.position',
+            label: 'property.position',
             value: [this.item.disc_number, this.item.track_number].join(' / ')
           },
           {
-            label: 'dialog.track.duration',
+            label: 'property.duration',
             value: this.$filters.durationInHours(this.item.length_ms)
           },
           {
-            label: 'dialog.track.type',
+            label: 'property.type',
             value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
           },
           {
-            label: 'dialog.track.quality',
+            label: 'property.quality',
             value: this.$t('dialog.track.quality-value', {
               format: this.item.type,
               bitrate: this.item.bitrate,
@@ -83,17 +83,17 @@ export default {
             })
           },
           {
-            label: 'dialog.track.added-on',
+            label: 'property.added-on',
             value: this.$filters.datetime(this.item.time_added)
           },
           {
-            label: 'dialog.track.rating',
+            label: 'property.rating',
             value: this.$t('dialog.track.rating-value', {
               rating: Math.floor(this.item.rating / 10)
             })
           },
-          { label: 'dialog.track.comment', value: this.item.comment },
-          { label: 'dialog.track.path', value: this.item.path }
+          { label: 'property.comment', value: this.item.comment },
+          { label: 'property.path', value: this.item.path }
         ]
       }
     }

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -21,28 +21,28 @@ export default {
         subtitle: this.item.artists[0].name,
         properties: [
           {
-            label: 'dialog.spotify.track.album',
+            label: 'property.album',
             value: this.item.album.name,
-            action: this.open_album
+            handler: this.open_album
           },
           {
-            label: 'dialog.spotify.track.album-artist',
+            label: 'property.album-artist',
             value: this.item.artists[0].name,
-            action: this.open_artist
+            handler: this.open_artist
           },
           {
-            label: 'dialog.spotify.track.release-date',
+            label: 'property.release-date',
             value: this.$filters.date(item.album.release_date)
           },
           {
-            label: 'dialog.spotify.track.position',
+            label: 'property.position',
             value: [item.disc_number, item.track_number].join(' / ')
           },
           {
-            label: 'dialog.spotify.track.duration',
+            label: 'property.duration',
             value: this.$filters.durationInHours(item.duration_ms)
           },
-          { label: 'dialog.spotify.track.path', value: this.item.uri }
+          { label: 'property.path', value: this.item.uri }
         ]
       }
     }