Commit 01cabc70 authored by Eliot Berriot's avatar Eliot Berriot 💬

See #195: track detail page now includes bitrate, duration and size

parent 417a1b81
......@@ -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>
......@@ -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 {}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment