agora-appbuilder-core 1.0.8 → 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,70 +63,76 @@ 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);
-        }else if(newUserUid ===  1){
+        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) {
+            dispatch({
+              type: 'SwapVideo',
+              value: [joinedUser[0]],
+            });
+          }
+          setLayout(Layout.Pinned);
         }
       }
 
-      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 () => {
@@ -152,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) => {
@@ -183,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>
@@ -249,7 +251,6 @@ const style = StyleSheet.create({
   buttonIcon: {
     width: '90%',
     height: '90%',
-    tintColor: $config.PRIMARY_COLOR,
   },
 });
 

package/template/src/subComponents/SelectOAuth.tsx

@@ -17,56 +17,69 @@ import apple from '../assets/apple.png';
 import slack from '../assets/slack.png';
 import microsoft from '../assets/microsoft.png';
 import Logo from './Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 
 const SelectOAuth = ({onSelectOAuth}) => {
   // Linking.openURL(url);
   const {primaryColor} = useContext(ColorContext);
   return (
     <View style={style.main}>
-      <View style={style.nav}>
-        <Logo />
-      </View>
+      <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
       <View style={style.content}>
         <View style={style.leftContent}>
           <Text style={style.heading}>{$config.APP_NAME}</Text>
           <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
           <View style={style.inputs}>
             <View style={style.oAuthContainer}>
-              <Text style={{fontSize: 16, fontWeight: '500', marginBottom: 20, color: $config.PRIMARY_FONT_COLOR}}>
+              <Text
+                style={{
+                  fontSize: 16,
+                  fontWeight: '500',
+                  marginBottom: 20,
+                  color: $config.PRIMARY_FONT_COLOR,
+                }}>
                 Login using OAuth
               </Text>
-              {$config.ENABLE_GOOGLE_OAUTH ?
+              {$config.ENABLE_GOOGLE_OAUTH ? (
                 <TouchableOpacity
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'google'})}>
                   <Image source={google} style={style.logo} />
                   <Text style={[style.secondaryBtnText]}>Google</Text>
                 </TouchableOpacity>
-                : <></>}
-              {$config.ENABLE_MICROSOFT_OAUTH ?
+              ) : (
+                <></>
+              )}
+              {$config.ENABLE_MICROSOFT_OAUTH ? (
                 <TouchableOpacity
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'microsoft'})}>
                   <Image source={microsoft} style={style.logo} />
                   <Text style={[style.secondaryBtnText]}>Microsoft</Text>
                 </TouchableOpacity>
-                : <></>}
-              {$config.ENABLE_SLACK_OAUTH ?
+              ) : (
+                <></>
+              )}
+              {$config.ENABLE_SLACK_OAUTH ? (
                 <TouchableOpacity
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'slack'})}>
                   <Image source={slack} style={style.logo} />
                   <Text style={[style.secondaryBtnText]}>Slack</Text>
                 </TouchableOpacity>
-                : <></>}
-              {$config.ENABLE_APPLE_OAUTH ?
+              ) : (
+                <></>
+              )}
+              {$config.ENABLE_APPLE_OAUTH ? (
                 <TouchableOpacity
                   style={[style.secondaryBtn, {borderColor: primaryColor}]}
                   onPress={() => onSelectOAuth({oAuthSystem: 'apple'})}>
                   <Image source={apple} style={style.logo} />
                   <Text style={[style.secondaryBtnText]}>Apple</Text>
                 </TouchableOpacity>
-                : <></>}
+              ) : (
+                <></>
+              )}
             </View>
           </View>
         </View>

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/hasBrandLogo.tsx

@@ -0,0 +1,3 @@
+const hasBrandLogo: boolean = !!$config.LOGO;
+
+export default hasBrandLogo;

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/webpack.commons.js

@@ -94,6 +94,7 @@ module.exports = {
             plugins: [
               // Adds support for class properties
               ['transform-define', configVars],
+              '@babel/plugin-proposal-optional-chaining',
               '@babel/plugin-proposal-class-properties',
               isDevelopment && require.resolve('react-refresh/babel'),
             ].filter(Boolean),

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;