Artist.vue 5.39 KB
Newer Older
1
<template>
2 3
  <div v-title="labels.title">
    <div v-if="isLoading" class="ui vertical segment">
4 5 6
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="artist">
Bat's avatar
Bat committed
7
      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="artist.name">
8 9 10 11 12
        <div class="segment-content">
          <h2 class="ui center aligned icon header">
            <i class="circular inverted users violet icon"></i>
            <div class="content">
              {{ artist.name }}
13
              <div class="sub header" v-if="albums">
Agate's avatar
Agate committed
14 15 16 17
                <translate
                  tag="div"
                  translate-plural="%{ count } tracks in %{ albumsCount } albums"
                  :translate-n="totalTracks"
18
                  :translate-params="{count: totalTracks, albumsCount: totalAlbums}">
Agate's avatar
Agate committed
19 20
                  %{ count } track in %{ albumsCount } albums
                </translate>
Bat's avatar
Bat committed
21
              </div>
22 23 24 25
            </div>
          </h2>
          <div class="ui hidden divider"></div>
          <radio-button type="artist" :object-id="artist.id"></radio-button>
Agate's avatar
Agate committed
26
          <play-button class="orange" :artist="artist.id">
27
            <translate>Play all albums</translate>
Agate's avatar
Agate committed
28
          </play-button>
29 30 31

          <a :href="wikipediaUrl" target="_blank" class="ui button">
            <i class="wikipedia icon"></i>
32
            <translate>Search on Wikipedia</translate>
33 34 35
          </a>
          <a :href="musicbrainzUrl" target="_blank" class="ui button">
            <i class="external icon"></i>
36
            <translate>View on MusicBrainz</translate>
37 38 39
          </a>
        </div>
      </div>
40 41 42
      <div v-if="isLoadingAlbums" class="ui vertical stripe segment">
        <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
      </div>
43
      <div v-else-if="albums && albums.length > 0" class="ui vertical stripe segment">
Agate's avatar
Agate committed
44
        <h2>
45
          <translate>Albums by this artist</translate>
Agate's avatar
Agate committed
46
        </h2>
Agate's avatar
Agate committed
47
        <div class="ui stackable doubling three column grid">
48
          <div class="column" :key="album.id" v-for="album in albums">
49 50 51 52
            <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
          </div>
        </div>
      </div>
53 54 55 56 57 58
      <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>
59 60 61 62 63
    </template>
  </div>
</template>

<script>
64
import _ from 'lodash'
Agate's avatar
Agate committed
65
import axios from 'axios'
66 67 68 69 70
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'
71
import TrackTable from '@/components/audio/track/Table'
72 73 74 75 76 77

export default {
  props: ['id'],
  components: {
    AlbumCard,
    RadioButton,
78 79
    PlayButton,
    TrackTable
80 81 82 83
  },
  data () {
    return {
      isLoading: true,
84
      isLoadingAlbums: true,
85
      artist: null,
86 87
      albums: null,
      tracks: []
88 89 90 91 92 93 94 95 96 97
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      var self = this
      this.isLoading = true
      logger.default.debug('Fetching artist "' + this.id + '"')
98 99 100 101
      axios.get('tracks/', {params: {artist: this.id}}).then((response) => {
        self.tracks = response.data.results
      })
      axios.get('artists/' + this.id + '/').then((response) => {
102 103
        self.artist = response.data
        self.isLoading = false
104
        self.isLoadingAlbums = true
105
        axios.get('albums/', {params: {artist: self.id, ordering: '-release_date'}}).then((response) => {
106 107
          let parsed = JSON.parse(JSON.stringify(response.data.results))
          self.albums = parsed.map((album) => {
108 109 110 111 112
            return backend.Album.clean(album)
          })

          self.isLoadingAlbums = false
        })
113 114 115 116
      })
    }
  },
  computed: {
Agate's avatar
Agate committed
117 118 119 120 121
    labels () {
      return {
        title: this.$gettext('Artist')
      }
    },
122 123 124 125 126 127
    totalAlbums () {
      let trackAlbums = _.uniqBy(this.tracks, (t) => {
        return t.album.id
      })
      return this.albums.length + trackAlbums.length
    },
128
    totalTracks () {
129 130 131
      if (this.albums.length === 0) {
        return 0 + this.tracks.length
      }
132 133 134 135
      return this.albums.map((album) => {
        return album.tracks.length
      }).reduce((a, b) => {
        return a + b
136
      }) + this.tracks.length
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
    },
    wikipediaUrl () {
      return 'https://en.wikipedia.org/w/index.php?search=' + this.artist.name
    },
    musicbrainzUrl () {
      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 () {
161
      if (!this.cover || !this.cover.original) {
162 163
        return ''
      }
164
      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.cover.original) + ')'
165 166 167 168 169 170 171 172 173 174 175 176 177
    }
  },
  watch: {
    id () {
      this.fetchData()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>