diff --git a/changes/changelog.d/461.enhancement b/changes/changelog.d/461.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..63cd0193fe6d5d769eb61b85e0060780f14e42e0 --- /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 cf79267cfddf250206b4a8e8ec520528ba7ff0ed..91b10c32e06b75e22bcf5584aa61e0c6f449b3fe 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 03e9398f8a6b9ff9518bd9874db331bc5fabee6c..2b49284c8551ed85f0e40f60091f97c19d78a44a 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>