agora-appbuilder-core 1.0.9 → 2.0.2

package/template/src/components/RTMEvents.tsx

@@ -0,0 +1,84 @@
+/*
+********************************************
+ 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 {messageChannelType, messageEventInterface} from './ChatContext';
+
+const RTM_ERROR_TEMPLATE = 'RTMError:';
+
+type eventsMapInterface = {
+  [key in messageChannelType]: Record<string, any>;
+};
+
+type errorObjectInterface = {
+  msg: string;
+  cause: any;
+};
+
+type eventKeyType = keyof eventsMapInterface;
+
+const eventsMap: eventsMapInterface = {
+  [messageChannelType.Private]: new Map<string, any>(),
+  [messageChannelType.Public]: new Map<string, any>(),
+};
+
+export interface rtmEventsInterface {
+  on: (
+    messageChannel: messageChannelType,
+    evtName: string,
+    callback: any,
+  ) => void;
+  emit: (
+    messageChannel: messageChannelType,
+    data: messageEventInterface | any | null,
+    error?: errorObjectInterface | null | undefined,
+  ) => void;
+  off: (messageChannel: messageChannelType, evtName: string) => void;
+  destroyAll: () => void;
+}
+
+const events: rtmEventsInterface = {
+  on: (messageChannel: messageChannelType, evtName: string, callback: any) => {
+    eventsMap[messageChannel].set(evtName, callback);
+  },
+  emit: (
+    messageChannel: messageChannelType,
+    data: messageEventInterface | any | null,
+    error: errorObjectInterface | null | undefined,
+  ) => {
+    // Handle error, if error found return error in callback
+    if (error) {
+      let err = new Error(`${RTM_ERROR_TEMPLATE}: ${error.msg}`);
+      err.stack += '\nCaused by: ' + error.cause;
+
+      for (const [key] of eventsMap[messageChannel].entries()) {
+        eventsMap[messageChannel].get(`${key}`)(null, err);
+      }
+      return;
+    }
+    // Handle success, return data in callback
+    for (const [key] of eventsMap[messageChannel].entries()) {
+      eventsMap[messageChannel].get(`${key}`)(data, null);
+    }
+  },
+  off: (messageChannel: messageChannelType, evtName: string) => {
+    eventsMap[messageChannel].delete(evtName);
+  },
+  destroyAll: () => {
+    for (const key of Object.keys(eventsMap) as Array<eventKeyType>) {
+      eventsMap[key].clear();
+    }
+  },
+};
+
+Object.freeze(events);
+
+export default events;

package/template/src/components/Settings.tsx

@@ -16,27 +16,24 @@ import SelectDevice from '../subComponents/SelectDevice';
 import HostControlView from './HostControlView';
 import ColorContext from './ColorContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
+import {BtnTemplate} from '../../agora-rn-uikit';
 
 const Settings = (props: any) => {
   const {primaryColor} = useContext(ColorContext);
   const {isHost, sidePanel, setSidePanel} = props;
 
   return (
-    <>
-      <TouchableOpacity
-        style={[style.localButton, {borderColor: primaryColor}]}
-        onPress={() => {
-          sidePanel === SidePanelType.Settings
-            ? setSidePanel(SidePanelType.None)
-            : setSidePanel(SidePanelType.Settings);
-        }}>
-        <Image
-          source={{uri: icons.settings}}
-          style={[style.buttonIcon, {tintColor: primaryColor}]}
-          resizeMode={'contain'}
-        />
-      </TouchableOpacity>
-    </>
+    <BtnTemplate
+      style={[style.localButtonWithMatchingStyle, {borderColor: primaryColor}]}
+      onPress={() => {
+        sidePanel === SidePanelType.Settings
+          ? setSidePanel(SidePanelType.None)
+          : setSidePanel(SidePanelType.Settings);
+      }}
+      name={
+        sidePanel === SidePanelType.Settings ? 'settingsFilled' : 'settings'
+      }
+    />
   );
 };
 
@@ -72,7 +69,7 @@ const style = StyleSheet.create({
     // width: 30,
     // height: 30,
     width: '100%',
-    height: '90%',
+    height: '100%',
     tintColor: $config.PRIMARY_COLOR,
   },
   heading: {
@@ -108,7 +105,13 @@ const style = StyleSheet.create({
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
+    resizeMode: 'contain',
   },
+  localButtonWithMatchingStyle:{    
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  }
 });
 
 export default Settings;

package/template/src/components/Share.tsx

@@ -28,17 +28,13 @@ import PrimaryButton from '../atoms/PrimaryButton';
 import SecondaryButton from '../atoms/SecondaryButton';
 import icons from '../assets/icons';
 import Toast from '../../react-native-toast-message';
+import {BtnTemplate} from '../../agora-rn-uikit';
+import styles from './styles';
 
 const Share = (props: any) => {
   const history = useHistory();
-  const {
-    urlView,
-    urlHost,
-    pstn,
-    joinPhrase,
-    roomTitle,
-    hostControlCheckbox,
-  } = props;
+  const {urlView, urlHost, pstn, joinPhrase, roomTitle, hostControlCheckbox} =
+    props;
   // const {primaryColor} = useContext(ColorContext);
   // const pstn = {number: '+1 206 656 1157', dtmf: '2342'}
   const enterMeeting = () => {
@@ -48,7 +44,7 @@ const Share = (props: any) => {
   };
 
   const copyToClipboard = () => {
-    Toast.show({ text1: 'Copied to Clipboard', visibilityTime: 1000 });
+    Toast.show({text1: 'Copied to Clipboard', visibilityTime: 1000});
     let stringToCopy = '';
 
     $config.FRONTEND_ENDPOINT
@@ -80,32 +76,32 @@ PSTN Pin: ${pstn.dtmf}`)
   };
 
   const copyHostUrl = () => {
-    Toast.show({ text1: 'Copied to Clipboard',  visibilityTime: 1000});
+    Toast.show({text1: 'Copied to Clipboard', visibilityTime: 1000});
     let stringToCopy = '';
     $config.FRONTEND_ENDPOINT
       ? (stringToCopy += `${$config.FRONTEND_ENDPOINT}/${urlHost}`)
       : platform === 'web'
       ? (stringToCopy += `${window.location.origin}/${urlHost}`)
-      : (stringToCopy += `Meeting ID: ${urlHost}`)
+      : (stringToCopy += `Meeting ID: ${urlHost}`);
     Clipboard.setString(stringToCopy);
   };
 
   const copyAttendeeURL = () => {
-    Toast.show({ text1: 'Copied to Clipboard',  visibilityTime: 1000});
+    Toast.show({text1: 'Copied to Clipboard', visibilityTime: 1000});
     let stringToCopy = '';
     $config.FRONTEND_ENDPOINT
       ? (stringToCopy += `${$config.FRONTEND_ENDPOINT}/${urlView}`)
       : platform === 'web'
       ? (stringToCopy += `${window.location.origin}/${urlView}`)
-      : (stringToCopy += `Meeting ID: ${urlView}`)
+      : (stringToCopy += `Meeting ID: ${urlView}`);
     Clipboard.setString(stringToCopy);
   };
 
   const copyPstn = () => {
-    Toast.show({ text1: 'Copied to Clipboard',  visibilityTime: 1000});
+    Toast.show({text1: 'Copied to Clipboard', visibilityTime: 1000});
     let stringToCopy = `PSTN Number: ${pstn?.number} PSTN Pin: ${pstn?.dtmf}`;
     Clipboard.setString(stringToCopy);
-  }
+  };
 
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
@@ -120,90 +116,151 @@ PSTN Pin: ${pstn.dtmf}`)
     <View style={style.content} onLayout={onLayout}>
       <View style={style.leftContent}>
         <View>
-        <Text style={style.heading}>{$config.APP_NAME}</Text>
-        <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
+          <Text style={style.heading}>{$config.APP_NAME}</Text>
+          <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
         </View>
         {hostControlCheckbox ? (
-            <View style={style.urlContainer}>
-              <View style={{width: '80%'}}>
+          <View style={style.urlContainer}>
+            <View style={{width: '80%'}}>
               <Text style={style.urlTitle}>
                 {$config.FRONTEND_ENDPOINT || platform === 'web'
-                ? "Attendee URL" : "Attendee ID"}
+                  ? 'Attendee URL'
+                  : 'Attendee ID'}
               </Text>
               <View style={style.urlHolder}>
-                <Text style={[style.url, Platform.OS === 'web' ? urlWeb : {opacity: 1}]}>
+                <Text
+                  style={[
+                    style.url,
+                    Platform.OS === 'web' ? urlWeb : {opacity: 1},
+                  ]}>
                   {$config.FRONTEND_ENDPOINT
                     ? `${$config.FRONTEND_ENDPOINT}/${urlView}`
                     : platform === 'web'
-                      ? `${window.location.origin}/${urlView}`
-                      : urlView}
+                    ? `${window.location.origin}/${urlView}`
+                    : urlView}
                 </Text>
-                
-              </View>
               </View>
-            <View style={{ marginLeft: 'auto', flexDirection: 'row', alignSelf: 'center' }}>
-              <View style={{ backgroundColor: $config.PRIMARY_COLOR + '80', width: 1, height: 'auto', marginRight: 15 }} />
-              <TouchableOpacity style={{ width: 40, height: 40, marginVertical: 'auto' }} onPress={()=>copyAttendeeURL()}>
-                <Image resizeMode={'contain'}
-                  style={{ width: '100%', height: '100%', tintColor: $config.PRIMARY_COLOR, opacity: 0.5}}
-                  source={{ uri: icons.clipboard }}></Image>
-              </TouchableOpacity>
             </View>
+            <View
+              style={{
+                marginLeft: 'auto',
+                flexDirection: 'row',
+                alignSelf: 'center',
+              }}>
+              <View
+                style={{
+                  backgroundColor: $config.PRIMARY_COLOR + '80',
+                  width: 1,
+                  height: 'auto',
+                  marginRight: 15,
+                }}
+              />
+              <View style={style.clipboardIconHolder}>
+                <BtnTemplate
+                  style={style.clipboardIcon}
+                  color={$config.PRIMARY_COLOR}
+                  name={'clipboard'}
+                  onPress={() => copyAttendeeURL()}
+                />
+              </View>
             </View>
+          </View>
         ) : (
           <></>
         )}
         <View style={style.urlContainer}>
-          <View style={{ width: '80%' }}>
+          <View style={{width: '80%'}}>
             <Text style={style.urlTitle}>
-            {$config.FRONTEND_ENDPOINT || platform === 'web' ? hostControlCheckbox
-                ? 'Host URL' : 'Meeting URL'
-                : hostControlCheckbox ? 'Host ID' : 'Meeting ID'}
+              {$config.FRONTEND_ENDPOINT || platform === 'web'
+                ? hostControlCheckbox
+                  ? 'Host URL'
+                  : 'Meeting URL'
+                : hostControlCheckbox
+                ? 'Host ID'
+                : 'Meeting ID'}
             </Text>
             <View style={style.urlHolder}>
-              <Text style={[style.url, Platform.OS === 'web' ? urlWeb : {opacity: 1}]}>
+              <Text
+                style={[
+                  style.url,
+                  Platform.OS === 'web' ? urlWeb : {opacity: 1},
+                ]}>
                 {$config.FRONTEND_ENDPOINT
                   ? `${$config.FRONTEND_ENDPOINT}/${urlHost}`
                   : platform === 'web'
-                    ? `${window.location.origin}/${urlHost}`
-                    : urlHost}
+                  ? `${window.location.origin}/${urlHost}`
+                  : urlHost}
               </Text>
-
             </View>
           </View>
-          <View style={{ marginLeft: 'auto', flexDirection: 'row', alignSelf: 'center'  }}>
-            <View style={{ backgroundColor: $config.PRIMARY_COLOR + '80', width: 1, height: 'auto', marginRight: 15 }} />
-            <TouchableOpacity style={{ width: 40, height: 40, marginVertical: 'auto' }} onPress={()=>copyHostUrl()}>
-                <Image resizeMode={'contain'}
-                  style={{ width: '100%', height: '100%', tintColor: $config.PRIMARY_COLOR, opacity: 0.5}}
-                  source={{ uri: icons.clipboard }}></Image>
-              </TouchableOpacity>
+          <View
+            style={{
+              marginLeft: 'auto',
+              flexDirection: 'row',
+              alignSelf: 'center',
+            }}>
+            <View
+              style={{
+                backgroundColor: $config.PRIMARY_COLOR + '80',
+                width: 1,
+                height: 'auto',
+                marginRight: 15,
+              }}
+            />
+            <View style={style.clipboardIconHolder}>
+              <BtnTemplate
+                style={style.clipboardIcon}
+                color={$config.PRIMARY_COLOR}
+                name={'clipboard'}
+                onPress={() => copyHostUrl()}
+              />
+            </View>
           </View>
         </View>
         {pstn ? (
           <View style={style.urlContainer}>
-            <View style={{ width: '80%' }}>
-              <Text style={style.urlTitle}>
-                PSTN
-          </Text>
+            <View style={{width: '80%'}}>
+              <Text style={style.urlTitle}>PSTN</Text>
               <View>
                 <View style={style.pstnHolder}>
                   <Text style={style.urlTitle}>Number: </Text>
-                  <Text style={[style.url, Platform.OS === 'web' ? urlWeb : {opacity: 1}]}>{pstn?.number}</Text>
+                  <Text
+                    style={[
+                      style.url,
+                      Platform.OS === 'web' ? urlWeb : {opacity: 1},
+                    ]}>
+                    {pstn?.number}
+                  </Text>
                 </View>
                 <View style={style.pstnHolder}>
                   <Text style={style.urlTitle}>Pin: </Text>
-                  <Text style={[style.url, Platform.OS === 'web' ? urlWeb : {opacity: 1}]}>{pstn?.dtmf}</Text>
+                  <Text
+                    style={[
+                      style.url,
+                      Platform.OS === 'web' ? urlWeb : {opacity: 1},
+                    ]}>
+                    {pstn?.dtmf}
+                  </Text>
                 </View>
               </View>
             </View>
-            <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
-            <View style={{ backgroundColor: $config.PRIMARY_COLOR + '80', width: 1, height: 'auto', marginRight: 15 }} />
-              <TouchableOpacity style={{ width: 40, height: 40, marginVertical: 'auto' }} onPress={() => copyPstn()}>
-                <Image resizeMode={'contain'}
-                  style={{ width: '100%', height: '100%', tintColor: $config.PRIMARY_COLOR, opacity: 0.5 }}
-                  source={{ uri: icons.clipboard }}></Image>
-              </TouchableOpacity>
+            <View style={{marginLeft: 'auto', flexDirection: 'row'}}>
+              <View
+                style={{
+                  backgroundColor: $config.PRIMARY_COLOR + '80',
+                  width: 1,
+                  height: 'auto',
+                  marginRight: 15,
+                }}
+              />
+              <View style={style.clipboardIconHolder}>
+                <BtnTemplate
+                  style={style.clipboardIcon}
+                  color={$config.PRIMARY_COLOR}
+                  name={'clipboard'}
+                  onPress={() => copyPstn()}
+                />
+              </View>
             </View>
           </View>
         ) : (
@@ -289,9 +346,9 @@ const style = StyleSheet.create({
   },
   urlContainer: {
     backgroundColor: $config.PRIMARY_COLOR + '22',
-    padding: 10, 
+    padding: 10,
     marginBottom: 10,
-    borderRadius: 10, 
+    borderRadius: 10,
     width: '100%',
     // minWidth: ''
     maxWidth: 700,
@@ -333,6 +390,18 @@ const style = StyleSheet.create({
   pstnMargin: {
     marginRight: '10%',
   },
+  clipboardIconHolder: {
+    width: 40,
+    height: 40,
+    marginVertical: 'auto',
+  },
+  clipboardIcon: {
+    width: 40,
+    height: 40,
+    marginVertical: 'auto',
+    opacity: 0.5,
+    backgroundColor: 'transparent',
+  },
 });
 
 export default Share;

package/template/src/hooks/useImageDelay.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+function useImageDelay(
+  elementRef: any,
+  delay: number | null,
+  imageName: string,
+) {
+  // Remember the latest callback if it changes.
+  React.useEffect(() => {
+    // The following block allows to repaint the icon
+    let imageElement: any;
+    if (elementRef && elementRef.current) {
+      const imageContainer = elementRef.current as any;
+      if (imageContainer && imageContainer.children.length > 0) {
+        imageElement = imageContainer.children[0];
+        imageElement.style.display = 'none';
+      }
+    }
+    const timer = setTimeout(() => {
+      if (imageElement) {
+        imageElement.style.display = 'initial';
+      }
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [imageName]);
+}
+
+export default useImageDelay;

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

@@ -9,8 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, Dimensions, ScrollView} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, Text, StyleSheet, Dimensions, ScrollView, Platform} from 'react-native';
 import {useHistory} from '../components/Router';
 import Checkbox from '../subComponents/Checkbox';
 import {gql, useMutation} from '@apollo/client';
@@ -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;
@@ -72,6 +73,12 @@ const Create = () => {
 
   console.log('mutation data', data);
 
+  useEffect(() => {
+    if(Platform.OS === 'web'){
+      document.title = $config.APP_NAME;
+    }
+  },[])
+
   const createRoom = () => {
     if (roomTitle !== '') {
       console.log('Create room invoked');
@@ -114,9 +121,9 @@ const Create = () => {
     //   style={style.full}
     //   resizeMode={'cover'}>
     // <KeyboardAvoidingView behavior={'height'} style={style.main}>
-    <ScrollView contentContainerStyle={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}>