Merge branch '461-add-duration-track-table' into 'develop'

Resolve "Display track length in track lists (album view for instance)"

Closes #461

See merge request funkwhale/funkwhale!363

changes/changelog.d/461.enhancement

@@ -0,0 +1 @@
+Display track duration in track tables (#461)

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

@@ -15,7 +15,7 @@
         {{ track.title }}
       </router-link>
     </td>
-    <td colspan="6">
+    <td colspan="4">
       <router-link v-if="track.artist.id === albumArtist.id" class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
         {{ track.artist.name }}
       </router-link>
@@ -29,11 +29,17 @@
         </router-link>
       </template>
     </td>
-    <td colspan="6">
+    <td colspan="4">
       <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
         {{ track.album.title }}
       </router-link>
     </td>
+    <td colspan="4" v-if="file && file.duration">
+      {{ time.parse(file.duration) }}
+    </td>
+    <td colspan="4" v-else>
+      <translate>N/A</translate>
+    </td>
     <td>
       <track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
       <track-playlist-icon
@@ -44,6 +50,8 @@
 </template>
 
 <script>
+
+import time from '@/utils/time'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
 import PlayButton from '@/components/audio/PlayButton'
@@ -59,6 +67,11 @@ export default {
     TrackPlaylistIcon,
     PlayButton
   },
+  data () {
+    return {
+      time
+    }
+  },
   computed: {
     albumArtist () {
       if (this.artist) {
@@ -66,6 +79,9 @@ export default {
       } else {
         return this.track.album.artist
       }
+    },
+    file () {
+      return this.track.files[0]
     }
   }
 }

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

@@ -5,8 +5,9 @@
         <th></th>
         <th></th>
         <th colspan="6"><translate>Title</translate></th>
-        <th colspan="6"><translate>Artist</translate></th>
+        <th colspan="4"><translate>Artist</translate></th>
-        <th colspan="6"><translate>Album</translate></th>
+        <th colspan="4"><translate>Album</translate></th>
+        <th colspan="4"><translate>Duration</translate></th>
         <th></th>
       </tr>
     </thead>