agora-appbuilder-core 1.0.8 → 2.0.1

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -17,6 +17,7 @@ import icons from '../assets/icons';
 import platform from '../subComponents/Platform';
 import {useParams} from '../components/Router';
 import Toast from '../../react-native-toast-message';
+import {BtnTemplate} from '../../agora-rn-uikit';
 
 const SHARE = gql`
   query share($passphrase: String!) {
@@ -72,19 +73,14 @@ const ParticipantView = (props: {showText?: boolean}) => {
   };
 
   return (
-    <TouchableOpacity
+    <BtnTemplate
       disabled={!data}
       style={style.backButton}
-      onPress={() => copyToClipboard()}>
-      <Image
-        resizeMode={'contain'}
-        style={!data ? [style.backIcon] : style.backIcon}
-        source={{uri: icons.clipboard}}
-      />
-      {props.showText ?
-        <Text style={{color: $config.PRIMARY_FONT_COLOR}}>Copy Meeting Invite</Text>
-        :<></>}
-    </TouchableOpacity>
+      onPress={() => copyToClipboard()}
+      name={'clipboard'}
+      btnText={props.showText ? 'Copy Meeting Invite' : ''}
+      color={$config.PRIMARY_FONT_COLOR}
+    />
   );
 };
 
@@ -94,13 +90,14 @@ const style = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignSelf: 'center',
+    width: 28,
+    height: 20,
   },
   backIcon: {
     width: 28,
     height: 20,
     alignSelf: 'center',
     justifyContent: 'center',
-    tintColor: $config.PRIMARY_FONT_COLOR,
   },
 });
 

package/template/src/subComponents/LocalAudioMute.tsx

@@ -1,17 +1,17 @@
 /*
 ********************************************
  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. 
+ 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} from 'react';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
-import {LocalContext} from '../../agora-rn-uikit/src/LocalUserContext';
+import {RtcContext} from '../../agora-rn-uikit';
+import {LocalContext} from '../../agora-rn-uikit';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
@@ -27,7 +27,7 @@ function LocalAudioMute() {
   return (
     <TouchableOpacity
       onPress={() => {
-        (dispatch as DispatchType<'LocalMuteAudio'>)({
+        dispatch({
           type: 'LocalMuteAudio',
           value: [local.audio],
         });

package/template/src/subComponents/LocalVideoMute.tsx

@@ -1,17 +1,17 @@
 /*
 ********************************************
  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. 
+ 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} from 'react';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
-import {LocalContext} from '../../agora-rn-uikit/src/LocalUserContext';
+import {RtcContext} from '../../agora-rn-uikit';
+import {LocalContext} from '../../agora-rn-uikit';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
@@ -27,7 +27,7 @@ function LocalVideoMute() {
   return (
     <TouchableOpacity
       onPress={() => {
-        (dispatch as DispatchType<'LocalMuteVideo'>)({
+        dispatch({
           type: 'LocalMuteVideo',
           value: [local.video],
         });

package/template/src/subComponents/LogoutButton.tsx

@@ -31,7 +31,7 @@ const LogoutButton = () => {
 
   const logout = () => {
     if (setStore) {
-      setStore({token: null});
+      setStore({token: null, displayName: ''});
     }
     logoutQuery({variables: {token}}).catch((e) => {
       console.log(e);

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -0,0 +1,161 @@
+import React, {useState} from 'react';
+import {
+  View,
+  Image,
+  Text,
+  Pressable,
+  Platform,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import {networkIconsObject} from '../components/NetworkQualityContext';
+
+/**
+ *
+ * @param networkStat - Network quality stat [ 0 - 8 ]
+ * @param primaryColor - Primary color of the project
+ * @param small - Reduced fontsize for pinned view min user panel
+ * @param rootStyle - CSS style override primarily used for custom placement
+ * @returns This component display overlay network quality indicator with an icon that expands on
+ * hover to show network quality text [ ex. Excellent, Good, Bad etc ]
+ *
+ */
+export const NetworkQualityPill = ({
+  networkStat,
+  primaryColor,
+  small,
+  rootStyle,
+}: {
+  networkStat: number;
+  primaryColor: any;
+  small?: boolean;
+  rootStyle?: StyleProp<ViewStyle>;
+}) => {
+  const [networkTextVisible, setNetworkTextVisible] = useState(false);
+
+  return (
+    <View
+      style={[
+        style.networkPill,
+        {
+          opacity: networkTextVisible ? 1 : 0.8,
+        },
+        rootStyle,
+      ]}
+    >
+      <PlatformSpecificWrapper {...{networkTextVisible, setNetworkTextVisible}}>
+        <View style={[style.networkIndicatorBackdrop]}>
+          <Image
+            source={{
+              uri: networkIconsObject[networkStat].icon,
+            }}
+            style={[
+              style.networkIcon,
+              {
+                tintColor:
+                  networkIconsObject[networkStat].tint === 'primary'
+                    ? primaryColor
+                    : networkIconsObject[networkStat].tint,
+              },
+            ]}
+            resizeMode={'contain'}
+          />
+        </View>
+        {networkTextVisible && (
+          <Text
+            textBreakStrategy={'simple'}
+            style={[
+              style.networkPillText,
+              {fontSize: small ? 14 : 15, userSelect: 'none'},
+            ]}
+          >
+            {networkIconsObject[networkStat].text}
+          </Text>
+        )}
+      </PlatformSpecificWrapper>
+    </View>
+  );
+};
+
+const PlatformSpecificWrapper = ({
+  networkTextVisible,
+  setNetworkTextVisible,
+  children,
+}: any) => {
+  return Platform.OS !== 'web' ? (
+    <Pressable
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+      onPress={() => {
+        setNetworkTextVisible((visible: boolean) => !visible);
+      }}
+    >
+      {children}
+    </Pressable>
+  ) : (
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+      onClick={(e) => {
+        e.preventDefault();
+        setNetworkTextVisible((visible: boolean) => !visible);
+      }}
+      onMouseEnter={() => {
+        setNetworkTextVisible(true);
+      }}
+      onMouseLeave={() => {
+        setNetworkTextVisible(false);
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const style = StyleSheet.create({
+  networkPill: {
+    height: 30,
+    backgroundColor: $config.SECONDARY_FONT_COLOR + 'bb',
+    position: 'absolute',
+    zIndex: 2,
+    paddingHorizontal: 0,
+    borderRadius: 15,
+  },
+  networkPillContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  networkPillText: {
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 30,
+    fontSize: 15,
+    fontWeight: '600',
+    marginLeft: 5,
+    marginRight: 15,
+  },
+  networkIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
+  },
+  networkIndicatorBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignSelf: 'center',
+    marginLeft: 5,
+    marginRight: 5,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    justifyContent: 'center',
+  },
+});

package/template/src/subComponents/Recording.tsx

@@ -16,8 +16,9 @@ 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/src/PropsContext';
+import {PropsContext} from '../../agora-rn-uikit';
 import Toast from '../../react-native-toast-message';
+import {ImageIcon} from '../../agora-rn-uikit';
 
 const START_RECORDING = gql`
   mutation startRecordingSession($passphrase: String!, $secret: String) {
@@ -46,12 +47,12 @@ const Recording = (props: any) => {
   const [stopRecordingQuery] = useMutation(STOP_RECORDING);
   const {sendControlMessage} = useContext(ChatContext);
 
-  useEffect(()=>{
-    if(recordingActive)
-      Toast.show({text1: 'Recording Started', visibilityTime: 1000})
+  useEffect(() => {
+    if (recordingActive)
+      Toast.show({text1: 'Recording Started', visibilityTime: 1000});
     // else if(!recordingActive)
-      // Toast.show({text1: 'Recording Finished', visibilityTime: 1000})
-  },[recordingActive])
+    // Toast.show({text1: 'Recording Finished', visibilityTime: 1000})
+  }, [recordingActive]);
 
   return (
     <TouchableOpacity
@@ -98,15 +99,11 @@ const Recording = (props: any) => {
             });
         }
       }}>
-      <View style={[style.localButton, { borderColor: primaryColor }]}>
-        <Image
-          source={{
-            uri: recordingActive
-              ? icons.recordingActiveIcon
-              : icons.recordingIcon,
-          }}
-          style={[style.buttonIcon, { tintColor: recordingActive ? '#FD0845' : primaryColor }]}
-          resizeMode={'contain'}
+      <View style={[style.localButton, {borderColor: primaryColor}]}>
+        <ImageIcon
+          name={recordingActive ? 'recordingActiveIcon' : 'recordingIcon'}
+          style={[style.buttonIcon]}
+          color={recordingActive ? '#FD0845': $config.PRIMARY_COLOR}
         />
       </View>
       <Text
@@ -137,7 +134,6 @@ const style = StyleSheet.create({
   buttonIcon: {
     width: '100%',
     height: '100%',
-    tintColor: $config.PRIMARY_COLOR,
   },
 });
 

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {TouchableOpacity, Image, View, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
-import { gql, useMutation } from '@apollo/client';
-import { useParams } from '../components/Router';
+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) {
+  mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
+    mutePSTN(uid: $uid, passphrase: $passphrase, mute: $mute) {
       uid
       mute
+    }
   }
-}
 `;
 
 /**
@@ -36,32 +36,29 @@ const RemoteAudioMute = (props: {
   audio: boolean;
   isHost: boolean;
 }) => {
+  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}>();
 
-  return props.isHost ? (
-    <TouchableOpacity
+  return (
+    <BtnTemplate
+      disabled={!isHost}
       onPress={() => {
-        if(String(props.uid)[0] === '1')
-          mutePSTN({variables: {
-            uid: props.uid, passphrase: phrase, mute: props.audio
-          }})
+        if (String(props.uid)[0] === '1')
+          mutePSTN({
+            variables: {
+              uid: props.uid,
+              passphrase: phrase,
+              mute: props.audio,
+            },
+          });
         else sendControlMessageToUid(controlMessageEnum.muteAudio, props.uid);
-      }}>
-      <Image
-        style={[style.buttonIconMic, {tintColor: primaryColor}]}
-        source={{uri: props.audio ? icons.mic : icons.micOff}}
-      />
-    </TouchableOpacity>
-  ) : (
-    <View>
-      <Image
-        style={[style.buttonIconMic, {tintColor: primaryColor}]}
-        source={{uri: props.audio ? icons.mic : icons.micOff}}
-      />
-    </View>
+      }}
+      style={style.buttonIconMic}
+      name={props.audio ? 'mic' : 'micOff'}
+    />
   );
 };
 
@@ -69,7 +66,6 @@ const style = StyleSheet.create({
   buttonIconMic: {
     width: 25,
     height: 24,
-    tintColor: $config.PRIMARY_COLOR,
   },
 });
 

package/template/src/subComponents/RemoteEndCall.tsx

@@ -10,23 +10,21 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {TouchableOpacity, Image, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import icons from '../assets/icons';
+import {BtnTemplate} from '../../agora-rn-uikit';
 
 const RemoteEndCall = (props: {uid: number; isHost: boolean}) => {
   const {sendControlMessageToUid} = useContext(ChatContext);
   return props.isHost && String(props.uid)[0] !== '1' ? (
-    <TouchableOpacity
+    <BtnTemplate
       style={style.remoteButton}
       onPress={() => {
         sendControlMessageToUid(controlMessageEnum.kickUser, props.uid);
-      }}>
-      <Image
-        style={style.buttonIconEnd}
-        source={{uri: icons.endCall}}
-        resizeMode={'contain'}/>
-    </TouchableOpacity>
+      }}
+      color='#FD0845'
+      name={'remoteEndCall'} // earlier was endCall, added remoteEndCall
+    />
   ) : (
     <></>
   );
@@ -46,12 +44,6 @@ const style = StyleSheet.create({
     marginHorizontal: 0,
     backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
-  buttonIconEnd: {
-    width: 30,
-    height: 25,
-    // marginLeft: 3,
-    tintColor: '#f86051',
-  },
 });
 
 export default RemoteEndCall;

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -10,11 +10,10 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {TouchableOpacity, Image, View, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
-
+import {BtnTemplate} from '../../agora-rn-uikit';
 /**
  * Component to mute / unmute remote video.
  * Sends a control message to another user over RTM if the local user is a host.
@@ -26,31 +25,20 @@ const RemoteVideoMute = (props: {
   isHost: boolean;
 }) => {
   const {primaryColor} = useContext(ColorContext);
+  const {isHost = false} = props;
   const {sendControlMessageToUid} = useContext(ChatContext);
-  return String(props.uid)[0] !== '1'
-    ? props.isHost
-      ? (
-        <TouchableOpacity
-          onPress={() => {
-            sendControlMessageToUid(controlMessageEnum.muteVideo, props.uid);
-          }}>
-          <Image
-            style={[style.buttonIconCam, {tintColor: primaryColor}]}
-            source={{uri: props.video ? icons.videocam : icons.videocamOff}}
-            resizeMode={'contain'}
-          />
-        </TouchableOpacity>
-      ) : (
-        <View>
-          <Image
-            style={[style.buttonIconCam, {tintColor: primaryColor}]}
-            source={{uri: props.video ? icons.videocam : icons.videocamOff}}
-            resizeMode={'contain'}
-          />
-        </View>
-      )
-    :
-    (<></>);
+  return String(props.uid)[0] !== '1' ? (
+    <BtnTemplate
+      disabled={!isHost}
+      onPress={() => {
+        sendControlMessageToUid(controlMessageEnum.muteVideo, props.uid);
+      }}
+      style={style.buttonIconCam}
+      name={props.video ? 'videocam' : 'videocamOff'}
+    />
+  ) : (
+    <></>
+  );
 };
 
 const style = StyleSheet.create({
@@ -58,7 +46,6 @@ const style = StyleSheet.create({
     width: 28,
     height: 25,
     marginHorizontal: 2,
-    tintColor: $config.PRIMARY_COLOR,
   },
 });
 

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -0,0 +1,61 @@
+/*
+********************************************
+ 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} from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import chatContext from '../components/ChatContext';
+/**
+ *
+ * @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 
+ * 
+ */
+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
+}
+
+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
+    }
+})
+
+export default ScreenShareNotice;