agora-appbuilder-core 4.0.28 → 4.0.29-beta-11

package/package.json

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

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

@@ -61,3 +61,4 @@ 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 {useRtmContext} from '../src/components/ChatContext';

package/template/customization-api/typeDefinition.ts

@@ -35,6 +35,7 @@ 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,3 +47,4 @@ 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,8 +510,15 @@ 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(), {
+      fetch(GET_UNAUTH_FLOW_API_ENDPOINT(user_id_unauth), {
         credentials: 'include',
         headers: {
           'X-Request-Id': requestId,

package/template/src/auth/config.ts

@@ -46,7 +46,12 @@ export const getOriginURL = () => {
   return isWeb() ? `${window.location.origin}` : `${$config.FRONTEND_ENDPOINT}`;
 };
 
-export const GET_UNAUTH_FLOW_API_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}`;
+  }
   return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
     $config.PROJECT_ID
   }&platform_id=${getPlatformId()}`;

package/template/src/components/ChatContext.ts

@@ -13,6 +13,7 @@ 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;
@@ -82,4 +83,7 @@ export enum controlMessageEnum {
 
 const ChatContext = createContext(null as unknown as chatContext);
 
+const useRtmContext = createHook(ChatContext);
+
+export {useRtmContext};
 export default ChatContext;

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

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

package/template/src/components/Precall.tsx

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

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

@@ -10,6 +10,8 @@ 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);
@@ -21,23 +23,42 @@ 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);
 
-  useEffect(() => {
-    if (!disableShareTile) {
-      setTimeout(() => {
+  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);
+      }
+    }, 2500);
+  });
+
+  useEffect(() => {
+    disableShareTileRef.current = disableShareTile;
+    if (disableShareTile) {
+      setShowNoUserInfo(false);
     }
   }, [disableShareTile]);
 
   const currentLayoutRef = useRef(currentLayout);
   const gridLayoutName = getGridLayoutName();
   useEffect(() => {
-    if (activeUids && activeUids.length === 1) {
+    if (activeUids && activeUids.length === 1 && !isCustomLayoutUsed) {
       if (pinnedUid) {
         dispatch({type: 'UserPin', value: [0]});
         dispatch({type: 'UserSecondaryPin', value: [0]});
@@ -46,7 +67,7 @@ const VideoComponent = () => {
         setLayout(gridLayoutName);
       }
     }
-  }, [activeUids]);
+  }, [activeUids, isCustomLayoutUsed]);
 
   useEffect(() => {
     currentLayoutRef.current = currentLayout;

package/template/src/utils/useHideShareTile.tsx

@@ -0,0 +1,16 @@
+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,
+        },
+      };
+    });
+  };
+};