From eda2a8e64a2b6b37bb3a54a0b14b4c2094be58ba Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Thu, 19 Oct 2023 18:59:26 +0530 Subject: [PATCH 1/3] fix: add fallback for orientation check --- .../src/Prebuilt/components/MwebLandscapePrompt.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx index c95663e071..1f25905fe6 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx @@ -10,8 +10,8 @@ export const MwebLandscapePrompt = () => { useEffect(() => { const handleRotation = () => { - const angle = window.screen.orientation.angle; - const type = window.screen.orientation.type; + const angle = window?.screen?.orientation?.angle || 0; + const type = window.screen?.orientation?.type || ''; // Angle check needed to diff bw mobile and desktop setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape')); }; From b5ac3513ea6664ea4d7699921bc0a9c1d64f0875 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Thu, 19 Oct 2023 19:08:40 +0530 Subject: [PATCH 2/3] fix: fallback landscape check for ios safari --- .../src/Prebuilt/components/MwebLandscapePrompt.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx index 1f25905fe6..46ef3d8cb0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx @@ -1,19 +1,24 @@ import React, { useEffect, useState } from 'react'; +import { useMedia } from 'react-use'; import { RefreshIcon } from '@100mslive/react-icons'; import { Button } from '../../Button'; import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; import { Text } from '../../Text'; +import { config as cssConfig } from '../../Theme'; +// @ts-ignore +import { isIOS, isSafari } from '../common/constants'; export const MwebLandscapePrompt = () => { const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false); + const isLandscape = useMedia(cssConfig.media.ls); useEffect(() => { const handleRotation = () => { const angle = window?.screen?.orientation?.angle || 0; const type = window.screen?.orientation?.type || ''; // Angle check needed to diff bw mobile and desktop - setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape')); + setShowMwebLandscapePrompt(isIOS && isSafari ? isLandscape : angle >= 90 && type.includes('landscape')); }; handleRotation(); window.screen.orientation.addEventListener('change', handleRotation); From e472eb329c26a45b956066eecaac202e7a8098bb Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Thu, 19 Oct 2023 19:37:03 +0530 Subject: [PATCH 3/3] fix: update check --- .../src/Prebuilt/components/MwebLandscapePrompt.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx index 46ef3d8cb0..4cb4a3882b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx @@ -6,8 +6,6 @@ import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; import { Text } from '../../Text'; import { config as cssConfig } from '../../Theme'; -// @ts-ignore -import { isIOS, isSafari } from '../common/constants'; export const MwebLandscapePrompt = () => { const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false); @@ -15,10 +13,10 @@ export const MwebLandscapePrompt = () => { useEffect(() => { const handleRotation = () => { - const angle = window?.screen?.orientation?.angle || 0; + const angle = window?.screen?.orientation?.angle; const type = window.screen?.orientation?.type || ''; // Angle check needed to diff bw mobile and desktop - setShowMwebLandscapePrompt(isIOS && isSafari ? isLandscape : angle >= 90 && type.includes('landscape')); + setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape); }; handleRotation(); window.screen.orientation.addEventListener('change', handleRotation);