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

package/package.json

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

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

@@ -61,3 +61,5 @@ 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,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;
@@ -60,7 +61,7 @@ export enum messageActionType {
   Normal = '1',
 }
 
-export interface chatContext {
+export interface RtmContextInterface {
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
   engine: RtmEngine;
@@ -80,6 +81,9 @@ export enum controlMessageEnum {
   kickScreenshare = '9',
 }
 
-const ChatContext = createContext(null as unknown as chatContext);
+const RtmContext = createContext(null as unknown as RtmContextInterface);
 
-export default ChatContext;
+const useRtm = createHook(RtmContext);
+
+export {useRtm};
+export default RtmContext;

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/components/recordings/recording-table.tsx

@@ -97,7 +97,13 @@ function RTableBody({status, recordings}) {
                 </Text>
               </View>
               <View style={style.td}>
-                {item?.download_url?.length > 0 ? (
+                {!item.download_url ? (
+                  <View style={(style.tactions, {marginTop: 0})}>
+                    <Text style={style.placeHolder}>
+                      {item?.error || 'No recording found'}
+                    </Text>
+                  </View>
+                ) : item?.download_url?.length > 0 ? (
                   item?.download_url?.map((link: string, i: number) => (
                     <View style={style.tactions} key={i}>
                       <View>

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

@@ -184,87 +184,100 @@ const VideoCallMobileView = props => {
 
 const VideoCallView = React.memo(() => {
   //toolbar changes
-  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: {},
-      };
+  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'
+    ) {
       if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
+        data?.components?.videoCall?.bottomToolBar &&
+        typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.bottomToolBar)
       ) {
-        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;
-        }
+        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?.topToolBar &&
+        typeof data?.components?.videoCall?.topToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topToolBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topToolBar;
+      }
 
-        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' &&
+        Object.keys(data?.components?.videoCall.topToolBar).length
+      ) {
+        components.TopbarProps = 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;
       }
+    }
 
-      return components;
-    });
+    return components;
+  });
 
   return (
-    <View style={styles.container}>
-      <>
-        <ToolbarProvider value={{position: ToolbarPosition.top}}>
-          {Object.keys(TopbarProps)?.length ? (
-            <TopbarComponent items={TopbarProps} includeDefaultItems={false} />
+    <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}
+            />
           ) : (
-            <TopbarComponent />
+            <BottombarComponent />
           )}
-        </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>
+        </ActionSheetProvider>
+      </ToolbarProvider>
+    </VideocallWrapper>
   );
 });
 
@@ -297,3 +310,7 @@ 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,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/useGetHostUids.ts

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

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,
+        },
+      };
+    });
+  };
+};