Commit 10efef52 authored by Agate's avatar Agate 💬

Fixed #18 Added lyrics

parent 82c94871
<template>
<div>
<div v-if="isLoading" class="ui vertical segment">
<div v-if="isLoadingTrack" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<template v-if="track">
......@@ -38,6 +38,23 @@
</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>
......@@ -60,22 +77,38 @@ export default {
},
data () {
return {
isLoading: true,
track: null
isLoadingTrack: true,
isLoadingLyrics: true,
track: null,
lyrics: null
}
},
created () {
this.fetchData()
this.fetchLyrics()
},
methods: {
fetchData () {
var self = this
this.isLoading = true
this.isLoadingTrack = true
let url = FETCH_URL + this.id + '/'
logger.default.debug('Fetching track "' + this.id + '"')
this.$http.get(url).then((response) => {
self.track = response.data
self.isLoading = false
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 + '"')
this.$http.get(url).then((response) => {
self.lyrics = response.data
self.isLoadingLyrics = false
}, (response) => {
console.error('No lyrics available')
self.isLoadingLyrics = false
})
}
},
......@@ -91,6 +124,11 @@ export default {
return backend.absoluteUrl(this.track.files[0].path)
}
},
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
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment