Update:Remove call to server for settings filter/sort/playback rate

components/app/AudioPlayerContainer.vue

@@ -273,7 +273,7 @@ export default {
     this.$eventBus.$on('pause-item', this.pauseItem)
     this.$eventBus.$on('close-stream', this.closeStreamOnly)
     this.$eventBus.$on('cast-local-item', this.castLocalItem)
-    this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
+    this.$eventBus.$on('user-settings', this.settingsUpdated)
   },
   beforeDestroy() {
     if (this.onLocalMediaProgressUpdateListener) this.onLocalMediaProgressUpdateListener.remove()
@@ -286,7 +286,7 @@ export default {
     this.$eventBus.$off('pause-item', this.pauseItem)
     this.$eventBus.$off('close-stream', this.closeStreamOnly)
     this.$eventBus.$off('cast-local-item', this.castLocalItem)
-    this.$store.commit('user/removeSettingsListener', 'streamContainer')
+    this.$eventBus.$off('user-settings', this.settingsUpdated)
   }
 }
 </script>

components/bookshelf/LazyBookshelf.vue

@@ -453,7 +453,7 @@ export default {
       }
 
       this.$eventBus.$on('library-changed', this.libraryChanged)
-      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
+      this.$eventBus.$on('user-settings', this.settingsUpdated)
 
       this.$socket.$on('item_updated', this.libraryItemUpdated)
       this.$socket.$on('item_added', this.libraryItemAdded)
@@ -468,7 +468,7 @@ export default {
       }
 
       this.$eventBus.$off('library-changed', this.libraryChanged)
-      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
+      this.$eventBus.$off('user-settings', this.settingsUpdated)
 
       this.$socket.$off('item_updated', this.libraryItemUpdated)
       this.$socket.$off('item_added', this.libraryItemAdded)

components/home/BookshelfToolbar.vue

@@ -87,8 +87,7 @@ export default {
       this.saveSettings()
     },
     saveSettings() {
-      this.$store.commit('user/setSettings', this.settings) // Immediate update
-      this.$store.dispatch('user/updateUserSettings', this.settings) // TODO: No need to update settings on server...
+      this.$store.dispatch('user/updateUserSettings', this.settings)
     },
     async init() {
       this.bookshelfListView = await this.$localStore.getBookshelfListView()
@@ -111,11 +110,11 @@ export default {
   mounted() {
     this.init()
     this.$eventBus.$on('bookshelf-total-entities', this.setTotalEntities)
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+    this.$eventBus.$on('user-settings', this.settingsUpdated)
   },
   beforeDestroy() {
     this.$eventBus.$off('bookshelf-total-entities', this.setTotalEntities)
-    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+    this.$eventBus.$off('user-settings', this.settingsUpdated)
   }
 }
 </script>

ios/App/Podfile

@@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
   pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 

layouts/default.vue

@@ -76,15 +76,12 @@ export default {
       }
     },
     async loadSavedSettings() {
-      var userSavedServerSettings = await this.$localStore.getServerSettings()
+      const userSavedServerSettings = await this.$localStore.getServerSettings()
       if (userSavedServerSettings) {
         this.$store.commit('setServerSettings', userSavedServerSettings)
       }
 
-      var userSavedSettings = await this.$localStore.getUserSettings()
-      if (userSavedSettings) {
-        this.$store.commit('user/setSettings', userSavedSettings)
-      }
+      await this.$store.dispatch('user/loadUserSettings')
     },
     async attemptConnection() {
       console.warn('[default] attemptConnection')

plugins/init.client.js

@@ -5,8 +5,6 @@ import { StatusBar, Style } from '@capacitor/status-bar';
 import { formatDistance, format, addDays, isDate } from 'date-fns'
 import { Capacitor } from '@capacitor/core';
 
-Vue.prototype.$eventBus = new Vue()
-
 if (Capacitor.getPlatform() != 'web') {
   const setStatusBarStyleDark = async () => {
     await StatusBar.setStyle({ style: Style.Dark })
@@ -206,7 +204,9 @@ Vue.prototype.$setOrientationLock = (orientationLockSetting) => {
   }
 }
 
-export default ({ store, app }) => {
+export default ({ store, app }, inject) => {
+  inject('eventBus', new Vue())
+
   // iOS Only
   //  backButton event does not work with iOS swipe navigation so use this workaround
   if (app.router && Capacitor.getPlatform() === 'ios') {

plugins/localStore.js

@@ -15,7 +15,7 @@ class LocalStorage {
 
   async getUserSettings() {
     try {
-      var settingsObj = await Storage.get({ key: 'userSettings' }) || {}
+      const settingsObj = await Storage.get({ key: 'userSettings' }) || {}
       return settingsObj.value ? JSON.parse(settingsObj.value) : null
     } catch (error) {
       console.error('[LocalStorage] Failed to get user settings', error)

store/user.js

@@ -5,13 +5,8 @@ export const state = () => ({
     mobileOrderBy: 'addedAt',
     mobileOrderDesc: true,
     mobileFilterBy: 'all',
-    orderBy: 'book.title',
-    orderDesc: false,
-    filterBy: 'all',
-    playbackRate: 1,
-    bookshelfCoverSize: 120
-  },
-  settingsListeners: []
+    playbackRate: 1
+  }
 })
 
 export const getters = {
@@ -54,7 +49,7 @@ export const getters = {
 export const actions = {
   // When changing libraries make sure sort and filter is still valid
   checkUpdateLibrarySortFilter({ state, dispatch, commit }, mediaType) {
-    var settingsUpdate = {}
+    const settingsUpdate = {}
     if (mediaType == 'podcast') {
       if (state.settings.mobileOrderBy == 'media.metadata.authorName' || state.settings.mobileOrderBy == 'media.metadata.authorNameLF') {
         settingsUpdate.mobileOrderBy = 'media.metadata.author'
@@ -65,10 +60,10 @@ export const actions = {
       if (state.settings.mobileOrderBy == 'media.metadata.publishedYear') {
         settingsUpdate.mobileOrderBy = 'media.metadata.title'
       }
-      var invalidFilters = ['series', 'authors', 'narrators', 'languages', 'progress', 'issues']
-      var filterByFirstPart = (state.settings.mobileFilterBy || '').split('.').shift()
+      const invalidFilters = ['series', 'authors', 'narrators', 'languages', 'progress', 'issues']
+      const filterByFirstPart = (state.settings.mobileFilterBy || '').split('.').shift()
       if (invalidFilters.includes(filterByFirstPart)) {
-        settingsUpdate.filterBy = 'all'
+        settingsUpdate.mobileFilterBy = 'all'
       }
     } else {
       if (state.settings.mobileOrderBy == 'media.metadata.author') {
@@ -83,24 +78,34 @@ export const actions = {
     }
   },
   async updateUserSettings({ state, commit }, payload) {
-    if (state.serverConnectionConfig) {
-      var updatePayload = {
-        ...payload
+    if (!payload) return false
+
+    let hasChanges = false
+    const existingSettings = { ...state.settings }
+    for (const key in existingSettings) {
+      if (payload[key] !== undefined && existingSettings[key] !== payload[key]) {
+        hasChanges = true
+        existingSettings[key] = payload[key]
       }
-      return this.$axios.$patch('/api/me/settings', updatePayload).then((result) => {
-        if (result.success) {
-          commit('setSettings', result.settings)
-          return true
-        } else {
-          return false
     }
-      }).catch((error) => {
-        console.error('Failed to update settings', error)
-        return false
-      })
-    } else {
-      console.log('Update settings without server')
-      commit('setSettings', payload)
+    if (hasChanges) {
+      await this.$localStore.setUserSettings(existingSettings)
+      commit('setSettings', existingSettings)
+      this.$eventBus.$emit('user-settings', state.settings)
+    }
+  },
+  async loadUserSettings({ state, commit }) {
+    const userSettingsFromLocal = await this.$localStore.getUserSettings()
+
+    if (userSettingsFromLocal) {
+      const userSettings = { ...state.settings }
+      for (const key in userSettings) {
+        if (userSettingsFromLocal[key] !== undefined) {
+          userSettings[key] = userSettingsFromLocal[key]
+        }
+      }
+      commit('setSettings', userSettings)
+      this.$eventBus.$emit('user-settings', state.settings)
     }
   }
 }
@@ -131,30 +136,6 @@ export const mutations = {
   },
   setSettings(state, settings) {
     if (!settings) return
-
-    var hasChanges = false
-    for (const key in settings) {
-      if (state.settings[key] !== settings[key]) {
-        if (key === 'mobileOrderBy' && settings[key] === 'recent') {
-          settings[key] = 'addedAt'
-        }
-        hasChanges = true
-        state.settings[key] = settings[key]
-      }
-    }
-    if (hasChanges) {
-      this.$localStore.setUserSettings({ ...state.settings })
-      state.settingsListeners.forEach((listener) => {
-        listener.meth(state.settings)
-      })
-    }
-  },
-  addSettingsListener(state, listener) {
-    var index = state.settingsListeners.findIndex(l => l.id === listener.id)
-    if (index >= 0) state.settingsListeners.splice(index, 1, listener)
-    else state.settingsListeners.push(listener)
-  },
-  removeSettingsListener(state, listenerId) {
-    state.settingsListeners = state.settingsListeners.filter(l => l.id !== listenerId)
+    state.settings = settings
   }
 }