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

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

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,193 @@
+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

@@ -0,0 +1,79 @@
+/*
+********************************************
+ 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;