agora-appbuilder-core 4.1.10-beta.1 → 4.1.11-beta.2

package/template/src/pages/video-call/VideoCallStateWrapper.tsx

@@ -1,495 +0,0 @@
-/*
-********************************************
- 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, {useState, useContext, useEffect, useRef} from 'react';
-import {View, StyleSheet, Text} from 'react-native';
-import {useCustomization} from 'customization-implementation';
-import {
-  ClientRoleType,
-  UidType,
-  CallbacksInterface,
-} from '../../../agora-rn-uikit';
-import styles from '../../components/styles';
-import {ErrorContext} from '../../components/common/index';
-import {useWakeLock} from '../../components/useWakeLock';
-import {useParams, useHistory} from '../../components/Router';
-import StorageContext from '../../components/StorageContext';
-import {useSetRoomInfo} from '../../components/room-info/useSetRoomInfo';
-import {SdkApiContext} from '../../components/SdkApiContext';
-import {
-  useRoomInfo,
-  RoomInfoDefaultValue,
-  WaitingRoomStatus,
-} from '../../components/room-info/useRoomInfo';
-import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
-import Logo from '../../subComponents/Logo';
-import SDKEvents from '../../utils/SdkEvents';
-import isSDK from '../../utils/isSDK';
-import {useHasBrandLogo} from '../../utils/common';
-import useJoinRoom from '../../utils/useJoinRoom';
-import {useString} from '../../utils/useString';
-import {AuthErrorCodes} from '../../utils/common';
-import {
-  userBannedText,
-  videoRoomStartingCallText,
-} from '../../language/default-labels/videoCallScreenLabels';
-import {LogSource, logger} from '../../logger/AppBuilderLogger';
-import Toast from '../../../react-native-toast-message';
-import {RTMCoreProvider} from '../../rtm/RTMCoreProvider';
-import {videoView} from '../../../theme.json';
-import VideoCallContent from './VideoCallContent';
-import RTMGlobalStateProvider from '../../rtm/RTMGlobalStateProvider';
-import UserGlobalPreferenceProvider from '../../components/UserGlobalPreferenceProvider';
-
-export enum RnEncryptionEnum {
-  /**
-   * @deprecated
-   * 0: This mode is deprecated.
-   */
-  None = 0,
-  /**
-   * 1: (Default) 128-bit AES encryption, XTS mode.
-   */
-  AES128XTS = 1,
-  /**
-   * 2: 128-bit AES encryption, ECB mode.
-   */
-  AES128ECB = 2,
-  /**
-   * 3: 256-bit AES encryption, XTS mode.
-   */
-  AES256XTS = 3,
-  /**
-   * 4: 128-bit SM4 encryption, ECB mode.
-   *
-   * @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 VideoCallStateWrapper = () => {
-  const hasBrandLogo = useHasBrandLogo();
-  const joiningLoaderLabel = useString(videoRoomStartingCallText)();
-  const {isRecordingBot} = useIsRecordingBot();
-  const {setRoomInfo} = useSetRoomInfo();
-  const {setGlobalErrorMessage} = useContext(ErrorContext);
-  const bannedUserText = useString(userBannedText)();
-
-  /**
-   *  Should we set the callscreen to active ??
-   *  a) If Recording bot( i.e prop: recordingBot) is TRUE then it means,
-   *     the recording bot is accessing the screen - so YES we should set
-   *     the callActive as true and we need not check for whether
-   *     $config.PRECALL is enabled or not.
-   *  b) If Recording bot( i.e prop: recordingBot) is FALSE then we should set
-   *     the callActive depending upon the value of magic variable - $config.PRECALL
-   */
-  const shouldCallBeSetToActive = isRecordingBot
-    ? true
-    : $config.PRECALL
-    ? false
-    : true;
-  const [callActive, setCallActive] = useState(shouldCallBeSetToActive);
-  const [queryComplete, setQueryComplete] = useState(false);
-  const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
-    useState(false);
-  const {isJoinDataFetched, data, isInWaitingRoom, waitingRoomStatus} =
-    useRoomInfo();
-  const {store} = useContext(StorageContext);
-  const {
-    join: SdkJoinState,
-    microphoneDevice: sdkMicrophoneDevice,
-    cameraDevice: sdkCameraDevice,
-    clearState,
-  } = useContext(SdkApiContext);
-  const useJoin = useJoinRoom();
-
-  const {phrase} = useParams<{phrase: string}>();
-  const history = useHistory();
-  const currentMeetingPhrase = useRef(history.location.pathname);
-  const {awake, release} = useWakeLock();
-
-  const [rtcProps, setRtcProps] = React.useState({
-    appId: $config.APP_ID,
-    channel: null,
-    uid: null,
-    token: null,
-    rtm: null,
-    screenShareUid: null,
-    screenShareToken: null,
-    profile: $config.PROFILE,
-    screenShareProfile: $config.SCREEN_SHARE_PROFILE,
-    dual: true,
-    encryption: $config.ENCRYPTION_ENABLED
-      ? {key: null, mode: RnEncryptionEnum.AES128GCM2, screenKey: null}
-      : false,
-    role: ClientRoleType.ClientRoleBroadcaster,
-    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,
-    recordingBot: isRecordingBot ? true : false,
-  });
-
-  React.useEffect(() => {
-    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,
-        encryption: $config.ENCRYPTION_ENABLED
-          ? {
-              key: data.encryptionSecret,
-              mode: data.encryptionMode,
-              screenKey: data.encryptionSecret,
-              salt: data.encryptionSecretSalt,
-            }
-          : false,
-        screenShareUid: data.screenShareUid,
-        screenShareToken: data.screenShareToken,
-        role: data.isHost
-          ? ClientRoleType.ClientRoleBroadcaster
-          : ClientRoleType.ClientRoleAudience,
-        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);
-      // }
-      setQueryComplete(true);
-    }
-  }, [isJoinDataFetched, data, queryComplete]);
-
-  useEffect(() => {
-    if (!isJoinDataFetched) {
-      return;
-    }
-    logger.log(LogSource.Internals, 'SET_MEETING_DETAILS', 'Room details', {
-      user_id: data?.uid || '',
-      meeting_title: data?.meetingTitle || '',
-      channel_id: data?.channel,
-      host_id: data?.roomId?.host || '',
-      attendee_id: data?.roomId?.attendee || '',
-    });
-  }, [isJoinDataFetched, data, phrase]);
-
-  //  SDK related code
-  useEffect(() => {
-    if (!isSDK() || !SdkJoinState.initialized) {
-      return;
-    }
-    const {
-      phrase: sdkMeetingPhrase,
-      meetingDetails: sdkMeetingDetails,
-      skipPrecall,
-      promise,
-      preference,
-    } = SdkJoinState;
-
-    const sdkMeetingPath = `/${sdkMeetingPhrase}`;
-
-    setCallActive(skipPrecall);
-
-    if (sdkMeetingDetails) {
-      setQueryComplete(false);
-      setRoomInfo(roomInfo => {
-        return {
-          ...roomInfo,
-          isJoinDataFetched: true,
-          data: {
-            ...roomInfo.data,
-            ...sdkMeetingDetails,
-          },
-          roomPreference: preference,
-        };
-      });
-    } else if (sdkMeetingPhrase) {
-      setQueryComplete(false);
-      currentMeetingPhrase.current = sdkMeetingPath;
-      useJoin(sdkMeetingPhrase, preference)
-        .then(() => {
-          logger.log(
-            LogSource.Internals,
-            'JOIN_MEETING',
-            'Join channel success',
-          );
-        })
-        .catch(error => {
-          const errorCode = error?.code;
-          if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
-            SDKEvents.emit('unauthorized', error);
-          }
-          logger.error(
-            LogSource.Internals,
-            'JOIN_MEETING',
-            'Join channel error',
-            JSON.stringify(error || {}),
-          );
-          setGlobalErrorMessage(error);
-          history.push('/');
-          currentMeetingPhrase.current = '';
-          promise.rej(error);
-        });
-    }
-  }, [SdkJoinState]);
-
-  useEffect(() => {
-    if (!SdkJoinState?.phrase) {
-      useJoin(phrase, RoomInfoDefaultValue.roomPreference)
-        .then(() => {
-          logger.log(
-            LogSource.Internals,
-            'JOIN_MEETING',
-            'Join channel success',
-          );
-        })
-        .catch(error => {
-          const errorCode = error?.code;
-          if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
-            SDKEvents.emit('unauthorized', error);
-          }
-          logger.error(
-            LogSource.Internals,
-            'JOIN_MEETING',
-            'Join channel error',
-            JSON.stringify(error || {}),
-          );
-          setGlobalErrorMessage(error);
-          history.push('/');
-        });
-    }
-  }, []);
-
-  React.useEffect(() => {
-    return () => {
-      logger.debug(
-        LogSource.Internals,
-        'VIDEO_CALL_ROOM',
-        'Videocall unmounted',
-      );
-      setRoomInfo(prevState => {
-        return {
-          ...RoomInfoDefaultValue,
-          loginToken: prevState?.loginToken,
-        };
-      });
-      if (awake) {
-        release();
-      }
-    };
-  }, []);
-
-  // commented for v1 release
-  const afterEndCall = useCustomization(
-    data =>
-      data?.lifecycle?.useAfterEndCall && data?.lifecycle?.useAfterEndCall(),
-  );
-
-  const callbacks: CallbacksInterface = {
-    // RtcLeft: () => {},
-    // RtcJoined: () => {
-    //   if (SdkJoinState.phrase && SdkJoinState.skipPrecall) {
-    //     SdkJoinState.promise?.res();
-    //   }
-    // },
-    EndCall: () => {
-      clearState('join');
-      setTimeout(() => {
-        // TODO: These callbacks are being called twice
-        SDKEvents.emit('leave');
-        if (afterEndCall) {
-          afterEndCall(data.isHost, history as unknown as History);
-        } else {
-          history.push('/');
-        }
-      }, 0);
-    },
-    // @ts-ignore
-    UserJoined: (uid: UidType) => {
-      console.log('UIKIT Callback: UserJoined', uid);
-      SDKEvents.emit('rtc-user-joined', uid);
-    },
-    // @ts-ignore
-    UserOffline: (uid: UidType) => {
-      console.log('UIKIT Callback: UserOffline', uid);
-      SDKEvents.emit('rtc-user-left', uid);
-    },
-    // @ts-ignore
-    RemoteAudioStateChanged: (uid: UidType, status: 0 | 2) => {
-      console.log('UIKIT Callback: RemoteAudioStateChanged', uid, status);
-      if (status === 0) {
-        SDKEvents.emit('rtc-user-unpublished', uid, 'audio');
-      } else {
-        SDKEvents.emit('rtc-user-published', uid, 'audio');
-      }
-    },
-    // @ts-ignore
-    RemoteVideoStateChanged: (uid: UidType, status: 0 | 2) => {
-      console.log('UIKIT Callback: RemoteVideoStateChanged', uid, status);
-      if (status === 0) {
-        SDKEvents.emit('rtc-user-unpublished', uid, 'video');
-      } else {
-        SDKEvents.emit('rtc-user-published', uid, 'video');
-      }
-    },
-    // @ts-ignore
-    UserBanned(isBanned) {
-      console.log('UIKIT Callback: UserBanned', isBanned);
-      Toast.show({
-        leadingIconName: 'alert',
-        type: 'error',
-        text1: bannedUserText,
-        visibilityTime: 3000,
-      });
-    },
-  };
-
-  return (
-    <>
-      {queryComplete ? (
-        queryComplete || !callActive ? (
-          <RTMCoreProvider
-            userInfo={{
-              localUid: rtcProps.uid,
-              screenShareUid: rtcProps.screenShareUid,
-              isHost: rtcProps.role === ClientRoleType.ClientRoleBroadcaster,
-              rtmToken: rtcProps.rtm,
-            }}>
-            <RTMGlobalStateProvider
-              rtmLoginInfo={{
-                uid: rtcProps.uid,
-                channel: rtcProps.channel,
-              }}>
-              <UserGlobalPreferenceProvider>
-                <VideoCallContent
-                  callActive={callActive}
-                  setCallActive={setCallActive}
-                  rtcProps={rtcProps}
-                  setRtcProps={setRtcProps}
-                  styleProps={styleProps}
-                  callbacks={callbacks}
-                />
-              </UserGlobalPreferenceProvider>
-            </RTMGlobalStateProvider>
-          </RTMCoreProvider>
-        ) : (
-          <View style={style.loader}>
-            <View style={style.loaderLogo}>{hasBrandLogo() && <Logo />}</View>
-            <Text style={style.loaderText}>{joiningLoaderLabel}</Text>
-          </View>
-        )
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};
-
-const styleProps = {
-  maxViewStyles: styles.temp,
-  minViewStyles: styles.temp,
-  localBtnContainer: styles.bottomBar,
-  localBtnStyles: {
-    muteLocalAudio: styles.localButton,
-    muteLocalVideo: styles.localButton,
-    switchCamera: styles.localButton,
-    endCall: styles.endCall,
-    fullScreen: styles.localButton,
-    recording: styles.localButton,
-    screenshare: styles.localButton,
-  },
-  theme: $config.PRIMARY_ACTION_BRAND_COLOR,
-  remoteBtnStyles: {
-    muteRemoteAudio: styles.remoteButton,
-    muteRemoteVideo: styles.remoteButton,
-    remoteSwap: styles.remoteButton,
-    minCloseBtnStyles: styles.minCloseBtn,
-    liveStreamHostControlBtns: styles.liveStreamHostControlBtns,
-  },
-  BtnStyles: styles.remoteButton,
-};
-//change these to inline styles or sth
-const style = StyleSheet.create({
-  full: {
-    flex: 1,
-    flexDirection: 'column',
-    overflow: 'hidden',
-  },
-  videoView: videoView,
-  loader: {
-    flex: 1,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  loaderLogo: {
-    alignSelf: 'center',
-    justifyContent: 'center',
-    marginBottom: 30,
-  },
-  loaderText: {fontWeight: '500', color: $config.FONT_COLOR},
-});
-
-export default VideoCallStateWrapper;