agora-appbuilder-core 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -10,7 +10,9 @@
   "scripts": {
     "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout ab-dev-auto",
     "deps": "cd template && npm i",
-    "dev-setup": "npm run uikit && npm run deps && node devSetup.js"
+    "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
+    "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
+    "copy-vercel": "cp vercel.json template/dist"
   },
   "author": {
     "email": "svineth.face@gmail.com",

package/template/agora-rn-uikit/src/Controls/BtnTemplate.tsx

@@ -5,6 +5,8 @@ import {
   StyleProp,
   TouchableOpacityProps,
   ViewStyle,
+  Text,
+  View,
 } from 'react-native';
 import PropsContext from './../PropsContext';
 import styles from '../Style';
@@ -15,6 +17,7 @@ interface BtnTemplateInterface {
   color?: string;
   onPress?: TouchableOpacityProps['onPress'];
   style?: StyleProp<ViewStyle>;
+  btnText?: string;
 }
 
 const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
@@ -22,30 +25,37 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
   const {BtnTemplateStyles, theme} = styleProps || {};
 
   return (
-    <TouchableOpacity
-      style={{
-        ...styles.controlBtn,
-        ...(BtnTemplateStyles as object),
-        ...(props.style as object),
-      }}
-      // onPress={props.onPress}
-      onPress={() => {
-        console.log('pressed mute')
-        props.onPress()
-      }}
-      >
-      <Image
+    <TouchableOpacity onPress={props.onPress}>
+      <View
         style={{
-          width: '100%',
-          height: '100%',
-          tintColor:
+          ...styles.controlBtn,
+          ...(BtnTemplateStyles as object),
+          ...(props.style as object),
+        }}>
+        <Image
+          style={{
+            width: '100%',
+            height: '100%',
+            tintColor:
+              props.name !== 'callEnd'
+                ? theme || props.color || '#fff'
+                : '#FD0845',
+          }}
+          resizeMode={'contain'}
+          source={{uri: icons[props.name]}}
+        />
+      </View>
+      <Text
+        style={{
+          textAlign: 'center',
+          marginTop: 5,
+          color:
             props.name !== 'callEnd'
               ? theme || props.color || '#fff'
               : '#FD0845',
-        }}
-        resizeMode={'contain'}
-        source={{uri: icons[props.name]}}
-      />
+        }}>
+        {props.btnText}
+      </Text>
     </TouchableOpacity>
   );
 };

package/template/agora-rn-uikit/src/Controls/Local/EndCall.tsx

@@ -13,6 +13,7 @@ function EndCall() {
   return (
     <BtnTemplate
       name={'callEnd'}
+      btnText={'Hang Up'}
       style={{...styles.endCall, ...(endCall as object)}}
       onPress={() =>
         (dispatch as DispatchType<'EndCall'>)({

package/template/agora-rn-uikit/src/Controls/Local/LocalAudioMute.tsx

@@ -15,6 +15,7 @@ function LocalAudioMute() {
   return (
     <BtnTemplate
       name={local.audio ? 'mic' : 'micOff'}
+      btnText={'Audio'}
       style={{...styles.localBtn, ...(muteLocalAudio as object)}}
       onPress={() => {
         (dispatch as DispatchType<'LocalMuteAudio'>)({

package/template/agora-rn-uikit/src/Controls/Local/LocalVideoMute.tsx

@@ -15,6 +15,7 @@ function LocalVideoMute() {
   return (
     <BtnTemplate
       name={local.video ? 'videocam' : 'videocamOff'}
+      btnText={'Video'}
       style={{...styles.localBtn, ...(muteLocalVideo as object)}}
       onPress={() => {
         (dispatch as DispatchType<'LocalMuteVideo'>)({

package/template/agora-rn-uikit/src/Controls/Local/SwitchCamera.tsx

@@ -13,6 +13,7 @@ function SwitchCamera() {
     <BtnTemplate
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
+      btnText={'Switch'}
       onPress={() => {
         // RtcEngine.switchCamera();
         (dispatch as DispatchType<'SwitchCamera'>)({

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

@@ -201,7 +201,6 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
         };
         break;
       case 'LocalMuteVideo':
-        console.log('Switch: Local mute video', {value: action.value}, {state});
         (engine.current as RtcEngine).muteLocalVideoStream(
           (action as ActionType<'LocalMuteAudio'>).value[0],
         );
@@ -308,49 +307,6 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
     },
     [dualStreamMode],
   );
-
-  const getRemoteVolume = () => {
-    console.log('getting remote user track');
-    // console.log(engine.current.client.remoteUsers);
-    const client = engine?.current?.client;
-    if (client) {
-      const {remoteUsers} = client;
-
-      const userVolume = remoteUsers.map(
-        (remoteUser: {uid: any; audioTrack: any; hasAudio: boolean}) => {
-          const {uid, audioTrack, hasAudio} = remoteUser;
-          console.log({remoteUser}, {hasAudio});
-          return {
-            uid,
-            volumeLevel: hasAudio ? audioTrack.getVolumeLevel() : 0,
-          };
-        },
-      );
-      console.log({userVolume});
-      const highestvolumeObj = volumes.reduce(
-        (highestVolume, volume, index) => {
-          if (highestVolume === null) {
-            return volume;
-          } else {
-            if (volume.level > highestVolume.level) {
-              return volume;
-            }
-            return highestVolume;
-          }
-          // console.log(`${index} UID ${volume.uid} Level ${volume.level}`);
-        },
-        null,
-      );
-      const activeSpeaker = highestvolumeObj ? highestvolumeObj.uid : undefined;
-    }
-  };
-  // useEffect(() => {
-  //   const timer = setInterval(getRemoteVolume, 1000);
-  //   return () => {
-  //     clearInterval(timer);
-  //   };
-  // }, []);
-
   const [uidState, dispatch] = useReducer(reducer, initialState);
 
   // When mode is updated, reducer is triggered to update the individual states
@@ -504,21 +460,20 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
         });
       }
       if (engine.current) {
-        if (uidState.max[0].video) {
-          console.log('another place 1');
+        if(uidState.max[0].video){
           await engine.current.muteLocalVideoStream(true);
         }
-
+        
         await engine.current.joinChannel(
           rtcProps.token || null,
           rtcProps.channel,
           null,
           rtcProps.uid || 0,
         );
-        if (uidState.max[0].video) {
-          console.log('another place 2');
+        if(uidState.max[0].video){
           await engine.current.muteLocalVideoStream(false);
         }
+
       } else {
         console.error('trying to join before RTC Engine was initialized');
       }

package/template/src/components/Precall.tsx

@@ -19,6 +19,7 @@ import {LocalAudioMute, LocalVideoMute} from '../../agora-rn-uikit/Components';
 import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
 import SelectDevice from '../subComponents/SelectDevice';
 import Logo from '../subComponents/Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 // import OpenInNativeButton from '../subComponents/OpenInNativeButton';
 import ColorContext from './ColorContext';
 // import {useHistory} from './Router';
@@ -45,7 +46,7 @@ const Precall = (props: any) => {
     //   resizeMode={'cover'}>
     <View style={style.main} onLayout={onLayout}>
       <View style={style.nav}>
-        <Logo />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} showBack={true} /> : <></>}
         {/* <OpenInNativeButton /> */}
       </View>

package/template/src/pages/Authenticate.tsx

@@ -20,6 +20,7 @@ import {
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
+import hasBrandLogo from '../utils/hasBrandLogo';
 
 const Authenticate = () => {
   const [dim, setDim] = useState([
@@ -37,13 +38,13 @@ const Authenticate = () => {
       style={style.full}
       resizeMode={'cover'}>
       <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}>Login using OAuth</Text>
-            <Text style={style.headline}>Please select an OAuth provider to login.</Text>
+            <Text style={style.headline}>
+              Please select an OAuth provider to login.
+            </Text>
             <OAuth />
           </View>
           {dim[0] > dim[1] + 150 ? (

package/template/src/pages/Create.tsx

@@ -26,6 +26,7 @@ import HorizontalRule from '../atoms/HorizontalRule';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import Toast from '../../react-native-toast-message';
+import hasBrandLogo from '../utils/hasBrandLogo';
 
 type PasswordInput = {
   host: string;
@@ -116,7 +117,7 @@ const Create = () => {
     // <KeyboardAvoidingView behavior={'height'} style={style.main}>
     <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
-        <Logo />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
         {/* <OpenInNativeButton /> */}
       </View>

package/template/src/pages/Join.tsx

@@ -15,6 +15,7 @@ import {useHistory} from '../components/Router';
 import SessionContext from '../components/SessionContext';
 // import OpenInNativeButton from '../subComponents/OpenInNativeButton';
 import Logo from '../subComponents/Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 import LogoutButton from '../subComponents/LogoutButton';
 import ColorContext from '../components/ColorContext';
 // import Illustration from '../subComponents/Illustration';
@@ -58,7 +59,7 @@ const Join = (props: joinProps) => {
   return (
     <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
-        <Logo />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
       </View>
       <View style={style.content}>

package/template/src/pages/VideoCall.tsx

@@ -30,6 +30,7 @@ import {gql, useQuery} from '@apollo/client';
 // import Watermark from '../subComponents/Watermark';
 import StorageContext from '../components/StorageContext';
 import Logo from '../subComponents/Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 import ChatContext from '../components/ChatContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
@@ -465,9 +466,7 @@ const VideoCall: React.FC = () => {
         </>
       ) : (
         <View style={style.loader}>
-          <View style={style.loaderLogo}>
-            <Logo />
-          </View>
+          <View style={style.loaderLogo}>{hasBrandLogo && <Logo />}</View>
           <Text style={style.loaderText}>Starting Call. Just a second.</Text>
         </View>
       )}

package/template/src/subComponents/ScreenshareButton.tsx

@@ -109,11 +109,13 @@ const ScreenshareButton = (props: ScreenSharingProps) => {
               value: [joinedUser[0]],
             });
             setLayout(Layout.Pinned);
-        }else if(newUserUid ===  1){
-          dispatch({
-            type: 'SwapVideo',
-            value: [joinedUser[0]],
-          });
+        } else if (newUserUid === 1) {
+          if (newUserUid !== users[0].uid){
+            dispatch({
+              type: 'SwapVideo',
+              value: [joinedUser[0]],
+            });
+          }
           setLayout(Layout.Pinned);
         }
       }

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

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

package/template/agora-rn-uikit/.git/HEAD

@@ -1 +0,0 @@
-ref: refs/heads/ab-dev-auto

package/template/agora-rn-uikit/.git/config

@@ -1,16 +0,0 @@
-[core]
-	repositoryformatversion = 0
-	filemode = true
-	bare = false
-	logallrefupdates = true
-	ignorecase = true
-	precomposeunicode = true
-[remote "origin"]
-	url = https://github.com/AgoraIO-Community/ReactNative-UIKit
-	fetch = +refs/heads/*:refs/remotes/origin/*
-[branch "master"]
-	remote = origin
-	merge = refs/heads/master
-[branch "ab-dev-auto"]
-	remote = origin
-	merge = refs/heads/ab-dev-auto

package/template/agora-rn-uikit/.git/description

@@ -1 +0,0 @@
-Unnamed repository; edit this file 'description' to name the repository.

package/template/agora-rn-uikit/.git/hooks/applypatch-msg.sample

@@ -1,15 +0,0 @@
-#!/bin/sh
-#
-# An example hook script to check the commit log message taken by
-# applypatch from an e-mail message.
-#
-# The hook should exit with non-zero status after issuing an
-# appropriate message if it wants to stop the commit.  The hook is
-# allowed to edit the commit message file.
-#
-# To enable this hook, rename this file to "applypatch-msg".
-
-. git-sh-setup
-commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
-test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
-:

package/template/agora-rn-uikit/.git/hooks/commit-msg.sample

@@ -1,24 +0,0 @@
-#!/bin/sh
-#
-# An example hook script to check the commit log message.
-# Called by "git commit" with one argument, the name of the file
-# that has the commit message.  The hook should exit with non-zero
-# status after issuing an appropriate message if it wants to stop the
-# commit.  The hook is allowed to edit the commit message file.
-#
-# To enable this hook, rename this file to "commit-msg".
-
-# Uncomment the below to add a Signed-off-by line to the message.
-# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
-# hook is more suited to it.
-#
-# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
-# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"
-
-# This example catches duplicate Signed-off-by lines.
-
-test "" = "$(grep '^Signed-off-by: ' "$1" |
-	 sort | uniq -c | sed -e '/^[ 	]*1[ 	]/d')" || {
-	echo >&2 Duplicate Signed-off-by lines.
-	exit 1
-}

package/template/agora-rn-uikit/.git/hooks/fsmonitor-watchman.sample

@@ -1,173 +0,0 @@
-#!/usr/bin/perl
-
-use strict;
-use warnings;
-use IPC::Open2;
-
-# An example hook script to integrate Watchman
-# (https://facebook.github.io/watchman/) with git to speed up detecting
-# new and modified files.
-#
-# The hook is passed a version (currently 2) and last update token
-# formatted as a string and outputs to stdout a new update token and
-# all files that have been modified since the update token. Paths must
-# be relative to the root of the working tree and separated by a single NUL.
-#
-# To enable this hook, rename this file to "query-watchman" and set
-# 'git config core.fsmonitor .git/hooks/query-watchman'
-#
-my ($version, $last_update_token) = @ARGV;
-
-# Uncomment for debugging
-# print STDERR "$0 $version $last_update_token\n";
-
-# Check the hook interface version
-if ($version ne 2) {
-	die "Unsupported query-fsmonitor hook version '$version'.\n" .
-	    "Falling back to scanning...\n";
-}
-
-my $git_work_tree = get_working_dir();
-
-my $retry = 1;
-
-my $json_pkg;
-eval {
-	require JSON::XS;
-	$json_pkg = "JSON::XS";
-	1;
-} or do {
-	require JSON::PP;
-	$json_pkg = "JSON::PP";
-};
-
-launch_watchman();
-
-sub launch_watchman {
-	my $o = watchman_query();
-	if (is_work_tree_watched($o)) {
-		output_result($o->{clock}, @{$o->{files}});
-	}
-}
-
-sub output_result {
-	my ($clockid, @files) = @_;
-
-	# Uncomment for debugging watchman output
-	# open (my $fh, ">", ".git/watchman-output.out");
-	# binmode $fh, ":utf8";
-	# print $fh "$clockid\n@files\n";
-	# close $fh;
-
-	binmode STDOUT, ":utf8";
-	print $clockid;
-	print "\0";
-	local $, = "\0";
-	print @files;
-}
-
-sub watchman_clock {
-	my $response = qx/watchman clock "$git_work_tree"/;
-	die "Failed to get clock id on '$git_work_tree'.\n" .
-		"Falling back to scanning...\n" if $? != 0;
-
-	return $json_pkg->new->utf8->decode($response);
-}
-
-sub watchman_query {
-	my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
-	or die "open2() failed: $!\n" .
-	"Falling back to scanning...\n";
-
-	# In the query expression below we're asking for names of files that
-	# changed since $last_update_token but not from the .git folder.
-	#
-	# To accomplish this, we're using the "since" generator to use the
-	# recency index to select candidate nodes and "fields" to limit the
-	# output to file names only. Then we're using the "expression" term to
-	# further constrain the results.
-	if (substr($last_update_token, 0, 1) eq "c") {
-		$last_update_token = "\"$last_update_token\"";
-	}
-	my $query = <<"	END";
-		["query", "$git_work_tree", {
-			"since": $last_update_token,
-			"fields": ["name"],
-			"expression": ["not", ["dirname", ".git"]]
-		}]
-	END
-
-	# Uncomment for debugging the watchman query
-	# open (my $fh, ">", ".git/watchman-query.json");
-	# print $fh $query;
-	# close $fh;
-
-	print CHLD_IN $query;
-	close CHLD_IN;
-	my $response = do {local $/; <CHLD_OUT>};
-
-	# Uncomment for debugging the watch response
-	# open ($fh, ">", ".git/watchman-response.json");
-	# print $fh $response;
-	# close $fh;
-
-	die "Watchman: command returned no output.\n" .
-	"Falling back to scanning...\n" if $response eq "";
-	die "Watchman: command returned invalid output: $response\n" .
-	"Falling back to scanning...\n" unless $response =~ /^\{/;
-
-	return $json_pkg->new->utf8->decode($response);
-}
-
-sub is_work_tree_watched {
-	my ($output) = @_;
-	my $error = $output->{error};
-	if ($retry > 0 and $error and $error =~ m/unable to resolve root .* directory (.*) is not watched/) {
-		$retry--;
-		my $response = qx/watchman watch "$git_work_tree"/;
-		die "Failed to make watchman watch '$git_work_tree'.\n" .
-		    "Falling back to scanning...\n" if $? != 0;
-		$output = $json_pkg->new->utf8->decode($response);
-		$error = $output->{error};
-		die "Watchman: $error.\n" .
-		"Falling back to scanning...\n" if $error;
-
-		# Uncomment for debugging watchman output
-		# open (my $fh, ">", ".git/watchman-output.out");
-		# close $fh;
-
-		# Watchman will always return all files on the first query so
-		# return the fast "everything is dirty" flag to git and do the
-		# Watchman query just to get it over with now so we won't pay
-		# the cost in git to look up each individual file.
-		my $o = watchman_clock();
-		$error = $output->{error};
-
-		die "Watchman: $error.\n" .
-		"Falling back to scanning...\n" if $error;
-
-		output_result($o->{clock}, ("/"));
-		$last_update_token = $o->{clock};
-
-		eval { launch_watchman() };
-		return 0;
-	}
-
-	die "Watchman: $error.\n" .
-	"Falling back to scanning...\n" if $error;
-
-	return 1;
-}
-
-sub get_working_dir {
-	my $working_dir;
-	if ($^O =~ 'msys' || $^O =~ 'cygwin') {
-		$working_dir = Win32::GetCwd();
-		$working_dir =~ tr/\\/\//;
-	} else {
-		require Cwd;
-		$working_dir = Cwd::cwd();
-	}
-
-	return $working_dir;
-}

package/template/agora-rn-uikit/.git/hooks/post-update.sample

@@ -1,8 +0,0 @@
-#!/bin/sh
-#
-# An example hook script to prepare a packed repository for use over
-# dumb transports.
-#
-# To enable this hook, rename this file to "post-update".
-
-exec git update-server-info