feat(WASM): Support setting the screen orientation

trungnt2910 · trungnt2910 · commit 43bed2664848 · 2022-10-03T20:21:06.000+07:00
Supports setting the screen orientation through the
DisplayInformation.AutoRotationPreferences on supported browsers.

Internally the implementation calls the JavaScript
screen.orientation.lock API.
diff --git a/src/Uno.UI/WasmScripts/Uno.UI.d.ts b/src/Uno.UI/WasmScripts/Uno.UI.d.ts
@@ -864,19 +864,30 @@ declare namespace Windows.Gaming.Input {
     }
 }
 declare namespace Windows.Graphics.Display {
-    class DisplayInformation {
+    enum DisplayOrientations {
+        None = 0,
+        Landscape = 1,
+        Portrait = 2,
+        LandscapeFlipped = 4,
+        PortraitFlipped = 8
+    }
+    export class DisplayInformation {
         private static readonly DpiCheckInterval;
         private static lastDpi;
         private static dpiWatcher;
         private static dispatchOrientationChanged;
         private static dispatchDpiChanged;
+        private static lockingSupported;
         static startOrientationChanged(): void;
         static stopOrientationChanged(): void;
         static startDpiChanged(): void;
         static stopDpiChanged(): void;
+        static setOrientationAsync(uwpOrientations: DisplayOrientations): Promise<void>;
+        private static parseUwpOrientation;
         private static updateDpi;
         private static onOrientationChange;
     }
+    export {};
 }
 interface Window {
     SpeechRecognition: any;
diff --git a/src/Uno.UI/WasmScripts/Uno.UI.js b/src/Uno.UI/WasmScripts/Uno.UI.js
@@ -2773,6 +2773,14 @@ var Windows;
     (function (Graphics) {
         var Display;
         (function (Display) {
+            let DisplayOrientations;
+            (function (DisplayOrientations) {
+                DisplayOrientations[DisplayOrientations["None"] = 0] = "None";
+                DisplayOrientations[DisplayOrientations["Landscape"] = 1] = "Landscape";
+                DisplayOrientations[DisplayOrientations["Portrait"] = 2] = "Portrait";
+                DisplayOrientations[DisplayOrientations["LandscapeFlipped"] = 4] = "LandscapeFlipped";
+                DisplayOrientations[DisplayOrientations["PortraitFlipped"] = 8] = "PortraitFlipped";
+            })(DisplayOrientations || (DisplayOrientations = {}));
             class DisplayInformation {
                 static startOrientationChanged() {
                     window.screen.orientation.addEventListener("change", DisplayInformation.onOrientationChange);
@@ -2790,6 +2798,71 @@ var Windows;
                 static stopDpiChanged() {
                     window.clearInterval(DisplayInformation.dpiWatcher);
                 }
+                static async setOrientationAsync(uwpOrientations) {
+                    let oldOrientation = screen.orientation.type;
+                    let orientations = DisplayInformation.parseUwpOrientation(uwpOrientations);
+                    if (orientations.includes(oldOrientation)) {
+                        return;
+                    }
+                    // Setting the orientation requires briefly changing the device to fullscreen.
+                    // This causes a glitch, which is unnecessary for devices which does not support
+                    // setting the orientation, such as most desktop browsers.
+                    // We therefore attempt to check for support, and do nothing if the feature is
+                    // unavailable.
+                    if (this.lockingSupported == null) {
+                        try {
+                            await screen.orientation.lock(oldOrientation);
+                            this.lockingSupported = true;
+                        }
+                        catch (e) {
+                            if (e instanceof DOMException && e.name === "NotSupportedError") {
+                                this.lockingSupported = false;
+                                console.log("This browser does not support setting the orientation.");
+                            }
+                            else {
+                                // On most mobile devices we should reach this line.
+                                this.lockingSupported = true;
+                            }
+                        }
+                    }
+                    if (!this.lockingSupported) {
+                        return;
+                    }
+                    let wasFullscreen = document.fullscreenElement != null;
+                    if (!wasFullscreen) {
+                        await document.body.requestFullscreen();
+                    }
+                    for (let orientation of orientations) {
+                        try {
+                            // On success, screen.orientation should fire the 'change' event.
+                            await screen.orientation.lock(orientation);
+                            break;
+                        }
+                        catch (e) {
+                            // Absorb all errors to ensure that the exitFullscreen block below is called.
+                            console.log(`Failed to set the screen orientation to '${orientation}': ${e}`);
+                        }
+                    }
+                    if (!wasFullscreen) {
+                        await document.exitFullscreen();
+                    }
+                }
+                static parseUwpOrientation(uwpOrientations) {
+                    let orientations = [];
+                    if (uwpOrientations & DisplayOrientations.Landscape) {
+                        orientations.push("landscape-primary");
+                    }
+                    if (uwpOrientations & DisplayOrientations.Portrait) {
+                        orientations.push("portrait-primary");
+                    }
+                    if (uwpOrientations & DisplayOrientations.LandscapeFlipped) {
+                        orientations.push("landscape-secondary");
+                    }
+                    if (uwpOrientations & DisplayOrientations.PortraitFlipped) {
+                        orientations.push("portrait-secondary");
+                    }
+                    return orientations;
+                }
                 static updateDpi() {
                     const currentDpi = window.devicePixelRatio;
                     if (Math.abs(DisplayInformation.lastDpi - currentDpi) > 0.001) {
diff --git a/src/Uno.UI/ts/Windows/Graphics/Display/DisplayInformation.ts b/src/Uno.UI/ts/Windows/Graphics/Display/DisplayInformation.ts
@@ -1,4 +1,11 @@
 ﻿namespace Windows.Graphics.Display {
+	enum DisplayOrientations {
+		None = 0,
+		Landscape = 1,
+		Portrait = 2,
+		LandscapeFlipped = 4,
+		PortraitFlipped = 8
+	}
 
 	export class DisplayInformation {
 		private static readonly DpiCheckInterval = 1000;
@@ -9,6 +16,8 @@
 		private static dispatchOrientationChanged: (type: string) => number;
 		private static dispatchDpiChanged: (dpi: number) => number;
 
+		private static lockingSupported: boolean | null;
+
 		public static startOrientationChanged() {
 			window.screen.orientation.addEventListener("change", DisplayInformation.onOrientationChange);
 		}
@@ -25,17 +34,93 @@
 
 			// start polling the devicePixel
 			DisplayInformation.dpiWatcher = window.setInterval(
-				DisplayInformation.updateDpi, 
+				DisplayInformation.updateDpi,
 				DisplayInformation.DpiCheckInterval);
 		}
 
 		public static stopDpiChanged() {
 			window.clearInterval(DisplayInformation.dpiWatcher);
 		}
 
+		public static async setOrientationAsync(uwpOrientations: DisplayOrientations): Promise<void> {
+			let oldOrientation = screen.orientation.type;
+			let orientations = DisplayInformation.parseUwpOrientation(uwpOrientations);
+
+			if (orientations.includes(oldOrientation)) {
+				return;
+			}
+
+			// Setting the orientation requires briefly changing the device to fullscreen.
+			// This causes a glitch, which is unnecessary for devices which does not support
+			// setting the orientation, such as most desktop browsers.
+			// We therefore attempt to check for support, and do nothing if the feature is
+			// unavailable.
+			if (this.lockingSupported == null) {
+				try {
+					await screen.orientation.lock(oldOrientation);
+					this.lockingSupported = true;
+				} catch (e) {
+					if (e instanceof DOMException && e.name === "NotSupportedError") {
+						this.lockingSupported = false;
+						console.log("This browser does not support setting the orientation.")
+					} else {
+						// On most mobile devices we should reach this line.
+						this.lockingSupported = true;
+					}
+				}
+			}
+
+			if (!this.lockingSupported) {
+				return;
+			}
+
+			let wasFullscreen = document.fullscreenElement != null;
+
+			if (!wasFullscreen) {
+				await document.body.requestFullscreen();
+			}
+
+			for (let orientation of orientations) {
+				try {
+					// On success, screen.orientation should fire the 'change' event.
+					await screen.orientation.lock(orientation);
+					break;
+				} catch (e) {
+					// Absorb all errors to ensure that the exitFullscreen block below is called.
+					console.log(`Failed to set the screen orientation to '${orientation}': ${e}`);
+				}
+			}
+
+			if (!wasFullscreen) {
+				await document.exitFullscreen();
+			}
+		}
+
+		private static parseUwpOrientation(uwpOrientations: DisplayOrientations): OrientationLockType[] {
+			let orientations: OrientationLockType[] = [];
+
+			if (uwpOrientations & DisplayOrientations.Landscape) {
+				orientations.push("landscape-primary");
+			}
+
+			if (uwpOrientations & DisplayOrientations.Portrait) {
+				orientations.push("portrait-primary");
+			}
+
+			if (uwpOrientations & DisplayOrientations.LandscapeFlipped) {
+				orientations.push("landscape-secondary");
+			}
+
+			if (uwpOrientations & DisplayOrientations.PortraitFlipped) {
+				orientations.push("portrait-secondary");
+			}
+
+			return orientations;
+		}
+
 		private static updateDpi() {
 			const currentDpi = window.devicePixelRatio;
-			if (Math.abs(DisplayInformation.lastDpi - currentDpi) > 0.001) {				
+			if (Math.abs(DisplayInformation.lastDpi - currentDpi) > 0.001) {
 				if (DisplayInformation.dispatchDpiChanged == null) {
 					DisplayInformation.dispatchDpiChanged =
 						(<any>Module).mono_bind_static_method(
diff --git a/src/Uno.UWP/Graphics/Display/DisplayInformation.wasm.cs b/src/Uno.UWP/Graphics/Display/DisplayInformation.wasm.cs
@@ -1,8 +1,10 @@
 ﻿#if __WASM__
-using Uno;
-using Uno.Foundation;
 using System;
 using System.Globalization;
+using System.Threading;
+using System.Threading.Tasks;
+using Uno;
+using Uno.Foundation;
 
 namespace Windows.Graphics.Display
 {
@@ -134,6 +136,13 @@ partial void StopDpiChanged()
 			WebAssemblyRuntime.InvokeJS(command);
 		}
 
+		static partial void SetOrientationPartial(DisplayOrientations orientations)
+		{
+			Uno.UI.Dispatching.CoreDispatcher.Main.RunAsync(
+				Uno.UI.Dispatching.CoreDispatcherPriority.High,
+				(ct) => SetOrientationAsync(orientations, ct));
+		}
+
 		private static bool TryReadJsFloat(string property, out float value) =>
 			float.TryParse(WebAssemblyRuntime.InvokeJS(property), NumberStyles.Any, CultureInfo.InvariantCulture, out value);
 
@@ -152,6 +161,11 @@ private static DisplayOrientations ParseJsOrientation(string jsOrientation)
 				_ => DisplayOrientations.None,
 			};
 		}
+
+		private static Task SetOrientationAsync(DisplayOrientations orientations, CancellationToken ct)
+		{
+			return WebAssemblyRuntime.InvokeAsync($"{JsType}.setOrientationAsync({(int)orientations})", ct);
+		}
 	}
 }
 #endif
