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

package/template/src/rtm/RTMStatusBanner.tsx

@@ -1,99 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import {useRTMCore} from './RTMCoreProvider';
-import {nativeLinkStateMapping} from '../../bridge/rtm/web/Types';
-
-export const RTMStatusBanner = () => {
-  const {connectionState, error, isLoggedIn} = useRTMCore();
-
-  // internal debounced copy of the state to prevent flicker
-  const [visibleState, setVisibleState] = useState(connectionState);
-  const [visibleError, setVisibleError] = useState(error);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setVisibleState(connectionState);
-      setVisibleError(error);
-    }, 700); // debounce 700 ms
-    return () => clearTimeout(timeout);
-  }, [connectionState, error]);
-
-  // Don't show banner if connected and logged in with no errors
-  if (
-    visibleState === nativeLinkStateMapping.CONNECTED &&
-    isLoggedIn &&
-    !visibleError
-  ) {
-    return null;
-  }
-
-  let message = '';
-  let isError = false;
-
-  if (visibleError || visibleState === nativeLinkStateMapping.FAILED) {
-    // Login failed - critical error
-    message =
-      'RTM connection failed. App might not work correctly. Retrying...';
-    isError = true;
-  } else if (visibleState === nativeLinkStateMapping.DISCONNECTED) {
-    // RTM disconnected in the middle of the call - retrying
-    message = 'RTM disconnected — retrying connection...';
-    isError = false;
-  } else if (
-    visibleState === nativeLinkStateMapping.IDLE ||
-    visibleState === nativeLinkStateMapping.CONNECTING
-  ) {
-    // RTM is idle or connecting
-    message = 'RTM connecting...';
-    isError = false;
-  } else if (!isLoggedIn) {
-    // Not logged in but no explicit error yet
-    message = 'RTM connecting...';
-    isError = false;
-  }
-
-  // Don't render banner if there's no message to show
-  if (!message) {
-    return null;
-  }
-
-  return (
-    <View style={[styles.banner, isError ? styles.error : styles.warning]}>
-      <Text
-        style={[styles.text, isError ? styles.errorText : styles.warningText]}>
-        {message}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  banner: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    zIndex: 9999,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  error: {
-    backgroundColor: '#f8d7da',
-  },
-  warning: {
-    backgroundColor: '#fff3cd',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: '500',
-    textAlign: 'center',
-  },
-  errorText: {
-    color: '#721c24',
-  },
-  warningText: {
-    color: '#856404',
-  },
-});

package/template/src/rtm/constants.ts

@@ -1,12 +0,0 @@
-import {EventNames} from '../rtm-events';
-
-export enum RTM_ROOMS {
-  BREAKOUT = 'BREAKOUT',
-  MAIN = 'MAIN',
-}
-
-// RTM attributes to reset when room changes
-export const RTM_EVENTS_ATTRIBUTES_TO_RESET_WHEN_ROOM_CHANGES = [
-  EventNames.RAISED_ATTRIBUTE, // (livestream)
-  EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE, // Breakout room raise hand ( will be made into independent)
-] as const;

package/template/src/rtm/hooks/useMainRoomUserDisplayName.ts

@@ -1,45 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the "Materials") are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.'s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-
-import {useCallback} from 'react';
-import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
-import {useString} from '../../utils/useString';
-import {UidType} from '../../../agora-rn-uikit';
-import {useRTMGlobalState} from '../RTMGlobalStateProvider';
-import {useContent} from 'customization-api';
-
-/**
- * Hook to get user display names with fallback to main room RTM users
- * This ensures users in breakout rooms can see names of users in other rooms
- */
-export const useMainRoomUserDisplayName = () => {
-  const {mainRoomRTMUsers} = useRTMGlobalState();
-  const {defaultContent} = useContent();
-  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
-
-  const sanitize = (name?: string) => name?.trim() || undefined;
-
-  /**
-   * useCallback ensures the returned function updates whenever
-   * defaultContent or mainRoomRTMUsers change
-   */
-  return useCallback(
-    (uid: UidType): string => {
-      return (
-        sanitize(defaultContent?.[uid]?.name) ||
-        sanitize(mainRoomRTMUsers?.[uid]?.name) ||
-        remoteUserDefaultLabel
-      );
-    },
-    [defaultContent, mainRoomRTMUsers, remoteUserDefaultLabel],
-  );
-};

package/template/src/rtm/rtm-presence-utils.ts

@@ -1,344 +0,0 @@
-import React from 'react';
-import {backOff} from 'exponential-backoff';
-import {LogSource, logger} from '../logger/AppBuilderLogger';
-import {
-  type GetUserMetadataResponse as NativeGetUserMetadataResponse,
-  type GetOnlineUsersResponse as NativeGetOnlineUsersResponse,
-  type GetChannelMetadataResponse,
-  type RTMClient,
-  type UserState,
-  type MetadataItem,
-} from 'agora-react-native-rtm';
-import {RTMUserData} from './RTMGlobalStateProvider';
-import {RECORDING_BOT_UID} from '../utils/constants';
-import {hasJsonStructure} from '../rtm/utils';
-import {nativeChannelTypeMapping} from '../../bridge/rtm/web/Types';
-
-export const fetchOnlineMembersWithRetries = async (
-  client: RTMClient,
-  channelName: string,
-  {
-    onPage, // 👈 callback so caller can process each page as soon as it's ready
-  }: {
-    onPage?: (page: {
-      occupants: UserState[];
-      total: number;
-      pageToken?: string;
-    }) => void | Promise<void>;
-  } = {},
-) => {
-  let allMembers: any[] = [];
-  let nextPage: string | undefined;
-  let totalOccupancy = 0;
-
-  const fetchPage = async (pageNumber?: string) => {
-    return backOff(
-      async () => {
-        const result: NativeGetOnlineUsersResponse =
-          await client.presence.getOnlineUsers(
-            channelName,
-            nativeChannelTypeMapping.MESSAGE,
-            {page: pageNumber}, // cursor for pagination
-          );
-        return result;
-      },
-      {
-        numOfAttempts: 3,
-        retry: (e, attempt) => {
-          console.warn(
-            `[RTM] Page fetch failed (attempt ${attempt}/3). Retrying…`,
-            e,
-          );
-          return attempt < 3; // 👈 stop retrying after 3rd attempt
-        },
-      },
-    );
-  };
-
-  do {
-    try {
-      const result = await fetchPage(nextPage);
-      const {totalOccupancy: total, occupants, nextPage: next} = result;
-      if (occupants) {
-        allMembers = allMembers.concat(occupants);
-        // process this page immediately
-        await onPage?.({occupants, total, pageToken: nextPage});
-      }
-      totalOccupancy = total;
-      nextPage = next;
-      console.log(
-        `[RTM] Fetched ${allMembers.length}/${totalOccupancy} users, nextPage=${nextPage}`,
-      );
-    } catch (fetchPageError) {
-      console.error(`[RTM] Page ${nextPage || 'first'} failed`, fetchPageError);
-      // 👉 Skip to next page if this one keeps failing
-      nextPage = undefined;
-    }
-  } while (nextPage && nextPage.trim() !== '');
-
-  return {allMembers, totalOccupancy};
-};
-
-export const fetchUserAttributesWithRetries = async (
-  client: RTMClient,
-  userId: string,
-  opts?: {
-    isMounted?: () => boolean; // <-- injected check
-    onNameFound?: (attr: NativeGetUserMetadataResponse) => void;
-  },
-): Promise<NativeGetUserMetadataResponse> => {
-  return backOff(
-    async () => {
-      console.log(
-        'rudra-core-client: RTM fetching getUserMetadata for member',
-        userId,
-      );
-
-      // Fetch attributes
-      const attr: NativeGetUserMetadataResponse =
-        await client.storage.getUserMetadata({userId});
-      console.log('[user attributes', attr);
-
-      // 1. Check if attributes exist
-      if (!attr || !attr.items || attr.items.length === 0) {
-        console.log('rudra-core-client: RTM attributes for member not found');
-        throw new Error('No attribute items found');
-      }
-      console.log('sup-attribute-check user-attributes', attr);
-
-      // 2. Partial update allowed (screenUid, isHost, etc.)
-      const hasAny = attr.items.some(i => i.value);
-      if (!hasAny) {
-        throw new Error('No usable user-attributes yet');
-      }
-      console.log('sup-attribute-check user-attributes hasAny', hasAny);
-
-      // 3. If name exists, return immediately
-      const hasNameAttribute = attr.items.find(
-        i => i.key === 'name' && i.value,
-      );
-      console.log('sup-attribute-check user-attributes name', hasNameAttribute);
-      if (hasNameAttribute) {
-        return attr;
-      }
-      // 4. Background retry for name only
-      (async () => {
-        await backOff(
-          async () => {
-            // 🔒 Stop if unmounted
-            if (opts?.isMounted && !opts?.isMounted) {
-              throw new Error(`Component unmounted while retrying ${userId}`);
-            }
-            console.log(
-              'sup-attribute-check user-attributes inside name backoff',
-            );
-
-            const retriedAttributes: NativeGetUserMetadataResponse =
-              await client.storage.getUserMetadata({userId});
-            console.log(
-              'sup-attribute-check user-attributes retriedAttributes',
-              retriedAttributes,
-            );
-
-            const hasNameAttributeRetry = retriedAttributes.items.find(
-              i => i.key === 'name' && i.value,
-            );
-            console.log(
-              'sup-attribute-check user-attributes hasNameAttributeRetry',
-              hasNameAttributeRetry,
-            );
-
-            if (!hasNameAttributeRetry) {
-              throw new Error('user-attributes Name still not found');
-            }
-
-            if (opts?.isMounted) {
-              console.log(
-                'sup-attribute-check user-attributes onNameFound',
-                retriedAttributes,
-              );
-              opts?.onNameFound?.(retriedAttributes);
-            }
-            return retriedAttributes;
-          },
-          {
-            retry: () => true,
-            maxDelay: Infinity, // No maximum delay limit for name
-            numOfAttempts: Infinity, // Infinite attempts for name
-          },
-        ).catch(() => {
-          console.log(
-            `Name not found for ${userId} within 30s, giving up further retries`,
-          );
-        });
-      })();
-
-      return attr;
-    },
-    {
-      retry: (e, idx) => {
-        logger.debug(
-          LogSource.AgoraSDK,
-          'Log',
-          `[retrying] Attempt ${idx}. Fetching ${userId}'s name`,
-          e,
-        );
-        return true;
-      },
-    },
-  );
-};
-
-export const mapUserAttributesToState = (
-  attr: NativeGetUserMetadataResponse,
-  userId: string,
-  updateFn: (uid: number, userData: Partial<RTMUserData>) => void,
-) => {
-  try {
-    const uid = parseInt(userId, 10);
-    const screenUidItem = attr?.items?.find(item => item.key === 'screenUid');
-    const isHostItem = attr?.items?.find(item => item.key === 'isHost');
-    const nameItem = attr?.items?.find(item => item.key === 'name');
-    const screenUid = screenUidItem?.value
-      ? parseInt(screenUidItem.value, 10)
-      : undefined;
-
-    let userName = '';
-    if (nameItem?.value) {
-      try {
-        const parsedValue = JSON.parse(nameItem.value);
-        const payloadString = parsedValue.payload;
-        if (payloadString) {
-          const payload = JSON.parse(payloadString);
-          userName = payload.name;
-        }
-      } catch {
-        // ignore parse errors
-      }
-    }
-
-    // --- Update main user RTM data
-    const userData: RTMUserData = {
-      uid,
-      type: uid === parseInt(RECORDING_BOT_UID, 10) ? 'bot' : 'rtc',
-      screenUid,
-      name: userName,
-      offline: false,
-      isHost: isHostItem?.value || 'false',
-      lastMessageTimeStamp: 0,
-    };
-
-    updateFn(uid, userData);
-
-    // --- Update screenshare RTM data if present
-    if (screenUid) {
-      const screenShareData: RTMUserData = {
-        type: 'screenshare',
-        parentUid: uid,
-      };
-      updateFn(screenUid, screenShareData);
-    }
-  } catch (e) {
-    console.log('RTM Failed to process user data for', userId, e);
-  }
-};
-
-export const fetchChannelAttributesWithRetries = async (
-  client: RTMClient,
-  channelName: string,
-  updateFn?: (eventData: {data: any; uid: string; ts: number}) => void,
-) => {
-  try {
-    await client.storage
-      .getChannelMetadata(channelName, nativeChannelTypeMapping.MESSAGE)
-      .then(async (data: GetChannelMetadataResponse) => {
-        for (const item of data.items) {
-          try {
-            const {key, value, authorUserId, updateTs} = item;
-            if (hasJsonStructure(value as string)) {
-              const evtData = {
-                evt: key,
-                value,
-              };
-              updateFn?.({
-                data: evtData,
-                uid: authorUserId,
-                ts: updateTs,
-              });
-            }
-          } catch (error) {
-            logger.error(
-              LogSource.AgoraSDK,
-              'Log',
-              `RTM Failed to process channel attribute item: ${JSON.stringify(
-                item,
-              )}`,
-              {error},
-            );
-          }
-        }
-      });
-  } catch (error) {}
-};
-
-export const clearRoomScopedUserAttributes = async (
-  client: RTMClient,
-  attributeKeys: readonly string[],
-) => {
-  try {
-    await client?.storage.removeUserMetadata({
-      data: {
-        items: attributeKeys.map(key => ({
-          key,
-          value: '',
-        })),
-      },
-    });
-  } catch (error) {
-    logger.error(
-      LogSource.AgoraSDK,
-      'RTMConfigure',
-      'Failed to clear room-scoped attributes',
-      {error},
-    );
-  }
-};
-
-export const processUserAttributeForQueue = (
-  item: MetadataItem,
-  userId: string,
-  currentRoomKey: string,
-  onProcessedEvent: (eventKey: string, value: string, userId: string) => void,
-) => {
-  try {
-    if (hasJsonStructure(item.value as string)) {
-      let eventKey = item.key;
-      try {
-        // const parsedValue = JSON.parse(item.value);
-        // if (parsedValue.persistLevel === PersistanceLevel.Session) {
-        //   const strippedKey = stripRoomPrefixFromEventKey(
-        //     item.key,
-        //     currentRoomKey,
-        //   );
-        //   if (strippedKey === null) {
-        //     console.log(
-        //       'Skipping SESSION attribute for different room:',
-        //       item.key,
-        //     );
-        //     return;
-        //   }
-        //   eventKey = strippedKey;
-        // }
-
-        onProcessedEvent(eventKey, item.value, userId);
-      } catch (e) {}
-    }
-  } catch (error) {
-    logger.error(
-      LogSource.AgoraSDK,
-      'Log',
-      'RTM Failed to process user attribute item',
-      {error},
-    );
-  }
-};

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

@@ -1,65 +0,0 @@
-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/utils/useDebouncedCallback.tsx

@@ -1,20 +0,0 @@
-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;
-}