[web] Change to Pinia store

web-src/src/components/ListAlbums.vue

@@ -8,7 +8,10 @@
       />
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div v-if="show_artwork" class="media-left">
+      <div
+        v-if="settingsStore.show_cover_artwork_in_album_lists"
+        class="media-left"
+      >
         <cover-artwork
           :url="item.item.artwork_url"
           :artist="item.item.artist"
@@ -69,6 +72,7 @@
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -80,6 +84,10 @@ export default {
   },
   emits: ['play-count-changed', 'podcast-deleted'],
 
+  setup() {
+    return { settingsStore: useSettingsStore() }
+  },
+
   data() {
     return {
       rss_playlist_to_remove: {},
@@ -92,12 +100,6 @@ export default {
   computed: {
     media_kind_resolved() {
       return this.media_kind || this.selected_item.media_kind
-    },
-    show_artwork() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
     }
   },
 

web-src/src/components/ListAlbumsSpotify.vue

@@ -1,7 +1,10 @@
 <template>
   <template v-for="item in items" :key="item.id">
     <div class="media is-align-items-center" @click="open(item)">
-      <div v-if="show_artwork" class="media-left is-clickable">
+      <div
+        v-if="settingsStore.show_cover_artwork_in_album_lists"
+        class="media-left is-clickable"
+      >
         <cover-artwork
           :url="artwork_url(item)"
           :artist="item.artist"
@@ -41,23 +44,19 @@
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
+import { useSettingsStore } from '@/stores/settings'
 
 export default {
   name: 'ListAlbumsSpotify',
   components: { CoverArtwork, ModalDialogAlbumSpotify },
   props: { items: { required: true, type: Object } },
 
-  data() {
-    return { selected_item: {}, show_details_modal: false }
+  setup() {
+    return { settingsStore: useSettingsStore() }
   },
 
-  computed: {
-    show_artwork() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
-    }
+  data() {
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {

web-src/src/components/ListItemQueueItem.vue

@@ -14,7 +14,7 @@
       <h1
         class="title is-6"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next
         }"
         v-text="item.title"
@@ -22,18 +22,18 @@
       <h2
         class="subtitle is-7 has-text-weight-bold"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== state.item_id
+          'has-text-grey': is_next && item.id !== player.item_id
         }"
         v-text="item.artist"
       />
       <h2
         class="subtitle is-7"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== state.item_id
+          'has-text-grey': is_next && item.id !== player.item_id
         }"
         v-text="item.album"
       />
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -57,12 +58,18 @@ export default {
     show_only_next_items: Boolean
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     is_next() {
       return this.current_position < 0 || this.position >= this.current_position
     },
-    state() {
-      return this.$store.state.player
+    player() {
+      return this.playerStore
     }
   },
 

web-src/src/components/ListTracksSpotify.vue

@@ -26,7 +26,7 @@
         <h2 v-if="!item.is_playable" class="subtitle is-7">
           (<span v-text="$t('list.spotify.not-playable-track')" />
           <span
-            v-if="item.restrictions && item.restrictions.reason"
+            v-if="item.restrictions?.reason"
             v-text="
               $t('list.spotify.restriction-reason', {
                 reason: item.restrictions.reason

web-src/src/components/LyricsPane.vue

@@ -31,8 +31,16 @@
 </template>
 
 <script>
+import { useLyricsStore } from '@/stores/lyrics'
+import { usePlayerStore } from '@/stores/player'
+
 export default {
   name: 'LyricsPane',
+
+  setup() {
+    return { lyricsStore: useLyricsStore(), playerStore: usePlayerStore() }
+  },
+
   data() {
     /*
      * Non reactive. Used as a cache to speed up the finding of lyrics
@@ -46,14 +54,15 @@ export default {
       autoScrolling: true
     }
   },
+
   computed: {
     is_playing() {
-      return this.player.state === 'play'
+      return this.playerStore.state === 'play'
     },
     lyrics() {
-      const raw = this.$store.state.lyrics.content
+      const raw = this.lyricsStore.content
       const parsed = []
-      if (raw) {
+      if (raw.length > 0) {
         // Parse the lyrics
         const regex =
           /\[(?<minutes>\d+):(?<seconds>\d+)(?:\.(?<hundredths>\d+))?\] ?(?<text>.*)/u
@@ -82,14 +91,11 @@ export default {
       }
       return parsed
     },
-    player() {
-      return this.$store.state.player
-    },
     verse_index() {
       if (this.lyrics.length && this.lyrics[0].time) {
-        const currentTime = this.player.item_progress_ms / 1000,
+        const currentTime = this.playerStore.item_progress_ms / 1000,
           la = this.lyrics,
-          trackChanged = this.player.item_id !== this.lastItemId,
+          trackChanged = this.playerStore.item_id !== this.lastItemId,
           trackSeeked =
             this.lastIndex >= 0 &&
             this.lastIndex < la.length &&
@@ -149,10 +155,10 @@ export default {
   methods: {
     reset_scrolling() {
       // Scroll to the start of the lyrics in all cases
-      if (this.player.item_id !== this.lastItemId && this.$refs.lyrics) {
+      if (this.playerStore.item_id !== this.lastItemId && this.$refs.lyrics) {
         this.$refs.lyrics.scrollTo(0, 0)
       }
-      this.lastItemId = this.player.item_id
+      this.lastItemId = this.playerStore.item_id
       this.lastIndex = -1
     },
     scroll_to_verse() {

web-src/src/components/ModalDialogQueueItem.vue

@@ -136,6 +136,7 @@
 
 <script>
 import SpotifyWebApi from 'spotify-web-api-js'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -143,6 +144,10 @@ export default {
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       spotify_track: {}
@@ -151,9 +156,9 @@ export default {
 
   watch: {
     item() {
-      if (this.item && this.item.data_kind === 'spotify') {
+      if (this.item?.data_kind === 'spotify') {
         const spotifyApi = new SpotifyWebApi()
-        spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+        spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
         spotifyApi
           .getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
           .then((response) => {

web-src/src/components/ModalDialogRemotePairing.vue

@@ -53,6 +53,7 @@
 </template>
 
 <script>
+import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
@@ -60,6 +61,10 @@ export default {
   props: { show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return { remoteStore: useRemotesStore() }
+  },
+
   data() {
     return {
       pairing_req: { pin: '' }
@@ -68,7 +73,7 @@ export default {
 
   computed: {
     pairing() {
-      return this.$store.state.pairing
+      return this.remoteStore.pairing
     }
   },
 

web-src/src/components/ModalDialogTrack.vue

@@ -172,6 +172,7 @@
 
 <script>
 import SpotifyWebApi from 'spotify-web-api-js'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -179,6 +180,10 @@ export default {
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       spotify_track: {}
@@ -193,7 +198,7 @@ export default {
         this.item.media_kind !== 'podcast'
       ) {
         const spotifyApi = new SpotifyWebApi()
-        spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+        spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
         spotifyApi
           .getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
           .then((response) => {

web-src/src/components/ModalDialogUpdate.vue

@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ModalDialog from '@/components/ModalDialog.vue'
+import { useLibraryStore } from '@/stores/library'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -58,6 +59,13 @@ export default {
   props: { show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return {
+      libraryStore: useLibraryStore(),
+      servicesStore: useServicesStore()
+    }
+  },
+
   data() {
     return {
       rescan_metadata: false
@@ -66,23 +74,23 @@ export default {
 
   computed: {
     library() {
-      return this.$store.state.library
+      return this.libraryStore.$state
     },
 
     rss() {
-      return this.$store.state.rss_count
+      return this.libraryStore.rss
     },
 
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
 
     update_dialog_scan_kind: {
       get() {
-        return this.$store.state.update_dialog_scan_kind
+        return this.library.update_dialog_scan_kind
       },
       set(value) {
-        this.$store.commit(types.UPDATE_DIALOG_SCAN_KIND, value)
+        this.library.update_dialog_scan_kind = value
       }
     }
   },

web-src/src/components/NavbarBottom.vue

@@ -113,12 +113,12 @@
         class="is-expanded is-clipped is-size-7"
       >
         <div class="fd-is-text-clipped">
-          <strong v-text="now_playing.title" />
+          <strong v-text="current.title" />
           <br />
-          <span v-text="now_playing.artist" />
+          <span v-text="current.artist" />
           <span
-            v-if="now_playing.album"
-            v-text="$t('navigation.now-playing', { album: now_playing.album })"
+            v-if="current.album"
+            v-text="$t('navigation.now-playing', { album: current.album })"
           />
         </div>
       </navbar-item-link>
@@ -255,7 +255,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ControlSlider from '@/components/ControlSlider.vue'
 import NavbarItemLink from '@/components/NavbarItemLink.vue'
 import NavbarItemOutput from '@/components/NavbarItemOutput.vue'
@@ -270,6 +269,11 @@ import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
 import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
 import audio from '@/lib/Audio'
 import { mdiCancel } from '@mdi/js'
+import { useNotificationsStore } from '@/stores/notifications'
+import { useOutputsStore } from '@/stores/outputs'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 export default {
@@ -289,6 +293,16 @@ export default {
     PlayerButtonShuffle
   },
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore(),
+      outputsStore: useOutputsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       cursor: mdiCancel,
@@ -302,33 +316,30 @@ export default {
   },
 
   computed: {
-    config() {
-      return this.$store.state.config
-    },
     is_now_playing_page() {
       return this.$route.name === 'now-playing'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
     },
     outputs() {
-      return this.$store.state.outputs
+      return this.outputsStore.outputs
     },
     player() {
-      return this.$store.state.player
+      return this.playerStore
     },
     show_player_menu: {
       get() {
-        return this.$store.state.show_player_menu
+        return this.uiStore.show_player_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, value)
+        this.uiStore.show_player_menu = value
       }
     }
   },
 
   watch: {
-    '$store.state.player.volume'() {
+    'playerStore.volume'() {
       if (this.player.volume > 0) {
         this.old_volume = this.player.volume
       }
@@ -383,7 +394,7 @@ export default {
       })
       a.addEventListener('error', () => {
         this.closeAudio()
-        this.$store.dispatch('add_notification', {
+        this.notificationsStore.add({
           text: this.$t('navigation.stream-error'),
           type: 'danger'
         })

web-src/src/components/NavbarItemLink.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
+import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'NavbarItemLink',
@@ -13,6 +13,10 @@ export default {
     to: { required: true, type: Object }
   },
 
+  setup() {
+    return { uiStore: useUIStore() }
+  },
+
   computed: {
     href() {
       return this.$router.resolve(this.to).href
@@ -21,11 +25,11 @@ export default {
 
   methods: {
     open() {
-      if (this.$store.state.show_burger_menu) {
-        this.$store.commit(types.SHOW_BURGER_MENU, false)
+      if (this.uiStore.show_burger_menu) {
+        this.uiStore.show_burger_menu = false
       }
-      if (this.$store.state.show_player_menu) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, false)
+      if (this.uiStore.show_player_menu) {
+        this.uiStore.show_player_menu = false
       }
       this.$router.push(this.to)
     }

web-src/src/components/NavbarTop.vue

@@ -6,25 +6,46 @@
     aria-label="main navigation"
   >
     <div class="navbar-brand">
-      <navbar-item-link v-if="show_playlists" :to="{ name: 'playlists' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_playlists"
+        :to="{ name: 'playlists' }"
+      >
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_music" :to="{ name: 'music' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_music"
+        :to="{ name: 'music' }"
+      >
         <mdicon class="icon" name="music" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_podcasts" :to="{ name: 'podcasts' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_podcasts"
+        :to="{ name: 'podcasts' }"
+      >
         <mdicon class="icon" name="microphone" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_audiobooks" :to="{ name: 'audiobooks' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_audiobooks"
+        :to="{ name: 'audiobooks' }"
+      >
         <mdicon class="icon" name="book-open-variant" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_radio" :to="{ name: 'radio' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_radio"
+        :to="{ name: 'radio' }"
+      >
         <mdicon class="icon" name="radio" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_files" :to="{ name: 'files' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_files"
+        :to="{ name: 'files' }"
+      >
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_search" :to="{ name: search_name }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_search"
+        :to="{ name: searchStore.search_source }"
+      >
         <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
@@ -89,7 +110,7 @@
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ name: search_name }">
+            <navbar-item-link :to="{ name: searchStore.search_source }">
               <mdicon class="icon" name="magnify" size="16" />
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
@@ -118,13 +139,25 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import NavbarItemLink from '@/components/NavbarItemLink.vue'
+import { useSearchStore } from '@/stores/search'
+import { useServicesStore } from '@/stores/services'
+import { useSettingsStore } from '@/stores/settings'
+import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'NavbarTop',
   components: { NavbarItemLink },
 
+  setup() {
+    return {
+      searchStore: useSearchStore(),
+      servicesStore: useServicesStore(),
+      settingsStore: useSettingsStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       show_settings_menu: false
@@ -132,71 +165,27 @@ export default {
   },
 
   computed: {
-    search_name: {
-      get() {
-        return this.$store.state.search_source
-      }
-    },
-    show_audiobooks() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_audiobooks'
-      ).value
-    },
     show_burger_menu: {
       get() {
-        return this.$store.state.show_burger_menu
+        return this.uiStore.show_burger_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_BURGER_MENU, value)
+        this.uiStore.show_burger_menu = value
       }
     },
-    show_files() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_files')
-        .value
-    },
-    show_music() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_music')
-        .value
-    },
-    show_player_menu() {
-      return this.$store.state.show_player_menu
-    },
-    show_playlists() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_playlists'
-      ).value
-    },
-    show_podcasts() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_podcasts'
-      ).value
-    },
-    show_radio() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_radio')
-        .value
-    },
-    show_search() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_search'
-      ).value
-    },
     show_update_dialog: {
       get() {
-        return this.$store.state.show_update_dialog
+        return this.uiStore.show_update_dialog
       },
       set(value) {
-        this.$store.commit(types.SHOW_UPDATE_DIALOG, value)
+        this.uiStore.show_update_dialog = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
     zindex() {
-      if (this.show_player_menu) {
+      if (this.uiStore.show_player_menu) {
         return 'z-index: 21'
       }
       return ''

web-src/src/components/NotificationList.vue

@@ -17,18 +17,26 @@
 </template>
 
 <script>
+import { useNotificationsStore } from '@/stores/notifications'
+
 export default {
   name: 'NotificationList',
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore()
+    }
+  },
+
   computed: {
     notifications() {
-      return this.$store.state.notifications.list
+      return this.notificationsStore.list
     }
   },
 
   methods: {
     remove(notification) {
-      this.$store.dispatch('delete_notification', notification)
+      this.notificationsStore.remove(notification)
     }
   }
 }

web-src/src/components/PlayerButtonConsume.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -18,9 +19,15 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     is_consume() {
-      return this.$store.state.player.consume
+      return this.playerStore.consume
     }
   },
 

web-src/src/components/PlayerButtonLyrics.vue

@@ -10,24 +10,32 @@
 </template>
 
 <script>
+import { useLyricsStore } from '@/stores/lyrics'
+
 export default {
   name: 'PlayerButtonLyrics',
   props: {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      lyricsStore: useLyricsStore()
+    }
+  },
+
   computed: {
     icon_name() {
       return this.is_active ? 'script-text-play' : 'script-text-outline'
     },
     is_active() {
-      return this.$store.state.lyrics.pane
+      return this.lyricsStore.pane
     }
   },
 
   methods: {
     toggle_lyrics() {
-      this.$store.state.lyrics.pane = !this.$store.state.lyrics.pane
+      this.lyricsStore.pane = !this.lyricsStore.pane
     }
   }
 }

web-src/src/components/PlayerButtonNext.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -19,7 +20,7 @@ export default {
 
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return useQueueStore()?.count <= 0
     }
   },
 

web-src/src/components/PlayerButtonPlayPause.vue

@@ -9,6 +9,9 @@
 </template>
 
 <script>
+import { useNotificationsStore } from '@/stores/notifications'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,9 +21,17 @@ export default {
     show_disabled_message: Boolean
   },
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return this.queueStore?.count <= 0
     },
     icon_name() {
       if (!this.is_playing) {
@@ -31,13 +42,11 @@ export default {
       return 'stop'
     },
     is_pause_allowed() {
-      return (
-        this.$store.getters.now_playing &&
-        this.$store.getters.now_playing.data_kind !== 'pipe'
-      )
+      const { current } = this.queueStore
+      return current && current.data_kind !== 'pipe'
     },
     is_playing() {
-      return this.$store.state.player.state === 'play'
+      return this.playerStore.state === 'play'
     }
   },
 
@@ -45,7 +54,7 @@ export default {
     toggle_play_pause() {
       if (this.disabled) {
         if (this.show_disabled_message) {
-          this.$store.dispatch('add_notification', {
+          this.notificationsStore.add({
             text: this.$t('server.empty-queue'),
             timeout: 2000,
             topic: 'connection',
@@ -54,7 +63,6 @@ export default {
         }
         return
       }
-
       if (this.is_playing && this.is_pause_allowed) {
         webapi.player_pause()
       } else if (this.is_playing && !this.is_pause_allowed) {

web-src/src/components/PlayerButtonPrevious.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -17,9 +18,15 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return this.queueStore.count <= 0
     }
   },
 
@@ -28,7 +35,6 @@ export default {
       if (this.disabled) {
         return
       }
-
       webapi.player_previous()
     }
   }

web-src/src/components/PlayerButtonRepeat.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -18,6 +19,12 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     icon_name() {
       if (this.is_repeat_all) {
@@ -28,13 +35,13 @@ export default {
       return 'repeat-off'
     },
     is_repeat_all() {
-      return this.$store.state.player.repeat === 'all'
+      return this.playerStore.repeat === 'all'
     },
     is_repeat_off() {
       return !this.is_repeat_all && !this.is_repeat_single
     },
     is_repeat_single() {
-      return this.$store.state.player.repeat === 'single'
+      return this.playerStore.repeat === 'single'
     }
   },
 

web-src/src/components/PlayerButtonSeekBack.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,23 +20,32 @@ export default {
     seek_ms: { required: true, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
       return (
-        !this.$store.state.queue ||
-        this.$store.state.queue.count <= 0 ||
+        this.queueStore?.count <= 0 ||
         this.is_stopped ||
-        this.now_playing.data_kind === 'pipe'
+        this.current.data_kind === 'pipe'
       )
     },
     is_stopped() {
-      return this.$store.state.player.state === 'stop'
+      return this.player.state === 'stop'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
+    },
+    player() {
+      return this.playerStore
     },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.now_playing.media_kind)
+      return ['podcast', 'audiobook'].includes(this.current.media_kind)
     }
   },
 

web-src/src/components/PlayerButtonSeekForward.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,23 +20,32 @@ export default {
     seek_ms: { required: true, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
       return (
-        !this.$store.state.queue ||
-        this.$store.state.queue.count <= 0 ||
+        this.queueStore?.count <= 0 ||
         this.is_stopped ||
-        this.now_playing.data_kind === 'pipe'
+        this.current.data_kind === 'pipe'
       )
     },
     is_stopped() {
-      return this.$store.state.player.state === 'stop'
+      return this.player.state === 'stop'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
+    },
+    player() {
+      return this.playerStore
     },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.now_playing.media_kind)
+      return ['podcast', 'audiobook'].includes(this.current.media_kind)
     }
   },
 

web-src/src/components/PlayerButtonShuffle.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -19,6 +20,12 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     icon_name() {
       if (this.is_shuffle) {
@@ -27,7 +34,7 @@ export default {
       return 'shuffle-disabled'
     },
     is_shuffle() {
-      return this.$store.state.player.shuffle
+      return this.playerStore.shuffle
     }
   },
 

web-src/src/components/SettingsCheckbox.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -31,6 +32,12 @@ export default {
     name: { required: true, type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -55,7 +62,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      const setting = this.$store.getters.setting(this.category, this.name)
+      const setting = this.settingsStore.setting(this.category, this.name)
       if (!setting) {
         return {
           category: this.category,
@@ -84,7 +91,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsIntfield.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -39,6 +40,12 @@ export default {
     placeholder: { default: '', type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -63,7 +70,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      return this.$store.getters.setting(this.category, this.name)
+      return this.settingsStore.setting(this.category, this.name)
     }
   },
 
@@ -95,7 +102,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsTextfield.vue

@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -38,6 +39,12 @@ export default {
     placeholder: { default: '', type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -62,7 +69,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      return this.$store.getters.setting(this.category, this.name)
+      return this.settingsStore.setting(this.category, this.name)
     }
   },
 
@@ -96,7 +103,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/TabsMusic.vue

@@ -113,12 +113,18 @@
 </template>
 
 <script>
+import { useServicesStore } from '@/stores/services'
+
 export default {
   name: 'TabsMusic',
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   computed: {
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }

web-src/src/components/TabsSearch.vue

@@ -34,13 +34,21 @@
 </template>
 
 <script>
+import { useServicesStore } from '@/stores/services'
+
 export default {
   name: 'TabsSearch',
   emits: ['search-library', 'search-spotify'],
 
+  setup() {
+    return {
+      servicesStore: useServicesStore()
+    }
+  },
+
   computed: {
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }