owntone-server/web-src/src/components/ModalDialogAlbum.vue

<template>
  <modal-dialog-playable
    :buttons="buttons"
    :item="playable"
    :show="show"
    @close="$emit('close')"
  />
  <modal-dialog
    :actions="actions"
    :show="showRemovePodcastModal"
    :title="$t('dialog.podcast.remove.title')"
    @close="showRemovePodcastModal = false"
    @remove="removePodcast"
  >
    <template #content>
      <i18n-t keypath="dialog.podcast.remove.info" tag="p" scope="global">
        <template #separator>
          <br />
        </template>
        <template #name>
          <b v-text="item.name" />
        </template>
      </i18n-t>
    </template>
  </modal-dialog>
</template>

<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
import webapi from '@/webapi'

export default {
  name: 'ModalDialogAlbum',
  components: { ModalDialog, ModalDialogPlayable },
  props: {
    item: { required: true, type: Object },
    mediaKind: { default: '', type: String },
    show: Boolean
  },
  emits: ['close', 'play-count-changed', 'podcast-deleted'],
  data() {
    return {
      showRemovePodcastModal: false
    }
  },
  computed: {
    actions() {
      return [
        {
          handler: this.cancel,
          icon: 'cancel',
          key: this.$t('actions.cancel')
        },
        {
          handler: this.removePodcast,
          icon: 'delete',
          key: this.$t('actions.remove')
        }
      ]
    },
    buttons() {
      if (this.media_kind_resolved === 'podcast') {
        if (this.item.data_kind === 'url') {
          return [
            { handler: this.markAsPlayed, key: 'actions.mark-as-played' },
            {
              handler: this.openRemovePodcastDialog,
              key: 'actions.remove'
            }
          ]
        }
        return [{ handler: this.markAsPlayed, key: 'actions.mark-as-played' }]
      }
      return []
    },
    media_kind_resolved() {
      return this.mediaKind || this.item.media_kind
    },
    playable() {
      return {
        image: this.item.artwork_url,
        name: this.item.name,
        properties: [
          {
            handler: this.openArtist,
            key: 'property.artist',
            value: this.item.artist
          },
          {
            key: 'property.release-date',
            value: this.$filters.toDate(this.item.date_released)
          },
          { key: 'property.year', value: this.item.year },
          { key: 'property.tracks', value: this.item.track_count },
          {
            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          },
          {
            key: 'property.type',
            value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
          },
          {
            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          }
        ],
        uri: this.item.uri
      }
    }
  },
  methods: {
    cancel() {
      this.showRemovePodcastModal = false
    },
    markAsPlayed() {
      webapi
        .library_album_track_update(this.item.id, { play_count: 'played' })
        .then(() => {
          this.$emit('play-count-changed')
          this.$emit('close')
        })
    },
    openArtist() {
      this.$emit('close')
      if (this.media_kind_resolved === 'audiobook') {
        this.$router.push({
          name: 'audiobooks-artist',
          params: { id: this.item.artist_id }
        })
      } else {
        this.$router.push({
          name: 'music-artist',
          params: { id: this.item.artist_id }
        })
      }
    },
    openRemovePodcastDialog() {
      this.showRemovePodcastModal = true
      this.showDetailsModal = false
    },
    removePodcast() {
      this.showRemovePodcastModal = false
      webapi.library_album_tracks(this.item.id, { limit: 1 }).then((album) => {
        webapi.library_track_playlists(album.items[0].id).then((data) => {
          const { id } = data.items.find((item) => item.type === 'rss')
          webapi.library_playlist_delete(id).then(() => {
            this.$emit('podcast-deleted')
            this.$emit('close')
          })
        })
      })
    }
  }
}
</script>