MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Undo automatic formatting

This commit is contained in:
Ciaran Ainsworth 2022-02-10 13:31:32 +01:00
parent 9b1865e43e
commit b387287931
1 changed files with 365 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

725
front/src/components/library/TrackDetail.vue
View File

@ -1,369 +1,374 @@
<template> <template>
<div v-if="track"> <div v-if="track">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<div class="ui stackable grid row container"> <div class="ui stackable grid row container">
<div class="six wide column"> <div class="six wide column">
<template v-if="upload"> <template v-if="upload">
<img <img
v-if="track.cover && track.cover.urls.large_square_crop" v-if="track.cover && track.cover.urls.large_square_crop"
v-lazy=" v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
$store.getters['instance/absoluteUrl']( alt="Cover Image"
track.cover.urls.large_square_crop class="ui fluid image track-cover-image"
) >
" <img
alt="Cover Image" v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
class="ui fluid image track-cover-image" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
/> alt="Cover Image"
<img class="ui fluid image track-cover-image"
v-else-if=" >
track.album && <img
track.album.cover && v-else
track.album.cover.urls.large_square_crop src="../../assets/embed/default-cover.jpeg"
" alt="Cover Image"
v-lazy=" class="ui fluid image track-cover-image"
$store.getters['instance/absoluteUrl']( >
track.album.cover.urls.large_square_crop <h3 class="ui header">
) <translate
" v-if="track.artist.content_category === 'music'"
alt="Cover Image" key="1"
class="ui fluid image track-cover-image" translate-context="Content/*/*"
/> >
<img Track Details
v-else </translate>
src="../../assets/embed/default-cover.jpeg" <translate
alt="Cover Image" v-else
class="ui fluid image track-cover-image" key="2"
/> translate-context="Content/*/*"
<h3 class="ui header"> >
<translate Episode Details
v-if="track.artist.content_category === 'music'" </translate>
key="1" </h3>
translate-context="Content/*/*" <table class="ui basic table">
> <tbody>
Track Details <tr>
</translate> <td>
<translate v-else key="2" translate-context="Content/*/*"> <translate translate-context="Content/*/*">
Episode Details Duration
</translate> </translate>
</h3> </td>
<table class="ui basic table"> <td class="right aligned">
<tbody> <template v-if="upload.duration">
<tr> {{ upload.duration | duration }}
<td> </template>
<translate translate-context="Content/*/*"> <translate
Duration v-else
</translate> translate-context="*/*/*"
</td> >
<td class="right aligned"> N/A
<template v-if="upload.duration"> </translate>
{{ upload.duration | duration }} </td>
</template> </tr>
<translate v-else translate-context="*/*/*"> <tr>
N/A <td>
</translate> <translate translate-context="Content/*/*/Noun">
</td> Size
</tr> </translate>
<tr> </td>
<td> <td class="right aligned">
<translate translate-context="Content/*/*/Noun"> <template v-if="upload.size">
Size {{ upload.size | humanSize }}
</translate> </template>
</td> <translate
<td class="right aligned"> v-else
<template v-if="upload.size"> translate-context="*/*/*"
{{ upload.size | humanSize }} >
</template> N/A
<translate v-else translate-context="*/*/*"> </translate>
N/A </td>
</translate> </tr>
</td> <tr>
</tr> <td>
<tr> <translate translate-context="Content/*/*/Noun">
<td> Codec
<translate translate-context="Content/*/*/Noun"> </translate>
Codec </td>
</translate> <td class="right aligned">
</td> <template v-if="upload.extension">
<td class="right aligned"> {{ upload.extension }}
<template v-if="upload.extension"> </template>
{{ upload.extension }} <translate
</template> v-else
<translate v-else translate-context="*/*/*"> translate-context="*/*/*"
N/A >
</translate> N/A
</td> </translate>
</tr> </td>
<tr> </tr>
<td> <tr>
<translate translate-context="Content/Track/*/Noun"> <td>
Bitrate <translate translate-context="Content/Track/*/Noun">
</translate> Bitrate
</td> </translate>
<td class="right aligned"> </td>
<template v-if="upload.bitrate"> <td class="right aligned">
{{ upload.bitrate | humanSize }}/s <template v-if="upload.bitrate">
</template> {{ upload.bitrate | humanSize }}/s
<translate v-else translate-context="*/*/*"> </template>
N/A <translate
</translate> v-else
</td> translate-context="*/*/*"
</tr> >
<tr> N/A
<td> </translate>
<translate translate-context="Content/*/*"> </td>
Downloads </tr>
</translate> <tr>
</td> <td>
<td class="right aligned"> <translate translate-context="Content/*/*">
{{ track.downloads_count }} Downloads
</td> </translate>
</tr> </td>
</tbody> <td class="right aligned">
</table> {{ track.downloads_count }}
</template> </td>
</div> </tr>
<div class="ten wide column"> </tbody>
<template v-if="track.tags && track.tags.length > 0"> </table>
<tags-list :tags="track.tags" /> </template>
<div class="ui hidden divider" /> </div>
</template> <div class="ten wide column">
<template v-if="track.tags && track.tags.length > 0">
<tags-list :tags="track.tags" />
<div class="ui hidden divider" />
</template>
<rendered-description <rendered-description
:content="track.description" :content="track.description"
:can-update="false" :can-update="false"
/> />
<h2 class="ui header"> <h2 class="ui header">
<translate translate-context="Content/*/*"> <translate translate-context="Content/*/*">
Release Details Release Details
</translate> </translate>
</h2> </h2>
<table class="ui basic table ellipsis-rows"> <table class="ui basic table ellipsis-rows">
<tbody> <tbody>
<tr> <tr>
<td> <td>
<translate translate-context="*/*/*/Noun"> Artist </translate> <translate translate-context="*/*/*/Noun">
</td> Artist
<td class="right aligned"> </translate>
<router-link </td>
:to="{ <td class="right aligned">
name: 'library.artists.detail', <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
params: { id: track.artist.id }, {{ track.artist.name }}
}" </router-link>
> </td>
{{ track.artist.name }} </tr>
</router-link> <tr v-if="track.album">
</td> <td>
</tr> <translate
<tr v-if="track.album"> v-if="track.album.artist.content_category === 'music'"
<td> key="1"
<translate translate-context="*/*/*/Noun"
v-if="track.album.artist.content_category === 'music'" >
key="1" Album
translate-context="*/*/*/Noun" </translate>
> <translate
Album v-else
</translate> key="2"
<translate v-else key="2" translate-context="*/*/*"> translate-context="*/*/*"
Serie >
</translate> Serie
</td> </translate>
<td class="right aligned"> </td>
<router-link <td class="right aligned">
:to="{ <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
name: 'library.albums.detail', {{ track.album.title }}
params: { id: track.album.id }, </router-link>
}" </td>
> </tr>
{{ track.album.title }} <tr>
</router-link> <td>
</td> <translate translate-context="*/*/*">
</tr> Year
<tr> </translate>
<td> </td>
<translate translate-context="*/*/*"> Year </translate> <td class="right aligned">
</td> <template v-if="track.album && track.album.release_date">
<td class="right aligned"> {{ track.album.release_date | moment('Y') }}
<template v-if="track.album && track.album.release_date"> </template>
{{ track.album.release_date | moment("Y") }} <template v-else>
</template> <translate translate-context="*/*/*">
<template v-else> N/A
<translate translate-context="*/*/*"> N/A </translate> </translate>
</template> </template>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<translate translate-context="Content/Track/*/Noun"> <translate translate-context="Content/Track/*/Noun">
Copyright Copyright
</translate> </translate>
</td> </td>
<td class="right aligned"> <td class="right aligned">
<span v-if="track.copyright" :title="track.copyright">{{ <span
track.copyright | truncate(50) v-if="track.copyright"
}}</span> :title="track.copyright"
<template v-else> >{{ track.copyright|truncate(50) }}</span>
<translate translate-context="*/*/*"> N/A </translate> <template v-else>
</template> <translate translate-context="*/*/*">
</td> N/A
</tr> </translate>
<tr> </template>
<td> </td>
<translate translate-context="Content/*/*/Noun"> </tr>
License <tr>
</translate> <td>
</td> <translate translate-context="Content/*/*/Noun">
<td class="right aligned"> License
<a </translate>
v-if="license" </td>
:href="license.url" <td class="right aligned">
target="_blank" <a
rel="noopener noreferrer" v-if="license"
>{{ license.name }}</a :href="license.url"
> target="_blank"
<translate v-else translate-context="*/*/*"> N/A </translate> rel="noopener noreferrer"
</td> >{{ license.name }}</a>
</tr> <translate
<tr v-if="!track.is_local"> v-else
<td> translate-context="*/*/*"
<translate translate-context="Content/*/*/Noun"> >
URL N/A
</translate> </translate>
</td> </td>
<td :title="track.fid"> </tr>
<a <tr v-if="!track.is_local">
:href="track.fid" <td>
target="_blank" <translate translate-context="Content/*/*/Noun">
rel="noopener noreferrer" URL
> </translate>
{{ track.fid | truncate(65) }} </td>
</a> <td :title="track.fid">
</td> <a
</tr> :href="track.fid"
</tbody> target="_blank"
</table> rel="noopener noreferrer"
<a >
v-if="musicbrainzUrl" {{ track.fid|truncate(65) }}
:href="musicbrainzUrl" </a>
target="_blank" </td>
rel="noreferrer noopener" </tr>
> </tbody>
<i class="external icon" /> </table>
<translate translate-context="Content/*/*/Clickable, Verb" <a
>View on MusicBrainz</translate v-if="musicbrainzUrl"
> :href="musicbrainzUrl"
</a> target="_blank"
<h2 class="ui header"> rel="noreferrer noopener"
<translate translate-context="Content/*/Title/Noun"> >
Related Playlists <i class="external icon" />
</translate> <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
</h2> </a>
<playlist-widget <h2 class="ui header">
:url="'playlists/'" <translate translate-context="Content/*/Title/Noun">
:filters="{ Related Playlists
track: track.id, </translate>
playable: true, </h2>
ordering: '-modification_date', <playlist-widget
}" :url="'playlists/'"
/> :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
/>
<h2 class="ui header"> <h2 class="ui header">
<translate translate-context="Content/*/Title/Noun"> <translate translate-context="Content/*/Title/Noun">
Related Libraries Related Libraries
</translate> </translate>
</h2> </h2>
<library-widget <library-widget
:url="'tracks/' + id + '/libraries/'" :url="'tracks/' + id + '/libraries/'"
@loaded="$emit('libraries-loaded', $event)" @loaded="$emit('libraries-loaded', $event)"
> >
<translate <translate
slot="subtitle" slot="subtitle"
translate-context="Content/Track/Paragraph" translate-context="Content/Track/Paragraph"
> >
This track is present in the following libraries: This track is present in the following libraries:
</translate> </translate>
</library-widget> </library-widget>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios"; import axios from 'axios'
import LibraryWidget from "@/components/federation/LibraryWidget"; import LibraryWidget from '@/components/federation/LibraryWidget'
import TagsList from "@/components/tags/List"; import TagsList from '@/components/tags/List'
import PlaylistWidget from "@/components/playlists/Widget"; import PlaylistWidget from '@/components/playlists/Widget'
export default { export default {
components: { components: {
LibraryWidget, LibraryWidget,
TagsList, TagsList,
PlaylistWidget, PlaylistWidget
}, },
props: { props: {
track: { type: Object, required: true }, track: { type: Object, required: true },
libraries: { type: Array, default: null }, libraries: { type: Array, default: null }
}, },
data() { data () {
return { return {
id: this.track.id, id: this.track.id,
licenseData: null, licenseData: null
}; }
}, },
computed: { computed: {
labels() { labels () {
return { return {
title: this.$pgettext("*/*/*/Noun", "Track"), title: this.$pgettext('*/*/*/Noun', 'Track')
}; }
}, },
musicbrainzUrl() { musicbrainzUrl () {
if (this.track.mbid) { if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid; return 'https://musicbrainz.org/recording/' + this.track.mbid
} }
return null; return null
}, },
upload() { upload () {
if (this.track.uploads) { if (this.track.uploads) {
return this.track.uploads[0]; return this.track.uploads[0]
} }
return null; return null
}, },
license() { license () {
if (!this.track || !this.track.license) { if (!this.track || !this.track.license) {
return null; return null
} }
return this.licenseData; return this.licenseData
}, },
cover() { cover () {
if (this.track.cover && this.track.cover.urls.original) { if (this.track.cover && this.track.cover.urls.original) {
return this.track.cover; return this.track.cover
} }
if (this.track.album && this.track.album.cover) { if (this.track.album && this.track.album.cover) {
return this.track.album.cover; return this.track.album.cover
} }
return null; return null
}, }
}, },
watch: { watch: {
track(v) { track (v) {
if (v && v.license) { if (v && v.license) {
this.fetchLicenseData(v.license); this.fetchLicenseData(v.license)
} }
}, }
}, },
created() { created () {
if (this.track && this.track.license) { if (this.track && this.track.license) {
this.fetchLicenseData(this.track.license); this.fetchLicenseData(this.track.license)
} }
}, },
methods: { methods: {
fetchLicenseData(licenseId) { fetchLicenseData (licenseId) {
const self = this; const self = this
const url = `licenses/${licenseId}`; const url = `licenses/${licenseId}`
axios.get(url).then((response) => { axios.get(url).then(response => {
self.licenseData = response.data; self.licenseData = response.data
}); })
}, }
}, }
}; }
</script> </script>