agora-appbuilder-core 4.0.29-beta-13 → 4.0.29-beta-15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.29-beta-13",
+  "version": "4.0.29-beta-15",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/_react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+      ios: {},
+      android: {},
+  },
+  assets: ["./src/assets/fonts"]
+}

package/template/customization-api/app-state.ts

@@ -61,5 +61,3 @@ export type {ChatUIControlsInterface} from '../src/components/chat-ui/useChatUIC
 export {useVirtualBackground} from '../src/app-state/useVirtualBackground';
 export {useBeautyEffects} from '../src/app-state/useBeautyEffects';
 export {useLiveStreamDataContext} from '../src/components/contexts/LiveStreamDataContext';
-export {useRtm} from '../src/components/ChatContext';
-export {useGetHostIds} from '../src/utils/useGetHostUids';

package/template/customization-api/typeDefinition.ts

@@ -35,7 +35,6 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
   virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
-  wrapper?: React.ComponentType;
 }
 export interface ChatCmpInterface {
   //commented for v1 release

package/template/customization-api/utils.ts

@@ -47,4 +47,3 @@ export {getSessionId} from '../src/utils/common';
 export {default as ThemeConfig} from '../src/theme';
 export {default as hexadecimalTransparency} from '../src/utils/hexadecimalTransparency';
 export {useFullScreen} from '../src/utils/useFullScreen';
-export {useHideShareTitle} from '../src/utils/useHideShareTile';

package/template/src/auth/AuthProvider.tsx

@@ -510,15 +510,8 @@ const AuthProvider = (props: AuthProviderProps) => {
         'API unauth_login Trying to authenticate user',
         {requestId: requestId, startReqTs},
       );
-      let user_id_unauth = null;
-      try {
-        if (isWeb()) {
-          const urlParams = new URLSearchParams(window?.location?.search);
-          user_id_unauth = urlParams.get('user_id');
-        }
-      } catch (error) {}
 
-      fetch(GET_UNAUTH_FLOW_API_ENDPOINT(user_id_unauth), {
+      fetch(GET_UNAUTH_FLOW_API_ENDPOINT(), {
         credentials: 'include',
         headers: {
           'X-Request-Id': requestId,

package/template/src/auth/config.ts

@@ -46,12 +46,7 @@ export const getOriginURL = () => {
   return isWeb() ? `${window.location.origin}` : `${$config.FRONTEND_ENDPOINT}`;
 };
 
-export const GET_UNAUTH_FLOW_API_ENDPOINT = (user_id?: string) => {
-  if (user_id) {
-    return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
-      $config.PROJECT_ID
-    }&platform_id=${getPlatformId()}&user_id=${user_id}`;
-  }
+export const GET_UNAUTH_FLOW_API_ENDPOINT = () => {
   return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
     $config.PROJECT_ID
   }&platform_id=${getPlatformId()}`;

package/template/src/components/ChatContext.ts

@@ -13,7 +13,6 @@ import RtmEngine from 'agora-react-native-rtm';
 import {UidType} from '../../agora-rn-uikit';
 import {createContext, SetStateAction} from 'react';
 import {ChatMessageType} from './chat-messages/useChatMessages';
-import {createHook} from 'customization-implementation';
 
 export interface ChatBubbleProps {
   isLocal: boolean;
@@ -61,7 +60,7 @@ export enum messageActionType {
   Normal = '1',
 }
 
-export interface RtmContextInterface {
+export interface chatContext {
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
   engine: RtmEngine;
@@ -81,9 +80,6 @@ export enum controlMessageEnum {
   kickScreenshare = '9',
 }
 
-const RtmContext = createContext(null as unknown as RtmContextInterface);
+const ChatContext = createContext(null as unknown as chatContext);
 
-const useRtm = createHook(RtmContext);
-
-export {useRtm};
-export default RtmContext;
+export default ChatContext;

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

@@ -227,7 +227,6 @@ const Precall = (props: any) => {
     VirtualBackgroundComponent,
     PrecallAfterView,
     PrecallBeforeView,
-    wrapper: PrecallWrapper,
   } = useCustomization(data => {
     const components: {
       PrecallAfterView: React.ComponentType;
@@ -236,7 +235,6 @@ const Precall = (props: any) => {
       VideoPreview: React.ComponentType;
       VirtualBackgroundComponent: React.ComponentType<VBPanelProps>;
       MeetingName: React.ComponentType<MeetingTitleProps>;
-      wrapper: React.ComponentType;
     } = {
       PrecallAfterView: React.Fragment,
       PrecallBeforeView: React.Fragment,
@@ -244,7 +242,6 @@ const Precall = (props: any) => {
       VideoPreview: PreCallVideoPreview,
       DeviceSelect: PreCallSelectDevice,
       VirtualBackgroundComponent: VBPanel,
-      wrapper: React.Fragment,
     };
     // commented for v1 release
     // if (
@@ -291,14 +288,6 @@ const Precall = (props: any) => {
     //     }
     //   }
     // }
-    if (
-      data?.components?.precall?.wrapper &&
-      typeof data?.components?.precall?.wrapper !== 'object'
-    ) {
-      if (isValidReactComponent(data?.components?.precall?.wrapper)) {
-        components.wrapper = data?.components?.precall?.wrapper;
-      }
-    }
     if (
       data?.components?.precall?.virtualBackgroundPanel &&
       typeof data?.components?.precall.virtualBackgroundPanel !== 'object' &&
@@ -368,7 +357,7 @@ const Precall = (props: any) => {
   return FpePrecallComponent ? (
     <FpePrecallComponent />
   ) : (
-    <PrecallWrapper>
+    <>
       <PrecallBeforeView />
       <View style={{flex: 1}}>
         <ScrollView
@@ -465,7 +454,7 @@ const Precall = (props: any) => {
         </ScrollView>
       </View>
       <PrecallAfterView />
-    </PrecallWrapper>
+    </>
   );
 };
 

package/template/src/components/Precall.tsx

@@ -248,7 +248,6 @@ const Precall = () => {
     VirtualBackgroundComponent,
     PrecallAfterView,
     PrecallBeforeView,
-    wrapper: PrecallWrapper,
   } = useCustomization(data => {
     const components: {
       PrecallAfterView: React.ComponentType;
@@ -257,7 +256,6 @@ const Precall = () => {
       VirtualBackgroundComponent: React.ComponentType<VBPanelProps>;
       VideoPreview: React.ComponentType;
       MeetingName: React.ComponentType<MeetingTitleProps>;
-      wrapper: React.ComponentType;
     } = {
       PrecallAfterView: React.Fragment,
       PrecallBeforeView: React.Fragment,
@@ -265,7 +263,6 @@ const Precall = () => {
       VideoPreview: PreCallVideoPreview,
       DeviceSelect: PreCallSelectDevice,
       VirtualBackgroundComponent: VBPanel,
-      wrapper: React.Fragment,
     };
     // commented for v1 release
     // if (
@@ -313,15 +310,6 @@ const Precall = () => {
     //   }
     // }
 
-    if (
-      data?.components?.precall?.wrapper &&
-      typeof data?.components?.precall?.wrapper !== 'object'
-    ) {
-      if (isValidReactComponent(data?.components?.precall?.wrapper)) {
-        components.wrapper = data?.components?.precall?.wrapper;
-      }
-    }
-
     if (
       data?.components?.precall?.virtualBackgroundPanel &&
       typeof data?.components?.precall.virtualBackgroundPanel !== 'object' &&
@@ -400,7 +388,7 @@ const Precall = () => {
   return FpePrecallComponent ? (
     <FpePrecallComponent />
   ) : (
-    <PrecallWrapper>
+    <>
       <PrecallBeforeView />
       {$config.EVENT_MODE &&
       rtcProps.role == ClientRoleType.ClientRoleAudience ? (
@@ -541,7 +529,7 @@ const Precall = () => {
         </View>
       )}
       <PrecallAfterView />
-    </PrecallWrapper>
+    </>
   );
 };
 

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

@@ -184,100 +184,87 @@ const VideoCallMobileView = props => {
 
 const VideoCallView = React.memo(() => {
   //toolbar changes
-  const {
-    BottombarComponent,
-    BottombarProps,
-    TopbarComponent,
-    TopbarProps,
-    VideocallWrapper,
-  } = useCustomization(data => {
-    let components: {
-      BottombarComponent: React.ComponentType<any>;
-      BottombarProps?: ToolbarPresetProps['items'];
-      TopbarComponent: React.ComponentType<NavbarProps>;
-      TopbarProps?: ToolbarPresetProps['items'];
-      VideocallWrapper?: React.ComponentType;
-    } = {
-      BottombarComponent: ActionSheet,
-      BottombarProps: {},
-      TopbarComponent: NavbarMobile,
-      TopbarProps: {},
-      VideocallWrapper: ContainerView,
-    };
-    if (
-      data?.components?.videoCall &&
-      typeof data?.components?.videoCall === 'object'
-    ) {
+  const {BottombarComponent, BottombarProps, TopbarComponent, TopbarProps} =
+    useCustomization(data => {
+      let components: {
+        BottombarComponent: React.ComponentType<any>;
+        BottombarProps?: ToolbarPresetProps['items'];
+        TopbarComponent: React.ComponentType<NavbarProps>;
+        TopbarProps?: ToolbarPresetProps['items'];
+      } = {
+        BottombarComponent: ActionSheet,
+        BottombarProps: {},
+        TopbarComponent: NavbarMobile,
+        TopbarProps: {},
+      };
       if (
-        data?.components?.videoCall?.bottomToolBar &&
-        typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
       ) {
-        components.BottombarComponent =
-          data?.components?.videoCall.bottomToolBar;
-      }
-      if (
-        data?.components?.videoCall?.bottomToolBar &&
-        typeof data?.components?.videoCall?.bottomToolBar === 'object' &&
-        Object.keys(data?.components?.videoCall.bottomToolBar)?.length
-      ) {
-        components.BottombarProps = data?.components?.videoCall.bottomToolBar;
-      }
-
-      if (
-        data?.components?.videoCall?.topToolBar &&
-        typeof data?.components?.videoCall?.topToolBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.topToolBar)
-      ) {
-        components.TopbarComponent = data?.components?.videoCall.topToolBar;
-      }
+        if (
+          data?.components?.videoCall?.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+        ) {
+          components.BottombarComponent =
+            data?.components?.videoCall.bottomToolBar;
+        }
+        if (
+          data?.components?.videoCall?.bottomToolBar &&
+          typeof data?.components?.videoCall?.bottomToolBar === 'object' &&
+          Object.keys(data?.components?.videoCall.bottomToolBar)?.length
+        ) {
+          components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+        }
 
-      if (
-        data?.components?.videoCall?.topToolBar &&
-        typeof data?.components?.videoCall?.topToolBar === 'object' &&
-        Object.keys(data?.components?.videoCall.topToolBar).length
-      ) {
-        components.TopbarProps = data?.components?.videoCall.topToolBar;
-      }
+        if (
+          data?.components?.videoCall?.topToolBar &&
+          typeof data?.components?.videoCall?.topToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.topToolBar)
+        ) {
+          components.TopbarComponent = data?.components?.videoCall.topToolBar;
+        }
 
-      if (
-        data?.components?.videoCall?.wrapper &&
-        typeof data?.components?.videoCall?.wrapper !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.wrapper)
-      ) {
-        components.VideocallWrapper = data?.components?.videoCall.wrapper;
+        if (
+          data?.components?.videoCall?.topToolBar &&
+          typeof data?.components?.videoCall?.topToolBar === 'object' &&
+          Object.keys(data?.components?.videoCall.topToolBar).length
+        ) {
+          components.TopbarProps = data?.components?.videoCall.topToolBar;
+        }
       }
-    }
 
-    return components;
-  });
+      return components;
+    });
 
   return (
-    <VideocallWrapper>
-      <ToolbarProvider value={{position: ToolbarPosition.top}}>
-        {Object.keys(TopbarProps)?.length ? (
-          <TopbarComponent items={TopbarProps} includeDefaultItems={false} />
-        ) : (
-          <TopbarComponent />
-        )}
-      </ToolbarProvider>
-      <View style={styles.videoView}>
-        <VideoComponent />
-        <CaptionContainer />
-      </View>
-      <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
-        <ActionSheetProvider>
-          {Object.keys(BottombarProps)?.length ? (
-            <BottombarComponent
-              items={BottombarProps}
-              includeDefaultItems={false}
-            />
+    <View style={styles.container}>
+      <>
+        <ToolbarProvider value={{position: ToolbarPosition.top}}>
+          {Object.keys(TopbarProps)?.length ? (
+            <TopbarComponent items={TopbarProps} includeDefaultItems={false} />
           ) : (
-            <BottombarComponent />
+            <TopbarComponent />
           )}
-        </ActionSheetProvider>
-      </ToolbarProvider>
-    </VideocallWrapper>
+        </ToolbarProvider>
+        <View style={styles.videoView}>
+          <VideoComponent />
+          <CaptionContainer />
+        </View>
+        <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+          <ActionSheetProvider>
+            {Object.keys(BottombarProps)?.length ? (
+              <BottombarComponent
+                items={BottombarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <BottombarComponent />
+            )}
+          </ActionSheetProvider>
+        </ToolbarProvider>
+      </>
+    </View>
   );
 });
 
@@ -310,7 +297,3 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
 });
-
-const ContainerView = props => {
-  return <View style={styles.container}>{props.children}</View>;
-};

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

@@ -10,8 +10,6 @@ import {DispatchContext} from '../../../agora-rn-uikit';
 import MeetingInfoGridTile from '../../components/meeting-info-invite/MeetingInfoGridTile';
 import Spacer from '../../atoms/Spacer';
 import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
-import {useCustomization} from 'customization-implementation';
-import useMount from '../../components/useMount';
 
 const VideoComponent = () => {
   const {dispatch} = useContext(DispatchContext);
@@ -23,42 +21,23 @@ const VideoComponent = () => {
   const isDesktop = useIsDesktop();
   const {audienceUids, hostUids} = useLiveStreamDataContext();
   const [showNoUserInfo, setShowNoUserInfo] = useState(false);
-  const isCustomLayoutUsed = useCustomization(config => {
-    if (
-      typeof config?.components?.videoCall === 'object' &&
-      config?.components?.videoCall?.customLayout
-    ) {
-      return true;
-    }
-    return false;
-  });
 
   const {roomPreference} = useRoomInfo();
 
   const disableShareTile = roomPreference?.disableShareTile;
-  const disableShareTileRef = useRef(disableShareTile);
-
-  useMount(() => {
-    //show share tile after 2.5 seconds because RTC user join take few seconds.
-    //meanwhile we don't want to show the share tile
-    setTimeout(() => {
-      if (!disableShareTileRef.current) {
-        setShowNoUserInfo(true);
-      }
-    }, 2500);
-  });
 
   useEffect(() => {
-    disableShareTileRef.current = disableShareTile;
-    if (disableShareTile) {
-      setShowNoUserInfo(false);
+    if (!disableShareTile) {
+      setTimeout(() => {
+        setShowNoUserInfo(true);
+      }, 2500);
     }
   }, [disableShareTile]);
 
   const currentLayoutRef = useRef(currentLayout);
   const gridLayoutName = getGridLayoutName();
   useEffect(() => {
-    if (activeUids && activeUids.length === 1 && !isCustomLayoutUsed) {
+    if (activeUids && activeUids.length === 1) {
       if (pinnedUid) {
         dispatch({type: 'UserPin', value: [0]});
         dispatch({type: 'UserSecondaryPin', value: [0]});
@@ -67,7 +46,7 @@ const VideoComponent = () => {
         setLayout(gridLayoutName);
       }
     }
-  }, [activeUids, isCustomLayoutUsed]);
+  }, [activeUids]);
 
   useEffect(() => {
     currentLayoutRef.current = currentLayout;

package/template/src/utils/useGetHostUids.ts

@@ -1,6 +0,0 @@
-import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
-
-export const useGetHostIds = () => {
-  const {hostUids} = useVideoMeetingData();
-  return hostUids;
-};

package/template/src/utils/useHideShareTile.tsx

@@ -1,16 +0,0 @@
-import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
-
-export const useHideShareTitle = () => {
-  const {setRoomInfo} = useSetRoomInfo();
-  return (disableShareTile: boolean) => {
-    setRoomInfo(prevState => {
-      return {
-        ...prevState,
-        roomPreference: {
-          ...prevState?.roomPreference,
-          disableShareTile: disableShareTile,
-        },
-      };
-    });
-  };
-};