MOBILE-4975 core: Fix reading screen orientation too soon

Author: dpalou

src/core/components/tests/iframe.test.ts

@@ -22,6 +22,7 @@ describe('CoreIframeComponent', () => {
 
     beforeEach(() => {
         mockSingleton(CoreScreen, {
+            _orientationSignal: signal(CoreScreenOrientation.PORTRAIT), // eslint-disable-line @typescript-eslint/naming-convention
             orientationSignal: signal(CoreScreenOrientation.PORTRAIT).asReadonly(),
         });
     });

src/core/services/screen.ts

@@ -66,7 +66,7 @@ export class CoreScreenService {
 
     protected breakpointsSubject: BehaviorSubject<Record<Breakpoint, boolean>>;
     private _layoutObservable: Observable<CoreScreenLayout>;
-    private readonly _orientationSignal = signal<CoreScreenOrientation>(this.orientation);
+    private readonly _orientationSignal = signal<CoreScreenOrientation>(CoreScreenOrientation.PORTRAIT);
 
     constructor() {
         this.breakpointsSubject = new BehaviorSubject(BREAKPOINT_NAMES.reduce((breakpoints, breakpoint) => ({
@@ -78,6 +78,8 @@ export class CoreScreenService {
             map(breakpoints => this.calculateLayout(breakpoints)),
             distinctUntilChanged<CoreScreenLayout>(),
         );
+
+        this.initializeOrientation();
     }
 
     get breakpoints(): Record<Breakpoint, boolean> {
@@ -105,7 +107,12 @@ export class CoreScreenService {
     }
 
     get orientation(): CoreScreenOrientation {
-        return screen.orientation.type.startsWith(CoreScreenOrientation.LANDSCAPE)
+        if (!this.orientationDataExists()) {
+            // Not initialized yet, assume portrait.
+            return CoreScreenOrientation.PORTRAIT;
+        }
+
+        return screen.orientation.type?.startsWith(CoreScreenOrientation.LANDSCAPE)
             ? CoreScreenOrientation.LANDSCAPE
             : CoreScreenOrientation.PORTRAIT;
     }
@@ -203,6 +210,24 @@ export class CoreScreenService {
         return CoreScreenLayout.MOBILE;
     }
 
+    /**
+     * Initialize the orientation signal value.
+     */
+    protected async initializeOrientation(): Promise<void> {
+        await CorePlatform.ready();
+
+        this._orientationSignal.set(this.orientation);
+    }
+
+    /**
+     * Check if the orientation data exists.
+     *
+     * @returns Whether the orientation data exists.
+     */
+    protected orientationDataExists(): boolean {
+        return !!screen?.orientation;
+    }
+
 }
 
 export const CoreScreen = makeSingleton(CoreScreenService);