Fixed #18 Added lyrics

src/components/browse/Track.vue

 <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
     },