<template> <main> <div v-if="isLoading" class="ui vertical segment" v-title="labels.title"> <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div> </div> <template v-if="object"> <section :class="['ui', 'head', {'with-background': object.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="object.title"> <div class="segment-content"> <h2 class="ui center aligned icon header"> <i class="circular inverted sound yellow icon"></i> <div class="content"> {{ object.title }} <div v-html="subtitle"></div> </div> </h2> <tags-list v-if="object.tags && object.tags.length > 0" :tags="object.tags"></tags-list> <div class="ui hidden divider"></div> <div class="header-buttons"> <div class="ui buttons"> <play-button class="orange" :tracks="object.tracks"> <translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate> </play-button> </div> <modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal"> <div class="header"> <translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate> </div> <div class="content"> <div class="description"> <embed-wizard type="album" :id="object.id" /> </div> </div> <div class="actions"> <div class="ui basic deny button"> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate> </div> </div> </modal> <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> <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 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> <dangerous-button :class="['ui', {loading: isLoading}, 'item']" v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername" @confirm="remove()"> <i class="ui trash icon"></i> <translate translate-context="*/*/*/Verb">Delete…</translate> <p slot="modal-header"><translate translate-context="Popup/Channel/Title">Delete this album?</translate></p> <div slot="modal-content"> <p><translate translate-context="Content/Moderation/Paragraph">The album will be deleted, as well as any related files and data. This action is irreversible.</translate></p> </div> <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p> </dangerous-button> <div class="divider"></div> <div role="button" class="basic item" v-for="obj in getReportableObjs({album: object})" :key="obj.target.type + obj.target.id" @click.stop.prevent="$store.dispatch('moderation/report', obj.target)"> <i class="share icon" /> {{ obj.label }} </div> <div class="divider"></div> <router-link class="basic item" v-if="$store.state.auth.availablePermissions['library']" :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"> <i class="wrench icon"></i> <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate> </router-link> <a v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser" class="basic item" :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)" 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> </div> </section> <router-view v-if="object" :discs="discs" @libraries-loaded="libraries = $event" :object="object" object-type="album" :key="$route.fullPath"></router-view> </template> </main> </template> <script> import axios from "axios" import logger from "@/logging" import backend from "@/audio/backend" import PlayButton from "@/components/audio/PlayButton" import EmbedWizard from "@/components/audio/EmbedWizard" import Modal from '@/components/semantic/Modal' import TagsList from "@/components/tags/List" import ReportMixin from '@/components/mixins/Report' const FETCH_URL = "albums/" 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 } export default { mixins: [ReportMixin], props: ["id"], components: { PlayButton, EmbedWizard, Modal, TagsList, }, data() { return { isLoading: true, object: null, artist: null, discs: [], libraries: [], showEmbedModal: false } }, created() { this.fetchData() }, methods: { fetchData() { var self = this this.isLoading = true let url = FETCH_URL + this.id + "/" logger.default.debug('Fetching album "' + this.id + '"') axios.get(url, {params: {refresh: 'true'}}).then(response => { self.object = backend.Album.clean(response.data) self.discs = self.object.tracks.reduce(groupByDisc, []) axios.get(`artists/${response.data.artist.id}/`).then(response => { self.artist = response.data }) self.isLoading = false }) }, remove () { let self = this self.isLoading = true axios.delete(`albums/${this.object.id}`).then((response) => { self.isLoading = false self.$emit('deleted') self.$router.push({name: 'library.artists.detail', params: {id: this.artist.id}}) }, error => { self.isLoading = false self.errors = error.backendErrors }) } }, computed: { labels() { return { title: this.$pgettext('*/*/*', 'Album') } }, publicLibraries () { return this.libraries.filter(l => { return l.privacy_level === 'everyone' }) }, wikipediaUrl() { return ( "https://en.wikipedia.org/w/index.php?search=" + encodeURI(this.object.title + " " + this.object.artist.name) ) }, musicbrainzUrl() { if (this.object.mbid) { return "https://musicbrainz.org/release/" + this.object.mbid } }, discogsUrl() { return ( "https://discogs.com/search/?type=release&title=" + encodeURI(this.object.title) + "&artist=" + encodeURI(this.object.artist.name) ) }, headerStyle() { if (!this.object.cover.original) { return "" } return ( "background-image: url(" + this.$store.getters["instance/absoluteUrl"](this.object.cover.original) + ")" ) }, subtitle () { 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) return this.$gettextInterpolate(msg, {count: this.object.tracks.length, artist: this.object.artist.name, artistUrl: route.href}) } }, watch: { id() { this.fetchData() } } } </script>