agora-appbuilder-core 2.0.0 → 2.0.1

package/template/src/subComponents/ScreenshareButton.tsx

@@ -12,16 +12,16 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {Image, TouchableOpacity, StyleSheet, View, Text} from 'react-native';
 import icons from '../assets/icons';
-import RtcContext from '../../agora-rn-uikit/src/RtcContext';
-import PropsContext from '../../agora-rn-uikit/src/PropsContext';
+import {RtcContext} from '../../agora-rn-uikit';
+import {PropsContext} from '../../agora-rn-uikit';
 import ColorContext from '../components/ColorContext';
 import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../components/Router';
 import ChatContext, {controlMessageEnum} from '../components/ChatContext';
-import MinUidContext from '../../agora-rn-uikit/src/MinUidContext';
-import MaxUidContext from '../../agora-rn-uikit/src/MaxUidContext';
+import {MinUidContext} from '../../agora-rn-uikit';
+import {MaxUidContext} from '../../agora-rn-uikit';
 import Layout from '../subComponents/LayoutEnum';
-
+import {ImageIcon} from '../../agora-rn-uikit';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -35,7 +35,6 @@ const SET_NORMAL = gql`
   }
 `;
 
-
 interface ScreenSharingProps {
   screenshareActive: boolean;
   setScreenshareActive: React.Dispatch<React.SetStateAction<boolean>>;
@@ -64,53 +63,57 @@ const ScreenshareButton = (props: ScreenSharingProps) => {
   const prevUsers = usePrevious({users});
   const prevUserList = usePrevious({userList});
   const {phrase} = useParams();
-  const {screenshareActive, setScreenshareActive, setLayout, recordingActive} = props;
+  const {screenshareActive, setScreenshareActive, setLayout, recordingActive} =
+    props;
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
 
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
-  
+
   useEffect(() => {
     rtc.RtcEngine.addListener('ScreenshareStopped', () => {
       setScreenshareActive(false);
-      console.log('STOPPED SHARING')
+      console.log('STOPPED SHARING');
       setLayout((l: Layout) =>
         l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
       );
       setNormalQuery({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
-          // setScreenshareActive(false);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-
+        .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
+            // setScreenshareActive(false);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     });
   }, []);
 
   useEffect(() => {
-    if(prevUsers !== undefined){
-      let joinedUser = users.filter(person => prevUsers.users.every(person2 => !(person2.uid === person.uid)))
-      let leftUser = prevUsers.users.filter(person => users.every(person2 => !(person2.uid === person.uid)))
+    if (prevUsers !== undefined) {
+      let joinedUser = users.filter((person) =>
+        prevUsers.users.every((person2) => !(person2.uid === person.uid)),
+      );
+      let leftUser = prevUsers.users.filter((person) =>
+        users.every((person2) => !(person2.uid === person.uid)),
+      );
 
-      if(joinedUser.length === 1){
+      if (joinedUser.length === 1) {
         const newUserUid = joinedUser[0].uid;
-        if(userList[newUserUid] && userList[newUserUid].type === 1){
-            dispatch({
-              type: 'SwapVideo',
-              value: [joinedUser[0]],
-            });
-            setLayout(Layout.Pinned);
+        if (userList[newUserUid] && userList[newUserUid].type === 1) {
+          dispatch({
+            type: 'SwapVideo',
+            value: [joinedUser[0]],
+          });
+          setLayout(Layout.Pinned);
         } else if (newUserUid === 1) {
-          if (newUserUid !== users[0].uid){
+          if (newUserUid !== users[0].uid) {
             dispatch({
               type: 'SwapVideo',
               value: [joinedUser[0]],
@@ -120,16 +123,16 @@ const ScreenshareButton = (props: ScreenSharingProps) => {
         }
       }
 
-      if(leftUser.length === 1){
+      if (leftUser.length === 1) {
         const leftUserUid = leftUser[0].uid;
-        if(userList[leftUserUid] && userList[leftUserUid].type === 1){
-            setLayout((l: Layout) =>
-              l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
-            );    
+        if (userList[leftUserUid] && userList[leftUserUid].type === 1) {
+          setLayout((l: Layout) =>
+            l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
+          );
         }
       }
-  }
-}, [users, userList])
+    }
+  }, [users, userList]);
   return (
     <TouchableOpacity
       onPress={async () => {
@@ -154,7 +157,7 @@ const ScreenshareButton = (props: ScreenSharingProps) => {
             .catch((err) => {
               console.log(err);
             });
-        } else if(isScreenActive && recordingActive){
+        } else if (isScreenActive && recordingActive) {
           // If recording is already going on, stop the recording by executing the graphql query.
           setNormalQuery({variables: {passphrase: phrase}})
             .then((res) => {
@@ -185,41 +188,38 @@ const ScreenshareButton = (props: ScreenSharingProps) => {
         } catch (e) {
           console.error("can't start the screen share", e);
           setNormalQuery({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
-              // setScreenshareActive(false);
-            }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+            .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
+                // setScreenshareActive(false);
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
         }
       }}>
-        <View style={
-        screenshareActive
-          ? style.greenLocalButton
-          : [style.localButton, {borderColor: primaryColor}]
-      }>
-      <Image
-        source={{
-          uri: screenshareActive
-            ? icons.screenshareOffIcon
-            : icons.screenshareIcon,
-        }}
-        style={[style.buttonIcon, {tintColor: primaryColor}]}
-        resizeMode={'contain'}
-      />
+      <View
+        style={
+          screenshareActive
+            ? style.greenLocalButton
+            : [style.localButton, {borderColor: primaryColor}]
+        }>
+        <ImageIcon
+          name={screenshareActive ? 'screenshareOffIcon' : 'screenshareIcon'}
+          style={[style.buttonIcon]}
+        />
       </View>
-      <Text style={{
-        textAlign: 'center',
-        marginTop: 5,
-        color: $config.PRIMARY_COLOR,
-      }}>
+      <Text
+        style={{
+          textAlign: 'center',
+          marginTop: 5,
+          color: $config.PRIMARY_COLOR,
+        }}>
         Share
       </Text>
     </TouchableOpacity>
@@ -251,7 +251,6 @@ const style = StyleSheet.create({
   buttonIcon: {
     width: '90%',
     height: '90%',
-    tintColor: $config.PRIMARY_COLOR,
   },
 });
 

package/template/src/subComponents/SwitchCamera.tsx

@@ -1,14 +1,17 @@
 import React, {useContext} from 'react';
 import {StyleSheet} from 'react-native';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
-import BtnTemplate from '../../agora-rn-uikit/src/Controls/BtnTemplate';
+import {RtcContext} from '../../agora-rn-uikit';
+import {BtnTemplate} from '../../agora-rn-uikit';
+import {LocalContext} from '../../agora-rn-uikit';
 
 function SwitchCamera() {
   const {RtcEngine} = useContext(RtcContext);
+  const local = useContext(LocalContext);
   return (
     <BtnTemplate
       name={'switchCamera'}
       btnText={'Switch'}
+      disabled={local.video ? false : true }
       style={{
         backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
         borderRadius: 23,

package/template/src/subComponents/TextWithTooltip.native.tsx

@@ -0,0 +1,128 @@
+/*
+********************************************
+ 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, useRef} from 'react';
+import {View, Text, Modal, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, useWindowDimensions} from 'react-native';
+/**
+ * Component showing text with tooltip on mobile native
+ */
+const TextWithToolTip = (props: any) => {
+    const {width:globalWidth, height:globalHeight} = useWindowDimensions();
+    const [toolTipVisible, setToolTipVisible] = useState(false);
+    const [position, setPosition] = useState({})
+    const ref = useRef(null);
+    /**
+     * Private chat user list - we are using this component to show the username and that component itself clickable 
+     * and user will navigate to next screen(chatting screen) so if we had touchable here they can't proceed futher, 
+     * hence checked tocuable flag and creating the view based on that
+     *  */     
+    const CustomView = props?.touchable === false ? View : TouchableOpacity
+    return(
+        <View style={{flex: 1}}>
+            <Modal
+                animationType="fade"
+                transparent={true}
+                visible={toolTipVisible}
+                onRequestClose={() => {
+                    setToolTipVisible(!toolTipVisible);
+                }}
+            >
+                <TouchableWithoutFeedback onPress={()=>{setToolTipVisible(!toolTipVisible)}}>
+                    <View 
+                        style={style.backDrop} 
+                    />
+                </TouchableWithoutFeedback>
+                <View style={[style.textContainer, position]}>
+                    <Text style={style.textStyle}>{props.value}</Text>
+                </View>
+            </Modal>
+            <CustomView style={{flex:1}} ref={ref} onPress={() => {
+                    ref?.current?.measure( (fx: number, fy: number, localWidth: number, localHeight: number, px: number, py: number) => {
+                        /* To display the tooltip we are setting to position and maxwidth. so it will display above and below actual name present with modal.
+                        ---------
+                        | A | B |
+                        ---------
+                        | C | D |
+                        ---------
+                        Assume we are spliting mobile/tablet screen into 4 section
+
+                        When user click any username doing below the calculation to find (left or right postion and maxwidth). 
+                        so it won't hidden and we can use the maximum area to show tooltip
+                        
+                        For ex:
+                        Case 1: If element is present in the A or C section then we will set position top and left
+                        Case 2: If element is present in the B or D section then we will set position top and right position
+
+                        Note : we are also can doing some calculation based on height so that text won't hidden in the bottom.
+                        **/
+
+                        const rightPos = (globalWidth - (px + localWidth)) - 20 < 0 ? 10 : (globalWidth - (px + localWidth)) - 20
+                        const leftPos = px < 0 ? 10 : px
+                        if(px > globalWidth/2){
+                            if(py > globalHeight/2){
+                                setPosition({
+                                    top: py - localHeight,
+                                    right: rightPos,
+                                    maxWidth: (globalWidth - rightPos) - 30,
+                                })
+                            }else{
+                                setPosition({
+                                    top: py+localHeight,
+                                    right: rightPos,
+                                    maxWidth: (globalWidth - rightPos) - 30,
+                                })
+                            }
+                        }else{
+                            if(py > globalHeight/2){
+                                setPosition({
+                                    top: py - localHeight,
+                                    left: leftPos,
+                                    maxWidth: (globalWidth - leftPos - 5),
+                                })
+                            }else{
+                                setPosition({
+                                    top: py+localHeight,
+                                    left: leftPos,
+                                    maxWidth: (globalWidth - leftPos - 5),
+                                })
+                            }
+                        }
+                        setTimeout(() =>{
+                            setToolTipVisible(!toolTipVisible)
+                        })
+                    })     
+                }}>
+                <Text style={props.style} numberOfLines={1}>{props.value}</Text>
+            </CustomView>
+        </View>
+    )
+};
+
+const style = StyleSheet.create({
+    backDrop:{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    textContainer:{ 
+        position: 'absolute',
+        zIndex: 999,
+        marginRight: 20
+    },
+    textStyle:{
+        backgroundColor:'white', padding: 5, margin: 5        
+    }
+})
+
+export default TextWithToolTip;

package/template/src/subComponents/TextWithTooltip.tsx

@@ -0,0 +1,44 @@
+/*
+********************************************
+ 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 from 'react';
+import {Text} from 'react-native';
+import mobileAndTabletCheck from '../utils/mobileWebTest';
+import TextWithToolTipNative from './TextWithTooltip.native';
+/**
+ * Text with tooltip
+ * web - used title attribute to show the tooltip
+ */
+const TextWithToolTip = (props: any) => {
+    return(
+        <div 
+            style={style.containerStyle} 
+            title={props.value}
+            >
+            <Text
+                numberOfLines={1}
+                textBreakStrategy='simple'
+                style={[props.style]}  
+            >{props.value}</Text>
+        </div>
+    )
+};
+
+const style = {
+    containerStyle:{
+        display: 'flex'
+    },
+}
+/**
+ * Web and Desktop : using the TextWithToolTip - which have the browser tooltip 
+ * Mobile and Mobile Web : using the TextWithToolTipNative - which have the custom tooltip using modal
+ */
+export default mobileAndTabletCheck() ? TextWithToolTipNative : TextWithToolTip;

package/template/src/subComponents/toastConfig.tsx

@@ -24,11 +24,11 @@ const toastConfig = {
             {...rest}
             //BaseToast is modified to have zIndex: 100
             style={{ borderLeftColor: $config.PRIMARY_COLOR, backgroundColor: $config.SECONDARY_FONT_COLOR, width: !mobileAndTabletCheck() ? '40%' : '95%'}}
-            contentContainerStyle={{ paddingHorizontal: 15 }}
+            contentContainerStyle={{ paddingHorizontal: 15, overflow: 'hidden'}}
             text1Style={{
                 fontSize: 15,
                 fontWeight: '400',
-                color: $config.PRIMARY_FONT_COLOR,
+                color: $config.PRIMARY_FONT_COLOR                
             }}
             text1={text1}
             text2={text2}

package/template/src/utils/isSafariBrowser.tsx

@@ -0,0 +1,22 @@
+const isSafariBrowser = () => {
+  if (!('userAgent' in navigator)) {
+    console.warn('unable to detect browser');
+    return false;
+  }
+
+  const userAgentString = navigator.userAgent;
+  // Detect Chrome
+  const chromeAgent = userAgentString.indexOf('Chrome') > -1;
+  // Detect Safari
+  const safariAgent = userAgentString.indexOf('Safari') > -1;
+
+  // One additional check is required in the case of the Safari browser
+  // as the user-agent of the Chrome browser also includes the Safari browser’s user-agent.
+  // If both the user-agents of Chrome and Safari are in the user-agent,
+  // it means that the browser is Chrome, and hence the Safari browser value is discarded.
+
+  if (chromeAgent && safariAgent) return false; // Discard Safari since it also matches Chrome
+  return true;
+};
+
+export default isSafariBrowser;

package/template/agora-rn-uikit/Components.js

@@ -1,35 +0,0 @@
-import Endcall from './src/Controls/Local/EndCall';
-import FullScreen from './src/Controls/Local/FullScreen';
-import LocalAudioMute from './src/Controls/Local/LocalAudioMute';
-import LocalVideoMute from './src/Controls/Local/LocalVideoMute';
-import SwitchCamera from './src/Controls/Local/SwitchCamera';
-import Controls from './src/Controls/LocalControls';
-import RemoteAudioMute from './src/Controls/Remote/RemoteAudioMute';
-import RemoteSwap from './src/Controls/Remote/RemoteSwap';
-import RemoteVideoMute from './src/Controls/Remote/RemoteVideoMute';
-import RemoteControls from './src/Controls/RemoteControls';
-import MaxVideoView from './src/MaxVideoView';
-import MinVideoView from './src/MinVideoView';
-import RtcConfigure from "./src/RTCConfigure";
-import BtnTemplate from "./src/Controls/BtnTemplate";
-import Recording from './src/Controls/Local/Recording';
-import Screenshare from './src/Controls/Local/Screenshare';
-
-export {
-  Endcall,
-  FullScreen,
-  LocalAudioMute,
-  LocalVideoMute,
-  SwitchCamera,
-  Controls,
-  RemoteAudioMute,
-  RemoteSwap,
-  RemoteVideoMute,
-  RemoteControls,
-  MaxVideoView,
-  MinVideoView,
-  RtcConfigure,
-  BtnTemplate,
-  Recording,
-  Screenshare,
-};

package/template/agora-rn-uikit/Contexts.js

@@ -1,7 +0,0 @@
-import MaxUidContext from './src/MaxUidContext';
-import MinUidContext from './src/MinUidContext';
-import PropsContext from './src/PropsContext';
-import RtcContext from './src/RtcContext';
-import LocalUserContext, {LocalContext} from "./src/LocalUserContext";
-
-export { MaxUidContext, MinUidContext, PropsContext, RtcContext, LocalUserContext, LocalContext };

package/template/agora-rn-uikit/index.js

@@ -1,12 +0,0 @@
-/**
- * @format
- */
-
-// import {AppRegistry} from 'react-native';
-// import App from './App';
-// import {name as appName} from './app.json';
-
-// AppRegistry.registerComponent(appName, () => App);
-
-import AgoraUIKit from './src/AgoraUIKit';
-export default AgoraUIKit;

package/template/agora-rn-uikit/src/MinVideoView.tsx

@@ -1,87 +0,0 @@
-import React, { useState, useContext } from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
-import { RtcLocalView, RtcRemoteView, VideoRenderMode } from 'react-native-agora';
-import styles from './Style';
-import icons from './Controls/Icons';
-import RemoteControls from './Controls/RemoteControls';
-import PropsContext from './PropsContext';
-import {UidInterface} from './RtcContext';
-
-const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
-
-interface MinViewInterface {
-  user: UidInterface;
-  color?: string;
-  showOverlay?: boolean;
-}
-
-const MinVideoView: React.FC<MinViewInterface> = (props) => {
-  const [overlay, setOverlay] = useState(false);
-  const { styleProps } = useContext(PropsContext);
-  const { minViewStyles, theme, remoteBtnStyles } = styleProps || {};
-  const { minCloseBtnStyles } = remoteBtnStyles || {};
-  const { showOverlay } = props || {};
-  
-  return (
-    <View style={{ margin: 5 }}>
-      {overlay && showOverlay ?
-        <TouchableOpacity onPress={() => setOverlay(true)}>
-          {props.user.uid === 'local' ? (
-            props.user.video ? (
-              <LocalView
-                style={{ ...styles.minView, ...(minViewStyles as object) }}
-                renderMode={VideoRenderMode.Hidden}
-                zOrderMediaOverlay={true}
-              />
-            ) : (
-              <View style={{flex: 1, backgroundColor: '#000'}} />
-            )
-          ) : (
-              <RemoteView
-                style={{ ...styles.minView, ...(minViewStyles as object) }}
-                uid={props.user.uid as number}
-                renderMode={VideoRenderMode.Hidden}
-                zOrderMediaOverlay={true}
-              />
-            )}
-        </TouchableOpacity>
-        : props.user.uid === 'local' ? (
-          <LocalView
-            style={{ ...styles.minView, ...(minViewStyles as object) }}
-            renderMode={VideoRenderMode.Hidden}
-            zOrderMediaOverlay={true}
-          />
-        ) : (
-            <RemoteView
-              style={{ ...styles.minView, ...(minViewStyles as object) }}
-              uid={props.user.uid as number}
-              renderMode={VideoRenderMode.Hidden}
-              zOrderMediaOverlay={true}
-            />
-          )}
-
-      {overlay && showOverlay ? (
-        <View style={styles.minOverlay}>
-          <TouchableOpacity
-            style={{ ...styles.minCloseBtn, ...(minCloseBtnStyles as object) }}
-            onPress={() => setOverlay(!overlay)}>
-            <Image
-              style={{
-                width: 25,
-                height: 25,
-                tintColor: theme || props.color || '#fff',
-              }}
-              source={{ uri: icons.close }}
-            />
-          </TouchableOpacity>
-          <RemoteControls showRemoteSwap={true} user={props.user} />
-        </View>
-      ) : (
-          <></>
-        )}
-    </View>
-  );
-};
-
-export default MinVideoView;