[web] Fix for unexpected calls to the API #1688

Lyrics feature doesn't mess anymore when the user is playing tracks from Spotify

web-src/src/App.vue

@@ -305,13 +305,14 @@ export default {
     },
 
     update_lyrics() {
-      let track = this.$store.state.queue.items.filter(
+      const track = this.$store.getters.now_playing
-        (e) => e.id == this.$store.state.player.item_id
+      if (track && track.track_id) {
-      )
+        webapi.library_track(track.track_id).then(({ data }) => {
-      if (track.length >= 1)
-        webapi.library_track(track[0].track_id).then(({ data }) => {
           this.$store.commit(types.UPDATE_LYRICS, data)
         })
+      } else {
+        this.$store.commit(types.UPDATE_LYRICS)
+      }
     },
 
     update_settings() {

web-src/src/components/PlayerButtonLyrics.vue

@@ -36,8 +36,7 @@ export default {
 
   methods: {
     toggle_lyrics() {
-      this.$store.state.lyrics.lyrics_pane =
+      this.$store.state.lyrics.pane = !this.$store.state.lyrics.pane
-        !this.$store.state.lyrics.lyrics_pane
     }
   }
 }

web-src/src/store/index.js

@@ -34,10 +34,8 @@ export default createStore({
         item_progress_ms: 0
       },
       lyrics: {
-        found: false,
+        pane: false,
-        lyrics_id: -1,
+        content: []
-        lyrics_pane: false,
-        lyrics: []
       },
       queue: {
         version: 0,
@@ -76,17 +74,9 @@ export default createStore({
   },
 
   getters: {
-    lyrics: (state) => {
+    lyrics: (state) => state.lyrics.content,
-      return state.lyrics.lyrics
-    },
 
-    lyrics_found: (state) => {
+    lyrics_pane: (state) => state.lyrics.pane,
-      return state.lyrics.found
-    },
-
-    lyrics_pane: (state) => {
-      return state.lyrics.lyrics_pane
-    },
 
     now_playing: (state) => {
       const item = state.queue.items.find(function (item) {
@@ -206,27 +196,28 @@ export default createStore({
     [types.UPDATE_QUEUE](state, queue) {
       state.queue = queue
     },
-    [types.UPDATE_LYRICS](state, lyrics) {
+    [types.UPDATE_LYRICS](state, track) {
       // Parse from .LRC or text format to synchronized lyrics
       function parse(lyrics) {
-        let lyricsObj = []
+        if (lyrics) {
-        let tempArr = lyrics.split('\n')
+          const lyricsObj = []
-        const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/
+          const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/
-
+          lyrics.split('\n').forEach((item) => {
-        tempArr.forEach((item) => {
+            const matches = regex.exec(item)
-          let matches = regex.exec(item)
+            if (matches !== null && matches[4].length) {
-          if (matches !== null && matches[4].length) {
+              const obj = [matches[4]]
-            let obj = [matches[4]]
+              if (matches[2] != null && matches[3] != null)
-            if (matches[2] != null && matches[3] != null)
+                obj.push(
-              obj.push(parseInt(matches[2], 10) * 60 + parseInt(matches[3], 10))
+                  parseInt(matches[2], 10) * 60 + parseInt(matches[3], 10)
-            lyricsObj.push(obj)
+                )
-          }
+              lyricsObj.push(obj)
-        })
+            }
-        return lyricsObj
+          })
+          return lyricsObj
+        }
+        return {}
       }
-      state.lyrics.lyrics = 'lyrics' in lyrics ? parse(lyrics.lyrics) : ''
+      state.lyrics.content = track ? parse(track.lyrics) : ''
-      if (!state.lyrics.found)
-        state.lyrics.found = state.lyrics.lyrics.length > 0
     },
     [types.UPDATE_LASTFM](state, lastfm) {
       state.lastfm = lastfm

web-src/src/webapi/index.js

@@ -424,9 +424,7 @@ export default {
   },
 
   library_track(trackId) {
-    if (trackId) { // Temporary fix
+    return axios.get(`./api/library/tracks/${trackId}`)
-      return axios.get(`./api/library/tracks/${trackId}`)
-    }
   },
 
   library_track_playlists(trackId) {