[web] Refactor the Spotify track item page

web-src/src/components/ListItemTrackSpotify.vue

@@ -14,13 +14,14 @@
         v-text="item.name"
       />
       <h2
-        class="subtitle is-7"
+        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
@@ -34,21 +35,35 @@
       </h2>
     </div>
     <div class="media-right">
-      <slot name="actions" />
+      <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) {

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -16,7 +16,7 @@
                 <a
                   class="title is-6 has-text-link"
                   @click="open_album"
-                  v-text="album.name"
+                  v-text="track.album.name"
                 />
               </p>
               <p>
@@ -27,7 +27,7 @@
                 <a
                   class="title is-6 has-text-link"
                   @click="open_artist"
-                  v-text="album.artists[0].name"
+                  v-text="track.artists[0].name"
                 />
               </p>
               <p>
@@ -37,7 +37,7 @@
                 />
                 <span
                   class="title is-6"
-                  v-text="$filters.date(album.release_date)"
+                  v-text="$filters.date(track.album.release_date)"
                 />
               </p>
               <p>
@@ -106,47 +106,37 @@ import webapi from '@/webapi'
 export default {
   name: 'ModalDialogTrackSpotify',
   props: {
-    album: {
-      default() {
-        return {}
-      },
-      type: Object
-    },
     show: Boolean,
     track: { required: true, type: Object }
   },
   emits: ['close'],
 
   methods: {
-    play() {
-      this.$emit('close')
-      webapi.player_play_uri(this.track.uri, false)
-    },
-
-    queue_add() {
-      this.$emit('close')
-      webapi.queue_add(this.track.uri)
-    },
-
-    queue_add_next() {
-      this.$emit('close')
-      webapi.queue_add_next(this.track.uri)
-    },
-
     open_album() {
       this.$emit('close')
       this.$router.push({
         name: 'music-spotify-album',
-        params: { id: this.album.id }
+        params: { id: this.track.album.id }
       })
     },
-
     open_artist() {
       this.$emit('close')
       this.$router.push({
         name: 'music-spotify-artist',
-        params: { id: this.album.artists[0].id }
+        params: { id: this.track.artists[0].id }
       })
+    },
+    play() {
+      this.$emit('close')
+      webapi.player_play_uri(this.track.uri, false)
+    },
+    queue_add() {
+      this.$emit('close')
+      webapi.queue_add(this.track.uri)
+    },
+    queue_add_next() {
+      this.$emit('close')
+      webapi.queue_add_next(this.track.uri)
     }
   }
 }