agora-appbuilder-core 4.0.0-beta.61 → 4.0.0-beta.63

package/package.json

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

package/template/customization-api/types.ts

@@ -16,4 +16,11 @@ export type {
   NetworkQualities,
   I18nRequestConfirmation,
   I18nMuteConfirmation,
+  deviceDetectionToastSubHeadingDataInterface,
+  sttSpokenLanguageToastHeadingDataType,
+  whiteboardFileUploadToastDataType,
+  publicChatToastSubHeadingDataInterface,
+  privateChatToastHeadingDataInterface,
+  publicAndPrivateChatToastSubHeadingDataInterface,
 } from '../src/language/default-labels/videoCallScreenLabels';
+export type {TextDataInterface} from '../src/language/default-labels';

package/template/src/components/DeviceConfigure.tsx

@@ -35,7 +35,7 @@ import LocalEventEmitter, {
 } from '../rtm-events-api/LocalEvents';
 import {useString} from '../utils/useString';
 import {
-  deviceDetectionCancelBtnText,
+  deviceDetectionSecondaryBtnText,
   deviceDetectionCheckboxText,
   deviceDetectionPrimaryBtnText,
   deviceDetectionToastHeading,
@@ -67,7 +67,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     deviceDetectionToastSubHeading,
   );
   const toastPrimaryBtnText = useString(deviceDetectionPrimaryBtnText)();
-  const toastCancelBtnText = useString(deviceDetectionCancelBtnText)();
+  const toastCancelBtnText = useString(deviceDetectionSecondaryBtnText)();
   const toastCheckboxBtnText = useString(deviceDetectionCheckboxText)();
 
   const micSelectInProgress = useRef(false);

package/template/src/components/useUserPreference.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
+import React, {useState, useContext, useEffect, useRef} from 'react';
 import {
   DispatchContext,
   ContentInterface,
@@ -22,13 +22,15 @@ import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
-import {useRtc} from 'customization-api';
+import {filterObject, useContent, useRtc} from 'customization-api';
 import {gql, useMutation} from '@apollo/client';
 import {
   PSTNUserLabel,
   videoRoomScreenshareText,
   videoRoomUserFallbackText,
 } from '../language/default-labels/videoCallScreenLabels';
+import {useLanguage} from '../language/useLanguage';
+import {useScreenContext} from '../components/contexts/ScreenShareContext';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -64,6 +66,36 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   const [displayName, setDisplayName] = useState(getInitialUsername());
   const [updateUserName] = useMutation(UPDATE_USER_NAME_MUTATION);
 
+  const {languageCode} = useLanguage();
+  const {screenShareData} = useScreenContext();
+  const {defaultContent} = useContent();
+  const screenShareDataRef = useRef({screenShareData});
+  useEffect(() => {
+    screenShareDataRef.current.screenShareData = screenShareData;
+  }, [screenShareData]);
+
+  useEffect(() => {
+    try {
+      if (languageCode) {
+        Object.keys(screenShareDataRef.current.screenShareData).map(i => {
+          let screenShareUidToUpdate = parseInt(i);
+          const users = filterObject(
+            defaultContent,
+            ([k, v]) => v?.screenUid === screenShareUidToUpdate,
+          );
+          const keys = Object.keys(users);
+          if (users && keys && keys?.length) {
+            updateRenderListState(screenShareUidToUpdate, {
+              name: getScreenShareName(
+                users[parseInt(keys[0])]?.name || userText,
+              ),
+            });
+          }
+        });
+      }
+    } catch (error) {}
+  }, [languageCode, screenShareData]);
+
   const saveName = (name: string) => {
     if (name && name?.trim() !== '') {
       try {

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -1,5 +1,33 @@
 import {I18nBaseType, I18nConditionalType, I18nDynamicType} from '../i18nTypes';
 import {room} from './createScreenLabels';
+
+export interface deviceDetectionToastSubHeadingDataInterface {
+  name: string;
+  label: string;
+}
+
+export type sttSpokenLanguageToastHeadingDataType = 'Set' | 'Changed';
+export interface sttSpokenLanguageToastSubHeadingDataInterface {
+  action: sttSpokenLanguageToastHeadingDataType;
+  newLanguage: string;
+  oldLanguage: string;
+  username: string;
+}
+
+export type whiteboardFileUploadToastDataType = 'File' | 'Image';
+export interface publicChatToastSubHeadingDataInterface {
+  count: number;
+  from: string;
+}
+export interface privateChatToastHeadingDataInterface {
+  count: number;
+}
+
+export interface publicAndPrivateChatToastSubHeadingDataInterface {
+  publicChatCount: number;
+  privateChatCount: number;
+  from: string;
+}
 interface NetworkQualityStatusInterface {
   unknown?: 'Unknown';
   excellent?: 'Excellent';
@@ -128,9 +156,9 @@ export const leavePopupHeading = `leave${room}PopupHeading`;
 export const leavePopupSubHeading = `leave${room}PopupSubHeading`;
 export const leavePopupPrimaryBtnText = `leave${room}PopupPrimaryBtnText`;
 
-export const removeFromRoomPopupHeading = `removeFrom${room}PopupHeading`;
-export const removeFromRoomPopupSubHeading = `removeFrom${room}PopupSubHeading`;
-export const removeFromRoomPopupPrimaryBtnText = `removeFrom${room}PopupPrimaryBtnText`;
+export const removeUserFromRoomPopupHeading = `removeUserFrom${room}PopupHeading`;
+export const removeUserFromRoomPopupSubHeading = `removeUserFrom${room}PopupSubHeading`;
+export const removeUserFromRoomPopupPrimaryBtnText = `removeUserFrom${room}PopupPrimaryBtnText`;
 
 export const removeScreenshareFromRoomPopupHeading = `removeScreenshareFrom${room}PopupHeading`;
 export const removeScreenshareFromRoomPopupSubHeading = `removeScreenshareFrom${room}PopupSubHeading`;
@@ -358,7 +386,8 @@ export const sttSpokenLanguageToastSubHeading = `${stt}SpokenLanguageToastSubHea
 export const deviceDetectionToastHeading = 'deviceDetectionToastHeading';
 export const deviceDetectionToastSubHeading = 'deviceDetectionToastSubHeading';
 export const deviceDetectionPrimaryBtnText = 'deviceDetectionPrimaryBtnText';
-export const deviceDetectionCancelBtnText = 'deviceDetectionCancelBtnText';
+export const deviceDetectionSecondaryBtnText =
+  'deviceDetectionSecondaryBtnText';
 export const deviceDetectionCheckboxText = 'deviceDetectionCheckboxText';
 
 export const hostMutedUserToastHeading = 'hostMutedUserToastHeading';
@@ -494,9 +523,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [leavePopupSubHeading]?: I18nConditionalType;
   [leavePopupPrimaryBtnText]?: I18nBaseType;
 
-  [removeFromRoomPopupHeading]?: I18nDynamicType;
-  [removeFromRoomPopupSubHeading]?: I18nDynamicType;
-  [removeFromRoomPopupPrimaryBtnText]?: I18nBaseType;
+  [removeUserFromRoomPopupHeading]?: I18nDynamicType;
+  [removeUserFromRoomPopupSubHeading]?: I18nDynamicType;
+  [removeUserFromRoomPopupPrimaryBtnText]?: I18nBaseType;
 
   [removeScreenshareFromRoomPopupHeading]?: I18nBaseType;
   [removeScreenshareFromRoomPopupSubHeading]?: I18nDynamicType;
@@ -577,20 +606,13 @@ export interface I18nVideoCallScreenLabelsInterface {
 
   [publicChatToastHeading]?: I18nBaseType;
   [multiplePublicChatToastHeading]?: I18nBaseType;
-  [multiplePublicChatToastSubHeading]?: I18nBaseType<{
-    count: number;
-    from: string;
-  }>;
+  [multiplePublicChatToastSubHeading]?: I18nBaseType<publicChatToastSubHeadingDataInterface>;
 
   [privateChatToastHeading]?: I18nBaseType;
-  [multiplePrivateChatToastHeading]?: I18nBaseType<{count: number}>;
+  [multiplePrivateChatToastHeading]?: I18nBaseType<privateChatToastHeadingDataInterface>;
 
   [multiplePublicAndPrivateChatToastHeading]?: I18nBaseType;
-  [multiplePublicAndPrivateChatToastSubHeading]?: I18nBaseType<{
-    publicChatCount: number;
-    privateChatCount: number;
-    from: string;
-  }>;
+  [multiplePublicAndPrivateChatToastSubHeading]?: I18nBaseType<publicAndPrivateChatToastSubHeadingDataInterface>;
 
   [livestreamToastApprovalBtnText]?: I18nBaseType;
   [livestreamToastDenyBtnText]?: I18nBaseType;
@@ -653,28 +675,18 @@ export interface I18nVideoCallScreenLabelsInterface {
   [whiteboardToolboxUploadText]?: I18nBaseType;
   [whiteboardToolboxClearAllText]?: I18nBaseType;
 
-  [whiteboardFileUploadErrorToastHeading]?: I18nBaseType<'File' | 'Image'>;
-  [whiteboardFileUploadInfoToastHeading]?: I18nBaseType<'File' | 'Image'>;
-  [whiteboardFileUploadTypeErrorToastHeading]?: I18nBaseType<'File' | 'Image'>;
-  [whiteboardFileUploadTypeErrorToastSubHeading]?: I18nBaseType<
-    'File' | 'Image'
-  >;
-
-  [sttSpokenLanguageToastHeading]?: I18nBaseType<'Set' | 'Changed'>;
-  [sttSpokenLanguageToastSubHeading]?: I18nBaseType<{
-    action: 'Set' | 'Changed';
-    newLanguage: string;
-    oldLanguage: string;
-    username: string;
-  }>;
+  [whiteboardFileUploadErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadInfoToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadTypeErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadTypeErrorToastSubHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+
+  [sttSpokenLanguageToastHeading]?: I18nBaseType<sttSpokenLanguageToastHeadingDataType>;
+  [sttSpokenLanguageToastSubHeading]?: I18nBaseType<sttSpokenLanguageToastSubHeadingDataInterface>;
 
   [deviceDetectionToastHeading]?: I18nDynamicType;
-  [deviceDetectionToastSubHeading]?: I18nBaseType<{
-    name: string;
-    label: string;
-  }>;
+  [deviceDetectionToastSubHeading]?: I18nBaseType<deviceDetectionToastSubHeadingDataInterface>;
   [deviceDetectionPrimaryBtnText]?: I18nBaseType;
-  [deviceDetectionCancelBtnText]?: I18nBaseType;
+  [deviceDetectionSecondaryBtnText]?: I18nBaseType;
   [deviceDetectionCheckboxText]?: I18nBaseType;
 
   [hostMutedUserToastHeading]?: I18nBaseType<I18nMuteType>;
@@ -863,10 +875,10 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
       : 'Are you sure you want to leave this meeting?',
   [leavePopupPrimaryBtnText]: 'LEAVE',
 
-  [removeFromRoomPopupHeading]: name => `Remove ${name}?`,
-  [removeFromRoomPopupSubHeading]: name =>
+  [removeUserFromRoomPopupHeading]: name => `Remove ${name}?`,
+  [removeUserFromRoomPopupSubHeading]: name =>
     `Once removed, ${name} will still be able to rejoin the room later.`,
-  [removeFromRoomPopupPrimaryBtnText]: 'REMOVE',
+  [removeUserFromRoomPopupPrimaryBtnText]: 'REMOVE',
 
   [removeScreenshareFromRoomPopupHeading]: 'Remove Screenshare?',
   [removeScreenshareFromRoomPopupSubHeading]: name =>
@@ -1084,7 +1096,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [deviceDetectionToastSubHeading]: ({name, label}) =>
     `New ${name} named ${label} detected. Do you want to switch?`,
   [deviceDetectionPrimaryBtnText]: 'SWITCH DEVICE',
-  [deviceDetectionCancelBtnText]: 'IGNORE',
+  [deviceDetectionSecondaryBtnText]: 'IGNORE',
   [deviceDetectionCheckboxText]: 'Remember my choice',
 
   [hostMutedUserToastHeading]: type =>

package/template/src/subComponents/RemoveMeetingPopup.tsx

@@ -8,9 +8,9 @@ import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
 import {useString} from '../utils/useString';
 import {
-  removeFromRoomPopupHeading,
-  removeFromRoomPopupPrimaryBtnText,
-  removeFromRoomPopupSubHeading,
+  removeUserFromRoomPopupHeading,
+  removeUserFromRoomPopupPrimaryBtnText,
+  removeUserFromRoomPopupSubHeading,
 } from '../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../language/default-labels/commonLabels';
 
@@ -22,11 +22,13 @@ interface RemoveMeetingPopupProps {
 }
 const RemoveMeetingPopup = (props: RemoveMeetingPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const removeMeetingLabelHeading = useString(removeFromRoomPopupHeading);
-  const removeMeetingLabelSubHeading = useString(removeFromRoomPopupSubHeading);
+  const removeMeetingLabelHeading = useString(removeUserFromRoomPopupHeading);
+  const removeMeetingLabelSubHeading = useString(
+    removeUserFromRoomPopupSubHeading,
+  );
 
   const cancelBtnLabel = useString(cancelText)();
-  const removeBtnLabel = useString(removeFromRoomPopupPrimaryBtnText)();
+  const removeBtnLabel = useString(removeUserFromRoomPopupPrimaryBtnText)();
   return (
     <Popup
       modalVisible={props.modalVisible}