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

package/template/src/pages/video-call/BreakoutVideoCall.tsx

@@ -1,213 +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} from 'react';
-import {
-  RtcConfigure,
-  PropsProvider,
-  ChannelProfileType,
-  LocalUserContext,
-  RtcPropsInterface,
-} from '../../../agora-rn-uikit';
-import RtmConfigure from '../../components/RTMConfigure';
-import RTMConfigureBreakoutRoomProvider from '../../rtm/RTMConfigureBreakoutRoomProvider';
-import DeviceConfigure from '../../components/DeviceConfigure';
-import {isMobileUA} from '../../utils/common';
-import {LiveStreamContextProvider} from '../../components/livestream';
-import ScreenshareConfigure from '../../subComponents/screenshare/ScreenshareConfigure';
-import {LayoutProvider} from '../../utils/useLayout';
-import {RecordingProvider} from '../../subComponents/recording/useRecording';
-import {SidePanelProvider} from '../../utils/useSidePanel';
-import {NetworkQualityProvider} from '../../components/NetworkQualityContext';
-import {ChatNotificationProvider} from '../../components/chat-notification/useChatNotification';
-import {ChatUIControlsProvider} from '../../components/chat-ui/useChatUIControls';
-import {ScreenShareProvider} from '../../components/contexts/ScreenShareContext';
-import {LiveStreamDataProvider} from '../../components/contexts/LiveStreamDataContext';
-import {VideoMeetingDataProvider} from '../../components/contexts/VideoMeetingDataContext';
-import {UserPreferenceProvider} from '../../components/useUserPreference';
-import EventsConfigure from '../../components/EventsConfigure';
-import PermissionHelper from '../../components/precall/PermissionHelper';
-import {FocusProvider} from '../../utils/useFocus';
-import {VideoCallProvider} from '../../components/useVideoCall';
-import {CaptionProvider} from '../../subComponents/caption/useCaption';
-import SdkMuteToggleListener from '../../components/SdkMuteToggleListener';
-import {NoiseSupressionProvider} from '../../app-state/useNoiseSupression';
-import {VideoQualityContextProvider} from '../../app-state/useVideoQuality';
-import {VBProvider} from '../../components/virtual-background/useVB';
-import {DisableChatProvider} from '../../components/disable-chat/useDisableChat';
-import {WaitingRoomProvider} from '../../components/contexts/WaitingRoomContext';
-import {ChatMessagesProvider} from '../../components/chat-messages/useChatMessages';
-import VideoCallScreenWrapper from './../video-call/VideoCallScreenWrapper';
-import {BeautyEffectProvider} from '../../components/beauty-effect/useBeautyEffects';
-import {UserActionMenuProvider} from '../../components/useUserActionMenu';
-import {RaiseHandProvider} from '../../components/raise-hand';
-import {BreakoutRoomProvider} from '../../components/breakout-room/context/BreakoutRoomContext';
-import {useSetBreakoutRoomInfo} from '../../components/room-info/useSetBreakoutRoomInfo';
-import {VideoCallContentProps} from './VideoCallContent';
-import BreakoutRoomEventsConfigure from '../../components/breakout-room/events/BreakoutRoomEventsConfigure';
-import {RTM_ROOMS} from '../../rtm/constants';
-import {BreakoutChannelJoinEventPayload} from '../../components/breakout-room/state/types';
-
-interface BreakoutVideoCallProps extends VideoCallContentProps {
-  rtcProps: RtcPropsInterface;
-  breakoutJoinChannelDetails: BreakoutChannelJoinEventPayload['data']['data'];
-  onLeave: () => void;
-}
-
-const BreakoutVideoCall: React.FC<BreakoutVideoCallProps> = ({
-  rtcProps,
-  breakoutJoinChannelDetails,
-  onLeave,
-  callActive,
-  callbacks,
-  styleProps,
-}) => {
-  const {setBreakoutRoomChannelInfo} = useSetBreakoutRoomInfo();
-  const [isRecordingActive, setRecordingActive] = useState(false);
-  const [sttAutoStarted, setSttAutoStarted] = useState(false);
-  const [recordingAutoStarted, setRecordingAutoStarted] = useState(false);
-  const [breakoutRoomRTCProps, setBreakoutRoomRtcProps] = useState({
-    ...rtcProps,
-    channel: breakoutJoinChannelDetails.channel_name,
-    uid: breakoutJoinChannelDetails.mainUser.uid as number,
-    token: breakoutJoinChannelDetails.mainUser.rtc,
-    rtm: breakoutJoinChannelDetails.mainUser.rtm,
-    screenShareUid: breakoutJoinChannelDetails?.screenShare.uid as number,
-    screenShareToken: breakoutJoinChannelDetails?.screenShare.rtc,
-  });
-
-  // Set breakout room data when component mounts
-  useEffect(() => {
-    setBreakoutRoomChannelInfo({
-      isBreakoutMode: true,
-      ...breakoutJoinChannelDetails,
-    });
-  }, [breakoutJoinChannelDetails]);
-
-  return (
-    <PropsProvider
-      value={{
-        rtcProps: {
-          ...breakoutRoomRTCProps,
-          callActive,
-        },
-        callbacks,
-        styleProps,
-        mode: $config.EVENT_MODE
-          ? ChannelProfileType.ChannelProfileLiveBroadcasting
-          : ChannelProfileType.ChannelProfileCommunication,
-      }}>
-      <RtcConfigure>
-        <DeviceConfigure>
-          <NoiseSupressionProvider callActive={callActive}>
-            <VideoQualityContextProvider>
-              <ChatUIControlsProvider>
-                <ChatNotificationProvider>
-                  <LayoutProvider>
-                    <FocusProvider>
-                      <SidePanelProvider>
-                        <ChatMessagesProvider callActive={callActive}>
-                          <ScreenShareProvider>
-                            <RTMConfigureBreakoutRoomProvider
-                              callActive={callActive}
-                              currentChannel={breakoutRoomRTCProps.channel}>
-                              <RtmConfigure room={RTM_ROOMS.BREAKOUT}>
-                                <UserPreferenceProvider callActive={callActive}>
-                                  <CaptionProvider>
-                                    <WaitingRoomProvider>
-                                      <EventsConfigure
-                                        setSttAutoStarted={setSttAutoStarted}
-                                        sttAutoStarted={sttAutoStarted}
-                                        callActive={callActive}>
-                                        <ScreenshareConfigure
-                                          isRecordingActive={isRecordingActive}>
-                                          <LiveStreamContextProvider
-                                            value={{
-                                              setRtcProps:
-                                                setBreakoutRoomRtcProps,
-                                              rtcProps: breakoutRoomRTCProps,
-                                              callActive,
-                                            }}>
-                                            <LiveStreamDataProvider>
-                                              <LocalUserContext
-                                                localUid={
-                                                  breakoutRoomRTCProps?.uid
-                                                }>
-                                                <RecordingProvider
-                                                  value={{
-                                                    setRecordingActive,
-                                                    isRecordingActive,
-                                                    callActive,
-                                                    recordingAutoStarted,
-                                                    setRecordingAutoStarted,
-                                                  }}>
-                                                  <NetworkQualityProvider>
-                                                    {!isMobileUA() && (
-                                                      <PermissionHelper />
-                                                    )}
-                                                    <UserActionMenuProvider>
-                                                      <VBProvider>
-                                                        <BeautyEffectProvider>
-                                                          <SdkMuteToggleListener>
-                                                            <VideoMeetingDataProvider>
-                                                              <VideoCallProvider>
-                                                                <DisableChatProvider>
-                                                                  <RaiseHandProvider>
-                                                                    <BreakoutRoomProvider
-                                                                      mainChannel={
-                                                                        rtcProps.channel
-                                                                      }
-                                                                      handleLeaveBreakout={
-                                                                        onLeave
-                                                                      }>
-                                                                      <BreakoutRoomEventsConfigure
-                                                                        mainChannelName={
-                                                                          rtcProps.channel
-                                                                        }>
-                                                                        <VideoCallScreenWrapper />
-                                                                      </BreakoutRoomEventsConfigure>
-                                                                    </BreakoutRoomProvider>
-                                                                  </RaiseHandProvider>
-                                                                </DisableChatProvider>
-                                                              </VideoCallProvider>
-                                                            </VideoMeetingDataProvider>
-                                                          </SdkMuteToggleListener>
-                                                        </BeautyEffectProvider>
-                                                      </VBProvider>
-                                                    </UserActionMenuProvider>
-                                                  </NetworkQualityProvider>
-                                                </RecordingProvider>
-                                              </LocalUserContext>
-                                            </LiveStreamDataProvider>
-                                          </LiveStreamContextProvider>
-                                        </ScreenshareConfigure>
-                                      </EventsConfigure>
-                                    </WaitingRoomProvider>
-                                  </CaptionProvider>
-                                </UserPreferenceProvider>
-                              </RtmConfigure>
-                            </RTMConfigureBreakoutRoomProvider>
-                          </ScreenShareProvider>
-                        </ChatMessagesProvider>
-                      </SidePanelProvider>
-                    </FocusProvider>
-                  </LayoutProvider>
-                </ChatNotificationProvider>
-              </ChatUIControlsProvider>
-            </VideoQualityContextProvider>
-          </NoiseSupressionProvider>
-        </DeviceConfigure>
-      </RtcConfigure>
-    </PropsProvider>
-  );
-};
-
-export default BreakoutVideoCall;

package/template/src/pages/video-call/VideoCallContent.tsx

@@ -1,211 +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, useCallback} from 'react';
-import {useParams, useLocation, useHistory} from '../../components/Router';
-import events from '../../rtm-events-api';
-import {BreakoutChannelJoinEventPayload} from '../../components/breakout-room/state/types';
-import {CallbacksInterface, RtcPropsInterface} from '../../../agora-rn-uikit';
-import VideoCall from '../VideoCall';
-import BreakoutVideoCall from './BreakoutVideoCall';
-import {BreakoutRoomEventNames} from '../../components/breakout-room/events/constants';
-import BreakoutRoomTransition from '../../components/breakout-room/ui/BreakoutRoomTransition';
-import Toast from '../../../react-native-toast-message';
-import {useMainRoomUserDisplayName} from '../../rtm/hooks/useMainRoomUserDisplayName';
-import {
-  useSetBreakoutRoomInfo,
-  BreakoutRoomInfoProvider,
-} from '../../components/room-info/useSetBreakoutRoomInfo';
-
-export interface VideoCallContentProps {
-  callActive: boolean;
-  setCallActive: React.Dispatch<React.SetStateAction<boolean>>;
-  rtcProps: RtcPropsInterface;
-  setRtcProps: React.Dispatch<React.SetStateAction<Partial<RtcPropsInterface>>>;
-  callbacks: CallbacksInterface;
-  styleProps: any;
-}
-
-const VideoCallContent: React.FC<VideoCallContentProps> = props => {
-  const {phrase} = useParams<{phrase: string}>();
-  const location = useLocation();
-  const history = useHistory();
-
-  // Room Info:
-  const {setBreakoutRoomChannelInfo, clearBreakoutRoomChannelInfo} =
-    useSetBreakoutRoomInfo();
-
-  // Parse URL to determine current mode
-  const searchParams = new URLSearchParams(location.search);
-  const isBreakoutMode = searchParams.get('breakout') === 'true';
-
-  const breakoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const mainRoomLocalUid = props.rtcProps.uid;
-  const getDisplayName = useMainRoomUserDisplayName();
-
-  // Breakout channel details (populated by RTM events)
-  const [breakoutJoinChannelDetails, setBreakoutJoinChannelDetails] = useState<
-    BreakoutChannelJoinEventPayload['data']['data'] | null
-  >(null);
-
-  // Track transition direction for better UX
-  const [transitionDirection, setTransitionDirection] = useState<
-    'enter' | 'exit'
-  >('exit');
-
-  // Listen for breakout room join events
-  useEffect(() => {
-    const handleBreakoutJoin = (evtData: any) => {
-      try {
-        // Clear any existing timeout
-        if (breakoutTimeoutRef.current) {
-          clearTimeout(breakoutTimeoutRef.current);
-        }
-        // Process the event payload
-        const {payload} = evtData;
-        const data: BreakoutChannelJoinEventPayload = JSON.parse(payload);
-        console.log('Breakout room join event received', data);
-        if (data?.data?.act === 'CHAN_JOIN') {
-          const {channel_name, mainUser, screenShare, chat, room_name} =
-            data.data.data;
-
-          // Set transition flag - component will unmount/remount when entering breakout
-          sessionStorage.setItem('breakout_room_transition', 'true');
-          console.log('Set breakout transition flag for channel join');
-
-          // Set breakout state active
-          history.push(`/${phrase}?breakout=true`);
-          setBreakoutJoinChannelDetails(null);
-          setTransitionDirection('enter'); // Set direction for entering
-          // Add state after a delay to show transitioning screen
-          breakoutTimeoutRef.current = setTimeout(() => {
-            setBreakoutJoinChannelDetails(prev => ({
-              ...prev,
-              ...data.data.data,
-            }));
-            breakoutTimeoutRef.current = null;
-          }, 800);
-          let joinMessage = '';
-          const sourceUid = data?.data?.srcuid;
-          const senderName = getDisplayName(sourceUid);
-          if (sourceUid === mainRoomLocalUid) {
-            joinMessage = `You have joined room "${room_name}".`;
-          } else {
-            joinMessage = `Host: ${senderName} has moved you to room "${room_name}".`;
-          }
-          setTimeout(() => {
-            Toast.show({
-              leadingIconName: 'open-room',
-              type: 'success',
-              text1: joinMessage,
-              visibilityTime: 3000,
-            });
-          }, 500);
-        }
-      } catch (error) {
-        console.error('Failed to process breakout join event');
-      }
-    };
-
-    // Register breakout join event listener
-    events.on(
-      BreakoutRoomEventNames.BREAKOUT_ROOM_JOIN_DETAILS,
-      handleBreakoutJoin,
-    );
-
-    return () => {
-      // Cleanup event listener
-      events.off(
-        BreakoutRoomEventNames.BREAKOUT_ROOM_JOIN_DETAILS,
-        handleBreakoutJoin,
-      );
-    };
-  }, [
-    phrase,
-    getDisplayName,
-    mainRoomLocalUid,
-    setBreakoutRoomChannelInfo,
-    history,
-  ]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (breakoutTimeoutRef.current) {
-        clearTimeout(breakoutTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Handle leaving breakout room
-  const handleLeaveBreakout = useCallback(() => {
-    console.log('Leaving breakout room, returning to main room');
-
-    // Clear breakout room info to return to main room
-    clearBreakoutRoomChannelInfo();
-
-    // Set direction for exiting
-    setTransitionDirection('exit');
-    // Clear breakout channel details to show transition
-    setBreakoutJoinChannelDetails(null);
-    // Navigate back to main room after a delay
-    setTimeout(() => {
-      history.push(`/${phrase}`);
-    }, 800);
-  }, [history, phrase, clearBreakoutRoomChannelInfo]);
-
-  // Route protection: Prevent direct navigation to breakout route
-  useEffect(() => {
-    if (isBreakoutMode && !breakoutJoinChannelDetails) {
-      // If user navigated to breakout route without valid channel details,
-      // redirect to main room after a short delay to prevent infinite loops
-      const redirectTimer = setTimeout(() => {
-        console.log('Invalid breakout route access, redirecting to main room');
-        history.replace(`/${phrase}`); // Use replace to prevent back navigation
-      }, 2000); // Give 2s for legitimate transitions
-
-      return () => clearTimeout(redirectTimer);
-    }
-  }, [isBreakoutMode, breakoutJoinChannelDetails, history, phrase]);
-
-  // Conditional rendering based on URL params
-  return (
-    <>
-      {isBreakoutMode ? (
-        breakoutJoinChannelDetails?.channel_name ? (
-          // Breakout Room Mode - Fresh component instance
-          <BreakoutRoomInfoProvider>
-            <BreakoutVideoCall
-              key={`breakout-${breakoutJoinChannelDetails.channel_name}`}
-              breakoutJoinChannelDetails={breakoutJoinChannelDetails}
-              onLeave={handleLeaveBreakout}
-              {...props}
-            />
-          </BreakoutRoomInfoProvider>
-        ) : (
-          <BreakoutRoomTransition
-            direction={transitionDirection}
-            onTimeout={() => {
-              setBreakoutJoinChannelDetails(null);
-            }}
-          />
-        )
-      ) : (
-        // Main Room Mode - Fresh component instance
-        <VideoCall key={`main-${phrase}`} {...props} />
-      )}
-    </>
-  );
-};
-
-export default VideoCallContent;