Add:Device setting for locking screen orientation #449

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
       )
     }
   }

android/app/src/main/res/xml/config.xml

@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="android-package" value="cordova.plugins.screenorientation.CDVOrientation"/>
+  </feature>
+
   
 </widget>

ios/App/App/config.xml

@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="ios-package" value="CDVOrientation"/>
+  </feature>
+
   
 </widget>

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)
         

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

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<String, Any> {
         "disableAutoRewind": settings.disableAutoRewind,
         "enableAltView": settings.enableAltView,
         "jumpBackwardsTime": settings.jumpBackwardsTime,
-        "jumpForwardTime": settings.jumpForwardTime
+        "jumpForwardTime": settings.jumpForwardTime,
+        "lockOrientation": settings.lockOrientation
     ]
 }

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')
 

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",

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",

pages/settings.vue

@@ -7,6 +7,12 @@
       </div>
       <p class="pl-4">Alternative bookshelf view</p>
     </div>
+    <div class="flex items-center py-3" @click.stop="toggleLockOrientation">
+      <div class="w-10 flex justify-center">
+        <ui-toggle-switch v-model="lockCurrentOrientation" @input="saveSettings" />
+      </div>
+      <p class="pl-4">Lock orientation</p>
+    </div>
 
     <p class="uppercase text-xs font-semibold text-gray-300 mb-2 mt-6">Playback Settings</p>
     <div v-if="!isiOS" class="flex items-center py-3" @click="toggleDisableAutoRewind">
@@ -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() {

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

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
   }
 }