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

package/package.json

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

package/template/customization-api/action-library.ts

@@ -7,7 +7,4 @@ export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
 //switch camera
 export {default as useSwitchCamera} from '../src/utils/useSwitchCamera';
 
-export {
-  controlMessageEnum,
-  useChatContext,
-} from '../src/components/ChatContext';
+export {controlMessageEnum} from '../src/components/ChatContext';

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/src/components/ChatContext.ts

@@ -61,7 +61,7 @@ export enum messageActionType {
   Normal = '1',
 }
 
-export interface chatContext {
+export interface RtmContextInterface {
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
   engine: RtmEngine;
@@ -81,9 +81,9 @@ export enum controlMessageEnum {
   kickScreenshare = '9',
 }
 
-const ChatContext = createContext(null as unknown as chatContext);
+const RtmContext = createContext(null as unknown as RtmContextInterface);
 
-const useChatContext = createHook(ChatContext);
+const useRtm = createHook(RtmContext);
 
-export {useChatContext};
-export default ChatContext;
+export {useRtm};
+export default RtmContext;

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/utils/useGetHostUids.ts

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