agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/ios/ScreenSharing/Info.plist

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSExtension</key>
+	<dict>
+		<key>NSExtensionPointIdentifier</key>
+		<string>com.apple.broadcast-services-upload</string>
+		<key>NSExtensionPrincipalClass</key>
+		<string>AgoraReplayKitHandler</string>
+		<key>RPBroadcastProcessMode</key>
+		<string>RPBroadcastProcessModeSampleBuffer</string>
+	</dict>
+</dict>
+</plist>

package/template/ios/ScreenSharing/SampleHandler.h

@@ -0,0 +1,9 @@
+//  SampleHandler.h
+//  ScreenSharing
+
+#import <ReplayKit/ReplayKit.h>
+#import <AgoraReplayKitExtension/AgoraReplayKitExt.h>
+
+@interface SampleHandler : RPBroadcastSampleHandler <AgoraReplayKitExtDelegate>
+
+@end

package/template/ios/ScreenSharing/SampleHandler.m

@@ -0,0 +1,70 @@
+//  SampleHandler.m
+//  ScreenSharing
+
+
+#import "SampleHandler.h"
+
+@implementation SampleHandler
+
+- (void)broadcastStartedWithSetupInfo:(NSDictionary<NSString *,NSObject *> *)setupInfo {
+    // User has requested to start the broadcast. Setup info from the UI extension can be supplied but optional.
+    [[AgoraReplayKitExt shareInstance] start:self];
+}
+
+- (void)broadcastPaused {
+    // User has requested to pause the broadcast. Samples will stop being delivered.
+    NSLog(@"broadcastPaused");
+    [[AgoraReplayKitExt shareInstance] pause];
+}
+
+- (void)broadcastResumed {
+    // User has requested to resume the broadcast. Samples delivery will resume.
+    NSLog(@"broadcastResumed");
+    [[AgoraReplayKitExt shareInstance] resume];
+}
+
+- (void)broadcastFinished {
+    // User has requested to finish the broadcast.
+    NSLog(@"broadcastFinished");
+    [[AgoraReplayKitExt shareInstance] stop];
+}
+
+- (void)processSampleBuffer:(CMSampleBufferRef)sampleBuffer withType:(RPSampleBufferType)sampleBufferType {
+    [[AgoraReplayKitExt shareInstance] pushSampleBuffer:sampleBuffer withType:sampleBufferType];
+}
+
+#pragma mark - AgoraReplayKitExtDelegate
+
+- (void)broadcastFinished:(AgoraReplayKitExt *_Nonnull)broadcast reason:(AgoraReplayKitExtReason)reason {
+    switch (reason) {
+        case AgoraReplayKitExtReasonInitiativeStop: {
+  //                NSDictionary *userInfo = @{NSLocalizedDescriptionKey : @"Host app stop srceen capture"};
+  //                NSError *error = [NSError errorWithDomain:NSCocoaErrorDomain code:0 userInfo:userInfo];
+  //                [self finishBroadcastWithError:error];
+                  NSLog(@"AgoraReplayKitExtReasonInitiativeStop");
+          break;
+        }
+          case AgoraReplayKitExtReasonConnectFail:
+              {
+  //                NSDictionary *userInfo = @{NSLocalizedDescriptionKey : @"Connect host app fail need startScreenCapture in host app"};
+  //                NSError *error = [NSError errorWithDomain:NSCocoaErrorDomain code:0 userInfo:userInfo];
+  //                [self finishBroadcastWithError:error];
+                  NSLog(@"AgoraReplayKitExReasonConnectFail");
+              }
+              break;
+
+          case AgoraReplayKitExtReasonDisconnect:
+              {
+  //                NSDictionary *userInfo = @{NSLocalizedDescriptionKey : @"disconnect with host app"};
+  //                NSError *error = [NSError errorWithDomain:NSCocoaErrorDomain code:0 userInfo:userInfo];
+  //                [self finishBroadcastWithError:error];
+                  NSLog(@"AgoraReplayKitExReasonDisconnect");
+              }
+              break;
+          default:
+              break;
+      }
+  }
+
+@end
+

package/template/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package/template/metro.config.js

@@ -1,36 +1,11 @@
-/*
-********************************************
- 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. 
-*********************************************
-*/
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
 /**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
  *
- * @format
+ * @type {import('metro-config').MetroConfig}
  */
+const config = {};
 
-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.
-
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-  resolver: {
-    blacklistRE: blacklist([/\.electron\/.*/]),
-  },
-};
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/template/package.json

@@ -48,70 +48,91 @@
     "url": "https://github.com/AgoraIO-Community/app-builder-core"
   },
   "dependencies": {
-    "@apollo/client": "3.3.20",
-    "@gorhom/bottom-sheet": "4.4.5",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/checkbox": "0.4.2",
+    "@apollo/client": "3.8.1",
+    "@gorhom/bottom-sheet": "4.4.7",
+    "@netless/react-native-whiteboard": "^0.0.14",
+    "@openspacelabs/react-native-zoomable-view": "^2.1.1",
+    "@react-native-async-storage/async-storage": "1.19.2",
+    "@react-native-community/checkbox": "0.5.16",
     "@react-native-community/clipboard": "1.5.1",
-    "@sentry/react": "6.5.1",
-    "@sentry/react-native": "2.4.3",
-    "@sentry/tracing": "6.2.1",
     "@supersami/rn-foreground-service": "^1.1.1",
+    "add": "^2.0.6",
+    "agora-extension-ai-denoiser": "1.1.0",
+    "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
-    "agora-rtc-sdk-ng": "4.14.0",
-    "agora-rtm-sdk": "1.4.3-203",
+    "agora-rtc-sdk-ng": "4.20.1",
+    "agora-rtm-sdk": "1.5.1",
+    "buffer": "^6.0.3",
     "electron-log": "4.3.5",
     "electron-squirrel-startup": "1.0.0",
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
+    "fetch-retry": "^5.0.6",
     "graphql": "15.5.0",
+    "hark": "^1.2.3",
+    "jwt-decode": "3.1.2",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "npm": "^9.7.2",
+    "p-queue": "^7.3.4",
+    "protobufjs": "^7.2.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-is": "18.0.0",
-    "react-native": "0.64",
-    "react-native-agora": "3.7.1",
+    "react-native": "0.72.4",
+    "react-native-agora": "3.7.2-rc.3",
+    "react-native-document-picker": "^9.1.0",
+    "react-native-exit-app": "1.1.0",
+    "react-native-fs": "^2.20.0",
     "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-reanimated": "3.4.2",
     "react-native-responsive-fontsize": "0.5.1",
+    "react-native-share": "7.9.0",
     "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-native-web": "0.19.7",
+    "react-native-webview": "^11.22.2",
     "react-router-dom": "5.2.0",
     "react-router-native": "5.2.0",
     "react-spring-bottom-sheet": "3.4.1",
-    "react-tooltip": "4.5.1"
+    "react-tooltip": "4.5.1",
+    "rn-fetch-blob": "0.12.0",
+    "white-web-sdk": "2.16.42"
   },
   "devDependencies": {
-    "@babel/core": "7.14.3",
+    "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-proposal-optional-chaining": "7.16.0",
-    "@babel/preset-env": "7.14.4",
+    "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@babel/runtime": "7.14.0",
+    "@babel/runtime": "^7.20.0",
     "@bam.tech/react-native-make": "3.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@react-native-community/eslint-config": "1.1.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.11",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/hark": "^1.2.2",
     "@types/jest": "25.2.3",
+    "@types/react": "17.0.2",
     "@types/react-is": "17.0.3",
     "@types/react-native": "0.67.6",
     "@types/react-native-keep-awake": "2.0.2",
     "@types/react-router-dom": "5.1.7",
     "@types/react-router-native": "5.1.0",
-    "@types/react-test-renderer": "16.9.5",
+    "@types/react-test-renderer": "18.0.0",
     "@types/webpack-dev-server": "3.11.4",
     "@types/webpack-env": "^1.16.4",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
-    "@typescript-eslint/parser": "2.34.0",
-    "babel-jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "babel-jest": "^29.2.1",
     "babel-loader": "8.2.4",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-define": "2.0.1",
@@ -121,7 +142,7 @@
     "electron": "16.0.1",
     "electron-builder": "23.6.0",
     "electron-notarize": "1.0.0",
-    "eslint": "6.8.0",
+    "eslint": "^8.19.0",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",
@@ -129,15 +150,15 @@
     "gulp-replace": "^1.1.3",
     "html-webpack-plugin": "4.5.2",
     "ignore-loader": "^0.1.2",
-    "jest": "25.5.4",
-    "metro-react-native-babel-preset": "0.59.0",
-    "prettier": "2.3.1",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "prettier": "^2.4.1",
     "react-devtools-electron": "4.7.0",
     "react-refresh": "0.12.0",
-    "react-test-renderer": "17.0.1",
+    "react-test-renderer": "18.2.0",
     "style-loader": "3.3.1",
     "ts-loader": "^8.3.0",
-    "typescript": "3.9.9",
+    "typescript": "4.8.4",
     "webpack": "5.72.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "4.8.1",
@@ -145,15 +166,7 @@
     "webpack-node-externals": "3.0.0",
     "yargs": "15.4.1"
   },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
+  "engines": {
+    "node": ">=16"
   }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
-
+import { IconsInterface } from '../src/atoms/CustomIcon';
 declare module 'react-native-toast-message' {
   interface AnyObject {
     [key: string]: any;
@@ -56,6 +56,8 @@ declare module 'react-native-toast-message' {
       onShow?: () => void;
       onHide?: () => void;
       onPress?: () => void;
+      leadingIcon?: React.ReactNode;
+      leadingIconName?: keyof IconsInterface;
     }): void;
 
     static hide(): void;

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

@@ -2,3 +2,4 @@ import Toast from './src';
 
 export { default as BaseToast } from './src/components/base';
 export default Toast;
+

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Icon from '../icon';
 import { icons } from '../../assets';
 import { stylePropType } from '../../utils/prop-types';
-import styles, { HEIGHT } from './styles';
+import styles from './styles';
 
 function BaseToast({
   leadingIcon,
@@ -26,7 +26,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -37,43 +37,31 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              justifyContent: 'space-between'
+              alignItems: 'center'
             }}>
-            <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 || text2?.length > 0) && (
-          <View>
+            {leadingIcon ? leadingIcon : <></>}
+
             <Text
-              testID='text2'
-              style={[styles.text2, text2Style]}
-              numberOfLines={text2NumberOfLines}>
-              {text2}
+              testID='text1'
+              style={[styles.text1, text1Style]}
+              numberOfLines={text1NumberOfLines}>
+              {text1}
             </Text>
           </View>
         )}
+        {(text2 || text2?.length > 0) && (
+          <Text
+            testID='text2'
+            style={[styles.text2, text2Style]}
+            numberOfLines={text2NumberOfLines}>
+            {text2}
+          </Text>
+        )}
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 32,
-              paddingBottom: 24
+              paddingTop: 16
             }}>
             {primaryBtn ? primaryBtn : <></>}
             {secondaryBtn ? secondaryBtn : <></>}
@@ -82,12 +70,11 @@ function BaseToast({
           <></>
         )}
       </View>
+      {trailingIcon ? trailingIcon : <></>}
     </TouchableOpacity>
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
@@ -106,6 +93,7 @@ BaseToast.propTypes = {
 BaseToast.defaultProps = {
   leadingIcon: null,
   trailingIcon: null,
+  leadingIconName: null,
   text1: undefined,
   text2: undefined,
   onPress: undefined,

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

@@ -1,40 +1,37 @@
-import { StyleSheet } from 'react-native';
-import colors from '../../colors';
-
-export const HEIGHT = 105;
+import { StyleSheet, Platform } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
-    height: HEIGHT,
-    borderRadius: 6,
-    backgroundColor: colors.white,
+    borderRadius: 4,
+    borderTopWidth: 4,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    width: '100%',
+    paddingHorizontal: Platform.OS === 'android' ? 16 : 24,
+    paddingVertical: 16,
+    height: 'auto',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 2
   },
-  borderTop: {
-    borderTopWidth: 5,
-    borderTopColor: colors.alto
-  },
   contentContainer: {
-    paddingLeft: 20,
     flex: 1,
-    flexDirection: 'row',
+    overflow: 'hidden',
+    flexDirection: 'column',
     justifyContent: 'flex-start'
   },
   text1: {
-    fontSize: 15,
+    fontSize: 14,
+    lineHeight: 22,
     fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '600',
-    marginRight: 2
+    fontWeight: '700'
   },
   text2: {
-    fontSize: 15,
-    fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '400'
+    marginTop: 4,
+    fontSize: 14,
+    lineHeight: 22,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro'
   }
 });

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

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity, Text, Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import { stylePropType } from '../utils/prop-types';
-import styles, { HEIGHT } from './base/styles';
+import styles from './base/styles';
 import Checkbox from '../../../src/subComponents/Checkbox';
-import { PrimaryButton } from 'customization-api';
+import PrimaryButton from '../../../src/atoms/PrimaryButton';
 import TertiaryButton from '../../../src/atoms/TertiaryButton';
 
 function BaseToast({
@@ -30,7 +30,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -76,9 +76,7 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 8,
-              marginLeft: 4
+              paddingTop: 12
             }}
             onPress={() => {
               setChecked((e) => !e);
@@ -97,19 +95,22 @@ function BaseToast({
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 24
+              marginTop: 16
             }}>
             {primaryBtn && (
               <PrimaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  lineHeight: 14,
+                  paddingLeft: 0
+                }}
                 containerStyle={{
-                  height: 40,
+                  height: 32,
                   borderRadius: 4,
-                  paddingVertical: 0,
-                  paddingHorizontal: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20,
                   minWidth: 'unset'
                 }}
                 {...primaryBtn}
@@ -121,11 +122,17 @@ function BaseToast({
             )}
             {secondaryBtn && (
               <TertiaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  paddingLeft: 0,
+                  lineHeight: 14
+                }}
                 containerStyle={{
-                  height: 40,
-                  marginLeft: 16,
-                  paddingVertical: 0
+                  height: 32,
+                  marginLeft: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20
                 }}
                 {...secondaryBtn}
                 onPress={(e) => {
@@ -143,8 +150,6 @@ function BaseToast({
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,

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

@@ -255,8 +255,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -381,6 +382,7 @@ class Toast extends Component {
           'text1',
           'text2',
           'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',

package/template/react-native-toast-message/src/index.sdk.tsx

@@ -254,8 +254,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -379,6 +380,8 @@ class Toast extends Component {
           'isVisible',
           'text1',
           'text2',
+          'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',