Undo automatic formatting
This commit is contained in:
Ciaran Ainsworth
parent
9b1865e43e
commit
b387287931
|
|
@ -1,369 +1,374 @@
|
|||
<template>
|
||||
<div v-if="track">
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui stackable grid row container">
|
||||
<div class="six wide column">
|
||||
<template v-if="upload">
|
||||
<img
|
||||
v-if="track.cover && track.cover.urls.large_square_crop"
|
||||
v-lazy="
|
||||
$store.getters['instance/absoluteUrl'](
|
||||
track.cover.urls.large_square_crop
|
||||
)
|
||||
"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
/>
|
||||
<img
|
||||
v-else-if="
|
||||
track.album &&
|
||||
track.album.cover &&
|
||||
track.album.cover.urls.large_square_crop
|
||||
"
|
||||
v-lazy="
|
||||
$store.getters['instance/absoluteUrl'](
|
||||
track.album.cover.urls.large_square_crop
|
||||
)
|
||||
"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="../../assets/embed/default-cover.jpeg"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
/>
|
||||
<h3 class="ui header">
|
||||
<translate
|
||||
v-if="track.artist.content_category === 'music'"
|
||||
key="1"
|
||||
translate-context="Content/*/*"
|
||||
>
|
||||
Track Details
|
||||
</translate>
|
||||
<translate v-else key="2" translate-context="Content/*/*">
|
||||
Episode 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">
|
||||
{{ upload.duration | 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>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*">
|
||||
Downloads
|
||||
</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
{{ track.downloads_count }}
|
||||
</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" />
|
||||
<div class="ui hidden divider" />
|
||||
</template>
|
||||
<div v-if="track">
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui stackable grid row container">
|
||||
<div class="six wide column">
|
||||
<template v-if="upload">
|
||||
<img
|
||||
v-if="track.cover && track.cover.urls.large_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
src="../../assets/embed/default-cover.jpeg"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
>
|
||||
<h3 class="ui header">
|
||||
<translate
|
||||
v-if="track.artist.content_category === 'music'"
|
||||
key="1"
|
||||
translate-context="Content/*/*"
|
||||
>
|
||||
Track Details
|
||||
</translate>
|
||||
<translate
|
||||
v-else
|
||||
key="2"
|
||||
translate-context="Content/*/*"
|
||||
>
|
||||
Episode 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">
|
||||
{{ upload.duration | 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>
|
||||
<tr>
|
||||
<td>
|
||||
<translate translate-context="Content/*/*">
|
||||
Downloads
|
||||
</translate>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
{{ track.downloads_count }}
|
||||
</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" />
|
||||
<div class="ui hidden divider" />
|
||||
</template>
|
||||
|
||||
<rendered-description
|
||||
:content="track.description"
|
||||
:can-update="false"
|
||||
/>
|
||||
<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
|
||||
v-if="track.album.artist.content_category === 'music'"
|
||||
key="1"
|
||||
translate-context="*/*/*/Noun"
|
||||
>
|
||||
Album
|
||||
</translate>
|
||||
<translate v-else key="2" translate-context="*/*/*">
|
||||
Serie
|
||||
</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"
|
||||
: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" />
|
||||
<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',
|
||||
}"
|
||||
/>
|
||||
<rendered-description
|
||||
:content="track.description"
|
||||
:can-update="false"
|
||||
/>
|
||||
<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
|
||||
v-if="track.album.artist.content_category === 'music'"
|
||||
key="1"
|
||||
translate-context="*/*/*/Noun"
|
||||
>
|
||||
Album
|
||||
</translate>
|
||||
<translate
|
||||
v-else
|
||||
key="2"
|
||||
translate-context="*/*/*"
|
||||
>
|
||||
Serie
|
||||
</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"
|
||||
: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" />
|
||||
<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'}"
|
||||
/>
|
||||
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/*/Title/Noun">
|
||||
Related Libraries
|
||||
</translate>
|
||||
</h2>
|
||||
<library-widget
|
||||
:url="'tracks/' + id + '/libraries/'"
|
||||
@loaded="$emit('libraries-loaded', $event)"
|
||||
>
|
||||
<translate
|
||||
slot="subtitle"
|
||||
translate-context="Content/Track/Paragraph"
|
||||
>
|
||||
This track is present in the following libraries:
|
||||
</translate>
|
||||
</library-widget>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<h2 class="ui header">
|
||||
<translate translate-context="Content/*/Title/Noun">
|
||||
Related Libraries
|
||||
</translate>
|
||||
</h2>
|
||||
<library-widget
|
||||
:url="'tracks/' + id + '/libraries/'"
|
||||
@loaded="$emit('libraries-loaded', $event)"
|
||||
>
|
||||
<translate
|
||||
slot="subtitle"
|
||||
translate-context="Content/Track/Paragraph"
|
||||
>
|
||||
This track is present in the following libraries:
|
||||
</translate>
|
||||
</library-widget>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import LibraryWidget from "@/components/federation/LibraryWidget";
|
||||
import TagsList from "@/components/tags/List";
|
||||
import PlaylistWidget from "@/components/playlists/Widget";
|
||||
import axios from 'axios'
|
||||
import LibraryWidget from '@/components/federation/LibraryWidget'
|
||||
import TagsList from '@/components/tags/List'
|
||||
import PlaylistWidget from '@/components/playlists/Widget'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LibraryWidget,
|
||||
TagsList,
|
||||
PlaylistWidget,
|
||||
},
|
||||
props: {
|
||||
track: { type: Object, required: true },
|
||||
libraries: { type: Array, default: null },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: this.track.id,
|
||||
licenseData: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
labels() {
|
||||
return {
|
||||
title: this.$pgettext("*/*/*/Noun", "Track"),
|
||||
};
|
||||
},
|
||||
musicbrainzUrl() {
|
||||
if (this.track.mbid) {
|
||||
return "https://musicbrainz.org/recording/" + this.track.mbid;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
upload() {
|
||||
if (this.track.uploads) {
|
||||
return this.track.uploads[0];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
license() {
|
||||
if (!this.track || !this.track.license) {
|
||||
return null;
|
||||
}
|
||||
return this.licenseData;
|
||||
},
|
||||
cover() {
|
||||
if (this.track.cover && this.track.cover.urls.original) {
|
||||
return this.track.cover;
|
||||
}
|
||||
if (this.track.album && this.track.album.cover) {
|
||||
return this.track.album.cover;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
track(v) {
|
||||
if (v && v.license) {
|
||||
this.fetchLicenseData(v.license);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.track && this.track.license) {
|
||||
this.fetchLicenseData(this.track.license);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchLicenseData(licenseId) {
|
||||
const self = this;
|
||||
const url = `licenses/${licenseId}`;
|
||||
axios.get(url).then((response) => {
|
||||
self.licenseData = response.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
components: {
|
||||
LibraryWidget,
|
||||
TagsList,
|
||||
PlaylistWidget
|
||||
},
|
||||
props: {
|
||||
track: { type: Object, required: true },
|
||||
libraries: { type: Array, default: null }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
id: this.track.id,
|
||||
licenseData: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels () {
|
||||
return {
|
||||
title: this.$pgettext('*/*/*/Noun', 'Track')
|
||||
}
|
||||
},
|
||||
musicbrainzUrl () {
|
||||
if (this.track.mbid) {
|
||||
return 'https://musicbrainz.org/recording/' + this.track.mbid
|
||||
}
|
||||
return null
|
||||
},
|
||||
upload () {
|
||||
if (this.track.uploads) {
|
||||
return this.track.uploads[0]
|
||||
}
|
||||
return null
|
||||
},
|
||||
license () {
|
||||
if (!this.track || !this.track.license) {
|
||||
return null
|
||||
}
|
||||
return this.licenseData
|
||||
},
|
||||
cover () {
|
||||
if (this.track.cover && this.track.cover.urls.original) {
|
||||
return this.track.cover
|
||||
}
|
||||
if (this.track.album && this.track.album.cover) {
|
||||
return this.track.album.cover
|
||||
}
|
||||
return null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
track (v) {
|
||||
if (v && v.license) {
|
||||
this.fetchLicenseData(v.license)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.track && this.track.license) {
|
||||
this.fetchLicenseData(this.track.license)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchLicenseData (licenseId) {
|
||||
const self = this
|
||||
const url = `licenses/${licenseId}`
|
||||
axios.get(url).then(response => {
|
||||
self.licenseData = response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue