refactor(useOrientation): refactor hook to not ask for permissions

src/common/useOrientation.ts

@@ -1,63 +1,34 @@
 // Copyright (C) 2017-2025 Smart code 203358507
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
-type DeviceOrientationData = {
+type DeviceOrientation = 'landscape' | 'portrait';
-    alpha: number | null;
-    beta: number | null;
-    gamma: number | null;
-    absolute: boolean | null;
-    permissionGranted: boolean;
-};
 
 const useOrientation = () => {
-    const [orientation, setOrientation] = useState<DeviceOrientationData>({
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-        alpha: null,
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-        beta: null,
-        gamma: null,
-        absolute: null,
-        permissionGranted: false,
-    });
 
-    const requestPermission = async () => {
+    const orientation: DeviceOrientation = useMemo(() => {
-        if (
+        if (windowHeight > windowWidth) {
-            typeof DeviceOrientationEvent !== 'undefined' &&
+            return 'portrait';
-            (DeviceOrientationEvent as any).requestPermission
-        ) {
-            try {
-                const permissionState = await (DeviceOrientationEvent as any).requestPermission();
-                if (permissionState === 'granted') {
-                    setOrientation((prev) => ({ ...prev, permissionGranted: true }));
-                }
-            } catch (error) {
-                console.error('Error requesting DeviceOrientation permission:', error);
-            }
         } else {
-            setOrientation((prev) => ({ ...prev, permissionGranted: true }));
+            return 'landscape';
         }
-    };
+    }, [windowWidth, windowHeight]);
 
     useEffect(() => {
-        const handleOrientationChange = (event: DeviceOrientationEvent) => {
+        const handleResize = () => {
-            setOrientation((prev) => ({
+            setWindowHeight(window.innerHeight);
-                ...prev,
+            setWindowWidth(window.innerWidth);
-                alpha: event.alpha ?? null,
-                beta: event.beta ?? null,
-                gamma: event.gamma ?? null,
-                absolute: event.absolute ?? null,
-            }));
         };
 
-        if (orientation.permissionGranted && window.DeviceOrientationEvent) {
+        window.addEventListener('resize', handleResize);
-            window.addEventListener('deviceorientation', handleOrientationChange);
-        }
-
         return () => {
-            window.removeEventListener('deviceorientation', handleOrientationChange);
+            window.removeEventListener('resize', handleResize);
         };
-    }, [orientation.permissionGranted]);
+    }, [window.innerWidth, window.innerHeight]);
 
-    return { ...orientation, requestPermission };
+    return { orientation };
 };
 
 export default useOrientation;