agora-appbuilder-core 2.2.0 → 2.3.0-beta.2

package/template/fpe-api/utils.ts

@@ -0,0 +1,62 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+// commented for v1 release
+//export {default as useIsScreenShare} from '../src/utils/isScreenShareUser';
+export {default as useIsHost} from '../src/utils/isHostUser';
+export {default as useIsAttendee} from '../src/utils/IsAttendeeUser';
+export {default as useIsPSTN} from '../src/utils/isPSTNUser';
+export {default as useUserList} from '../src/utils/useUserList';
+// commented for v1 release
+//export {default as useGroupMessages} from '../src/utils/useGroupMessages';
+//export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
+export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
+export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
+export {default as useSetName} from '../src/utils/useSetName';
+export {default as useGetName} from '../src/utils/useGetName';
+// commented for v1 release
+//export {useSidePanel} from '../src/utils/useSidePanel';
+// commented for v1 release
+// export {
+//   default as useUnreadMessageCount,
+//   UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useUnreadMessageCount';
+// export {
+//   default as useSetUnreadMessageCount,
+//   SET_UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useSetUnreadMessageCount';
+export {default as useNavigateTo} from '../src/utils/useNavigateTo';
+export {default as useNavParams} from '../src/utils/useNavParams';
+export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
+export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
+// commented for v1 release
+// export {
+//   default as useSendMessage,
+//   MESSAGE_TYPE,
+// } from '../src/utils/useSendMessage';
+// export {controlMessageEnum} from '../src/components/ChatContext';
+// export {
+//   default as useSendControlMessage,
+//   CONTROL_MESSAGE_TYPE,
+// } from '../src/utils/useSendControlMessage';
+export {
+  MUTE_LOCAL_TYPE,
+  default as useMuteToggleLocal,
+} from '../src/utils/useMuteToggleLocal';
+export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
+export {
+  default as useRemoteMute,
+  MUTE_REMOTE_TYPE,
+} from '../src/utils/useRemoteMute';
+export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
+
+//export common function
+export * from '../src/utils/common';

package/template/fpe-implementation/createHook.ts

@@ -0,0 +1,33 @@
+/*
+********************************************
+ 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, { useContext } from 'react';
+/**
+ * 
+ * @param context - any context data which we want to extract the data.
+ * @returns useContextWithSelector in which we can pass selector function to extract data from the context that we passed.
+ */
+function createHook<T>(context: React.Context<T>) {
+
+  function useContextWithSelector<U>(contextSelector: (data: T) => U): U;
+  function useContextWithSelector(): T;
+  /**
+   * 
+   * @param contextSelector is used to pass callback function used to select data from the context data
+   * @returns the data selected from the context
+   */
+  function useContextWithSelector<U>(contextSelector?: (data: T) => U): U | T {
+    const data = useContext(context);
+    return contextSelector ? contextSelector(data) : data
+  }
+  return useContextWithSelector;
+}
+export default createHook;

package/template/fpe-implementation/dummyFpe.ts

@@ -0,0 +1,17 @@
+/*
+********************************************
+ 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 { installFPE } from "fpe-api/install";
+/**
+ * Dummy FPE used to load when project doesn't have the FPE.
+ */
+const data = installFPE({});
+export default data;

package/template/fpe-implementation/index.ts

@@ -0,0 +1 @@
+export { default as createHook } from './createHook';

package/template/fpe-todo.txt

@@ -0,0 +1,14 @@
+1. test-fpe name should be changed 
+  - template/_gitignore
+  - babel.config.js
+  - webpack.config.js
+  - fpe.config.js
+  - fpe-api index.ts
+  - fpe-api useFPE
+2. What if user called custom context without wrapping provider
+  - useContext will return the default vaule. so we can't identify whether is wrapped with the provider or not.
+3. CustomUserContext 
+4. Add sibling into view without overriding
+5. Translation labels
+  - some of keys
+6.Layout dropdown implementation

package/template/fpe.config.js

@@ -0,0 +1,29 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+
+/*
+getFpePath - will return test-fpe if exists otherwise it will return the dummy fpe path
+*/
+const fs = require('fs');
+const FpePathTs = './test-fpe/index.ts';
+const FpePathTsx = './test-fpe/index.tsx';
+const FpeDummyPath = './fpe-implementation/dummyFpe.ts';
+const getFpePath = () => {
+  if (fs.existsSync(FpePathTs)) {
+    return FpePathTs;
+  }
+  if (fs.existsSync(FpePathTsx)) {
+    return FpePathTsx;
+  }
+  return FpeDummyPath;
+};
+module.exports = getFpePath;

package/template/global.d.ts

@@ -77,3 +77,7 @@ interface ConfigInterface {
   LOG_ENABLED: boolean;
 }
 declare var $config: ConfigInterface;
+declare module 'test-fpe'{
+  const data:{}
+  export default data;
+}

package/template/index.rsdk.tsx

@@ -0,0 +1,27 @@
+/*
+********************************************
+ 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.
+*********************************************
+*/
+/**
+ * @format
+ */
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import React from 'react';
+export * from 'fpe-api';
+
+interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
+  View: React.FC;
+}
+
+const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
+    ...AppBuilderSdkApi,
+    View: SDKAppWrapper,
+  }
+export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -0,0 +1,27 @@
+import {AppRegistry} from 'react-native';
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+export * from 'fpe-api';
+
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
+}
+
+const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
+
+// init code
+class AppBuilder extends HTMLElement {
+  connectedCallback() {
+    this.style.height = '100%';
+    this.style.width = '100%';
+    this.style.display = 'flex';
+    this.style.flex = '1';
+    AppRegistry.registerComponent('App', () => SDKAppWrapper);
+    AppRegistry.runApplication('App', {
+      // initialProps: {passphrase: this.getAttribute('passphrase')},
+      rootTag: this,
+    });
+  }
+}
+
+customElements.define('app-builder', AppBuilder);
+
+export default AppBuilderWebSdkApi;

package/template/package.json

@@ -6,15 +6,21 @@
   "scripts": {
     "android": "react-native run-android",
     "android:build": "npm run android:build:unix",
-    "android:build:unix": "cd android && ./gradlew assembleRelease",
-    "android:build:windows": "cd android && gradlew.bat assembleRelease",
+    "android:build:unix": "cross-env TARGET=android gulp androidUnix",
+    "android:build:windows": "cross-env TARGET=android gulp androidWin",
     "ios": "cd ios && ls | grep .xcworkspace | xargs open",
     "ios:build": "cd ios && ls | grep .xcworkspace | xargs open",
     "start": "react-native start",
     "web": "cross-env TARGET=web NODE_ENV=development webpack-dev-server --hot --open --config webpack.web.config.js",
+    "ts": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.ts.config.js",
     "web:build": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.web.config.js",
-    "electron:start": "cross-env NODE_ENV=development gulp development",
-    "electron:build": "cross-env NODE_ENV=production gulp build",
+    "web-sdk": "cross-env TARGET=wsdk NODE_ENV=development gulp webSdk",
+    "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
+    "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
+    "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
+    "react-sdk-esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
+    "electron:start": "cross-env NODE_ENV=development gulp electron_development",
+    "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
     "windows:build": "cross-env TARGET=windows npm run electron:build",
     "mac": "cross-env TARGET=mac npm run electron:start",
@@ -58,6 +64,7 @@
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-is": "18.0.0",
     "react-native": "0.63.3",
     "react-native-agora": "3.4.2",
     "react-native-hyperlink": "0.0.19",
@@ -78,20 +85,23 @@
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "7.14.0",
     "@bam.tech/react-native-make": "3.0.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.3.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@react-native-community/eslint-config": "1.1.0",
     "@types/jest": "25.2.3",
+    "@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/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": "25.5.1",
-    "babel-loader": "8.2.2",
-    "babel-plugin-transform-define": "2.0.0",
+    "babel-jest": "27.5.1",
+    "babel-loader": "8.2.4",
+    "babel-plugin-module-resolver": "4.1.0",
+    "babel-plugin-transform-define": "2.0.1",
     "cross-env": "7.0.3",
     "del": "5.1.0",
     "electron": "16.0.1",
@@ -100,18 +110,24 @@
     "eslint": "6.8.0",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-header": "^2.0.9",
+    "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",
     "react-devtools-electron": "4.7.0",
-    "react-refresh": "0.8.3",
+    "react-refresh": "0.12.0",
     "react-test-renderer": "16.13.1",
+    "ts-loader": "^8.3.0",
     "typescript": "3.9.9",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.2",
+    "webpack": "5.72.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "4.8.1",
     "webpack-merge": "5.8.0",
+    "webpack-node-externals": "3.0.0",
     "yargs": "15.4.1"
   },
   "jest": {

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

@@ -343,13 +343,8 @@ class Toast extends Component {
   }
 
   getBaseStyle(position = 'bottom', keyboardHeight) {
-    const {
-      topOffset,
-      bottomOffset,
-      keyboardOffset,
-      height,
-      animation
-    } = this.state;
+    const { topOffset, bottomOffset, keyboardOffset, height, animation } =
+      this.state;
     const offset = position === 'bottom' ? bottomOffset : topOffset;
 
     // +5 px to completely hide the toast under StatusBar (on Android)
@@ -358,14 +353,14 @@ class Toast extends Component {
 
     const translateY = animation.interpolate({
       inputRange: [0, 1, 2],
-      outputRange
+      outputRange: [0, 1, 0]
     });
 
     return [
       styles.base,
       styles[position],
       {
-        transform: [{ translateY }]
+        opacity: translateY
       }
     ];
   }
@@ -383,7 +378,11 @@ class Toast extends Component {
       <Animated.View
         testID='animatedView'
         onLayout={this.onLayout}
-        style={[baseStyle, style, {zIndex: 100}]} //added zindex
+        style={[
+          baseStyle,
+          style,
+          { zIndex: 100, display: this.state.isVisible || this.state.inProgress ? 'flex' : 'none' }
+        ]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}
       </Animated.View>