Factorization of track table row component

front/src/components/audio/track/Row.vue

@@ -0,0 +1,68 @@
+<template>
+  <tr>
+    <td>
+      <play-button class="basic icon" :discrete="true" :track="track"></play-button>
+    </td>
+    <td>
+      <img class="ui mini image" v-if="track.album.cover" v-lazy="backend.absoluteUrl(track.album.cover)">
+      <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
+    </td>
+    <td colspan="6">
+      <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
+        <template v-if="displayPosition && track.position">
+          {{ track.position }}.
+        </template>
+        {{ track.title }}
+      </router-link>
+    </td>
+    <td colspan="6">
+      <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
+        {{ track.artist.name }}
+      </router-link>
+    </td>
+    <td colspan="6">
+      <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
+        {{ track.album.title }}
+      </router-link>
+    </td>
+    <td>
+      <track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
+      <track-playlist-icon
+        v-if="$store.state.auth.authenticated"
+        :track="track"></track-playlist-icon>
+    </td>
+  </tr>
+</template>
+
+<script>
+import backend from '@/audio/backend'
+
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
+import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
+import PlayButton from '@/components/audio/PlayButton'
+
+export default {
+  props: {
+    track: {type: Object, required: true},
+    displayPosition: {type: Boolean, default: false}
+  },
+  components: {
+    TrackFavoriteIcon,
+    TrackPlaylistIcon,
+    PlayButton
+  },
+  data () {
+    return {
+      backend: backend
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+tr:not(:hover) .favorite-icon:not(.favorited) {
+  display: none;
+}
+</style>

front/src/components/audio/track/Table.vue

@@ -11,34 +11,11 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="track in tracks">
+      <track-row
-        <td>
+        :display-position="displayPosition"
-          <play-button class="basic icon" :discrete="true" :track="track"></play-button>
+        :track="track"
-        </td>
+        :key="index + '-' + track.id"
-        <td>
+        v-for="(track, index) in tracks"></track-row>
-          <img class="ui mini image" v-if="track.album.cover" v-lazy="backend.absoluteUrl(track.album.cover)">
-          <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
-        </td>
-        <td colspan="6">
-          <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
-            <template v-if="displayPosition && track.position">
-              {{ track.position }}.
-            </template>
-            {{ track.title }}
-          </router-link>
-        </td>
-        <td colspan="6">
-          <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
-            {{ track.artist.name }}
-          </router-link>
-        </td>
-        <td colspan="6">
-          <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
-            {{ track.album.title }}
-          </router-link>
-        </td>
-        <td><track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon></td>
-      </tr>
     </tbody>
     <tfoot class="full-width">
       <tr>
@@ -83,9 +60,8 @@ curl -G -o "{{ track.files[0].filename }}" <template v-if="$store.state.auth.aut
 
 <script>
 import backend from '@/audio/backend'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import PlayButton from '@/components/audio/PlayButton'
 
+import TrackRow from '@/components/audio/track/Row'
 import Modal from '@/components/semantic/Modal'
 
 export default {
@@ -95,8 +71,7 @@ export default {
   },
   components: {
     Modal,
-    TrackFavoriteIcon,
+    TrackRow
-    PlayButton
   },
   data () {
     return {