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

package/template/src/subComponents/Recording.tsx

@@ -9,150 +9,58 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect, useRef} from 'react';
-import {TouchableOpacity, StyleSheet, View, Text} from 'react-native';
-import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import ColorContext from '../components/ColorContext';
-import {gql, useMutation} from '@apollo/client';
-import {useParams} from '../components/Router';
-import {PropsContext} from '../../agora-rn-uikit';
-import Toast from '../../react-native-toast-message';
-import {ImageIcon} from '../../agora-rn-uikit';
+import React from 'react';
+import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
+import {useRecording} from './recording/useRecording';
+import {useString} from '../utils/useString';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import Styles from '../components/styles';
 
-const START_RECORDING = gql`
-  mutation startRecordingSession($passphrase: String!, $secret: String) {
-    startRecordingSession(passphrase: $passphrase, secret: $secret)
-  }
-`;
-
-const STOP_RECORDING = gql`
-  mutation stopRecordingSession($passphrase: String!) {
-    stopRecordingSession(passphrase: $passphrase)
-  }
-`;
-
-/**
- * Component to start / stop Agora cloud recording.
- * Sends a control message to all users in the channel over RTM to indicate that
- * Cloud recording has started/stopped.
- */
-function usePrevious(value: any) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
+export interface RecordingButtonProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isRecordingActive: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
 }
 
-const Recording = (props: any) => {
-  const {rtcProps} = useContext(PropsContext);
-  const {primaryColor} = useContext(ColorContext);
-  const setRecordingActive = props.setRecordingActive;
-  const recordingActive = props.recordingActive;
-  const {phrase} = useParams();
-  const [startRecordingQuery] = useMutation(START_RECORDING);
-  const [stopRecordingQuery] = useMutation(STOP_RECORDING);
-  const {sendControlMessage} = useContext(ChatContext);
-  const prevRecordingState = usePrevious({recordingActive});
-
-  useEffect(() => {
-    /**
-     * The below check makes sure the notification is triggered
-     * only once. In native apps, this componenet is mounted everytime
-     * when chat icon is toggle, as Controls component is hidden and
-     * shown
-     */
-    if (prevRecordingState) {
-      if (prevRecordingState?.recordingActive === recordingActive) return;
-      Toast.show({
-        type: 'success',
-        text1: recordingActive ? 'Recording Started' : 'Recording Stopped',
-        visibilityTime: 1000,
-      });
+const Recording = (props: RecordingButtonProps) => {
+  const {startRecording, stopRecording, isRecordingActive} = useRecording();
+  //commented for v1 release
+  //const recordingButton = useString<boolean>('recordingButton');
+  const recordingButton = (recording: boolean) =>
+    recording ? 'Recording' : 'Record';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () => {
+    if (!isRecordingActive) {
+      startRecording && startRecording();
+    } else {
+      stopRecording && stopRecording();
     }
-  }, [recordingActive]);
+  };
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: isRecordingActive ? 'recordingActiveIcon' : 'recordingIcon',
+    onPress,
+    color: isRecordingActive ? '#FD0845' : $config.PRIMARY_COLOR,
+  };
+
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.btnText = recordingButton(isRecordingActive);
+    btnTemplateProps.style = Styles.localButton as Object;
+  }
 
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        if (!recordingActive) {
-          // If recording is not going on, start the recording by executing the graphql query
-          startRecordingQuery({
-            variables: {
-              passphrase: phrase,
-              secret:
-                rtcProps.encryption && rtcProps.encryption.key
-                  ? rtcProps.encryption.key
-                  : '',
-            },
-          })
-            .then((res) => {
-              console.log(res.data);
-              if (res.data.startRecordingSession === 'success') {
-                // Once the backend sucessfuly starts recording,
-                // send a control message to everbody in the channel indicating that cloud recording is now active.
-                sendControlMessage(controlMessageEnum.cloudRecordingActive);
-                // set the local recording state to true to update the UI
-                setRecordingActive(true);
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-            });
-        } else {
-          // If recording is already going on, stop the recording by executing the graphql query.
-          stopRecordingQuery({variables: {passphrase: phrase}})
-            .then((res) => {
-              console.log(res.data);
-              if (res.data.stopRecordingSession === 'success') {
-                // Once the backend sucessfuly stops recording,
-                // send a control message to everbody in the channel indicating that cloud recording is now inactive.
-                sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
-                // set the local recording state to false to update the UI
-                setRecordingActive(false);
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-            });
-        }
-      }}>
-      <View style={[style.localButton, {borderColor: primaryColor}]}>
-        <ImageIcon
-          name={recordingActive ? 'recordingActiveIcon' : 'recordingIcon'}
-          style={[style.buttonIcon]}
-          color={recordingActive ? '#FD0845' : $config.PRIMARY_COLOR}
-        />
-      </View>
-      <Text
-        style={{
-          textAlign: 'center',
-          marginTop: 5,
-          color: recordingActive ? '#FD0845' : $config.PRIMARY_COLOR,
-        }}>
-        {recordingActive ? 'Recording' : 'Record'}
-      </Text>
-    </TouchableOpacity>
+  return props?.render ? (
+    props.render(onPress, isRecordingActive, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
-const style = StyleSheet.create({
-  localButton: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 0,
-    width: 40,
-    height: 40,
-    display: 'flex',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonIcon: {
-    width: '90%',
-    height: '90%',
-  },
-});
-
 export default Recording;

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -9,52 +9,48 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {StyleSheet} from 'react-native';
-import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import ColorContext from '../components/ColorContext';
-import {gql, useMutation} from '@apollo/client';
-import {useParams} from '../components/Router';
-import {BtnTemplate} from '../../agora-rn-uikit';
-
-const MUTE_PSTN = gql`
-  mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
-    mutePSTN(uid: $uid, passphrase: $passphrase, mute: $mute) {
-      uid
-      mute
-    }
-  }
-`;
+import {controlMessageEnum} from '../components/ChatContext';
+import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import useIsPSTN from '../utils/isPSTNUser';
+import useMutePSTN from '../utils/useMutePSTN';
+import useSendControlMessage, {
+  CONTROL_MESSAGE_TYPE,
+} from '../utils/useSendControlMessage';
 
+export interface RemoteAudioMuteProps {
+  uid: UidType;
+  audio: boolean;
+  isHost: boolean;
+}
 /**
  * Component to mute / unmute remote audio.
  * Sends a control message to another user over RTM if the local user is a host.
  * If the local user is not a host, it simply renders an image
  */
-const RemoteAudioMute = (props: {
-  uid: number;
-  audio: boolean;
-  isHost: boolean;
-}) => {
+const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
   const {isHost = false} = props;
-  const {primaryColor} = useContext(ColorContext);
-  const {sendControlMessageToUid} = useContext(ChatContext);
-  const [mutePSTN, {data, loading, error}] = useMutation(MUTE_PSTN);
-  const {phrase} = useParams<{phrase: string}>();
-
+  const sendCtrlMsgToUid = useSendControlMessage();
+  const isPSTN = useIsPSTN();
+  const mutePSTN = useMutePSTN();
   return (
     <BtnTemplate
       disabled={!isHost}
       onPress={() => {
-        if (String(props.uid)[0] === '1')
-          mutePSTN({
-            variables: {
-              uid: props.uid,
-              passphrase: phrase,
-              mute: props.audio,
-            },
-          });
-        else sendControlMessageToUid(controlMessageEnum.muteAudio, props.uid);
+        if (isPSTN(props.uid)) {
+          try {
+            mutePSTN(props.uid);
+          } catch (error) {
+            console.error('An error occurred while muting the PSTN user.');
+          }
+        } else {
+          sendCtrlMsgToUid(
+            CONTROL_MESSAGE_TYPE.controlMessageToUid,
+            controlMessageEnum.muteAudio,
+            props.uid,
+          );
+        }
       }}
       style={style.buttonIconMic}
       name={props.audio ? 'mic' : 'micOff'}

package/template/src/subComponents/RemoteEndCall.tsx

@@ -9,20 +9,31 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {StyleSheet} from 'react-native';
-import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import {BtnTemplate} from '../../agora-rn-uikit';
+import {controlMessageEnum} from '../components/ChatContext';
+import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import useSendControlMessage, {
+  CONTROL_MESSAGE_TYPE,
+} from '../utils/useSendControlMessage';
 
-const RemoteEndCall = (props: {uid: number; isHost: boolean}) => {
-  const {sendControlMessageToUid} = useContext(ChatContext);
+export interface RemoteEndCallProps {
+  uid: UidType;
+  isHost: boolean;
+}
+const RemoteEndCall = (props: RemoteEndCallProps) => {
+  const sendCtrlMsgToUid = useSendControlMessage();
   return props.isHost && String(props.uid)[0] !== '1' ? (
     <BtnTemplate
       style={style.remoteButton}
       onPress={() => {
-        sendControlMessageToUid(controlMessageEnum.kickUser, props.uid);
+        sendCtrlMsgToUid(
+          CONTROL_MESSAGE_TYPE.controlMessageToUid,
+          controlMessageEnum.kickUser,
+          props.uid,
+        );
       }}
-      color='#FD0845'
+      color="#FD0845"
       name={'remoteEndCall'} // earlier was endCall, added remoteEndCall
     />
   ) : (

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -9,29 +9,37 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {StyleSheet} from 'react-native';
-import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import ColorContext from '../components/ColorContext';
-import {BtnTemplate} from '../../agora-rn-uikit';
+import {controlMessageEnum} from '../components/ChatContext';
+import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import useSendControlMessage, {
+  CONTROL_MESSAGE_TYPE,
+} from '../utils/useSendControlMessage';
+
 /**
  * Component to mute / unmute remote video.
  * Sends a control message to another user over RTM if the local user is a host.
  * If the local user is not a host, it simply renders an image
  */
-const RemoteVideoMute = (props: {
-  uid: number;
+export interface RemoteVideoMuteProps {
+  uid: UidType;
   video: boolean;
   isHost: boolean;
-}) => {
+}
+const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
   const {isHost = false} = props;
-  const {sendControlMessageToUid} = useContext(ChatContext);
+  const sendCtrlMsgToUid = useSendControlMessage();
 
   return String(props.uid)[0] !== '1' ? (
     <BtnTemplate
       disabled={!isHost}
       onPress={() => {
-        sendControlMessageToUid(controlMessageEnum.muteVideo, props.uid);
+        sendCtrlMsgToUid(
+          CONTROL_MESSAGE_TYPE.controlMessageToUid,
+          controlMessageEnum.muteVideo,
+          props.uid,
+        );
       }}
       style={style.buttonIconCam}
       name={props.video ? 'videocam' : 'videocamOff'}

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -10,52 +10,52 @@
 *********************************************
 */
 
+import {PropsContext, UidType} from '../../agora-rn-uikit';
 import React, {useContext} from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import chatContext from '../components/ChatContext';
+import {StyleSheet, View, Text} from 'react-native';
+import {useString} from '../utils/useString';
 /**
  *
- * @param uid - uid of the user 
+ * @param uid - uid of the user
  * @returns This component display overlay message "Screen sharing is active now" if user started sharing the screen.
- * why its needed : To prevent screensharing tunneling effect 
- * 
+ * why its needed : To prevent screensharing tunneling effect
+ *
  */
-function ScreenShareNotice({ uid }: any) {
-    const {userList, localUid} = useContext(chatContext);
-    /**
-     * In a meeting a and b are there
-        if a user sharing the screen - then that screenshare user uid is 1 for a’user end and its having xxx uid in another end
-        if b user sharing the screen - then that screenshare user uid is 1 for b’user end and its having xxx uid in another end
-     */
-    return uid === 1
-        ?
-        <View style={styles.screenSharingMessageContainer}>
-            <Text style={styles.screensharingMessage}>
-            {userList[localUid]?.name + "'s screen share is active."} 
-            </Text>
-        </View>
-        : null
+function ScreenShareNotice({uid}: {uid: UidType}) {
+  //commented for v1 release
+  // const screensharingActiveOverlayLabel = useString(
+  //   'screensharingActiveOverlayLabel',
+  // )();
+  const screensharingActiveOverlayLabel = 'Your screen share is active.';
+  const {rtcProps} = useContext(PropsContext);
+  return uid === rtcProps?.screenShareUid ? (
+    <View style={styles.screenSharingMessageContainer}>
+      <Text style={styles.screensharingMessage}>
+        {screensharingActiveOverlayLabel}
+      </Text>
+    </View>
+  ) : null;
 }
 
 const styles = StyleSheet.create({
-    screenSharingMessageContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: '100%',
-        height: '100%',
-        justifyContent: 'center',
-        zIndex: 2,
-        backgroundColor: 'rgba(0,0,0,0.9)',
-        borderRadius: 15
-    },
-    screensharingMessage: {
-        alignSelf: 'center',
-        fontSize: 20,
-        color: $config.SECONDARY_FONT_COLOR
-    }
-})
+  screenSharingMessageContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    zIndex: 2,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    borderRadius: 15,
+  },
+  screensharingMessage: {
+    alignSelf: 'center',
+    fontSize: 20,
+    color: $config.SECONDARY_FONT_COLOR,
+  },
+});
 
-export default ScreenShareNotice;
+export default ScreenShareNotice;

package/template/src/subComponents/SelectDevice.tsx

@@ -14,21 +14,17 @@ import {Picker, StyleSheet, View, Text} from 'react-native';
 import {PropsContext, ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from '../components/DeviceContext';
 import ColorContext from '../components/ColorContext';
+import {useString} from '../utils/useString';
 // import {dropdown} from '../../theme.json';
 /**
  * A component to diplay a dropdown and select a device.
  * It will add the selected device to the device context.
  */
-const SelectDevice = () => {
-  // Contexts
+const useSelectDevice = (): [boolean, string] => {
   const {rtcProps} = useContext(PropsContext);
   const {primaryColor} = useContext(ColorContext);
-  const {selectedCam, setSelectedCam, selectedMic, setSelectedMic, deviceList} =
-    useContext(DeviceContext);
-  // States
-  const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
   const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
-
+  const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
   React.useEffect(() => {
     if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
       setPickerDisabled(true);
@@ -38,58 +34,105 @@ const SelectDevice = () => {
       setBtnTheme(primaryColor);
     }
   }, [rtcProps?.role]);
+  return [isPickerDisabled, btnTheme];
+};
+
+interface SelectVideoDeviceProps {
+  render?: (
+    selectedCam: string,
+    setSelectedCam: (cam: string) => void,
+    deviceList: MediaDeviceInfo[],
+    isDisabled: boolean,
+  ) => JSX.Element;
+}
+
+const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
+  const {selectedCam, setSelectedCam, deviceList} = useContext(DeviceContext);
+  const [isPickerDisabled, btnTheme] = useSelectDevice();
+  return props?.render ? (
+    props.render(selectedCam, setSelectedCam, deviceList, isPickerDisabled)
+  ) : (
+    <Picker
+      enabled={!isPickerDisabled}
+      selectedValue={selectedCam}
+      style={[{borderColor: btnTheme}, style.popupPicker]}
+      onValueChange={(itemValue) => setSelectedCam(itemValue)}>
+      {deviceList.map((device: any) => {
+        if (device.kind === 'videoinput') {
+          return (
+            <Picker.Item
+              label={device.label}
+              value={device.deviceId}
+              key={device.deviceId}
+            />
+          );
+        }
+      })}
+    </Picker>
+  );
+};
 
+interface SelectAudioDeviceProps {
+  render?: (
+    selectedMic: string,
+    setSelectedMic: (mic: string) => void,
+    deviceList: MediaDeviceInfo[],
+    isDisabled: boolean,
+  ) => JSX.Element;
+}
+
+const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
+  const {selectedMic, setSelectedMic, deviceList} = useContext(DeviceContext);
+  const [isPickerDisabled, btnTheme] = useSelectDevice();
+  return props?.render ? (
+    props.render(selectedMic, setSelectedMic, deviceList, isPickerDisabled)
+  ) : (
+    <Picker
+      enabled={!isPickerDisabled}
+      selectedValue={selectedMic}
+      style={[{borderColor: btnTheme}, style.popupPicker]}
+      onValueChange={(itemValue) => setSelectedMic(itemValue)}>
+      {deviceList.map((device: any) => {
+        if (device.kind === 'audioinput') {
+          return (
+            <Picker.Item
+              label={device.label}
+              value={device.deviceId}
+              key={device.deviceId}
+            />
+          );
+        }
+      })}
+    </Picker>
+  );
+};
+
+const SelectDevice = () => {
+  const [isPickerDisabled] = useSelectDevice();
+  //commented for v1 release
+  // const settingScreenInfoMessage = useString('settingScreenInfoMessage')();
+  const settingScreenInfoMessage =
+    'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.';
   return (
     <View>
       <View style={{marginTop: 15}}></View>
       <View>
-        <Picker
-          enabled={!isPickerDisabled}
-          selectedValue={selectedCam}
-          style={[{borderColor: btnTheme}, style.popupPicker]}
-          onValueChange={(itemValue) => setSelectedCam(itemValue)}>
-          {deviceList.map((device: any) => {
-            if (device.kind === 'videoinput') {
-              return (
-                <Picker.Item
-                  label={device.label}
-                  value={device.deviceId}
-                  key={device.deviceId}
-                />
-              );
-            }
-          })}
-        </Picker>
-        <Picker
-          enabled={!isPickerDisabled}
-          selectedValue={selectedMic}
-          style={[{borderColor: btnTheme}, style.popupPicker]}
-          onValueChange={(itemValue) => setSelectedMic(itemValue)}>
-          {deviceList.map((device: any) => {
-            if (device.kind === 'audioinput') {
-              return (
-                <Picker.Item
-                  label={device.label}
-                  value={device.deviceId}
-                  key={device.deviceId}
-                />
-              );
-            }
-          })}
-        </Picker>
+        <SelectVideoDevice />
+        <SelectAudioDevice />
       </View>
       <View style={{marginTop: 15}}></View>
       {$config.EVENT_MODE && isPickerDisabled && (
         <View>
-          <Text style={style.infoTxt}>
-            Video and Audio sharing is disabled for attendees. Raise hand to
-            request permission to share
-          </Text>
+          <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
         </View>
       )}
     </View>
   );
 };
+export const SelectDeviceComponentsArray: [
+  (props: SelectVideoDeviceProps) => JSX.Element,
+  (props: SelectAudioDeviceProps) => JSX.Element,
+] = [SelectVideoDevice, SelectAudioDevice];
 
 const style = StyleSheet.create({
   popupPicker: {