From 8950988dea539a230f6e72f5eceee617a48b1d2f Mon Sep 17 00:00:00 2001
From: Renon <renon@disroot.org>
Date: Mon, 30 Jul 2018 14:03:07 +0200
Subject: [PATCH] add duration in track table

---
 changes/changelog.d/461.enhancement        |  1 +
 front/src/components/audio/track/Row.vue   | 20 ++++++++++++++++++--
 front/src/components/audio/track/Table.vue |  5 +++--
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 changes/changelog.d/461.enhancement

diff --git a/changes/changelog.d/461.enhancement b/changes/changelog.d/461.enhancement
new file mode 100644
index 000000000..63cd0193f
--- /dev/null
+++ b/changes/changelog.d/461.enhancement
@@ -0,0 +1 @@
+Display track duration in track tables (#461)
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index cf79267cf..91b10c32e 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/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]
     }
   }
 }
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 03e9398f8..2b49284c8 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/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="6"><translate>Album</translate></th>
+        <th colspan="4"><translate>Artist</translate></th>
+        <th colspan="4"><translate>Album</translate></th>
+        <th colspan="4"><translate>Duration</translate></th>
         <th></th>
       </tr>
     </thead>