agora-appbuilder-core 4.1.9 → 4.1.10-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.9",
+  "version": "4.1.10-beta.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/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.1.8",
+    "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.1.10",
     "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/src/Contexts/PropsContext.tsx

@@ -142,7 +142,7 @@ export interface RtcPropsInterface {
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode: EncryptionMode.Aes128Xts | EncryptionMode.Aes256Gcm2;
+    mode: EncryptionMode.Aes128Gcm2 | EncryptionMode.Aes256Gcm2;
     salt: number[];
   };
   // commented for v1 release
@@ -185,10 +185,8 @@ 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;
-  UserBanned(isBanned: boolean): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;

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

@@ -33,8 +33,6 @@ export interface ContentStateInterface {
   pinnedUid?: UidType;
   secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
-  spotlightUid?: UidType;
-  isUserBaned?: boolean;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {
@@ -47,6 +45,7 @@ export type ActionType<T extends keyof CallbacksInterface> = ActionInterface<T>;
 export interface RtcContextInterface {
   RtcEngineUnsafe: IRtcEngine;
   setDualStreamMode: React.Dispatch<React.SetStateAction<DualStreamMode>>;
+  rtcTracksReady: boolean;
 }
 
 const RtcContext = React.createContext<RtcContextInterface>(

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

@@ -11,5 +11,3 @@ 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';
-export {default as UserBanned} from './UserBanned';

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

@@ -51,27 +51,18 @@ const Join: React.FC<{
     const videoState = defaultContent[maxUid]?.video;
     async function join() {
       if (
-      //  rtcProps?.encryption &&
-     //   rtcProps?.encryption.key &&
-        rtcProps?.encryption?.mode
-     //   rtcProps.encryption.salt
+        rtcProps?.encryption &&
+        rtcProps?.encryption.key &&
+        rtcProps.encryption.mode &&
+        rtcProps.encryption.salt
       ) {
         try {
-          console.log(
-            'ui kit setting encryption mode to ',
-            rtcProps?.encryption?.mode,
-          );
-          const encryptionConfig = {
-            encryptionKey: rtcProps?.encryption?.key,
-            encryptionMode: rtcProps?.encryption?.mode,
+          await engine.enableEncryption(true, {
+            encryptionKey: rtcProps?.encryption.key,
+            encryptionMode: rtcProps?.encryption.mode,
+            encryptionKdfSalt: rtcProps?.encryption.salt,
             datastreamEncryptionEnabled: true,
-            ...(rtcProps?.encryption?.mode == 1
-              ? {}
-              : {
-                  encryptionKdfSalt: rtcProps?.encryption?.salt,
-                }),
-          };
-          await engine.enableEncryption(true, encryptionConfig);
+          });
         } catch (error) {
           console.warn('encryption error', error);
         }
@@ -106,13 +97,8 @@ const Join: React.FC<{
           rtcProps?.uid || 0,
           {},
         );
-      } catch (error: any) {
-        console.error('RTC joinChannel error ', error);
-        if (
-          error?.code === 'UID_BANNED' ||
-          error?.message?.includes('UID_BANNED')
-        )
-          dispatch({type: 'UserBanned', value: [true]});
+      } catch (error) {
+        console.error('RTC joinChannel error', error);
       }
       if (
         !audioRoom &&

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

@@ -32,8 +32,6 @@ import {
   UserPin,
   UserSecondaryPin,
   ActiveSpeaker,
-  Spotlight,
-  UserBanned,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
@@ -262,16 +260,6 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
           stateUpdate = ActiveSpeaker(state, action);
         }
         break;
-      case 'Spotlight':
-        if (actionTypeGuard(action, action.type)) {
-          stateUpdate = Spotlight(state, action);
-        }
-        break;
-      case 'UserBanned':
-        if (actionTypeGuard(action, action.type)) {
-          stateUpdate = UserBanned(state, action);
-        }
-        break;
     }
 
     // TODO: remove Handle event listeners
@@ -437,6 +425,7 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
               value={{
                 RtcEngineUnsafe: engineRef.current,
                 setDualStreamMode,
+                rtcTracksReady: tracksReady,
               }}>
               <ContentProvider
                 value={{
@@ -471,8 +460,6 @@ const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
                       ? uidState.secondaryPinnedUid
                       : undefined,
                   lastJoinedUid: uidState.lastJoinedUid,
-                  spotlightUid: uidState.spotlightUid,
-                  isUserBaned: uidState.isUserBaned,
                 }}>
                 {outerProps.children}
               </ContentProvider>

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

@@ -1466,13 +1466,13 @@ export default class RtcEngine {
         this.client.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionMode === 1? null:config.encryptionKdfSalt,
+          config.encryptionMode === 1 ? null : config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
         this.screenClient.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionMode === 1? null:config.encryptionKdfSalt,
+          config.encryptionMode === 1 ? null : config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
       ]);

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

@@ -9,6 +9,8 @@ import {
   type GetUserMetadataResponse as NativeGetUserMetadataResponse,
   type GetChannelMetadataResponse as NativeGetChannelMetadataResponse,
   type SetOrUpdateUserMetadataOptions as NativeSetOrUpdateUserMetadataOptions,
+  type RemoveUserMetadataOptions as NativeRemoveUserMetadataOptions,
+  type RemoveUserMetadataResponse as NativeRemoveUserMetadataResponse,
   type IMetadataOptions as NativeIMetadataOptions,
   type StorageEvent as NativeStorageEvent,
   type PresenceEvent as NativePresenceEvent,
@@ -23,6 +25,7 @@ import AgoraRTM, {
   PublishOptions,
   ChannelType,
   MetaDataDetail,
+  RemoveUserMetadataOptions,
 } from 'agora-rtm-sdk';
 import {
   linkStatusReasonCodeMapping,
@@ -221,6 +224,33 @@ export class RTMWebClient {
         return nativeResponse;
       },
 
+      removeUserMetadata: async (
+        options?: NativeRemoveUserMetadataOptions,
+      ): Promise<NativeRemoveUserMetadataResponse> => {
+        // Build the options object for the web SDK call
+        const webOptions: RemoveUserMetadataOptions = {};
+
+        // Add userId if provided (for removing another user's metadata, defaults to self if not provided)
+        if (options?.userId && typeof options.userId === 'string') {
+          webOptions.userId = options.userId;
+        }
+
+        // Convert native Metadata to web MetadataItem[] format if provided
+        if (
+          options?.data &&
+          options.data.items &&
+          Array.isArray(options.data.items) &&
+          options.data.items.length > 0
+        ) {
+          webOptions.data = options.data.items.map(item => ({
+            key: item.key,
+            value: item.value || '', // Require not used for remove.we use keys
+          }));
+        }
+
+        return await this.client.storage.removeUserMetadata(webOptions);
+      },
+
       setChannelMetadata: async (
         channelName: string,
         channelType: NativeRtmChannelType,

package/template/customization-api/typeDefinition.ts

@@ -86,6 +86,7 @@ export interface VideoCallInterface extends BeforeAndAfterInterface {
   captionPanel?: React.ComponentType;
   transcriptPanel?: React.ComponentType;
   virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
+  breakoutRoomPanel?: React.ComponentType;
   customLayout?: (layouts: LayoutItem[]) => LayoutItem[];
   wrapper?: React.ComponentType;
   customAgentInterface?: React.ComponentType<CustomAgentInterfaceProps>;

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.9',
-  CORE_VERSION: '4.1.9',
+  CLI_VERSION: '3.1.10-beta.1',
+  CORE_VERSION: '4.1.10-beta.1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
@@ -91,6 +91,7 @@ const DefaultConfig = {
   ENABLE_WAITING_ROOM_AUTO_APPROVAL: false,
   ENABLE_WAITING_ROOM_AUTO_REQUEST: false,
   ENABLE_TEXT_TRACKS: false,
+  ENABLE_BREAKOUT_ROOM: false,
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -178,6 +178,7 @@ interface ConfigInterface {
   ENABLE_WAITING_ROOM_AUTO_APPROVAL: boolean;
   ENABLE_WAITING_ROOM_AUTO_REQUEST: boolean;
   ENABLE_TEXT_TRACKS: boolean;
+  ENABLE_BREAKOUT_ROOM: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/src/AppRoutes.tsx

@@ -11,7 +11,6 @@
 */
 import React from 'react';
 import Join from './pages/Join';
-import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
 import {Route, Switch, Redirect} from './components/Router';
 import AuthRoute from './auth/AuthRoute';
@@ -25,6 +24,7 @@ import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
 import {isValidReactComponent} from './utils/common';
 import ErrorBoundary from './components/ErrorBoundary';
 import {ErrorBoundaryFallback} from './components/ErrorBoundaryFallback';
+import VideoCallStateWrapper from './pages/video-call/VideoCallStateWrapper';
 
 function VideoCallWrapper(props) {
   const {isRecordingBot} = useIsRecordingBot();
@@ -32,13 +32,13 @@ function VideoCallWrapper(props) {
   return isRecordingBot ? (
     <RecordingBotRoute history={props.history}>
       <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
-        <VideoCall />
+        <VideoCallStateWrapper />
       </ErrorBoundary>
     </RecordingBotRoute>
   ) : (
     <AuthRoute>
       <ErrorBoundary fallback={ErrorBoundaryFallbackComponent}>
-        <VideoCall />
+        <VideoCallStateWrapper />
       </ErrorBoundary>
     </AuthRoute>
   );

package/template/src/ai-agent/components/ControlButtons.tsx

@@ -31,7 +31,7 @@ export const MicButton = () => {
         borderRadius: 50,
         marginHorizontal: 8,
       }}
-      onPress={() => muteToggle(MUTE_LOCAL_TYPE.audio)}>
+      onPress={async () => await muteToggle(MUTE_LOCAL_TYPE.audio)}>
       <Image
         style={[styles.iconStyle, {tintColor: $config.FONT_COLOR}]}
         source={audio ? MicOnIcon : MicOffIcon}

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

@@ -24,6 +24,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-raise-hand-fill:before {
+  content: '\e9ac';
+  color: #ffab00;
+}
+.icon-open-room:before {
+  content: '\e9ab';
+  color: #fff;
+}
+.icon-people-assigned:before {
+  content: '\e9a4';
+  color: #e8eaed;
+}
+.icon-double-up-arrow:before {
+  content: '\e9a5';
+  color: #fff;
+}
+.icon-move-up:before {
+  content: '\e9a6';
+  color: #fff;
+}
+.icon-close-room:before {
+  content: '\e9a7';
+  color: #fff;
+}
+.icon-announcement:before {
+  content: '\e9a8';
+  color: #fff;
+}
+.icon-settings-outlined:before {
+  content: '\e9a9';
+  color: #fff;
+}
+.icon-breakout-room:before {
+  content: '\e9aa';
+  color: #d9d9d9;
+}
 .icon-spotlight:before {
   content: '\e9a3';
   color: #fff;