Track.vue 5.02 KB
Newer Older
1
2
<template>
  <div>
Bat's avatar
Bat committed
3
    <div v-if="isLoadingTrack" class="ui vertical segment" v-title="'Track'">
4
5
6
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="track">
Bat's avatar
Bat committed
7
      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="track.title">
8
9
10
11
12
13
14
        <div class="segment-content">
          <h2 class="ui center aligned icon header">
            <i class="circular inverted music orange icon"></i>
            <div class="content">
              {{ track.title }}
              <div class="sub header">
                From album
15
                <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
16
17
                  {{ track.album.title }}
                </router-link>
18
                by <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
19
20
21
22
23
24
25
26
                  {{ track.artist.name }}
                </router-link>
              </div>
            </div>
          </h2>

          <play-button class="orange" :track="track">Play</play-button>
          <track-favorite-icon :track="track" :button="true"></track-favorite-icon>
Eliot Berriot's avatar
Eliot Berriot committed
27
28
29
30
31
          <track-playlist-icon
            :button="true"
            v-if="$store.state.auth.authenticated"
            :track="track"></track-playlist-icon>

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
          <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>
          <a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui button">
            <i class="download icon"></i>
            Download
          </a>
        </div>
      </div>
      <div class="ui vertical stripe center aligned segment">
        <h2>Lyrics</h2>
        <div v-if="isLoadingLyrics" class="ui vertical segment">
          <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
        </div>
        <div v-if="lyrics" v-html="lyrics.content_rendered">
        </div>
        <template v-if="!isLoadingLyrics & !lyrics">
          <p>
            No lyrics available for this track.
          </p>
          <a class="ui button" target="_blank" :href="lyricsSearchUrl">
            <i class="search icon"></i>
            Search on lyrics.wikia.com
          </a>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
Eliot Berriot's avatar
Eliot Berriot committed
68
import axios from 'axios'
69
import url from '@/utils/url'
70
71
72
73
import logger from '@/logging'
import backend from '@/audio/backend'
import PlayButton from '@/components/audio/PlayButton'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
Eliot Berriot's avatar
Eliot Berriot committed
74
import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
75

Eliot Berriot's avatar
Eliot Berriot committed
76
const FETCH_URL = 'tracks/'
77
78
79
80
81

export default {
  props: ['id'],
  components: {
    PlayButton,
Eliot Berriot's avatar
Eliot Berriot committed
82
    TrackPlaylistIcon,
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
    TrackFavoriteIcon
  },
  data () {
    return {
      isLoadingTrack: true,
      isLoadingLyrics: true,
      track: null,
      lyrics: null
    }
  },
  created () {
    this.fetchData()
    this.fetchLyrics()
  },
  methods: {
    fetchData () {
      var self = this
      this.isLoadingTrack = true
      let url = FETCH_URL + this.id + '/'
      logger.default.debug('Fetching track "' + this.id + '"')
Eliot Berriot's avatar
Eliot Berriot committed
103
      axios.get(url).then((response) => {
104
105
106
107
108
109
110
111
112
        self.track = response.data
        self.isLoadingTrack = false
      })
    },
    fetchLyrics () {
      var self = this
      this.isLoadingLyrics = true
      let url = FETCH_URL + this.id + '/lyrics/'
      logger.default.debug('Fetching lyrics for track "' + this.id + '"')
Eliot Berriot's avatar
Eliot Berriot committed
113
      axios.get(url).then((response) => {
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
        self.lyrics = response.data
        self.isLoadingLyrics = false
      }, (response) => {
        console.error('No lyrics available')
        self.isLoadingLyrics = false
      })
    }
  },
  computed: {
    wikipediaUrl () {
      return 'https://en.wikipedia.org/w/index.php?search=' + this.track.title + ' ' + this.track.artist.name
    },
    musicbrainzUrl () {
      return 'https://musicbrainz.org/recording/' + this.track.mbid
    },
    downloadUrl () {
      if (this.track.files.length > 0) {
131
        let u = backend.absoluteUrl(this.track.files[0].path)
132
133
        if (this.$store.state.auth.authenticated) {
          u = url.updateQueryString(u, 'jwt', this.$store.state.auth.token)
134
135
        }
        return u
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
      }
    },
    lyricsSearchUrl () {
      let base = 'http://lyrics.wikia.com/wiki/Special:Search?query='
      let query = this.track.artist.name + ' ' + this.track.title
      return base + query
    },
    cover () {
      return null
    },
    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 lang="scss">

</style>