Client: Fixed screen orientation angle

packages/client/src/components/Layout/index.js

@@ -61,8 +61,14 @@ const StyledContainer = styled.div`
 `;
 
 const Layout = (props) => {
-  const { children, isTabletView, setIsTabletView, setWindowWidth, isFrame } =
-    props;
+  const {
+    children,
+    isTabletView,
+    setIsTabletView,
+    setWindowWidth,
+    setWindowAngle,
+    isFrame,
+  } = props;
 
   const [contentHeight, setContentHeight] = useState();
   const [isPortrait, setIsPortrait] = useState();
@@ -97,12 +103,23 @@ const Layout = (props) => {
     window.addEventListener("resize", onResize);
 
     if (isMobile || isTabletView || !isFrame) {
-      window.addEventListener("orientationchange", onOrientationChange);
+      if (window.screen?.orientation) {
+        window.screen.orientation.addEventListener(
+          "change",
+          onOrientationChange,
+        );
+      } else {
+        window.addEventListener("orientationchange", onOrientationChange);
+      }
     }
 
     return () => {
       window.removeEventListener("resize", onResize);
       window.removeEventListener("orientationchange", onOrientationChange);
+      window.screen?.orientation?.removeEventListener(
+        "change",
+        onOrientationChange,
+      );
     };
   }, [isTabletView]);
 
@@ -128,6 +145,9 @@ const Layout = (props) => {
     e.preventDefault();
     e.stopPropagation();
 
+    const angle = window.screen?.orientation?.angle ?? window.orientation ?? 0;
+
+    setWindowAngle(angle);
     setWindowWidth(window.innerWidth);
   };
 
@@ -149,12 +169,18 @@ Layout.propTypes = {
 };
 
 export default inject(({ settingsStore }) => {
-  const { isTabletView, setIsTabletView, setWindowWidth, isFrame } =
-    settingsStore;
-  return {
+  const {
     isTabletView,
     setIsTabletView,
     setWindowWidth,
     isFrame,
+    setWindowAngle,
+  } = settingsStore;
+  return {
+    isTabletView,
+    setIsTabletView,
+    setWindowWidth,
+    setWindowAngle,
+    isFrame,
   };
 })(observer(Layout));

packages/shared/store/SettingsStore.ts

@@ -316,6 +316,8 @@ class SettingsStore {
 
   windowWidth = window.innerWidth;
 
+  windowAngle = window.screen?.orientation?.angle ?? window.orientation ?? 0;
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -1085,6 +1087,10 @@ class SettingsStore {
     }
   };
 
+  setWindowAngle = (angle: number) => {
+    this.windowAngle = angle;
+  };
+
   setWindowWidth = (width: number) => {
     if (width <= deviceSize.mobile && this.windowWidth <= deviceSize.mobile)
       return;
@@ -1102,7 +1108,8 @@ class SettingsStore {
   }
 
   get deviceType() {
-    const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
+    const angleByRadians = (Math.PI / 180) * this.windowAngle;
+
     const width = Math.abs(
       Math.round(
         Math.sin(angleByRadians) * window.innerHeight +

packages/shared/utils/device.ts

@@ -53,7 +53,9 @@ export const isMobile = (width?: number) => {
 };
 
 export const isMobileDevice = () => {
-  const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
+  const angleByRadians =
+    (Math.PI / 180) *
+    (window.screen?.orientation?.angle ?? window.orientation ?? 0);
   const width = Math.abs(
     Math.round(
       Math.sin(angleByRadians) * window.innerHeight +