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

package/template/src/rtm-events-api/Events.ts

@@ -13,7 +13,12 @@
 ('use strict');
 import {type RTMClient} from 'agora-react-native-rtm';
 import RTMEngine from '../rtm/RTMEngine';
-import {EventUtils} from '../rtm-events';
+import {
+  EventUtils,
+  RTM_EVENT_SCOPE,
+  RTM_GLOBAL_SCOPE_EVENTS,
+  RTM_SESSION_SCOPE_EVENTS,
+} from '../rtm-events';
 import {
   ReceiverUid,
   EventCallback,
@@ -25,6 +30,16 @@ import {adjustUID} from '../rtm/utils';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {nativeChannelTypeMapping} from '../../bridge/rtm/web/Types';
 
+function getRTMEventScope(eventName: string): RTM_EVENT_SCOPE {
+  if (RTM_GLOBAL_SCOPE_EVENTS.includes(eventName)) {
+    return RTM_EVENT_SCOPE.GLOBAL;
+  }
+  if (RTM_SESSION_SCOPE_EVENTS.includes(eventName)) {
+    return RTM_EVENT_SCOPE.SESSION;
+  }
+  return RTM_EVENT_SCOPE.LOCAL;
+}
+
 class Events {
   private source: EventSource = EventSource.core;
 
@@ -41,10 +56,16 @@ class Events {
    * @param {String} payload to be stored in rtm Attribute value
    * @api private
    */
-  private _persist = async (evt: string, payload: string) => {
+  private _persist = async (evt: string, payload: string, roomKey?: string) => {
     const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
     const userId = RTMEngine.getInstance().localUid;
     try {
+      // const roomAwareKey = roomKey ? `${roomKey}__${evt}` : evt;
+      // console.log(
+      //   'session-attributes setting roomAwareKey as: ',
+      //   roomAwareKey,
+      //   evt,
+      // );
       const rtmAttribute = {key: evt, value: payload};
       // Step 1: Call RTM API to update local attributes
       await rtmEngine.storage.setUserMetadata(
@@ -104,11 +125,13 @@ class Events {
    *
    * @param {Object} rtmPayload payload to be sent across
    * @param {ReceiverUid} toUid uid or uids[] of user
+   * @param {string} channelId optional specific channel ID, defaults to primary channel
    * @api private
    */
   private _send = async (
     rtmPayload: RTMAttributePayload,
     toUid?: ReceiverUid,
+    toChannelId?: string,
   ) => {
     const to = typeof toUid === 'string' ? parseInt(toUid, 10) : toUid;
 
@@ -131,16 +154,21 @@ class Events {
         'case 1 executed - sending in channel',
       );
       try {
-        const channelId = RTMEngine.getInstance().channelUid;
-        if (!channelId || channelId.trim() === '') {
+        logger.debug(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'event is sent to targetChannelId ->',
+          toChannelId,
+        );
+        if (!toChannelId || toChannelId.trim() === '') {
           throw new Error(
-            'Channel ID is not set. Cannot send channel attributes.',
+            'Channel ID is not set. Cannot send channel messages.',
           );
         }
-        await rtmEngine.publish(channelId, text, {
+        await rtmEngine.publish(toChannelId, text, {
           channelType: nativeChannelTypeMapping.MESSAGE, // 1 is message
-          customType: 'PlainText',
-          messageType: 1,
+          // customType: 'PlainText',
+          // messageType: RtmMessageType.string,
         });
       } catch (error) {
         logger.error(
@@ -223,7 +251,10 @@ class Events {
     }
   };
 
-  private _sendAsChannelAttribute = async (rtmPayload: RTMAttributePayload) => {
+  private _sendAsChannelAttribute = async (
+    rtmPayload: RTMAttributePayload,
+    toChannelId?: string,
+  ) => {
     // Case 1: send to channel
     logger.debug(
       LogSource.Events,
@@ -237,16 +268,13 @@ class Events {
       }
       const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
 
-      const channelId = RTMEngine.getInstance().channelUid;
-      if (!channelId || channelId.trim() === '') {
-        throw new Error(
-          'Channel ID is not set. Cannot send channel attributes.',
-        );
+      if (!toChannelId) {
+        throw new Error('Channel ID is not set. Cannot send channel messages.');
       }
 
       const rtmAttribute = [{key: rtmPayload.evt, value: rtmPayload.value}];
       await rtmEngine.storage.setChannelMetadata(
-        channelId,
+        toChannelId,
         nativeChannelTypeMapping.MESSAGE,
         {
           items: rtmAttribute,
@@ -351,6 +379,7 @@ class Events {
    * @param {String} payload (optional) Additional data to be sent along with the event.
    * @param {Enum} persistLevel (optional) set different levels of persistance. Default value is Level 1
    * @param {ReceiverUid} receiver (optional) uid or uid array. Default mode sends message in channel.
+   * @param {String} channelId (optional) specific channel to send to, defaults to primary channel.
    * @api public
    * */
   send = async (
@@ -358,6 +387,7 @@ class Events {
     payload: string = '',
     persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
+    toChannelId?: string,
   ) => {
     try {
       if (!this._validateEvt(eventName)) {
@@ -373,12 +403,18 @@ class Events {
       return; // Don't throw - just log and return
     }
 
+    // Add meta data
+    let currentEventScope = getRTMEventScope(eventName);
+    let currentChannelId = RTMEngine.getInstance().getActiveChannelId();
+    let currentRoomKey = RTMEngine.getInstance().getActiveChannelName();
+
     const persistValue = JSON.stringify({
       payload,
       persistLevel,
       source: this.source,
+      _scope: currentEventScope,
+      _channelId: currentChannelId,
     });
-
     const rtmPayload: RTMAttributePayload = {
       evt: eventName,
       value: persistValue,
@@ -389,7 +425,13 @@ class Events {
       persistLevel === PersistanceLevel.Session
     ) {
       try {
-        await this._persist(eventName, persistValue);
+        await this._persist(
+          eventName,
+          persistValue,
+          persistLevel === PersistanceLevel.Session
+            ? currentRoomKey
+            : undefined,
+        );
       } catch (error) {
         logger.error(LogSource.Events, 'CUSTOM_EVENTS', 'persist error', error);
         // don't throw - just log the error, application should continue running
@@ -402,10 +444,11 @@ class Events {
         `sending event -> ${eventName}`,
         persistValue,
       );
+      const targetChannelId = toChannelId || currentChannelId;
       if (persistLevel === PersistanceLevel.Channel) {
-        await this._sendAsChannelAttribute(rtmPayload);
+        await this._sendAsChannelAttribute(rtmPayload, targetChannelId);
       } else {
-        await this._send(rtmPayload, receiver);
+        await this._send(rtmPayload, receiver, targetChannelId);
       }
     } catch (error) {
       logger.error(

package/template/src/subComponents/ChatBubble.tsx

@@ -52,6 +52,7 @@ import {useChatConfigure} from '../../src/components/chat/chatConfigure';
 import Tooltip from '../../src/atoms/Tooltip';
 import {MoreMessageOptions} from './chat/ChatQuickActionsMenu';
 import {EMessageStatus} from '../../src/ai-agent/components/AgentControls/message';
+import {useMainRoomUserDisplayName} from '../rtm/hooks/useMainRoomUserDisplayName';
 
 type AttachmentBubbleProps = {
   fileName: string;
@@ -362,6 +363,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
+  const getDisplayName = useMainRoomUserDisplayName();
 
   const getUsername = () => {
     if (isLocal) {
@@ -370,9 +372,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
     if (remoteUIConfig?.username) {
       return trimText(remoteUIConfig?.username);
     }
-    return defaultContent[uid]?.name
-      ? trimText(defaultContent[uid].name)
-      : remoteUserDefaultLabel;
+    return getDisplayName(uid);
   };
 
   return props?.render ? (

package/template/src/subComponents/ChatContainer.tsx

@@ -27,7 +27,7 @@ import {
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
-import {ChatBubbleProps} from '../components/ChatContext';
+import ChatContext, {ChatBubbleProps} from '../components/ChatContext';
 import {
   DispatchContext,
   ContentInterface,
@@ -59,6 +59,7 @@ import {
 } from '../language/default-labels/videoCallScreenLabels';
 import CommonStyles from '../components/CommonStyles';
 import PinnedMessage from './chat/PinnedMessage';
+import ChatAnnouncementView from './chat/ChatAnnouncementView';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -71,6 +72,7 @@ const ChatContainer = (props?: {
   const info1 = useString<boolean>(groupChatWelcomeContent);
   const [scrollToEnd, setScrollToEnd] = useState(false);
   const {dispatch} = useContext(DispatchContext);
+  const {syncUserState} = useContext(ChatContext);
   const [grpUnreadCount, setGrpUnreadCount] = useState(0);
   const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
   const {defaultContent} = useContent();
@@ -118,16 +120,18 @@ const ChatContainer = (props?: {
       });
       //Once message is seen, reset lastMessageTimeStamp.
       //so whoever has unread count will show in the top of participant list
-      updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
+      // updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
+      syncUserState(privateChatUser, {lastMessageTimeStamp: 0});
     }
   }, [privateChatUser]);
 
-  const updateRenderListState = (
-    uid: number,
-    data: Partial<ContentInterface>,
-  ) => {
-    dispatch({type: 'UpdateRenderList', value: [uid, data]});
-  };
+  // We will be using syncRoomusers
+  // const updateRenderListState = (
+  //   uid: number,
+  //   data: Partial<ContentInterface>,
+  // ) => {
+  //   dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  // };
 
   const onScroll = event => {
     setScrollOffset(event.nativeEvent.contentOffset.y);
@@ -249,7 +253,13 @@ const ChatContainer = (props?: {
                     </Text>
                   </View>
                 ) : null}
-                {!message?.hide ? (
+
+                {message?.announcement ? (
+                  <ChatAnnouncementView
+                    message={message.msg}
+                    announcement={message.announcement}
+                  />
+                ) : !message?.hide ? (
                   <ChatBubbleComponent
                     isLocal={localUid === message.uid}
                     isSameUser={

package/template/src/subComponents/LocalAudioMute.tsx

@@ -85,7 +85,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     local.permissionStatus === PermissionState.REJECTED ||
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
-  const onPress = () => {
+  const onPress = async () => {
     logger.log(
       LogSource.Internals,
       'LOCAL_MUTE',
@@ -95,7 +95,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
         permissionDenied,
       },
     );
-    localMute(MUTE_LOCAL_TYPE.audio);
+    await localMute(MUTE_LOCAL_TYPE.audio);
   };
   const audioLabel = permissionDenied
     ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)

package/template/src/subComponents/LocalVideoMute.tsx

@@ -79,7 +79,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   );
 
   const lstooltip = useString<boolean>(livestreamingCameraTooltipText);
-  const onPress = () => {
+  const onPress = async () => {
     //if screensharing is going on native - to turn on video screenshare should be turn off
     //show confirm popup to stop the screenshare
     logger.log(
@@ -91,7 +91,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
         permissionDenied,
       },
     );
-    localMute(MUTE_LOCAL_TYPE.video);
+    await localMute(MUTE_LOCAL_TYPE.video);
   };
   const isVideoEnabled = local.video === ToggleState.enabled;
 

package/template/src/subComponents/SidePanelEnum.tsx

@@ -16,4 +16,5 @@ export enum SidePanelType {
   Settings = 'Settings',
   Transcript = 'Transcript',
   VirtualBackground = 'VirtualBackground',
+  BreakoutRoom = 'BreakoutRoom',
 }

package/template/src/subComponents/caption/useCaption.tsx

@@ -72,7 +72,7 @@ export const CaptionContext = React.createContext<{
 });
 
 interface CaptionProviderProps {
-  callActive: boolean;
+  callActive?: boolean;
   children: React.ReactNode;
 }
 

package/template/src/subComponents/chat/ChatAnnouncementView.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import ImageIcon from '../../atoms/ImageIcon';
+import ThemeConfig from '../../theme';
+import {AnnouncementMessage} from '../../components/chat-messages/useChatMessages';
+
+export default function ChatAnnouncementView({
+  message,
+  announcement,
+}: {
+  message: string;
+  announcement: AnnouncementMessage;
+}) {
+  return (
+    <View style={style.announcementView}>
+      <ImageIcon
+        iconSize={20}
+        iconType="plain"
+        name="announcement"
+        tintColor={'#099DFD'}
+      />
+      <View style={style.announcementMessage}>
+        <Text style={style.announcementMessageHeader}>
+          Message from host: {announcement.sender}
+        </Text>
+        <Text style={style.announcementMessageBody}>{message}</Text>
+      </View>
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  announcementView: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    marginRight: 12,
+    marginLeft: 12,
+    marginBottom: 4,
+    marginTop: 16,
+    gap: 6,
+  },
+  announcementMessage: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+  },
+  announcementMessageHeader: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontStyle: 'normal',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: '#099DFD',
+    fontWeight: '700',
+    lineHeight: 14,
+  },
+  announcementMessageBody: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontStyle: 'italic',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: '#099DFD',
+    fontWeight: '400',
+    lineHeight: 14,
+  },
+});

package/template/src/subComponents/chat/ChatSendButton.tsx

@@ -71,6 +71,7 @@ export const handleChatSend = ({
     return;
   }
 
+  // Text message sent update sender side ui
   const sendTextMessage = () => {
     const option = {
       chatType: selectedUserId

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -25,6 +25,7 @@ import {
   toolbarItemShareText,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {useToolbarProps} from '../../atoms/ToolbarItem';
+import {useBreakoutRoom} from '../../components/breakout-room/context/BreakoutRoomContext';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -53,6 +54,11 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   const {setShowStartScreenSharePopup} = useVideoCall();
   const screenShareButtonLabel = useString<boolean>(toolbarItemShareText);
   const lstooltip = useString<boolean>(livestreamingShareTooltipText);
+  const {permissions} = useBreakoutRoom();
+  // In the main room (default case), permissions come from the main room state.
+  // If the user is in a breakout room, retrieve permissions from the breakout room instead.
+  const canScreenshareInBreakoutRoom = permissions.canScreenshare;
+
   const onPress = () => {
     if (isScreenshareActive) {
       stopScreenshare();
@@ -105,6 +111,16 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
     iconButtonProps.disabled = true;
   }
 
+  if (!canScreenshareInBreakoutRoom) {
+    iconButtonProps.iconProps = {
+      ...iconButtonProps.iconProps,
+      tintColor: $config.SEMANTIC_NEUTRAL,
+      showWarningIcon: true,
+    };
+    iconButtonProps.toolTipMessage = 'cannot screenshare';
+    iconButtonProps.disabled = true;
+  }
+
   return props?.render ? (
     props.render(onPress, isScreenshareActive)
   ) : isToolbarMenuItem ? (

package/template/src/subComponents/screenshare/ScreenshareConfigure.native.tsx

@@ -319,7 +319,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           'Trying to start native screenshare',
         );
         if (video) {
-          localMute(MUTE_LOCAL_TYPE.video);
+          await localMute(MUTE_LOCAL_TYPE.video);
         }
         try {
           await engine.current.startScreenCapture({

package/template/src/subComponents/waiting-rooms/WaitingRoomControls.tsx

@@ -14,12 +14,14 @@ import {
   peoplePanelWaitingRoomRequestApprovalBtnTxt,
   peoplePanelWaitingRoomRequestDenyBtnTxt,
 } from '../../../src/language/default-labels/videoCallScreenLabels';
+import ChatContext from '../../components/ChatContext';
 
 const WaitingRoomButton = props => {
   const {uid, screenUid, isAccept} = props;
   const {approval} = useWaitingRoomAPI();
   const localUid = useLocalUid();
   const {dispatch} = useContext(DispatchContext);
+  const {syncUserState} = useContext(ChatContext);
   const {waitingRoomRef} = useWaitingRoomContext();
   const admintext = useString(peoplePanelWaitingRoomRequestApprovalBtnTxt)();
   const denytext = useString(peoplePanelWaitingRoomRequestDenyBtnTxt)();
@@ -40,10 +42,11 @@ const WaitingRoomButton = props => {
       Toast.hide();
     }
 
-    dispatch({
-      type: 'UpdateRenderList',
-      value: [uid, {isInWaitingRoom: false}],
-    });
+    //  dispatch({
+    //   type: 'UpdateRenderList',
+    //   value: [uid, {isInWaitingRoom: false}],
+    // });
+    syncUserState(uid, {isInWaitingRoom: false});
 
     if (waitingRoomRef.current) {
       waitingRoomRef.current[uid] = approved ? 'APPROVED' : 'REJECTED';

package/template/src/utils/useDebouncedCallback.tsx

@@ -0,0 +1,20 @@
+import {useRef, useCallback} from 'react';
+
+export function useDebouncedCallback<T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const debounced = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => fn(...args), delay);
+    },
+    [fn, delay],
+  );
+
+  return debounced;
+}

package/template/src/utils/useEndCall.ts

@@ -9,7 +9,6 @@ import {
 import {PropsContext, DispatchContext} from '../../agora-rn-uikit';
 import {useHistory} from '../components/Router';
 import {stopForegroundService} from '../subComponents/LocalEndCall';
-import RTMEngine from '../rtm/RTMEngine';
 import {ENABLE_AUTH} from '../auth/config';
 import {useAuth} from '../auth/AuthProvider';
 import {useChatConfigure} from '../components/chat/chatConfigure';
@@ -69,7 +68,6 @@ const useEndCall = () => {
     if ($config.CHAT) {
       deleteChatUser();
     }
-    RTMEngine.getInstance().engine.unsubscribe(rtcProps.channel);
     if (!ENABLE_AUTH) {
       // await authLogout();
       await authLogin();

package/template/src/utils/useMuteToggleLocal.ts

@@ -86,14 +86,16 @@ function useMuteToggleLocal() {
                   );
 
               // Enable UI
+              const newAudioState =
+                localAudioState === ToggleState.enabled
+                  ? ToggleState.disabled
+                  : ToggleState.enabled;
+
               dispatch({
                 type: 'LocalMuteAudio',
-                value: [
-                  localAudioState === ToggleState.enabled
-                    ? ToggleState.disabled
-                    : ToggleState.enabled,
-                ],
+                value: [newAudioState],
               });
+
               handleQueue();
             } catch (e) {
               dispatch({
@@ -152,14 +154,16 @@ function useMuteToggleLocal() {
                 );
               }
               // Enable UI
+              const newVideoState =
+                localVideoState === ToggleState.enabled
+                  ? ToggleState.disabled
+                  : ToggleState.enabled;
+
               dispatch({
                 type: 'LocalMuteVideo',
-                value: [
-                  localVideoState === ToggleState.enabled
-                    ? ToggleState.disabled
-                    : ToggleState.enabled,
-                ],
+                value: [newVideoState],
               });
+
               handleQueue();
             } catch (e) {
               dispatch({

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

@@ -1,11 +0,0 @@
-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/UserBanned.ts

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