[web] Merge from main branch

web-src/src/components/ListItem.vue

@@ -10,7 +10,8 @@
   </div>
   <div
     v-else
-    class="media is-align-items-center is-clickable mb-0"
+    class="media is-align-items-center mb-0"
+    :class="{ 'is-clickable': isPlayable, 'is-not-allowed': !isPlayable }"
     @click="open"
   >
     <mdicon v-if="icon" class="media-left icon" :name="icon" />
@@ -28,10 +29,14 @@
           'is-size-6': position === 0,
           'is-size-7': position !== 0,
           'has-text-weight-bold': position !== 2,
-          'has-text-grey': position !== 0 || isRead
+          'has-text-grey': (position !== 0 || isRead) && isPlayable,
+          'has-text-grey-light': !isPlayable
         }"
         v-text="line"
       />
+      <div v-if="!isPlayable" class="is-size-7 has-text-grey">
+        <slot name="reason" />
+      </div>
     </div>
     <div v-if="progress" class="media-right">
       <control-progress :value="progress" />
@@ -56,6 +61,7 @@ export default {
     image: { default: null, type: Object },
     index: { default: null, type: [String, Number] },
     isItem: { default: true, type: Boolean },
+    isPlayable: { default: true, type: Boolean },
     isRead: { default: false, type: Boolean },
     lines: { default: null, type: Array },
     progress: { default: null, type: Number }
@@ -71,3 +77,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.is-not-allowed {
+  cursor: not-allowed;
+}
+</style>

web-src/src/components/ListTracksSpotify.vue

@@ -1,47 +1,24 @@
 <template>
-  <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center mb-0">
-      <div
-        class="media-content"
-        :class="{
-          'is-clickable': item.is_playable,
-          'is-not-allowed': !item.is_playable
-        }"
-        @click="play(item)"
-      >
-        <div
-          class="is-size-6 has-text-weight-bold"
-          :class="{ 'has-text-grey-light': !item.is_playable }"
-          v-text="item.name"
-        />
-        <div
-          class="is-size-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"
-        />
-        <div class="is-size-7 has-text-grey" v-text="item.album.name" />
-        <div v-if="!item.is_playable" class="is-size-7 has-text-grey">
-          (<span v-text="$t('list.spotify.not-playable-track')" />
-          <span
-            v-if="item.restrictions?.reason"
-            v-text="
-              $t('list.spotify.restriction-reason', {
-                reason: item.restrictions.reason
-              })
-            "
-          />)
-        </div>
-      </div>
-      <div class="media-right">
-        <a @click.prevent.stop="openDetails(item)">
-          <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
-        </a>
-      </div>
-    </div>
-  </template>
+  <list-item
+    v-for="item in items"
+    :key="item.id"
+    :is-playable="item.is_playable"
+    :lines="[item.name, item.artists[0].name, item.album.name]"
+    @open="open(item)"
+    @open-details="openDetails(item)"
+  >
+    <template v-if="!item.is_playable" #reason>
+      (<span v-text="$t('list.spotify.not-playable-track')" />
+      <span
+        v-if="item.restrictions?.reason"
+        v-text="
+          $t('list.spotify.restriction-reason', {
+            reason: item.restrictions.reason
+          })
+        "
+      />)
+    </template>
+  </list-item>
   <modal-dialog-track-spotify
     :item="selectedItem"
     :show="showDetailsModal"
@@ -50,12 +27,13 @@
 </template>
 
 <script>
+import ListItem from '@/components/ListItem.vue'
 import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ListTracksSpotify',
-  components: { ModalDialogTrackSpotify },
+  components: { ListItem, ModalDialogTrackSpotify },
   props: {
     contextUri: { default: '', type: String },
     items: { required: true, type: Object }
@@ -64,11 +42,7 @@ export default {
     return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
-    openDetails(item) {
-      this.selectedItem = item
-      this.showDetailsModal = true
-    },
-    play(item) {
+    open(item) {
       if (item.is_playable) {
         webapi.player_play_uri(
           this.contextUri || item.uri,
@@ -76,13 +50,11 @@ export default {
           item.position || 0
         )
       }
+    },
+    openDetails(item) {
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }
 </script>
-
-<style scoped>
-.is-not-allowed {
-  cursor: not-allowed;
-}
-</style>