agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/components/precall/VideoPreview.tsx

@@ -0,0 +1,33 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React from 'react';
+import {View} from 'react-native';
+import {MaxVideoView} from '../../../agora-rn-uikit';
+import useUserList from '../../utils/useUserList';
+
+const VideoPreview: React.FC = () => {
+  const {renderList, renderPosition} = useUserList();
+
+  const [maxUid] = renderPosition;
+
+  if (!maxUid) {
+    return null;
+  }
+
+  return (
+    <View style={{borderRadius: 10, flex: 1}}>
+      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+    </View>
+  );
+};
+export default VideoPreview;

package/template/src/components/precall/index.tsx

@@ -0,0 +1,28 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import PreCallLocalMute, {PreCallLocalMuteComponentsArray} from './LocalMute';
+import PreCallVideoPreview from './VideoPreview';
+import PreCallSelectDevice from './selectDevice';
+import PreCallJoinBtn, {PreCallJoinCallBtnProps} from './joinCallBtn';
+import PreCallTextInput from './textInput';
+import PreCallMeetingTitle from './meetingTitle';
+export {
+  PreCallLocalMuteComponentsArray,
+  PreCallLocalMute,
+  PreCallVideoPreview,
+  PreCallSelectDevice,
+  PreCallJoinBtn,
+  PreCallTextInput,
+  PreCallMeetingTitle,
+};
+export type {PreCallJoinCallBtnProps};

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -0,0 +1,69 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {useContext, useEffect} from 'react';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import {usePreCall} from '../../components/precall/usePreCall';
+import {useString} from '../../utils/useString';
+import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
+import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useGetName from '../../utils/useGetName';
+
+export interface PreCallJoinCallBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive} = usePreCall();
+  const username = useGetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+  const joinRoomButton =
+    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+
+  const [buttonText, setButtonText] = React.useState(
+    joinRoomButton({
+      ready: isJoinDataFetched,
+      role: $config.EVENT_MODE ? rtcProps.role : undefined,
+    }),
+  );
+  useEffect(() => {
+    if (rtcProps?.role) {
+      setButtonText(
+        joinRoomButton({
+          ready: isJoinDataFetched,
+          role: $config.EVENT_MODE ? rtcProps.role : undefined,
+        }),
+      );
+    }
+  }, [rtcProps?.role]);
+
+  const onSubmit = () => {
+    setCallActive(true);
+  };
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = !isJoinDataFetched || username === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+  );
+};
+
+export default JoinCallBtn;

package/template/src/components/precall/joinCallBtn.tsx

@@ -0,0 +1,91 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {useContext, useEffect} from 'react';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import {usePreCall} from '../../components/precall/usePreCall';
+import {useString} from '../../utils/useString';
+import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
+import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useGetName from '../../utils/useGetName';
+import {useWakeLock} from '../../components/useWakeLock';
+import isMobileOrTablet from '../../utils/isMobileOrTablet';
+import {isWeb} from '../../utils/common';
+
+const audio = new Audio(
+  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
+);
+
+export interface PreCallJoinCallBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive} = usePreCall();
+  const username = useGetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+  const {awake, request} = useWakeLock();
+  const joinRoomButton =
+    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+
+  const [buttonText, setButtonText] = React.useState(
+    joinRoomButton({
+      ready: isJoinDataFetched,
+      role: $config.EVENT_MODE ? rtcProps.role : undefined,
+    }),
+  );
+
+  const onSubmit = () => {
+    setCallActive(true);
+    // Play a sound to avoid autoblocking in safari
+    if (isWeb || isMobileOrTablet()) {
+      audio.volume = 0;
+      audio.play().then(() => {
+        // pause directly once played
+        audio.pause();
+      });
+    }
+    // Avoid Sleep only on mobile browsers
+    if (isWeb && isMobileOrTablet() && !awake) {
+      // Request wake lock
+      request();
+    }
+  };
+
+  useEffect(() => {
+    if (rtcProps?.role) {
+      setButtonText(
+        joinRoomButton({
+          ready: isJoinDataFetched,
+          role: $config.EVENT_MODE ? rtcProps.role : undefined,
+        }),
+      );
+    }
+  }, [rtcProps?.role]);
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = !isJoinDataFetched || username === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+  );
+};
+
+export default JoinCallBtn;

package/template/src/components/precall/meetingTitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+
+const MeetingTitle: React.FC = () => {
+  const {meetingTitle} = useMeetingInfo();
+  return (
+    <>
+      <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
+        {meetingTitle}
+      </Text>
+      <View style={{height: 50}} />
+    </>
+  );
+};
+
+export default MeetingTitle;
+
+const style = StyleSheet.create({
+  titleHeading: {
+    fontSize: 28,
+    fontWeight: '700',
+    textAlign: 'center',
+    color: $config.SECONDARY_FONT_COLOR,
+  },
+});

package/template/src/components/precall/selectDevice.tsx

@@ -0,0 +1,46 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {isWeb} from '../../utils/common';
+import SelectDevice from '../../subComponents/SelectDevice';
+import {useString} from '../../utils/useString';
+
+const selectDevice: React.FC = () => {
+  //commented for v1 release
+  //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
+  const selectInputDeviceLabel = 'Select Input Device';
+  return (
+    <>
+      <Text style={style.subHeading}>{selectInputDeviceLabel}</Text>
+      <View
+        style={{
+          flex: 1,
+          maxWidth: isWeb ? '25vw' : 'auto',
+          marginVertical: 30,
+        }}>
+        <SelectDevice />
+      </View>
+    </>
+  );
+};
+
+export default selectDevice;
+
+const style = StyleSheet.create({
+  subHeading: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+  },
+});

package/template/src/components/precall/textInput.tsx

@@ -0,0 +1,43 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React from 'react';
+import TextInput from '../../atoms/TextInput';
+import {useString} from '../../utils/useString';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useSetName from '../../utils/useSetName';
+import useGetName from '../../utils/useGetName';
+
+const PreCallTextInput: React.FC = () => {
+  //commented for v1 release
+  // const userNamePlaceholder = useString('userNamePlaceholder')();
+  // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
+  const userNamePlaceholder = 'Display name*';
+  const fetchingNamePlaceholder = 'Getting name...';
+  const username = useGetName();
+  const setUsername = useSetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+
+  return (
+    <TextInput
+      value={username}
+      onChangeText={(text) => setUsername(text ? text.trim() : '')}
+      onSubmitEditing={() => {}}
+      placeholder={
+        isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder
+      }
+      editable={isJoinDataFetched}
+    />
+  );
+};
+
+export default PreCallTextInput;

package/template/src/components/precall/usePreCall.tsx

@@ -0,0 +1,41 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {createContext} from 'react';
+import {createHook} from 'fpe-implementation';
+import {ApolloError} from '@apollo/client';
+
+export interface PreCallContextInterface {
+  callActive: boolean;
+  setCallActive: React.Dispatch<React.SetStateAction<boolean>>;
+  error?: ApolloError;
+}
+
+const PreCallContext = createContext<PreCallContextInterface>({
+  callActive: false,
+  setCallActive: () => {},
+});
+
+interface PreCallProviderProps {
+  value: PreCallContextInterface;
+  children: React.ReactNode;
+}
+
+const PreCallProvider = (props: PreCallProviderProps) => {
+  return (
+    <PreCallContext.Provider value={{...props.value}}>
+      {props.children}
+    </PreCallContext.Provider>
+  );
+};
+const usePreCall = createHook(PreCallContext);
+
+export {PreCallProvider, usePreCall};

package/template/src/components/styles.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {Platform} from 'react-native';
+import {isWeb} from '../utils/common';
 
 const styles = {
   temp: {
@@ -19,8 +19,8 @@ const styles = {
     borderRadius: 15,
   },
   bottomBar: {
-    flex: Platform.OS === 'web' ? 1.3 : 1.6,
-    paddingHorizontal: Platform.OS === 'web' ? '20%' : '1%',
+    flex: isWeb ? 1.3 : 1.6,
+    paddingHorizontal: isWeb ? '20%' : '1%',
     backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
     flexDirection: 'row',
     justifyContent: 'space-evenly',
@@ -41,6 +41,23 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  localButtonWithoutBG: {
+    borderRadius: 23,
+    borderColor: $config.PRIMARY_COLOR,
+    borderWidth: 0,
+    width: 40,
+    height: 40,
+    padding: 3,
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fullWidthButton: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
   endCall: {
     backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
     borderRadius: 23,

package/template/src/components/useShareLink.tsx

@@ -0,0 +1,222 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import {createHook} from 'fpe-implementation';
+import React from 'react';
+import {useString} from '../utils/useString';
+import isSDKCheck from '../utils/isSDK';
+import Toast from '../../react-native-toast-message';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import platform from '../subComponents/Platform';
+import {
+  GetMeetingInviteID,
+  GetMeetingInviteURL,
+} from '../utils/getMeetingInvite';
+import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
+import Clipboard from '../subComponents/Clipboard';
+
+export enum SHARE_LINK_CONTENT_TYPE {
+  ATTENDEE,
+  HOST,
+  PSTN,
+  MEETING_INVITE,
+}
+
+export interface ShareLinkContextInterface {
+  copyShareLinkToClipboard: (type: SHARE_LINK_CONTENT_TYPE) => void;
+  getShareLink: (type: SHARE_LINK_CONTENT_TYPE) => string;
+}
+const ShareLinkContext = React.createContext<ShareLinkContextInterface>({
+  copyShareLinkToClipboard: () => {},
+  getShareLink: () => '',
+});
+
+interface ShareLinkProvideProps {
+  children: React.ReactNode;
+}
+
+const ShareLinkProvider = (props: ShareLinkProvideProps) => {
+  const {meetingTitle, meetingPassphrase, isSeparateHostLink} =
+    useMeetingInfo();
+
+  //commmented for v1 release
+  // const copiedToClipboardText = useString(
+  //   'copiedToClipboardNotificationLabel',
+  // )();
+  // const meetingIdText = useString('meetingIdLabel')();
+  // const PSTNNumberText = useString('PSTNNumber')();
+  // const PSTNPinText = useString('PSTNPin')();
+  // const meetingInviteText =
+  //   useString<MeetingInviteInterface>('meetingInviteText');
+  const copiedToClipboardText = 'Copied to Clipboard';
+  const meetingIdText = 'Meeting ID';
+  const PSTNNumberText = 'PSTN Number';
+  const PSTNPinText = 'PSTN Pin';
+  const meetingInviteText = ({meetingName, id, url, pstn}) => {
+    let inviteContent = '';
+    if (url) {
+      // if host data is present generate links for both host and attendee
+      if (url?.host) {
+        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
+      }
+      // if host data is not present then generate link for attendee alone
+      else {
+        inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.attendee}`;
+      }
+    } else {
+      // if host data is present generate meeting ID for both host and attendee
+      if (id?.host) {
+        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
+      }
+      // if host data is not present then generate meeting ID for attendee alone
+      else {
+        inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.attendee}`;
+      }
+    }
+    // Adding pstn data into meeting data if present
+    if (pstn?.number && pstn?.pin) {
+      inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
+    }
+    return inviteContent;
+  };
+
+  const isSDK = isSDKCheck();
+
+  const getMeetingInvite = () => {
+    let baseURL = getBaseURL();
+    let stringToCopy = meetingInviteText({
+      meetingName: meetingTitle,
+      url: baseURL
+        ? GetMeetingInviteURL(
+            baseURL,
+            meetingPassphrase.attendee,
+            isSeparateHostLink ? meetingPassphrase.host : undefined,
+          )
+        : undefined,
+      id: !baseURL
+        ? GetMeetingInviteID(
+            meetingPassphrase.attendee,
+            isSeparateHostLink ? meetingPassphrase.host : undefined,
+          )
+        : undefined,
+      pstn: meetingPassphrase?.pstn
+        ? {
+            number: meetingPassphrase.pstn.number,
+            pin: meetingPassphrase.pstn.pin,
+          }
+        : undefined,
+    });
+    return stringToCopy;
+  };
+
+  const getBaseURL = () => {
+    let baseURL =
+      platform === 'web' && !isSDK
+        ? $config.FRONTEND_ENDPOINT || window.location.origin
+        : undefined;
+    return baseURL;
+  };
+
+  const getAttendeeURLOrId = () => {
+    let stringToCopy = '';
+    let baseURL = getBaseURL();
+    if (meetingPassphrase?.attendee) {
+      if (baseURL) {
+        stringToCopy += `${baseURL}/${meetingPassphrase.attendee}`;
+      } else {
+        stringToCopy += `${meetingIdText}: ${meetingPassphrase.attendee}`;
+      }
+    }
+    return stringToCopy;
+  };
+
+  const getHostUrlOrId = () => {
+    let stringToCopy = '';
+    if (meetingPassphrase?.host) {
+      let baseURL = getBaseURL();
+      if (baseURL) {
+        stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
+      } else {
+        stringToCopy += `${meetingIdText}: ${meetingPassphrase.host}`;
+      }
+    }
+    return stringToCopy;
+  };
+
+  const getPstn = () => {
+    let stringToCopy = '';
+    if (
+      meetingPassphrase?.pstn &&
+      meetingPassphrase.pstn?.number &&
+      meetingPassphrase.pstn?.pin
+    ) {
+      stringToCopy += `${PSTNNumberText}: ${meetingPassphrase.pstn.number} ${PSTNPinText}: ${meetingPassphrase.pstn.pin}`;
+    }
+
+    return stringToCopy;
+  };
+
+  const getShareLink = (input: SHARE_LINK_CONTENT_TYPE) => {
+    let stringToCopy = '';
+    switch (input) {
+      case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
+        stringToCopy = getMeetingInvite();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.ATTENDEE:
+        stringToCopy = getAttendeeURLOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.HOST:
+        stringToCopy = getHostUrlOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.PSTN:
+        stringToCopy = getPstn();
+      default:
+        break;
+    }
+    return stringToCopy;
+  };
+
+  const copyShareLinkToClipboard = (input: SHARE_LINK_CONTENT_TYPE) => {
+    let stringToCopy = '';
+    switch (input) {
+      case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
+        stringToCopy = getMeetingInvite();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.ATTENDEE:
+        stringToCopy = getAttendeeURLOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.HOST:
+        stringToCopy = getHostUrlOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.PSTN:
+        stringToCopy = getPstn();
+      default:
+        break;
+    }
+    Clipboard.setString(stringToCopy);
+    Toast.show({
+      type: 'success',
+      text1: copiedToClipboardText,
+      visibilityTime: 1000,
+    });
+  };
+
+  return (
+    <ShareLinkContext.Provider value={{copyShareLinkToClipboard, getShareLink}}>
+      {props.children}
+    </ShareLinkContext.Provider>
+  );
+};
+
+const useShareLink = createHook(ShareLinkContext);
+
+export {ShareLinkProvider, ShareLinkContext, useShareLink};

package/template/src/components/useWakeLock.tsx

@@ -1,10 +1,10 @@
 import NoSleep from 'nosleep.js';
 import React from 'react';
-import {Platform} from 'react-native';
-import mobileAndTabletCheck from '../utils/mobileWebTest';
+import mobileAndTabletCheck from '../utils/isMobileOrTablet';
+import {isWeb} from '../utils/common';
 
 const useWakeLock = () => {
-  if (mobileAndTabletCheck() && Platform.OS == 'web') {
+  if (mobileAndTabletCheck() && isWeb) {
     const noSleep = React.useMemo(() => new NoSleep(), []);
     const [awake, set] = React.useState(noSleep.isEnabled);