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

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

@@ -1,140 +0,0 @@
-import React, {useState} from 'react';
-import {View, StyleSheet, Text} from 'react-native';
-import BreakoutRoomParticipants from './BreakoutRoomParticipants';
-import SelectParticipantAssignmentStrategy from './SelectParticipantAssignmentStrategy';
-import Divider from '../../common/Dividers';
-import ThemeConfig from '../../../theme';
-import {useBreakoutRoom} from '../context/BreakoutRoomContext';
-import Toggle from '../../../atoms/Toggle';
-import ParticipantManualAssignmentModal from './ParticipantManualAssignmentModal';
-import {useModal} from '../../../utils/useModal';
-import {RoomAssignmentStrategy} from '../state/reducer';
-import TertiaryButton from '../../../atoms/TertiaryButton';
-
-export default function BreakoutRoomSettings() {
-  const {
-    unassignedParticipants,
-    assignmentStrategy,
-    handleAssignParticipants,
-    canUserSwitchRoom,
-    toggleRoomSwitchingAllowed,
-  } = useBreakoutRoom();
-
-  // Local dropdown state to prevent sync conflicts
-  const [localAssignmentStrategy, setLocalAssignmentStrategy] =
-    useState(assignmentStrategy);
-
-  const disableAssignmentSelect = unassignedParticipants.length === 0;
-  const disableHandleAssignment =
-    disableAssignmentSelect ||
-    localAssignmentStrategy === RoomAssignmentStrategy.NO_ASSIGN;
-
-  const {
-    modalOpen: isManualAssignmentModalOpen,
-    setModalOpen: setManualAssignmentModalOpen,
-  } = useModal();
-
-  // Handle strategy change from dropdown
-  const handleStrategyChange = (newStrategy: RoomAssignmentStrategy) => {
-    setLocalAssignmentStrategy(newStrategy);
-
-    // Immediately call API for NO_ASSIGN strategy
-    if (newStrategy === RoomAssignmentStrategy.NO_ASSIGN) {
-      handleAssignParticipants(newStrategy);
-    }
-  };
-
-  // Handle assign participants button click
-  const handleAssignClick = () => {
-    if (localAssignmentStrategy === RoomAssignmentStrategy.MANUAL_ASSIGN) {
-      // Open manual assignment modal
-      setManualAssignmentModalOpen(true);
-    } else {
-      // Handle other assignment strategies
-      handleAssignParticipants(localAssignmentStrategy);
-    }
-  };
-
-  return (
-    <View style={style.card}>
-      {/* Avatar list  */}
-      <View style={style.section}>
-        <BreakoutRoomParticipants participants={unassignedParticipants} />
-      </View>
-      <Divider marginTop={0} marginBottom={0} />
-      <View style={style.section}>
-        <SelectParticipantAssignmentStrategy
-          selectedStrategy={localAssignmentStrategy}
-          onStrategyChange={handleStrategyChange}
-          disabled={disableAssignmentSelect}
-        />
-        <TertiaryButton
-          disabled={disableHandleAssignment}
-          containerStyle={{
-            backgroundColor: disableHandleAssignment
-              ? $config.SEMANTIC_NEUTRAL
-              : $config.PRIMARY_ACTION_BRAND_COLOR,
-            borderColor: disableHandleAssignment
-              ? $config.SEMANTIC_NEUTRAL
-              : $config.PRIMARY_ACTION_BRAND_COLOR,
-          }}
-          textStyle={{color: $config.PRIMARY_ACTION_TEXT_COLOR}}
-          onPress={handleAssignClick}
-          text={'Assign participants'}
-        />
-      </View>
-      <Divider />
-      <View style={style.section}>
-        <View style={style.switchSection}>
-          <Text style={style.label}>Allow people to switch rooms</Text>
-          <Toggle
-            disabled={$config.EVENT_MODE}
-            isEnabled={canUserSwitchRoom}
-            toggleSwitch={toggleRoomSwitchingAllowed}
-            circleColor={$config.PRIMARY_ACTION_TEXT_COLOR}
-          />
-        </View>
-      </View>
-      {isManualAssignmentModalOpen && (
-        <ParticipantManualAssignmentModal
-          setModalOpen={setManualAssignmentModalOpen}
-        />
-      )}
-    </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: 12,
-  },
-  section: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-  },
-  switchSection: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  label: {
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-  },
-});

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

@@ -1,52 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import Loading from '../../../subComponents/Loading';
-import {View, StyleSheet} from 'react-native';
-
-interface BreakoutRoomTransitionProps {
-  onTimeout: () => void;
-  direction?: 'enter' | 'exit';
-}
-
-const BreakoutRoomTransition = ({
-  onTimeout,
-  direction = 'enter',
-}: BreakoutRoomTransitionProps) => {
-  const [dots, setDots] = useState('');
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots(prev => (prev.length >= 3 ? '' : prev + '.'));
-    }, 500);
-
-    const timeout = setTimeout(onTimeout, 10000); // 10s timeout
-
-    return () => {
-      clearInterval(interval);
-      clearTimeout(timeout);
-    };
-  }, [onTimeout]);
-
-  const transitionText =
-    direction === 'exit' ? 'Exiting breakout room' : 'Entering breakout room';
-
-  return (
-    <View style={styles.transitionContainer}>
-      <Loading
-        text={`${transitionText}...${dots}`}
-        background={$config.CARD_LAYER_1_COLOR}
-        textColor={$config.FONT_COLOR}
-      />
-    </View>
-  );
-};
-
-export default BreakoutRoomTransition;
-const styles = StyleSheet.create({
-  transitionContainer: {
-    height: '100%',
-    display: 'flex',
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

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

@@ -1,193 +0,0 @@
-import React, {useEffect, useState, useRef} from 'react';
-import {View, StyleSheet, ScrollView} from 'react-native';
-import {useRoomInfo} from '../../room-info/useRoomInfo';
-import {useBreakoutRoom} from './../context/BreakoutRoomContext';
-import BreakoutRoomSettings from './BreakoutRoomSettings';
-import BreakoutRoomGroupSettings from './BreakoutRoomGroupSettings';
-import ThemeConfig from '../../../theme';
-import TertiaryButton from '../../../atoms/TertiaryButton';
-import {BreakoutRoomHeader} from '../../../pages/video-call/SidePanelHeader';
-import BreakoutRoomRaiseHand from './BreakoutRoomRaiseHand';
-import BreakoutRoomMainRoomUsers from './BreakoutRoomMainRoomUsers';
-import Loading from '../../../subComponents/Loading';
-
-interface Props {
-  closeSidePanel: () => void;
-}
-export default function BreakoutRoomView({closeSidePanel}: Props) {
-  const [isInitializing, setIsInitializing] = useState(true);
-
-  const {
-    data: {isHost},
-  } = useRoomInfo();
-
-  const scrollViewRef = useRef<ScrollView>(null);
-  const [scrollOffset, setScrollOffset] = useState(0);
-
-  const onScroll = event => {
-    setScrollOffset(event.nativeEvent.contentOffset.y);
-  };
-
-  const {
-    checkIfBreakoutRoomSessionExistsAPI,
-    createBreakoutRoomGroup,
-    upsertBreakoutRoomAPI,
-    closeAllRooms,
-    permissions,
-    isBreakoutUILocked,
-  } = useBreakoutRoom();
-
-  useEffect(() => {
-    const init = async () => {
-      try {
-        setIsInitializing(true);
-        const activeSession = await checkIfBreakoutRoomSessionExistsAPI();
-        console.log('supriya-sync-queue  activeSession: ', activeSession);
-        if (!activeSession && isHost) {
-          console.log(
-            'supriya-sync-queue  callubg upsertBreakoutRoomAPI: ',
-            activeSession,
-          );
-
-          await upsertBreakoutRoomAPI('START');
-        }
-      } catch (error) {
-        console.error('Failed to check breakout session:', error);
-      } finally {
-        setIsInitializing(false);
-      }
-    };
-    init();
-  }, []);
-
-  // Disable all actions when API is in flight or another host is operating
-  const disableAllActions = isBreakoutUILocked;
-
-  return (
-    <>
-      <BreakoutRoomHeader />
-      <ScrollView
-        ref={scrollViewRef}
-        onScroll={onScroll}
-        scrollEventThrottle={64}
-        style={[style.pannelOuterBody]}
-        contentContainerStyle={
-          isInitializing ? style.contentCenter : style.contentStart
-        }>
-        {isInitializing ? (
-          <View style={style.panelInnerBody}>
-            <Loading
-              text={'Initializing...'}
-              background={$config.CARD_LAYER_1_COLOR}
-              textColor={$config.FONT_COLOR}
-            />
-          </View>
-        ) : (
-          <View
-            style={[
-              style.panelInnerBody,
-              disableAllActions ? style.disabledPannelInnerBody : {},
-            ]}>
-            {permissions?.canRaiseHands ? <BreakoutRoomRaiseHand /> : <></>}
-            {permissions?.canHostManageMainRoom &&
-            permissions.canAssignParticipants ? (
-              <BreakoutRoomSettings />
-            ) : (
-              <BreakoutRoomMainRoomUsers scrollOffset={scrollOffset} />
-            )}
-            <BreakoutRoomGroupSettings scrollOffset={scrollOffset} />
-            {permissions?.canHostManageMainRoom &&
-            permissions?.canCreateRooms ? (
-              <TertiaryButton
-                disabled={disableAllActions}
-                containerStyle={style.createBtnContainer}
-                textStyle={style.createBtnText}
-                text={'+ Create New Room'}
-                onPress={() => createBreakoutRoomGroup()}
-              />
-            ) : (
-              <></>
-            )}
-          </View>
-        )}
-      </ScrollView>
-      {!isInitializing &&
-      permissions.canHostManageMainRoom &&
-      permissions?.canCloseRooms ? (
-        <View style={style.footer}>
-          <View style={style.fullWidth}>
-            <TertiaryButton
-              disabled={disableAllActions}
-              containerStyle={{
-                borderColor: $config.SEMANTIC_ERROR,
-              }}
-              textStyle={{
-                color: $config.SEMANTIC_ERROR,
-              }}
-              onPress={() => {
-                try {
-                  closeAllRooms();
-                  closeSidePanel();
-                } catch (error) {
-                  console.error('Error while closing the room', error);
-                }
-              }}
-              text={'Close All Rooms'}
-            />
-          </View>
-        </View>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-}
-
-const style = StyleSheet.create({
-  footer: {
-    width: '100%',
-    padding: 12,
-    height: 'auto',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-  },
-  contentCenter: {
-    height: '100%',
-    justifyContent: 'center',
-  },
-  contentStart: {
-    justifyContent: 'flex-start',
-  },
-  pannelOuterBody: {
-    display: 'flex',
-    flex: 1,
-  },
-  panelInnerBody: {
-    display: 'flex',
-    flex: 1,
-    padding: 12,
-    gap: 12,
-  },
-  fullWidth: {
-    display: 'flex',
-    flex: 1,
-  },
-  createBtnContainer: {
-    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
-    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
-    borderRadius: 8,
-  },
-  createBtnText: {
-    color: $config.PRIMARY_ACTION_BRAND_COLOR,
-    lineHeight: 20,
-    fontWeight: '500',
-    fontSize: ThemeConfig.FontSize.normal,
-  },
-
-  disabledPannelInnerBody: {
-    opacity: 0.4,
-    pointerEvents: 'none',
-  },
-});

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

@@ -1,79 +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 IconButton, {IconButtonProps} from '../../../atoms/IconButton';
-import {useToolbarMenu} from '../../../utils/useMenu';
-import ToolbarMenuItem from '../../../atoms/ToolbarMenuItem';
-import {useToolbarProps} from '../../../atoms/ToolbarItem';
-import {useActionSheet} from '../../../utils/useActionSheet';
-import {useBreakoutRoom} from '../context/BreakoutRoomContext';
-import BreakoutRoomNameRenderer from '../hoc/BreakoutRoomNameRenderer';
-
-export interface ScreenshareButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-const ExitBreakoutRoomIconButton = (props: ScreenshareButtonProps) => {
-  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
-  const {isOnActionSheet, showLabel} = useActionSheet();
-  const {exitRoom} = useBreakoutRoom();
-  const {isToolbarMenuItem} = useToolbarMenu();
-
-  const onPress = () => {
-    exitRoom();
-  };
-
-  return (
-    <BreakoutRoomNameRenderer>
-      {({breakoutRoomName}) => {
-        const displayText = breakoutRoomName 
-          ? `Exit ${breakoutRoomName}` 
-          : 'Exit Room';
-
-        let iconButtonProps: IconButtonProps = {
-          onPress: onPressCustom || onPress,
-          iconProps: {
-            name: 'close-room',
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          },
-          btnTextProps: {
-            textColor: $config.FONT_COLOR,
-            text: showLabel ? label || displayText : '',
-          },
-        };
-
-        if (isOnActionSheet) {
-          iconButtonProps.btnTextProps.textStyle = {
-            color: $config.FONT_COLOR,
-            marginTop: 8,
-            fontSize: 12,
-            fontWeight: '400',
-            fontFamily: 'Source Sans Pro',
-            textAlign: 'center',
-          };
-        }
-        iconButtonProps.isOnActionSheet = isOnActionSheet;
-
-        return props?.render ? (
-          props.render(onPress)
-        ) : isToolbarMenuItem ? (
-          <ToolbarMenuItem {...iconButtonProps} />
-        ) : (
-          <IconButton {...iconButtonProps} />
-        );
-      }}
-    </BreakoutRoomNameRenderer>
-  );
-};
-
-export default ExitBreakoutRoomIconButton;