fix(BottomSheet): close BottomSheet on orientation change

Author: Botsy

src/common/index.js

@@ -24,7 +24,7 @@ const { default: useShell } = require('./useShell');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
-const useWindowSize = require('./useWindowSize');
+const { default: useOrientation } = require('./useOrientation');
 
 module.exports = {
     FileDropProvider,
@@ -56,5 +56,5 @@ module.exports = {
     useStreamingServer,
     useTorrent,
     useTranslate,
-    useWindowSize,
+    useOrientation,
 };

src/common/useOrientation.ts

@@ -0,0 +1,63 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useState, useEffect } from 'react';
+
+type DeviceOrientationData = {
+    alpha: number | null;
+    beta: number | null;
+    gamma: number | null;
+    absolute: boolean | null;
+    permissionGranted: boolean;
+};
+
+const useOrientation = () => {
+    const [orientation, setOrientation] = useState<DeviceOrientationData>({
+        alpha: null,
+        beta: null,
+        gamma: null,
+        absolute: null,
+        permissionGranted: false,
+    });
+
+    const requestPermission = async () => {
+        if (
+            typeof DeviceOrientationEvent !== 'undefined' &&
+            (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 }));
+        }
+    };
+
+    useEffect(() => {
+        const handleOrientationChange = (event: DeviceOrientationEvent) => {
+            setOrientation((prev) => ({
+                ...prev,
+                alpha: event.alpha ?? null,
+                beta: event.beta ?? null,
+                gamma: event.gamma ?? null,
+                absolute: event.absolute ?? null,
+            }));
+        };
+
+        if (orientation.permissionGranted && window.DeviceOrientationEvent) {
+            window.addEventListener('deviceorientation', handleOrientationChange);
+        }
+
+        return () => {
+            window.removeEventListener('deviceorientation', handleOrientationChange);
+        };
+    }, [orientation.permissionGranted]);
+
+    return { ...orientation, requestPermission };
+};
+
+export default useOrientation;

src/common/useWindowSize.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import useBinaryState from 'stremio/common/useBinaryState';
-import useWindowSize from 'stremio/common/useWindowSize';
+import useOrientation from 'stremio/common/useOrientation';
 import styles from './BottomSheet.less';
 
 const CLOSE_THRESHOLD = 100;
@@ -18,7 +18,7 @@ type Props = {
 
 const BottomSheet = ({ children, title, show, onClose }: Props) => {
     const containerRef = useRef<HTMLDivElement>(null);
-    const { width: windowWidth, height: windowHeight } = useWindowSize();
+    const orientation = useOrientation();
     const [startOffset, setStartOffset] = useState(0);
     const [offset, setOffset] = useState(0);
 
@@ -62,7 +62,7 @@ const BottomSheet = ({ children, title, show, onClose }: Props) => {
 
     useEffect(() => {
         opened && close();
-    }, [windowWidth, windowHeight]);
+    }, [orientation]);
 
     return opened && createPortal((
         <div className={styles['bottom-sheet']}>