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

package/template/src/components/RTMConfigure.tsx

@@ -958,19 +958,6 @@ 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/components/livestream/LiveStreamContext.tsx

@@ -543,7 +543,9 @@ export const LiveStreamContextProvider: React.FC<
             raiseHandApprovedRequestRecallToastHeading?.current(),
             null,
           );
-          screenshareContextInstanceRef?.current?.stopScreenshare(); // This will not exist on ios
+          screenshareContextInstanceRef?.current?.stopScreenshare(
+            'livestream_demotion',
+          ); // This will not exist on ios
 
           // Demote user's privileges to audience
           changeClientRoleTo(ClientRoleType.ClientRoleAudience);
@@ -716,7 +718,9 @@ export const LiveStreamContextProvider: React.FC<
         ClientRoleType.ClientRoleBroadcaster &&
       raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE
     ) {
-      screenshareContextInstanceRef?.current?.stopScreenshare(); // This will not exist on ios
+      screenshareContextInstanceRef?.current?.stopScreenshare(
+        'livestream_recall',
+      ); // This will not exist on ios
       // Change role
       changeClientRoleTo(ClientRoleType.ClientRoleAudience);
     }

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -87,7 +87,6 @@ interface UserActionMenuOptionsOptionsProps {
   spotlightUid?: UidType;
   setSpotlightUid?: (uid: UidType) => void;
   items?: UserActionMenuItemsConfig;
-  extraMenuItems?: ActionMenuItem[];
 }
 
 export default function UserActionMenuOptionsOptions(
@@ -103,13 +102,7 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {
-    user,
-    actionMenuVisible,
-    setActionMenuVisible,
-    spotlightUid,
-    extraMenuItems,
-  } = props;
+  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -681,7 +674,7 @@ export default function UserActionMenuOptionsOptions(
             removeScreenshareConfig.onAction?.(user.parentUid);
             //for local user directly stop the screenshare
             if (localuid === user.parentUid) {
-              stopScreenshare();
+              stopScreenshare('participant_menu');
             }
             //for remote user show popup and then user will use cta to stop screenshare
             else {
@@ -723,24 +716,6 @@ export default function UserActionMenuOptionsOptions(
       items.push(...customItems);
     }
 
-    if (extraMenuItems?.length) {
-      items.push(
-        ...extraMenuItems.map(item => ({
-          ...item,
-          closeActionMenu: () => {
-            item.closeActionMenu?.();
-            setActionMenuVisible(false);
-          },
-          onPress: item.onPress
-            ? () => {
-                item.onPress?.();
-                setActionMenuVisible(false);
-              }
-            : item.onPress,
-        })),
-      );
-    }
-
     items.sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
 
     setActionMenuitems(items);
@@ -754,8 +729,6 @@ export default function UserActionMenuOptionsOptions(
     secondaryPinnedUid,
     currentLayout,
     spotlightUid,
-    extraMenuItems,
-    setActionMenuVisible,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/pages/Create.tsx

@@ -29,6 +29,7 @@ import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import useCreateRoom from '../utils/useCreateRoom';
 import {CreateProvider} from './create/useCreate';
+import useJoinRoom from '../utils/useJoinRoom';
 import {
   RoomInfoDefaultValue,
   useRoomInfo,
@@ -38,10 +39,12 @@ import Toggle from '../atoms/Toggle';
 import Card from '../atoms/Card';
 import Spacer from '../atoms/Spacer';
 import LinkButton from '../atoms/LinkButton';
+import StorageContext from '../components/StorageContext';
 import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
 import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {randomNameGenerator} from '../utils';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 import isSDK from '../utils/isSDK';
@@ -64,35 +67,25 @@ import {LogSource, logger} from '../logger/AppBuilderLogger';
 import SDKEvents from '../utils/SdkEvents';
 
 const Create = () => {
-  const {CreateComponent, CreateHeaderRightSlotComponent} = useCustomization(
-    data => {
-      let components: {
-        CreateComponent?: React.ElementType;
-        CreateHeaderRightSlotComponent?: React.ElementType;
-      } = {};
+  const {CreateComponent} = useCustomization(data => {
+    let components: {
+      CreateComponent?: React.ElementType;
+    } = {};
+    if (
+      data?.components?.create &&
+      typeof data?.components?.create !== 'object'
+    ) {
       if (
         data?.components?.create &&
-        typeof data?.components?.create !== 'object'
-      ) {
-        if (
-          data?.components?.create &&
-          isValidReactComponent(data?.components?.create)
-        )
-          components.CreateComponent = data?.components?.create;
-      }
-      if (
-        data?.components?.create &&
-        typeof data?.components?.create === 'object' &&
-        data?.components?.create?.headerRightSlot &&
-        isValidReactComponent(data?.components?.create?.headerRightSlot)
-      ) {
-        components.CreateHeaderRightSlotComponent =
-          data?.components?.create?.headerRightSlot;
-      }
-      return components;
-    },
-  );
+        isValidReactComponent(data?.components?.create)
+      )
+        components.CreateComponent = data?.components?.create;
+    }
+    return components;
+  });
 
+  const useJoin = useJoinRoom();
+  const {setStore} = useContext(StorageContext);
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const history = useHistory();
   const [loading, setLoading] = useState(false);
@@ -320,11 +313,6 @@ const Create = () => {
                 <View>
                   <View style={style.logoContainerStyle}>
                     <Logo />
-                    {CreateHeaderRightSlotComponent ? (
-                      <CreateHeaderRightSlotComponent />
-                    ) : (
-                      <></>
-                    )}
                     {isMobileUA() ? (
                       <IDPLogoutComponent
                         containerStyle={{marginTop: 0, marginRight: 0}}

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

@@ -291,8 +291,6 @@ 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,8 +326,6 @@ 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,7 +16,6 @@ const ActionSheetHandle = (props: {
   isCustomSidePanel?: boolean;
   customSidePanelProps?: {
     title: string;
-    headerRightSlot?: React.ReactNode;
     onClose?: () => void;
     name: string;
   };

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

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

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

@@ -400,9 +400,6 @@ 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/pages/video-call/VideoRenderer.tsx

@@ -25,7 +25,6 @@ import {
 } from './DefaultLayouts';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
-import type {ActionMenuItem} from '../../atoms/ActionMenu';
 import {
   isMobileUA,
   isValidReactComponent,
@@ -61,7 +60,6 @@ export interface VideoRendererProps {
   CustomChild?: React.ComponentType;
   avatarRadius?: number;
   hideMenuOptions?: boolean;
-  extraMenuItems?: ActionMenuItem[];
   containerStyle?: ViewStyle;
   innerContainerStyle?: ViewStyle;
 }
@@ -71,7 +69,6 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   CustomChild,
   avatarRadius = 100,
   hideMenuOptions = false,
-  extraMenuItems,
   containerStyle = {},
   innerContainerStyle = {},
 }) => {
@@ -217,7 +214,6 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
         from={'video-tile'}
         setSpotlightUid={setSpotlightUid}
         spotlightUid={spotlightUid}
-        extraMenuItems={extraMenuItems}
       />
       <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
         <View

package/template/src/subComponents/LocalEndCall.tsx

@@ -57,7 +57,7 @@ const LocalEndcall = (props: LocalEndcallProps) => {
       props.customExit();
     } else {
       if ((isAndroid() || isIOS()) && isScreenshareActive) {
-        stopScreenshare();
+        stopScreenshare('end_call_cleanup');
         setEndCallState(true);
       } else {
         executeEndCall();

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -59,7 +59,7 @@ function ScreenShareNotice({uid, isMax}: {uid: UidType; isMax: boolean}) {
       ) : (
         <TouchableOpacity
           style={styles.btnContainer}
-          onPress={() => stopScreenshare()}>
+          onPress={() => stopScreenshare('overlay_control')}>
           <View style={styles.iconContainer}>
             <ImageIcon
               iconType="plain"

package/template/src/subComponents/SidePanelHeader.tsx

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

package/template/src/subComponents/recording/__tests__/recordingJourney.test.ts

@@ -0,0 +1,25 @@
+import {runPostStartRecordingLayoutUpdate} from '../recordingJourney';
+
+describe('recording journey', () => {
+  it('does not reject recording start when the post-start layout update fails', async () => {
+    const layoutError = new Error('layout update failed');
+    const onFailure = jest.fn();
+
+    await expect(
+      runPostStartRecordingLayoutUpdate(
+        () => Promise.reject(layoutError),
+        onFailure,
+      ),
+    ).resolves.toBe(false);
+    expect(onFailure).toHaveBeenCalledWith(layoutError);
+  });
+
+  it('reports a successful post-start layout update', async () => {
+    const onFailure = jest.fn();
+
+    await expect(
+      runPostStartRecordingLayoutUpdate(() => Promise.resolve(), onFailure),
+    ).resolves.toBe(true);
+    expect(onFailure).not.toHaveBeenCalled();
+  });
+});

package/template/src/subComponents/recording/__tests__/recordingLayoutResponse.test.ts

@@ -0,0 +1,56 @@
+import {parseRecordingLayoutResponse} from '../recordingLayoutResponse';
+
+const response = (
+  body: string,
+  options: {ok?: boolean; status?: number; statusText?: string} = {},
+) =>
+  ({
+    ok: options.ok ?? true,
+    status: options.status ?? 200,
+    statusText: options.statusText ?? 'OK',
+    text: jest.fn().mockResolvedValue(body),
+  } as Pick<Response, 'ok' | 'status' | 'statusText' | 'text'>);
+
+describe('parseRecordingLayoutResponse', () => {
+  it('accepts an empty successful response', async () => {
+    await expect(
+      parseRecordingLayoutResponse(
+        response('', {status: 204, statusText: 'No Content'}),
+      ),
+    ).resolves.toBeUndefined();
+  });
+
+  it('returns a successful JSON response', async () => {
+    await expect(
+      parseRecordingLayoutResponse(response('{"success":true}')),
+    ).resolves.toEqual({success: true});
+  });
+
+  it('rejects an empty HTTP error with status details', async () => {
+    await expect(
+      parseRecordingLayoutResponse(
+        response('', {
+          ok: false,
+          status: 500,
+          statusText: 'Internal Server Error',
+        }),
+      ),
+    ).rejects.toMatchObject({
+      name: 'Error',
+      code: 'HTTP_500',
+      httpStatus: 500,
+      message:
+        'Recording layout API failed with HTTP 500 Internal Server Error',
+    });
+  });
+
+  it('rejects invalid non-empty JSON with the response details', async () => {
+    await expect(
+      parseRecordingLayoutResponse(response('<html>')),
+    ).rejects.toMatchObject({
+      name: 'Error',
+      code: 'HTTP_200',
+      responseBody: '<html>',
+    });
+  });
+});

package/template/src/subComponents/recording/recordingJourney.ts

@@ -0,0 +1,12 @@
+export const runPostStartRecordingLayoutUpdate = async (
+  updateLayout: () => Promise<void>,
+  onFailure: (error: unknown) => void,
+) => {
+  try {
+    await updateLayout();
+    return true;
+  } catch (error) {
+    onFailure(error);
+    return false;
+  }
+};

package/template/src/subComponents/recording/recordingLayoutResponse.ts

@@ -0,0 +1,67 @@
+type RecordingLayoutResponse = Pick<
+  Response,
+  'ok' | 'status' | 'statusText' | 'text'
+>;
+
+const createResponseError = (
+  message: string,
+  response: RecordingLayoutResponse,
+  responseBody: string,
+) =>
+  Object.assign(new Error(message), {
+    code: `HTTP_${response.status}`,
+    httpStatus: response.status,
+    httpStatusText: response.statusText,
+    responseBody,
+  });
+
+export const parseRecordingLayoutResponse = async (
+  response: RecordingLayoutResponse,
+): Promise<unknown> => {
+  const responseBody = await response.text();
+  let responseData: any;
+
+  if (responseBody.trim()) {
+    try {
+      responseData = JSON.parse(responseBody);
+    } catch (error) {
+      throw createResponseError(
+        `Recording layout API returned invalid JSON: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+        response,
+        responseBody,
+      );
+    }
+  }
+
+  if (!response.ok) {
+    const backendMessage =
+      responseData?.error?.message ||
+      responseData?.error ||
+      responseData?.message ||
+      responseBody;
+    throw createResponseError(
+      `Recording layout API failed with HTTP ${response.status}${
+        response.statusText ? ` ${response.statusText}` : ''
+      }${backendMessage ? `: ${String(backendMessage)}` : ''}`,
+      response,
+      responseBody,
+    );
+  }
+
+  if (responseData?.error) {
+    const backendMessage =
+      responseData.error?.message ||
+      (typeof responseData.error === 'string'
+        ? responseData.error
+        : JSON.stringify(responseData.error));
+    throw createResponseError(
+      `Recording layout API returned an error: ${backendMessage}`,
+      response,
+      responseBody,
+    );
+  }
+
+  return responseData;
+};

package/template/src/subComponents/recording/useRecording.tsx

@@ -50,6 +50,7 @@ import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
 import {fetchRetry} from '../../utils/fetch-retry';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import {runPostStartRecordingLayoutUpdate} from './recordingJourney';
 import getUniqueID from '../../utils/getUniqueID';
 import {useControlPermissionMatrix} from '../../components/controls/useControlPermissionMatrix';
 
@@ -316,7 +317,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         mode: recordingMode.toLowerCase(),
       }),
     })
-      .then((res: any) => {
+      .then(async (res: any) => {
         const endRequestTs = Date.now();
         const latency = endRequestTs - startReqTs;
         if (res.status === 200) {
@@ -361,17 +362,32 @@ const RecordingProvider = (props: RecordingProviderProps) => {
               .sort((a, b) => b[1].ts - a[1].ts);
 
             const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
-            if (activeScreenshareUid) {
-              logger.debug(
-                LogSource.Internals,
-                'RECORDING',
-                'screenshare: Executing presenter query for screenuid',
-                activeScreenshareUid,
-              );
-              executePresenterQuery(parseInt(activeScreenshareUid));
-            } else {
-              executeNormalQuery();
-            }
+            await runPostStartRecordingLayoutUpdate(
+              () => {
+                if (activeScreenshareUid) {
+                  logger.debug(
+                    LogSource.Internals,
+                    'RECORDING',
+                    'screenshare: Executing presenter query for screenuid',
+                    activeScreenshareUid,
+                  );
+                  return executePresenterQuery(parseInt(activeScreenshareUid));
+                }
+                return executeNormalQuery();
+              },
+              layoutError => {
+                logger.error(
+                  LogSource.NetworkRest,
+                  'recording_start',
+                  'Recording started successfully, but the initial recording layout update failed; recording remains active',
+                  layoutError,
+                  {
+                    requestId,
+                    activeScreenshareUid,
+                  },
+                );
+              },
+            );
           }
         } else if (res.status === 500) {
           showErrorToast(headingStartError, subheadingError);