Skip to content
Snippets Groups Projects
Artist.vue 8.48 KiB
Newer Older
  • Learn to ignore specific revisions
  •     <div v-if="isLoading" class="ui vertical segment">
    
          <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
        </div>
        <template v-if="artist">
    
          <section :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="artist.name">
    
            <div class="segment-content">
              <h2 class="ui center aligned icon header">
                <i class="circular inverted users violet icon"></i>
                <div class="content">
                  {{ artist.name }}
    
                  <div class="sub header" v-if="albums">
    
                    <translate :translate-context="'Content/Artist/Paragraph'"
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                      tag="div"
                      translate-plural="%{ count } tracks in %{ albumsCount } albums"
                      :translate-n="totalTracks"
    
                      :translate-params="{count: totalTracks, albumsCount: totalAlbums}">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                      %{ count } track in %{ albumsCount } albums
                    </translate>
    
    Bat's avatar
    Bat committed
                  </div>
    
                </div>
              </h2>
              <div class="ui hidden divider"></div>
              <radio-button type="artist" :object-id="artist.id"></radio-button>
    
              <play-button :is-playable="isPlayable" class="orange" :artist="artist">
    
                <translate :translate-context="'Content/Artist/Button.Label/Verb'">Play all albums</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              </play-button>
    
    jovuit's avatar
    jovuit committed
              <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
    
                <i class="wikipedia w icon"></i>
    
                <translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
    
              <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
    
                <translate :translate-context="'Content/*/Button.Label/Verb'">View on MusicBrainz</translate>
    
              <template v-if="publicLibraries.length > 0">
                <button
                  @click="showEmbedModal = !showEmbedModal"
                  class="ui button icon labeled">
                  <i class="code icon"></i>
                  <translate :translate-context="'Content/*/Button.Label/Verb'">Embed</translate>
                </button>
                <modal :show.sync="showEmbedModal">
                  <div class="header">
                    <translate :translate-context="'Popup/Artist/Title/Verb'">Embed this artist work on your website</translate>
                  </div>
                  <div class="content">
                    <div class="description">
                      <embed-wizard type="artist" :id="artist.id" />
    
                    </div>
                  </div>
                  <div class="actions">
                    <div class="ui deny button">
                      <translate :translate-context="'Popup/*/Button.Label/Verb'">Cancel</translate>
                    </div>
                  </div>
                </modal>
              </template>
    
          <div class="ui small text container" v-if="contentFilter">
            <div class="ui hidden divider"></div>
            <div class="ui message">
              <p>
                <translate>You are currently hiding content related to this artist.</translate>
              </p>
              <router-link class="right floated" :to="{name: 'settings'}">
                <translate :translate-context="'Content/Moderation/Link'">Review my filters</translate>
              </router-link>
              <button @click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)" class="ui basic tiny button">
                <translate :translate-context="'Content/Moderation/Button.Label'">Remove filter</translate>
              </button>
            </div>
          </div>
    
          <section v-if="isLoadingAlbums" class="ui vertical stripe segment">
    
            <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    
          </section>
          <section v-else-if="albums && albums.length > 0" class="ui vertical stripe segment">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <h2>
    
              <translate :translate-context="'Content/Artist/Title'">Albums by this artist</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </h2>
    
            <div class="ui cards" >
              <album-card :mode="'rich'" :album="album" :key="album.id" v-for="album in albums"></album-card>
    
          </section>
          <section v-if="tracks.length > 0" class="ui vertical stripe segment">
    
              <translate :translate-context="'Content/Artist/Title'">Tracks by this artist</translate>
    
            </h2>
            <track-table :display-position="true" :tracks="tracks"></track-table>
    
          </section>
          <section class="ui vertical stripe segment">
    
              <translate :translate-context="'Content/Artist/Title'">User libraries</translate>
    
            <library-widget @loaded="libraries = $event" :url="'artists/' + id + '/libraries/'">
    
              <translate :translate-context="'Content/Artist/Paragraph'" slot="subtitle">This artist is present in the following libraries:</translate>
    
    import _ from "@/lodash"
    
    import axios from "axios"
    import logger from "@/logging"
    import backend from "@/audio/backend"
    import AlbumCard from "@/components/audio/album/Card"
    import RadioButton from "@/components/radios/Button"
    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'
    
        LibraryWidget,
        EmbedWizard,
        Modal
    
          isLoadingAlbums: true,
    
          totalTracks: 0,
          totalAlbums: 0,
    
          tracks: [],
          libraries: [],
          showEmbedModal: false
    
          var self = this
          this.isLoading = true
          logger.default.debug('Fetching artist "' + this.id + '"')
    
          axios.get("tracks/", { params: { artist: this.id, hidden: '' } }).then(response => {
    
            self.tracks = response.data.results
    
            self.totalTracks = response.data.count
    
          axios.get("artists/" + this.id + "/").then(response => {
    
            self.artist = response.data
            self.isLoading = false
    
            self.isLoadingAlbums = true
    
                params: { artist: self.id, ordering: "-release_date", hidden: '' }
    
              .then(response => {
                self.totalAlbums = response.data.count
                let parsed = JSON.parse(JSON.stringify(response.data.results))
                self.albums = parsed.map(album => {
                  return backend.Album.clean(album)
                })
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          return {
    
            title: this.$pgettext('Head/Artist/Title', "Artist")
    
        isPlayable() {
          return (
            this.artist.albums.filter(a => {
              return a.is_playable
            }).length > 0
          )
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        },
    
        wikipediaUrl() {
          return (
            "https://en.wikipedia.org/w/index.php?search=" +
            encodeURI(this.artist.name)
          )
    
            return "https://musicbrainz.org/artist/" + this.artist.mbid
    
          let tracks = []
          this.albums.forEach(album => {
            album.tracks.forEach(track => {
              tracks.push(track)
            })
          })
          return tracks
        },
    
        cover() {
          return this.artist.albums
            .filter(album => {
              return album.cover
            })
            .map(album => {
              return album.cover
            })[0]
    
    
        publicLibraries () {
          return this.libraries.filter(l => {
            return l.privacy_level === 'everyone'
          })
        },
    
          if (!this.cover || !this.cover.original) {
    
          return (
            "background-image: url(" +
            this.$store.getters["instance/absoluteUrl"](this.cover.original) +
            ")"
          )
    
        },
        contentFilter () {
          let self = this
          return this.$store.getters['moderation/artistFilters']().filter((e) => {
            return e.target.id === this.artist.id
          })[0]
    
          this.fetchData()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>