Add settings page with adjustable jump forward/backward settings

android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt

@@ -10,7 +10,7 @@ class DbManager {
   val tag = "DbManager"
 
   fun getDeviceData(): DeviceData {
-    return Paper.book("device").read("data") ?: DeviceData(mutableListOf(), null, null)
+    return Paper.book("device").read("data") ?: DeviceData(mutableListOf(), null, null, DeviceSettings.default())
   }
   fun saveDeviceData(deviceData:DeviceData) {
     Paper.book("device").write("data", deviceData)

android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt

@@ -16,10 +16,24 @@ data class ServerConnectionConfig(
   var customHeaders:Map<String, String>?
 )
 
+data class DeviceSettings(
+  var disableAutoRewind:Boolean,
+  var jumpBackwardsTime:Int,
+  var jumpForwardTime:Int
+) {
+  companion object {
+    // Static method to get default device settings
+    fun default():DeviceSettings {
+      return DeviceSettings(false, 10, 10)
+    }
+  }
+}
+
 data class DeviceData(
   var serverConnectionConfigs:MutableList<ServerConnectionConfig>,
   var lastServerConnectionConfigId:String?,
-  var currentLocalPlaybackSession:PlaybackSession? // Stored to open up where left off for local media
+  var currentLocalPlaybackSession:PlaybackSession?, // Stored to open up where left off for local media
+  var deviceSettings:DeviceSettings?
 ) {
   @JsonIgnore
   fun getLastServerConnectionConfig():ServerConnectionConfig? {

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDatabase.kt

@@ -112,7 +112,6 @@ class AbsDatabase : Plugin() {
   fun setCurrentServerConnectionConfig(call:PluginCall) {
     Log.d(tag, "setCurrentServerConnectionConfig ${call.data}")
     val serverConfigPayload = jacksonMapper.readValue<ServerConnConfigPayload>(call.data.toString())
-    Log.d(tag, "[TEST] Check custom headers ${serverConfigPayload.customHeaders}")
     var serverConnectionConfig = DeviceManager.deviceData.serverConnectionConfigs.find { it.id == serverConfigPayload.id }
 
     val userId =  serverConfigPayload.userId
@@ -397,4 +396,15 @@ class AbsDatabase : Plugin() {
       call.resolve()
     }
   }
+
+  @PluginMethod
+  fun updateDeviceSettings(call:PluginCall) { // Returns device data
+    Log.d(tag, "updateDeviceSettings ${call.data}")
+    val newDeviceSettings = jacksonMapper.readValue<DeviceSettings>(call.data.toString())
+    GlobalScope.launch(Dispatchers.IO) {
+      DeviceManager.deviceData.deviceSettings = newDeviceSettings
+      DeviceManager.dbManager.saveDeviceData(DeviceManager.deviceData)
+      call.resolve(JSObject(jacksonMapper.writeValueAsString(DeviceManager.deviceData)))
+    }
+  }
 }

components/app/AudioPlayer.vue

@@ -63,12 +63,12 @@
       <div id="playerControls" class="absolute right-0 bottom-0 py-2">
         <div class="flex items-center justify-center">
           <span v-show="showFullscreen" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
-          <span class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="backward10">replay_10</span>
+          <span class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4" :class="{ 'animate-spin': seekLoading, 'bg-accent': !isLocalPlayMethod, 'bg-success': isLocalPlayMethod }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <span v-if="!isLoading" class="material-icons">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
-          <span class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="forward10">forward_10</span>
+          <span class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
           <span v-show="showFullscreen" class="material-icons next-icon text-white cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
       </div>
@@ -159,6 +159,18 @@ export default {
       })
       return items
     },
+    jumpForwardIcon() {
+      return this.$store.getters['globals/getJumpForwardIcon'](this.jumpForwardTime)
+    },
+    jumpBackwardsIcon() {
+      return this.$store.getters['globals/getJumpBackwardsIcon'](this.jumpBackwardsTime)
+    },
+    jumpForwardTime() {
+      return this.$store.getters['getJumpForwardTime']
+    },
+    jumpBackwardsTime() {
+      return this.$store.getters['getJumpBackwardsTime']
+    },
     bookCoverAspectRatio() {
       return this.$store.getters['getBookCoverAspectRatio']
     },
@@ -342,13 +354,13 @@ export default {
     restart() {
       this.seek(0)
     },
-    backward10() {
+    jumpBackwards() {
       if (this.isLoading) return
-      AbsAudioPlayer.seekBackward({ value: 10 })
+      AbsAudioPlayer.seekBackward({ value: this.jumpBackwardsTime })
     },
-    forward10() {
+    jumpForward() {
       if (this.isLoading) return
-      AbsAudioPlayer.seekForward({ value: 10 })
+      AbsAudioPlayer.seekForward({ value: this.jumpForwardTime })
     },
     setStreamReady() {
       this.readyTrackWidth = this.trackWidth

components/app/SideDrawer.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="absolute bottom-0 left-0 w-full py-6 px-6 text-gray-300">
         <div v-if="serverConnectionConfig" class="mb-4 flex justify-center">
-          <p class="text-xs" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{serverSettings.version}})</p>
+          <p class="text-xs" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})</p>
         </div>
         <div class="flex items-center">
           <p class="text-xs">{{ $config.version }}</p>
@@ -108,11 +108,11 @@ export default {
           text: 'Local Media',
           to: '/localMedia/folders'
         })
-        // items.push({
-        //   icon: 'settings',
-        //   text: 'Settings',
-        //   to: '/settings'
-        // })
+        items.push({
+          icon: 'settings',
+          text: 'Settings',
+          to: '/settings'
+        })
       }
       return items
     },

components/connection/ServerConnectForm.vue

@@ -322,8 +322,6 @@ export default {
       return authRes
     },
     async init() {
-      this.deviceData = await this.$db.getDeviceData()
-
       if (this.lastServerConnectionConfig) {
         this.connectToServer(this.lastServerConnectionConfig)
       } else {

layouts/default.vue

@@ -260,6 +260,10 @@ export default {
 
     if (this.$store.state.isFirstLoad) {
       this.$store.commit('setIsFirstLoad', false)
+
+      const deviceData = await this.$db.getDeviceData()
+      this.$store.commit('setDeviceData', deviceData)
+
       await this.$store.dispatch('setupNetworkListener')
 
       if (this.$store.state.user.serverConnectionConfig) {

pages/connect.vue

@@ -12,7 +12,7 @@
 
       <!-- <p class="absolute bottom-16 left-0 right-0 px-2 text-center text-error"><strong>Important!</strong> This app requires that you are running <u>your own server</u> and does not provide any content.</p> -->
 
-      <connection-server-connect-form />
+      <connection-server-connect-form v-if="deviceData" :device-data="deviceData" />
     </div>
 
     <div class="flex items-center justify-center pt-4 fixed bottom-4 left-0 right-0">
@@ -32,7 +32,9 @@
 export default {
   layout: 'blank',
   data() {
-    return {}
+    return {
+      deviceData: null
+    }
   },
   computed: {
     networkConnected() {
@@ -41,6 +43,8 @@ export default {
   },
   methods: {
     async init() {
+      this.deviceData = await this.$db.getDeviceData()
+      this.$store.commit('setDeviceData', this.deviceData)
       await this.$store.dispatch('setupNetworkListener')
     }
   },

pages/settings.vue

@@ -12,9 +12,9 @@
       </div>
       <p class="pl-4">Jump backwards time</p>
     </div>
-    <div class="flex items-center py-3" @click="toggleJumpForwards">
+    <div class="flex items-center py-3" @click="toggleJumpForward">
       <div class="w-10 flex justify-center">
-        <span class="material-icons text-4xl">{{ currentJumpForwardsTimeIcon }}</span>
+        <span class="material-icons text-4xl">{{ currentJumpForwardTimeIcon }}</span>
       </div>
       <p class="pl-4">Jump forwards time</p>
     </div>
@@ -25,53 +25,34 @@
 export default {
   data() {
     return {
+      deviceData: null,
       settings: {
         disableAutoRewind: false,
-        jumpForwardsTime: 10000,
-        jumpBackwardsTime: 10000
-      },
-      jumpForwardsItems: [
-        {
-          icon: 'forward_5',
-          value: 5000
-        },
-        {
-          icon: 'forward_10',
-          value: 10000
-        },
-        {
-          icon: 'forward_30',
-          value: 30000
-        }
-      ],
-      jumpBackwardsItems: [
-        {
-          icon: 'replay_5',
-          value: 5000
-        },
-        {
-          icon: 'replay_10',
-          value: 10000
-        },
-        {
-          icon: 'replay_30',
-          value: 30000
-        }
-      ]
+        jumpForwardTime: 10,
+        jumpBackwardsTime: 10
+      }
     }
   },
   computed: {
-    currentJumpForwardsTimeIcon() {
-      return this.jumpForwardsItems[this.currentJumpForwardsTimeIndex].icon
+    jumpForwardItems() {
+      return this.$store.state.globals.jumpForwardItems || []
     },
-    currentJumpForwardsTimeIndex() {
-      return this.jumpForwardsItems.findIndex((jfi) => jfi.value === this.settings.jumpForwardsTime)
+    jumpBackwardsItems() {
+      return this.$store.state.globals.jumpBackwardsItems || []
+    },
+    currentJumpForwardTimeIcon() {
+      return this.jumpForwardItems[this.currentJumpForwardTimeIndex].icon
+    },
+    currentJumpForwardTimeIndex() {
+      var index = this.jumpForwardItems.findIndex((jfi) => jfi.value === this.settings.jumpForwardTime)
+      return index >= 0 ? index : 1
     },
     currentJumpBackwardsTimeIcon() {
       return this.jumpBackwardsItems[this.currentJumpBackwardsTimeIndex].icon
     },
     currentJumpBackwardsTimeIndex() {
-      return this.jumpBackwardsItems.findIndex((jfi) => jfi.value === this.settings.jumpBackwardsTime)
+      var index = this.jumpBackwardsItems.findIndex((jfi) => jfi.value === this.settings.jumpBackwardsTime)
+      return index >= 0 ? index : 1
     }
   },
   methods: {
@@ -79,24 +60,37 @@ export default {
       this.settings.disableAutoRewind = !this.settings.disableAutoRewind
       this.saveSettings()
     },
-    toggleJumpForwards() {
-      var next = (this.currentJumpForwardsTimeIndex + 1) % 3
-      this.settings.jumpForwardsTime = this.jumpForwardsItems[next].value
+    toggleJumpForward() {
+      var next = (this.currentJumpForwardTimeIndex + 1) % 3
+      this.settings.jumpForwardTime = this.jumpForwardItems[next].value
       this.saveSettings()
     },
     toggleJumpBackwards() {
       var next = (this.currentJumpBackwardsTimeIndex + 4) % 3
-      console.log('next', next)
       if (next > 2) return
       this.settings.jumpBackwardsTime = this.jumpBackwardsItems[next].value
       this.saveSettings()
     },
-    saveSettings() {
-      // TODO: Save settings
+    async saveSettings() {
+      const updatedDeviceData = await this.$db.updateDeviceSettings({ ...this.settings })
+      console.log('Saved device data', updatedDeviceData)
+      if (updatedDeviceData) {
+        this.$store.commit('setDeviceData', updatedDeviceData)
+        this.init()
+      }
+    },
+    async init() {
+      this.deviceData = await this.$db.getDeviceData()
+      this.$store.commit('setDeviceData', this.deviceData)
+
+      const deviceSettings = this.deviceData.deviceSettings || {}
+      this.settings.disableAutoRewind = !!deviceSettings.disableAutoRewind
+      this.settings.jumpForwardTime = deviceSettings.jumpForwardTime || 10
+      this.settings.jumpBackwardsTime = deviceSettings.jumpBackwardsTime || 10
     }
   },
   mounted() {
-    // TODO: Load settings
+    this.init()
   }
 }
 </script>

plugins/capacitor/AbsDatabase.js

@@ -13,7 +13,8 @@ class AbsDatabaseWeb extends WebPlugin {
     const deviceData = {
       serverConnectionConfigs: [],
       lastServerConnectionConfigId: null,
-      currentLocalPlaybackSession: null
+      currentLocalPlaybackSession: null,
+      deviceSettings: {}
     }
     return deviceData
   }
@@ -209,6 +210,13 @@ class AbsDatabaseWeb extends WebPlugin {
     // { localLibraryItemId, localEpisodeId, isFinished }
     return null
   }
+
+  async updateDeviceSettings(payload) {
+    var deviceData = await this.getDeviceData()
+    deviceData.deviceSettings = payload
+    localStorage.setItem('device', JSON.stringify(deviceData))
+    return deviceData
+  }
 }
 
 const AbsDatabase = registerPlugin('AbsDatabase', {

plugins/db.js

@@ -82,6 +82,10 @@ class DbService {
   updateLocalMediaProgressFinished(payload) {
     return AbsDatabase.updateLocalMediaProgressFinished(payload)
   }
+
+  updateDeviceSettings(payload) {
+    return AbsDatabase.updateDeviceSettings(payload)
+  }
 }
 
 export default ({ app, store }, inject) => {

store/globals.js

@@ -3,7 +3,35 @@ export const state = () => ({
   bookshelfListView: false,
   series: null,
   localMediaProgress: [],
-  lastSearch: null
+  lastSearch: null,
+  jumpForwardItems: [
+    {
+      icon: 'forward_5',
+      value: 5
+    },
+    {
+      icon: 'forward_10',
+      value: 10
+    },
+    {
+      icon: 'forward_30',
+      value: 30
+    }
+  ],
+  jumpBackwardsItems: [
+    {
+      icon: 'replay_5',
+      value: 5
+    },
+    {
+      icon: 'replay_10',
+      value: 10
+    },
+    {
+      icon: 'replay_30',
+      value: 30
+    }
+  ]
 })
 
 export const getters = {
@@ -45,6 +73,14 @@ export const getters = {
       if (episodeId != null && lmp.episodeId != episodeId) return false
       return lmp.libraryItemId == libraryItemId
     })
+  },
+  getJumpForwardIcon: state => (jumpForwardTime) => {
+    const item = state.jumpForwardItems.find(i => i.value == jumpForwardTime)
+    return item ? item.icon : 'forward_10'
+  },
+  getJumpBackwardsIcon: state => (jumpBackwardsTime) => {
+    const item = state.jumpBackwardsItems.find(i => i.value == jumpBackwardsTime)
+    return item ? item.icon : 'replay_10'
   }
 }
 

store/index.js

@@ -1,6 +1,7 @@
 import { Network } from '@capacitor/network'
 
 export const state = () => ({
+  deviceData: null,
   playerLibraryItemId: null,
   playerEpisodeId: null,
   playerIsLocal: false,
@@ -35,6 +36,14 @@ export const getters = {
     if (!state.serverSettings) return 1
     return state.serverSettings.coverAspectRatio === 0 ? 1.6 : 1
   },
+  getJumpForwardTime: state => {
+    if (!state.deviceData || !state.deviceData.deviceSettings) return 10
+    return state.deviceData.deviceSettings.jumpForwardTime || 10
+  },
+  getJumpBackwardsTime: state => {
+    if (!state.deviceData || !state.deviceData.deviceSettings) return 10
+    return state.deviceData.deviceSettings.jumpBackwardsTime || 10
+  }
 }
 
 export const actions = {
@@ -55,6 +64,9 @@ export const actions = {
 }
 
 export const mutations = {
+  setDeviceData(state, deviceData) {
+    state.deviceData = deviceData
+  },
   setLastBookshelfScrollData(state, { scrollTop, path, name }) {
     state.lastBookshelfScrollData[name] = { scrollTop, path }
   },