Album.vue 2.96 KB
Newer Older
1
2
<template>
  <div>
Bat's avatar
Bat committed
3
    <div v-if="isLoading" class="ui vertical segment" v-title="'Album'">
4
5
6
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="album">
Bat's avatar
Bat committed
7
      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
8
9
10
11
12
13
14
        <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 class="sub header">
                Album containing {{ album.tracks.length }} tracks,
15
                by <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
                  {{ album.artist.name }}
                </router-link>
              </div>
            </div>
          </h2>
          <div class="ui hidden divider"></div>
          </button>
          <play-button class="orange" :tracks="album.tracks">Play all</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>Tracks</h2>
37
        <track-table v-if="album" :display-position="true" :tracks="album.tracks"></track-table>
38
39
40
41
42
43
      </div>
    </template>
  </div>
</template>

<script>
Eliot Berriot's avatar
Eliot Berriot committed
44
import axios from 'axios'
45
46
47
48
49
import logger from '@/logging'
import backend from '@/audio/backend'
import PlayButton from '@/components/audio/PlayButton'
import TrackTable from '@/components/audio/track/Table'

Eliot Berriot's avatar
Eliot Berriot committed
50
const FETCH_URL = 'albums/'
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

export default {
  props: ['id'],
  components: {
    PlayButton,
    TrackTable
  },
  data () {
    return {
      isLoading: true,
      album: null
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      var self = this
      this.isLoading = true
      let url = FETCH_URL + this.id + '/'
      logger.default.debug('Fetching album "' + this.id + '"')
Eliot Berriot's avatar
Eliot Berriot committed
73
      axios.get(url).then((response) => {
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
        self.album = backend.Album.clean(response.data)
        self.isLoading = false
      })
    }
  },
  computed: {
    wikipediaUrl () {
      return 'https://en.wikipedia.org/w/index.php?search=' + this.album.title + ' ' + this.album.artist.name
    },
    musicbrainzUrl () {
      return 'https://musicbrainz.org/release/' + this.album.mbid
    },
    headerStyle () {
      if (!this.album.cover) {
        return ''
      }
      return 'background-image: url(' + backend.absoluteUrl(this.album.cover) + ')'
    }
  },
  watch: {
    id () {
      this.fetchData()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>