agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -0,0 +1,173 @@
+import {StyleSheet, Text, View, Linking, TouchableOpacity} from 'react-native';
+import React, {useEffect, useRef, useContext} from 'react';
+import {
+  isAndroid,
+  isIOS,
+  isWebInternal,
+  useResponsive,
+} from '../../utils/common';
+import {
+  LocalContext,
+  PermissionState,
+  ImageIcon as UiKitImageIcon,
+} from '../../../agora-rn-uikit';
+import ThemeConfig from '../../theme';
+import {useContent} from 'customization-api';
+import {usePreCall} from './usePreCall';
+import ImageIcon from '../../atoms/ImageIcon';
+import Spacer from '../../atoms/Spacer';
+import Toast from '../../../react-native-toast-message';
+import {useString} from '../../utils/useString';
+import {
+  permissionPopupErrorToastHeading,
+  permissionPopupErrorToastSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
+
+const VideoFallback = () => {
+  const toastHeading = useString<boolean>(permissionPopupErrorToastHeading);
+  const toastSubHeading = useString<boolean>(
+    permissionPopupErrorToastSubHeading,
+  );
+
+  const {isCameraAvailable, isMicAvailable} = usePreCall();
+  const toastRef = useRef({isShown: false});
+  const local = useContext(LocalContext);
+  const requestCameraAndAudioPermission = () => {
+    try {
+      const URL =
+        'https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DDesktop';
+      if (isWebInternal()) {
+        window.open(URL, '_blank');
+      } else {
+        Linking.openURL(URL);
+      }
+    } catch (error) {
+      console.error(`Couldn't open the support url`);
+    }
+  };
+
+  const styles = useStyles();
+  useEffect(() => {
+    // camera not avaialble popup is not shown for native devices
+    if (isAndroid() || isIOS()) return;
+    if (
+      !(
+        isCameraAvailable ||
+        ($config.AUDIO_ROOM && isMicAvailable) ||
+        local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        local.permissionStatus === PermissionState.REQUESTED
+      ) &&
+      toastRef.current.isShown === false
+    ) {
+      toastRef.current.isShown = true;
+      Toast.show({
+        type: 'warn',
+        text1: toastHeading($config.AUDIO_ROOM),
+        text2: toastSubHeading($config.AUDIO_ROOM),
+        visibilityTime: 10000,
+      });
+    }
+  }, [local, isCameraAvailable, isMicAvailable]);
+
+  return (
+    <View style={styles.fallbackRootContainer}>
+      {
+        // isCameraAvailable ||
+        // ($config.AUDIO_ROOM && isMicAvailable) ||
+        // local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        // local.permissionStatus === PermissionState.REQUESTED
+        true ? (
+          <View style={styles.avatar}>
+            <UiKitImageIcon name={'profile'} />
+          </View>
+        ) : (
+          <View style={styles.fallbackContainer}>
+            <Text style={styles.infoText1}>
+              Can’t Find Your{$config.AUDIO_ROOM ? ' Microphone' : ' Camera'}
+            </Text>
+            <Text style={styles.infoText2}>
+              Check your system settings to make sure that a
+              {$config.AUDIO_ROOM ? ' microphone' : ' camera'} is available. If
+              not, plug one in and restart your browser.
+            </Text>
+            <Spacer size={33} />
+            <TouchableOpacity
+              style={{
+                flexDirection: 'row',
+                alignSelf: 'center',
+              }}
+              onPress={() => {
+                requestCameraAndAudioPermission();
+              }}>
+              <Text style={styles.retryBtn}>Learn More</Text>
+              <Spacer horizontal={true} size={4} />
+              <View style={{alignSelf: 'center'}}>
+                <ImageIcon
+                  iconType="plain"
+                  name={'link-share'}
+                  tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+                />
+              </View>
+            </TouchableOpacity>
+            <Spacer size={23} />
+          </View>
+        )
+      }
+    </View>
+  );
+};
+
+export default VideoFallback;
+
+const useStyles = () => {
+  const getResponsiveValue = useResponsive();
+  return StyleSheet.create({
+    infoText1: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '700',
+      fontSize: 20,
+      textAlign: 'center',
+      color: $config.FONT_COLOR,
+      paddingTop: 24,
+      paddingBottom: 12,
+      paddingHorizontal: 10,
+    },
+    infoText2: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '400',
+      fontSize: ThemeConfig.FontSize.small,
+      textAlign: 'center',
+      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+      paddingHorizontal: getResponsiveValue(48),
+    },
+    fallbackRootContainer: {
+      flex: 1,
+      backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    },
+    fallbackContainer: {
+      minHeight: 200,
+      maxWidth: 440,
+      backgroundColor: $config.CARD_LAYER_4_COLOR,
+      borderRadius: ThemeConfig.BorderRadius.large,
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: 40,
+    },
+    retryBtn: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '600',
+      fontSize: ThemeConfig.FontSize.normal,
+      color: $config.PRIMARY_ACTION_BRAND_COLOR,
+      alignSelf: 'center',
+    },
+    avatar: {
+      width: 100,
+      height: 100,
+      margin: 40,
+    },
+  });
+};

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

@@ -10,16 +10,16 @@
 *********************************************
 */
 
-import {useRender, useRtc} from 'customization-api';
+import {useContent, useRtc} from 'customization-api';
 import React from 'react';
-import {View} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
+import VideoFallback from './VideoFallback';
 
-const VideoPreview: React.FC = () => {
+const VideoPreview = () => {
   const rtc = useRtc();
-  rtc?.RtcEngine?.startPreview();
+  rtc?.RtcEngineUnsafe?.startPreview();
 
-  const {renderList, activeUids} = useRender();
+  const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;
 
   if (!maxUid) {
@@ -27,9 +27,20 @@ const VideoPreview: React.FC = () => {
   }
 
   return (
-    <View style={{borderRadius: 10, flex: 1}}>
-      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
-    </View>
+    <MaxVideoView
+      user={defaultContent[maxUid]}
+      key={maxUid}
+      fallback={VideoFallback}
+      containerStyle={{
+        width: '100%',
+        height: '100%',
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        overflow: 'hidden',
+      }}
+      isFullView={true}
+    />
   );
 };
+
 export default VideoPreview;

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

@@ -10,24 +10,45 @@
 *********************************************
 */
 
-import {useRender} from 'customization-api';
 import React from 'react';
-import {View} from 'react-native';
+
 import {MaxVideoView} from '../../../agora-rn-uikit';
 
-const VideoPreview: React.FC = () => {
-  const {renderList, activeUids} = useRender();
+import {useContent} from 'customization-api';
+
+import VideoFallback from './VideoFallback';
+import {isMobileUA} from '../../utils/common';
 
+const VideoPreview = () => {
+  const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;
+  const isMobileView = isMobileUA();
+
+  const mobileContainerStyle = {
+    borderRadius: 0,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  };
 
   if (!maxUid) {
     return null;
   }
 
   return (
-    <View style={{borderRadius: 10, flex: 1}}>
-      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
-    </View>
+    <MaxVideoView
+      user={defaultContent[maxUid]}
+      key={maxUid}
+      fallback={VideoFallback}
+      containerStyle={{
+        minHeight: 200,
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+        ...(isMobileView ? mobileContainerStyle : {}),
+      }}
+      isFullView={true}
+    />
   );
 };
+
 export default VideoPreview;

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

@@ -16,6 +16,7 @@ import PreCallSelectDevice from './selectDevice';
 import PreCallJoinBtn, {PreCallJoinCallBtnProps} from './joinCallBtn';
 import PreCallTextInput from './textInput';
 import PreCallMeetingTitle from './meetingTitle';
+import JoinWaitingRoomBtn from './joinWaitingRoomBtn';
 export {
   PreCallLocalMuteComponentsArray,
   PreCallLocalMute,
@@ -24,5 +25,6 @@ export {
   PreCallJoinBtn,
   PreCallTextInput,
   PreCallMeetingTitle,
+  JoinWaitingRoomBtn,
 };
 export type {PreCallJoinCallBtnProps};

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

@@ -15,9 +15,13 @@ 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 {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
+import {useUserPreference} from '../useUserPreference';
 
 export interface PreCallJoinCallBtnProps {
   render?: (
@@ -31,12 +35,13 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
-
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const {saveName} = useUserPreference();
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
@@ -45,6 +50,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),
@@ -53,6 +59,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   }, [rtcProps?.role]);
 
   const onSubmit = () => {
+    saveName(username?.trim());
     setCallActive(true);
   };
 

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

@@ -15,12 +15,18 @@ 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 {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 import {useWakeLock} from '../../components/useWakeLock';
 import isMobileOrTablet from '../../utils/isMobileOrTablet';
 import {isWebInternal} from '../../utils/common';
+import useSetName from '../../utils/useSetName';
+import {useUserPreference} from '../useUserPreference';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -38,20 +44,31 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const setUsername = useSetName();
+  const {isJoinDataFetched} = useRoomInfo();
   const {awake, request} = useWakeLock();
+  const {saveName} = useUserPreference();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
 
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
   );
 
   const onSubmit = () => {
+    logger.log(
+      LogSource.Internals,
+      'PRECALL_SCREEN',
+      'User clicked on join call button. setting call active to true',
+    );
+    setUsername(username.trim());
     setCallActive(true);
+    //updating name in the backend
+    saveName(username.trim());
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
@@ -71,6 +88,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),
@@ -80,11 +98,21 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username === '';
+  const disabled = !isJoinDataFetched || username?.trim() === '';
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (
-    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+    <PrimaryButton
+      // iconName={'video-on'}
+      onPress={onPress}
+      disabled={disabled}
+      text={title}
+      containerStyle={{
+        minWidth: '100%',
+        paddingHorizontal: 10,
+      }}
+      textStyle={{textAlign: 'center'}}
+    />
   );
 };
 

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

@@ -0,0 +1,215 @@
+/*
+********************************************
+ 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 './usePreCall';
+import {useString, useStringRef} from '../../utils/useString';
+import {
+  ChannelProfile,
+  DispatchContext,
+  PropsContext,
+  useLocalUid,
+} from '../../../agora-rn-uikit';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
+import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
+import useGetName from '../../utils/useGetName';
+import {useUserPreference} from '../useUserPreference';
+import {useSetRoomInfo} from '../room-info/useSetRoomInfo';
+import Toast from '../../../react-native-toast-message';
+import events from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {useContent} from 'customization-api';
+import EventsConfigure from '../EventsConfigure';
+import {
+  waitingRoomApprovalRejectionToastHeading,
+  waitingRoomApprovalRejectionToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+export interface PreCallJoinWaitingRoomBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+let shouldWaitingRoomPoll = null;
+const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
+  const headinglabel = useStringRef(waitingRoomApprovalRejectionToastHeading);
+  const subheadinglabel = useStringRef(
+    waitingRoomApprovalRejectionToastSubHeading,
+  );
+  let pollingTimeout = React.useRef(null);
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive, callActive} = usePreCall();
+  const username = useGetName();
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {setRoomInfo} = useSetRoomInfo();
+
+  const waitingRoomButton =
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const {saveName} = useUserPreference();
+  const [buttonText, setButtonText] = React.useState(
+    waitingRoomButton({
+      waitingRoom: true,
+      ready: isInWaitingRoom,
+    }),
+  );
+  const {request: requestToJoin} = useWaitingRoomAPI();
+  const {dispatch} = useContext(DispatchContext);
+  const localUid = useLocalUid();
+  const {activeUids} = useContent();
+  const activeUidsRef = React.useRef(activeUids);
+
+  React.useEffect(() => {
+    activeUidsRef.current = activeUids;
+  }, [activeUids]);
+
+  const {
+    data: {token, isHost},
+  } = useRoomInfo();
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM && !isHost && token) {
+      setCallActive(true);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    setButtonText(
+      waitingRoomButton({
+        waitingRoom: true,
+        ready: !isInWaitingRoom,
+      }),
+    );
+  }, [isInWaitingRoom]);
+
+  useEffect(() => {
+    events.on(EventNames.WAITING_ROOM_RESPONSE, data => {
+      const {approved, mainUser, screenShare, whiteboard, chat} = JSON.parse(
+        data?.payload,
+      );
+      // stop polling if user has responsed with yes / no
+      pollingTimeout.current && clearTimeout(pollingTimeout.current);
+      shouldWaitingRoomPoll = false;
+
+      if (callActive) return;
+      // on approve/reject response from host, waiting room permission is reset
+      // update waitinng room status on uid
+      dispatch({
+        type: 'UpdateRenderList',
+        value: [localUid, {isInWaitingRoom: false}],
+      });
+
+      if (approved) {
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.APPROVED,
+            data: {
+              ...prev.data,
+              token: mainUser.rtc,
+              screenShareToken: screenShare.rtc,
+              screenShareUid: screenShare.uid,
+              whiteboard,
+              chat: {
+                user_token: chat?.userToken,
+                group_id: chat?.groupId,
+                is_group_owner: chat?.isGroupOwner,
+              },
+            },
+          };
+        });
+      } else {
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.REJECTED,
+          };
+        });
+        // inform user that entry was denied by the host
+        Toast.show({
+          leadingIconName: 'info',
+          text1: headinglabel?.current(),
+          text2: subheadinglabel?.current(),
+          visibilityTime: 3000,
+          type: 'error',
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+      }
+    });
+
+    return () => {
+      clearTimeout(pollingTimeout.current);
+      shouldWaitingRoomPoll = false;
+    };
+  }, []);
+
+  const requestServerToJoinRoom = async () => {
+    // polling for every 30 seconds
+    const pollFunction = async () => {
+      if (shouldWaitingRoomPoll) {
+        const res = await requestToJoin({send_event: true});
+        pollingTimeout.current = setTimeout(() => {
+          pollFunction();
+        }, 15000);
+      }
+
+      if (!shouldWaitingRoomPoll) {
+        // If the request is approved/rejected stop polling
+        clearTimeout(pollingTimeout.current);
+      }
+    };
+
+    // Call the polling function immediately
+    pollFunction();
+  };
+
+  const onSubmit = () => {
+    shouldWaitingRoomPoll = true;
+    saveName(username?.trim());
+
+    // Enter waiting rooom;
+    setRoomInfo(prev => {
+      return {...prev, isInWaitingRoom: true};
+    });
+
+    // add the waitingRoomStatus to the uid
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [localUid, {isInWaitingRoom: true}],
+    });
+
+    // join request API to server, server will send RTM message to all hosts regarding request from this user,
+    requestServerToJoinRoom();
+    // send a message to host for asking permission to enter the call , then set setCallActive(true) isInWaitingRoom:false
+  };
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = isInWaitingRoom || username === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+  );
+};
+
+export default JoinWaitingRoomBtn;