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

package/template/src/pages/VideoCall.tsx

@@ -11,7 +11,7 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import {View, StyleSheet, Text} from 'react-native';
 import {
   RtcConfigure,
   PropsProvider,
@@ -20,14 +20,18 @@ import {
   LocalUserContext,
   UidType,
   CallbacksInterface,
-  ToggleState,
 } from '../../agora-rn-uikit';
 import styles from '../components/styles';
 import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {useHasBrandLogo, isArray, isMobileUA} from '../utils/common';
+import {
+  useHasBrandLogo,
+  isArray,
+  isMobileUA,
+  isWebInternal,
+} from '../utils/common';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
@@ -35,16 +39,14 @@ import ScreenshareConfigure from '../subComponents/screenshare/ScreenshareConfig
 import {ErrorContext} from '.././components/common/index';
 import {PreCallProvider} from '../components/precall/usePreCall';
 import {LayoutProvider} from '../utils/useLayout';
-import {useCustomization} from 'customization-implementation';
 import Precall from '../components/Precall';
-import {useString} from '../utils/useString';
 import useLayoutsData from './video-call/useLayoutsData';
 import {RecordingProvider} from '../subComponents/recording/useRecording';
 import useJoinRoom from '../utils/useJoinRoom';
 import {
   useRoomInfo,
   RoomInfoDefaultValue,
-  validateMeetingInfoData,
+  WaitingRoomStatus,
 } from '../components/room-info/useRoomInfo';
 import {SidePanelProvider} from '../utils/useSidePanel';
 import VideoCallScreen from './video-call/VideoCallScreen';
@@ -55,7 +57,6 @@ import {ChatMessagesProvider} from '../components/chat-messages/useChatMessages'
 import {ScreenShareProvider} from '../components/contexts/ScreenShareContext';
 import {LiveStreamDataProvider} from '../components/contexts/LiveStreamDataContext';
 import {VideoMeetingDataProvider} from '../components/contexts/VideoMeetingDataContext';
-import {WhiteboardProvider} from '../components/contexts/WhiteboardContext';
 import {useWakeLock} from '../components/useWakeLock';
 import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
@@ -63,9 +64,22 @@ import EventsConfigure from '../components/EventsConfigure';
 import PermissionHelper from '../components/precall/PermissionHelper';
 import {currentFocus, FocusProvider} from '../utils/useFocus';
 import {VideoCallProvider} from '../components/useVideoCall';
-import {SdkApiContext, SDK_MEETING_TAG} from '../components/SdkApiContext';
+import {SdkApiContext} from '../components/SdkApiContext';
 import isSDK from '../utils/isSDK';
+import {CaptionProvider} from '../subComponents/caption/useCaption';
+import SdkMuteToggleListener from '../components/SdkMuteToggleListener';
+import StorageContext from '../components/StorageContext';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import WhiteboardConfigure from '../components/whiteboard/WhiteboardConfigure';
+import {NoiseSupressionProvider} from '../app-state/useNoiseSupression';
+import {VideoQualityContextProvider} from '../app-state/useVideoQuality';
+import {VBProvider} from '../components/virtual-background/useVB';
+import {DisableChatProvider} from '../components/disable-chat/useDisableChat';
+import {WaitingRoomProvider} from '../components/contexts/WaitingRoomContext';
+import {isWeb} from '../utils/common';
+import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
+import {useString} from '../utils/useString';
+import {useCustomization} from 'customization-implementation';
 
 enum RnEncryptionEnum {
   /**
@@ -91,13 +105,31 @@ enum RnEncryptionEnum {
    * @since v3.1.2.
    */
   SM4128ECB = 4,
+  /**
+   * 6: 256-bit AES encryption, GCM mode.
+   *
+   * @since v3.1.2.
+   */
+  AES256GCM = 6,
+
+  /**
+   * 7:  128-bit GCM encryption, GCM mode.
+   *
+   * @since v3.4.5
+   */
+  AES128GCM2 = 7,
+  /**
+   * 8: 256-bit GCM encryption, GCM mode.
+   * @since v3.1.2.
+   * Compared to AES256GCM encryption mode, AES256GCM2 encryption mode is more secure and requires you to set the salt (encryptionKdfSalt).
+   */
+  AES256GCM2 = 8,
 }
 
 const VideoCall: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
-  //commented for v1 release
-  //const joiningLoaderLabel = useString('joiningLoaderLabel')();
-  const joiningLoaderLabel = 'Starting Call. Just a second.';
+  const joiningLoaderLabel = useString(videoRoomStartingCallText)();
+
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const {awake, release} = useWakeLock();
   const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
@@ -110,13 +142,28 @@ const VideoCall: React.FC = () => {
 
   const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
+  const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
+    useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
   const [currentFocus, setFocus] = useState<currentFocus>({
     editName: false,
   });
   const {phrase} = useParams<{phrase: string}>();
+
+  const {store} = useContext(StorageContext);
+  const {
+    join: SdkJoinState,
+    microphoneDevice: sdkMicrophoneDevice,
+    cameraDevice: sdkCameraDevice,
+    clearState,
+  } = useContext(SdkApiContext);
+
   // commented for v1 release
-  //const lifecycle = useCustomization((data) => data.lifecycle);
+  const afterEndCall = useCustomization(
+    data =>
+      data?.lifecycle?.useAfterEndCall && data?.lifecycle?.useAfterEndCall(),
+  );
+
   const [rtcProps, setRtcProps] = React.useState({
     appId: $config.APP_ID,
     channel: null,
@@ -128,21 +175,25 @@ const VideoCall: React.FC = () => {
     profile: $config.PROFILE,
     dual: true,
     encryption: $config.ENCRYPTION_ENABLED
-      ? {key: null, mode: RnEncryptionEnum.AES128XTS, screenKey: null}
+      ? {key: null, mode: RnEncryptionEnum.AES128GCM2, screenKey: null}
       : false,
     role: ClientRole.Broadcaster,
     geoFencing: $config.GEO_FENCING,
     audioRoom: $config.AUDIO_ROOM,
     activeSpeaker: $config.ACTIVE_SPEAKER,
+    preferredCameraId:
+      sdkCameraDevice.deviceId || store?.activeDeviceId?.videoinput || null,
+    preferredMicrophoneId:
+      sdkMicrophoneDevice.deviceId || store?.activeDeviceId?.audioinput || null,
   });
 
-  const {join: SdkJoinState, clearState} = useContext(SdkApiContext);
   const history = useHistory();
   const currentMeetingPhrase = useRef(history.location.pathname);
 
   const useJoin = useJoinRoom();
   const {setRoomInfo} = useSetRoomInfo();
-  const {isJoinDataFetched, data} = useRoomInfo();
+  const {isJoinDataFetched, data, isInWaitingRoom, waitingRoomStatus} =
+    useRoomInfo();
 
   React.useEffect(() => {
     return () => {
@@ -158,7 +209,7 @@ const VideoCall: React.FC = () => {
     if (!SdkJoinState.phrase) {
       useJoin(phrase)
         .then(() => {})
-        .catch((error) => {
+        .catch(error => {
           setGlobalErrorMessage(error);
           history.push('/');
         });
@@ -182,7 +233,7 @@ const VideoCall: React.FC = () => {
 
     if (sdkMeetingDetails) {
       setQueryComplete(false);
-      setRoomInfo((roomInfo) => {
+      setRoomInfo(roomInfo => {
         return {
           isJoinDataFetched: true,
           data: {
@@ -194,7 +245,7 @@ const VideoCall: React.FC = () => {
     } else if (sdkMeetingPhrase) {
       setQueryComplete(false);
       currentMeetingPhrase.current = sdkMeetingPath;
-      useJoin(sdkMeetingPhrase).catch((error) => {
+      useJoin(sdkMeetingPhrase).catch(error => {
         setGlobalErrorMessage(error);
         history.push('/');
         currentMeetingPhrase.current = '';
@@ -204,30 +255,59 @@ const VideoCall: React.FC = () => {
   }, [SdkJoinState]);
 
   React.useEffect(() => {
-    if (isJoinDataFetched === true && !queryComplete) {
-      setRtcProps({
-        appId: $config.APP_ID,
+    if (
+      //isJoinDataFetched === true && (!queryComplete || !isInWaitingRoom)
+
+      //non waiting room - host/attendee
+      (!$config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        !queryComplete) ||
+      //waiting room - host
+      ($config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        data.isHost &&
+        !queryComplete) ||
+      //waiting room - attendee
+      ($config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        !data.isHost &&
+        (!queryComplete || !isInWaitingRoom) &&
+        !waitingRoomAttendeeJoined)
+    ) {
+      setRtcProps(prevRtcProps => ({
+        ...prevRtcProps,
         channel: data.channel,
         uid: data.uid,
         token: data.token,
         rtm: data.rtmToken,
-        dual: true,
-        profile: $config.PROFILE,
         encryption: $config.ENCRYPTION_ENABLED
           ? {
               key: data.encryptionSecret,
-              mode: RnEncryptionEnum.AES128XTS,
+              mode: RnEncryptionEnum.AES256GCM2,
               screenKey: data.encryptionSecret,
+              salt: data.encryptionSecretSalt,
             }
           : false,
         screenShareUid: data.screenShareUid,
         screenShareToken: data.screenShareToken,
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
-        geoFencing: $config.GEO_FENCING,
-        audioRoom: $config.AUDIO_ROOM,
-        activeSpeaker: $config.ACTIVE_SPEAKER,
-      });
+        preventJoin:
+          !$config.ENABLE_WAITING_ROOM ||
+          ($config.ENABLE_WAITING_ROOM && data.isHost) ||
+          ($config.ENABLE_WAITING_ROOM &&
+            !data.isHost &&
+            waitingRoomStatus === WaitingRoomStatus.APPROVED)
+            ? false
+            : true,
+      }));
 
+      if (
+        $config.ENABLE_WAITING_ROOM &&
+        !data.isHost &&
+        waitingRoomStatus === WaitingRoomStatus.APPROVED
+      ) {
+        setWaitingRoomAttendeeJoined(true);
+      }
       // 1. Store the display name from API
       // if (data.username) {
       //   setUsername(data.username);
@@ -243,12 +323,25 @@ const VideoCall: React.FC = () => {
     //     SdkJoinState.promise?.res();
     //   }
     // },
-    EndCall: () => {
-      clearState('join');
-      setTimeout(() => {
-        SDKEvents.emit('leave');
-        history.push('/');
-      }, 0);
+    EndCall: (isHost, isTriggeredByHost) => {
+      if (afterEndCall) {
+        clearState('join');
+        setTimeout(() => {
+          // TODO: These callbacks are being called twice
+          SDKEvents.emit('leave');
+          try {
+            afterEndCall(isHost, history, isTriggeredByHost);
+          } catch (error) {
+            console.error('ERROR on useAfterEndCall hook', error);
+          }
+        }, 0);
+      } else {
+        setTimeout(() => {
+          // TODO: These callbacks are being called twice
+          SDKEvents.emit('leave');
+          history.push('/');
+        }, 0);
+      }
     },
     UserJoined: (uid: UidType) => {
       console.log('UIKIT Callback: UserJoined', uid);
@@ -300,88 +393,110 @@ const VideoCall: React.FC = () => {
               }}>
               <RtcConfigure>
                 <DeviceConfigure>
-                  <ChatUIControlsProvider>
-                    <ChatNotificationProvider>
-                      <LayoutProvider
-                        value={{
-                          currentLayout,
-                          setLayout,
-                        }}>
-                        <FocusProvider value={{currentFocus, setFocus}}>
-                          <SidePanelProvider
+                  <NoiseSupressionProvider callActive={callActive}>
+                    <VideoQualityContextProvider>
+                      <ChatUIControlsProvider>
+                        <ChatNotificationProvider>
+                          <LayoutProvider
                             value={{
-                              sidePanel,
-                              setSidePanel,
+                              currentLayout,
+                              setLayout,
                             }}>
-                            <ChatMessagesProvider>
-                              <ScreenShareProvider>
-                                <RtmConfigure
-                                  setRecordingActive={setRecordingActive}
-                                  callActive={callActive}>
-                                  <UserPreferenceProvider>
-                                    <EventsConfigure>
-                                      <WhiteboardProvider>
-                                        <RecordingProvider
-                                          value={{
-                                            setRecordingActive,
-                                            isRecordingActive,
-                                          }}>
-                                          <ScreenshareConfigure>
-                                            <LiveStreamContextProvider
-                                              value={{
-                                                setRtcProps,
-                                                rtcProps,
-                                                callActive,
-                                              }}>
-                                              <LiveStreamDataProvider>
-                                                <LocalUserContext
-                                                  localUid={rtcProps?.uid}>
-                                                  <NetworkQualityProvider>
-                                                    {!isMobileUA() && (
-                                                      <PermissionHelper />
-                                                    )}
-                                                    {callActive ? (
-                                                      <VideoMeetingDataProvider>
-                                                        <VideoCallProvider>
-                                                          <VideoCallScreen />
-                                                        </VideoCallProvider>
-                                                      </VideoMeetingDataProvider>
-                                                    ) : $config.PRECALL ? (
-                                                      <PreCallProvider
-                                                        value={{
-                                                          callActive,
-                                                          setCallActive,
-                                                          isCameraAvailable,
-                                                          isMicAvailable,
-                                                          setCameraAvailable,
-                                                          setMicAvailable,
-                                                          isPermissionRequested,
-                                                          setIsPermissionRequested,
-                                                          isSpeakerAvailable,
-                                                          setSpeakerAvailable,
-                                                        }}>
-                                                        <Precall />
-                                                      </PreCallProvider>
-                                                    ) : (
-                                                      <></>
-                                                    )}
-                                                  </NetworkQualityProvider>
-                                                </LocalUserContext>
-                                              </LiveStreamDataProvider>
-                                            </LiveStreamContextProvider>
-                                          </ScreenshareConfigure>
-                                        </RecordingProvider>
-                                      </WhiteboardProvider>
-                                    </EventsConfigure>
-                                  </UserPreferenceProvider>
-                                </RtmConfigure>
-                              </ScreenShareProvider>
-                            </ChatMessagesProvider>
-                          </SidePanelProvider>
-                        </FocusProvider>
-                      </LayoutProvider>
-                    </ChatNotificationProvider>
-                  </ChatUIControlsProvider>
+                            <FocusProvider value={{currentFocus, setFocus}}>
+                              <SidePanelProvider
+                                value={{
+                                  sidePanel,
+                                  setSidePanel,
+                                }}>
+                                <ChatMessagesProvider callActive={callActive}>
+                                  <ScreenShareProvider>
+                                    <RtmConfigure
+                                      setRecordingActive={setRecordingActive}
+                                      callActive={callActive}>
+                                      <UserPreferenceProvider>
+                                        <CaptionProvider>
+                                          <WaitingRoomProvider>
+                                            <EventsConfigure>
+                                              <RecordingProvider
+                                                value={{
+                                                  setRecordingActive,
+                                                  isRecordingActive,
+                                                  callActive,
+                                                }}>
+                                                <ScreenshareConfigure>
+                                                  <LiveStreamContextProvider
+                                                    value={{
+                                                      setRtcProps,
+                                                      rtcProps,
+                                                      callActive,
+                                                    }}>
+                                                    <LiveStreamDataProvider>
+                                                      <LocalUserContext
+                                                        localUid={
+                                                          rtcProps?.uid
+                                                        }>
+                                                        <NetworkQualityProvider>
+                                                          {!isMobileUA() && (
+                                                            <PermissionHelper />
+                                                          )}
+                                                          <VBProvider>
+                                                            <SdkMuteToggleListener>
+                                                              {callActive ? (
+                                                                <VideoMeetingDataProvider>
+                                                                  <VideoCallProvider>
+                                                                    <DisableChatProvider>
+                                                                      {$config.ENABLE_WHITEBOARD &&
+                                                                      isWebInternal() ? (
+                                                                        <WhiteboardConfigure>
+                                                                          <VideoCallScreen />
+                                                                        </WhiteboardConfigure>
+                                                                      ) : (
+                                                                        <VideoCallScreen />
+                                                                      )}
+                                                                    </DisableChatProvider>
+                                                                  </VideoCallProvider>
+                                                                </VideoMeetingDataProvider>
+                                                              ) : $config.PRECALL ? (
+                                                                <PreCallProvider
+                                                                  value={{
+                                                                    callActive,
+                                                                    setCallActive,
+                                                                    isCameraAvailable,
+                                                                    isMicAvailable,
+                                                                    setCameraAvailable,
+                                                                    setMicAvailable,
+                                                                    isPermissionRequested,
+                                                                    setIsPermissionRequested,
+                                                                    isSpeakerAvailable,
+                                                                    setSpeakerAvailable,
+                                                                  }}>
+                                                                  <Precall />
+                                                                </PreCallProvider>
+                                                              ) : (
+                                                                <></>
+                                                              )}
+                                                            </SdkMuteToggleListener>
+                                                          </VBProvider>
+                                                        </NetworkQualityProvider>
+                                                      </LocalUserContext>
+                                                    </LiveStreamDataProvider>
+                                                  </LiveStreamContextProvider>
+                                                </ScreenshareConfigure>
+                                              </RecordingProvider>
+                                            </EventsConfigure>
+                                          </WaitingRoomProvider>
+                                        </CaptionProvider>
+                                      </UserPreferenceProvider>
+                                    </RtmConfigure>
+                                  </ScreenShareProvider>
+                                </ChatMessagesProvider>
+                              </SidePanelProvider>
+                            </FocusProvider>
+                          </LayoutProvider>
+                        </ChatNotificationProvider>
+                      </ChatUIControlsProvider>
+                    </VideoQualityContextProvider>
+                  </NoiseSupressionProvider>
                 </DeviceConfigure>
               </RtcConfigure>
             </PropsProvider>

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -20,19 +20,22 @@ import SettingsView from '../../components/SettingsView';
 import ActionSheetContent from './ActionSheetContent';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useSidePanel} from '../../utils/useSidePanel';
-import {isIOS} from '../../utils/common';
+import {isAndroid, isIOS} from '../../utils/common';
 import ActionSheetHandle from './ActionSheetHandle';
 import Spacer from '../../atoms/Spacer';
+import Transcript from '../../subComponents/caption/Transcript';
 
 //topbar btn template is used to show icons without label text (as in desktop : bottomBar)
 
-const ActionSheet = (props) => {
+const ActionSheet = props => {
+  const {snapPointsMinMax = [100, 400]} = props;
   const [isExpanded, setIsExpanded] = React.useState(false);
   const {sidePanel, setSidePanel} = useSidePanel();
   const bottomSheetRef = useRef<BottomSheetModal>(null);
   const chatSheetRef = useRef<BottomSheetModal>(null);
   const participantsSheetRef = useRef<BottomSheetModal>(null);
   const settingsSheetRef = useRef<BottomSheetModal>(null);
+  const transcriptSheetRef = useRef<BottomSheetModal>(null);
 
   // callbacks
   const handleSheetChanges = useCallback((index: number) => {
@@ -46,6 +49,7 @@ const ActionSheet = (props) => {
 
   // updating on sidepanel changes
   React.useEffect(() => {
+    let timeout;
     switch (sidePanel) {
       case SidePanelType.Participants: {
         participantsSheetRef?.current.present();
@@ -59,15 +63,37 @@ const ActionSheet = (props) => {
         settingsSheetRef?.current.present();
         break;
       }
+      case SidePanelType.Transcript: {
+        transcriptSheetRef?.current.present();
+        break;
+      }
       case SidePanelType.None: {
-        chatSheetRef?.current.close();
-        participantsSheetRef?.current.close();
-        settingsSheetRef?.current.close();
+        if (isAndroid()) {
+          timeout = setTimeout(() => {
+            // Code to be executed after the timeout until https://github.com/gorhom/react-native-bottom-sheet/pull/1164/files is merged
+            chatSheetRef?.current.close();
+            participantsSheetRef?.current.close();
+            settingsSheetRef?.current.close();
+            transcriptSheetRef?.current.close();
+            bottomSheetRef?.current.present();
+          }, 200);
+        } else {
+          // Code to be executed immediately without a timer
+          chatSheetRef?.current.dismiss();
+          participantsSheetRef?.current.close();
+          settingsSheetRef?.current.close();
+          transcriptSheetRef?.current.close();
+        }
+
         handleSheetChanges(0);
+        break;
       }
       default:
         bottomSheetRef?.current.present();
     }
+    return () => {
+      clearTimeout(timeout);
+    };
   }, [sidePanel]);
 
   React.useEffect(() => {
@@ -90,7 +116,7 @@ const ActionSheet = (props) => {
       )}
       {/* Controls  Action Sheet*/}
       <BottomSheetModal
-        snapPoints={[100, 350]}
+        snapPoints={snapPointsMinMax}
         ref={bottomSheetRef}
         onChange={handleSheetChanges}
         enablePanDownToClose={false}
@@ -106,9 +132,10 @@ const ActionSheet = (props) => {
         handleIndicatorStyle={styles.handleIndicatorStyle}>
         <BottomSheetView>
           <ActionSheetContent
-            {...props}
             handleSheetChanges={handleSheetChanges}
             isExpanded={isExpanded}
+            native={true}
+            {...props}
           />
         </BottomSheetView>
       </BottomSheetModal>
@@ -126,6 +153,7 @@ const ActionSheet = (props) => {
         handleComponent={() => (
           <ActionSheetHandle sidePanel={SidePanelType.Chat} />
         )}
+        android_keyboardInputMode="adjustResize"
         keyboardBehavior="extend"
         stackBehavior="push">
         <BottomSheetView>
@@ -170,6 +198,25 @@ const ActionSheet = (props) => {
           <SettingsView showHeader={false} />
         </BottomSheetView>
       </BottomSheetModal>
+
+      {/* Transcript Action Sheet  */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        ref={transcriptSheetRef}
+        name="TranscriptSheet"
+        onDismiss={onDismiss}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Transcript} />
+        )}
+        stackBehavior="push">
+        <BottomSheetView>
+          <Transcript showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
     </BottomSheetModalProvider>
   );
 };