agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/src/pages/VideoCall.tsx

@@ -24,7 +24,7 @@ import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {hasBrandLogo, isArray} from '../utils/common';
+import {useHasBrandLogo, isArray} from '../utils/common';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
@@ -32,10 +32,10 @@ import ScreenshareConfigure from '../subComponents/screenshare/ScreenshareConfig
 import {ErrorContext} from '.././components/common/index';
 import {PreCallProvider} from '../components/precall/usePreCall';
 import {LayoutProvider} from '../utils/useLayout';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import Precall from '../components/Precall';
 import {useString} from '../utils/useString';
-import useCustomLayout from './video-call/CustomLayout';
+import useLayoutsData from './video-call/useLayoutsData';
 import {RecordingProvider} from '../subComponents/recording/useRecording';
 import useJoinMeeting from '../utils/useJoinMeeting';
 import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
@@ -48,11 +48,12 @@ import {ChatUIControlProvider} from '../components/chat-ui/useChatUIControl';
 import {ChatMessagesProvider} from '../components/chat-messages/useChatMessages';
 import {ScreenShareProvider} from '../components/contexts/ScreenShareContext';
 import {LiveStreamDataProvider} from '../components/contexts/LiveStreamDataContext';
+import {VideoMeetingDataProvider} from '../components/contexts/VideoMeetingDataContext';
 import {WhiteboardProvider} from '../components/contexts/WhiteboardContext';
 import {useWakeLock} from '../components/useWakeLock';
-import StorageContext from '../components/StorageContext';
 import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
+import EventsConfigure from '../components/EventsConfigure';
 
 enum RnEncryptionEnum {
   /**
@@ -81,6 +82,7 @@ enum RnEncryptionEnum {
 }
 
 const VideoCall: React.FC = () => {
+  const hasBrandLogo = useHasBrandLogo();
   //commented for v1 release
   //const joiningLoaderLabel = useString('joiningLoaderLabel')();
   const joiningLoaderLabel = 'Starting Call. Just a second.';
@@ -89,9 +91,9 @@ const VideoCall: React.FC = () => {
   const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
 
   //layouts
-  const layouts = useCustomLayout();
+  const layouts = useLayoutsData();
   const defaultLayoutName = isArray(layouts) ? layouts[0].name : '';
-  const [activeLayoutName, setActiveLayoutName] = useState(defaultLayoutName);
+  const [currentLayout, setLayout] = useState(defaultLayoutName);
   //layouts
 
   const [isRecordingActive, setRecordingActive] = useState(false);
@@ -99,7 +101,7 @@ const VideoCall: React.FC = () => {
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
   const {phrase} = useParams<{phrase: string}>();
   // commented for v1 release
-  //const lifecycle = useFpe((data) => data.lifecycle);
+  //const lifecycle = useCustomization((data) => data.lifecycle);
   const [rtcProps, setRtcProps] = React.useState({
     appId: $config.APP_ID,
     channel: null,
@@ -115,6 +117,7 @@ const VideoCall: React.FC = () => {
       : false,
     role: ClientRole.Broadcaster,
     geoFencing: $config.GEO_FENCING,
+    audioRoom: $config.AUDIO_ROOM,
   });
 
   const useJoin = useJoinMeeting();
@@ -136,38 +139,39 @@ const VideoCall: React.FC = () => {
       });
   }, []);
 
-  const data = useMeetingInfo();
+  const {isJoinDataFetched, data} = useMeetingInfo();
 
   React.useEffect(() => {
-    if (data.isJoinDataFetched === true) {
+    if (isJoinDataFetched === true) {
       setRtcProps({
         appId: $config.APP_ID,
         channel: data.channel,
         uid: data.uid,
         token: data.token,
-        rtm: data.rtm,
+        rtm: data.rtmToken,
         dual: true,
         profile: $config.PROFILE,
         encryption: $config.ENCRYPTION_ENABLED
           ? {
-              key: data.secret,
+              key: data.encryptionSecret,
               mode: RnEncryptionEnum.AES128XTS,
-              screenKey: data.secret,
+              screenKey: data.encryptionSecret,
             }
           : false,
         screenShareUid: data.screenShareUid,
         screenShareToken: data.screenShareToken,
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
         geoFencing: $config.GEO_FENCING,
+        audioRoom: $config.AUDIO_ROOM,
       });
 
       // 1. Store the display name from API
       // if (data.username) {
       //   setUsername(data.username);
       // }
-      queryComplete ? {} : setQueryComplete(data.isJoinDataFetched);
+      queryComplete ? {} : setQueryComplete(isJoinDataFetched);
     }
-  }, [data?.isJoinDataFetched]);
+  }, [isJoinDataFetched]);
 
   const history = useHistory();
   const callbacks = {
@@ -201,67 +205,71 @@ const VideoCall: React.FC = () => {
                 <DeviceConfigure>
                   <ChatUIControlProvider>
                     <ChatNotificationProvider>
-                      <ChatMessagesProvider>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
+                      <SidePanelProvider
+                        value={{
+                          sidePanel,
+                          setSidePanel,
+                        }}>
+                        <ChatMessagesProvider>
                           <ScreenShareProvider>
                             <RtmConfigure
                               setRecordingActive={setRecordingActive}
                               callActive={callActive}>
                               <UserPreferenceProvider>
-                                <WhiteboardProvider>
-                                  <LayoutProvider
-                                    value={{
-                                      activeLayoutName,
-                                      setActiveLayoutName,
-                                    }}>
-                                    <RecordingProvider
+                                <EventsConfigure>
+                                  <WhiteboardProvider>
+                                    <LayoutProvider
                                       value={{
-                                        setRecordingActive,
-                                        isRecordingActive,
+                                        currentLayout,
+                                        setLayout,
                                       }}>
-                                      <ScreenshareConfigure>
-                                        <LiveStreamContextProvider
-                                          value={{
-                                            setRtcProps,
-                                            rtcProps,
-                                            callActive,
-                                          }}>
-                                          <LiveStreamDataProvider>
-                                            <LocalUserContext
-                                              localUid={rtcProps?.uid || 0}>
-                                              <CustomUserContextHolder>
-                                                <NetworkQualityProvider>
-                                                  {callActive ? (
-                                                    <VideoCallScreen />
-                                                  ) : $config.PRECALL ? (
-                                                    <PreCallProvider
-                                                      value={{
-                                                        callActive,
-                                                        setCallActive,
-                                                      }}>
-                                                      <Precall />
-                                                    </PreCallProvider>
-                                                  ) : (
-                                                    <></>
-                                                  )}
-                                                </NetworkQualityProvider>
-                                              </CustomUserContextHolder>
-                                            </LocalUserContext>
-                                          </LiveStreamDataProvider>
-                                        </LiveStreamContextProvider>
-                                      </ScreenshareConfigure>
-                                    </RecordingProvider>
-                                  </LayoutProvider>
-                                </WhiteboardProvider>
+                                      <RecordingProvider
+                                        value={{
+                                          setRecordingActive,
+                                          isRecordingActive,
+                                        }}>
+                                        <ScreenshareConfigure>
+                                          <LiveStreamContextProvider
+                                            value={{
+                                              setRtcProps,
+                                              rtcProps,
+                                              callActive,
+                                            }}>
+                                            <LiveStreamDataProvider>
+                                              <LocalUserContext
+                                                localUid={rtcProps?.uid || 0}>
+                                                <CustomUserContextHolder>
+                                                  <NetworkQualityProvider>
+                                                    {callActive ? (
+                                                      <VideoMeetingDataProvider>
+                                                        <VideoCallScreen />
+                                                      </VideoMeetingDataProvider>
+                                                    ) : $config.PRECALL ? (
+                                                      <PreCallProvider
+                                                        value={{
+                                                          callActive,
+                                                          setCallActive,
+                                                        }}>
+                                                        <Precall />
+                                                      </PreCallProvider>
+                                                    ) : (
+                                                      <></>
+                                                    )}
+                                                  </NetworkQualityProvider>
+                                                </CustomUserContextHolder>
+                                              </LocalUserContext>
+                                            </LiveStreamDataProvider>
+                                          </LiveStreamContextProvider>
+                                        </ScreenshareConfigure>
+                                      </RecordingProvider>
+                                    </LayoutProvider>
+                                  </WhiteboardProvider>
+                                </EventsConfigure>
                               </UserPreferenceProvider>
                             </RtmConfigure>
                           </ScreenShareProvider>
-                        </SidePanelProvider>
-                      </ChatMessagesProvider>
+                        </ChatMessagesProvider>
+                      </SidePanelProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
                 </DeviceConfigure>
@@ -270,7 +278,7 @@ const VideoCall: React.FC = () => {
           </>
         ) : (
           <View style={style.loader}>
-            <View style={style.loaderLogo}>{hasBrandLogo && <Logo />}</View>
+            <View style={style.loaderLogo}>{hasBrandLogo() && <Logo />}</View>
             <Text style={style.loaderText}>{joiningLoaderLabel}</Text>
           </View>
         )

package/template/src/pages/create/useCreate.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {createContext} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface CreateContextInterface {
   showShareScreen: () => void;

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

@@ -1,12 +1,20 @@
 import React from 'react';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 
 const CustomUserContextHolder: React.FC<{children: any}> = (props) => {
-  //commented for v1 release
-  // const fpeCustomContext = useFpe((config) => config?.customUserContext);
-  // if (fpeCustomContext) {
-  //   fpeCustomContext();
-  // }
+  const useUserContext = useCustomization((config) => {
+    if (
+      config?.components?.videoCall &&
+      typeof config?.components?.videoCall === 'object' &&
+      config?.components?.videoCall?.useUserContext &&
+      typeof config?.components?.videoCall?.useUserContext === 'function'
+    ) {
+      return config?.components?.videoCall?.useUserContext;
+    } else {
+      return () => {};
+    }
+  });
+  useUserContext();
   return props.children;
 };
 export default CustomUserContextHolder;

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -1,7 +1,7 @@
-import {layoutObjectType} from 'fpe-api';
+import {layoutObjectType} from 'customization-api';
 import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
-import useCustomLayout from './CustomLayout';
+import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
 
 export const DefaultLayouts: layoutObjectType[] = [
@@ -23,8 +23,8 @@ export const getPinnedLayoutName = () => DefaultLayouts[1].name;
 export const getGridLayoutName = () => DefaultLayouts[0].name;
 
 export const useSetPinnedLayout = () => {
-  const {setActiveLayoutName} = useLayout();
-  const layouts = useCustomLayout();
+  const {setLayout} = useLayout();
+  const layouts = useLayoutsData();
   const pinnedLayoutName = getPinnedLayoutName();
   let checkPinnedLayoutExist = false;
   if (layouts && Array.isArray(layouts) && layouts.length) {
@@ -37,13 +37,13 @@ export const useSetPinnedLayout = () => {
     return () => {};
   }
   return () => {
-    setActiveLayoutName(pinnedLayoutName);
+    setLayout(pinnedLayoutName);
   };
 };
 
 export const useChangeDefaultLayout = () => {
-  const {setActiveLayoutName} = useLayout();
-  const layout = useCustomLayout();
+  const {setLayout} = useLayout();
+  const layout = useLayoutsData();
 
   if (!layout) {
     return () => {};
@@ -58,7 +58,7 @@ export const useChangeDefaultLayout = () => {
   }
 
   return () => {
-    setActiveLayoutName((activeLayout: string) =>
+    setLayout((activeLayout: string) =>
       activeLayout === layout[1].name ? layout[0].name : layout[1].name,
     );
   };

package/template/src/pages/video-call/{NameWithMicStatus.tsx → NameWithMicIcon.tsx}

@@ -6,7 +6,12 @@ import TextWithTooltip from '../../subComponents/TextWithTooltip';
 import ColorContext from '../../components/ColorContext';
 import {useString} from '../../utils/useString';
 
-export const NameWithMicStatus = ({user}: {user: RenderInterface}) => {
+interface NameWithMicIconProps {
+  user: RenderInterface;
+}
+
+const NameWithMicIcon = (props: NameWithMicIconProps) => {
+  const {user} = props;
   const {primaryColor} = useContext(ColorContext);
   const {height, width} = useWindowDimensions();
   //commented for v1 release
@@ -60,3 +65,5 @@ const style = StyleSheet.create({
     resizeMode: 'contain',
   },
 });
+
+export default NameWithMicIcon;

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

@@ -1,25 +1,22 @@
 import React from 'react';
-import {MaxVideoRenderer} from './VideoRenderer';
+import VideoRenderer from './VideoRenderer';
 import {UidType} from '../../../agora-rn-uikit';
-import {
-  renderComponentObjectInterface,
-  useFpe,
-  useRenderContext,
-} from 'fpe-api';
+import {renderComponentObjectInterface, useRender} from 'customization-api';
+import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 
 export type RenderComponentType = {[key: string]: React.FC<any>};
 
 const DefaultRenderComponent: RenderComponentType = {
-  rtc: MaxVideoRenderer,
-  screenshare: MaxVideoRenderer,
+  rtc: VideoRenderer,
+  screenshare: VideoRenderer,
 };
 interface RenderComponentProps {
   uid: UidType;
 }
 const RenderComponent = ({uid}: RenderComponentProps) => {
-  const {renderList} = useRenderContext();
-  const FpeRenderComponent = useFpe((config) =>
+  const {renderList} = useRender();
+  const FpeRenderComponent = useCustomization((config) =>
     typeof config?.components?.videoCall === 'object' &&
     typeof config?.components?.videoCall?.customContent === 'object'
       ? config?.components?.videoCall?.customContent

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

@@ -1,13 +1,13 @@
 import React, {useContext, useEffect} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import Navbar from '../../components/Navbar';
 import ParticipantsView from '../../components/ParticipantsView';
 import SettingsView from '../../components/SettingsView';
 import Controls from '../../components/Controls';
 import Chat from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {isValidReactComponent, isWeb} from '../../utils/common';
+import {isValidReactComponent, isWebInternal} from '../../utils/common';
 import {useSidePanel} from '../../utils/useSidePanel';
 import VideoComponent from './VideoComponent';
 import {videoView} from '../../../theme.json';
@@ -16,13 +16,15 @@ import {
   ButtonTemplateName,
 } from '../../utils/useButtonTemplate';
 import SDKEvents from '../../utils/SdkEvents';
-import {RtcContext} from '../../../agora-rn-uikit';
 import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+import {useRtc} from 'customization-api';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
-  const rtc = useContext(RtcContext);
-  const {meetingTitle, isHost} = useMeetingInfo();
+  const rtc = useRtc();
+  const {
+    data: {meetingTitle, isHost},
+  } = useMeetingInfo();
   const {
     ChatComponent,
     VideocallComponent,
@@ -32,7 +34,7 @@ const VideoCallScreen = () => {
     TopbarComponent,
     VideocallBeforeView,
     VideocallAfterView,
-  } = useFpe((data) => {
+  } = useCustomization((data) => {
     let components: {
       VideocallComponent?: React.ComponentType;
       ChatComponent: React.ComponentType;
@@ -95,14 +97,13 @@ const VideoCallScreen = () => {
         components.BottombarComponent = data?.components?.videoCall.bottomBar;
       }
 
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall.topBar &&
-      //   typeof data?.components?.videoCall.topBar !== 'object' &&
-      //   isValidReactComponent(data?.components?.videoCall.topBar)
-      // ) {
-      //   components.TopbarComponent = data?.components?.videoCall.topBar;
-      // }
+      if (
+        data?.components?.videoCall.topBar &&
+        typeof data?.components?.videoCall.topBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topBar;
+      }
 
       if (
         data?.components?.videoCall.participantsPanel &&
@@ -128,13 +129,21 @@ const VideoCallScreen = () => {
   });
 
   useEffect(() => {
-    new Promise((res) =>
-      rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-        res(devices);
-      }),
-    ).then((devices: MediaDeviceInfo[]) => {
-      SDKEvents.emit('join', meetingTitle, devices, isHost);
-    });
+    /**
+     * OLD: Commenting this code as getDevices API is web only
+     * The below code fails on native app
+     * RESPONSE: Added isWebInternal check to restrict execution only on web.
+     */
+    if (isWebInternal()) {
+      new Promise((res) =>
+        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
+          res(devices);
+        }),
+      ).then((devices: MediaDeviceInfo[]) => {
+        SDKEvents.emit('join', meetingTitle, devices, isHost);
+        console.log('SDKEvents: Event Called join');
+      });
+    }
   }, []);
 
   return VideocallComponent ? (
@@ -165,7 +174,7 @@ const VideoCallScreen = () => {
           )}
           {sidePanel === SidePanelType.Settings ? <SettingsComponent /> : <></>}
         </View>
-        {!isWeb && sidePanel === SidePanelType.Chat ? (
+        {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
           <></>
         ) : (
           <ButtonTemplateProvider

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

@@ -1,32 +1,30 @@
 import React, {useEffect, useState} from 'react';
-import useCustomLayout from './CustomLayout';
+import useLayoutsData from './useLayoutsData';
 import {isArray, isValidReactComponent} from '../../utils/common';
 import {useLayout} from '../../utils/useLayout';
-import {useRenderContext} from 'fpe-api';
+import {useRender} from 'customization-api';
 
 const VideoComponent = () => {
   const [layout, setLayoutIndex] = useState(0);
-  const fpeLayouts = useCustomLayout();
-  const {activeLayoutName} = useLayout();
-  const {renderPosition} = useRenderContext();
+  const layoutsData = useLayoutsData();
+  const {currentLayout} = useLayout();
+  const {activeUids} = useRender();
   useEffect(() => {
-    if (isArray(fpeLayouts)) {
-      let index = fpeLayouts.findIndex(
-        (item) => item.name === activeLayoutName,
-      );
+    if (isArray(layoutsData)) {
+      let index = layoutsData.findIndex((item) => item.name === currentLayout);
       if (index >= 0) {
         setLayoutIndex(index);
       }
     }
-  }, [activeLayoutName]);
+  }, [currentLayout]);
 
   if (
-    fpeLayouts &&
-    fpeLayouts[layout] &&
-    isValidReactComponent(fpeLayouts[layout].component)
+    layoutsData &&
+    layoutsData[layout] &&
+    isValidReactComponent(layoutsData[layout].component)
   ) {
-    const CurrentLayout = fpeLayouts[layout].component;
-    return <CurrentLayout renderData={renderPosition} />;
+    const CurrentLayout = layoutsData[layout].component;
+    return <CurrentLayout renderData={activeUids} />;
   } else {
     return <></>;
   }

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

@@ -5,13 +5,13 @@ import ScreenShareNotice from '../../subComponents/ScreenShareNotice';
 import {MaxVideoView} from '../../../agora-rn-uikit';
 import FallbackLogo from '../../subComponents/FallbackLogo';
 import ColorContext from '../../components/ColorContext';
-import {NetworkQualityPill} from '../../subComponents/NetworkQualityPill';
-import {NameWithMicStatus} from './NameWithMicStatus';
+import NetworkQualityPill from '../../subComponents/NetworkQualityPill';
+import NameWithMicIcon from './NameWithMicIcon';
 
-interface MaxVideoRendererInterface {
+interface VideoRendererProps {
   user: RenderInterface;
 }
-const MaxVideoRenderer: React.FC<MaxVideoRendererInterface> = ({user}) => {
+const VideoRenderer: React.FC<VideoRendererProps> = ({user}) => {
   const {primaryColor} = useContext(ColorContext);
   return (
     <View style={maxStyle.container}>
@@ -34,7 +34,7 @@ const MaxVideoRenderer: React.FC<MaxVideoRendererInterface> = ({user}) => {
         key={user.uid}
       />
       <View style={maxStyle.nameHolder}>
-        <NameWithMicStatus user={user} />
+        <NameWithMicIcon user={user} />
       </View>
     </View>
   );
@@ -83,4 +83,4 @@ const maxStyle = StyleSheet.create({
   },
 });
 
-export {MaxVideoRenderer};
+export default VideoRenderer;

package/template/src/pages/video-call/useLayoutsData.ts

@@ -0,0 +1,23 @@
+import {useCustomization} from 'customization-implementation';
+import {DefaultLayouts} from './DefaultLayouts';
+
+/**
+ * if custom layouts provided in customization api
+ * @returns customLayouts array
+ * else
+ * @returns defaultLayouts array
+ */
+function useLayoutsData() {
+  const layoutsData = useCustomization((config) => {
+    if (
+      typeof config?.components?.videoCall === 'object' &&
+      config?.components?.videoCall?.customLayout
+    ) {
+      return config.components.videoCall.customLayout(DefaultLayouts);
+    } else {
+      return DefaultLayouts;
+    }
+  });
+  return layoutsData;
+}
+export default useLayoutsData;

package/template/src/rtm/RTMEngine.ts

@@ -30,6 +30,11 @@ class RTMEngine {
     await this.engine.createClient($config.APP_ID);
   }
 
+  private async destroyClientInstance() {
+    await this.engine.logout();
+    await this.engine.destroyClient();
+  }
+
   private constructor() {
     if (RTMEngine._instance) {
       return RTMEngine._instance;
@@ -53,6 +58,14 @@ class RTMEngine {
   get channelUid() {
     return this.channelId;
   }
+  destroy() {
+    try {
+      this.destroyClientInstance();
+      RTMEngine._instance = null;
+    } catch (error) {
+      console.log('Error destroying instance error: ', error);
+    }
+  }
 }
 
 export default RTMEngine;