add hide button and remember unsupported device (#877)

ir-engine · Dec 24, 2024 · 9f57597 · 9f57597
1 parent 13804ea
commit 9f57597
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/packages/client-core/src/components/modals/UnsupportedBrowser.tsx b/packages/client-core/src/components/modals/UnsupportedBrowser.tsx
@@ -24,7 +24,7 @@ Infinite Reality Engine. All Rights Reserved.
 */
 
 import { PopoverState } from '@ir-engine/client-core/src/common/services/PopoverState'
-import { getMutableState, useHookstate } from '@ir-engine/hyperflux'
+import { getMutableState } from '@ir-engine/hyperflux'
 import { Button } from '@ir-engine/ui'
 import Modal from '@ir-engine/ui/src/primitives/tailwind/Modal'
 import Text from '@ir-engine/ui/src/primitives/tailwind/Text'
@@ -38,10 +38,8 @@ const downloadGoogleLink = 'https://www.google.com/chrome/dr/download'
 export const UnsupportedBrowser = () => {
   const { t } = useTranslation()
 
-  const { acknowledgedUnsupportedBrowser } = useHookstate(getMutableState(BrowserSupportState))
-
   const handleClose = () => {
-    acknowledgedUnsupportedBrowser.set(true)
+    getMutableState(BrowserSupportState).acknowledgedUnsupportedBrowser.set(true)
     PopoverState.hidePopupover()
   }
 

diff --git a/packages/client-core/src/components/modals/UnsupportedDevice.tsx b/packages/client-core/src/components/modals/UnsupportedDevice.tsx
@@ -23,15 +23,24 @@ All portions of the code written by the Infinite Reality Engine team are Copyrig
 Infinite Reality Engine. All Rights Reserved.
 */
 
+import { getMutableState } from '@ir-engine/hyperflux'
+import { Button } from '@ir-engine/ui'
 import Modal from '@ir-engine/ui/src/primitives/tailwind/Modal'
 import Text from '@ir-engine/ui/src/primitives/tailwind/Text'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiOutlineExclamationTriangle } from 'react-icons/hi2'
+import { PopoverState } from '../../common/services/PopoverState'
+import { BrowserSupportState } from '../../hooks/useUnsupported'
 
 export const UnsupportedDevice = () => {
   const { t } = useTranslation()
 
+  const handleClose = () => {
+    getMutableState(BrowserSupportState).acknowledgedUnsupportedDevice.set(true)
+    PopoverState.hidePopupover()
+  }
+
   return (
     <Modal className="w-10/12 md:w-6/12" hideFooter>
       <div className="flex flex-col rounded-lg bg-[#0e0f11] px-5 py-10 text-center">
@@ -46,6 +55,9 @@ export const UnsupportedDevice = () => {
         <Text fontSize="lg" className="mt-4 text-[#b2b5bd]">
           {t('common:unsupportedDevice.description')}
         </Text>
+        <div className="mt-10 flex justify-between">
+          <Button onClick={handleClose}>{t('common:unsupportedDevice.continue')}</Button>
+        </div>
       </div>
     </Modal>
   )

diff --git a/packages/client-core/src/hooks/useUnsupported.tsx b/packages/client-core/src/hooks/useUnsupported.tsx
@@ -24,7 +24,7 @@ Infinite Reality Engine. All Rights Reserved.
 */
 
 import { PopoverState } from '@ir-engine/client-core/src/common/services/PopoverState'
-import { defineState, syncStateWithLocalStorage, useMutableState } from '@ir-engine/hyperflux'
+import { defineState, getState, isDev, syncStateWithLocalStorage } from '@ir-engine/hyperflux'
 import { isMobile } from '@ir-engine/spatial/src/common/functions/isMobile'
 import React, { useEffect } from 'react'
 import { NotificationService } from '../common/services/NotificationService'
@@ -34,9 +34,10 @@ import { UnsupportedDevice } from '../components/modals/UnsupportedDevice'
 export const BrowserSupportState = defineState({
   name: 'ir.client-core.BrowserSupportState',
   initial: () => ({
-    acknowledgedUnsupportedBrowser: false
+    acknowledgedUnsupportedBrowser: isDev,
+    acknowledgedUnsupportedDevice: isDev
   }),
-  extension: syncStateWithLocalStorage(['acknowledgedUnsupportedBrowser'])
+  extension: syncStateWithLocalStorage(['acknowledgedUnsupportedBrowser', 'acknowledgedUnsupportedDevice'])
 })
 
 type Props = {
@@ -45,16 +46,13 @@ type Props = {
 }
 
 export const useUnsupported = ({ device = false, browser = false }: Props) => {
-  const acknowledged = useMutableState(BrowserSupportState).acknowledgedUnsupportedBrowser.value
-
   useEffect(() => {
-    if (acknowledged) return
-
-    if (isMobile && device) {
+    const { acknowledgedUnsupportedBrowser, acknowledgedUnsupportedDevice } = getState(BrowserSupportState)
+    if (!acknowledgedUnsupportedDevice && isMobile && device) {
       PopoverState.showPopupover(<UnsupportedDevice />)
       return
     }
-    if (!isSupportedBrowser() && browser) {
+    if (!acknowledgedUnsupportedBrowser && !isSupportedBrowser() && browser) {
       PopoverState.showPopupover(<UnsupportedBrowser />)
       return
     }
@@ -70,17 +68,16 @@ export const isSupportedBrowser = () => {
 }
 
 export const useBrowserCheck = () => {
-  const acknowledged = useMutableState(BrowserSupportState).acknowledgedUnsupportedBrowser.value
-
   useEffect(() => {
-    if (!isSupportedBrowser() && !acknowledged) {
+    const { acknowledgedUnsupportedBrowser, acknowledgedUnsupportedDevice } = getState(BrowserSupportState)
+    if (!isSupportedBrowser() && !acknowledgedUnsupportedBrowser) {
       NotificationService.dispatchNotify(
         'The browser you are on is not supported. For the best experience please use Google Chrome.',
         { variant: 'warning' }
       )
     }
 
-    if (isMobile) {
+    if (isMobile && !acknowledgedUnsupportedDevice) {
       NotificationService.dispatchNotify(
         'Not optimized for mobile, experience might have issues. For best experience use desktop Chrome.',
         {