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

package/template/src/components/Navbar.tsx

@@ -30,8 +30,8 @@ import LiveStreamContext from './livestream';
 import {numFormatter} from '../utils/index';
 import {useLayout} from '../utils/useLayout';
 import {useChatNotification} from '../components/chat-notification/useChatNotification';
-import useCustomLayout from '../pages/video-call/CustomLayout';
-import {isIOS, isValidReactComponent, isWeb} from '../utils/common';
+import useLayoutsData from '../pages/video-call/useLayoutsData';
+import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
 import {useChangeDefaultLayout} from '../pages/video-call/DefaultLayouts';
 import {useRecording} from '../subComponents/recording/useRecording';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
@@ -49,7 +49,7 @@ import Styles from './styles';
 const RenderSeparator = () => {
   const {getDimensionData} = useContext(DimensionContext);
   const {isDesktop} = getDimensionData();
-  return isWeb && isDesktop ? (
+  return isWebInternal() && isDesktop ? (
     <View style={style.navItem}>
       <View style={style.navItemSeparator}></View>
     </View>
@@ -60,6 +60,7 @@ const RenderSeparator = () => {
 
 const ParticipantsCountView = () => {
   const {onlineUsersCount} = useContext(ChatContext);
+
   return (
     <>
       {onlineUsersCount !== 0 && (
@@ -77,7 +78,7 @@ const ParticipantsCountView = () => {
   );
 };
 
-interface ParticipantsIconButtonInterface {
+interface ParticipantsIconButtonProps {
   liveStreamingRequestAlertIconPosition?: {
     top?: number;
     right?: number;
@@ -91,10 +92,10 @@ interface ParticipantsIconButtonInterface {
     buttonTemplateName?: ButtonTemplateName,
   ) => JSX.Element;
 }
-const ParticipantsIconButton = (props: ParticipantsIconButtonInterface) => {
+const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
   const {
     liveStreamingRequestAlertIconPosition = {
-      top: isWeb ? -10 : 2,
+      top: isWebInternal() ? -10 : 2,
       left: undefined,
       right: undefined,
       bottom: undefined,
@@ -153,7 +154,7 @@ const ParticipantsIconButton = (props: ParticipantsIconButtonInterface) => {
   );
 };
 
-interface ChatIconButtonInterface {
+interface ChatIconButtonProps {
   badgeContainerPosition?: {
     top?: number;
     right?: number;
@@ -170,10 +171,10 @@ interface ChatIconButtonInterface {
   ) => JSX.Element;
 }
 
-const ChatIconButton = (props: ChatIconButtonInterface) => {
+const ChatIconButton = (props: ChatIconButtonProps) => {
   const {
     badgeContainerPosition = {
-      top: isWeb ? -10 : 2,
+      top: isWebInternal() ? -10 : 2,
       left: undefined,
       right: undefined,
       bottom: undefined,
@@ -248,7 +249,7 @@ const ChatIconButton = (props: ChatIconButtonInterface) => {
   );
 };
 
-interface LayoutIconButtonInterface {
+interface LayoutIconButtonProps {
   modalPosition?: {
     top?: number;
     right?: number;
@@ -262,18 +263,19 @@ interface LayoutIconButtonInterface {
   ) => JSX.Element;
 }
 
-const LayoutIconButton = (props: LayoutIconButtonInterface) => {
+const LayoutIconButton = (props: LayoutIconButtonProps) => {
   const {modalPosition} = props;
+
   //commented for v1 release
   //const layoutLabel = useString('layoutLabel')('');
   const layoutLabel = 'Layouts';
   const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
   const {buttonTemplateName = defaultTemplateValue} = props;
   const [showDropdown, setShowDropdown] = useState(false);
-  const layouts = useCustomLayout();
+  const layouts = useLayoutsData();
   const changeLayout = useChangeDefaultLayout();
-  const {activeLayoutName} = useLayout();
-  const layout = layouts.findIndex((item) => item.name === activeLayoutName);
+  const {currentLayout} = useLayout();
+  const layout = layouts.findIndex((item) => item.name === currentLayout);
   const renderLayoutIcon = (showDropdown?: boolean) => {
     let onPress = () => {};
     let renderContent = [];
@@ -348,7 +350,10 @@ const Navbar = () => {
   //commented for v1 release
   //const recordingLabel = useString('recordingLabel')();
   const recordingLabel = 'Recording';
-  const {meetingTitle} = useMeetingInfo();
+  const {
+    data: {meetingTitle},
+  } = useMeetingInfo();
+
   const {isRecordingActive} = useRecording();
   const {getDimensionData} = useContext(DimensionContext);
   const {isDesktop} = getDimensionData();
@@ -356,15 +361,15 @@ const Navbar = () => {
   return (
     <View
       style={[
-        isWeb ? style.navHolder : style.navHolderNative,
+        isWebInternal() ? style.navHolder : style.navHolderNative,
         {backgroundColor: $config.SECONDARY_FONT_COLOR + 80},
-        isWeb
+        isWebInternal()
           ? {
               justifyContent: isMobileOrTablet() ? 'space-between' : 'flex-end',
             }
           : {},
       ]}>
-      {isRecordingActive && !isMobileOrTablet() ? (
+      {isRecordingActive ? (
         <View
           style={[
             style.recordingView,
@@ -379,17 +384,19 @@ const Navbar = () => {
             }}
             color="#FD0845"
           />
-          <Text
-            style={{
-              fontSize: isWeb ? 16 : 12,
-              color: '#FD0845',
-              fontWeight: '400',
-              alignSelf: 'center',
-              textAlign: 'center',
-              flex: 1,
-            }}>
-            {recordingLabel}
-          </Text>
+          {!isMobileOrTablet() && (
+            <Text
+              style={{
+                fontSize: isWebInternal() ? 16 : 12,
+                color: '#FD0845',
+                fontWeight: '400',
+                alignSelf: 'center',
+                textAlign: 'center',
+                flex: 1,
+              }}>
+              {recordingLabel}
+            </Text>
+          )}
         </View>
       ) : (
         <></>
@@ -398,11 +405,11 @@ const Navbar = () => {
         style={[
           style.roomNameContainer,
           // @ts-ignore
-          isWeb && !isMobileOrTablet()
+          isWebInternal() && !isMobileOrTablet()
             ? {transform: [{translateX: '50%'}]}
             : {},
         ]}>
-        {isWeb ? (
+        {isWebInternal() ? (
           <View
             style={{
               flexDirection: 'row',
@@ -443,7 +450,11 @@ const Navbar = () => {
             style.navContainer,
             {
               minWidth:
-                isWeb && isDesktop ? 300 : isMobileOrTablet() ? 160 : 200,
+                isWebInternal() && isDesktop
+                  ? 300
+                  : isMobileOrTablet()
+                  ? 160
+                  : 200,
             },
           ]}>
           <ParticipantsCountView />
@@ -478,14 +489,15 @@ const Navbar = () => {
     </View>
   );
 };
-export const NavBarComponentsArray: [
+type NavBarComponentsArrayProps = [
   (props: CopyJoinInfoProps) => JSX.Element,
   () => JSX.Element,
-  (props: ParticipantsIconButtonInterface) => JSX.Element,
-  (props: ChatIconButtonInterface) => JSX.Element,
-  (props: LayoutIconButtonInterface) => JSX.Element,
+  (props: ParticipantsIconButtonProps) => JSX.Element,
+  (props: ChatIconButtonProps) => JSX.Element,
+  (props: LayoutIconButtonProps) => JSX.Element,
   (props: SettingsIconButtonProps) => JSX.Element,
-] = [
+];
+export const NavBarComponentsArray: NavBarComponentsArrayProps = [
   CopyJoinInfo,
   ParticipantsCountView,
   ParticipantsIconButton,
@@ -493,6 +505,7 @@ export const NavBarComponentsArray: [
   LayoutIconButton,
   SettingsIconButton,
 ];
+
 const style = StyleSheet.create({
   backDrop: {
     position: 'absolute',
@@ -517,7 +530,7 @@ const style = StyleSheet.create({
     height: 35,
     maxHeight: 30,
     position: 'absolute',
-    left: 10,
+    left: isMobileOrTablet() ? '50%' : 10,
     paddingHorizontal: 5,
     flexDirection: 'row',
     alignItems: 'center',
@@ -566,7 +579,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     paddingHorizontal: 5,
@@ -584,7 +597,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
   },
   chipText: {
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     fontSize: 12,
     color: $config.SECONDARY_FONT_COLOR,
   },
@@ -598,7 +611,7 @@ const style = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-around',
-    backgroundColor: isWeb
+    backgroundColor: isWebInternal()
       ? $config.SECONDARY_FONT_COLOR
       : $config.SECONDARY_FONT_COLOR + '00',
     paddingVertical: 4,

package/template/src/components/NetworkQualityContext.tsx

@@ -9,11 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext, useContext, useState} from 'react';
-import {RtcContext, UidType, useLocalUid} from '../../agora-rn-uikit';
+import React, {createContext, useState} from 'react';
+import {UidType, useLocalUid} from '../../agora-rn-uikit';
 import useMount from './useMount';
 import icons from '../assets/icons';
 import {NetworkQualities} from '../language/default-labels/videoCallScreenLabels';
+import {useRtc} from 'customization-api';
 
 /**
  * Network Icons container object with color and string mapping to network quality stat [ 0 - 8]
@@ -101,7 +102,7 @@ export const NetworkQualityProvider: React.FC = (props: {
     useState<NetworkQualityStatsInterface>({
       [localUid]: 0,
     });
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngine} = useRtc();
 
   useMount(() => {
     function handleNetworkQuality(

package/template/src/components/ParticipantsView.tsx

@@ -18,10 +18,9 @@ import AllHostParticipants from './participants/AllHostParticipants';
 import AllAudienceParticipants from './participants/AllAudienceParticipants';
 import CurrentLiveStreamRequestsView from '../subComponents/livestream/CurrentLiveStreamRequestsView';
 import {useString} from '../utils/useString';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import {useLiveStreamDataContext} from './contexts/LiveStreamDataContext';
-
 const ParticipantView = () => {
   const {liveStreamData, audienceUids, hostUids} = useLiveStreamDataContext();
   const {rtcProps} = useContext(PropsContext);
@@ -32,18 +31,19 @@ const ParticipantView = () => {
   const hostLabel = 'Host';
   const audienceLabel = 'Audience';
   const participantsLabel = 'Participants';
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isSmall = dim[0] < 700;
-
   return (
     <View
       style={
-        isWeb
+        isWebInternal()
           ? isSmall
             ? style.participantViewNative
             : style.participantView
@@ -232,14 +232,14 @@ const style = StyleSheet.create({
   },
   participantText: {
     lineHeight: 24,
-    fontSize: isWeb ? 18 : 16,
+    fontSize: isWebInternal() ? 18 : 16,
     flexDirection: 'row',
     letterSpacing: 0.3,
     color: $config.PRIMARY_FONT_COLOR,
     fontWeight: '300',
   },
   participantTextSmall: {
-    fontSize: isWeb ? 14 : 12,
+    fontSize: isWebInternal() ? 14 : 12,
   },
   dummyView: {
     flex: 0.5,

package/template/src/components/PinnedVideo.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
+import React, {useState} from 'react';
 import {
   ScrollView,
   View,
@@ -18,9 +18,8 @@ import {
   Text,
   Pressable,
 } from 'react-native';
-import {RtcContext} from '../../agora-rn-uikit';
 import {layoutProps} from '../../theme.json';
-import {layoutComponent} from 'fpe-api';
+import {layoutComponent, useRtc} from 'customization-api';
 import RenderComponent from '../pages/video-call/RenderComponent';
 const {topPinned} = layoutProps;
 
@@ -40,7 +39,7 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
   };
   const isSidePinnedlayout = topPinned === true ? false : dim[2]; // if either explicity set to false or auto evaluation
   const [maxUid, ...minUids] = renderData;
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useRtc();
 
   return (
     <View

package/template/src/components/Precall.native.tsx

@@ -12,7 +12,7 @@
 import React, {useContext} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import {ClientRole, PropsContext} from '../../agora-rn-uikit';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import {isValidReactComponent} from '../utils/common';
 import {
@@ -36,7 +36,7 @@ const Precall = () => {
     Textbox,
     PrecallAfterView,
     PrecallBeforeView,
-  } = useFpe((data) => {
+  } = useCustomization((data) => {
     const components: {
       PrecallAfterView: React.ComponentType;
       PrecallBeforeView: React.ComponentType;
@@ -111,7 +111,7 @@ const Precall = () => {
   const isAudienceInLiveStreaming = () =>
     $config.EVENT_MODE && rtcProps?.role == ClientRole.Audience;
 
-  const FpePrecallComponent = useFpe((data) => {
+  const FpePrecallComponent = useCustomization((data) => {
     // commented for v1 release
     // if (
     //   data?.components?.precall &&

package/template/src/components/Precall.tsx

@@ -11,12 +11,12 @@
 */
 import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, Dimensions} from 'react-native';
-import {RtcContext, PropsContext, ClientRole} from '../../agora-rn-uikit';
-import {isValidReactComponent, isWeb} from '../utils/common';
+import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {isValidReactComponent, isWebInternal} from '../utils/common';
 import ColorContext from './ColorContext';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import PreCallLogo from './common/Logo';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import PreCallLocalMute from './precall/LocalMute';
 import {
   PreCallJoinBtn,
@@ -27,9 +27,10 @@ import {
 } from './precall/index';
 import SDKEvents from '../utils/SdkEvents';
 import isSDKCheck from '../utils/isSDK';
+import {useRtc} from 'customization-api';
 
 const JoinRoomInputView = () => {
-  const {JoinButton, Textbox} = useFpe((data) => {
+  const {JoinButton, Textbox} = useCustomization((data) => {
     let components: {
       JoinButton: React.ComponentType;
       Textbox: React.ComponentType;
@@ -68,7 +69,7 @@ const JoinRoomInputView = () => {
   );
 };
 
-const Precall = (props: any) => {
+const Precall = () => {
   const {primaryColor} = useContext(ColorContext);
   const {rtcProps} = useContext(PropsContext);
   const {
@@ -77,7 +78,7 @@ const Precall = (props: any) => {
     DeviceSelect,
     PrecallAfterView,
     PrecallBeforeView,
-  } = useFpe((data) => {
+  } = useCustomization((data) => {
     const components: {
       PrecallAfterView: React.ComponentType;
       PrecallBeforeView: React.ComponentType;
@@ -138,8 +139,11 @@ const Precall = (props: any) => {
     // }
     return components;
   });
-  const {isJoinDataFetched, meetingTitle} = useMeetingInfo();
-  const rtc = useContext(RtcContext);
+  const {
+    isJoinDataFetched,
+    data: {meetingTitle},
+  } = useMeetingInfo();
+  const rtc = useRtc();
   const isSDK = isSDKCheck();
 
   const [dim, setDim] = useState<[number, number]>([
@@ -152,7 +156,7 @@ const Precall = (props: any) => {
   };
 
   useEffect(() => {
-    if (isWeb && !isSDK) {
+    if (isWebInternal() && !isSDK) {
       if (meetingTitle) {
         document.title = meetingTitle + ' | ' + $config.APP_NAME;
       }
@@ -178,7 +182,7 @@ const Precall = (props: any) => {
 
   const brandHolder = () => <PreCallLogo />;
 
-  const FpePrecallComponent = useFpe((data) => {
+  const FpePrecallComponent = useCustomization((data) => {
     // commented for v1 release
     // if (
     //   data?.components?.precall &&