agora-appbuilder-core 3.0.9 → 4.0.0-api.1

package/template/src/pages/VideoCall.tsx

@@ -10,21 +10,24 @@
 *********************************************
 */
 // @ts-nocheck
-import React, {useState, useContext, useEffect} from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import React, {useState, useContext, useEffect, useRef} from 'react';
+import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {
   RtcConfigure,
   PropsProvider,
   ClientRole,
   ChannelProfile,
   LocalUserContext,
+  UidType,
+  CallbacksInterface,
+  ToggleState,
 } from '../../agora-rn-uikit';
 import styles from '../components/styles';
 import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {useHasBrandLogo, isArray} from '../utils/common';
+import {useHasBrandLogo, isArray, isMobileUA} from '../utils/common';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
@@ -37,14 +40,17 @@ import Precall from '../components/Precall';
 import {useString} from '../utils/useString';
 import useLayoutsData from './video-call/useLayoutsData';
 import {RecordingProvider} from '../subComponents/recording/useRecording';
-import useJoinMeeting from '../utils/useJoinMeeting';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import useJoinRoom from '../utils/useJoinRoom';
+import {
+  useRoomInfo,
+  RoomInfoDefaultValue,
+  validateMeetingInfoData,
+} from '../components/room-info/useRoomInfo';
 import {SidePanelProvider} from '../utils/useSidePanel';
 import VideoCallScreen from './video-call/VideoCallScreen';
 import {NetworkQualityProvider} from '../components/NetworkQualityContext';
-import CustomUserContextHolder from './video-call/CustomUserContextHolder';
 import {ChatNotificationProvider} from '../components/chat-notification/useChatNotification';
-import {ChatUIControlProvider} from '../components/chat-ui/useChatUIControl';
+import {ChatUIControlsProvider} from '../components/chat-ui/useChatUIControls';
 import {ChatMessagesProvider} from '../components/chat-messages/useChatMessages';
 import {ScreenShareProvider} from '../components/contexts/ScreenShareContext';
 import {LiveStreamDataProvider} from '../components/contexts/LiveStreamDataContext';
@@ -54,6 +60,12 @@ import {useWakeLock} from '../components/useWakeLock';
 import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
 import EventsConfigure from '../components/EventsConfigure';
+import PermissionHelper from '../components/precall/PermissionHelper';
+import {currentFocus, FocusProvider} from '../utils/useFocus';
+import {VideoCallProvider} from '../components/useVideoCall';
+import {SdkApiContext, SDK_MEETING_TAG} from '../components/SdkApiContext';
+import isSDK from '../utils/isSDK';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 
 enum RnEncryptionEnum {
   /**
@@ -99,6 +111,9 @@ const VideoCall: React.FC = () => {
   const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
+  const [currentFocus, setFocus] = useState<currentFocus>({
+    editName: false,
+  });
   const {phrase} = useParams<{phrase: string}>();
   // commented for v1 release
   //const lifecycle = useCustomization((data) => data.lifecycle);
@@ -118,13 +133,21 @@ const VideoCall: React.FC = () => {
     role: ClientRole.Broadcaster,
     geoFencing: $config.GEO_FENCING,
     audioRoom: $config.AUDIO_ROOM,
+    activeSpeaker: $config.ACTIVE_SPEAKER,
   });
 
-  const useJoin = useJoinMeeting();
+  const {join: SdkJoinState, clearState} = useContext(SdkApiContext);
+  const history = useHistory();
+  const currentMeetingPhrase = useRef(history.location.pathname);
+
+  const useJoin = useJoinRoom();
+  const {setRoomInfo} = useSetRoomInfo();
+  const {isJoinDataFetched, data} = useRoomInfo();
 
   React.useEffect(() => {
     return () => {
       console.log('Videocall unmounted');
+      setRoomInfo(RoomInfoDefaultValue);
       if (awake) {
         release();
       }
@@ -132,17 +155,56 @@ const VideoCall: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    useJoin(phrase)
-      .then(() => {})
-      .catch((error) => {
-        setGlobalErrorMessage(error);
-      });
+    if (!SdkJoinState.phrase) {
+      useJoin(phrase)
+        .then(() => {})
+        .catch((error) => {
+          setGlobalErrorMessage(error);
+          history.push('/');
+        });
+    }
   }, []);
 
-  const {isJoinDataFetched, data} = useMeetingInfo();
+  useEffect(() => {
+    if (!isSDK() || !SdkJoinState.initialized) {
+      return;
+    }
+    const {
+      phrase: sdkMeetingPhrase,
+      meetingDetails: sdkMeetingDetails,
+      skipPrecall,
+      promise,
+    } = SdkJoinState;
+
+    const sdkMeetingPath = `/${sdkMeetingPhrase}`;
+
+    setCallActive(skipPrecall);
+
+    if (sdkMeetingDetails) {
+      setQueryComplete(false);
+      setRoomInfo((roomInfo) => {
+        return {
+          isJoinDataFetched: true,
+          data: {
+            ...roomInfo.data,
+            ...sdkMeetingDetails,
+          },
+        };
+      });
+    } else if (sdkMeetingPhrase) {
+      setQueryComplete(false);
+      currentMeetingPhrase.current = sdkMeetingPath;
+      useJoin(sdkMeetingPhrase).catch((error) => {
+        setGlobalErrorMessage(error);
+        history.push('/');
+        currentMeetingPhrase.current = '';
+        promise.rej(error);
+      });
+    }
+  }, [SdkJoinState]);
 
   React.useEffect(() => {
-    if (isJoinDataFetched === true) {
+    if (isJoinDataFetched === true && !queryComplete) {
       setRtcProps({
         appId: $config.APP_ID,
         channel: data.channel,
@@ -163,25 +225,60 @@ const VideoCall: React.FC = () => {
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
         geoFencing: $config.GEO_FENCING,
         audioRoom: $config.AUDIO_ROOM,
+        activeSpeaker: $config.ACTIVE_SPEAKER,
       });
 
       // 1. Store the display name from API
       // if (data.username) {
       //   setUsername(data.username);
       // }
-      queryComplete ? {} : setQueryComplete(isJoinDataFetched);
+      setQueryComplete(true);
     }
-  }, [isJoinDataFetched]);
+  }, [isJoinDataFetched, data, queryComplete]);
 
-  const history = useHistory();
-  const callbacks = {
-    EndCall: () =>
+  const callbacks: CallbacksInterface = {
+    // RtcLeft: () => {},
+    // RtcJoined: () => {
+    //   if (SdkJoinState.phrase && SdkJoinState.skipPrecall) {
+    //     SdkJoinState.promise?.res();
+    //   }
+    // },
+    EndCall: () => {
+      clearState('join');
       setTimeout(() => {
         SDKEvents.emit('leave');
         history.push('/');
-      }, 0),
+      }, 0);
+    },
+    UserJoined: (uid: UidType) => {
+      console.log('UIKIT Callback: UserJoined', uid);
+      SDKEvents.emit('rtc-user-joined', uid);
+    },
+    UserOffline: (uid: UidType) => {
+      console.log('UIKIT Callback: UserOffline', uid);
+      SDKEvents.emit('rtc-user-joined', uid);
+    },
+    RemoteAudioStateChanged: (uid: UidType, status: 0 | 2) => {
+      console.log('UIKIT Callback: RemoteAudioStateChanged', uid, status);
+      if (status === 0) {
+        SDKEvents.emit('rtc-user-unpublished', uid, 'audio');
+      } else {
+        SDKEvents.emit('rtc-user-published', uid, 'audio');
+      }
+    },
+    RemoteVideoStateChanged: (uid: UidType, status: 0 | 2) => {
+      console.log('UIKIT Callback: RemoteVideoStateChanged', uid, status);
+      if (status === 0) {
+        SDKEvents.emit('rtc-user-unpublished', uid, 'video');
+      } else {
+        SDKEvents.emit('rtc-user-published', uid, 'video');
+      }
+    },
   };
-
+  const [isCameraAvailable, setCameraAvailable] = useState(false);
+  const [isMicAvailable, setMicAvailable] = useState(false);
+  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
+  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
   return (
     <>
       {queryComplete ? (
@@ -203,52 +300,65 @@ const VideoCall: React.FC = () => {
               }}>
               <RtcConfigure>
                 <DeviceConfigure>
-                  <ChatUIControlProvider>
+                  <ChatUIControlsProvider>
                     <ChatNotificationProvider>
                       <LayoutProvider
                         value={{
                           currentLayout,
                           setLayout,
                         }}>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
-                          <ChatMessagesProvider>
-                            <ScreenShareProvider>
-                              <RtmConfigure
-                                setRecordingActive={setRecordingActive}
-                                callActive={callActive}>
-                                <UserPreferenceProvider>
-                                  <EventsConfigure>
-                                    <WhiteboardProvider>
-                                      <RecordingProvider
-                                        value={{
-                                          setRecordingActive,
-                                          isRecordingActive,
-                                        }}>
-                                        <ScreenshareConfigure>
-                                          <LiveStreamContextProvider
-                                            value={{
-                                              setRtcProps,
-                                              rtcProps,
-                                              callActive,
-                                            }}>
-                                            <LiveStreamDataProvider>
-                                              <LocalUserContext
-                                                localUid={rtcProps?.uid || 0}>
-                                                <CustomUserContextHolder>
+                        <FocusProvider value={{currentFocus, setFocus}}>
+                          <SidePanelProvider
+                            value={{
+                              sidePanel,
+                              setSidePanel,
+                            }}>
+                            <ChatMessagesProvider>
+                              <ScreenShareProvider>
+                                <RtmConfigure
+                                  setRecordingActive={setRecordingActive}
+                                  callActive={callActive}>
+                                  <UserPreferenceProvider>
+                                    <EventsConfigure>
+                                      <WhiteboardProvider>
+                                        <RecordingProvider
+                                          value={{
+                                            setRecordingActive,
+                                            isRecordingActive,
+                                          }}>
+                                          <ScreenshareConfigure>
+                                            <LiveStreamContextProvider
+                                              value={{
+                                                setRtcProps,
+                                                rtcProps,
+                                                callActive,
+                                              }}>
+                                              <LiveStreamDataProvider>
+                                                <LocalUserContext
+                                                  localUid={rtcProps?.uid}>
                                                   <NetworkQualityProvider>
+                                                    {!isMobileUA() && (
+                                                      <PermissionHelper />
+                                                    )}
                                                     {callActive ? (
                                                       <VideoMeetingDataProvider>
-                                                        <VideoCallScreen />
+                                                        <VideoCallProvider>
+                                                          <VideoCallScreen />
+                                                        </VideoCallProvider>
                                                       </VideoMeetingDataProvider>
                                                     ) : $config.PRECALL ? (
                                                       <PreCallProvider
                                                         value={{
                                                           callActive,
                                                           setCallActive,
+                                                          isCameraAvailable,
+                                                          isMicAvailable,
+                                                          setCameraAvailable,
+                                                          setMicAvailable,
+                                                          isPermissionRequested,
+                                                          setIsPermissionRequested,
+                                                          isSpeakerAvailable,
+                                                          setSpeakerAvailable,
                                                         }}>
                                                         <Precall />
                                                       </PreCallProvider>
@@ -256,22 +366,22 @@ const VideoCall: React.FC = () => {
                                                       <></>
                                                     )}
                                                   </NetworkQualityProvider>
-                                                </CustomUserContextHolder>
-                                              </LocalUserContext>
-                                            </LiveStreamDataProvider>
-                                          </LiveStreamContextProvider>
-                                        </ScreenshareConfigure>
-                                      </RecordingProvider>
-                                    </WhiteboardProvider>
-                                  </EventsConfigure>
-                                </UserPreferenceProvider>
-                              </RtmConfigure>
-                            </ScreenShareProvider>
-                          </ChatMessagesProvider>
-                        </SidePanelProvider>
+                                                </LocalUserContext>
+                                              </LiveStreamDataProvider>
+                                            </LiveStreamContextProvider>
+                                          </ScreenshareConfigure>
+                                        </RecordingProvider>
+                                      </WhiteboardProvider>
+                                    </EventsConfigure>
+                                  </UserPreferenceProvider>
+                                </RtmConfigure>
+                              </ScreenShareProvider>
+                            </ChatMessagesProvider>
+                          </SidePanelProvider>
+                        </FocusProvider>
                       </LayoutProvider>
                     </ChatNotificationProvider>
-                  </ChatUIControlProvider>
+                  </ChatUIControlsProvider>
                 </DeviceConfigure>
               </RtcConfigure>
             </PropsProvider>
@@ -302,7 +412,7 @@ const styleProps = {
     recording: styles.localButton,
     screenshare: styles.localButton,
   },
-  theme: $config.PRIMARY_COLOR,
+  theme: $config.PRIMARY_ACTION_BRAND_COLOR,
   remoteBtnStyles: {
     muteRemoteAudio: styles.remoteButton,
     muteRemoteVideo: styles.remoteButton,
@@ -330,7 +440,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: 30,
   },
-  loaderText: {fontWeight: '500', color: $config.PRIMARY_FONT_COLOR},
+  loaderText: {fontWeight: '500', color: $config.FONT_COLOR},
 });
 
 export default VideoCall;

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -0,0 +1,215 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import React, {useCallback, useRef, useState} from 'react';
+import BottomSheet, {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import KeyboardManager from 'react-native-keyboard-manager';
+
+import Chat from '../../components/Chat';
+import ParticipantView from '../../components/ParticipantsView';
+import SettingsView from '../../components/SettingsView';
+import ActionSheetContent from './ActionSheetContent';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useSidePanel} from '../../utils/useSidePanel';
+import {isIOS} from '../../utils/common';
+import ActionSheetHandle from './ActionSheetHandle';
+import Spacer from '../../atoms/Spacer';
+
+//topbar btn template is used to show icons without label text (as in desktop : bottomBar)
+
+const ActionSheet = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const {sidePanel, setSidePanel} = useSidePanel();
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const chatSheetRef = useRef<BottomSheetModal>(null);
+  const participantsSheetRef = useRef<BottomSheetModal>(null);
+  const settingsSheetRef = useRef<BottomSheetModal>(null);
+
+  // callbacks
+  const handleSheetChanges = useCallback((index: number) => {
+    bottomSheetRef.current?.snapToIndex(index);
+    index === 0 ? setIsExpanded(false) : setIsExpanded(true);
+  }, []);
+
+  React.useEffect(() => {
+    bottomSheetRef?.current.present();
+  }, []);
+
+  // updating on sidepanel changes
+  React.useEffect(() => {
+    switch (sidePanel) {
+      case SidePanelType.Participants: {
+        participantsSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.Chat: {
+        chatSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.Settings: {
+        settingsSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.None: {
+        chatSheetRef?.current.close();
+        participantsSheetRef?.current.close();
+        settingsSheetRef?.current.close();
+        handleSheetChanges(0);
+      }
+      default:
+        bottomSheetRef?.current.present();
+    }
+  }, [sidePanel]);
+
+  React.useEffect(() => {
+    if (isIOS()) {
+      KeyboardManager.setEnable(false);
+      return () => KeyboardManager.setEnable(true);
+    }
+  }, []);
+
+  function onDismiss() {
+    setSidePanel(SidePanelType.None);
+  }
+
+  return (
+    <BottomSheetModalProvider>
+      {isExpanded && (
+        <TouchableWithoutFeedback onPress={() => handleSheetChanges(0)}>
+          <View style={[styles.backDrop]} />
+        </TouchableWithoutFeedback>
+      )}
+      {/* Controls  Action Sheet*/}
+      <BottomSheetModal
+        snapPoints={[100, 350]}
+        ref={bottomSheetRef}
+        onChange={handleSheetChanges}
+        enablePanDownToClose={false}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        stackBehavior="push"
+        handleComponent={() => (
+          <>
+            <ActionSheetHandle sidePanel={SidePanelType.None} />
+            <Spacer size={12} />
+          </>
+        )}
+        handleIndicatorStyle={styles.handleIndicatorStyle}>
+        <BottomSheetView>
+          <ActionSheetContent
+            handleSheetChanges={handleSheetChanges}
+            isExpanded={isExpanded}
+          />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Chat Action Sheet */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        name="ChatSheet"
+        onDismiss={onDismiss}
+        ref={chatSheetRef}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Chat} />
+        )}
+        keyboardBehavior="extend"
+        stackBehavior="push">
+        <BottomSheetView>
+          <Chat showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Participants Action Sheet */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        ref={participantsSheetRef}
+        onDismiss={onDismiss}
+        name="ParticipantsSheet"
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Participants} />
+        )}
+        stackBehavior="push">
+        <BottomSheetView>
+          <ParticipantView showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Settings Action Sheet  */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        ref={settingsSheetRef}
+        name="SettingsSheet"
+        onDismiss={onDismiss}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Settings} />
+        )}
+        stackBehavior="push">
+        <BottomSheetView>
+          <SettingsView showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+    </BottomSheetModalProvider>
+  );
+};
+
+export default ActionSheet;
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    borderColor: '#EDF0F1',
+    flexWrap: 'wrap',
+  },
+
+  container: {
+    shadowColor: '#000000',
+    shadowOffset: {width: 0, height: -4},
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  backgroundStyle: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
+
+  handleIndicatorStyle: {
+    // backgroundColor: $config.SEMANTIC_NEUTRAL,
+    // width: 40,
+    // height: 4,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    opacity: 0.5,
+  },
+});