agora-appbuilder-core 4.0.28-beta-4 → 4.0.28-beta-5

package/package.json

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

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.28-beta-4',
-  CORE_VERSION: '4.0.28-beta-4',
+  CLI_VERSION: '3.0.28-beta-5',
+  CORE_VERSION: '4.0.28-beta-5',
   DISABLE_LANDSCAPE_MODE: false,
 };
 

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -70,9 +70,9 @@ const ActionSheet = props => {
 
   React.useEffect(() => {
     if (showCustomSidePanel) {
-      customActionSheetRef?.current.present();
+      customActionSheetRef?.current?.present();
     } else {
-      customActionSheetRef?.current.close();
+      customActionSheetRef?.current?.close();
     }
   }, [showCustomSidePanel]);
 
@@ -115,7 +115,7 @@ const ActionSheet = props => {
               participantsSheetRef?.current.close();
               settingsSheetRef?.current.close();
               transcriptSheetRef?.current.close();
-              customActionSheetRef?.current.close();
+              customActionSheetRef?.current?.close();
               bottomSheetRef?.current.present();
             }, 200);
           } else {
@@ -124,7 +124,7 @@ const ActionSheet = props => {
             participantsSheetRef?.current.close();
             settingsSheetRef?.current.close();
             transcriptSheetRef?.current.close();
-            customActionSheetRef?.current.close();
+            customActionSheetRef?.current?.close();
           }
 
           handleSheetChanges(0);
@@ -265,34 +265,38 @@ const ActionSheet = props => {
       </BottomSheetModal>
 
       {/* Custom Action Sheet  */}
-      <BottomSheetModal
-        snapPoints={['100%']}
-        ref={customActionSheetRef}
-        name="CustomSheet"
-        onDismiss={onDismiss}
-        style={styles.container}
-        backgroundStyle={styles.backgroundStyle}
-        handleIndicatorStyle={styles.handleIndicatorStyle}
-        enableContentPanningGesture={false}
-        handleComponent={() => (
-          <ActionSheetHandle
-            isCustomSidePanel={true}
-            customSidePanelProps={{
-              title: sidePanelArray[customSidePanelIndex]?.title,
-              onClose: sidePanelArray[customSidePanelIndex]?.onClose,
-              name: sidePanelArray[customSidePanelIndex]?.name,
-            }}
-          />
-        )}
-        stackBehavior="push">
-        <BottomSheetView>
-          <CustomSidePanelView
-            showHeader={false}
-            content={sidePanelArray[customSidePanelIndex]?.component}
-            name={sidePanelArray[customSidePanelIndex]?.name}
-          />
-        </BottomSheetView>
-      </BottomSheetModal>
+      {sidePanelArray && sidePanelArray?.length ? (
+        <BottomSheetModal
+          snapPoints={['100%']}
+          ref={customActionSheetRef}
+          name="CustomSheet"
+          onDismiss={onDismiss}
+          style={styles.container}
+          backgroundStyle={styles.backgroundStyle}
+          handleIndicatorStyle={styles.handleIndicatorStyle}
+          enableContentPanningGesture={false}
+          handleComponent={() => (
+            <ActionSheetHandle
+              isCustomSidePanel={true}
+              customSidePanelProps={{
+                title: sidePanelArray[customSidePanelIndex]?.title,
+                onClose: sidePanelArray[customSidePanelIndex]?.onClose,
+                name: sidePanelArray[customSidePanelIndex]?.name,
+              }}
+            />
+          )}
+          stackBehavior="push">
+          <BottomSheetView>
+            <CustomSidePanelView
+              showHeader={false}
+              content={sidePanelArray[customSidePanelIndex]?.component}
+              name={sidePanelArray[customSidePanelIndex]?.name}
+            />
+          </BottomSheetView>
+        </BottomSheetModal>
+      ) : (
+        <></>
+      )}
     </BottomSheetModalProvider>
   );
 };

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

@@ -45,7 +45,12 @@ import ScreenshareButton from '../../subComponents/screenshare/ScreenshareButton
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
 import {getLanguageLabel} from '../../subComponents/caption/utils';
 import Toast from '../../../react-native-toast-message';
-import {CustomToolbarMerge, CustomToolbarSorting} from '../../utils/common';
+import {
+  CustomToolbarMerge,
+  CustomToolbarSorting,
+  isIOS,
+  isAndroid,
+} from '../../utils/common';
 import {ActionSheetProvider} from '../../utils/useActionSheet';
 import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
 import {useSetRoomInfo} from '../../components/room-info/useSetRoomInfo';
@@ -193,17 +198,17 @@ const LayoutIcon = props => {
 
 interface CaptionIconBtnProps {
   showLabel?: boolean;
-  onPress?: () => void;
+  onPressCallback?: () => void;
 }
 
 const CaptionIconBtn = (props: CaptionIconBtnProps) => {
-  const {onPress = () => {}} = props;
+  const {onPressCallback = () => {}} = props;
   return (
     <ToolbarItem toolbarProps={props}>
       <CaptionIcon
         isOnActionSheet={true}
         showLabel={$config.ICON_TEXT}
-        closeActionSheet={onPress}
+        closeActionSheet={onPressCallback}
       />
     </ToolbarItem>
   );
@@ -416,7 +421,7 @@ const ActionSheetContent = props => {
     },
     screenshare: {
       order: 10,
-      component: ScreenshareIcon,
+      component: isAndroid() || isIOS() ? ScreenshareIcon : null,
     },
     invite: {
       order: 11,
@@ -426,7 +431,9 @@ const ActionSheetContent = props => {
       order: 12,
       component: CaptionIconBtn,
       props: {
-        onPress: () => handleSheetChanges(isExpanded ? 0 : 1),
+        onPressCallback: () => {
+          handleSheetChanges(isExpanded ? 0 : 1);
+        },
       },
     },
     transcript: {
@@ -496,9 +503,14 @@ const ActionSheetContent = props => {
                 const Component = displayItems[i]?.component;
                 const label = displayItems[i]?.label;
                 const onPress = displayItems[i]?.onPress;
+                const extraProps = displayItems[i]?.props;
                 if (Component) {
                   return (
-                    <Component label={customLabel(label)} onPress={onPress} />
+                    <Component
+                      label={customLabel(label)}
+                      onPress={onPress}
+                      {...extraProps}
+                    />
                   );
                 } else {
                   return null;
@@ -555,8 +567,15 @@ const CarouselWrapper = ({data, dataObject}) => {
           const Component = dataObject[item]?.component;
           const label = dataObject[item]?.label;
           const onPress = dataObject[item]?.onPress;
+          const extraProps = dataObject[item]?.props;
           if (Component) {
-            return <Component label={customLabel(label)} onPress={onPress} />;
+            return (
+              <Component
+                label={customLabel(label)}
+                onPress={onPress}
+                {...extraProps}
+              />
+            );
           } else {
             return null;
           }

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

@@ -5,7 +5,7 @@ import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
 import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
 import {useContent, useRoomInfo} from 'customization-api';
-import {getGridLayoutName} from './DefaultLayouts';
+import {DefaultLayouts, getGridLayoutName} from './DefaultLayouts';
 import {DispatchContext} from '../../../agora-rn-uikit';
 import MeetingInfoGridTile from '../../components/meeting-info-invite/MeetingInfoGridTile';
 import Spacer from '../../atoms/Spacer';
@@ -84,9 +84,11 @@ const VideoComponent = () => {
             justifyContent: 'space-between',
           }}>
           <CurrentLayout renderData={activeUids} />
-          {(!$config.EVENT_MODE && activeUids.length === 1) ||
-          ($config.EVENT_MODE &&
-            hostUids.concat(audienceUids)?.length === 1) ? (
+          {((!$config.EVENT_MODE && activeUids.length === 1) ||
+            ($config.EVENT_MODE &&
+              hostUids.concat(audienceUids)?.length === 1)) &&
+          (layoutsData[layout].name === DefaultLayouts[0].name ||
+            layoutsData[layout].name === DefaultLayouts[1].name) ? (
             <>
               <Spacer size={8} horizontal={isDesktop() ? true : false} />
               <MeetingInfoGridTile />

package/template/src/utils/useOrientation.native.tsx

@@ -0,0 +1,3 @@
+export function useOrientation() {
+  return 'PORTRAIT';
+}