agora-appbuilder-core 2.3.0-beta.30 → 2.3.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.30",
+  "version": "2.3.0-beta.31",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/Gulpfile.js

@@ -18,6 +18,7 @@ const config = require('./config.json');
 const replace = require('gulp-replace');
 const concat = require('gulp-concat');
 const header = require('gulp-header');
+const semver = require('semver');
 
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
@@ -48,9 +49,17 @@ const TS_DEFS_BUILD_PATH =
     ? path.join(__dirname, '../Builds/ts-defs/android')
     : path.join(__dirname, '../Builds/ts-defs/.electron');
 
+const debugFlag = process.argv.indexOf('--debug') !== -1;
+
 const pkgNameArg = process.argv.indexOf('--pkgname');
 const PACKAGE_NAME =
-  pkgNameArg == -1 ? 'agora-app-builder-sdk' : process.argv[pkgNameArg + 1];
+  pkgNameArg == -1
+    ? process.env.TARGET === 'rsdk'
+      ? '@appbuilder/react'
+      : process.env.TARGET === 'wsdk'
+      ? '@appbuilder/web'
+      : 'agora-app-builder-sdk'
+    : process.argv[pkgNameArg + 1];
 
 const runCli = (cmd, cb) => {
   const [arg1, ...arg2] = cmd.split(' ');
@@ -61,15 +70,49 @@ const runCli = (cmd, cb) => {
   proc.on('exit', cb);
 };
 
+const runCliNoOutput = (cmd, cb) => {
+  const [arg1, ...arg2] = cmd.split(' ');
+  const proc = spawn(arg1, arg2, {
+    stdio: 'ignore',
+    shell: true,
+  });
+  proc.on('exit', cb);
+};
+
 const general = {
   clean: () => {
     return del([`${BUILD_PATH}/**/*`], {force: true});
   },
   packageJson: async (cb) => {
-    let {version, private, author, description, dependencies} = JSON.parse(
+    let {private, author, description, dependencies} = JSON.parse(
       await fs.readFile(path.join(__dirname, 'package.json')),
     );
 
+    // Tries to fetch version and dependencies from parent package.json
+
+    let {dependencies: parentDependencies, version: parentVersion} = JSON.parse(
+      await fs.readFile(path.join(__dirname, '..', 'package.json')),
+    );
+
+    // If parentDependencies present derives base version from cli version ( prod )
+    // otherwise uses version number from parent package.json ( dev )
+
+    let baseVersion = parentDependencies
+      ? parentDependencies['agora-app-builder-cli']
+      : parentVersion;
+
+    // Generates unique hash
+
+    const nanoid = await import('nanoid');
+    const alphabet =
+      '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+
+    let versionHash = nanoid.customAlphabet(alphabet, 10)();
+
+    // Hash appended to base version to create unique version for every build.
+
+    let version = semver.minVersion(`${baseVersion}-${versionHash}`).version;
+
     let newPackage = {
       name: PACKAGE_NAME,
       version,
@@ -81,9 +124,6 @@ const general = {
     // Target specific changes
 
     if (process.env.TARGET === 'rsdk') {
-      if (pkgNameArg == -1) {
-        newPackage.name = '@appbuilder/react';
-      }
       newPackage.main = 'index.js';
       newPackage.types = 'index.d.ts';
 
@@ -98,9 +138,6 @@ const general = {
     }
 
     if (process.env.TARGET === 'wsdk') {
-      if (pkgNameArg == -1) {
-        newPackage.name = '@appbuilder/web';
-      }
       newPackage.main = 'app-builder-web-sdk.umd2.js';
       newPackage.types = 'index.d.ts';
     }
@@ -115,7 +152,8 @@ const general = {
     return fs.mkdir(BUILD_PATH, {recursive: true});
   },
   typescript: (cb) => {
-    runCli(
+    const cli = debugFlag ? runCli : runCliNoOutput;
+    cli(
       'npx -p typescript tsc --project tsconfig_fpeApi.json --outFile ../Builds/customization-api.d.ts',
       () => cb(),
     );
@@ -126,9 +164,9 @@ const general = {
       .pipe(
         replace(
           `declare var $config: ConfigInterface;
-declare module 'test-fpe' {
-  const data: {};
-  export default data;
+declare module 'customization' {
+  const customizationConfig: {};
+  export default customizationConfig;
 }`,
           ' ',
         ),
@@ -210,7 +248,8 @@ const reactSdk = {
     runCli(esbuildCmd, cb);
   },
   typescript: (cb) => {
-    runCli(
+    const cli = debugFlag ? runCli : runCliNoOutput;
+    cli(
       //'npx -p typescript tsc index.rsdk.tsx --declaration --emitDeclarationOnly --noResolve --outFile ../Builds/temp.d.ts',
       'npx -p typescript tsc --project tsconfig_rsdk_index.json --outFile ../Builds/reactSdk.d.ts',
       () => cb(),
@@ -222,7 +261,7 @@ const reactSdk = {
       .pipe(
         replace(
           'declare module "index.rsdk"',
-          'declare module "agora-app-builder-sdk"',
+          `declare module "${PACKAGE_NAME}"`,
         ),
       )
       .pipe(replace("'customization-api'", "'customization-api/index'"))
@@ -237,7 +276,8 @@ const webSdk = {
     runCli('webpack --config ./webpack.wsdk.config.js', cb);
   },
   typescript: (cb) => {
-    runCli(
+    const cli = debugFlag ? runCli : runCliNoOutput;
+    cli(
       'npx -p typescript tsc --project tsconfig_wsdk_index.json --outFile ../Builds/webSdk.d.ts',
       () => cb(),
     );
@@ -248,7 +288,7 @@ const webSdk = {
       .pipe(
         replace(
           'declare module "index.wsdk"',
-          'declare module "agora-app-builder-sdk"',
+          `declare module "${PACKAGE_NAME}"`,
         ),
       )
       .pipe(replace("'customization-api'", "'customization-api/index'"))

package/template/_gitignore

@@ -73,5 +73,5 @@ dist/
 .webpack/
 out/
 
-#FPE plugin folder
-template/test-fpe/*
+#Customization plugin folder
+template/customization/*

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

@@ -17,8 +17,8 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
       <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
           <RenderConsumer>
-            {({renderList, renderPosition}) => {
-              const [maxUid, ...minUids] = renderPosition;
+            {({renderList, activeUids}) => {
+              const [maxUid, ...minUids] = activeUids;
               return (
                 <>
                   <MaxVideoView user={renderList[maxUid]} key={maxUid} />

package/template/agora-rn-uikit/src/Contexts/RtcContext.tsx

@@ -11,7 +11,7 @@ export interface RenderObjects {
 
 export interface RenderStateInterface {
   renderList: RenderObjects;
-  renderPosition: Array<UidType>;
+  activeUids: Array<UidType>;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

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

@@ -30,10 +30,10 @@ function Controls(props: ControlsPropsInterface) {
       </View>
       {showButton ? (
         <RenderConsumer>
-          {({renderList, renderPosition}) => (
+          {({renderList, activeUids}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
               <RemoteControls
-                user={renderList[renderPosition[0]]}
+                user={renderList[activeUids[0]]}
                 showRemoteSwap={false}
               />
             </View>

package/template/agora-rn-uikit/src/Reducer/LocalMuteAudio.ts

@@ -17,7 +17,7 @@ export default function LocalMuteAudio(
         audio: action.value[0],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/LocalMuteVideo.ts

@@ -17,7 +17,7 @@ export default function LocalMuteVideo(
         video: action.value[0],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/RemoteAudioStateChanged.ts

@@ -20,7 +20,7 @@ export default function RemoteAudioStateChanged(
         audio: audioState,
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/RemoteVideoStateChanged.ts

@@ -23,7 +23,7 @@ export default function RemoteVideoStateChanged(
             : state.renderList[action.value[0]].video,
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/UpdateDualStreamMode.ts

@@ -22,12 +22,12 @@ export default function UpdateDualStreamMode(
 
   if (newMode === DualStreamMode.HIGH) {
     // Update everybody to high
-    state.renderPosition.forEach(setHighStreamType);
+    state.activeUids.forEach(setHighStreamType);
   } else if (newMode === DualStreamMode.LOW) {
     // Update everybody to low
-    state.renderPosition.forEach(setLowStreamType);
+    state.activeUids.forEach(setLowStreamType);
   } else {
-    const [maxUid, ...minUids] = state.renderPosition;
+    const [maxUid, ...minUids] = state.activeUids;
     // if (newMode === DualStreamMode.DYNAMIC)
     // Max users are high other are low
     //setting high for maxuid
@@ -37,7 +37,7 @@ export default function UpdateDualStreamMode(
   }
   stateUpdate = {
     renderList: renderList,
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/UserJoined.ts

@@ -32,11 +32,11 @@ export default function UserJoined(
       ...typeData,
     },
   };
-  let renderPosition = state.renderPosition.filter((i) => i === newUid).length
-    ? [...state.renderPosition]
-    : [...state.renderPosition, newUid];
-  const [maxUid] = renderPosition;
-  if (renderPosition.length === 2 && maxUid === localUid) {
+  let activeUids = state.activeUids.filter((i) => i === newUid).length
+    ? [...state.activeUids]
+    : [...state.activeUids, newUid];
+  const [maxUid] = activeUids;
+  if (activeUids.length === 2 && maxUid === localUid) {
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
@@ -45,13 +45,13 @@ export default function UserJoined(
     //Swap render positions
     stateUpdate = {
       renderList: renderList,
-      renderPosition: renderPosition.reverse(),
+      activeUids: activeUids.reverse(),
     };
   } else {
     //More than one remote
     stateUpdate = {
       renderList: renderList,
-      renderPosition: renderPosition,
+      activeUids: activeUids,
     };
   }
 

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteAudio.ts

@@ -12,7 +12,7 @@ export default function UserMuteRemoteAudio(
         audio: action.value[1],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteVideo.ts

@@ -12,7 +12,7 @@ export default function UserMuteRemoteVideo(
         video: action.value[1],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

package/template/agora-rn-uikit/src/Reducer/UserOffline.ts

@@ -12,12 +12,12 @@ export default function UserOffline(
   // if (updatedRenderList[action.value[0]]) {
   //   delete updatedRenderList[action.value[0]];
   // }
-  const updatedRenderPosition = [...state.renderPosition].filter(
+  const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
   const stateUpdate: RenderStateInterface = {
     renderList: state.renderList,
-    renderPosition: updatedRenderPosition,
+    activeUids: updatedActiveUids,
   };
 
   return stateUpdate;

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -30,8 +30,8 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const {renderList, renderPosition} = uidState;
-    const [maxUid] = renderPosition;
+    const {renderList, activeUids} = uidState;
+    const [maxUid] = activeUids;
     const videoState = renderList[maxUid].video;
     async function join() {
       if (

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

@@ -46,7 +46,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         type: 'rtc',
       },
     },
-    renderPosition: [localUid],
+    activeUids: [localUid],
   };
 
   const [initialState, setInitialState] = React.useState(
@@ -97,7 +97,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   ) => {
     const newState = {
       ...state,
-      renderPosition: [...state.renderPosition, action.value[0]],
+      activeUids: [...state.activeUids, action.value[0]],
       renderList: {
         ...state.renderList,
         [action.value[0]]: {
@@ -203,28 +203,26 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   const swapVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
-      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+      if (state?.activeUids?.indexOf(newMaxUid) === -1) {
         //skip the update if new max uid is not joined yet.
         return {};
       }
-      let renderPosition: RenderStateInterface['renderPosition'] = [
-        ...state.renderPosition,
+      let activeUids: RenderStateInterface['activeUids'] = [
+        ...state.activeUids,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
 
       // Element which is currently maximized
-      const [currentMaxUid] = renderPosition;
+      const [currentMaxUid] = activeUids;
 
       if (currentMaxUid === newMaxUid) {
         //skip the update if new max uid is already maximized
         return {};
       }
 
-      const newMaxUidOldPosition = renderPosition.findIndex(
-        (i) => i === newMaxUid,
-      );
+      const newMaxUidOldPosition = activeUids.findIndex((i) => i === newMaxUid);
 
       if (!newMaxUidOldPosition) {
         return {};
@@ -242,11 +240,11 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
        * else push newMaxUid at last position
        */
 
-      renderPosition[0] = newMaxUid;
-      renderPosition[newMaxUidOldPosition] = currentMaxUid;
+      activeUids[0] = newMaxUid;
+      activeUids[newMaxUidOldPosition] = currentMaxUid;
 
       return {
-        renderPosition: renderPosition,
+        activeUids: activeUids,
         renderList: renderList,
       };
     },
@@ -258,12 +256,12 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    */
   const dequeVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
-      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+      if (state?.activeUids?.indexOf(newMaxUid) === -1) {
         //skip the update if new max uid is not joined yet.
         return {};
       }
-      let renderPosition: RenderStateInterface['renderPosition'] = [
-        ...state.renderPosition,
+      let activeUids: RenderStateInterface['activeUids'] = [
+        ...state.activeUids,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
@@ -273,7 +271,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         return {};
       }
       // Element which is currently maximized
-      const [currentMaxUid] = renderPosition;
+      const [currentMaxUid] = activeUids;
 
       if (currentMaxUid === newMaxUid) {
         //skip the update if new max uid is already maximized
@@ -286,14 +284,14 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         // No need to modify the streamType if the mode is not dynamic
       }
 
-      const minIds = renderPosition.filter(
+      const minIds = activeUids.filter(
         (uid) => uid !== newMaxUid && uid !== currentMaxUid,
       );
 
-      renderPosition = [newMaxUid, currentMaxUid, ...minIds];
+      activeUids = [newMaxUid, currentMaxUid, ...minIds];
 
       return {
-        renderPosition: renderPosition,
+        activeUids: activeUids,
         renderList: renderList,
       };
     },
@@ -322,7 +320,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
             <RenderProvider
               value={{
                 renderList: uidState.renderList,
-                renderPosition: uidState.renderPosition,
+                activeUids: uidState.activeUids,
               }}>
               {props.children}
             </RenderProvider>

package/template/babel.config.js

@@ -25,7 +25,7 @@ module.exports = {
           'customization-api': './customization-api/index.ts',
           'customization-implementation':
             './customization-implementation/index.ts',
-          'test-fpe': getCustomizationApiPath(),
+          customization: getCustomizationApiPath(),
         },
       },
     ],

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -33,8 +33,8 @@ import {ChannelProfile, ClientRole} from '../../../agora-rn-uikit';
 import {role, mode} from './Types';
 import {LOG_ENABLED, GEO_FENCING} from '../../../config.json';
 import {Platform} from 'react-native';
-import useIsMobileOrTablet from '../../../src/utils/useIsMobileOrTablet';
-const isMobileOrTablet = useIsMobileOrTablet();
+import isMobileOrTablet from '../../../src/utils/isMobileOrTablet';
+
 interface MediaDeviceInfo {
   readonly deviceId: string;
   readonly label: string;

package/template/customization-api/app-state.ts

@@ -40,7 +40,7 @@ export {useChatUIControl} from '../src/components/chat-ui/useChatUIControl';
 export type {ChatUIControlInterface} from '../src/components/chat-ui/useChatUIControl';
 export {useMessages} from '../src/app-state/useMessages';
 export type {messageInterface} from '../src/app-state/useMessages';
-export type {SidePanelType} from '../src/subComponents/SidePanelEnum';
+export {SidePanelType} from '../src/subComponents/SidePanelEnum';
 export {useSidePanel} from '../src/utils/useSidePanel';
 
 //hook used to get/set username

package/template/customization-api/index.ts

@@ -15,9 +15,9 @@
 import {customize} from './customize';
 import configJSON from '../config.json';
 
-let config = configJSON as unknown as ConfigInterface;
+let $config = configJSON as unknown as ConfigInterface;
 
-export {customize, config};
+export {customize, $config};
 export * from './action-library';
 export * from './app-state';
 export * from './customEvents';

package/template/customization-api/typeDefinition.ts

@@ -17,7 +17,7 @@ import {
   RenderStateInterface,
   UidType,
 } from '../agora-rn-uikit';
-import {i18nInterface} from '../src/language/i18nTypes';
+import {I18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
 export type {RenderInterface, RenderStateInterface, UidType};
 export type {
@@ -132,7 +132,7 @@ export interface CustomizationApiInterface {
   /**
    * Internationlization
    */
-  i18n?: i18nInterface[];
+  i18n?: I18nInterface[];
   /**
    * Life cycle events
    */

package/template/customization-api/utils.ts

@@ -25,11 +25,6 @@ export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 export {useHistory, useParams} from '../src/components/Router';
 
 //export common function
-export {
-  useIsWeb,
-  useIsIOS,
-  useIsAndroid,
-  useIsDestop,
-} from '../src/utils/common';
-export {default as useIsMobileOrTablet} from '../src/utils/useIsMobileOrTablet';
+export {isWeb, isIOS, isAndroid, isDestop} from '../src/utils/common';
+export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';

package/template/customization-implementation/index.ts

@@ -1,4 +1,4 @@
 export {default as createHook} from './createHook';
 export {CustomizationProvider, useCustomization} from './useCustomization';
 export type {CustomizationProviderProps} from './useCustomization';
-export {default as customizationConfig} from 'test-fpe';
+export {default as customizationConfig} from 'customization';

package/template/customization-implementation/useCustomization.tsx

@@ -11,7 +11,7 @@
 */
 import React from 'react';
 import {CustomizationApiInterface} from 'customization-api';
-import customizationConfig from 'test-fpe';
+import customizationConfig from 'customization';
 import createHook from './createHook';
 
 const CustomizationContext: React.Context<CustomizationApiInterface> =

package/template/customization.config.js

@@ -11,11 +11,11 @@
 */
 
 /*
-getCustomizationApiPath - will return test-fpe if exists otherwise it will return the dummy customization path
+getCustomizationApiPath - will return customization if exists otherwise it will return the dummy customization path
 */
 const fs = require('fs');
-const customizationPathTs = './test-fpe/index.ts';
-const customizationPathTsx = './test-fpe/index.tsx';
+const customizationPathTs = './customization/index.ts';
+const customizationPathTsx = './customization/index.tsx';
 const customizationDummyPath = './customization-implementation/dummyConfig.ts';
 const getCustomizationApiPath = () => {
   if (fs.existsSync(customizationPathTs)) {

package/template/esbuild.rsdk.go

@@ -72,9 +72,9 @@ func commonAliasResolver() api.Plugin {
 				},
 			)
 
-			pb.OnResolve(api.OnResolveOptions{Filter: "test-fpe"},
+			pb.OnResolve(api.OnResolveOptions{Filter: "customization"},
 				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
-					fpePath, err := filepath.Abs("./test-fpe/index.ts")
+					fpePath, err := filepath.Abs("./customization/index.ts")
 					if err != nil {
 						log.Fatalln(err)
 					}

package/template/global.d.ts

@@ -78,7 +78,7 @@ interface ConfigInterface {
   AUDIO_ROOM: boolean;
 }
 declare var $config: ConfigInterface;
-declare module 'test-fpe' {
+declare module 'customization' {
   const customizationConfig: {};
   export default customizationConfig;
 }

package/template/src/AppWrapper.tsx

@@ -18,7 +18,7 @@ import {SessionProvider} from './components/SessionContext';
 import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
 import ColorConfigure from './components/ColorConfigure';
 import Toast from '../react-native-toast-message';
-import useToastConfig from './subComponents/useToastConfig';
+import ToastConfig from './subComponents/ToastConfig';
 import {isValidReactComponent} from './utils/common';
 import DimensionProvider from './components/dimension/DimensionProvider';
 import Error from './components/common/Error';
@@ -37,7 +37,6 @@ const AppWrapper = (props: AppWrapperProps) => {
     }
     return React.Fragment;
   });
-  const toastConfig = useToastConfig();
 
   return (
     <AppRoot>
@@ -49,7 +48,7 @@ const AppWrapper = (props: AppWrapperProps) => {
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
           <StatusBar hidden={true} />
-          <Toast ref={(ref) => Toast.setRef(ref)} config={toastConfig} />
+          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
           <StorageProvider>
             <GraphQLProvider>
               <Router>