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

<template>
  <div class="media is-align-items-center">
    <div
      class="media-content is-clipped"
      :class="{
        'is-clickable': item.is_playable,
        'fd-is-not-allowed': !item.is_playable
      }"
      @click="play"
    >
      <h1
        class="title is-6"
        :class="{ 'has-text-grey-light': !item.is_playable }"
        v-text="item.name"
      />
      <h2
        class="subtitle is-7 has-text-weight-bold"
        :class="{
          'has-text-grey': item.is_playable,
          'has-text-grey-light': !item.is_playable
        }"
        v-text="item.artists[0].name"
      />
      <h2 class="subtitle is-7 has-text-grey" v-text="item.album.name" />
      <h2 v-if="!item.is_playable" class="subtitle is-7">
        (<span v-text="$t('list.spotify.not-playable-track')" />
        <span
          v-if="item.restrictions && item.restrictions.reason"
          v-text="
            $t('list.spotify.restriction-reason', {
              reason: item.restrictions.reason
            })
          "
        />)
      </h2>
    </div>
    <div class="media-right">
      <a @click.prevent.stop="show_details_modal = true">
        <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
      </a>
    </div>
  </div>
  <teleport to="#app">
    <modal-dialog-track-spotify
      :show="show_details_modal"
      :track="item"
      @close="show_details_modal = false"
    />
  </teleport>
</template>

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

export default {
  name: 'ListItemTrackSpotify',
  components: { ModalDialogTrackSpotify },
  props: {
    context_uri: { required: true, type: String },
    item: { required: true, type: Object },
    position: { required: true, type: Number }
  },
  data() {
    return { show_details_modal: false }
  },
  methods: {
    play() {
      if (this.item.is_playable) {
        webapi.player_play_uri(this.context_uri, false, this.position)
      }
    }
  }
}
</script>

<style></style>