From 01cabc705d43ba0947455f8fa2d5b4edaddbbc80 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 15 May 2018 22:24:20 +0200
Subject: [PATCH] See #195: track detail page now includes bitrate, duration
and size
---
front/src/components/library/Track.vue | 51 +++++++++++++++++++++++++-
front/src/filters.js | 19 ++++++++++
2 files changed, 69 insertions(+), 1 deletion(-)
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index 940086e02..155a1245a 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -44,6 +44,46 @@
</a>
</div>
</div>
+ <div v-if="file" class="ui vertical stripe center aligned segment">
+ <h2 class="ui header">{{ $t('Track information') }}</h2>
+ <table class="ui very basic collapsing celled center aligned table">
+ <tbody>
+ <tr>
+ <td>
+ {{ $t('Duration') }}
+ </td>
+ <td v-if="file.duration">
+ {{ time.parse(file.duration) }}
+ </td>
+ <td v-else>
+ {{ $t('N/A') }}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{ $t('Size') }}
+ </td>
+ <td v-if="file.size">
+ {{ file.size | humanSize }}
+ </td>
+ <td v-else>
+ {{ $t('N/A') }}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{ $t('Bitrate') }}
+ </td>
+ <td v-if="file.bitrate">
+ {{ file.bitrate | humanSize }}/s
+ </td>
+ <td v-else>
+ {{ $t('N/A') }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<div class="ui vertical stripe center aligned segment">
<h2><i18next path="Lyrics"/></h2>
<div v-if="isLoadingLyrics" class="ui vertical segment">
@@ -64,6 +104,8 @@
</template>
<script>
+
+import time from '@/utils/time'
import axios from 'axios'
import url from '@/utils/url'
import logger from '@/logging'
@@ -83,6 +125,7 @@ export default {
},
data () {
return {
+ time,
isLoadingTrack: true,
isLoadingLyrics: true,
track: null,
@@ -134,6 +177,9 @@ export default {
return u
}
},
+ file () {
+ return this.track.files[0]
+ },
lyricsSearchUrl () {
let base = 'http://lyrics.wikia.com/wiki/Special:Search?query='
let query = this.track.artist.name + ' ' + this.track.title
@@ -159,5 +205,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
-
+.table.center.aligned {
+ margin-left: auto;
+ margin-right: auto;
+}
</style>
diff --git a/front/src/filters.js b/front/src/filters.js
index afc393d40..117515599 100644
--- a/front/src/filters.js
+++ b/front/src/filters.js
@@ -47,4 +47,23 @@ export function capitalize (str) {
Vue.filter('capitalize', capitalize)
+export function humanSize (bytes) {
+ let si = true
+ var thresh = si ? 1000 : 1024
+ if (Math.abs(bytes) < thresh) {
+ return bytes + ' B'
+ }
+ var units = si
+ ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+ : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+ var u = -1
+ do {
+ bytes /= thresh
+ ++u
+ } while (Math.abs(bytes) >= thresh && u < units.length - 1)
+ return bytes.toFixed(1) + ' ' + units[u]
+}
+
+Vue.filter('humanSize', humanSize)
+
export default {}
--
GitLab