@capawesome/capacitor-screen-orientation 8.0.0 → 8.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # @capawesome/capacitor-screen-orientation
1
+ # Capacitor Screen Orientation Plugin
2
2
 
3
3
  Capacitor plugin to lock/unlock the screen orientation.
4
4
 
@@ -10,7 +10,7 @@ Capacitor plugin to lock/unlock the screen orientation.
10
10
 
11
11
  ## Features
12
12
 
13
- We are proud to offer one of the most complete and feature-rich Capacitor plugins for screen orientation control. Here are some of the key features:
13
+ The Capacitor Screen Orientation plugin is one of the most complete orientation control solutions for Capacitor apps. Here are some of the key features:
14
14
 
15
15
  - 🖥️ **Cross-platform**: Supports Android, iOS, and Web.
16
16
  - 🔒 **Orientation locking**: Lock screen to specific orientations.
@@ -20,13 +20,20 @@ We are proud to offer one of the most complete and feature-rich Capacitor plugin
20
20
  - 📢 **Event listeners**: Listen to orientation change events.
21
21
  - 📐 **Fine-grained control**: Primary and secondary orientation modes.
22
22
  - 🍎 **iPad support**: Special configuration for iPad orientation locking.
23
+ - 🤝 **Compatibility**: Works alongside the [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/), [Keep Awake](https://capawesome.io/docs/sdks/capacitor/keep-awake/) and [Navigation Bar](https://capawesome.io/docs/sdks/capacitor/navigation-bar/) plugins.
23
24
  - 🔁 **Up-to-date**: Always supports the latest Capacitor version.
24
25
 
25
26
  Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
26
27
 
27
- ## Newsletter
28
+ ## Use Cases
28
29
 
29
- Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
30
+ The Screen Orientation plugin is typically used whenever certain screens of an app only work well in a specific orientation, for example:
31
+
32
+ - **Video players**: Lock the screen to landscape for fullscreen video playback.
33
+ - **Games**: Keep the game in a fixed orientation regardless of how the device is held.
34
+ - **Camera and scanner screens**: Lock the screen to portrait while capturing photos or scanning codes.
35
+ - **Forms and reading views**: Prevent accidental rotation while the user is typing or reading.
36
+ - **Responsive layouts**: React to orientation changes with the `screenOrientationChange` event to adapt your UI.
30
37
 
31
38
  ## Compatibility
32
39
 
@@ -39,6 +46,21 @@ Stay up to date with the latest news and updates about the Capawesome, Capacitor
39
46
 
40
47
  ## Installation
41
48
 
49
+ You can use our **AI-Assisted Setup** to install the plugin.
50
+ Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command:
51
+
52
+ ```bash
53
+ npx skills add capawesome-team/skills --skill capacitor-plugins
54
+ ```
55
+
56
+ Then use the following prompt:
57
+
58
+ ```
59
+ Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-screen-orientation` plugin in my project.
60
+ ```
61
+
62
+ If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below:
63
+
42
64
  ```bash
43
65
  npm install @capawesome/capacitor-screen-orientation
44
66
  npx cap sync
@@ -51,7 +73,7 @@ npx cap sync
51
73
  On iOS you must add the following to your app's `AppDelegate.swift`:
52
74
 
53
75
  ```diff
54
- + import CapawesomeCapacitorScreenOrientation
76
+ + import ScreenOrientationPlugin
55
77
 
56
78
  @UIApplicationMain
57
79
  class AppDelegate: UIResponder, UIApplicationDelegate {
@@ -61,6 +83,12 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
61
83
  + }
62
84
  ```
63
85
 
86
+ If your project still uses CocoaPods instead of Swift Package Manager (SPM), import `CapawesomeCapacitorScreenOrientation` rather than `ScreenOrientationPlugin`:
87
+
88
+ ```diff
89
+ + import CapawesomeCapacitorScreenOrientation
90
+ ```
91
+
64
92
  #### iPad Orientation Lock
65
93
 
66
94
  On iPad, you must add the following to your app's `Info.plist`:
@@ -80,16 +108,38 @@ A working example can be found here: [robingenz/capacitor-plugin-demo](https://g
80
108
 
81
109
  ## Usage
82
110
 
111
+ The following examples show how to lock, unlock, and read the current screen orientation.
112
+
113
+ ### Lock the screen orientation
114
+
115
+ Lock the device to a specific orientation, for example landscape. Besides `LANDSCAPE` and `PORTRAIT`, you can also lock to a primary or secondary mode such as `LANDSCAPE_PRIMARY` for fine-grained control:
116
+
83
117
  ```typescript
84
118
  import { ScreenOrientation, OrientationType } from '@capawesome/capacitor-screen-orientation';
85
119
 
86
120
  const lock = async () => {
87
121
  await ScreenOrientation.lock({ type: OrientationType.LANDSCAPE });
88
122
  };
123
+ ```
124
+
125
+ ### Unlock the screen orientation
126
+
127
+ Remove the orientation lock and restore automatic rotation:
128
+
129
+ ```typescript
130
+ import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';
89
131
 
90
132
  const unlock = async () => {
91
133
  await ScreenOrientation.unlock();
92
134
  };
135
+ ```
136
+
137
+ ### Get the current screen orientation
138
+
139
+ Read the current orientation type of the device:
140
+
141
+ ```typescript
142
+ import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';
93
143
 
94
144
  const getCurrentOrientation = async () => {
95
145
  const result = await ScreenOrientation.getCurrentOrientation();
@@ -240,6 +290,43 @@ Callback to receive the screen orientation change notifications.
240
290
 
241
291
  </docgen-api>
242
292
 
293
+ ## FAQ
294
+
295
+ ### Why does the orientation lock not work on iPad?
296
+
297
+ For the orientation lock to work on iPad, you must add the `UIRequiresFullScreen` key with the value `true` to your app's `Info.plist` file, as described in the [Installation](#installation) section. Also make sure that you have applied the required changes to your `AppDelegate.swift`.
298
+
299
+ ### Do I need to modify my AppDelegate on iOS?
300
+
301
+ Yes. You must implement the `supportedInterfaceOrientationsFor` method in your app's `AppDelegate.swift` and return `ScreenOrientation.getSupportedInterfaceOrientations()`, as shown in the [Installation](#installation) section. Without this change, the orientation lock has no effect on iOS.
302
+
303
+ ### What is the difference between LANDSCAPE and LANDSCAPE_PRIMARY?
304
+
305
+ The `LANDSCAPE` type covers both landscape modes, so the device can be rotated between landscape-primary and landscape-secondary while locked. The `LANDSCAPE_PRIMARY` and `LANDSCAPE_SECONDARY` types lock the screen to exactly one of the two landscape modes. The same applies to `PORTRAIT`, `PORTRAIT_PRIMARY` and `PORTRAIT_SECONDARY`.
306
+
307
+ ### How do I restore automatic rotation after locking the orientation?
308
+
309
+ Simply call the `unlock()` method. It removes the orientation lock so that the device rotates automatically again based on the user's device settings.
310
+
311
+ ### How can I react to orientation changes?
312
+
313
+ Add a listener for the `screenOrientationChange` event using the `addListener(...)` method. The listener receives the new orientation type every time the screen orientation changes. Use `removeAllListeners()` to remove all listeners when you no longer need them.
314
+
315
+ ### Can I use this plugin with Ionic, React, Vue or Angular?
316
+
317
+ Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
318
+
319
+ ## Related Plugins
320
+
321
+ - [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/): Hide and show the iOS home indicator.
322
+ - [Keep Awake](https://capawesome.io/docs/sdks/capacitor/keep-awake/): Keep the screen awake, for example during video playback.
323
+ - [Navigation Bar](https://capawesome.io/docs/sdks/capacitor/navigation-bar/): Set the background color and button style of the Android navigation bar.
324
+ - [Screen Brightness](https://capawesome.io/docs/sdks/capacitor/screen-brightness/): Read and control the screen brightness.
325
+
326
+ ## Newsletter
327
+
328
+ Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
329
+
243
330
  ## Changelog
244
331
 
245
332
  See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/screen-orientation/CHANGELOG.md).
@@ -30,7 +30,7 @@ android {
30
30
  buildTypes {
31
31
  release {
32
32
  minifyEnabled false
33
- proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
33
+ proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
34
34
  }
35
35
  }
36
36
  lintOptions {
@@ -8,6 +8,10 @@ import Capacitor
8
8
  private var currentOrientationType: String?
9
9
  private var lastOrientationType: String?
10
10
 
11
+ private var windowScene: UIWindowScene? {
12
+ return plugin.bridge?.viewController?.view.window?.windowScene
13
+ }
14
+
11
15
  init(plugin: ScreenOrientationPlugin) {
12
16
  self.plugin = plugin
13
17
  super.init()
@@ -70,7 +74,7 @@ import Capacitor
70
74
 
71
75
  @objc private func requestGeometryUpdate(orientationValue: Int, orientationMask: UIInterfaceOrientationMask) {
72
76
  if #available(iOS 16, *) {
73
- let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
77
+ let windowScene = self.windowScene
74
78
  windowScene?.keyWindow?.rootViewController?.setNeedsUpdateOfSupportedInterfaceOrientations()
75
79
  windowScene?.requestGeometryUpdate(.iOS(interfaceOrientations: orientationMask)) { error in
76
80
  CAPLog.print("requestGeometryUpdate failed.", error)
@@ -122,7 +126,7 @@ import Capacitor
122
126
  case UIInterfaceOrientation.portraitUpsideDown.rawValue:
123
127
  return UIInterfaceOrientationMask.portraitUpsideDown
124
128
  default:
125
- let isPortrait = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation.isPortrait ?? false
129
+ let isPortrait = windowScene?.interfaceOrientation.isPortrait ?? false
126
130
  return isPortrait ? UIInterfaceOrientationMask.portrait : UIInterfaceOrientationMask.landscape
127
131
  }
128
132
  }
@@ -176,7 +180,7 @@ import Capacitor
176
180
  case UIInterfaceOrientation.portraitUpsideDown.rawValue:
177
181
  return "portrait-secondary"
178
182
  default:
179
- let isPortrait = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation.isPortrait ?? false
183
+ let isPortrait = windowScene?.interfaceOrientation.isPortrait ?? false
180
184
  return isPortrait ? "portrait-primary" : "landscape-primary"
181
185
  }
182
186
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capawesome/capacitor-screen-orientation",
3
- "version": "8.0.0",
4
- "description": "Capacitor plugin to lock/unlock the screen orientation.",
3
+ "version": "8.0.2",
4
+ "description": "Capacitor plugin to lock/unlock the screen orientation on Android, iOS, and Web.",
5
5
  "main": "dist/plugin.cjs.js",
6
6
  "module": "dist/esm/index.js",
7
7
  "types": "dist/esm/index.d.ts",
@@ -33,7 +33,7 @@
33
33
  "url": "https://opencollective.com/capawesome"
34
34
  }
35
35
  ],
36
- "homepage": "https://capawesome.io/plugins/screen-orientation/",
36
+ "homepage": "https://capawesome.io/docs/sdks/capacitor/screen-orientation/",
37
37
  "keywords": [
38
38
  "capacitor",
39
39
  "plugin",
@@ -42,7 +42,14 @@
42
42
  "android",
43
43
  "ios",
44
44
  "web",
45
- "screen orientation"
45
+ "screen orientation",
46
+ "capacitor-plugin",
47
+ "orientation lock",
48
+ "lock orientation",
49
+ "landscape",
50
+ "portrait",
51
+ "screen rotation",
52
+ "device orientation"
46
53
  ],
47
54
  "scripts": {
48
55
  "verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
@@ -64,24 +71,21 @@
64
71
  },
65
72
  "devDependencies": {
66
73
  "@capacitor/android": "8.0.0",
67
- "@capacitor/cli": "8.0.0",
74
+ "@capacitor/cli": "8.4.2",
68
75
  "@capacitor/core": "8.0.0",
69
76
  "@capacitor/docgen": "0.3.1",
70
77
  "@capacitor/ios": "8.0.0",
71
78
  "@ionic/eslint-config": "0.4.0",
72
- "@ionic/swiftlint-config": "2.0.0",
73
79
  "eslint": "8.57.0",
74
- "prettier": "3.4.2",
75
- "prettier-plugin-java": "2.6.7",
80
+ "prettier-plugin-java": "2.9.7",
76
81
  "rimraf": "6.1.2",
77
- "rollup": "4.53.3",
82
+ "rollup": "4.62.3",
78
83
  "swiftlint": "2.0.0",
79
84
  "typescript": "5.9.3"
80
85
  },
81
86
  "peerDependencies": {
82
87
  "@capacitor/core": ">=8.0.0"
83
88
  },
84
- "swiftlint": "@ionic/swiftlint-config",
85
89
  "eslintConfig": {
86
90
  "extends": "@ionic/eslint-config/recommended"
87
91
  },