agora-appbuilder-core 4.0.35-beta-2 → 4.0.36-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.35-beta-2",
+  "version": "4.0.36-1",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.29",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.0.36",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/agora-rn-uikit/README.md

@@ -1,42 +1,3 @@
 <div style="text-align:center">
-<h1> Agora React Native UIKit</h1>
-<h6>Rapidly integrate video calling into your React Native applications with built in UI Elements.</h6>
+<h1> AppBuilder UIKit - Internal Usage</h1>
 </div>
-
-## Getting started
-
-### Installation
-
-To a react-native application generated using react-native-cli, add the following:
-
-```
-npm i react-native-agora agora-rn-uikit
-```
-
-### Usage
-
-This UIKit is very simple to use and contains a high level component called `AgoraUIKit`.
-
-**A simple sample app integrating Agora UI Kit:**
-```javascript
-import React, { useState } from 'react';
-import AgoraUIKit from 'agora-rn-uikit';
-
-const App = () => {
-  const [videoCall, setVideoCall] = useState(true);
-  const rtcProps = {
-    appId: '<-----App ID here----->',
-    channel: 'test',
-  };
-  const callbacks = {
-    EndCall: () => setVideoCall(false),
-  };
-  return videoCall ? (
-    <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
-  ) : (
-    <></>
-  );
-};
-
-export default App;
-```

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

@@ -185,6 +185,7 @@ export interface CallbacksInterface {
   AddCustomContent(uid: UidType, data: any): void;
   RemoveCustomContent(uid: UidType): void;
   UserPin(Uid: UidType): void;
+  Spotlight(Uid: UidType): void;
   UserSecondaryPin(Uid: UidType): void;
   ActiveSpeaker(Uid: UidType): void;
 }

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

@@ -33,6 +33,7 @@ export interface ContentStateInterface {
   pinnedUid?: UidType;
   secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
+  spotlightUid?: UidType;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

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

@@ -0,0 +1,11 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function Spotlight(
+  state: ContentStateInterface,
+  action: ActionType<'Spotlight'>,
+) {
+  return {
+    ...state,
+    spotlightUid: action?.value && action.value?.length ? action.value[0] : 0,
+  };
+}

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

@@ -11,3 +11,4 @@ export {default as RemoteVideoStateChanged} from './RemoteVideoStateChanged';
 export {default as UserPin} from './UserPin';
 export {default as UserSecondaryPin} from './UserSecondaryPin';
 export {default as ActiveSpeaker} from './ActiveSpeaker';
+export {default as Spotlight} from './Spotlight';

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

@@ -32,6 +32,7 @@ import {
   UserPin,
   UserSecondaryPin,
   ActiveSpeaker,
+  Spotlight,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
@@ -260,6 +261,11 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
           stateUpdate = ActiveSpeaker(state, action);
         }
         break;
+      case 'Spotlight':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = Spotlight(state, action);
+        }
+        break;
     }
 
     // TODO: remove Handle event listeners
@@ -459,6 +465,7 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
                       ? uidState.secondaryPinnedUid
                       : undefined,
                   lastJoinedUid: uidState.lastJoinedUid,
+                  spotlightUid: uidState.spotlightUid,
                 }}>
                 {outerProps.children}
               </ContentProvider>

package/template/customization-api/utils.ts

@@ -49,4 +49,5 @@ export {useFullScreen} from '../src/utils/useFullScreen';
 export {useHideShareTitle} from '../src/utils/useHideShareTile';
 export {useActionSheet} from '../src/utils/useActionSheet';
 export {default as PlatformWrapper} from '../src/utils/PlatformWrapper';
+export {useSpotlight} from '../src/utils/useSpotlight';
 export {useActiveUids} from '../src/utils/useActiveUids';

package/template/defaultConfig.js

@@ -76,11 +76,12 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.35-beta-2',
-  CORE_VERSION: '4.0.35-beta-2',
+  CLI_VERSION: '3.0.36-1',
+  CORE_VERSION: '4.0.36-1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
+  ENABLE_SPOTLIGHT: false,
   AUTO_CONNECT_RTM: false,
 };
 

package/template/global.d.ts

@@ -168,6 +168,7 @@ interface ConfigInterface {
   DISABLE_LANDSCAPE_MODE: boolean;
   STT_AUTO_START: boolean;
   CLOUD_RECORDING_AUTO_START: boolean;
+  ENABLE_SPOTLIGHT: boolean;
   AUTO_CONNECT_RTM: boolean;
 }
 declare var $config: ConfigInterface;

package/template/src/AppRoutes.tsx

@@ -24,16 +24,23 @@ import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
 import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
 import {LogSource, logger} from './logger/AppBuilderLogger';
 import {isValidReactComponent} from './utils/common';
+import ErrorBoundary from './components/ErrorBoundary';
+import {ErrorBoundaryFallback} from './components/ErrorBoundaryFallback';
 
 function VideoCallWrapper(props) {
   const {isRecordingBot} = useIsRecordingBot();
+  const ErrorBoundaryFallbackComponent = <ErrorBoundaryFallback />;
   return isRecordingBot ? (
     <RecordingBotRoute history={props.history}>
-      <VideoCall />
+      <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
+        <VideoCall />
+      </ErrorBoundary>
     </RecordingBotRoute>
   ) : (
     <AuthRoute>
-      <VideoCall />
+      <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
+        <VideoCall />
+      </ErrorBoundary>
     </AuthRoute>
   );
 }

package/template/src/assets/font-styles.css

@@ -24,6 +24,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-spotlight:before {
+  content: '\e9a3';
+  color: #fff;
+}
 .icon-clipboard_outlined:before {
   content: '\e9a2';
 }