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

package/template/src/components/breakout-room/events/BreakoutRoomEventsConfigure.tsx

@@ -0,0 +1,272 @@
+import React, {useEffect, useRef} from 'react';
+import events from '../../../rtm-events-api';
+import {BreakoutRoomEventNames} from './constants';
+import {useBreakoutRoom} from '../context/BreakoutRoomContext';
+import {BreakoutRoomSyncStateEventPayload} from '../state/types';
+import {useLocalUid} from '../../../../agora-rn-uikit';
+import {useRoomInfo} from '../../../components/room-info/useRoomInfo';
+import {logger, LogSource} from '../../../logger/AppBuilderLogger';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const BreakoutRoomEventsConfigure: React.FC<Props> = ({children}) => {
+  const {
+    // onMakeMePresenter,
+    handleBreakoutRoomSyncState,
+    handleHostOperationStart,
+    handleHostOperationEnd,
+  } = useBreakoutRoom();
+  // const {setCustomRTMMainRoomData} = useRTMGlobalState();
+  const localUid = useLocalUid();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const isHostRef = React.useRef(isHost);
+  const localUidRef = React.useRef(localUid);
+  // const onMakeMePresenterRef = useRef(onMakeMePresenter);
+  const handleBreakoutRoomSyncStateRef = useRef(handleBreakoutRoomSyncState);
+  const handleHostOperationStartRef = useRef(handleHostOperationStart);
+  const handleHostOperationEndRef = useRef(handleHostOperationEnd);
+
+  useEffect(() => {
+    isHostRef.current = isHost;
+  }, [isHost]);
+  useEffect(() => {
+    localUidRef.current = localUid;
+  }, [localUid]);
+  // useEffect(() => {
+  //   onMakeMePresenterRef.current = onMakeMePresenter;
+  // }, [onMakeMePresenter]);
+  useEffect(() => {
+    handleBreakoutRoomSyncStateRef.current = handleBreakoutRoomSyncState;
+  }, [handleBreakoutRoomSyncState]);
+  useEffect(() => {
+    handleHostOperationStartRef.current = handleHostOperationStart;
+  }, [handleHostOperationStart]);
+  useEffect(() => {
+    handleHostOperationEndRef.current = handleHostOperationEnd;
+  }, [handleHostOperationEnd]);
+
+  useEffect(() => {
+    // const handleMakePresenterEvent = (evtData: any) => {
+    //   logger.log(
+    //     LogSource.Internals,
+    //     'BREAKOUT_ROOM',
+    //     'BREAKOUT_ROOM_MAKE_PRESENTER event received',
+    //     evtData,
+    //   );
+    //   try {
+    //     const {payload} = evtData;
+    //     const data = JSON.parse(payload);
+    //     console.log('supriya-presenter handleMakePresenterEvent data: ', data);
+    //     const {uid, action} = data;
+
+    //     // Only process if it's for the local user
+    //     if (uid === localUidRef.current) {
+    //       onMakeMePresenterRef.current(action);
+    //     }
+    //   } catch (error) {
+    //     logger.log(
+    //       LogSource.Internals,
+    //       'BREAKOUT_ROOM',
+    //       'Error handling make presenter event',
+    //       error,
+    //     );
+    //   }
+    // };
+
+    const handleBreakoutRoomSyncStateEvent = (evtData: any) => {
+      console.log('BREAKOUT_ROOM_SYNC_STATE event recevied', evtData);
+      const {ts, payload} = evtData;
+      const data: BreakoutRoomSyncStateEventPayload = JSON.parse(payload);
+      if (data.data.act === 'SYNC_STATE') {
+        console.log(
+          'supriya-state-sync ********* BREAKOUT_ROOM_SYNC_STATE event triggered ***************',
+        );
+        handleBreakoutRoomSyncStateRef.current(data.data, ts);
+      }
+    };
+
+    const handleHostOperationStartEvent = (evtData: any) => {
+      logger.log(
+        LogSource.Internals,
+        'BREAKOUT_ROOM',
+        'BREAKOUT_ROOM_HOST_OPERATION_START event received',
+        evtData,
+      );
+      try {
+        const {sender, payload} = evtData;
+        // Ignore events from self
+        if (sender === `${localUidRef.current}`) {
+          return;
+        }
+        // // Only process if current user is also a host
+        // if (!isHostRef.current) {
+        //   return;
+        // }
+
+        const data = JSON.parse(payload);
+        const {operationName, hostUid, hostName} = data;
+
+        handleHostOperationStartRef.current(operationName, hostUid, hostName);
+      } catch (error) {
+        logger.log(
+          LogSource.Internals,
+          'BREAKOUT_ROOM',
+          'Error handling host operation start event',
+          {error: error.message},
+        );
+      }
+    };
+
+    const handleHostOperationEndEvent = (evtData: any) => {
+      logger.log(
+        LogSource.Internals,
+        'BREAKOUT_ROOM',
+        'BREAKOUT_ROOM_HOST_OPERATION_END event received',
+        evtData,
+      );
+      try {
+        const {sender, payload} = evtData;
+        // Ignore events from self
+        if (sender === `${localUidRef.current}`) {
+          return;
+        }
+        // // Only process if current user is also a host
+        // if (!isHostRef.current) {
+        //   return;
+        // }
+
+        const data = JSON.parse(payload);
+        const {operationName, hostUid, hostName} = data;
+
+        handleHostOperationEndRef.current(operationName, hostUid, hostName);
+      } catch (error) {
+        logger.log(
+          LogSource.Internals,
+          'BREAKOUT_ROOM',
+          'Error handling host operation end event',
+          {error: error.message},
+        );
+      }
+    };
+
+    // const handlePresenterAttributeEvent = (evtData: any) => {
+    //   logger.log(
+    //     LogSource.Internals,
+    //     'BREAKOUT_ROOM',
+    //     'BREAKOUT_PRESENTER_ATTRIBUTE event received',
+    //     evtData,
+    //   );
+    //   try {
+    //     const {payload} = evtData;
+    //     const data = JSON.parse(payload);
+    //     console.log('supriya-presenter handlePresenterAttributeEvent', data);
+
+    //     const {uid, isPresenter, timestamp} = data;
+
+    //     // If this is the local user's presenter attribute, restore their state
+    //     // Pass shouldSendEvent: false to avoid sending the event again (infinite loop)
+    //     if (uid === localUidRef.current && !isHostRef.current) {
+    //       if (isPresenter) {
+    //         onMakeMePresenterRef.current('start', false);
+    //       } else {
+    //         onMakeMePresenterRef.current('stop', false);
+    //       }
+    //     }
+
+    //     // Host updates customRTMMainRoomData with presenter status
+    //     // This is mainly for syncing state when host rejoins and reads persisted attributes
+    //     if (isHostRef.current) {
+    //       if (isPresenter) {
+    //         setCustomRTMMainRoomData(prev => {
+    //           const currentPresenters = prev.breakout_room_presenters || [];
+    //           // Check if already in the list (avoid duplicate from makePresenter)
+    //           const exists = currentPresenters.find((p: any) => p.uid === uid);
+    //           if (exists) {
+    //             return prev;
+    //           }
+    //           return {
+    //             ...prev,
+    //             breakout_room_presenters: [
+    //               ...currentPresenters,
+    //               {uid, timestamp},
+    //             ],
+    //           };
+    //         });
+    //       } else {
+    //         // Remove from presenters list
+    //         setCustomRTMMainRoomData(prev => ({
+    //           ...prev,
+    //           breakout_room_presenters: (
+    //             prev.breakout_room_presenters || []
+    //           ).filter((p: any) => p.uid !== uid),
+    //         }));
+    //       }
+    //     }
+    //   } catch (error) {
+    //     logger.log(
+    //       LogSource.Internals,
+    //       'BREAKOUT_ROOM',
+    //       'Error handling presenter attribute event',
+    //       error,
+    //     );
+    //   }
+    // };
+
+    // events.on(
+    //   BreakoutRoomEventNames.BREAKOUT_ROOM_ANNOUNCEMENT,
+    //   handleAnnouncementEvent,
+    // );
+    // events.on(
+    //   EventNames.BREAKOUT_PRESENTER_ATTRIBUTE,
+    //   handlePresenterAttributeEvent,
+    // );
+    // events.on(
+    //   BreakoutRoomEventNames.BREAKOUT_ROOM_MAKE_PRESENTER,
+    //   handleMakePresenterEvent,
+    // );
+    events.on(
+      BreakoutRoomEventNames.BREAKOUT_ROOM_SYNC_STATE,
+      handleBreakoutRoomSyncStateEvent,
+    );
+    events.on(
+      BreakoutRoomEventNames.BREAKOUT_ROOM_HOST_OPERATION_START,
+      handleHostOperationStartEvent,
+    );
+    events.on(
+      BreakoutRoomEventNames.BREAKOUT_ROOM_HOST_OPERATION_END,
+      handleHostOperationEndEvent,
+    );
+
+    return () => {
+      // events.off(BreakoutRoomEventNames.BREAKOUT_ROOM_ANNOUNCEMENT);
+      // events.off(
+      //   EventNames.BREAKOUT_PRESENTER_ATTRIBUTE,
+      //   handlePresenterAttributeEvent,
+      // );
+      // events.off(
+      //   BreakoutRoomEventNames.BREAKOUT_ROOM_MAKE_PRESENTER,
+      //   handleMakePresenterEvent,
+      // );
+      events.off(
+        BreakoutRoomEventNames.BREAKOUT_ROOM_SYNC_STATE,
+        handleBreakoutRoomSyncStateEvent,
+      );
+      events.off(
+        BreakoutRoomEventNames.BREAKOUT_ROOM_HOST_OPERATION_START,
+        handleHostOperationStartEvent,
+      );
+      events.off(
+        BreakoutRoomEventNames.BREAKOUT_ROOM_HOST_OPERATION_END,
+        handleHostOperationEndEvent,
+      );
+    };
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default BreakoutRoomEventsConfigure;

package/template/src/components/breakout-room/events/constants.ts

@@ -0,0 +1,17 @@
+// 9. BREAKOUT ROOM
+const BREAKOUT_ROOM_JOIN_DETAILS = 'BREAKOUT_ROOM_BREAKOUT_ROOM_JOIN_DETAILS';
+const BREAKOUT_ROOM_SYNC_STATE = 'BREAKOUT_ROOM_BREAKOUT_ROOM_STATE';
+const BREAKOUT_ROOM_ANNOUNCEMENT = 'BREAKOUT_ROOM_ANNOUNCEMENT';
+const BREAKOUT_ROOM_MAKE_PRESENTER = 'BREAKOUT_ROOM_MAKE_PRESENTER';
+const BREAKOUT_ROOM_HOST_OPERATION_START = 'BREAKOUT_ROOM_HOST_OPERATION_START';
+const BREAKOUT_ROOM_HOST_OPERATION_END = 'BREAKOUT_ROOM_HOST_OPERATION_END';
+
+const BreakoutRoomEventNames = {
+  BREAKOUT_ROOM_JOIN_DETAILS,
+  BREAKOUT_ROOM_SYNC_STATE,
+  BREAKOUT_ROOM_ANNOUNCEMENT,
+  BREAKOUT_ROOM_MAKE_PRESENTER,
+  BREAKOUT_ROOM_HOST_OPERATION_START,
+  BREAKOUT_ROOM_HOST_OPERATION_END,
+};
+export {BreakoutRoomEventNames};

package/template/src/components/breakout-room/hoc/BreakoutRoomNameRenderer.tsx

@@ -0,0 +1,68 @@
+/*
+********************************************
+ 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, {useMemo} from 'react';
+import {useLocation} from '../../Router';
+import {useBreakoutRoom} from '../context/BreakoutRoomContext';
+import {useLocalUid} from '../../../../agora-rn-uikit';
+
+export interface BreakoutRoomInfo {
+  isInBreakoutMode: boolean;
+  breakoutRoomName: string;
+}
+
+interface BreakoutRoomNameRendererProps {
+  children: (breakoutRoomInfo: BreakoutRoomInfo) => React.ReactNode;
+}
+
+const BreakoutRoomNameRenderer: React.FC<BreakoutRoomNameRendererProps> = ({
+  children,
+}) => {
+  const location = useLocation();
+  const localUid = useLocalUid();
+  const {breakoutGroups = [], breakoutRoomVersion} = useBreakoutRoom();
+
+  const breakoutRoomInfo = useMemo(() => {
+    let breakoutRoomName = '';
+    let isInBreakoutMode = false;
+    let currentRoom = null;
+
+    try {
+      const searchParams = new URLSearchParams(location.search);
+      isInBreakoutMode = searchParams.get('breakout') === 'true';
+
+      if (isInBreakoutMode) {
+        currentRoom = breakoutGroups?.find(
+          group =>
+            group.participants?.hosts?.includes(localUid) ||
+            group.participants?.attendees?.includes(localUid),
+        );
+
+        if (currentRoom?.name) {
+          breakoutRoomName = currentRoom.name;
+        }
+      }
+    } catch (error) {
+      // Safely handle cases where breakout context is not available
+      console.log('BreakoutRoomNameRenderer: Breakout context not available');
+    }
+
+    return {
+      isInBreakoutMode,
+      breakoutRoomName,
+    };
+  }, [location.search, localUid, breakoutRoomVersion]);
+
+  return <>{children(breakoutRoomInfo)}</>;
+};
+
+export default BreakoutRoomNameRenderer;

package/template/src/components/breakout-room/hooks/useBreakoutRoomExit.ts

@@ -0,0 +1,49 @@
+import {useContext} from 'react';
+import {useHistory, useParams} from '../../../components/Router';
+import {useCaption, useContent, useSTTAPI} from 'customization-api';
+
+const useBreakoutRoomExit = (handleLeaveBreakout?: () => void) => {
+  const history = useHistory();
+  const {phrase} = useParams<{phrase: string}>();
+  const {defaultContent} = useContent();
+  const {stop: stopSTTAPI} = useSTTAPI();
+  const {isSTTActive} = useCaption();
+
+  return async () => {
+    try {
+      // stopping STT on call end,if only last user is remaining in call
+      const usersInCall = Object.entries(defaultContent).filter(
+        item =>
+          item[1].type === 'rtc' &&
+          item[1].isHost === 'true' &&
+          !item[1].offline,
+      );
+      if (usersInCall.length === 1 && isSTTActive) {
+        console.log('Stopping stt api as only one host is in the call');
+        stopSTTAPI().catch(error => {
+          console.log('Error stopping stt', error);
+        });
+      }
+
+      // Trigger exit transition if callback provided
+      if (handleLeaveBreakout) {
+        console.log('Triggering breakout room exit transition');
+        handleLeaveBreakout();
+      } else {
+        // Fallback: Navigate directly if no transition callback
+        history.push(`/${phrase}`);
+      }
+    } catch (error) {
+      // Fallback navigation on error
+      if (handleLeaveBreakout) {
+        handleLeaveBreakout();
+      } else {
+        history.push(`/${phrase}`);
+      }
+
+      throw error; // Re-throw so caller can handle
+    }
+  };
+};
+
+export default useBreakoutRoomExit;