mirror of
https://code.eliotberriot.com/funkwhale/funkwhale.git
synced 2025-10-04 04:59:17 +02:00
See #170: revamped track detail page
This commit is contained in:
Eliot Berriot
parent
c43fe461c4
commit
27801ce541
9 changed files with 297 additions and 159 deletions
|
|
@ -1,88 +1,154 @@
|
|||
<template>
|
||||
|
||||
<div v-if="track">
|
||||
<section class="ui vertical stripe center aligned segment">
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/Track/Title/Noun">Track information</translate>
|
||||
</h2>
|
||||
<table class="ui very basic collapsing celled center aligned table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
|
||||
</td>
|
||||
<td v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</td>
|
||||
<td v-else>
|
||||
<translate translate-context="Content/Track/Table.Paragraph">No copyright information available for this track</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">License</translate>
|
||||
</td>
|
||||
<td v-if="license">
|
||||
<a :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
|
||||
</td>
|
||||
<td v-else>
|
||||
<translate translate-context="Content/Track/Table.Paragraph">No licensing information for this track</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*">Duration</translate>
|
||||
</td>
|
||||
<td v-if="upload && upload.duration">{{ time.parse(upload.duration) }}</td>
|
||||
<td v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">Size</translate>
|
||||
</td>
|
||||
<td v-if="upload && upload.size">{{ upload.size | humanSize }}</td>
|
||||
<td v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
|
||||
</td>
|
||||
<td v-if="upload && upload.bitrate">{{ upload.bitrate | humanSize }}/s</td>
|
||||
<td v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/Track/Table.Label/Noun">Type</translate>
|
||||
</td>
|
||||
<td v-if="upload && upload.extension">{{ upload.extension }}</td>
|
||||
<td v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">Federation ID</translate>
|
||||
</td>
|
||||
<td :title="track.fid">
|
||||
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
|
||||
{{ track.fid|truncate(65)}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2>
|
||||
<translate translate-context="Content/*/Title/Noun">User libraries</translate>
|
||||
</h2>
|
||||
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'">
|
||||
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate>
|
||||
</library-widget>
|
||||
<div class="ui stackable grid row container">
|
||||
<div class="six wide column">
|
||||
<img class="image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
|
||||
<template v-if="upload">
|
||||
<h3 class="ui header">
|
||||
<translate translate-context="Content/*/*">Track Details</translate>
|
||||
</h3>
|
||||
<table class="ui basic table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*">Duration</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.duration">{{ time.parse(upload.duration) }}</template>
|
||||
<translate v-else translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">Size</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.size">{{ upload.size | humanSize }}</template>
|
||||
<translate v-else translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">Codec</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.extension">{{ upload.extension }}</template>
|
||||
<translate v-else translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.bitrate">{{ upload.bitrate | humanSize }}/s</template>
|
||||
<translate v-else translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<div class="ten wide column">
|
||||
<template v-if="track.tags && track.tags.length > 0">
|
||||
<tags-list :tags="track.tags"></tags-list>
|
||||
<div class="ui hidden divider"></div>
|
||||
</template>
|
||||
|
||||
<rendered-description
|
||||
:content="track.description"
|
||||
can-update="false"></rendered-description>
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/*/*">Release Details</translate>
|
||||
</h2>
|
||||
<table class="ui basic table ellipsis-rows">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="*/*/*/Noun">Artist</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
|
||||
{{ track.artist.name }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="track.album">
|
||||
<td>
|
||||
<translate translate-context="*/*/*/Noun">Album</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
|
||||
{{ track.album.title }}
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="*/*/*">Year</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="track.album && track.album.release_date">
|
||||
{{ track.album.release_date | moment('Y') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<span v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</span>
|
||||
<template v-else>
|
||||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">License</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<a v-if="license" :title="license.name" :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
|
||||
<translate v-else translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!track.is_local">
|
||||
<td>
|
||||
<translate translate-context="Content/*/*/Noun">URL</translate>
|
||||
</td>
|
||||
<td :title="track.fid">
|
||||
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
|
||||
{{ track.fid|truncate(65)}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener">
|
||||
<i class="external icon"></i>
|
||||
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
|
||||
</a>
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/*/Title/Noun">Related Playlists</translate>
|
||||
</h2>
|
||||
<playlist-widget :url="'playlists/'" :filters="{track: track.id, playable: true, ordering: '-modification_date'}">
|
||||
</playlist-widget>
|
||||
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/*/Title/Noun">Related Libraries</translate>
|
||||
</h2>
|
||||
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'">
|
||||
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate>
|
||||
</library-widget>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -93,6 +159,8 @@ import axios from "axios"
|
|||
import url from "@/utils/url"
|
||||
import logger from "@/logging"
|
||||
import LibraryWidget from "@/components/federation/LibraryWidget"
|
||||
import TagsList from "@/components/tags/List"
|
||||
import PlaylistWidget from "@/components/playlists/Widget"
|
||||
|
||||
const FETCH_URL = "tracks/"
|
||||
|
||||
|
|
@ -100,6 +168,8 @@ export default {
|
|||
props: ["track", "libraries"],
|
||||
components: {
|
||||
LibraryWidget,
|
||||
TagsList,
|
||||
PlaylistWidget,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -128,6 +198,11 @@ export default {
|
|||
title: this.$pgettext('*/*/*/Noun', "Track")
|
||||
}
|
||||
},
|
||||
musicbrainzUrl() {
|
||||
if (this.track.mbid) {
|
||||
return "https://musicbrainz.org/recording/" + this.track.mbid
|
||||
}
|
||||
},
|
||||
upload() {
|
||||
if (this.track.uploads) {
|
||||
return this.track.uploads[0]
|
||||
|
|
@ -138,7 +213,15 @@ export default {
|
|||
return null
|
||||
}
|
||||
return this.licenseData
|
||||
}
|
||||
},
|
||||
cover () {
|
||||
if (this.track.cover && this.track.cover.original) {
|
||||
return this.track.cover
|
||||
}
|
||||
if (this.track.album && this.track.album.cover) {
|
||||
return this.track.album.cover
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
track (v) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue