From 9687f47b6b493a8cea4f41df0d96a8449adc13bd Mon Sep 17 00:00:00 2001 From: advplyr Date: Sun, 4 Dec 2022 10:41:09 -0600 Subject: [PATCH] Add:Device setting for locking screen orientation #449 --- .../audiobookshelf/app/data/DeviceClasses.kt | 10 ++++- android/app/src/main/res/xml/config.xml | 4 ++ ios/App/App/config.xml | 4 ++ ios/App/App/plugins/AbsDatabase.swift | 2 + ios/App/Podfile | 1 + ios/App/Shared/models/DeviceSettings.swift | 10 ++++- layouts/default.vue | 1 + package-lock.json | 20 +++++++++- package.json | 3 +- pages/settings.vue | 38 ++++++++++++++++++- plugins/init.client.js | 10 +++++ store/index.js | 4 ++ 12 files changed, 100 insertions(+), 7 deletions(-) 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 a4402416..6574ee79 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 @@ -6,6 +6,10 @@ import com.fasterxml.jackson.annotation.JsonIgnoreProperties import com.fasterxml.jackson.annotation.JsonSubTypes import com.fasterxml.jackson.annotation.JsonTypeInfo +enum class LockOrientationSetting { + NONE, PORTRAIT, LANDSCAPE +} + data class ServerConnectionConfig( var id:String, var index:Int, @@ -22,7 +26,8 @@ data class DeviceSettings( var enableAltView:Boolean, var jumpBackwardsTime:Int, var jumpForwardTime:Int, - var disableShakeToResetSleepTimer:Boolean + var disableShakeToResetSleepTimer:Boolean, + var lockOrientation:LockOrientationSetting ) { companion object { // Static method to get default device settings @@ -32,7 +37,8 @@ data class DeviceSettings( enableAltView = false, jumpBackwardsTime = 10, jumpForwardTime = 10, - disableShakeToResetSleepTimer = false + disableShakeToResetSleepTimer = false, + lockOrientation = LockOrientationSetting.NONE ) } } diff --git a/android/app/src/main/res/xml/config.xml b/android/app/src/main/res/xml/config.xml index 1b1b0e0d..0886a477 100644 --- a/android/app/src/main/res/xml/config.xml +++ b/android/app/src/main/res/xml/config.xml @@ -2,5 +2,9 @@ + + + + \ No newline at end of file diff --git a/ios/App/App/config.xml b/ios/App/App/config.xml index 1b1b0e0d..b43c248f 100644 --- a/ios/App/App/config.xml +++ b/ios/App/App/config.xml @@ -2,5 +2,9 @@ + + + + \ No newline at end of file diff --git a/ios/App/App/plugins/AbsDatabase.swift b/ios/App/App/plugins/AbsDatabase.swift index 9594c54a..17a3d964 100644 --- a/ios/App/App/plugins/AbsDatabase.swift +++ b/ios/App/App/plugins/AbsDatabase.swift @@ -236,11 +236,13 @@ public class AbsDatabase: CAPPlugin { let enableAltView = call.getBool("enableAltView") ?? false let jumpBackwardsTime = call.getInt("jumpBackwardsTime") ?? 10 let jumpForwardTime = call.getInt("jumpForwardTime") ?? 10 + let lockOrientation call.getString("lockOrientation") ?? "NONE" let settings = DeviceSettings() settings.disableAutoRewind = disableAutoRewind settings.enableAltView = enableAltView settings.jumpBackwardsTime = jumpBackwardsTime settings.jumpForwardTime = jumpForwardTime + settings.lockOrientation = LockOrientationSetting(rawValue: lockOrientation) Database.shared.setDeviceSettings(deviceSettings: settings) diff --git a/ios/App/Podfile b/ios/App/Podfile index 45fd0bf4..331b14d2 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -15,6 +15,7 @@ def capacitor_pods 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 target 'Audiobookshelf' do diff --git a/ios/App/Shared/models/DeviceSettings.swift b/ios/App/Shared/models/DeviceSettings.swift index df6a7ab1..cb6b4d2e 100644 --- a/ios/App/Shared/models/DeviceSettings.swift +++ b/ios/App/Shared/models/DeviceSettings.swift @@ -8,11 +8,18 @@ import Foundation import RealmSwift +enum LockOrientationSetting: Codable { + case NONE + case PORTRAIT + case LANDSCAPE +} + class DeviceSettings: Object { @Persisted var disableAutoRewind: Bool = false @Persisted var enableAltView: Bool = false @Persisted var jumpBackwardsTime: Int = 10 @Persisted var jumpForwardTime: Int = 10 + @Persisted var lockOrientation: LockOrientationSetting = LockOrientationSetting.NONE } func getDefaultDeviceSettings() -> DeviceSettings { @@ -24,6 +31,7 @@ func deviceSettingsToJSON(settings: DeviceSettings) -> Dictionary { "disableAutoRewind": settings.disableAutoRewind, "enableAltView": settings.enableAltView, "jumpBackwardsTime": settings.jumpBackwardsTime, - "jumpForwardTime": settings.jumpForwardTime + "jumpForwardTime": settings.jumpForwardTime, + "lockOrientation": settings.lockOrientation ] } diff --git a/layouts/default.vue b/layouts/default.vue index cb5020e3..e52232e5 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -262,6 +262,7 @@ export default { const deviceData = await this.$db.getDeviceData() this.$store.commit('setDeviceData', deviceData) + this.$setOrientationLock(this.$store.getters['getOrientationLockSetting']) await this.$store.dispatch('setupNetworkListener') diff --git a/package-lock.json b/package-lock.json index 7d4215ac..4d7ae4ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@capacitor/status-bar": "^1.0.8", "@capacitor/storage": "^1.2.5", "@nuxtjs/axios": "^5.13.6", + "cordova-plugin-screen-orientation": "^3.0.2", "core-js": "^3.15.1", "date-fns": "^2.25.0", "epubjs": "^0.3.88", @@ -5739,6 +5740,18 @@ "node": ">=0.10.0" } }, + "node_modules/cordova-plugin-screen-orientation": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz", + "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==", + "engines": { + "cordovaDependencies": { + "4.0.0": { + "cordova": ">100" + } + } + } + }, "node_modules/core-js": { "version": "3.21.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz", @@ -23058,6 +23071,11 @@ "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, + "cordova-plugin-screen-orientation": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz", + "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==" + }, "core-js": { "version": "3.21.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz", @@ -32982,4 +33000,4 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 8fda88c2..46c85f8b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@capacitor/status-bar": "^1.0.8", "@capacitor/storage": "^1.2.5", "@nuxtjs/axios": "^5.13.6", + "cordova-plugin-screen-orientation": "^3.0.2", "core-js": "^3.15.1", "date-fns": "^2.25.0", "epubjs": "^0.3.88", @@ -38,4 +39,4 @@ "@nuxtjs/tailwindcss": "^4.2.0", "postcss": "^8.3.5" } -} \ No newline at end of file +} diff --git a/pages/settings.vue b/pages/settings.vue index 4807d64e..8d4510cf 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -7,6 +7,12 @@

Alternative bookshelf view

+
+
+ +
+

Lock orientation

+

Playback Settings

@@ -51,14 +57,16 @@ export default { enableAltView: false, jumpForwardTime: 10, jumpBackwardsTime: 10, - disableShakeToResetSleepTimer: false + disableShakeToResetSleepTimer: false, + lockOrientation: 0 }, settingInfo: { disableShakeToResetSleepTimer: { name: 'Disable shake to reset sleep timer', message: 'The sleep timer will start fading out when 30s is remaining. Shaking your device will reset the timer if it is within 30s OR has finished less than 2 mintues ago. Enable this setting to disable that feature.' } - } + }, + lockCurrentOrientation: false } }, computed: { @@ -107,6 +115,28 @@ export default { this.settings.enableAltView = !this.settings.enableAltView this.saveSettings() }, + getCurrentOrientation() { + const orientation = window.screen ? window.screen.orientation || {} : {} + const type = orientation.type || '' + console.log('getCurrentOrientation=' + type) + + if (type.includes('landscape')) return 'LANDSCAPE' + return 'PORTRAIT' // default + }, + toggleLockOrientation() { + console.log('TOGGLE LOCK ORIENTATION', this.lockCurrentOrientation) + this.lockCurrentOrientation = !this.lockCurrentOrientation + if (this.lockCurrentOrientation) { + console.log('CURRENT ORIENTATION=', this.getCurrentOrientation()) + this.settings.lockOrientation = this.getCurrentOrientation() + } else { + console.log('SETTING CURRENT ORIENTATION TO NONE') + this.settings.lockOrientation = 'NONE' + } + this.$setOrientationLock(this.settings.lockOrientation) + console.log('NOW SAVING SETTINGS', this.settings.lockOrientation) + this.saveSettings() + }, toggleJumpForward() { var next = (this.currentJumpForwardTimeIndex + 1) % 3 this.settings.jumpForwardTime = this.jumpForwardItems[next].value @@ -136,6 +166,10 @@ export default { this.settings.jumpForwardTime = deviceSettings.jumpForwardTime || 10 this.settings.jumpBackwardsTime = deviceSettings.jumpBackwardsTime || 10 this.settings.disableShakeToResetSleepTimer = !!deviceSettings.disableShakeToResetSleepTimer + this.settings.lockOrientation = deviceSettings.lockOrientation || 'NONE' + + console.log('INIT SETTINGS LOCK ORIENTATION=', this.settings.lockOrientation) + this.lockCurrentOrientation = this.settings.lockOrientation !== 'NONE' } }, mounted() { diff --git a/plugins/init.client.js b/plugins/init.client.js index 79adfc08..331e00b8 100644 --- a/plugins/init.client.js +++ b/plugins/init.client.js @@ -156,6 +156,16 @@ Vue.prototype.$encode = encode const decode = (text) => Buffer.from(decodeURIComponent(text), 'base64').toString() Vue.prototype.$decode = decode +Vue.prototype.$setOrientationLock = (orientationLockSetting) => { + if (orientationLockSetting == 'PORTRAIT') { + window.screen.orientation.lock('portrait') + } else if (orientationLockSetting == 'LANDSCAPE') { + window.screen.orientation.lock('landscape') + } else { + window.screen.orientation.unlock() + } +} + export default ({ store, app }) => { // iOS Only // backButton event does not work with iOS swipe navigation so use this workaround diff --git a/store/index.js b/store/index.js index e868c3bf..4b4b822c 100644 --- a/store/index.js +++ b/store/index.js @@ -52,6 +52,10 @@ export const getters = { getAltViewEnabled: state => { if (!state.deviceData || !state.deviceData.deviceSettings) return false return state.deviceData.deviceSettings.enableAltView + }, + getOrientationLockSetting: state => { + if (!state.deviceData || !state.deviceData.deviceSettings) return false + return state.deviceData.deviceSettings.lockOrientation } }