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

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

@ -6,34 +6,22 @@
<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'](
track.cover.urls.large_square_crop
)
"
alt="Cover Image" alt="Cover Image"
class="ui fluid image track-cover-image" class="ui fluid image track-cover-image"
/> >
<img <img
v-else-if=" v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
track.album && v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
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" alt="Cover Image"
class="ui fluid image track-cover-image" class="ui fluid image track-cover-image"
/> >
<img <img
v-else v-else
src="../../assets/embed/default-cover.jpeg" src="../../assets/embed/default-cover.jpeg"
alt="Cover Image" alt="Cover Image"
class="ui fluid image track-cover-image" class="ui fluid image track-cover-image"
/> >
<h3 class="ui header"> <h3 class="ui header">
<translate <translate
v-if="track.artist.content_category === 'music'" v-if="track.artist.content_category === 'music'"
@ -42,7 +30,11 @@
> >
Track Details Track Details
</translate> </translate>
<translate v-else key="2" translate-context="Content/*/*"> <translate
v-else
key="2"
translate-context="Content/*/*"
>
Episode Details Episode Details
</translate> </translate>
</h3> </h3>
@ -58,7 +50,10 @@
<template v-if="upload.duration"> <template v-if="upload.duration">
{{ upload.duration | duration }} {{ upload.duration | duration }}
</template> </template>
<translate v-else translate-context="*/*/*"> <translate
v-else
translate-context="*/*/*"
>
N/A N/A
</translate> </translate>
</td> </td>
@ -73,7 +68,10 @@
<template v-if="upload.size"> <template v-if="upload.size">
{{ upload.size | humanSize }} {{ upload.size | humanSize }}
</template> </template>
<translate v-else translate-context="*/*/*"> <translate
v-else
translate-context="*/*/*"
>
N/A N/A
</translate> </translate>
</td> </td>
@ -88,7 +86,10 @@
<template v-if="upload.extension"> <template v-if="upload.extension">
{{ upload.extension }} {{ upload.extension }}
</template> </template>
<translate v-else translate-context="*/*/*"> <translate
v-else
translate-context="*/*/*"
>
N/A N/A
</translate> </translate>
</td> </td>
@ -103,7 +104,10 @@
<template v-if="upload.bitrate"> <template v-if="upload.bitrate">
{{ upload.bitrate | humanSize }}/s {{ upload.bitrate | humanSize }}/s
</template> </template>
<translate v-else translate-context="*/*/*"> <translate
v-else
translate-context="*/*/*"
>
N/A N/A
</translate> </translate>
</td> </td>
@ -141,15 +145,12 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<translate translate-context="*/*/*/Noun"> Artist </translate> <translate translate-context="*/*/*/Noun">
Artist
</translate>
</td> </td>
<td class="right aligned"> <td class="right aligned">
<router-link <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
:to="{
name: 'library.artists.detail',
params: { id: track.artist.id },
}"
>
{{ track.artist.name }} {{ track.artist.name }}
</router-link> </router-link>
</td> </td>
@ -163,31 +164,34 @@
> >
Album Album
</translate> </translate>
<translate v-else key="2" translate-context="*/*/*"> <translate
v-else
key="2"
translate-context="*/*/*"
>
Serie Serie
</translate> </translate>
</td> </td>
<td class="right aligned"> <td class="right aligned">
<router-link <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
:to="{
name: 'library.albums.detail',
params: { id: track.album.id },
}"
>
{{ track.album.title }} {{ track.album.title }}
</router-link> </router-link>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<translate translate-context="*/*/*"> Year </translate> <translate translate-context="*/*/*">
Year
</translate>
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="track.album && track.album.release_date"> <template v-if="track.album && track.album.release_date">
{{ track.album.release_date | moment("Y") }} {{ track.album.release_date | moment('Y') }}
</template> </template>
<template v-else> <template v-else>
<translate translate-context="*/*/*"> N/A </translate> <translate translate-context="*/*/*">
N/A
</translate>
</template> </template>
</td> </td>
</tr> </tr>
@ -198,11 +202,14 @@
</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"
>{{ track.copyright|truncate(50) }}</span>
<template v-else> <template v-else>
<translate translate-context="*/*/*"> N/A </translate> <translate translate-context="*/*/*">
N/A
</translate>
</template> </template>
</td> </td>
</tr> </tr>
@ -218,9 +225,13 @@
:href="license.url" :href="license.url"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>{{ license.name }}</a >{{ license.name }}</a>
<translate
v-else
translate-context="*/*/*"
> >
<translate v-else translate-context="*/*/*"> N/A </translate> N/A
</translate>
</td> </td>
</tr> </tr>
<tr v-if="!track.is_local"> <tr v-if="!track.is_local">
@ -248,9 +259,7 @@
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<i class="external icon" /> <i class="external icon" />
<translate translate-context="Content/*/*/Clickable, Verb" <translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
>View on MusicBrainz</translate
>
</a> </a>
<h2 class="ui header"> <h2 class="ui header">
<translate translate-context="Content/*/Title/Noun"> <translate translate-context="Content/*/Title/Noun">
@ -259,11 +268,7 @@
</h2> </h2>
<playlist-widget <playlist-widget
:url="'playlists/'" :url="'playlists/'"
:filters="{ :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
track: track.id,
playable: true,
ordering: '-modification_date',
}"
/> />
<h2 class="ui header"> <h2 class="ui header">
@ -289,81 +294,81 @@
</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>