web: Support fullScreenAspectRatio (part of #4258)

Author: danielhjacobs

web/packages/core/src/internal/player/inner.tsx

@@ -54,6 +54,11 @@ declare global {
     interface AudioSession {
         type?: string;
     }
+    // See https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1615
+    type OrientationLockType = "any" | "landscape" | "landscape-primary" | "landscape-secondary" | "natural" | "portrait" | "portrait-primary" | "portrait-secondary";
+    interface ScreenOrientation extends EventTarget {
+        lock(orientation: OrientationLockType): Promise<void>;
+    }
 }
 
 /**
@@ -1005,6 +1010,17 @@ export class InnerPlayer {
      * Called when entering / leaving fullscreen.
      */
     private fullScreenChange(): void {
+        // If fullScreenAspectRatio is specified, lock orientation in fullscreen mode if supported
+        if (this.isFullscreen) {
+            const fullScreenAspectRatio = this.loadedConfig?.fullScreenAspectRatio?.toLowerCase() ?? "";
+            if (fullScreenAspectRatio === "portrait" || fullScreenAspectRatio === "landscape") {
+                screen.orientation.lock(fullScreenAspectRatio).catch(() => {});
+            }
+	    } else {
+            try {
+                screen.orientation.unlock();
+            } catch { }
+        }
         this.instance?.set_fullscreen(this.isFullscreen);
     }
 
@@ -2088,6 +2104,10 @@ export function getPolyfillOptions(
     if (wmode !== null) {
         options.wmode = wmode as WindowMode;
     }
+    const fullScreenAspectRatio = getOptionString("fullScreenAspectRatio");
+    if (fullScreenAspectRatio !== null) {
+        options.fullScreenAspectRatio = fullScreenAspectRatio;
+    }
 
     return options;
 }

web/packages/core/src/public/config/default.ts

@@ -33,6 +33,7 @@ export const DEFAULT_CONFIG: Required<BaseLoadOptions> = {
     menu: true,
     allowFullscreen: false,
     salign: "",
+    fullScreenAspectRatio: "",
     forceAlign: false,
     quality: "high",
     scale: "showAll",

web/packages/core/src/public/config/load-options.ts

@@ -492,6 +492,13 @@ export interface BaseLoadOptions {
      */
     salign?: string;
 
+    /**
+     * Controls orientation on mobile in fullscreen mode.
+     *
+     * @default ""
+     */
+    fullScreenAspectRatio?: string;
+
     /**
      * If set to true, movies are prevented from changing the stage alignment.
      *