agora-appbuilder-core 4.0.0-beta.60 → 4.0.0-beta.62

package/package.json

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

package/template/src/atoms/ParticipantsCount.tsx

@@ -7,6 +7,11 @@ import ChatContext from '../components/ChatContext';
 import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
 import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
 import {isMobileUA} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  videoRoomPeopleCountTooltipAttendeeText,
+  videoRoomPeopleCountTooltipHostText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 const ParticipantsCount = () => {
   const {onlineUsersCount} = useContext(ChatContext);
@@ -15,17 +20,22 @@ const ParticipantsCount = () => {
   const count = $config.EVENT_MODE
     ? hostUids.length + audienceUids.length
     : onlineUsersCount;
+
+  const hostlabel = useString(videoRoomPeopleCountTooltipHostText)();
+  const attendeelabel = useString<{eventMode: boolean}>(
+    videoRoomPeopleCountTooltipAttendeeText,
+  );
   return (
     <IconButton
       placement="right"
       isClickable={isMobileUA() ? true : false}
       toolTipMessage={
         $config.EVENT_MODE
-          ? `Host: ${
+          ? `${hostlabel}: ${
               $config.EVENT_MODE
                 ? hostUids?.length || 0
                 : hostUidsVM.length || 0
-            }\n${$config.EVENT_MODE ? 'Audience: ' : 'Attendee: '}${
+            }\n${attendeelabel({eventMode: $config.EVENT_MODE})}: ${
               $config.EVENT_MODE
                 ? audienceUids.length || 0
                 : attendeeUids?.length || 0

package/template/src/components/Controls.tsx

@@ -96,7 +96,7 @@ import {
   toolbarItemSettingText,
   toolbarItemShareText,
   toolbarItemTranscriptText,
-  toolbarItemVitrualBackgroundText,
+  toolbarItemVirtualBackgroundText,
   toolbarItemWhiteboardText,
 } from '../language/default-labels/videoCallScreenLabels';
 
@@ -250,7 +250,7 @@ const MoreButton = () => {
   const screenShareButton = useString<boolean>(toolbarItemShareText);
   const recordingButton = useString<boolean>(toolbarItemRecordingText);
   const moreButtonLabel = useString(toolbarItemMoreText)();
-  const virtualBackgroundLabel = useString(toolbarItemVitrualBackgroundText)();
+  const virtualBackgroundLabel = useString(toolbarItemVirtualBackgroundText)();
   const chatLabel = useString(toolbarItemChatText)();
   const inviteLabel = useString(toolbarItemInviteText)();
   const peopleLabel = useString(toolbarItemPeopleText)();

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/RTMConfigure.tsx

@@ -495,7 +495,9 @@ const RtmConfigure = (props: any) => {
         waitingRoomStatusRef.current?.waitingRoomStatus !==
           WaitingRoomStatus.APPROVED
       ) {
-        return;
+        //todo: hari/bhupen added important rtm message in the queue and run it later when user join the call
+        evt = data.evt;
+        value = data.value;
       } else {
         evt = data.evt;
         value = data.value;

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -28,7 +28,7 @@ import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
 import getUniqueID from '../../utils/getUniqueID';
 import {trimText} from '../../utils/common';
-import {useString} from '../../utils/useString';
+import {useStringRef} from '../../utils/useString';
 import {
   publicChatToastHeading,
   multiplePublicChatToastHeading,
@@ -108,30 +108,33 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const individualActiveRef = useRef<string | number>();
 
   //public single
-  const fromText = useString(publicChatToastHeading);
+  const fromText = useStringRef(publicChatToastHeading);
 
   //public multple
-  const multiplePublicChatToastHeadingTT = useString(
+  const multiplePublicChatToastHeadingTT = useStringRef(
     multiplePublicChatToastHeading,
-  )();
-  const multiplePublicChatToastSubHeadingTT = useString<{
+  );
+  //@ts-ignore
+  const multiplePublicChatToastSubHeadingTT = useStringRef<{
     count: number;
     from: string;
   }>(multiplePublicChatToastSubHeading);
 
   //private single
-  const privateMessageLabel = useString(privateChatToastHeading)();
+  const privateMessageLabel = useStringRef(privateChatToastHeading);
 
   //private multiple
-  const multiplePrivateChatToastHeadingTT = useString<{count: number}>(
+  //@ts-ignore
+  const multiplePrivateChatToastHeadingTT = useStringRef<{count: number}>(
     multiplePrivateChatToastHeading,
   );
 
   //multiple private and public toast
-  const multiplePublicAndPrivateChatToastHeadingTT = useString(
+  const multiplePublicAndPrivateChatToastHeadingTT = useStringRef(
     multiplePublicAndPrivateChatToastHeading,
-  )();
-  const multiplePublicAndPrivateChatToastSubHeadingTT = useString<{
+  );
+  //@ts-ignore
+  const multiplePublicAndPrivateChatToastSubHeadingTT = useStringRef<{
     publicChatCount: number;
     privateChatCount: number;
     from: string;
@@ -261,16 +264,18 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           leadingIconName: 'chat-nav',
           text1:
             privateMessages && privateMessages.length
-              ? multiplePublicAndPrivateChatToastHeadingTT
-              : multiplePublicChatToastHeadingTT,
+              ? multiplePublicAndPrivateChatToastHeadingTT?.current()
+              : multiplePublicChatToastHeadingTT?.current(),
           text2:
             privateMessages && privateMessages.length
-              ? multiplePublicAndPrivateChatToastSubHeadingTT({
+              ? //@ts-ignore
+                multiplePublicAndPrivateChatToastSubHeadingTT?.current({
                   publicChatCount: publicMessages.length,
                   privateChatCount: privateMessages.length,
                   from: fromNames,
                 })
-              : multiplePublicChatToastSubHeadingTT({
+              : //@ts-ignore
+                multiplePublicChatToastSubHeadingTT?.current({
                   count: publicMessages.length,
                   from: fromNames,
                 }),
@@ -297,9 +302,11 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           secondaryBtn: null,
           type: 'info',
           leadingIconName: 'chat-nav',
-          text1: multiplePrivateChatToastHeadingTT({
-            count: privateMessages.length,
-          }),
+          text1:
+            //@ts-ignore
+            multiplePrivateChatToastHeadingTT?.current({
+              count: privateMessages.length,
+            }),
           text2: ``,
           visibilityTime: 3000,
           onPress: () => {
@@ -330,10 +337,10 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           type: 'info',
           leadingIconName: 'chat-nav',
           text1: isPrivateMessage
-            ? privateMessageLabel
+            ? privateMessageLabel?.current()
             : //@ts-ignore
             defaultContentRef.current.defaultContent[uidAsNumber]?.name
-            ? fromText(
+            ? fromText?.current(
                 trimText(
                   //@ts-ignore
                   defaultContentRef.current.defaultContent[uidAsNumber]?.name,

package/template/src/components/livestream/LiveStreamContext.tsx

@@ -1,4 +1,11 @@
-import React, {createContext, useContext, useState, useRef} from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
 import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../ChatContext';
 import Toast from '../../../react-native-toast-message';
@@ -21,7 +28,7 @@ import {SidePanelType, useContent, useSidePanel} from 'customization-api';
 import TertiaryButton from '../../atoms/TertiaryButton';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {trimText} from '../../utils/common';
-import {useString} from '../../utils/useString';
+import {useStringRef} from '../../utils/useString';
 import {
   livestreamRequestAlreadyProcessed,
   livestreamToastApprovalBtnText,
@@ -35,50 +42,50 @@ export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
 export const LiveStreamContextProvider: React.FC<
   liveStreamPropsInterface
 > = props => {
-  const requestAlreadyProcessed = useString(
+  const requestAlreadyProcessed = useStringRef(
     livestreamRequestAlreadyProcessed,
-  )();
+  );
 
-  const raiseHandRequestReceivedToastHeading = useString(
+  const raiseHandRequestReceivedToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_RECEIVED.text1TranslationKey,
   );
-  const raiseHandRequestReceivedToastSubHeading = useString(
+  const raiseHandRequestReceivedToastSubHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_RECEIVED.text2TranslationKey,
-  )();
+  );
 
-  const raiseHandRequestRecallToastHeading = useString(
+  const raiseHandRequestRecallToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_REQUEST_RECALL.text1TranslationKey,
   );
 
-  const raiseHandRequestAcceptedToastHeading = useString(
+  const raiseHandRequestAcceptedToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_ACCEPTED.text1TranslationKey,
-  )();
-  const raiseHandRequestAcceptedToastSubHeading = useString(
+  );
+  const raiseHandRequestAcceptedToastSubHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_ACCEPTED.text2TranslationKey,
-  )();
+  );
 
-  const raiseHandRequestRejectedToastHeading = useString(
+  const raiseHandRequestRejectedToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_REJECTED.text1TranslationKey,
-  )();
+  );
 
-  const raiseHandApprovedRequestRecallToastHeading = useString(
+  const raiseHandApprovedRequestRecallToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL.text1TranslationKey,
-  )();
+  );
 
-  const promoteAsCoHostToastHeading = useString(
+  const promoteAsCoHostToastHeading = useStringRef(
     LSNotificationObject.PROMOTE_AS_CO_HOST.text1TranslationKey,
-  )();
+  );
 
-  const raiseHandRequestToastHeading = useString(
+  const raiseHandRequestToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_REQUEST.text1TranslationKey,
-  )();
-  const raiseHandRequestToastSubHeading = useString(
+  );
+  const raiseHandRequestToastSubHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_REQUEST.text2TranslationKey,
-  )();
+  );
 
-  const raiseHandRequestRecallLocalToastHeading = useString(
+  const raiseHandRequestRecallLocalToastHeading = useStringRef(
     LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL.text1TranslationKey,
-  )();
+  );
 
   const screenshareContextInstance = useScreenshare();
   const screenshareContextInstanceRef = useRef<any>();
@@ -164,8 +171,8 @@ export const LiveStreamContextProvider: React.FC<
 
   const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
 
-  const allowToBePresenter = useString(livestreamToastApprovalBtnText)();
-  const deny = useString(livestreamToastDenyBtnText)();
+  const allowToBePresenter = useStringRef(livestreamToastApprovalBtnText);
+  const deny = useStringRef(livestreamToastDenyBtnText);
   const showToast = (
     text: string,
     text2: string,
@@ -180,7 +187,7 @@ export const LiveStreamContextProvider: React.FC<
         <PrimaryButton
           containerStyle={style.primaryBtn}
           textStyle={style.primaryBtnText}
-          text={allowToBePresenter}
+          text={allowToBePresenter?.current()}
           onPress={() => {
             hostApprovesRequestOfUID(uid);
             Toast.hide();
@@ -190,7 +197,7 @@ export const LiveStreamContextProvider: React.FC<
       btns.secondaryBtn = (
         <TertiaryButton
           containerStyle={style.secondaryBtn}
-          text={deny}
+          text={deny?.current()}
           onPress={() => {
             hostRejectsRequestOfUID(uid);
             Toast.hide();
@@ -421,10 +428,10 @@ export const LiveStreamContextProvider: React.FC<
                   sidePanelRef.current !== SidePanelType.Participants
                 ) {
                   showToast(
-                    raiseHandRequestReceivedToastHeading(
+                    raiseHandRequestReceivedToastHeading?.current(
                       trimText(getAttendeeName(data.sender)),
                     ),
-                    raiseHandRequestReceivedToastSubHeading,
+                    raiseHandRequestReceivedToastSubHeading?.current(),
                     data.sender,
                     data.ts,
                   );
@@ -444,7 +451,7 @@ export const LiveStreamContextProvider: React.FC<
                   sidePanelRef.current !== SidePanelType.Participants
                 ) {
                   showToast(
-                    raiseHandRequestRecallToastHeading(
+                    raiseHandRequestRecallToastHeading?.current(
                       trimText(getAttendeeName(data.sender)),
                     ),
                     null,
@@ -500,8 +507,8 @@ export const LiveStreamContextProvider: React.FC<
         if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
           return;
         showToast(
-          raiseHandRequestAcceptedToastHeading,
-          raiseHandRequestAcceptedToastSubHeading,
+          raiseHandRequestAcceptedToastHeading?.current(),
+          raiseHandRequestAcceptedToastSubHeading?.current(),
         );
         // Promote user's privileges to host
         changeClientRoleTo(ClientRole.Broadcaster);
@@ -521,13 +528,16 @@ export const LiveStreamContextProvider: React.FC<
           raiseHandListRef.current[localUidRef.current].role ==
           ClientRole.Audience
         ) {
-          showToast(raiseHandRequestRejectedToastHeading, null);
+          showToast(raiseHandRequestRejectedToastHeading?.current(), null);
         } else if (
           raiseHandListRef.current[localUidRef.current].role ==
           ClientRole.Broadcaster
         ) {
           /** 2.b */
-          showToast(raiseHandApprovedRequestRecallToastHeading, null);
+          showToast(
+            raiseHandApprovedRequestRecallToastHeading?.current(),
+            null,
+          );
           screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
 
           // Demote user's privileges to audience
@@ -546,7 +556,7 @@ export const LiveStreamContextProvider: React.FC<
     const unsubPromoteAsCoHost = events.on(
       LiveStreamControlMessageEnum.promoteAsCoHost,
       data => {
-        showToast(promoteAsCoHostToastHeading, null);
+        showToast(promoteAsCoHostToastHeading.current(), null);
         // Promote user's privileges to host
         changeClientRoleTo(ClientRole.Broadcaster);
         // Audience updates its local attributes and notfies all host when request is approved
@@ -618,7 +628,7 @@ export const LiveStreamContextProvider: React.FC<
     } else {
       Toast.hide();
       setTimeout(() => {
-        showToast(requestAlreadyProcessed, null);
+        showToast(requestAlreadyProcessed?.current(), null);
       });
     }
   };
@@ -639,7 +649,7 @@ export const LiveStreamContextProvider: React.FC<
     } else {
       Toast.hide();
       setTimeout(() => {
-        showToast(requestAlreadyProcessed, null);
+        showToast(requestAlreadyProcessed?.current(), null);
       });
     }
   };
@@ -667,7 +677,10 @@ export const LiveStreamContextProvider: React.FC<
     // If hand is already raised, skip the call
     if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE)
       return;
-    showToast(raiseHandRequestToastHeading, raiseHandRequestToastSubHeading);
+    showToast(
+      raiseHandRequestToastHeading?.current(),
+      raiseHandRequestToastSubHeading?.current(),
+    );
     events.send(
       EventNames.RAISED_ATTRIBUTE,
       JSON.stringify({
@@ -713,7 +726,7 @@ export const LiveStreamContextProvider: React.FC<
       PersistanceLevel.Sender,
     );
     UpdtLocStateAndBCastAttr(ClientRole.Audience, new Date().getTime());
-    showToast(raiseHandRequestRecallLocalToastHeading, null);
+    showToast(raiseHandRequestRecallLocalToastHeading?.current(), null);
   };
 
   /** ******* AUDIENCE CONTROLS SECTION ENDS ******* */

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -13,7 +13,7 @@
 import React, {useContext, useEffect} from 'react';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from './usePreCall';
-import {useString} from '../../utils/useString';
+import {useString, useStringRef} from '../../utils/useString';
 import {
   ChannelProfile,
   DispatchContext,
@@ -34,6 +34,10 @@ import {EventNames} from '../../rtm-events';
 import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
 import {useContent} from 'customization-api';
 import EventsConfigure from '../EventsConfigure';
+import {
+  waitingRoomApprovalRejectionToastHeading,
+  waitingRoomApprovalRejectionToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export interface PreCallJoinWaitingRoomBtnProps {
   render?: (
@@ -45,6 +49,10 @@ export interface PreCallJoinWaitingRoomBtnProps {
 
 let shouldWaitingRoomPoll = null;
 const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
+  const headinglabel = useStringRef(waitingRoomApprovalRejectionToastHeading);
+  const subheadinglabel = useStringRef(
+    waitingRoomApprovalRejectionToastSubHeading,
+  );
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive, callActive} = usePreCall();
@@ -132,9 +140,9 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
         });
         // inform user that entry was denied by the host
         Toast.show({
-          text1: `Approval Required`,
           leadingIconName: 'info',
-          text2: 'Permission to enter the meeting was denied by the host',
+          text1: headinglabel?.current(),
+          text2: subheadinglabel?.current(),
           visibilityTime: 3000,
           type: 'error',
           primaryBtn: null,

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -13,7 +13,7 @@
 import React, {useContext, useEffect} from 'react';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from './usePreCall';
-import {useString} from '../../utils/useString';
+import {useString, useStringRef} from '../../utils/useString';
 import {
   ChannelProfile,
   DispatchContext,
@@ -40,6 +40,10 @@ import events from '../../rtm-events-api';
 import useWaitingRoomAPI from '../../subComponents/waiting-rooms/useWaitingRoomAPI';
 import {UserType} from '../RTMConfigure';
 import {useContent} from 'customization-api';
+import {
+  waitingRoomApprovalRejectionToastHeading,
+  waitingRoomApprovalRejectionToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -55,6 +59,10 @@ export interface PreCallJoinWaitingRoomBtnProps {
 
 let shouldWaitingRoomPoll = null;
 const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
+  const headinglabel = useStringRef(waitingRoomApprovalRejectionToastHeading);
+  const subheadinglabel = useStringRef(
+    waitingRoomApprovalRejectionToastSubHeading,
+  );
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive, callActive} = usePreCall();
@@ -139,8 +147,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
         // inform user that entry was denied by the host
         Toast.show({
           leadingIconName: 'info',
-          text1: `Approval Required`,
-          text2: 'Permission to enter the meeting was denied by the host',
+          text1: headinglabel?.current(),
+          text2: subheadinglabel?.current(),
           visibilityTime: 3000,
           type: 'error',
           primaryBtn: null,

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/components/virtual-background/VBButton.tsx

@@ -18,7 +18,7 @@ const VBButton = (props: VBButtonProps) => {
   const {isVBOpen, setIsVBOpen, showLabel = false} = props;
   const {isToolbarMenuItem} = useToolbarMenu();
   const {isOnActionSheet} = useActionSheet();
-  const vbLabel = useString('toolbarItemVitrualBackgroundText')();
+  const vbLabel = useString('toolbarItemVirtualBackgroundText')();
 
   const onPress = () => {
     setIsVBOpen(prev => !prev);

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';
@@ -75,8 +103,8 @@ export const toolbarItemNoiseCancellationText =
 export const toolbarItemWhiteboardText = 'toolbarItemWhiteboardText';
 export const toolbarItemCaptionText = 'toolbarItemCaptionText';
 export const toolbarItemTranscriptText = 'toolbarItemTranscriptText';
-export const toolbarItemVitrualBackgroundText =
-  'toolbarItemVitrualBackgroundText';
+export const toolbarItemVirtualBackgroundText =
+  'toolbarItemVirtualBackgroundText';
 
 export const toolbarItemRaiseHandText = 'toolbarItemRaiseHandText';
 
@@ -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';
@@ -379,6 +408,11 @@ export const waitingRoomApprovalRequiredPrimaryBtnText =
 export const waitingRoomApprovalRequiredSecondaryBtnText =
   'waitingRoomApprovalRequiredSecondaryBtnText';
 
+export const waitingRoomApprovalRejectionToastHeading =
+  'waitingRoomApprovalRejectionToastHeading';
+export const waitingRoomApprovalRejectionToastSubHeading =
+  'waitingRoomApprovalRejectionToastSubHeading';
+
 export const videoRoomRecordingText = `video${room}RecordingText`;
 export const videoRoomGoToActiveSpeakerText = `video${room}GoToActiveSpeakerText`;
 export const videoRoomScreenshareText = `video${room}ScreenshareText`;
@@ -416,6 +450,10 @@ export const peoplePanelLivestreamingDenyBtnText =
 export const sttTranscriptPanelSearchText = `${stt}TranscriptPanelSearchText`;
 export const sttTranscriptPanelNoSearchResultsFoundText = `${stt}TranscriptPanelNoSearchResultsFoundText`;
 export const sttTranscriptPanelViewLatestText = `${stt}TranscriptPanelViewLatestText`;
+
+export const videoRoomPeopleCountTooltipHostText = `video${room}PeopleCountTooltipHostText`;
+export const videoRoomPeopleCountTooltipAttendeeText = `video${room}PeopleCountTooltipAttendeeText`;
+
 export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemPeopleText]?: I18nBaseType;
   [toolbarItemChatText]?: I18nBaseType;
@@ -440,7 +478,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
   [toolbarItemTranscriptText]?: I18nConditionalType;
-  [toolbarItemVitrualBackgroundText]?: I18nBaseType;
+  [toolbarItemVirtualBackgroundText]?: I18nBaseType;
 
   [toolbarItemRaiseHandText]?: I18nConditionalType;
 
@@ -485,12 +523,12 @@ export interface I18nVideoCallScreenLabelsInterface {
   [leavePopupSubHeading]?: I18nConditionalType;
   [leavePopupPrimaryBtnText]?: I18nBaseType;
 
-  [removeFromRoomPopupHeading]?: I18nBaseType<string>;
-  [removeFromRoomPopupSubHeading]?: I18nBaseType<string>;
-  [removeFromRoomPopupPrimaryBtnText]?: I18nBaseType;
+  [removeUserFromRoomPopupHeading]?: I18nDynamicType;
+  [removeUserFromRoomPopupSubHeading]?: I18nDynamicType;
+  [removeUserFromRoomPopupPrimaryBtnText]?: I18nBaseType;
 
   [removeScreenshareFromRoomPopupHeading]?: I18nBaseType;
-  [removeScreenshareFromRoomPopupSubHeading]?: I18nBaseType<string>;
+  [removeScreenshareFromRoomPopupSubHeading]?: I18nDynamicType;
   [removeScreenshareFromRoomPopupPrimaryBtnText]?: I18nBaseType;
 
   [sttChangeLanguagePopupHeading]?: I18nConditionalType;
@@ -568,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;
@@ -610,7 +641,7 @@ export interface I18nVideoCallScreenLabelsInterface {
 
   [peoplePanelMeText]?: I18nBaseType;
   [peoplePanelPresenterText]?: I18nBaseType;
-  [userRemovedFromTheRoomToastHeading]?: I18nBaseType<string>;
+  [userRemovedFromTheRoomToastHeading]?: I18nDynamicType;
 
   [vbPanelImageUploadErrorToastHeading]?: I18nBaseType;
   [vbPanelImageUploadErrorToastSubHeading]?: I18nBaseType;
@@ -644,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;
-  }>;
-
-  [deviceDetectionToastHeading]?: I18nBaseType<string>;
-  [deviceDetectionToastSubHeading]?: I18nBaseType<{
-    name: string;
-    label: string;
-  }>;
+  [whiteboardFileUploadErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadInfoToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadTypeErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardFileUploadTypeErrorToastSubHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+
+  [sttSpokenLanguageToastHeading]?: I18nBaseType<sttSpokenLanguageToastHeadingDataType>;
+  [sttSpokenLanguageToastSubHeading]?: I18nBaseType<sttSpokenLanguageToastSubHeadingDataInterface>;
+
+  [deviceDetectionToastHeading]?: I18nDynamicType;
+  [deviceDetectionToastSubHeading]?: I18nBaseType<deviceDetectionToastSubHeadingDataInterface>;
   [deviceDetectionPrimaryBtnText]?: I18nBaseType;
-  [deviceDetectionCancelBtnText]?: I18nBaseType;
+  [deviceDetectionSecondaryBtnText]?: I18nBaseType;
   [deviceDetectionCheckboxText]?: I18nBaseType;
 
   [hostMutedUserToastHeading]?: I18nBaseType<I18nMuteType>;
@@ -679,6 +700,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [waitingRoomApprovalRequiredPrimaryBtnText]?: I18nBaseType;
   [waitingRoomApprovalRequiredSecondaryBtnText]?: I18nBaseType;
 
+  [waitingRoomApprovalRejectionToastHeading]?: I18nBaseType;
+  [waitingRoomApprovalRejectionToastSubHeading]?: I18nBaseType;
+
   [videoRoomRecordingText]?: I18nBaseType;
   [videoRoomGoToActiveSpeakerText]?: I18nBaseType;
   [videoRoomScreenshareText]?: I18nDynamicType;
@@ -708,6 +732,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [sttTranscriptPanelSearchText]?: I18nBaseType;
   [sttTranscriptPanelNoSearchResultsFoundText]?: I18nBaseType;
   [sttTranscriptPanelViewLatestText]?: I18nBaseType;
+
+  [videoRoomPeopleCountTooltipHostText]?: I18nBaseType;
+  [videoRoomPeopleCountTooltipAttendeeText]?: I18nBaseType;
 }
 
 export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
@@ -771,7 +798,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemMoreText]: 'More',
 
   [toolbarItemNoiseCancellationText]: 'Noise Cancellation',
-  [toolbarItemVitrualBackgroundText]: 'Virtual Background',
+  [toolbarItemVirtualBackgroundText]: 'Virtual Background',
   [toolbarItemWhiteboardText]: active =>
     active ? 'Hide Whiteboard' : 'Show Whiteboard',
   [toolbarItemCaptionText]: active =>
@@ -848,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 =>
@@ -1069,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 =>
@@ -1090,6 +1117,10 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [waitingRoomApprovalRequiredPrimaryBtnText]: 'Admit',
   [waitingRoomApprovalRequiredSecondaryBtnText]: 'Deny',
 
+  [waitingRoomApprovalRejectionToastHeading]: 'Approval Required',
+  [waitingRoomApprovalRejectionToastSubHeading]:
+    'Permission to enter the meeting was denied by the host',
+
   [videoRoomRecordingText]: 'Recording',
   [videoRoomGoToActiveSpeakerText]: 'Go To Active Speaker',
   [videoRoomScreenshareText]: username => `${username}'s screenshare`,
@@ -1131,4 +1162,8 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [sttTranscriptPanelSearchText]: 'Search',
   [sttTranscriptPanelNoSearchResultsFoundText]: 'No search results found',
   [sttTranscriptPanelViewLatestText]: 'View Latest',
+
+  [videoRoomPeopleCountTooltipHostText]: 'Host',
+  [videoRoomPeopleCountTooltipAttendeeText]: ({eventMode}) =>
+    eventMode ? 'Audience' : 'Attendee',
 };

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}

package/template/src/utils/useString.ts

@@ -13,6 +13,7 @@ import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
+import {useEffect, useRef} from 'react';
 
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
@@ -59,3 +60,12 @@ export function useString<T = string>(
   };
   return getString;
 }
+
+export const useStringRef = (key: keyof TextDataInterface) => {
+  const fn = useString(key);
+  const refFn = useRef(fn);
+  useEffect(() => {
+    refFn.current = fn;
+  }, [fn]);
+  return refFn;
+};