Artist.vue 3.8 KB
Newer Older
1
2
<template>
  <div>
Bat's avatar
Bat committed
3
    <div v-if="isLoading" class="ui vertical segment" v-title="'Artist'">
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
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        <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">{{ totalTracks }} tracks in {{ albums.length }} albums</div>
            </div>
          </h2>
          <div class="ui hidden divider"></div>
          <radio-button type="artist" :object-id="artist.id"></radio-button>
          </button>
          <play-button class="orange" :tracks="allTracks">Play all albums</play-button>

          <a :href="wikipediaUrl" target="_blank" class="ui button">
            <i class="wikipedia icon"></i>
            Search on wikipedia
          </a>
          <a :href="musicbrainzUrl" target="_blank" class="ui button">
            <i class="external icon"></i>
            View on MusicBrainz
          </a>
        </div>
      </div>
      <div class="ui vertical stripe segment">
        <h2>Albums by this artist</h2>
Eliot Berriot's avatar
Eliot Berriot committed
33
        <div class="ui stackable doubling three column grid">
34
          <div class="column" :key="album.id" v-for="album in sortedAlbums">
35
36
37
38
39
40
41
42
43
            <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
44
import _ from 'lodash'
Eliot Berriot's avatar
Eliot Berriot committed
45
import axios from 'axios'
46
47
48
49
50
51
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'

Eliot Berriot's avatar
Eliot Berriot committed
52
const FETCH_URL = 'artists/'
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

export default {
  props: ['id'],
  components: {
    AlbumCard,
    RadioButton,
    PlayButton
  },
  data () {
    return {
      isLoading: true,
      artist: null,
      albums: null
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      var self = this
      this.isLoading = true
      let url = FETCH_URL + this.id + '/'
      logger.default.debug('Fetching artist "' + this.id + '"')
Eliot Berriot's avatar
Eliot Berriot committed
77
      axios.get(url).then((response) => {
78
79
80
81
82
83
84
85
86
        self.artist = response.data
        self.albums = JSON.parse(JSON.stringify(self.artist.albums)).map((album) => {
          return backend.Album.clean(album)
        })
        self.isLoading = false
      })
    }
  },
  computed: {
87
88
89
90
    sortedAlbums () {
      let a = this.albums || []
      return _.orderBy(a, ['release_date'], ['asc'])
    },
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
    totalTracks () {
      return this.albums.map((album) => {
        return album.tracks.length
      }).reduce((a, b) => {
        return a + b
      })
    },
    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 () {
      if (!this.cover) {
        return ''
      }
      return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
    }
  },
  watch: {
    id () {
      this.fetchData()
    }
  }
}
</script>

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