Skip to content
Snippets Groups Projects
Artist.vue 6.01 KiB
Newer Older
  • Learn to ignore specific revisions
  •   <div v-title="labels.title">
        <div v-if="isLoading" class="ui vertical segment">
    
          <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
        </div>
        <template v-if="artist">
    
    Bat's avatar
    Bat committed
          <div :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">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                    <translate
                      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>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              <play-button :is-playable="isPlayable" class="orange" :artist="artist.id">
    
                <translate>Play all albums</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              </play-button>
    
    
              <a :href="wikipediaUrl" target="_blank" class="ui button">
                <i class="wikipedia icon"></i>
    
                <translate>Search on Wikipedia</translate>
    
              <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
    
                <translate>View on MusicBrainz</translate>
    
          <div v-if="isLoadingAlbums" class="ui vertical stripe segment">
            <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
          </div>
    
          <div v-else-if="albums && albums.length > 0" class="ui vertical stripe segment">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <h2>
    
              <translate>Albums by this artist</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </h2>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <div class="ui stackable doubling three column grid">
    
              <div class="column" :key="album.id" v-for="album in albums">
    
                <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
              </div>
            </div>
          </div>
    
          <div v-if="tracks.length > 0" class="ui vertical stripe segment">
            <h2>
              <translate>Tracks by this artist</translate>
            </h2>
            <track-table :display-position="true" :tracks="tracks"></track-table>
          </div>
    
          <div class="ui vertical stripe segment">
            <h2>
              <translate>User libraries</translate>
            </h2>
            <library-widget :url="'artists/' + id + '/libraries/'">
              <translate slot="subtitle">This artist is present in the following libraries:</translate>
            </library-widget>
          </div>
    
    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'
    
    
    export default {
      props: ['id'],
      components: {
        AlbumCard,
        RadioButton,
    
          isLoadingAlbums: true,
    
        }
      },
      created () {
        this.fetchData()
      },
      methods: {
        fetchData () {
          var self = this
          this.isLoading = true
          logger.default.debug('Fetching artist "' + this.id + '"')
    
          axios.get('tracks/', {params: {artist: this.id}}).then((response) => {
            self.tracks = response.data.results
          })
          axios.get('artists/' + this.id + '/').then((response) => {
    
            self.artist = response.data
            self.isLoading = false
    
            self.isLoadingAlbums = true
    
            axios.get('albums/', {params: {artist: self.id, ordering: '-release_date'}}).then((response) => {
    
              let parsed = JSON.parse(JSON.stringify(response.data.results))
              self.albums = parsed.map((album) => {
    
                return backend.Album.clean(album)
              })
    
              self.isLoadingAlbums = false
            })
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        labels () {
          return {
            title: this.$gettext('Artist')
          }
        },
    
        totalAlbums () {
          let trackAlbums = _.uniqBy(this.tracks, (t) => {
            return t.album.id
          })
          return this.albums.length + trackAlbums.length
        },
    
          if (this.albums.length === 0) {
            return 0 + this.tracks.length
          }
    
          return this.albums.map((album) => {
            return album.tracks.length
          }).reduce((a, b) => {
            return a + b
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        isPlayable () {
          return this.artist.albums.filter((a) => {
            return a.is_playable
          }).length > 0
        },
    
          return 'https://en.wikipedia.org/w/index.php?search=' + encodeURI(this.artist.name)
    
          if (this.artist.mbid) {
            return 'https://musicbrainz.org/artist/' + this.artist.mbid
          }
    
        },
        allTracks () {
          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]
        },
        headerStyle () {
    
          if (!this.cover || !this.cover.original) {
    
          return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.cover.original) + ')'
    
        }
      },
      watch: {
        id () {
          this.fetchData()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>