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

package/template/src/components/breakout-room/ui/BreakoutRoomMainRoomUsers.tsx

@@ -1,142 +0,0 @@
-import React, {useMemo} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import {useRTMGlobalState} from '../../../rtm/RTMGlobalStateProvider';
-import ThemeConfig from '../../../theme';
-import {useBreakoutRoom} from '../context/BreakoutRoomContext';
-import UserAvatar from '../../../atoms/UserAvatar';
-import Tooltip from '../../../atoms/Tooltip';
-import {useString} from '../../../utils/useString';
-import {videoRoomUserFallbackText} from '../../../language/default-labels/videoCallScreenLabels';
-
-interface MainRoomUser {
-  uid: number;
-  name: string;
-}
-
-const BreakoutRoomMainRoomUsers = ({scrollOffset}) => {
-  const {mainRoomRTMUsers} = useRTMGlobalState();
-  const {breakoutGroups, breakoutRoomVersion} = useBreakoutRoom();
-  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
-
-  // Get all assigned users from breakout rooms
-  const assignedUserUids = useMemo(() => {
-    const assigned = new Set<number>();
-    breakoutGroups.forEach(group => {
-      group.participants.hosts.forEach(uid => assigned.add(uid));
-      group.participants.attendees.forEach(uid => assigned.add(uid));
-    });
-    return assigned;
-  }, [breakoutRoomVersion]);
-
-  // Filter main room users to only show those not assigned to breakout rooms
-  const mainRoomOnlyUsers = useMemo(() => {
-    const users: MainRoomUser[] = [];
-
-    Object.entries(mainRoomRTMUsers).forEach(([uidStr, userData]) => {
-      const uid = parseInt(uidStr, 10);
-
-      // Skip if user is assigned to a breakout room
-      if (assignedUserUids.has(uid)) {
-        return;
-      }
-
-      // Only include RTC users who are online
-      if (userData.type === 'rtc' && !userData.offline) {
-        users.push({
-          uid,
-          name: userData.name || remoteUserDefaultLabel,
-        });
-      }
-    });
-
-    return users;
-  }, [mainRoomRTMUsers, assignedUserUids, breakoutRoomVersion]);
-
-  return (
-    <View style={style.card}>
-      <View style={style.section}>
-        <Text style={style.title}>Main Room ({mainRoomOnlyUsers.length})</Text>
-        <View style={style.participantContainer}>
-          {mainRoomOnlyUsers.map(user => (
-            <View key={user.uid}>
-              <Tooltip
-                key={user.uid}
-                scrollY={scrollOffset}
-                toolTipMessage={user.name}
-                renderContent={() => {
-                  return (
-                    <UserAvatar
-                      name={user.name}
-                      containerStyle={style.userAvatarContainer}
-                      textStyle={style.userAvatarText}
-                    />
-                  );
-                }}
-              />
-            </View>
-          ))}
-        </View>
-        {mainRoomOnlyUsers.length === 0 && (
-          <Text style={style.emptyText}>No users online in main room</Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default BreakoutRoomMainRoomUsers;
-
-const style = StyleSheet.create({
-  card: {
-    width: '100%',
-    padding: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 8,
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    gap: 12,
-  },
-  section: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-  },
-  title: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-    fontWeight: '500',
-    opacity: 0.8,
-  },
-  participantContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 5,
-  },
-  emptyText: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 16,
-    fontWeight: '400',
-  },
-  userAvatarContainer: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  userAvatarText: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 24,
-    fontWeight: '600',
-    color: $config.BACKGROUND_COLOR,
-    display: 'flex',
-  },
-});

package/template/src/components/breakout-room/ui/BreakoutRoomMemberActionMenu.tsx

@@ -1,122 +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 React, {useState, useEffect, useRef} from 'react';
-import {View, useWindowDimensions} from 'react-native';
-import ActionMenu, {ActionMenuItem} from '../../../atoms/ActionMenu';
-import {calculatePosition} from '../../../utils/common';
-import {useBreakoutRoom} from '../context/BreakoutRoomContext';
-import {UidType} from '../../../../agora-rn-uikit';
-import IconButton from '../../../atoms/IconButton';
-
-interface BreakoutRoomMemberActionMenuProps {
-  memberUid: UidType;
-}
-
-const BreakoutRoomMemberActionMenu: React.FC<
-  BreakoutRoomMemberActionMenuProps
-> = ({memberUid}) => {
-  const [actionMenuVisible, setActionMenuVisible] = useState(false);
-  const [isPosCalculated, setIsPosCalculated] = useState(false);
-  const [modalPosition, setModalPosition] = useState({});
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const moreIconRef = useRef(null);
-
-  const {getRoomMemberDropdownOptions} = useBreakoutRoom();
-
-  // Get member-specific dropdown options using breakout room context
-  const memberOptions = getRoomMemberDropdownOptions(memberUid);
-
-  // Transform to ActionMenuItem format
-  const actionMenuItems: ActionMenuItem[] = memberOptions.map(
-    (option, index) => ({
-      order: index + 1,
-      icon: option.icon,
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.SECONDARY_ACTION_COLOR,
-      title: option.title,
-      onPress: () => {
-        option.onOptionPress();
-        setActionMenuVisible(false);
-      },
-    }),
-  );
-
-  // Calculate position when menu becomes visible
-  useEffect(() => {
-    if (actionMenuVisible) {
-      moreIconRef?.current?.measure(
-        (
-          _fx: number,
-          _fy: number,
-          localWidth: number,
-          localHeight: number,
-          px: number,
-          py: number,
-        ) => {
-          const data = calculatePosition({
-            px,
-            py,
-            localWidth,
-            localHeight,
-            globalHeight,
-            globalWidth,
-          });
-          setModalPosition(data);
-          setIsPosCalculated(true);
-        },
-      );
-    }
-  }, [actionMenuVisible]);
-
-  // Don't render if no actions available
-  if (actionMenuItems.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <ActionMenu
-        from={'breakout-room-member-actions'}
-        actionMenuVisible={actionMenuVisible && isPosCalculated}
-        setActionMenuVisible={setActionMenuVisible}
-        modalPosition={modalPosition}
-        items={actionMenuItems}
-      />
-      <View
-        ref={moreIconRef}
-        collapsable={false}
-        style={{
-          width: 24,
-          height: 24,
-          alignSelf: 'center',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <IconButton
-          hoverEffect={false}
-          iconProps={{
-            iconType: 'plain',
-            name: 'more-menu',
-            iconSize: 20,
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          }}
-          onPress={() => {
-            setActionMenuVisible(true);
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-export default BreakoutRoomMemberActionMenu;

package/template/src/components/breakout-room/ui/BreakoutRoomParticipants.tsx

@@ -1,124 +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 React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import UserAvatar from '../../../atoms/UserAvatar';
-import {ContentInterface, UidType} from '../../../../agora-rn-uikit';
-import ThemeConfig from '../../../theme';
-import ImageIcon from '../../../atoms/ImageIcon';
-import Tooltip from '../../../atoms/Tooltip';
-import {BreakoutRoomUser} from '../state/reducer';
-
-interface Props {
-  isHost?: boolean;
-  participants?: {uid: UidType; user: BreakoutRoomUser}[];
-}
-
-const BreakoutRoomParticipants: React.FC<Props> = ({
-  participants,
-  isHost = false,
-}) => {
-  return (
-    <>
-      <View
-        style={[
-          styles.titleContainer,
-          participants?.length > 0 ? {} : styles.titleLowOpacity,
-        ]}>
-        <View>
-          <ImageIcon
-            iconType="plain"
-            name="people"
-            tintColor={$config.FONT_COLOR}
-            iconSize={20}
-          />
-        </View>
-        <Text style={styles.title}>
-          Main Room {isHost ? `(${participants.length} unassigned)` : ''}
-        </Text>
-      </View>
-      <View style={styles.participantContainer}>
-        {participants.length > 0 ? (
-          participants.map(item => (
-            <View style={[styles.participantItem]} key={item.uid}>
-              <Tooltip
-                toolTipMessage={item.user.name}
-                renderContent={() => {
-                  return (
-                    <UserAvatar
-                      name={item.user.name}
-                      containerStyle={styles.userAvatarContainer}
-                      textStyle={styles.userAvatarText}
-                    />
-                  );
-                }}
-              />
-            </View>
-          ))
-        ) : (
-          <Text style={styles.emptyStateText}>
-            {isHost
-              ? 'No participants available for breakout rooms'
-              : 'No members'}
-          </Text>
-        )}
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  titleLowOpacity: {
-    opacity: 0.2,
-  },
-  titleContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 4,
-    alignItems: 'center',
-  },
-  title: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-    fontWeight: '500',
-  },
-  participantContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 5,
-  },
-  participantItem: {},
-  userAvatarContainer: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  userAvatarText: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 12,
-    fontWeight: '600',
-    color: $config.BACKGROUND_COLOR,
-    display: 'flex',
-  },
-  emptyStateText: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
-    fontSize: ThemeConfig.FontSize.tiny,
-  },
-});
-
-export default BreakoutRoomParticipants;

package/template/src/components/breakout-room/ui/BreakoutRoomRaiseHand.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 {useBreakoutRoom} from '../context/BreakoutRoomContext';
-import {RaiseHandButton} from '../../raise-hand';
-
-export default function BreakoutRoomRaiseHand() {
-  const {isUserInRoom} = useBreakoutRoom();
-  return (
-    <View style={style.card}>
-      {!isUserInRoom() ? (
-        <View style={style.cardHeader}>
-          <ImageIcon
-            iconType="plain"
-            name="info"
-            iconSize={20}
-            tintColor={$config.SECONDARY_ACTION_COLOR}
-          />
-          <Text style={style.infoText}>
-            Please wait, the meeting host will assign you to a room shortly.
-          </Text>
-        </View>
-      ) : (
-        <></>
-      )}
-      <View style={style.cardFooter}>
-        <RaiseHandButton />
-      </View>
-    </View>
-  );
-}
-
-const style = StyleSheet.create({
-  card: {
-    width: '100%',
-    padding: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 8,
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    gap: 16,
-  },
-  cardHeader: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    gap: 8,
-  },
-  cardFooter: {
-    display: 'flex',
-    flex: 1,
-    width: '100%',
-  },
-  infoText: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
-    fontSize: ThemeConfig.FontSize.tiny,
-    fontWeight: '400',
-    lineHeight: 16,
-  },
-});

package/template/src/components/breakout-room/ui/BreakoutRoomRenameModal.tsx

@@ -1,227 +0,0 @@
-import React, {SetStateAction, Dispatch} from 'react';
-import {View, StyleSheet, TextInput, Text} from 'react-native';
-import GenericModal from '../../common/GenericModal';
-import ThemeConfig from '../../../theme';
-import TertiaryButton from '../../../atoms/TertiaryButton';
-
-interface BreakoutRoomRenameModalProps {
-  setModalOpen: Dispatch<SetStateAction<boolean>>;
-  currentRoomName: string;
-  updateRoomName: (newName: string) => void;
-  existingRoomNames: string[];
-}
-
-export default function BreakoutRoomRenameModal(
-  props: BreakoutRoomRenameModalProps,
-) {
-  const {currentRoomName, setModalOpen, updateRoomName, existingRoomNames} =
-    props;
-  const [roomName, setRoomName] = React.useState(currentRoomName);
-
-  const MAX_ROOM_NAME_LENGTH = 30;
-
-  // Helper function to normalize room name (trim and collapse multiple spaces)
-  const normalizeRoomName = (name: string) => {
-    return name.trim().replace(/\s+/g, ' ');
-  };
-
-  // Check if the normalized room name already exists in other rooms
-  const isDuplicateName = existingRoomNames.some(existingName => {
-    const normalizedExistingName =
-      normalizeRoomName(existingName).toLowerCase();
-    const normalizedNewName = normalizeRoomName(roomName).toLowerCase();
-    const normalizedCurrentName =
-      normalizeRoomName(currentRoomName).toLowerCase();
-
-    return (
-      normalizedExistingName === normalizedNewName &&
-      normalizedExistingName !== normalizedCurrentName
-    );
-  });
-
-  const disabled =
-    roomName.trim() === '' ||
-    roomName.trim().length > MAX_ROOM_NAME_LENGTH ||
-    normalizeRoomName(roomName).toLowerCase() ===
-      normalizeRoomName(currentRoomName).toLowerCase() ||
-    isDuplicateName;
-
-  return (
-    <GenericModal
-      visible={true}
-      onRequestClose={() => setModalOpen(false)}
-      showCloseIcon={true}
-      title={'Rename Room'}
-      cancelable={true}
-      contentContainerStyle={style.contentContainer}>
-      <View style={style.fullBody}>
-        <View style={style.mbody}>
-          <View style={style.form}>
-            <Text style={style.label}>Room name</Text>
-            <TextInput
-              id="room-rename-text"
-              style={[
-                style.inputBox,
-                roomName.trim().length > MAX_ROOM_NAME_LENGTH &&
-                  style.inputBoxError,
-              ]}
-              value={roomName}
-              onChangeText={setRoomName}
-              placeholder="Rename room..."
-              placeholderTextColor={
-                $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low
-              }
-              underlineColorAndroid="transparent"
-              maxLength={50}
-            />
-            <View style={style.inputFooter}>
-              <Text
-                style={[
-                  style.characterCount,
-                  (roomName.trim().length > MAX_ROOM_NAME_LENGTH ||
-                    isDuplicateName) &&
-                    style.characterCountError,
-                ]}>
-                {roomName.trim().length}/{MAX_ROOM_NAME_LENGTH}
-              </Text>
-              {roomName.trim().length > MAX_ROOM_NAME_LENGTH && (
-                <Text style={style.errorText}>
-                  Room name cannot exceed {MAX_ROOM_NAME_LENGTH} characters
-                </Text>
-              )}
-              {isDuplicateName && (
-                <Text style={style.errorText}>
-                  A room with this name already exists
-                </Text>
-              )}
-            </View>
-          </View>
-        </View>
-        <View style={style.mfooter}>
-          <View>
-            <TertiaryButton
-              containerStyle={style.cancelBtn}
-              textStyle={style.actionBtnText}
-              text={'Cancel'}
-              onPress={() => {
-                setModalOpen(false);
-              }}
-            />
-          </View>
-          <View>
-            <TertiaryButton
-              containerStyle={disabled ? style.disabledSendBtn : style.sendBtn}
-              textStyle={style.actionBtnText}
-              text={'Save'}
-              disabled={disabled}
-              onPress={() => {
-                updateRoomName(normalizeRoomName(roomName));
-              }}
-            />
-          </View>
-        </View>
-      </View>
-    </GenericModal>
-  );
-}
-
-const style = StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    flexShrink: 0,
-    width: '100%',
-    maxWidth: 500,
-    height: 272,
-  },
-  fullBody: {
-    width: '100%',
-    height: '100%',
-    flex: 1,
-  },
-  mbody: {
-    padding: 12,
-    borderTopColor: $config.CARD_LAYER_3_COLOR,
-    borderTopWidth: 1,
-    borderBottomColor: $config.CARD_LAYER_3_COLOR,
-    borderBottomWidth: 1,
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-    width: '100%',
-  },
-  mfooter: {
-    padding: 12,
-    gap: 12,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  label: {
-    fontSize: ThemeConfig.FontSize.small,
-    fontWeight: '500',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
-    lineHeight: 16,
-  },
-  inputBox: {
-    fontSize: ThemeConfig.FontSize.normal,
-    fontWeight: '400',
-    color: $config.FONT_COLOR,
-    padding: 20,
-    lineHeight: 20,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
-    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
-    outline: 'none',
-  },
-  inputBoxError: {
-    borderColor: $config.SEMANTIC_ERROR,
-  },
-  inputFooter: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 4,
-  },
-  characterCount: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    fontWeight: '400',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-  },
-  characterCountError: {
-    color: $config.SEMANTIC_ERROR,
-  },
-  errorText: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    fontWeight: '400',
-    color: $config.SEMANTIC_ERROR,
-  },
-  actionBtnText: {
-    color: $config.SECONDARY_ACTION_COLOR,
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-  },
-  cancelBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    borderColor: $config.SECONDARY_ACTION_COLOR,
-    backgroundColor: 'transparent',
-  },
-  sendBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-  },
-  disabledSendBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    backgroundColor: $config.SEMANTIC_NEUTRAL,
-  },
-});