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 {}