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

package/template/src/components/common/Dividers.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import ThemeConfig from '../../theme';
-
-interface DividerProps {
-  orientation?: 'horizontal' | 'vertical';
-  marginTop?: number;
-  marginBottom?: number;
-  marginLeft?: number;
-  marginRight?: number;
-  thickness?: number;
-  color?: string;
-  length?: number | string; // only for vertical dividers
-}
-
-const Divider: React.FC<DividerProps> = ({
-  orientation = 'horizontal',
-  marginTop = 8,
-  marginBottom = 8,
-  marginLeft = 0,
-  marginRight = 0,
-  thickness = 1,
-  color = $config.CARD_LAYER_4_COLOR,
-  length = '100%',
-}) => {
-  const isHorizontal = orientation === 'horizontal';
-
-  const style = isHorizontal
-    ? {
-        height: thickness,
-        width: '100%',
-        backgroundColor: color,
-        marginTop,
-        marginBottom,
-      }
-    : {
-        width: thickness,
-        height: length,
-        backgroundColor: color,
-        marginLeft,
-        marginRight,
-      };
-
-  return <View style={[styles.base, style]} />;
-};
-
-const styles = StyleSheet.create({
-  base: {
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-  },
-});
-
-export default Divider;

package/template/src/components/controls/toolbar-items/ExitBreakoutRoomToolbarItem.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import ToolbarItem, {ToolbarItemProps} from '../../../atoms/ToolbarItem';
-import ExitBreakoutRoomIconButton from '../../breakout-room/ui/ExitBreakoutRoomIconButton';
-
-export interface Props extends ToolbarItemProps {}
-
-export const ExitBreakoutRoomToolbarItem = (props: Props) => {
-  return (
-    <ToolbarItem testID="exit-breakout-room-btn" toolbarProps={props}>
-      <ExitBreakoutRoomIconButton />
-    </ToolbarItem>
-  );
-};

package/template/src/components/raise-hand/RaiseHandButton.tsx

@@ -1,50 +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 {useRaiseHand} from './RaiseHandProvider';
-import {StyleSheet} from 'react-native';
-import ThemeConfig from '../../theme';
-import TertiaryButton from '../../atoms/TertiaryButton';
-
-const RaiseHandButton: React.FC = () => {
-  const {isHandRaised, toggleHand} = useRaiseHand();
-
-  return (
-    <TertiaryButton
-      containerStyle={style.raiseHandBtn}
-      textStyle={style.raiseHandBtnText}
-      text={isHandRaised ? 'Lower Hand' : 'Raise Hand'}
-      iconName={isHandRaised ? 'lower-hand' : 'raise-hand'}
-      iconColor={$config.SEMANTIC_WARNING}
-      iconSize={15}
-      onPress={toggleHand}
-    />
-  );
-};
-
-export default RaiseHandButton;
-
-const style = StyleSheet.create({
-  raiseHandBtn: {
-    width: '100%',
-    borderRadius: 4,
-    borderColor: $config.SECONDARY_ACTION_COLOR,
-    backgroundColor: 'transparent',
-  },
-  raiseHandBtnText: {
-    textAlign: 'center',
-    color: $config.SECONDARY_ACTION_COLOR,
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-  },
-});

package/template/src/components/raise-hand/RaiseHandProvider.tsx

@@ -1,308 +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, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-} from 'react';
-import {useCurrentRoomInfo} from '../room-info/useCurrentRoomInfo';
-import {useLocalUid} from '../../../agora-rn-uikit';
-import events, {PersistanceLevel} from '../../rtm-events-api';
-import Toast from '../../../react-native-toast-message';
-import {useMainRoomUserDisplayName} from '../../rtm/hooks/useMainRoomUserDisplayName';
-import {EventNames} from '../../rtm-events';
-import {useRoomInfo} from '../room-info/useRoomInfo';
-import {useBreakoutRoomInfo} from '../room-info/useSetBreakoutRoomInfo';
-
-interface RaiseHandData {
-  raised: boolean;
-  timestamp: number;
-}
-
-interface RaiseHandState {
-  // State
-  raisedHands: Record<number, RaiseHandData>;
-  isHandRaised: boolean;
-  isUserHandRaised: (uid: number) => boolean;
-
-  // Actions
-  raiseHand: () => void;
-  lowerHand: () => void;
-  toggleHand: () => void;
-}
-
-const RaiseHandContext = createContext<RaiseHandState>({
-  raisedHands: {},
-  isHandRaised: false,
-  isUserHandRaised: () => false,
-  raiseHand: () => {},
-  lowerHand: () => {},
-  toggleHand: () => {},
-});
-
-interface RaiseHandProviderProps {
-  children: React.ReactNode;
-}
-
-export const RaiseHandProvider: React.FC<RaiseHandProviderProps> = ({
-  children,
-}) => {
-  const [raisedHands, setRaisedHands] = useState<Record<number, RaiseHandData>>(
-    {},
-  );
-  const localUid = useLocalUid();
-  const getDisplayName = useMainRoomUserDisplayName();
-  const {
-    data: {channel: mainChannelId},
-  } = useRoomInfo();
-  const {isInBreakoutRoute} = useCurrentRoomInfo();
-  const {breakoutRoomChannelData} = useBreakoutRoomInfo();
-
-  // Get current user's hand state
-  const isHandRaised = raisedHands[localUid]?.raised || false;
-
-  // Detect room changes and lower hand if raised
-  useEffect(() => {
-    // Send RTM event to reset attribute only if hand is raised
-    return () => {
-      if (isHandRaised) {
-        events.send(
-          EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE,
-          JSON.stringify({
-            uid: localUid,
-            raised: false,
-            timestamp: Date.now(),
-          }),
-          PersistanceLevel.Sender,
-        );
-      }
-    };
-  }, [localUid, isHandRaised]);
-
-  // Check if any user has hand raised
-  const isUserHandRaised = useCallback(
-    (uid: number): boolean => {
-      return raisedHands[uid]?.raised || false;
-    },
-    [raisedHands],
-  );
-
-  // Raise hand action
-  const raiseHand = useCallback(() => {
-    if (isHandRaised) {
-      return;
-    } // Already raised
-
-    const timestamp = Date.now();
-    const userName = getDisplayName(localUid) || `User ${localUid}`;
-
-    // Update local state immediately
-    setRaisedHands(prev => ({...prev, [localUid]: {raised: true, timestamp}}));
-
-    // 1. Send RTM attribute event (for current room UI)
-    events.send(
-      EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE,
-      JSON.stringify({
-        uid: localUid,
-        raised: true,
-        timestamp,
-      }),
-      PersistanceLevel.Sender,
-    );
-
-    // 2. Send cross-room notification to main room (if in breakout room)
-    if (isInBreakoutRoute) {
-      try {
-        // Get current active channel to restore later
-        events.send(
-          EventNames.CROSS_ROOM_RAISE_HAND_NOTIFICATION,
-          JSON.stringify({
-            type: 'raise_hand',
-            uid: localUid,
-            userName: userName,
-            roomName: breakoutRoomChannelData?.room_name || '',
-            timestamp,
-          }),
-          PersistanceLevel.None,
-          -1, // send in channel
-          mainChannelId, // send to main channel
-        );
-      } catch (error) {
-        console.error(
-          'Failed to send cross-room raise hand notification:',
-          error,
-        );
-      }
-    }
-
-    // Show toast notification
-    Toast.show({
-      type: 'success',
-      leadingIconName: 'raise-hand',
-      text1: 'Hand raised',
-      visibilityTime: 2000,
-    });
-  }, [
-    isHandRaised,
-    localUid,
-    getDisplayName,
-    isInBreakoutRoute,
-    mainChannelId,
-    breakoutRoomChannelData?.room_name,
-  ]);
-
-  // Lower hand action
-  const lowerHand = useCallback(() => {
-    if (!isHandRaised) {
-      return;
-    } // Already lowered
-
-    // Update local state immediately (keep timestamp but set raised to false)
-    setRaisedHands(prev => ({
-      ...prev,
-      [localUid]: {raised: false, timestamp: Date.now()},
-    }));
-
-    // Send RTM event
-    events.send(
-      EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE,
-      JSON.stringify({
-        uid: localUid,
-        raised: false,
-        timestamp: Date.now(),
-      }),
-      PersistanceLevel.Sender,
-    );
-
-    // // Show toast notification
-    // Toast.show({
-    //   type: 'info',
-    //   text1: 'Hand lowered',
-    //   visibilityTime: 2000,
-    // });
-  }, [isHandRaised, localUid]);
-
-  // Toggle hand action
-  const toggleHand = useCallback(() => {
-    if (isHandRaised) {
-      lowerHand();
-    } else {
-      raiseHand();
-    }
-  }, [isHandRaised, raiseHand, lowerHand]);
-
-  // Listen for RTM events
-  useEffect(() => {
-    const handleRaiseHandEvent = (data: any) => {
-      try {
-        const {payload} = data;
-        const eventData = JSON.parse(payload);
-        const {uid, raised, timestamp} = eventData;
-        // Update raised hands state
-        setRaisedHands(prev => ({
-          ...prev,
-          [uid]: {raised, timestamp},
-        }));
-
-        // Show toast for other users (not for self)
-        if (uid !== localUid) {
-          const userName = getDisplayName(uid) || `User ${uid}`;
-          Toast.show({
-            leadingIconName: raised ? 'raise-hand' : 'lower-hand',
-            type: 'info',
-            text1: raised
-              ? `${userName} raised hand`
-              : `${userName} lowered hand`,
-            visibilityTime: 3000,
-          });
-        }
-      } catch (error) {
-        console.error('Failed to process raise hand event:', error);
-      }
-    };
-
-    const handleCrossRoomNotification = (data: any) => {
-      try {
-        const {payload} = data;
-        const eventData = JSON.parse(payload);
-        const {type, uid, userName, roomName} = eventData;
-
-        // Only show notifications for other users and only in main room
-        if (uid !== localUid && !isInBreakoutRoute) {
-          if (type === 'raise_hand') {
-            Toast.show({
-              type: 'info',
-              leadingIconName: 'raise-hand',
-              text1: `${userName} raised hand in ${roomName}`,
-              visibilityTime: 4000,
-            });
-          }
-        }
-      } catch (error) {
-        console.error('Failed to process cross-room notification:', error);
-      }
-    };
-
-    // Register event listeners
-    events.on(EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE, handleRaiseHandEvent);
-    events.on(
-      EventNames.CROSS_ROOM_RAISE_HAND_NOTIFICATION,
-      handleCrossRoomNotification,
-    );
-
-    return () => {
-      // Cleanup event listeners
-      events.off(
-        EventNames.BREAKOUT_RAISE_HAND_ATTRIBUTE,
-        handleRaiseHandEvent,
-      );
-      events.off(
-        EventNames.CROSS_ROOM_RAISE_HAND_NOTIFICATION,
-        handleCrossRoomNotification,
-      );
-    };
-  }, [localUid, getDisplayName, isInBreakoutRoute]);
-
-  // Clear raised hands when room changes (optional: could be handled by RTM attribute clearing)
-  useEffect(() => {
-    setRaisedHands({});
-  }, []);
-
-  const contextValue: RaiseHandState = {
-    raisedHands,
-    isHandRaised,
-    isUserHandRaised,
-    raiseHand,
-    lowerHand,
-    toggleHand,
-  };
-
-  return (
-    <RaiseHandContext.Provider value={contextValue}>
-      {children}
-    </RaiseHandContext.Provider>
-  );
-};
-
-// Hook to use raise hand functionality
-export const useRaiseHand = (): RaiseHandState => {
-  const context = useContext(RaiseHandContext);
-  if (!context) {
-    throw new Error('useRaiseHand must be used within RaiseHandProvider');
-  }
-  return context;
-};
-
-export default RaiseHandProvider;

package/template/src/components/raise-hand/index.ts

@@ -1,14 +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.
-*********************************************
-*/
-
-export {default as RaiseHandProvider, useRaiseHand} from './RaiseHandProvider';
-export {default as RaiseHandButton} from './RaiseHandButton';

package/template/src/components/room-info/useCurrentRoomInfo.tsx

@@ -1,42 +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 {useLocation} from '../Router';
-import {useRoomInfo} from './useRoomInfo';
-import {useBreakoutRoomInfo} from './useSetBreakoutRoomInfo';
-
-export interface CurrentRoomInfoContextInterface {
-  isInBreakoutRoute: boolean;
-  channelId: string;
-}
-
-export const useCurrentRoomInfo = (): CurrentRoomInfoContextInterface => {
-  const mainRoomInfo = useRoomInfo(); // Always call - keeps public API intact
-  const {breakoutRoomChannelData} = useBreakoutRoomInfo(); // Always call - follows Rules of Hooks
-  const location = useLocation();
-
-  const isBreakoutMode =
-    new URLSearchParams(location.search).get('breakout') === 'true';
-
-  // Return overlapping data structure
-  if (isBreakoutMode && breakoutRoomChannelData) {
-    return {
-      isInBreakoutRoute: true,
-      channelId: breakoutRoomChannelData.channelId,
-    };
-  }
-
-  return {
-    isInBreakoutRoute: false,
-    channelId: mainRoomInfo.data.channel,
-  };
-};

package/template/src/components/room-info/useSetBreakoutRoomInfo.tsx

@@ -1,64 +0,0 @@
-import React, {createContext, useContext, useState} from 'react';
-import {BreakoutChannelJoinEventPayload} from '../breakout-room/state/types';
-
-type BreakoutRoomData = BreakoutChannelJoinEventPayload['data']['data'] & {
-  isBreakoutMode: boolean;
-};
-
-interface BreakoutRoomInfoContextValue {
-  breakoutRoomChannelData: BreakoutRoomData | null;
-  setBreakoutRoomChannelData: React.Dispatch<
-    React.SetStateAction<BreakoutRoomData | null>
-  >;
-}
-
-const BreakoutRoomInfoContext = createContext<BreakoutRoomInfoContextValue>({
-  breakoutRoomChannelData: null,
-  setBreakoutRoomChannelData: () => {},
-});
-
-interface BreakoutRoomInfoProviderProps {
-  children: React.ReactNode;
-  initialData?: BreakoutRoomData | null;
-}
-
-export const BreakoutRoomInfoProvider: React.FC<
-  BreakoutRoomInfoProviderProps
-> = ({children, initialData = null}) => {
-  const [breakoutRoomChannelData, setBreakoutRoomChannelData] =
-    useState<BreakoutRoomData | null>(initialData);
-
-  return (
-    <BreakoutRoomInfoContext.Provider
-      value={{breakoutRoomChannelData, setBreakoutRoomChannelData}}>
-      {children}
-    </BreakoutRoomInfoContext.Provider>
-  );
-};
-
-export const useBreakoutRoomInfo = () => {
-  return useContext(BreakoutRoomInfoContext);
-};
-
-export const useSetBreakoutRoomInfo = () => {
-  const {setBreakoutRoomChannelData} = useBreakoutRoomInfo();
-
-  const setBreakoutRoomChannelInfo = (
-    breakoutJoinChannelDetails: BreakoutRoomData,
-  ) => {
-    const breakoutData: BreakoutRoomData = {
-      isBreakoutMode: true,
-      ...breakoutJoinChannelDetails,
-    };
-    setBreakoutRoomChannelData(breakoutData);
-  };
-
-  const clearBreakoutRoomChannelInfo = () => {
-    setBreakoutRoomChannelData(null);
-  };
-
-  return {
-    setBreakoutRoomChannelInfo,
-    clearBreakoutRoomChannelInfo,
-  };
-};