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

package/template/src/components/precall/VideoPreview.native.tsx

@@ -10,17 +10,17 @@
 *********************************************
 */
 
-import React, {useContext} from 'react';
+import {useRender, useRtc} from 'customization-api';
+import React from 'react';
 import {View} from 'react-native';
-import {MaxVideoView, RtcContext} from '../../../agora-rn-uikit';
-import useUserList from '../../utils/useUserList';
+import {MaxVideoView} from '../../../agora-rn-uikit';
 
 const VideoPreview: React.FC = () => {
-  const rtc = useContext(RtcContext);
+  const rtc = useRtc();
   rtc?.RtcEngine?.startPreview();
 
-  const {renderList, renderPosition} = useUserList();
-  const [maxUid] = renderPosition;
+  const {renderList, activeUids} = useRender();
+  const [maxUid] = activeUids;
 
   if (!maxUid) {
     return null;

package/template/src/components/precall/VideoPreview.tsx

@@ -10,15 +10,15 @@
 *********************************************
 */
 
+import {useRender} from 'customization-api';
 import React from 'react';
 import {View} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
-import useUserList from '../../utils/useUserList';
 
 const VideoPreview: React.FC = () => {
-  const {renderList, renderPosition} = useUserList();
+  const {renderList, activeUids} = useRender();
 
-  const [maxUid] = renderPosition;
+  const [maxUid] = activeUids;
 
   if (!maxUid) {
     return null;

package/template/src/components/precall/joinCallBtn.tsx

@@ -20,7 +20,7 @@ import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
 import useGetName from '../../utils/useGetName';
 import {useWakeLock} from '../../components/useWakeLock';
 import isMobileOrTablet from '../../utils/isMobileOrTablet';
-import {isWeb} from '../../utils/common';
+import {isWebInternal} from '../../utils/common';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -53,7 +53,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const onSubmit = () => {
     setCallActive(true);
     // Play a sound to avoid autoblocking in safari
-    if (isWeb || isMobileOrTablet()) {
+    if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
       audio.play().then(() => {
         // pause directly once played
@@ -61,7 +61,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
       });
     }
     // Avoid Sleep only on mobile browsers
-    if (isWeb && isMobileOrTablet() && !awake) {
+    if (isWebInternal() && isMobileOrTablet() && !awake) {
       // Request wake lock
       request();
     }

package/template/src/components/precall/meetingTitle.tsx

@@ -3,7 +3,9 @@ import {Text, StyleSheet, View} from 'react-native';
 import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
 
 const MeetingTitle: React.FC = () => {
-  const {meetingTitle} = useMeetingInfo();
+  const {
+    data: {meetingTitle},
+  } = useMeetingInfo();
   return (
     <>
       <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>

package/template/src/components/precall/selectDevice.tsx

@@ -12,7 +12,7 @@
 
 import React from 'react';
 import {View, StyleSheet, Text} from 'react-native';
-import {isWeb} from '../../utils/common';
+import {isWebInternal} from '../../utils/common';
 import SelectDevice from '../../subComponents/SelectDevice';
 import {useString} from '../../utils/useString';
 
@@ -26,7 +26,7 @@ const selectDevice: React.FC = () => {
       <View
         style={{
           flex: 1,
-          maxWidth: isWeb ? '25vw' : 'auto',
+          maxWidth: isWebInternal() ? '25vw' : 'auto',
           marginVertical: 30,
         }}>
         <SelectDevice />

package/template/src/components/precall/usePreCall.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {createContext} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import {ApolloError} from '@apollo/client';
 
 export interface PreCallContextInterface {

package/template/src/components/styles.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 
 const styles = {
   temp: {
@@ -19,8 +19,8 @@ const styles = {
     borderRadius: 15,
   },
   bottomBar: {
-    flex: isWeb ? 1.3 : 1.6,
-    paddingHorizontal: isWeb ? '20%' : '1%',
+    flex: isWebInternal() ? 1.3 : 1.6,
+    paddingHorizontal: isWebInternal() ? '20%' : '1%',
     backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
     flexDirection: 'row',
     justifyContent: 'space-evenly',

package/template/src/components/useShareLink.tsx

@@ -10,20 +10,68 @@
 *********************************************
 */
 
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import React from 'react';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
 import Toast from '../../react-native-toast-message';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import platform from '../subComponents/Platform';
-import {
-  GetMeetingInviteID,
-  GetMeetingInviteURL,
-} from '../utils/getMeetingInvite';
 import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
 import Clipboard from '../subComponents/Clipboard';
 
+export const GetMeetingInviteURL = (
+  baseUrl: string,
+  isHost: boolean,
+  roomId: {
+    host?: string;
+    attendee?: string;
+  },
+  isSeparateHostLink: boolean,
+) => {
+  if (isHost) {
+    if (isSeparateHostLink) {
+      return {
+        host: `${baseUrl}/${roomId.host}`,
+        attendee: `${baseUrl}/${roomId.attendee}`,
+      };
+    } else {
+      return {
+        host: `${baseUrl}/${roomId.host}`,
+      };
+    }
+  } else {
+    return {
+      attendee: `${baseUrl}/${roomId.attendee}`,
+    };
+  }
+};
+export const GetMeetingInviteID = (
+  isHost: boolean,
+  roomId: {
+    host?: string;
+    attendee?: string;
+  },
+  isSeparateHostLink: boolean,
+) => {
+  if (isHost) {
+    if (isSeparateHostLink) {
+      return {
+        host: `${roomId.host}`,
+        attendee: `${roomId.attendee}`,
+      };
+    } else {
+      return {
+        host: `${roomId.host}`,
+      };
+    }
+  } else {
+    return {
+      attendee: `${roomId.attendee}`,
+    };
+  }
+};
+
 export enum SHARE_LINK_CONTENT_TYPE {
   ATTENDEE = 1,
   HOST,
@@ -45,8 +93,9 @@ interface ShareLinkProvideProps {
 }
 
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
-  const {meetingTitle, meetingPassphrase, isSeparateHostLink, isHost} =
-    useMeetingInfo();
+  const {
+    data: {meetingTitle, roomId, pstn, isSeparateHostLink, isHost},
+  } = useMeetingInfo();
 
   //commmented for v1 release
   // const copiedToClipboardText = useString(
@@ -111,20 +160,15 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
     let stringToCopy = meetingInviteText({
       meetingName: meetingTitle,
       url: baseURL
-        ? GetMeetingInviteURL(
-            baseURL,
-            isHost,
-            meetingPassphrase,
-            isSeparateHostLink,
-          )
+        ? GetMeetingInviteURL(baseURL, isHost, roomId, isSeparateHostLink)
         : undefined,
       id: !baseURL
-        ? GetMeetingInviteID(isHost, meetingPassphrase, isSeparateHostLink)
+        ? GetMeetingInviteID(isHost, roomId, isSeparateHostLink)
         : undefined,
-      pstn: meetingPassphrase?.pstn
+      pstn: pstn
         ? {
-            number: meetingPassphrase.pstn.number,
-            pin: meetingPassphrase.pstn.pin,
+            number: pstn.number,
+            pin: pstn.pin,
           }
         : undefined,
       isHost,
@@ -144,11 +188,11 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const getAttendeeURLOrId = () => {
     let stringToCopy = '';
     let baseURL = getBaseURL();
-    if (meetingPassphrase?.attendee) {
+    if (roomId?.attendee) {
       if (baseURL) {
-        stringToCopy += `${baseURL}/${meetingPassphrase.attendee}`;
+        stringToCopy += `${baseURL}/${roomId.attendee}`;
       } else {
-        stringToCopy += `${meetingPassphrase.attendee}`;
+        stringToCopy += `${roomId.attendee}`;
       }
     }
     return stringToCopy;
@@ -156,12 +200,12 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getHostUrlOrId = () => {
     let stringToCopy = '';
-    if (meetingPassphrase?.host) {
+    if (roomId?.host) {
       let baseURL = getBaseURL();
       if (baseURL) {
-        stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
+        stringToCopy += `${baseURL}/${roomId.host}`;
       } else {
-        stringToCopy += `${meetingPassphrase.host}`;
+        stringToCopy += `${roomId.host}`;
       }
     }
     return stringToCopy;
@@ -169,12 +213,8 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getPstn = () => {
     let stringToCopy = '';
-    if (
-      meetingPassphrase?.pstn &&
-      meetingPassphrase.pstn?.number &&
-      meetingPassphrase.pstn?.pin
-    ) {
-      stringToCopy += `${PSTNNumberText}: ${meetingPassphrase.pstn.number} ${PSTNPinText}: ${meetingPassphrase.pstn.pin}`;
+    if (pstn && pstn?.number && pstn?.pin) {
+      stringToCopy += `${PSTNNumberText}: ${pstn.number} ${PSTNPinText}: ${pstn.pin}`;
     }
 
     return stringToCopy;

package/template/src/components/useUserPreference.tsx

@@ -11,14 +11,14 @@
 */
 import React, {useState, useContext, useEffect} from 'react';
 import {RenderInterface, useLocalUid} from '../../agora-rn-uikit';
-import {RtcContext} from '../../agora-rn-uikit';
 import {useString} from '../utils/useString';
 import StorageContext from './StorageContext';
-import CustomEvents, {EventLevel} from '../custom-events';
+import events, {EventPersistLevel} from '../rtm-events-api';
 import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
+import {useRtc} from 'customization-api';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -34,7 +34,7 @@ const UserPreferenceContext =
 const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   const localUid = useLocalUid();
   const screenShareUid = useLocalScreenShareUid();
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useRtc();
 
   const {store, setStore} = useContext(StorageContext);
   const {hasUserJoinedRTM} = useContext(ChatContext);
@@ -51,8 +51,8 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   const getScreenShareName = (name: string) => `${name}'s screenshare`;
 
   useEffect(() => {
-    CustomEvents.on(EventNames.NAME_ATTRIBUTE, (data) => {
-      const value = JSON.parse(data?.payload?.value);
+    events.on(EventNames.NAME_ATTRIBUTE, (data) => {
+      const value = JSON.parse(data?.payload);
       if (value) {
         if (value?.uid) {
           updateRenderListState(value?.uid, {
@@ -64,13 +64,13 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
         }
         if (value?.screenShareUid) {
           updateRenderListState(value?.screenShareUid, {
-            name: getScreenShareName(value?.name),
+            name: getScreenShareName(value?.name || userText),
           });
         }
       }
     });
     return () => {
-      CustomEvents.off(EventNames.NAME_ATTRIBUTE);
+      events.off(EventNames.NAME_ATTRIBUTE);
     };
   }, []);
 
@@ -84,21 +84,22 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
     });
 
     //update local state for user and screenshare
-    updateRenderListState(localUid, {name: displayName});
+    updateRenderListState(localUid, {name: displayName || userText});
     updateRenderListState(screenShareUid, {
-      name: getScreenShareName(displayName),
+      name: getScreenShareName(displayName || userText),
     });
 
     if (hasUserJoinedRTM) {
       //update remote state for user and screenshare
-      CustomEvents.send(EventNames.NAME_ATTRIBUTE, {
-        value: JSON.stringify({
+      events.send(
+        EventNames.NAME_ATTRIBUTE,
+        JSON.stringify({
           uid: localUid,
           screenShareUid: screenShareUid,
-          name: displayName,
+          name: displayName || userText,
         }),
-        level: EventLevel.LEVEL2,
-      });
+        EventPersistLevel.LEVEL2,
+      );
     }
   }, [displayName, hasUserJoinedRTM]);
 

package/template/src/components/useWakeLock.tsx

@@ -1,10 +1,10 @@
 import NoSleep from 'nosleep.js';
 import React from 'react';
-import mobileAndTabletCheck from '../utils/isMobileOrTablet';
-import {isWeb} from '../utils/common';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
+import {isWebInternal} from '../utils/common';
 
 const useWakeLock = () => {
-  if (mobileAndTabletCheck() && isWeb) {
+  if (isMobileOrTablet() && isWebInternal()) {
     const noSleep = React.useMemo(() => new NoSleep(), []);
     const [awake, set] = React.useState(noSleep.isEnabled);
 

package/template/src/language/i18nTypes.ts

@@ -3,7 +3,7 @@ import {TextDataInterface} from './default-labels/index';
 export type I18nBaseType<T = any> = string | ((template: T) => string);
 export type I18nDynamicType = I18nBaseType<string>;
 export type I18nConditionalType = I18nBaseType<boolean>;
-export interface i18nInterface {
+export interface I18nInterface {
   locale: string;
   label?: string;
   data: TextDataInterface;

package/template/src/language/index.ts

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {i18nInterface} from './i18nTypes';
+import {I18nInterface} from './i18nTypes';
 import {DEFAULT_LABELS} from './default-labels/index';
-export const DEFAULT_I18_DATA: i18nInterface = {
+export const DEFAULT_I18_DATA: I18nInterface = {
   label: 'English US',
   locale: 'en-us',
   data: DEFAULT_LABELS,

package/template/src/language/useLanguage.tsx

@@ -10,8 +10,7 @@
 *********************************************
 */
 import React, {createContext, useContext, useEffect, useState} from 'react';
-import {createHook} from 'fpe-implementation';
-import {useFpe} from 'fpe-api';
+import {createHook, useCustomization} from 'customization-implementation';
 import {DEFAULT_I18_DATA} from './index';
 import StorageContext from '../components/StorageContext';
 
@@ -31,7 +30,7 @@ const LanguageContext = createContext<LanguageContextInterface>({
 
 const LanguageProvider = (props: LanguagePropsInterface) => {
   const {store, setStore} = useContext(StorageContext);
-  const i18nData = useFpe((data) => data?.i18n);
+  const i18nData = useCustomization((data) => data?.i18n);
 
   //If language code is stored in the localstorage no longer available in fpe data
   //then we will update the localstorage value to default value

package/template/src/pages/Authenticate.tsx

@@ -20,11 +20,12 @@ import {
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
-import {hasBrandLogo} from '../utils/common';
+import {useHasBrandLogo} from '../utils/common';
 import DimensionContext from '../components/dimension/DimensionContext';
 import {useString} from '../utils/useString';
 
 const Authenticate = () => {
+  const hasBrandLogo = useHasBrandLogo();
   const {getDimensionData} = useContext(DimensionContext);
   const [isDesktop, setIsDesktop] = useState(false);
   let onLayout = (e: LayoutChangeEvent) => {
@@ -46,7 +47,7 @@ const Authenticate = () => {
       style={style.full}
       resizeMode={'cover'}>
       <View style={style.main}>
-        <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
+        <View style={style.nav}>{hasBrandLogo() && <Logo />}</View>
         <View style={style.content}>
           <View style={style.leftContent}>
             <Text style={style.heading}>{oauthLoginLabel}</Text>

package/template/src/pages/Create.tsx

@@ -21,8 +21,8 @@ import Toast from '../../react-native-toast-message';
 import {ErrorContext} from '../components/common';
 import ShareLink from '../components/Share';
 import Logo from '../components/common/Logo';
-import {isWeb, isValidReactComponent} from '../utils/common';
-import {useFpe, useMeetingInfo} from 'fpe-api';
+import {isWebInternal, isValidReactComponent} from '../utils/common';
+import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import useCreateMeeting from '../utils/useCreateMeeting';
 import {CreateProvider} from './create/useCreate';
@@ -32,7 +32,7 @@ import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 
 const Create = () => {
-  const {CreateComponent} = useFpe((data) => {
+  const {CreateComponent} = useCustomization((data) => {
     let components: {
       CreateComponent?: React.ElementType;
     } = {};
@@ -61,9 +61,6 @@ const Create = () => {
   const [roomCreated, setRoomCreated] = useState(false);
   const createRoomFun = useCreateMeeting();
   const {setMeetingInfo} = useSetMeetingInfo();
-  const {
-    meetingPassphrase: {attendee, host, pstn},
-  } = useMeetingInfo();
   //commented for v1 release
   // const createdText = useString('meetingCreatedNotificationLabel')();
   // const hostControlsToggle = useString<boolean>('hostControlsToggle');
@@ -86,17 +83,24 @@ const Create = () => {
   const haveMeetingID = 'Have a Meeting ID?';
 
   useEffect(() => {
-    if (isWeb) {
+    if (isWebInternal()) {
       document.title = $config.APP_NAME;
     }
-    SDKEvents.on('joinMeetingWithPhrase', (phrase) => {
-      console.log(
-        'DEBUG(aditya)-SDKEvents: joinMeetingWithPhrase event called',
-      );
-      useJoin(phrase);
-    });
+    const unbind = SDKEvents.on(
+      'joinMeetingWithPhrase',
+      (phrase, resolve, reject) => {
+        console.log('SDKEvents: joinMeetingWithPhrase event called', phrase);
+        try {
+          setMeetingInfo(MeetingInfoDefaultValue);
+          history.push(phrase);
+          resolve();
+        } catch (error) {
+          reject(error);
+        }
+      },
+    );
     return () => {
-      SDKEvents.off('joinMeetingWithPhrase');
+      unbind();
     };
   }, []);
 
@@ -104,12 +108,6 @@ const Create = () => {
     setRoomCreated(true);
   };
 
-  useEffect(() => {
-    if (attendee) {
-      SDKEvents.emit('create', host, attendee, pstn);
-    }
-  }, [attendee]);
-
   const createRoomAndNavigateToShare = async (
     roomTitle: string,
     enablePSTN: boolean,

package/template/src/pages/Join.tsx

@@ -17,7 +17,7 @@ import Logo from '../subComponents/Logo';
 import {
   isValidReactComponent,
   shouldAuthenticate,
-  hasBrandLogo,
+  useHasBrandLogo,
 } from '../utils/common';
 import LogoutButton from '../subComponents/LogoutButton';
 import PrimaryButton from '../atoms/PrimaryButton';
@@ -26,12 +26,12 @@ import HorizontalRule from '../atoms/HorizontalRule';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import {useString} from '../utils/useString';
-import useNavigateTo from '../utils/useNavigateTo';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
 
 const Join = () => {
+  const hasBrandLogo = useHasBrandLogo();
   //commented for v1 release
   // const meetingIdInputPlaceholder = useString('meetingIdInputPlaceholder')();
   // const enterMeetingButton = useString('enterMeetingButton')();
@@ -41,7 +41,6 @@ const Join = () => {
   const createMeetingButton = 'Create Meeting';
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
-  const navigateTo = useNavigateTo();
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
@@ -52,9 +51,9 @@ const Join = () => {
 
   const startCall = async () => {
     setMeetingInfo(MeetingInfoDefaultValue);
-    navigateTo(phrase);
+    history.push(phrase);
   };
-  const {JoinComponent} = useFpe((data) => {
+  const {JoinComponent} = useCustomization((data) => {
     let components: {
       JoinComponent?: React.ComponentType;
     } = {};
@@ -74,7 +73,7 @@ const Join = () => {
   ) : (
     <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
-        {hasBrandLogo && <Logo />}
+        {hasBrandLogo() && <Logo />}
         {error ? <Error error={error} /> : <></>}
       </View>
       <View style={style.content}>