agora-appbuilder-core 4.0.0-spl.14 → 4.0.0-spl.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-spl.14",
+  "version": "4.0.0-spl.16",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/_package-lock.json

@@ -76,6 +76,7 @@
         "babel-loader": "8.2.4",
         "babel-plugin-module-resolver": "4.1.0",
         "babel-plugin-transform-define": "2.0.1",
+        "babel-plugin-transform-remove-console": "^6.9.4",
         "cross-env": "7.0.3",
         "css-loader": "6.7.2",
         "del": "5.1.0",
@@ -7981,6 +7982,12 @@
         "node": ">= 8.x.x"
       }
     },
+    "node_modules/babel-plugin-transform-remove-console": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
+      "integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
+      "dev": true
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -35646,6 +35653,12 @@
         "traverse": "0.6.6"
       }
     },
+    "babel-plugin-transform-remove-console": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
+      "integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
+      "dev": true
+    },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",

package/template/babel.config.js

@@ -10,8 +10,8 @@
 *********************************************
 */
 const configVars = require('./configTransform');
-const { getCustomizationApiPath } =  require('./customization.config');
-
+const {getCustomizationApiPath} = require('./customization.config');
+//
 // This file is read only by react native for IOS & Android. Doesn't apply to electron, Web targets
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
@@ -29,6 +29,6 @@ module.exports = {
         },
       },
     ],
-    'react-native-reanimated/plugin'
+    'react-native-reanimated/plugin',
   ],
 };

package/template/bridge/rtm/web/index.ts

@@ -18,6 +18,7 @@ import {
 } from 'agora-react-native-rtm/lib/typescript/src';
 import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
+import RtmClient from 'agora-react-native-rtm';
 // export {RtmAttribute}
 //
 interface RtmAttributePlaceholder {}
@@ -96,7 +97,14 @@ export default class RtmEngine {
 
   createClient(APP_ID: string) {
     this.appId = APP_ID;
-    this.client = AgoraRTM.createInstance(this.appId);
+    this.client = AgoraRTM.createInstance(this.appId, {
+      logFilter:
+        APPBUILDER_PUBLIC_NODE_ENV === 'production' &&
+        (APPBUILDER_PUBLIC_TARGET === 'rsdk' ||
+          APPBUILDER_PUBLIC_TARGET === 'wsdk')
+          ? AgoraRTM.LOG_FILTER_OFF
+          : AgoraRTM.LOG_FILTER_INFO,
+    });
 
     window.rtmClient = this.client;
 
@@ -175,7 +183,7 @@ export default class RtmEngine {
   }
 
   async logout(): Promise<any> {
-    return this.client.logout();
+    return await this.client.logout();
   }
 
   async joinChannel(channelId: string): Promise<any> {

package/template/global.d.ts

@@ -101,6 +101,16 @@ interface ConfigInterface {
   TOAST_NOTIFICATIONS: boolean;
 }
 declare var $config: ConfigInterface;
+
+declare var APPBUILDER_PUBLIC_NODE_ENV: 'production' | 'development';
+declare var APPBUILDER_PUBLIC_TARGET:
+  | 'rsdk'
+  | 'wsdk'
+  | 'web'
+  | 'windows'
+  | 'linux'
+  | 'mac'
+  | 'android';
 declare module 'customization' {
   const customizationConfig: {};
   export default customizationConfig;

package/template/index.rsdk.tsx

@@ -19,6 +19,7 @@ import SDKAppWrapper, {
 import React from 'react';
 import * as RN from 'react-native-web';
 import './src/assets/font-styles.css';
+import AgoraRTC from 'agora-rtc-sdk-ng';
 
 export * from 'customization-api';
 export * from 'customization-implementation';
@@ -27,6 +28,10 @@ interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
   View: React.FC;
 }
 
+if (APPBUILDER_PUBLIC_NODE_ENV === 'production') {
+  AgoraRTC.setLogLevel(4);
+}
+
 const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
   ...AppBuilderSdkApi,
   View: SDKAppWrapper,

package/template/index.wsdk.tsx

@@ -6,9 +6,14 @@ import SDKAppWrapper, {
 import React from 'react';
 import * as RN from 'react-native-web';
 import './src/assets/font-styles.css';
+import AgoraRTC from 'agora-rtc-sdk-ng';
 export * from 'customization-api';
 export * from 'customization-implementation';
 
+if (APPBUILDER_PUBLIC_NODE_ENV === 'production') {
+  AgoraRTC.setLogLevel(4);
+}
+
 const AppBuilderWebSdkApi: AppBuilderSdkApiInterface = AppBuilderSdkApi;
 
 // init code

package/template/package.json

@@ -116,6 +116,7 @@
     "babel-loader": "8.2.4",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-define": "2.0.1",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "cross-env": "7.0.3",
     "css-loader": "6.7.2",
     "del": "5.1.0",

package/template/src/components/DeviceConfigure.tsx

@@ -374,6 +374,12 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           },
         }[kind];
 
+        // non chrome, ignore speaker
+        if (!isChrome && kind === 'audiooutput') {
+          setUiSelectedSpeaker('');
+          return;
+        }
+
         if (uiSelectedState && uiSelectedState.trim().length != 0) {
           return;
         }
@@ -440,7 +446,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           checkDeviceExists(storedDevice, deviceList)
         ) {
           log(logTag, deviceLogTag, 'Setting to active id', storedDevice);
-          setDevice(storedDevice).catch((e:Error) => {
+          setDevice(storedDevice).catch((e: Error) => {
             log(
               logTag,
               deviceLogTag,
@@ -731,6 +737,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         setSelectedSpeaker,
         deviceList,
         setDeviceList,
+        isChrome,
       }}>
       {props.children}
     </DeviceContext.Provider>

package/template/src/components/DeviceContext.tsx

@@ -20,6 +20,7 @@ interface DeviceContext {
   setSelectedSpeaker: (speaker: string) => Promise<any>;
   deviceList: MediaDeviceInfo[];
   setDeviceList: (devices: MediaDeviceInfo[]) => void;
+  isChrome: boolean;
 }
 
 const DeviceContext = createContext<DeviceContext>({
@@ -31,5 +32,6 @@ const DeviceContext = createContext<DeviceContext>({
   setSelectedMic: async () => {},
   setSelectedSpeaker: async () => {},
   setDeviceList: () => {},
+  isChrome: false,
 });
 export default DeviceContext;

package/template/src/subComponents/SelectDevice.tsx

@@ -251,7 +251,7 @@ interface SelectSpeakerDeviceProps {
 }
 
 const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
-  const {selectedSpeaker, setSelectedSpeaker, deviceList} =
+  const {selectedSpeaker, setSelectedSpeaker, deviceList, isChrome} =
     useContext(DeviceContext);
   const local = useContext(LocalContext);
   const [isPickerDisabled, btnTheme] = useSelectDevice();
@@ -299,7 +299,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
       <Text style={style.label}>Speaker</Text>
       {(local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
         local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY) &&
-      (!data || data.length === 0) ? (
+      (!isChrome || !data || data.length === 0) ? (
         <Dropdown
           icon={props?.isIconDropdown ? 'speaker' : undefined}
           enabled={!isPickerDisabled}

package/template/webpack.commons.js

@@ -16,6 +16,7 @@ competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
  */
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const isDevelopment = process.env.NODE_ENV === 'development';
+const isProduction = process.env.NODE_ENV === 'production';
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const configVars = require('./configTransform');
@@ -34,15 +35,15 @@ module.exports = {
   plugins: [
     // Using html webpack plugin to utilize our index.html
     !isSdk &&
-    new HtmlWebpackPlugin({
-      title: configVars['$config.APP_NAME'],
-      template: isElectron ? 'electron/index.html' : 'web/index.html',
-    }),
+      new HtmlWebpackPlugin({
+        title: configVars['$config.APP_NAME'],
+        template: isElectron ? 'electron/index.html' : 'web/index.html',
+      }),
     isDevelopment &&
-    !isSdk &&
-    new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
+      !isSdk &&
+      new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
   ].filter(Boolean),
   resolve: {
     alias: {
@@ -123,10 +124,18 @@ module.exports = {
             ],
             plugins: [
               // Adds support for class properties
-              ['transform-define', configVars],
+              [
+                'transform-define',
+                {
+                  ...configVars,
+                  APPBUILDER_PUBLIC_NODE_ENV: process.env.NODE_ENV,
+                  APPBUILDER_PUBLIC_TARGET: process.env.TARGET,
+                },
+              ],
               '@babel/plugin-proposal-optional-chaining',
               '@babel/plugin-proposal-class-properties',
               isDevelopment && !isSdk && require.resolve('react-refresh/babel'),
+              isProduction && isSdk && 'transform-remove-console',
             ].filter(Boolean),
           },
         },
@@ -141,9 +150,8 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
       },
-
     ],
   },
 };