agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/global.d.ts

@@ -47,7 +47,6 @@ interface ConfigInterface {
   APP_NAME: string;
   LOGO: string;
   APP_ID: string;
-  PRIMARY_COLOR: string;
   FRONTEND_ENDPOINT: string;
   BACKEND_ENDPOINT: string;
   PSTN: boolean;
@@ -57,11 +56,8 @@ interface ConfigInterface {
   SCREEN_SHARING: boolean;
   CLIENT_ID: string;
   LANDING_SUB_HEADING: string;
-  BG: string;
   ENCRYPTION_ENABLED: boolean;
   PROFILE: VideoProfile;
-  PRIMARY_FONT_COLOR: string;
-  SECONDARY_FONT_COLOR: string;
   SENTRY_DSN: string;
   ENABLE_GOOGLE_OAUTH: boolean;
   ENABLE_SLACK_OAUTH: boolean;
@@ -76,6 +72,32 @@ interface ConfigInterface {
   GEO_FENCING: boolean;
   LOG_ENABLED: boolean;
   AUDIO_ROOM: boolean;
+  PRIMARY_ACTION_BRAND_COLOR: string;
+  PRIMARY_ACTION_TEXT_COLOR: string;
+  SECONDARY_ACTION_COLOR: string;
+  FONT_COLOR: string;
+  BG: string;
+  BACKGROUND_COLOR: string;
+  VIDEO_AUDIO_TILE_COLOR: string;
+  VIDEO_AUDIO_TILE_OVERLAY_COLOR: string;
+  VIDEO_AUDIO_TILE_TEXT_COLOR: string;
+  VIDEO_AUDIO_TILE_AVATAR_COLOR: string;
+  SEMANTIC_ERROR: string;
+  SEMANTIC_SUCCESS: string;
+  SEMANTIC_WARNING: string;
+  SEMANTIC_NEUTRAL: string;
+  INPUT_FIELD_BACKGROUND_COLOR: string;
+  INPUT_FIELD_BORDER_COLOR: string;
+  CARD_LAYER_1_COLOR: string;
+  CARD_LAYER_2_COLOR: string;
+  CARD_LAYER_3_COLOR: string;
+  CARD_LAYER_4_COLOR: string;
+  CARD_LAYER_5_COLOR: string;
+  HARD_CODED_BLACK_COLOR: string;
+  ICON_TEXT: boolean;
+  ICON_BG_COLOR: string;
+  TOOLBAR_COLOR: string;
+  ACTIVE_SPEAKER: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/index.rsdk.tsx

@@ -18,6 +18,7 @@ import SDKAppWrapper, {
 } from './src/SDKAppWrapper';
 import React from 'react';
 import * as RN from 'react-native-web';
+import './src/assets/font-styles.css';
 
 export * from 'customization-api';
 export * from 'customization-implementation';

package/template/index.web.js

@@ -9,9 +9,10 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import * as Sentry from '@sentry/browser';
 import Video from './src/App';
+import './src/assets/font-styles.css'
 
 Sentry.init({
   dsn: 'https://b5df0450fe284baa8376e62ace331580@o615358.ingest.sentry.io/5749898',

package/template/index.wsdk.tsx

@@ -6,18 +6,25 @@ import SDKAppWrapper, {
 import SDKEvents from './src/utils/SdkEvents';
 import React from 'react';
 import * as RN from 'react-native-web';
-
+import './src/assets/font-styles.css';
 export * from 'customization-api';
 export * from 'customization-implementation';
 
 interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
 
+const clearEvent = {
+  clear: () => {},
+};
+
 const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = {
   ...AppBuilderSdkApi,
   // Override customize function for web-sdk
   customize: (customization) => {
-    SDKEvents.on('addFpeInit', () => {
+    SDKEvents.emit('addFpe', customization);
+    clearEvent.clear = SDKEvents.on('addFpeInit', () => {
+      console.log('addFpeInit called');
       SDKEvents.emit('addFpe', customization);
+      clearEvent.clear();
     });
   },
 };

package/template/ios/HelloWorld/Info.plist

@@ -53,9 +53,18 @@
 	<key>NSCameraUsageDescription</key>
 	<string>Camera access</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Mic access</string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>SourceSansPro-Regular.ttf</string>
+		<string>icomoon.ttf</string>
+	</array>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>audio</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -65,8 +74,12 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>

package/template/ios/HelloWorld.xcodeproj/project.pbxproj

@@ -18,6 +18,8 @@
 		65580BB1266EDC8000B310B6 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65580BB0266EDC8000B310B6 /* File.swift */; };
 		65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */ = {isa = PBXBuildFile; fileRef = 65580BB2266EDCA400B310B6 /* HelloWorld.entitlements */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		49B7B61E43464F098E87335F /* icomoon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FF34150ABA37458FB48221FB /* icomoon.ttf */; };
+		76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -56,6 +58,8 @@
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = HelloWorld/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		FF34150ABA37458FB48221FB /* icomoon.ttf */ = {isa = PBXFileReference; name = "icomoon.ttf"; path = "../src/assets/fonts/icomoon.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */ = {isa = PBXFileReference; name = "SourceSansPro-Regular.ttf"; path = "../src/assets/fonts/SourceSansPro-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -148,6 +152,7 @@
 				00E356EF1AD99517003FC87E /* HelloWorldTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				A87D6475B3A64BB58397D417 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -165,6 +170,16 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		A87D6475B3A64BB58397D417 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				FF34150ABA37458FB48221FB /* icomoon.ttf */,
+				E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -304,6 +319,8 @@
 				65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */,
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				49B7B61E43464F098E87335F /* icomoon.ttf in Resources */,
+				76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

package/template/metro.config.js

@@ -16,7 +16,7 @@
  * @format
  */
 
-const blacklist = require('metro-config/src/defaults/blacklist');
+const blacklist = require('metro-config/src/defaults/exclusionList');
 
 // blacklist is a function that takes an array of regexes and combines
 // them with the default blacklist to return a single regex.

package/template/package.json

@@ -49,13 +49,15 @@
   },
   "dependencies": {
     "@apollo/client": "3.3.20",
-    "@react-native-community/async-storage": "1.12.1",
+    "@gorhom/bottom-sheet": "4.4.5",
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/checkbox": "0.4.2",
     "@react-native-community/clipboard": "1.5.1",
     "@sentry/react": "6.5.1",
     "@sentry/react-native": "2.4.3",
     "@sentry/tracing": "6.2.1",
-    "agora-react-native-rtm": "1.5.0",
+    "@supersami/rn-foreground-service": "^1.1.1",
+    "agora-react-native-rtm": "1.5.1",
     "agora-rtc-sdk-ng": "4.14.0",
     "agora-rtm-sdk": "1.4.3-203",
     "electron-log": "4.3.5",
@@ -66,19 +68,26 @@
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-is": "18.0.0",
-    "react-native": "0.63.5",
+    "react-native": "0.64",
     "react-native-agora": "3.7.1",
+    "react-native-gesture-handler": "2.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-keyboard-manager": "6.5.4-1",
+    "react-native-reanimated": "2.12.0",
     "react-native-responsive-fontsize": "0.5.1",
+    "react-native-svg": "13.6.0",
+    "react-native-vector-icons": "9.2.0",
+    "react-native-walkthrough-tooltip": "1.4.0",
     "react-native-web": "0.14.13",
     "react-router-dom": "5.2.0",
-    "react-router-native": "5.2.0"
+    "react-router-native": "5.2.0",
+    "react-spring-bottom-sheet": "3.4.1",
+    "react-tooltip": "4.5.1"
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
@@ -107,6 +116,7 @@
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-define": "2.0.1",
     "cross-env": "7.0.3",
+    "css-loader": "6.7.2",
     "del": "5.1.0",
     "electron": "16.0.1",
     "electron-builder": "23.6.0",
@@ -124,7 +134,8 @@
     "prettier": "2.3.1",
     "react-devtools-electron": "4.7.0",
     "react-refresh": "0.12.0",
-    "react-test-renderer": "16.13.1",
+    "react-test-renderer": "17.0.1",
+    "style-loader": "3.3.1",
     "ts-loader": "^8.3.0",
     "typescript": "3.9.9",
     "webpack": "5.72.0",

package/template/react-native-toast-message/index.d.ts

@@ -1,67 +1,67 @@
 import React from 'react';
-import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native'
+import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
 
 declare module 'react-native-toast-message' {
   interface AnyObject {
     [key: string]: any;
   }
 
-  export type ToastPosition = 'top' | 'bottom'
+  export type ToastPosition = 'top' | 'bottom';
 
   export interface BaseToastProps {
-    leadingIcon?: ImageSourcePropType,
-    trailingIcon?: ImageSourcePropType,
-    text1?: string,
-    text2?: string,
-    onPress?: () => void,
-    onTrailingIconPress?: () => void,
-    onLeadingIconPress?: () => void,
-    style?: ViewStyle,
-    leadingIconContainerStyle?: ViewStyle,
-    trailingIconContainerStyle?: ViewStyle,
-    leadingIconStyle?: ViewStyle,
-    trailingIconStyle?: ViewStyle,
-    contentContainerStyle?: ViewStyle,
-    text1Style?: TextStyle,
-    text2Style?: TextStyle,
-    activeOpacity?: number,
-    text1NumberOfLines: number,
-    text2NumberOfLines: number,
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    text1?: string;
+    text2?: string;
+    onPress?: () => void;
+    style?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+    text1Style?: TextStyle;
+    text2Style?: TextStyle;
+    activeOpacity?: number;
+    text1NumberOfLines: number;
+    text2NumberOfLines: number;
+    primaryBtn?: React.ReactNode;
+    secondaryBtn?: React.ReactNode;
   }
-  export const BaseToast: React.FC<BaseToastProps>
+  export const BaseToast: React.FC<BaseToastProps>;
 
   export interface ToastProps {
     ref: (ref: any) => any;
-    config?: AnyObject,
-    style?: ViewStyle,
-    topOffset?: number,
-    bottomOffset?: number,
-    keyboardOffset?: number,
-    visibilityTime?: number,
-    autoHide?: boolean,
-    height?: number,
-    position?: ToastPosition,
-    type?: string
+    config?: AnyObject;
+    style?: ViewStyle;
+    topOffset?: number;
+    bottomOffset?: number;
+    keyboardOffset?: number;
+    visibilityTime?: number;
+    autoHide?: boolean;
+    height?: number;
+    position?: ToastPosition;
+    type?: string;
   }
 
   export default class Toast extends React.Component<ToastProps> {
     static show(options: {
-      type: string,
-      position?: ToastPosition,
-      text1?: string,
-      text2?: string,
-      visibilityTime?: number,
-      autoHide?: boolean,
-      topOffset?: number,
-      bottomOffset?: number,
-      props?: AnyObject,
-      onShow?: () => void,
-      onHide?: () => void,
-      onPress?: () => void
+      type: string;
+      position?: ToastPosition;
+      text1?: string;
+      text2?: string;
+      primaryBtn?: React.ReactNode;
+      secondaryBtn?: React.ReactNode;
+      visibilityTime?: number;
+      autoHide?: boolean;
+      topOffset?: number;
+      bottomOffset?: number;
+      props?: AnyObject;
+      onShow?: () => void;
+      onHide?: () => void;
+      onPress?: () => void;
     }): void;
 
     static hide(): void;
 
+    static getToastId(): number;
+
     static setRef(ref: any): any;
   }
 }

package/template/react-native-toast-message/src/colors/index.js

@@ -1,10 +1,11 @@
 const colors = {
   white: '#FFF',
-  blazeOrange: '#FE6301',
+  blazeOrange: '#FF414D',
   mantis: '#69C779',
   alto: '#D8D8D8',
   dustyGray: '#979797',
-  lightSkyBlue: '#87CEFA'
+  lightSkyBlue: '#87CEFA',
+  black: '#040405'
 };
 
 export default colors;

package/template/react-native-toast-message/src/components/base/index.js

@@ -13,53 +13,51 @@ function BaseToast({
   text1,
   text2,
   onPress,
-  onLeadingIconPress,
-  onTrailingIconPress,
   style,
-  leadingIconContainerStyle,
-  trailingIconContainerStyle,
-  leadingIconStyle,
-  trailingIconStyle,
   contentContainerStyle,
   text1Style,
   text2Style,
   activeOpacity,
   text1NumberOfLines,
-  text2NumberOfLines
+  text2NumberOfLines,
+  primaryBtn,
+  secondaryBtn
 }) {
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderLeft, style]}
+      style={[styles.base, styles.borderTop, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
-      {leadingIcon && (
-        <TouchableOpacity
-          testID='leadingIcon'
-          style={[styles.leadingIconContainer, leadingIconContainerStyle]}
-          onPress={onLeadingIconPress}
-          activeOpacity={onLeadingIconPress ? activeOpacity : 1}>
-          <Icon
-            style={{ ...styles.leadingIcon, ...leadingIconStyle }}
-            source={leadingIcon}
-          />
-        </TouchableOpacity>
-      )}
-
       <View
         testID='contentContainer'
         style={[styles.contentContainer, contentContainerStyle]}>
-        {text1?.length > 0 && (
-          <View>
-            <Text
-              testID='text1'
-              style={[styles.text1, text1Style]}
-              numberOfLines={text1NumberOfLines}>
-              {text1}
-            </Text>
+        {(text1 || text1?.length > 0) && (
+          <View
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              justifyContent: 'space-between'
+            }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                flex: 1
+              }}>
+              {leadingIcon ? leadingIcon : <></>}
+              <Text
+                testID='text1'
+                style={[styles.text1, text1Style]}
+                numberOfLines={text1NumberOfLines}>
+                {text1}
+              </Text>
+            </View>
+            <View style={{ justifyContent: 'flex-start', alignSelf: 'center' }}>
+              {trailingIcon ? trailingIcon : <></>}
+            </View>
           </View>
         )}
-        {text2?.length > 0 && (
+        {(text2 || text2?.length > 0) && (
           <View>
             <Text
               testID='text2'
@@ -69,20 +67,21 @@ function BaseToast({
             </Text>
           </View>
         )}
+        {primaryBtn || secondaryBtn ? (
+          <View
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              paddingTop: 32,
+              paddingBottom: 24
+            }}>
+            {primaryBtn ? primaryBtn : <></>}
+            {secondaryBtn ? secondaryBtn : <></>}
+          </View>
+        ) : (
+          <></>
+        )}
       </View>
-
-      {trailingIcon && (
-        <TouchableOpacity
-          testID='trailingIcon'
-          style={[styles.trailingIconContainer, trailingIconContainerStyle]}
-          onPress={onTrailingIconPress}
-          activeOpacity={onTrailingIconPress ? activeOpacity : 1}>
-          <Icon
-            style={{ ...styles.trailingIcon, ...trailingIconStyle }}
-            source={trailingIcon}
-          />
-        </TouchableOpacity>
-      )}
     </TouchableOpacity>
   );
 }
@@ -90,18 +89,12 @@ function BaseToast({
 BaseToast.HEIGHT = HEIGHT;
 
 BaseToast.propTypes = {
-  leadingIcon: Icon.propTypes.source,
-  trailingIcon: Icon.propTypes.source,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
   text1: PropTypes.string,
   text2: PropTypes.string,
   onPress: PropTypes.func,
-  onTrailingIconPress: PropTypes.func,
-  onLeadingIconPress: PropTypes.func,
   style: stylePropType,
-  leadingIconContainerStyle: stylePropType,
-  trailingIconContainerStyle: stylePropType,
-  leadingIconStyle: stylePropType,
-  trailingIconStyle: stylePropType,
   contentContainerStyle: stylePropType,
   text1Style: stylePropType,
   text2Style: stylePropType,
@@ -111,18 +104,12 @@ BaseToast.propTypes = {
 };
 
 BaseToast.defaultProps = {
-  leadingIcon: undefined,
-  trailingIcon: icons.close,
+  leadingIcon: null,
+  trailingIcon: null,
   text1: undefined,
   text2: undefined,
   onPress: undefined,
-  onLeadingIconPress: undefined,
-  onTrailingIconPress: undefined,
   style: undefined,
-  leadingIconContainerStyle: undefined,
-  trailingIconContainerStyle: undefined,
-  leadingIconStyle: undefined,
-  trailingIconStyle: undefined,
   contentContainerStyle: undefined,
   text1Style: undefined,
   text2Style: undefined,

package/template/react-native-toast-message/src/components/base/styles.js

@@ -1,13 +1,12 @@
 import { StyleSheet } from 'react-native';
 import colors from '../../colors';
 
-export const HEIGHT = 60;
+export const HEIGHT = 105;
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
     height: HEIGHT,
-    width: '90%',
     borderRadius: 6,
     backgroundColor: colors.white,
     shadowOffset: { width: 0, height: 0 },
@@ -15,42 +14,27 @@ export default StyleSheet.create({
     shadowRadius: 6,
     elevation: 2
   },
-  borderLeft: {
-    borderLeftWidth: 5,
-    borderLeftColor: colors.alto
-  },
-  leadingIconContainer: {
-    width: 50,
-    justifyContent: 'center',
-    alignItems: 'center'
+  borderTop: {
+    borderTopWidth: 5,
+    borderTopColor: colors.alto
   },
   contentContainer: {
+    paddingLeft: 20,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'flex-start' // in case of rtl the text will start from the right
-  },
-  trailingIconContainer: {
-    width: 40,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  leadingIcon: {
-    width: 20,
-    height: 20
-  },
-  trailingIcon: {
-    width: 9,
-    height: 9
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
   },
   text1: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 3,
-    width: '100%'
+    fontSize: 15,
+    fontFamily: 'Source Sans Pro',
+    width: '100%',
+    fontWeight: '600',
+    marginRight: 2
   },
   text2: {
-    fontSize: 10,
-    color: colors.dustyGray,
-    width: '100%'
+    fontSize: 15,
+    fontFamily: 'Source Sans Pro',
+    width: '100%',
+    fontWeight: '400'
   }
 });