Merge pull request #847 from Stremio/fix/hide-calendar-bottom-sheet-on-resize

Calendar: Close BottomSheet on screen rotation

src/common/index.js

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

src/common/useOrientation.ts

@@ -0,0 +1,34 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useState, useEffect, useMemo } from 'react';
+
+type DeviceOrientation = 'landscape' | 'portrait';
+
+const useOrientation = () => {
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+    const orientation: DeviceOrientation = useMemo(() => {
+        if (windowHeight > windowWidth) {
+            return 'portrait';
+        } else {
+            return 'landscape';
+        }
+    }, [windowWidth, windowHeight]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+            setWindowWidth(window.innerWidth);
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [window.innerWidth, window.innerHeight]);
+
+    return orientation;
+};
+
+export default useOrientation;

src/components/BottomSheet/BottomSheet.tsx

@@ -4,6 +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 useOrientation from 'stremio/common/useOrientation';
 import styles from './BottomSheet.less';
 
 const CLOSE_THRESHOLD = 100;
@@ -17,6 +18,7 @@ type Props = {
 
 const BottomSheet = ({ children, title, show, onClose }: Props) => {
     const containerRef = useRef<HTMLDivElement>(null);
+    const orientation = useOrientation();
     const [startOffset, setStartOffset] = useState(0);
     const [offset, setOffset] = useState(0);
 
@@ -58,6 +60,10 @@ const BottomSheet = ({ children, title, show, onClose }: Props) => {
         !opened && onClose();
     }, [opened]);
 
+    useEffect(() => {
+        opened && close();
+    }, [orientation]);
+
     return opened && createPortal((
         <div className={styles['bottom-sheet']}>
             <div className={styles['backdrop']} onClick={onCloseRequest} />