[web] Remove the lyrics store

web-src/src/App.vue

@@ -29,11 +29,9 @@ import NavbarBottom from '@/components/NavbarBottom.vue'
 import NavbarTop from '@/components/NavbarTop.vue'
 import ReconnectingWebSocket from 'reconnectingwebsocket'
 import configuration from '@/api/configuration'
-import library from '@/api/library'
 import services from '@/api/services'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useLibraryStore } from '@/stores/library'
-import { useLyricsStore } from '@/stores/lyrics'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useOutputsStore } from './stores/outputs'
 import { usePlayerStore } from '@/stores/player'
@@ -56,7 +54,6 @@ export default {
     return {
       configurationStore: useConfigurationStore(),
       libraryStore: useLibraryStore(),
-      lyricsStore: useLyricsStore(),
       notificationsStore: useNotificationsStore(),
       outputsStore: useOutputsStore(),
       playerStore: usePlayerStore(),
@@ -174,20 +171,19 @@ export default {
         const data = JSON.parse(response.data)
         const notify = new Set(data.notify || [])
         const handlers = [
-          { handler: this.updateLibrary, triggers: ['update', 'database'] },
+          { events: ['update', 'database'], handler: this.updateLibrary },
           {
-            handler: this.updatePlayer,
+            events: ['player', 'options', 'volume'],
-            triggers: ['player', 'options', 'volume']
+            handler: this.updatePlayer
           },
-          { handler: this.updateOutputs, triggers: ['outputs', 'volume'] },
+          { events: ['outputs', 'volume'], handler: this.updateOutputs },
-          { handler: this.updateQueue, triggers: ['queue'] },
+          { events: ['queue'], handler: this.updateQueue },
-          { handler: this.updateSpotify, triggers: ['spotify'] },
+          { events: ['spotify'], handler: this.updateSpotify },
-          { handler: this.updateLastfm, triggers: ['lastfm'] },
+          { events: ['lastfm'], handler: this.updateLastfm },
-          { handler: this.updateRemotes, triggers: ['pairing'] },
+          { events: ['pairing'], handler: this.updateRemotes }
-          { handler: this.updateLyrics, triggers: ['player', 'queue'] }
         ]
-        handlers.forEach(({ handler, triggers }) => {
+        handlers.forEach(({ handler, events }) => {
-          if (triggers.some((key) => notify.has(key))) {
+          if (events.some((key) => notify.has(key))) {
             handler.call(this)
           }
         })
@@ -222,16 +218,6 @@ export default {
     updateLibrary() {
       this.libraryStore.initialise()
     },
-    updateLyrics() {
-      const track = this.queueStore.current
-      if (track?.track_id) {
-        library.track(track.track_id).then((data) => {
-          this.lyricsStore.lyrics = data.lyrics
-        })
-      } else {
-        this.lyricsStore.$reset()
-      }
-    },
     updateOutputs() {
       this.outputsStore.initialise()
     },

web-src/src/api/player.js

@@ -21,8 +21,8 @@ export default {
   previous() {
     return api.put('./api/player/previous')
   },
-  repeat(mode) {
+  repeat(state) {
-    return api.put(`./api/player/repeat?state=${mode}`)
+    return api.put(`./api/player/repeat?state=${state}`)
   },
   seek(seekMs) {
     return api.put(`./api/player/seek?seek_ms=${seekMs}`)

web-src/src/api/queue.js

@@ -6,9 +6,6 @@ import { useQueueStore } from '@/stores/queue'
 const { t } = i18n.global
 
 export default {
-  state() {
-    return api.get('./api/queue')
-  },
   addUri(uris, next = false) {
     return this.addToQueue({ uris }, next)
   },
@@ -59,6 +56,9 @@ export default {
   remove(id) {
     return api.delete(`./api/queue/items/${id}`)
   },
+  state() {
+    return api.get('./api/queue')
+  },
   async saveToPlaylist(name) {
     const response = await api.post('./api/queue/save', null, {
       params: { name }

web-src/src/components/ControlPlayerLyrics.vue

@@ -1,8 +1,5 @@
 <template>
-  <button
+  <button :class="{ 'is-dark': playerStore.lyrics }" @click="toggle">
-    :class="{ 'is-dark': lyricsStore.active }"
-    @click="lyricsStore.toggle"
-  >
     <mdicon
       class="icon"
       :name="icon"
@@ -13,21 +10,26 @@
 </template>
 
 <script>
-import { useLyricsStore } from '@/stores/lyrics'
+import { usePlayerStore } from '@/stores/player'
 
 export default {
   name: 'ControlPlayerLyrics',
   setup() {
     return {
-      lyricsStore: useLyricsStore()
+      playerStore: usePlayerStore()
     }
   },
   computed: {
     icon() {
-      return this.lyricsStore.active
+      return this.playerStore.lyrics
         ? 'script-text-play'
         : 'script-text-outline'
     }
+  },
+  methods: {
+    toggle() {
+      this.playerStore.lyrics = !this.playerStore.lyrics
+    }
   }
 }
 </script>

web-src/src/components/LyricsPane.vue

@@ -31,13 +31,13 @@
 </template>
 
 <script>
-import { useLyricsStore } from '@/stores/lyrics'
 import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 
 export default {
   name: 'LyricsPane',
   setup() {
-    return { lyricsStore: useLyricsStore(), playerStore: usePlayerStore() }
+    return { playerStore: usePlayerStore(), queueStore: useQueueStore() }
   },
   data() {
     /*
@@ -54,7 +54,7 @@ export default {
   },
   computed: {
     lyrics() {
-      const raw = this.lyricsStore.content
+      const raw = this.playerStore.lyricsContent
       const parsed = []
       if (raw.length > 0) {
         // Parse the lyrics
@@ -74,7 +74,8 @@ export default {
         // Split the verses into words
         parsed.forEach((verse, index, lyrics) => {
           const unitDuration =
-            (lyrics[index + 1].time - verse.time || 3) / verse.text.length
+            ((lyrics[index + 1]?.time ?? verse.time + 3) - verse.time) /
+            verse.text.length
           let delay = 0
           verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
             const duration = text.length * unitDuration

web-src/src/pages/PageNowPlaying.vue

@@ -7,10 +7,10 @@
         :url="track.artwork_url"
         :caption="track.album"
         class="is-clickable is-big"
-        :class="{ 'is-masked': lyricsStore.active }"
+        :class="{ 'is-masked': playerStore.lyrics }"
         @click="openDetails(track)"
       />
-      <lyrics-pane v-if="lyricsStore.active" />
+      <lyrics-pane v-if="playerStore.lyrics" />
       <control-slider
         v-model:value="trackProgress"
         class="mt-5"
@@ -56,7 +56,6 @@ import ControlSlider from '@/components/ControlSlider.vue'
 import LyricsPane from '@/components/LyricsPane.vue'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import player from '@/api/player'
-import { useLyricsStore } from '@/stores/lyrics'
 import { usePlayerStore } from '@/stores/player'
 import { useQueueStore } from '@/stores/queue'
 import { useSettingsStore } from '@/stores/settings'
@@ -73,7 +72,6 @@ export default {
   },
   setup() {
     return {
-      lyricsStore: useLyricsStore(),
       playerStore: usePlayerStore(),
       queueStore: useQueueStore(),
       settingsStore: useSettingsStore()

web-src/src/stores/lyrics.js

@@ -1,13 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useLyricsStore = defineStore('LyricsStore', {
-  actions: {
-    toggle() {
-      this.active = !this.active
-    }
-  },
-  state: () => ({
-    content: [],
-    active: false
-  })
-})

web-src/src/stores/player.js

@@ -1,10 +1,18 @@
 import { defineStore } from 'pinia'
+import library from '@/api/library'
 import player from '@/api/player'
+import { useQueueStore } from '@/stores/queue'
 
 export const usePlayerStore = defineStore('PlayerStore', {
   actions: {
     async initialise() {
       this.$state = await player.state()
+      const queueStore = useQueueStore()
+      if (queueStore.current.track_id) {
+        library.track(queueStore.current.track_id).then((data) => {
+          this.lyricsContent = data.lyrics || ''
+        })
+      }
     }
   },
   getters: {
@@ -19,6 +27,8 @@ export const usePlayerStore = defineStore('PlayerStore', {
     item_id: 0,
     item_length_ms: 0,
     item_progress_ms: 0,
+    lyrics: false,
+    lyricsContent: '',
     repeat: 'off',
     shuffle: false,
     state: 'stop',