67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<div class="ui card">
|
|
<div class="content">
|
|
<div v-if="isLoading" class="ui vertical segment">
|
|
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
|
|
</div>
|
|
<template v-if="data.id">
|
|
<div class="header">
|
|
<a :href="getMusicbrainzUrl('release', data.id)" target="_blank" title="View on MusicBrainz">{{ data.title }}</a>
|
|
</div>
|
|
<div class="meta">
|
|
<a :href="getMusicbrainzUrl('artist', data['artist-credit'][0]['artist']['id'])" target="_blank" title="View on MusicBrainz">{{ data['artist-credit-phrase'] }}</a>
|
|
</div>
|
|
<div class="description">
|
|
<table class="ui very basic fixed single line compact table">
|
|
<tbody>
|
|
<tr v-for="track in tracks">
|
|
<td>
|
|
{{ track.position }}
|
|
</td>
|
|
<td colspan="3">
|
|
<a :href="getMusicbrainzUrl('recording', track.id)" class="discrete link" target="_blank" title="View on MusicBrainz">
|
|
{{ track.recording.title }}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{{ time.parse(parseInt(track.length) / 1000) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import CardMixin from './CardMixin'
|
|
import time from '@/utils/time'
|
|
|
|
export default Vue.extend({
|
|
mixins: [CardMixin],
|
|
data () {
|
|
return {
|
|
time
|
|
}
|
|
},
|
|
computed: {
|
|
type () {
|
|
return 'release'
|
|
},
|
|
tracks () {
|
|
return this.data['medium-list'][0]['track-list']
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped lang="scss">
|
|
.ui.card {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|