agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -0,0 +1,210 @@
+/*
+********************************************
+ 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} = 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,
+            },
+          };
+        });
+      } 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;

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

@@ -0,0 +1,250 @@
+/*
+********************************************
+ 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 useGetName from '../../utils/useGetName';
+import {useWakeLock} from '../useWakeLock';
+import isMobileOrTablet from '../../utils/isMobileOrTablet';
+import {isWebInternal} from '../../utils/common';
+import useSetName from '../../utils/useSetName';
+import {useUserPreference} from '../useUserPreference';
+import {useSetRoomInfo} from '../room-info/useSetRoomInfo';
+import {EventNames} from '../../rtm-events';
+import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
+import Toast from '../../../react-native-toast-message';
+
+import events from '../../rtm-events-api';
+import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {UserType} from '../RTMConfigure';
+import {useContent} from 'customization-api';
+import {
+  waitingRoomApprovalRejectionToastHeading,
+  waitingRoomApprovalRejectionToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const audio = new Audio(
+  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
+);
+
+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 setUsername = useSetName();
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {awake, request} = useWakeLock();
+  const {saveName} = useUserPreference();
+  const waitingRoomButton =
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const {setRoomInfo} = useSetRoomInfo();
+  const {request: requestToJoin} = useWaitingRoomAPI();
+
+  const {activeUids} = useContent();
+  const activeUidsRef = React.useRef(activeUids);
+
+  React.useEffect(() => {
+    activeUidsRef.current = activeUids;
+  }, [activeUids]);
+
+  const [buttonText, setButtonText] = React.useState(
+    waitingRoomButton({
+      waitingRoom: true,
+      ready: isInWaitingRoom,
+    }),
+  );
+
+  const {dispatch} = useContext(DispatchContext);
+  const localUid = useLocalUid();
+
+  const {
+    data: {token, isHost},
+  } = useRoomInfo();
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM && !isHost && token) {
+      setCallActive(true);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    events.on(EventNames.WAITING_ROOM_RESPONSE, data => {
+      const {approved, mainUser, screenShare, whiteboard} = 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,
+            },
+          };
+        });
+      } 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(() => {
+          clearTimeout(pollingTimeout.current);
+          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;
+    setUsername(username.trim());
+    //updating name in the backend
+    saveName(username.trim());
+    //setCallActive(true);
+
+    // add the waitingRoomStatus to the uid
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [localUid, {isInWaitingRoom: true}],
+    });
+    // Enter waiting rooom;
+    setRoomInfo(prev => {
+      return {...prev, isInWaitingRoom: true};
+    });
+
+    // join request API to server, server will send RTM message to all hosts regarding request from this user,
+    requestServerToJoinRoom();
+
+    // Play a sound to avoid autoblocking in safari
+    if (isWebInternal() || isMobileOrTablet()) {
+      audio.volume = 0;
+      audio.play().then(() => {
+        // pause directly once played
+        audio.pause();
+      });
+    }
+    // Avoid Sleep only on mobile browsers
+    if (isWebInternal() && isMobileOrTablet() && !awake) {
+      // Request wake lock
+      request();
+    }
+  };
+
+  useEffect(() => {
+    setButtonText(
+      waitingRoomButton({
+        waitingRoom: true,
+        ready: !isInWaitingRoom,
+      }),
+    );
+  }, [isInWaitingRoom]);
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = isInWaitingRoom || username?.trim() === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton
+      // iconName={'video-on'}
+      onPress={onPress}
+      disabled={disabled}
+      text={title}
+      containerStyle={{
+        minWidth: '100%',
+        paddingHorizontal: 10,
+      }}
+      textStyle={{textAlign: 'center'}}
+    />
+  );
+};
+
+export default JoinWaitingRoomBtn;

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

@@ -1,31 +1,57 @@
 import React from 'react';
 import {Text, StyleSheet, View, TextStyle} from 'react-native';
-import {trimText} from '../../utils/common';
+import {isMobileUA, trimText} from '../../utils/common';
 import ThemeConfig from '../../theme';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 
 export interface MeetingTitleProps {
-  textStyle?: TextStyle;
+  prefix?: string;
 }
+const isMobile = isMobileUA();
 const MeetingTitle = (props?: MeetingTitleProps) => {
   const {
     data: {meetingTitle},
   } = useRoomInfo();
+
   return (
-    <Text style={[style.titleHeading, props?.textStyle ? props.textStyle : {}]}>
-      {trimText(meetingTitle)}
-    </Text>
+    <View style={isMobile ? style.mobileContainer : style.desktopContainer}>
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[style.textStyle, style.prefixStyle]}>
+        {props.prefix}
+      </Text>
+      <Text style={[style.textStyle, {fontWeight: '600'}]}>
+        {trimText(meetingTitle)}
+      </Text>
+    </View>
   );
 };
 
 export default MeetingTitle;
 
 const style = StyleSheet.create({
-  titleHeading: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: ThemeConfig.FontSize.normal,
-    fontWeight: '600',
+  mobileContainer: {
+    flexDirection: 'column',
+    alignSelf: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  desktopContainer: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+  },
+  textStyle: {
+    fontSize: ThemeConfig.FontSize.large,
+    lineHeight: 28,
+    fontWeight: '400',
     color: $config.FONT_COLOR,
     fontFamily: ThemeConfig.FontFamily.sansPro,
+    textAlign: 'center',
+  },
+  prefixStyle: {
+    marginRight: 8,
+    color: isMobile
+      ? $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      : $config.FONT_COLOR,
   },
 });

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

@@ -16,11 +16,11 @@ import {isWebInternal} 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 <SelectDevice />;
+export interface DeviceSelectProps {
+  isOnPrecall?: boolean;
+}
+const selectDevice = (props?: DeviceSelectProps) => {
+  return <SelectDevice {...props} />;
 };
 
 export default selectDevice;

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

@@ -20,27 +20,31 @@ import useGetName from '../../utils/useGetName';
 import Input from '../../atoms/Input';
 import ThemeConfig from '../../theme';
 import {maxInputLimit} from '../../utils/common';
+import {
+  precallInputGettingName,
+  precallNameInputPlaceholderText,
+  precallYouAreJoiningAsHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
 export interface PreCallTextInputProps {
   labelStyle?: TextStyle;
   textInputStyle?: TextStyle;
   isDesktop?: boolean;
+  isOnPrecall?: boolean;
 }
-const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
-  //commented for v1 release
-  // const userNamePlaceholder = useString('userNamePlaceholder')();
-  // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
-  const userNamePlaceholder = 'Enter Your Name';
-  const fetchingNamePlaceholder = 'Getting name...';
+const PreCallTextInput = (props?: PreCallTextInputProps) => {
+  const placeHolder = useString(precallNameInputPlaceholderText)();
+  const joiningAs = useString(precallYouAreJoiningAsHeading)();
+  const fetchingNamePlaceholder = useString(precallInputGettingName)();
   const username = useGetName();
   const setUsername = useSetName();
-  const {isJoinDataFetched} = useRoomInfo();
-  const {isDesktop = false} = props;
+  const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {isDesktop = false, isOnPrecall = false} = props;
 
   return (
     <Input
       maxLength={maxInputLimit}
-      label={isDesktop ? ($config.EVENT_MODE ? 'Your Name' : 'Joining as') : ''}
+      label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
       labelStyle={
         props?.labelStyle
           ? props.labelStyle
@@ -54,16 +58,10 @@ const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
       }
       value={username}
       autoFocus
-      onChangeText={(text) => setUsername(text ? text : '')}
+      onChangeText={text => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
-      placeholder={
-        isJoinDataFetched
-          ? $config.EVENT_MODE
-            ? 'Luke Skywalker'
-            : userNamePlaceholder
-          : fetchingNamePlaceholder
-      }
-      editable={isJoinDataFetched}
+      placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
+      editable={!isInWaitingRoom && isJoinDataFetched}
     />
   );
 };

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

@@ -16,6 +16,7 @@ import {SdkApiContext} from '../SdkApiContext';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import SDKEvents from '../../utils/SdkEvents';
 import DeviceContext from '../DeviceContext';
+import useSetName from '../../utils/useSetName';
 
 export interface PreCallContextInterface {
   callActive: boolean;
@@ -50,17 +51,26 @@ interface PreCallProviderProps {
 }
 
 const PreCallProvider = (props: PreCallProviderProps) => {
-  const {join} = useContext(SdkApiContext);
+  const {join, enterRoom} = useContext(SdkApiContext);
   const roomInfo = useRoomInfo();
   const {deviceList} = useContext(DeviceContext);
+  const setUsername = useSetName();
 
   useEffect(() => {
-    if (join.phrase) {
+    if (join.initialized && join.phrase) {
+      if (join.userName) {
+        setUsername(join.userName);
+      }
+
       //@ts-ignore
       join?.promise?.res([
         roomInfo.data,
-        () => {
-          props.value.setCallActive(true);
+        (userName: string) => {
+          return new Promise((res, rej) => {
+            setUsername(userName);
+            enterRoom.set({res, rej});
+            props.value.setCallActive(true);
+          });
         },
       ]);
     }