Skip to content
Snippets Groups Projects
Album.vue 8.28 KiB
Newer Older
  • Learn to ignore specific revisions
  • Eliot Berriot's avatar
    Eliot Berriot committed
        <div v-if="isLoading" class="ui vertical segment" v-title="">
    
          <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
        </div>
        <template v-if="album">
    
          <section :class="['ui', 'head', {'with-background': album.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
    
            <div class="segment-content">
              <h2 class="ui center aligned icon header">
                <i class="circular inverted sound yellow icon"></i>
                <div class="content">
                  {{ album.title }}
    
                  <div v-html="subtitle"></div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                </div>
    
              </h2>
              <div class="ui hidden divider"></div>
    
              <div class="header-buttons">
    
                <div class="ui buttons">
                  <play-button class="orange" :tracks="album.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">
    
                    <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="album.id" />
    
                    </div>
                  </div>
                  <div class="actions">
                    <div class="ui deny button">
    
    jovuit's avatar
    jovuit committed
                      <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
    
                <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>
                      <div class="divider"></div>
                      <router-link class="basic item" v-if="$store.state.auth.availablePermissions['library']" :to="{name: 'manage.library.albums.detail', params: {id: album.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.is_superuser"
                        class="basic item"
                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${album.id}`)"
                        target="_blank" rel="noopener noreferrer">
                        <i class="wrench icon"></i>
                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
                      </a>
                    </div>
                  </div>
                </div>
              </div>
    
          <template v-if="discs && discs.length > 1">
            <section v-for="(tracks, disc_number) in discs" class="ui vertical stripe segment">
              <translate
                tag="h2"
                class="left floated"
                :translate-params="{number: disc_number + 1}"
    
                translate-context="Content/Album/"
    
              >Volume %{ number }</translate>
              <play-button class="right floated orange" :tracks="tracks">
    
    jovuit's avatar
    jovuit committed
                <translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate>
    
              </play-button>
              <track-table :artist="album.artist" :display-position="true" :tracks="tracks"></track-table>
            </section>
          </template>
          <template v-else>
            <section class="ui vertical stripe segment">
              <h2>
    
    jovuit's avatar
    jovuit committed
                <translate translate-context="*/*/*/Noun">Tracks</translate>
    
              </h2>
              <track-table v-if="album" :artist="album.artist" :display-position="true" :tracks="album.tracks"></track-table>
            </section>
          </template>
    
          <section class="ui vertical stripe segment">
    
    jovuit's avatar
    jovuit committed
              <translate translate-context="Content/*/Title/Noun">User libraries</translate>
    
            <library-widget @loaded="libraries = $event" :url="'albums/' + id + '/libraries/'">
    
              <translate slot="subtitle" translate-context="Content/Album/Paragraph">This album is present in the following libraries:</translate>
    
    import axios from "axios"
    import logger from "@/logging"
    import backend from "@/audio/backend"
    import PlayButton from "@/components/audio/PlayButton"
    import TrackTable from "@/components/audio/track/Table"
    import LibraryWidget from "@/components/federation/LibraryWidget"
    
    import EmbedWizard from "@/components/audio/EmbedWizard"
    import Modal from '@/components/semantic/Modal'
    
    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
    }
    
    
          album: null,
    
          let url = FETCH_URL + this.id + "/"
    
          logger.default.debug('Fetching album "' + this.id + '"')
    
            self.album = backend.Album.clean(response.data)
    
            self.discs = self.album.tracks.reduce(groupByDisc, [])
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          return {
    
    jovuit's avatar
    jovuit committed
            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.album.title + " " + this.album.artist.name)
          )
    
            return "https://musicbrainz.org/release/" + this.album.mbid
    
          if (!this.album.cover.original) {
    
          return (
            "background-image: url(" +
            this.$store.getters["instance/absoluteUrl"](this.album.cover.original) +
            ")"
          )
    
          let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.album.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.album.tracks.length)
          return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name, artistUrl: route.location.path})
    
          this.fetchData()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="scss">
    </style>