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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.60",
+  "version": "4.0.0-beta.61",
   "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/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/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

@@ -75,8 +75,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';
 
@@ -379,6 +379,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 +421,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 +449,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
   [toolbarItemTranscriptText]?: I18nConditionalType;
-  [toolbarItemVitrualBackgroundText]?: I18nBaseType;
+  [toolbarItemVirtualBackgroundText]?: I18nBaseType;
 
   [toolbarItemRaiseHandText]?: I18nConditionalType;
 
@@ -485,12 +494,12 @@ export interface I18nVideoCallScreenLabelsInterface {
   [leavePopupSubHeading]?: I18nConditionalType;
   [leavePopupPrimaryBtnText]?: I18nBaseType;
 
-  [removeFromRoomPopupHeading]?: I18nBaseType<string>;
-  [removeFromRoomPopupSubHeading]?: I18nBaseType<string>;
+  [removeFromRoomPopupHeading]?: I18nDynamicType;
+  [removeFromRoomPopupSubHeading]?: I18nDynamicType;
   [removeFromRoomPopupPrimaryBtnText]?: I18nBaseType;
 
   [removeScreenshareFromRoomPopupHeading]?: I18nBaseType;
-  [removeScreenshareFromRoomPopupSubHeading]?: I18nBaseType<string>;
+  [removeScreenshareFromRoomPopupSubHeading]?: I18nDynamicType;
   [removeScreenshareFromRoomPopupPrimaryBtnText]?: I18nBaseType;
 
   [sttChangeLanguagePopupHeading]?: I18nConditionalType;
@@ -610,7 +619,7 @@ export interface I18nVideoCallScreenLabelsInterface {
 
   [peoplePanelMeText]?: I18nBaseType;
   [peoplePanelPresenterText]?: I18nBaseType;
-  [userRemovedFromTheRoomToastHeading]?: I18nBaseType<string>;
+  [userRemovedFromTheRoomToastHeading]?: I18nDynamicType;
 
   [vbPanelImageUploadErrorToastHeading]?: I18nBaseType;
   [vbPanelImageUploadErrorToastSubHeading]?: I18nBaseType;
@@ -659,7 +668,7 @@ export interface I18nVideoCallScreenLabelsInterface {
     username: string;
   }>;
 
-  [deviceDetectionToastHeading]?: I18nBaseType<string>;
+  [deviceDetectionToastHeading]?: I18nDynamicType;
   [deviceDetectionToastSubHeading]?: I18nBaseType<{
     name: string;
     label: string;
@@ -679,6 +688,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [waitingRoomApprovalRequiredPrimaryBtnText]?: I18nBaseType;
   [waitingRoomApprovalRequiredSecondaryBtnText]?: I18nBaseType;
 
+  [waitingRoomApprovalRejectionToastHeading]?: I18nBaseType;
+  [waitingRoomApprovalRejectionToastSubHeading]?: I18nBaseType;
+
   [videoRoomRecordingText]?: I18nBaseType;
   [videoRoomGoToActiveSpeakerText]?: I18nBaseType;
   [videoRoomScreenshareText]?: I18nDynamicType;
@@ -708,6 +720,9 @@ export interface I18nVideoCallScreenLabelsInterface {
   [sttTranscriptPanelSearchText]?: I18nBaseType;
   [sttTranscriptPanelNoSearchResultsFoundText]?: I18nBaseType;
   [sttTranscriptPanelViewLatestText]?: I18nBaseType;
+
+  [videoRoomPeopleCountTooltipHostText]?: I18nBaseType;
+  [videoRoomPeopleCountTooltipAttendeeText]?: I18nBaseType;
 }
 
 export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
@@ -771,7 +786,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 =>
@@ -1090,6 +1105,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 +1150,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/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;
+};