agora-appbuilder-core 4.1.19-beta.3 → 4.1.19-beta.4

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -53,6 +53,7 @@ export interface SidePanelItem {
   name: string;
   title: string;
   component: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
 }
 

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.19-beta.3",
-  CORE_VERSION: "4.1.19-beta.3",
+  CLI_VERSION: "3.1.19-beta.4",
+  CORE_VERSION: "4.1.19-beta.4",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/CustomSidePanel.tsx

@@ -10,23 +10,18 @@
 *********************************************
 */
 import React from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView} from 'react-native';
 import {isMobileUA, isWebInternal, useIsSmall} from '../utils/common';
 import CommonStyles from './CommonStyles';
-import SidePanelHeader, {
-  SidePanelStyles,
-} from '../subComponents/SidePanelHeader';
-import {useLayout} from '../utils/useLayout';
-import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import useCaptionWidth from '../subComponents/caption/useCaptionWidth';
-import {useSidePanel} from '../utils/useSidePanel';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {CustomSidePanelHeader} from '../pages/video-call/SidePanelHeader';
-
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 export interface CustomSidePanelViewInterface {
   name: string;
   title?: string;
   content: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   showHeader?: boolean;
 }
@@ -37,12 +32,12 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
     showHeader = true,
     name,
     title,
+    headerRightSlot,
     onClose,
   } = props;
-  const {currentLayout} = useLayout();
   const {transcriptHeight} = useCaptionWidth();
-  const {setSidePanel} = useSidePanel();
   const isSmall = useIsSmall();
+  const {currentLayout} = useLayout();
 
   return (
     <View
@@ -57,13 +52,18 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
           : // desktop maximized
             CommonStyles.sidePanelContainerWeb,
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-          ? {marginVertical: 4}
+          ? {marginTop: 4}
           : {},
         //@ts-ignore
         transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && (
-        <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
+        <CustomSidePanelHeader
+          name={name}
+          title={title}
+          headerRightSlot={headerRightSlot}
+          onClose={onClose}
+        />
       )}
       <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}

package/template/src/components/RTMConfigure.tsx

@@ -958,6 +958,19 @@ const RtmConfigure = (props: any) => {
         );
         return;
       }
+      if (
+        !parsedValue ||
+        typeof parsedValue !== 'object' ||
+        Array.isArray(parsedValue)
+      ) {
+        logger.debug(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'Ignoring non custom-event RTM payload',
+          {evt, sender, ts},
+        );
+        return;
+      }
       const {payload, persistLevel, source} = parsedValue;
       // Step 1: Set local attributes
       if (persistLevel === PersistanceLevel.Session) {

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

@@ -291,6 +291,8 @@ const ActionSheet = props => {
               isCustomSidePanel={true}
               customSidePanelProps={{
                 title: sidePanelArray[customSidePanelIndex]?.title,
+                headerRightSlot:
+                  sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                 onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                 name: sidePanelArray[customSidePanelIndex]?.name,
               }}

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

@@ -326,6 +326,8 @@ const ActionSheet = props => {
                 isCustomSidePanel={true}
                 customSidePanelProps={{
                   title: sidePanelArray[customSidePanelIndex]?.title,
+                  headerRightSlot:
+                    sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                   onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                   name: sidePanelArray[customSidePanelIndex]?.name,
                 }}

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

@@ -16,6 +16,7 @@ const ActionSheetHandle = (props: {
   isCustomSidePanel?: boolean;
   customSidePanelProps?: {
     title: string;
+    headerRightSlot?: React.ReactNode;
     onClose?: () => void;
     name: string;
   };

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

@@ -208,6 +208,7 @@ export const VBHeader = () => {
 
 export const CustomSidePanelHeader = (props: {
   title: string;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   name: string;
 }) => {
@@ -217,6 +218,7 @@ export const CustomSidePanelHeader = (props: {
       centerComponent={
         <Text style={SidePanelStyles.heading}>{props?.title}</Text>
       }
+      trailingComponent={props?.headerRightSlot}
       trailingIconName="close"
       trailingIconOnPress={() => {
         setSidePanel(SidePanelType.None);
@@ -224,7 +226,7 @@ export const CustomSidePanelHeader = (props: {
           props?.onClose && props?.onClose();
         } catch (error) {
           console.error(
-            `Error on calling onClose in custom side panel ${name}`,
+            `Error on calling onClose in custom side panel ${props.name}`,
           );
         }
       }}

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

@@ -400,6 +400,9 @@ const VideoCallScreen = () => {
                   <CustomSidePanelView
                     content={SidePanelArray[customSidePanelIndex]?.component}
                     title={SidePanelArray[customSidePanelIndex]?.title}
+                    headerRightSlot={
+                      SidePanelArray[customSidePanelIndex]?.headerRightSlot
+                    }
                     name={SidePanelArray[customSidePanelIndex]?.name}
                     onClose={SidePanelArray[customSidePanelIndex]?.onClose}
                   />

package/template/src/subComponents/SidePanelHeader.tsx

@@ -13,6 +13,7 @@ export interface SidePanelHeaderProps {
   leadingIconOnPress?: () => void;
   trailingIconName?: keyof IconsInterface;
   trailingIconOnPress?: () => void;
+  trailingComponent?: React.ReactNode;
   trailingIconName2?: keyof IconsInterface;
   trailingIconOnPress2?: () => void;
   isChat?: boolean;
@@ -56,9 +57,21 @@ const SidePanelHeader = React.forwardRef<View, SidePanelHeaderProps>(
             <View style={{width: 30, height: 'auto'}}></View>
           ) : null}
           {props?.centerComponent ? props.centerComponent : null}
-          <View style={props?.trailingIconName2 && SidePanelStyles.row}>
+          <View
+            style={
+              (props?.trailingIconName2 || props?.trailingComponent) &&
+              SidePanelStyles.row
+            }>
+            {props?.trailingComponent ? props.trailingComponent : null}
             {props?.trailingIconName ? (
-              <View ref={ref} collapsable={false} style={{flex: 1}}>
+              <View
+                ref={ref}
+                collapsable={false}
+                style={
+                  props?.trailingIconName2 || props?.trailingComponent
+                    ? {}
+                    : {flex: 1}
+                }>
                 <IconButton
                   hoverEffect={true}
                   hoverEffectStyle={{
@@ -116,6 +129,7 @@ export const SidePanelStyles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: $config.CARD_LAYER_3_COLOR,
     position: 'relative',
+    zIndex: 1000,
   },
   chatPadding: {
     paddingHorizontal: 16,