2017-06-23 21:00:42 +00:00
|
|
|
<template>
|
2018-11-19 22:33:22 +00:00
|
|
|
<main>
|
2019-04-17 14:11:24 +00:00
|
|
|
<div v-if="isLoading" class="ui vertical segment" v-title="labels.title">
|
2017-06-23 21:00:42 +00:00
|
|
|
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
|
|
|
|
</div>
|
2019-04-17 14:11:24 +00:00
|
|
|
<template v-if="object">
|
|
|
|
<section :class="['ui', 'head', {'with-background': object.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="object.title">
|
2017-06-23 21:00:42 +00:00
|
|
|
<div class="segment-content">
|
|
|
|
<h2 class="ui center aligned icon header">
|
|
|
|
<i class="circular inverted sound yellow icon"></i>
|
|
|
|
<div class="content">
|
2019-04-17 14:11:24 +00:00
|
|
|
{{ object.title }}
|
2019-01-26 12:13:48 +00:00
|
|
|
<div v-html="subtitle"></div>
|
2018-06-30 13:28:47 +00:00
|
|
|
</div>
|
2017-06-23 21:00:42 +00:00
|
|
|
</h2>
|
|
|
|
<div class="ui hidden divider"></div>
|
2019-04-17 12:17:59 +00:00
|
|
|
<div class="header-buttons">
|
2017-06-23 21:00:42 +00:00
|
|
|
|
2019-04-17 12:17:59 +00:00
|
|
|
<div class="ui buttons">
|
2019-04-17 14:11:24 +00:00
|
|
|
<play-button class="orange" :tracks="object.tracks">
|
2019-04-17 12:17:59 +00:00
|
|
|
<translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate>
|
|
|
|
</play-button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
|
2018-12-19 13:04:49 +00:00
|
|
|
<div class="header">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate>
|
2018-12-19 13:04:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="description">
|
2019-04-17 14:11:24 +00:00
|
|
|
<embed-wizard type="album" :id="object.id" />
|
2018-12-19 13:04:49 +00:00
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="actions">
|
|
|
|
<div class="ui deny button">
|
2019-03-18 09:07:58 +00:00
|
|
|
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
|
2018-12-19 13:04:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</modal>
|
2019-04-17 12:17:59 +00:00
|
|
|
<div class="ui buttons">
|
|
|
|
<button class="ui button" @click="$refs.dropdown.click()">
|
|
|
|
<translate translate-context="*/*/Button.Label/Noun">More…</translate>
|
|
|
|
</button>
|
|
|
|
<div class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
|
|
|
|
<i class="dropdown icon"></i>
|
|
|
|
<div class="menu">
|
|
|
|
<div
|
|
|
|
role="button"
|
|
|
|
v-if="publicLibraries.length > 0"
|
|
|
|
@click="showEmbedModal = !showEmbedModal"
|
|
|
|
class="basic item">
|
|
|
|
<i class="code icon"></i>
|
|
|
|
<translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
|
|
|
|
</div>
|
|
|
|
<a :href="wikipediaUrl" target="_blank" rel="noreferrer noopener" class="basic item">
|
|
|
|
<i class="wikipedia w icon"></i>
|
|
|
|
<translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
|
|
|
|
</a>
|
|
|
|
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener" class="basic item">
|
|
|
|
<i class="external icon"></i>
|
|
|
|
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
|
|
|
|
</a>
|
2019-06-16 15:23:12 +00:00
|
|
|
<a :href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
|
|
|
|
<i class="external icon"></i>
|
|
|
|
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
|
|
|
|
</a>
|
|
|
|
<router-link
|
2019-04-17 14:11:24 +00:00
|
|
|
v-if="object.is_local"
|
|
|
|
:to="{name: 'library.albums.edit', params: {id: object.id }}"
|
|
|
|
class="basic item">
|
|
|
|
<i class="edit icon"></i>
|
|
|
|
<translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
|
|
|
|
</router-link>
|
2019-04-17 12:17:59 +00:00
|
|
|
<div class="divider"></div>
|
2019-04-17 14:11:24 +00:00
|
|
|
<router-link class="basic item" v-if="$store.state.auth.availablePermissions['library']" :to="{name: 'manage.library.albums.detail', params: {id: object.id}}">
|
2019-04-17 12:17:59 +00:00
|
|
|
<i class="wrench icon"></i>
|
|
|
|
<translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
|
|
|
|
</router-link>
|
|
|
|
<a
|
2019-04-29 13:26:54 +00:00
|
|
|
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
|
2019-04-17 12:17:59 +00:00
|
|
|
class="basic item"
|
2019-04-17 14:11:24 +00:00
|
|
|
:href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
|
2019-04-17 12:17:59 +00:00
|
|
|
target="_blank" rel="noopener noreferrer">
|
|
|
|
<i class="wrench icon"></i>
|
|
|
|
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
2018-11-19 22:33:22 +00:00
|
|
|
</section>
|
2019-04-17 14:11:24 +00:00
|
|
|
<router-view v-if="object" :discs="discs" @libraries-loaded="libraries = $event" :object="object" object-type="album" :key="$route.fullPath"></router-view>
|
2017-06-23 21:00:42 +00:00
|
|
|
</template>
|
2018-11-19 22:33:22 +00:00
|
|
|
</main>
|
2017-06-23 21:00:42 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-11-19 22:33:22 +00:00
|
|
|
import axios from "axios"
|
|
|
|
import logger from "@/logging"
|
|
|
|
import backend from "@/audio/backend"
|
|
|
|
import PlayButton from "@/components/audio/PlayButton"
|
2018-12-19 13:04:49 +00:00
|
|
|
import EmbedWizard from "@/components/audio/EmbedWizard"
|
|
|
|
import Modal from '@/components/semantic/Modal'
|
2017-06-23 21:00:42 +00:00
|
|
|
|
2018-11-19 22:33:22 +00:00
|
|
|
const FETCH_URL = "albums/"
|
2017-06-23 21:00:42 +00:00
|
|
|
|
2019-04-17 14:11:24 +00:00
|
|
|
|
2018-12-11 09:17:05 +00:00
|
|
|
function groupByDisc(acc, track) {
|
|
|
|
var dn = track.disc_number - 1
|
|
|
|
if (dn < 0) dn = 0
|
|
|
|
if (acc[dn] == undefined) {
|
|
|
|
acc.push([track])
|
|
|
|
} else {
|
|
|
|
acc[dn].push(track)
|
|
|
|
}
|
|
|
|
return acc
|
|
|
|
}
|
|
|
|
|
2017-06-23 21:00:42 +00:00
|
|
|
export default {
|
2018-11-19 22:33:22 +00:00
|
|
|
props: ["id"],
|
2017-06-23 21:00:42 +00:00
|
|
|
components: {
|
|
|
|
PlayButton,
|
2018-12-19 13:04:49 +00:00
|
|
|
EmbedWizard,
|
|
|
|
Modal
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
data() {
|
2017-06-23 21:00:42 +00:00
|
|
|
return {
|
|
|
|
isLoading: true,
|
2019-04-17 14:11:24 +00:00
|
|
|
object: null,
|
2018-12-19 13:04:49 +00:00
|
|
|
discs: [],
|
|
|
|
libraries: [],
|
|
|
|
showEmbedModal: false
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
created() {
|
2017-06-23 21:00:42 +00:00
|
|
|
this.fetchData()
|
|
|
|
},
|
|
|
|
methods: {
|
2018-11-19 22:33:22 +00:00
|
|
|
fetchData() {
|
2017-06-23 21:00:42 +00:00
|
|
|
var self = this
|
|
|
|
this.isLoading = true
|
2018-11-19 22:33:22 +00:00
|
|
|
let url = FETCH_URL + this.id + "/"
|
2017-06-23 21:00:42 +00:00
|
|
|
logger.default.debug('Fetching album "' + this.id + '"')
|
2018-11-19 22:33:22 +00:00
|
|
|
axios.get(url).then(response => {
|
2019-04-17 14:11:24 +00:00
|
|
|
self.object = backend.Album.clean(response.data)
|
|
|
|
self.discs = self.object.tracks.reduce(groupByDisc, [])
|
2017-06-23 21:00:42 +00:00
|
|
|
self.isLoading = false
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2018-11-19 22:33:22 +00:00
|
|
|
labels() {
|
2018-07-01 19:50:50 +00:00
|
|
|
return {
|
2019-03-18 09:07:58 +00:00
|
|
|
title: this.$pgettext('*/*/*', 'Album')
|
2018-07-01 19:50:50 +00:00
|
|
|
}
|
|
|
|
},
|
2018-12-19 13:04:49 +00:00
|
|
|
publicLibraries () {
|
|
|
|
return this.libraries.filter(l => {
|
|
|
|
return l.privacy_level === 'everyone'
|
|
|
|
})
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
wikipediaUrl() {
|
|
|
|
return (
|
|
|
|
"https://en.wikipedia.org/w/index.php?search=" +
|
2019-04-17 14:11:24 +00:00
|
|
|
encodeURI(this.object.title + " " + this.object.artist.name)
|
2018-11-19 22:33:22 +00:00
|
|
|
)
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
musicbrainzUrl() {
|
2019-04-17 14:11:24 +00:00
|
|
|
if (this.object.mbid) {
|
|
|
|
return "https://musicbrainz.org/release/" + this.object.mbid
|
2018-10-20 14:20:29 +00:00
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
2019-06-16 15:23:12 +00:00
|
|
|
discogsUrl() {
|
|
|
|
return (
|
|
|
|
"https://discogs.com/search/?type=release&title=" +
|
|
|
|
encodeURI(this.object.title) + "&artist=" +
|
|
|
|
encodeURI(this.object.artist.name)
|
|
|
|
)
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
headerStyle() {
|
2019-04-17 14:11:24 +00:00
|
|
|
if (!this.object.cover.original) {
|
2018-11-19 22:33:22 +00:00
|
|
|
return ""
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
2018-11-19 22:33:22 +00:00
|
|
|
return (
|
|
|
|
"background-image: url(" +
|
2019-04-17 14:11:24 +00:00
|
|
|
this.$store.getters["instance/absoluteUrl"](this.object.cover.original) +
|
2018-11-19 22:33:22 +00:00
|
|
|
")"
|
|
|
|
)
|
2019-01-26 12:13:48 +00:00
|
|
|
},
|
|
|
|
subtitle () {
|
2019-04-17 14:11:24 +00:00
|
|
|
let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.object.artist.id }})
|
|
|
|
let msg = this.$npgettext('Content/Album/Header.Title', 'Album containing %{ count } track, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', 'Album containing %{ count } tracks, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', this.object.tracks.length)
|
2019-06-28 09:57:32 +00:00
|
|
|
return this.$gettextInterpolate(msg, {count: this.object.tracks.length, artist: this.object.artist.name, artistUrl: route.href})
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
2018-11-19 22:33:22 +00:00
|
|
|
id() {
|
2017-06-23 21:00:42 +00:00
|
|
|
this.fetchData()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|