From 3c1120ea48229ddda28c21357f021a2d8c5c7683 Mon Sep 17 00:00:00 2001 From: advplyr Date: Fri, 1 Jul 2022 20:05:11 -0500 Subject: [PATCH] Add settings page with adjustable jump forward/backward settings --- .../com/audiobookshelf/app/data/DbManager.kt | 2 +- .../audiobookshelf/app/data/DeviceClasses.kt | 16 +++- .../audiobookshelf/app/plugins/AbsDatabase.kt | 12 ++- components/app/AudioPlayer.vue | 24 ++++-- components/app/SideDrawer.vue | 12 +-- components/connection/ServerConnectForm.vue | 2 - layouts/default.vue | 4 + pages/connect.vue | 8 +- pages/settings.vue | 84 +++++++++---------- plugins/capacitor/AbsDatabase.js | 10 ++- plugins/db.js | 4 + store/globals.js | 38 ++++++++- store/index.js | 12 +++ 13 files changed, 162 insertions(+), 66 deletions(-) diff --git a/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt b/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt index 0a514fae..685af511 100644 --- a/android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt +++ b/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) diff --git a/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt b/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt index 231cbdc3..59e843f0 100644 --- a/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt +++ b/android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt @@ -16,10 +16,24 @@ data class ServerConnectionConfig( var customHeaders:Map? ) +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, 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? { diff --git a/android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDatabase.kt b/android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDatabase.kt index 0aa82ad7..3899608a 100644 --- a/android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDatabase.kt +++ b/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(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(call.data.toString()) + GlobalScope.launch(Dispatchers.IO) { + DeviceManager.deviceData.deviceSettings = newDeviceSettings + DeviceManager.dbManager.saveDeviceData(DeviceManager.deviceData) + call.resolve(JSObject(jacksonMapper.writeValueAsString(DeviceManager.deviceData))) + } + } } diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index d9f178c8..875228ed 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -63,12 +63,12 @@
first_page - replay_10 + {{ jumpBackwardsIcon }}
{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}
- forward_10 + {{ jumpForwardIcon }} last_page
@@ -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 diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue index 3e61005a..9a62c7e8 100644 --- a/components/app/SideDrawer.vue +++ b/components/app/SideDrawer.vue @@ -19,7 +19,7 @@
-

{{ serverConnectionConfig.address }} (v{{serverSettings.version}})

+

{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})

{{ $config.version }}

@@ -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 }, diff --git a/components/connection/ServerConnectForm.vue b/components/connection/ServerConnectForm.vue index f0e2f40e..05a63ecd 100644 --- a/components/connection/ServerConnectForm.vue +++ b/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 { diff --git a/layouts/default.vue b/layouts/default.vue index aef6e2fd..327c8d9a 100644 --- a/layouts/default.vue +++ b/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) { diff --git a/pages/connect.vue b/pages/connect.vue index f0e09cf9..04e430ad 100644 --- a/pages/connect.vue +++ b/pages/connect.vue @@ -12,7 +12,7 @@ - +
@@ -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') } }, diff --git a/pages/settings.vue b/pages/settings.vue index fdb5759e..9c950f5a 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -12,9 +12,9 @@

Jump backwards time

-
+
- {{ currentJumpForwardsTimeIcon }} + {{ currentJumpForwardTimeIcon }}

Jump forwards time

@@ -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() } } \ No newline at end of file diff --git a/plugins/capacitor/AbsDatabase.js b/plugins/capacitor/AbsDatabase.js index 84afc295..dc188d16 100644 --- a/plugins/capacitor/AbsDatabase.js +++ b/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', { diff --git a/plugins/db.js b/plugins/db.js index cdba7d5a..58b929af 100644 --- a/plugins/db.js +++ b/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) => { diff --git a/store/globals.js b/store/globals.js index 7ceca2b0..5415470b 100644 --- a/store/globals.js +++ b/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' } } diff --git a/store/index.js b/store/index.js index d2c8aa3a..0585c471 100644 --- a/store/index.js +++ b/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 } },