agora-appbuilder-core 4.0.0-beta.56 → 4.0.0-beta.58

package/package.json

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

package/template/customization-api/types.ts

@@ -1,5 +1,8 @@
 //audio/video toggle state
-export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
+export {
+  ToggleState,
+  ClientRole,
+} from '../agora-rn-uikit/src/Contexts/PropsContext';
 export type {
   ContentInterface,
   ContentStateInterface,

package/template/src/atoms/ClipboardIconButton.tsx

@@ -8,6 +8,8 @@ import Spacer from './Spacer';
 import ImageIcon from './ImageIcon';
 import Tooltip from './Tooltip';
 import ThemeConfig from '../theme';
+import {shareRoomCopyBtnTooltipText} from '../language/default-labels/shareLinkScreenLabels';
+import {useString} from '../utils/useString';
 
 interface Props {
   text: SHARE_LINK_CONTENT_TYPE;
@@ -17,7 +19,7 @@ interface Props {
 
 const ClipboardIconButton = (props: Props) => {
   const {copyShareLinkToClipboard} = useShareLink();
-
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
   const {text, variant = 'primary', size = 26} = props;
 
   const getTintColor = () => {
@@ -43,7 +45,7 @@ const ClipboardIconButton = (props: Props) => {
             <Spacer size={8} horizontal={true} />
           </>
         }
-        toolTipMessage="Copied to clipboard"
+        toolTipMessage={copiedToClipboard}
         renderContent={(isToolTipVisible, setToolTipVisible) => {
           return (
             <TouchableOpacity

package/template/src/components/Controls.tsx

@@ -82,6 +82,21 @@ import LocalEventEmitter, {
 } from '../rtm-events-api/LocalEvents';
 import {useSetRoomInfo} from './room-info/useSetRoomInfo';
 import {useString} from '../utils/useString';
+import {
+  toolbarItemCaptionText,
+  toolbarItemChatText,
+  toolbarItemInviteText,
+  toolbarItemLayoutText,
+  toolbarItemMoreText,
+  toolbarItemNoiseCancellationText,
+  toolbarItemPeopleText,
+  toolbarItemRecordingText,
+  toolbarItemSettingText,
+  toolbarItemShareText,
+  toolbarItemTranscriptText,
+  toolbarItemVitrualBackgroundText,
+  toolbarItemWhiteboardText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -225,23 +240,19 @@ export const WhiteboardListener = () => {
 };
 
 const MoreButton = () => {
-  const noiseCancellationLabel = useString('noiseCancellation')();
-  const startWhiteboardLabel = useString('startWhiteboard')();
-  const hideWhiteboardLabel = useString('hideWhiteboard')();
-  const showWhiteboardLabel = useString('showWhiteboard')();
-  const hideCaptionLabel = useString('hideCaption')();
-  const showCaptionLabel = useString('showCaption')();
-  const hideTranscriptLabel = useString('hideTranscript')();
-  const showTranscriptLabel = useString('showTranscript')();
-  const settingsLabel = useString('settings')();
-  const screenShareButton = useString<boolean>('screenShareButton');
-  const recordingButton = useString<boolean>('recordingButton');
-  const moreButtonLabel = useString('moreButton')();
-  const virtualBackgroundLabel = useString('virtualBackground')();
-  const chatLabel = useString('chat')();
-  const inviteLabel = useString('invite')();
-  const peopleLabel = useString('people')();
-  const layoutLabel = useString('layout')();
+  const noiseCancellationLabel = useString(toolbarItemNoiseCancellationText)();
+  const whiteboardLabel = useString<boolean>(toolbarItemWhiteboardText);
+  const captionLabel = useString<boolean>(toolbarItemCaptionText);
+  const transcriptLabel = useString<boolean>(toolbarItemTranscriptText);
+  const settingsLabel = useString(toolbarItemSettingText)();
+  const screenShareButton = useString<boolean>(toolbarItemShareText);
+  const recordingButton = useString<boolean>(toolbarItemRecordingText);
+  const moreButtonLabel = useString(toolbarItemMoreText)();
+  const virtualBackgroundLabel = useString(toolbarItemVitrualBackgroundText)();
+  const chatLabel = useString(toolbarItemChatText)();
+  const inviteLabel = useString(toolbarItemInviteText)();
+  const peopleLabel = useString(toolbarItemPeopleText)();
+  const layoutLabel = useString(toolbarItemLayoutText)();
   const {dispatch} = useContext(DispatchContext);
   const {rtcProps} = useContext(PropsContext);
   const {setCustomContent} = useContent();
@@ -425,11 +436,7 @@ const MoreButton = () => {
       icon: 'whiteboard-new',
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
-      title: whiteboardActive
-        ? hideWhiteboardLabel
-        : whiteboardStartedFirst
-        ? showWhiteboardLabel
-        : startWhiteboardLabel,
+      title: whiteboardLabel(whiteboardActive),
       callback: () => {
         setActionMenuVisible(false);
         toggleWhiteboard(whiteboardActive, true);
@@ -445,7 +452,7 @@ const MoreButton = () => {
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
       disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
-      title: `${isCaptionON ? hideCaptionLabel : showCaptionLabel}`,
+      title: captionLabel(isCaptionON),
       callback: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isCaptionON ? 'caption' : null;
@@ -468,7 +475,7 @@ const MoreButton = () => {
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
       disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
-      title: `${isTranscriptON ? hideTranscriptLabel : showTranscriptLabel}`,
+      title: transcriptLabel(isTranscriptON),
       callback: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isTranscriptON ? 'transcript' : null;

package/template/src/components/HostControlView.tsx

@@ -17,6 +17,11 @@ import TertiaryButton from '../atoms/TertiaryButton';
 import Spacer from '../atoms/Spacer';
 import RemoteMutePopup from '../subComponents/RemoteMutePopup';
 import {calculatePosition} from '../utils/common';
+import {
+  I18nMuteType,
+  peoplePanelMuteAllMicBtnText,
+  peoplePanelTurnoffAllCameraBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -27,7 +32,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   const audioBtnRef = useRef(null);
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteAudio = useRemoteMute();
-  const muteAllAudioButton = useString('muteAllMicrophone')();
+  const muteAllAudioButton = useString(peoplePanelMuteAllMicBtnText)();
   const onPressAction = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const showAudioModal = () => {
@@ -60,7 +65,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="audio"
+        type={I18nMuteType.audio}
         actionMenuVisible={showAudioMuteModal}
         setActionMenuVisible={setShowAudioMuteModal}
         name={null}
@@ -88,7 +93,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteVideo = useRemoteMute();
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const muteAllVideoButton = useString('turnoffAllCameras')();
+  const muteAllVideoButton = useString(peoplePanelTurnoffAllCameraBtnText)();
   const onPressAction = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
   const showVideoModal = () => {
     videoBtnRef?.current?.measure(
@@ -120,7 +125,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="video"
+        type={I18nMuteType.video}
         actionMenuVisible={showVideoMuteModal}
         setActionMenuVisible={setShowVideoMuteModal}
         name={null}

package/template/src/components/Navbar.tsx

@@ -66,6 +66,10 @@ import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
 import {useWaitingRoomContext} from './contexts/WaitingRoomContext';
+import {
+  toolbarItemChatText,
+  toolbarItemPeopleText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -73,7 +77,7 @@ export const ParticipantsCountView = ({
   isMobileView?: boolean;
 }) => {
   const {onlineUsersCount} = useContext(ChatContext);
-  const peopleLabel = useString('people')();
+  const peopleLabel = useString(toolbarItemPeopleText)();
   return isMobileView ? (
     <Text>
       {peopleLabel} {'\n'} ({numFormatter(onlineUsersCount)})
@@ -118,9 +122,9 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isPendingRequestToReview, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
-  //commented for v1 release
+
   const {waitingRoomUids} = useWaitingRoomContext();
-  const participantsLabel = useString('people')();
+  const participantsLabel = useString(toolbarItemPeopleText)();
   const isPanelActive = sidePanel === SidePanelType.Participants;
   const {
     data: {isHost},
@@ -243,8 +247,7 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
   const {setUnreadGroupMessageCount, totalUnreadCount} = useChatNotification();
   const {setChatType, setPrivateChatUser} = useChatUIControls();
 
-  //commented for v1 release
-  const chatLabel = useString('chat')();
+  const chatLabel = useString(toolbarItemChatText)();
 
   const isPanelActive = sidePanel === SidePanelType.Chat;
 
@@ -506,8 +509,6 @@ export interface NavbarProps {
   includeDefaultItems?: boolean;
 }
 const Navbar = (props: NavbarProps) => {
-  //commented for v1 release
-  //const recordingLabel = useString('recordingLabel')();
   const {customItems = [], includeDefaultItems = true} = props;
   const {width} = useWindowDimensions();
 

package/template/src/components/ParticipantsView.tsx

@@ -41,6 +41,14 @@ import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {PeopleHeader} from '../pages/video-call/SidePanelHeader';
 import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
 import WaitingRoomParticipants from './participants/WaitingRoomParticipants';
+import {
+  peoplePanelAudienceSectionHeaderText,
+  peoplePanelHostSectionHeaderText,
+  peoplePanelInThisMeetingLabel,
+  peoplePanelNoAudienceJoinedContent,
+  peoplePanelNoHostJoinedContent,
+  peoplePanelNoUsersJoinedContent,
+} from '../../src/language/default-labels/videoCallScreenLabels';
 
 const ParticipantView = props => {
   const {activeUids, customContent, defaultContent} = useContent();
@@ -53,12 +61,12 @@ const ParticipantView = props => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {rtcProps} = useContext(PropsContext);
   const {showHeader = true} = props;
-  const hostLabel = useString('host')();
-  const audienceLabel = useString('audience')();
-  const meetingParticpantsLabel = useString('inThisMeeting')();
-  const noHostJoinedYet = useString('noHostJoinedYet')();
-  const noAudienceJoinedYet = useString('noAudienceJoinedYet')();
-  const noUsersJoinedYet = useString('noUsersJoinedYet')();
+  const hostLabel = useString(peoplePanelHostSectionHeaderText)();
+  const audienceLabel = useString(peoplePanelAudienceSectionHeaderText)();
+  const meetingParticpantsLabel = useString(peoplePanelInThisMeetingLabel)();
+  const noHostJoinedYet = useString(peoplePanelNoHostJoinedContent)();
+  const noAudienceJoinedYet = useString(peoplePanelNoAudienceJoinedContent)();
+  const noUsersJoinedYet = useString(peoplePanelNoUsersJoinedContent)();
   const {
     data: {isHost},
   } = useRoomInfo();

package/template/src/components/Precall.tsx

@@ -54,6 +54,10 @@ import Logo from '../components/common/Logo';
 import ImageIcon from '../atoms/ImageIcon';
 import {DeviceSelectProps} from './precall/selectDevice';
 import {useString} from '../utils/useString';
+import {
+  precallYouAreJoiningAsHeading,
+  settingsPanelHeading,
+} from '../language/default-labels/precallScreenLabels';
 
 const JoinRoomInputView = ({isDesktop}) => {
   const {rtcProps} = useContext(PropsContext);
@@ -221,8 +225,8 @@ const JoinRoomButton = () => {
 };
 
 const Precall = () => {
-  const settingsLabel = useString('settings')();
-  const youAreJoiningAs = useString('youAreJoiningAs')();
+  const settingsLabel = useString(settingsPanelHeading)();
+  const youAreJoiningAs = useString(precallYouAreJoiningAsHeading)();
   const {rtcProps} = useContext(PropsContext);
   const {height} = useWindowDimensions();
   // const {isVBActive, setIsVBActive} = useVB();

package/template/src/components/RTMConfigure.tsx

@@ -42,6 +42,7 @@ import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
+import {PSTNUserLabel} from '../language/default-labels/videoCallScreenLabels';
 export enum UserType {
   ScreenShare = 'screenshare',
 }
@@ -75,14 +76,6 @@ const RtmConfigure = (props: any) => {
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
   const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
 
-  //commented for v1 release
-  // const userText = useString('remoteUserDefaultLabel')();
-  const userText = 'User';
-  const pstnUserLabel = useString('pstnUserLabel')();
-  //commented for v1 release
-  //const getScreenShareName = useString('screenshareUserName');
-  const getScreenShareName = (name: string) => `${name}'s screenshare`;
-
   let engine = useRef<RtmEngine>(null!);
   const timerValueRef: any = useRef(5);
 

package/template/src/components/Settings.tsx

@@ -19,6 +19,7 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
+import {toolbarItemSettingText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface SettingsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
@@ -28,7 +29,7 @@ const Settings = (props: SettingsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isToolbarMenuItem} = useToolbarMenu();
   //commented for v1 release
-  const settingsLabel = useString('settings')();
+  const settingsLabel = useString(toolbarItemSettingText)();
 
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {

package/template/src/components/SettingsView.tsx

@@ -49,11 +49,15 @@ import {whiteboardContext} from './whiteboard/WhiteboardConfigure';
 import InlineNotification from '../../src/atoms/InlineNotification';
 import {useRoomInfo} from './room-info/useRoomInfo';
 import {useString} from '../../src/utils/useString';
+import {
+  settingPanelNameCantbeChangedInfo,
+  settingPanelNameInputLabel,
+} from '../../src/language/default-labels/videoCallScreenLabels';
 
 interface EditNameProps {}
 const EditName: React.FC = (props?: EditNameProps) => {
-  const yournameLabel = useString('yourName')();
-  const nameCantbeChangedInfo = useString('nameCantbeChangedInfo')();
+  const yournameLabel = useString(settingPanelNameInputLabel)();
+  const nameCantbeChangedInfo = useString(settingPanelNameCantbeChangedInfo)();
   const {
     data: {isHost},
   } = useRoomInfo();

package/template/src/components/Share.tsx

@@ -38,8 +38,19 @@ import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 import Clipboard from '../subComponents/Clipboard';
-
-const isLiveStream = $config.EVENT_MODE;
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomCopyBtnText,
+  shareRoomCopyBtnTooltipText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+  shareRoomStartBtnText,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export interface CopyMeetingInfoProps {
   showSubLabel?: boolean;
@@ -51,39 +62,30 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   } = useRoomInfo();
   const {showSubLabel = true} = props;
 
-  const meetingUrlText = useString('roomLink')();
-  const meetingIdText = useString('roomId')();
-  const hostIdText = useString('hostId')();
-  const attendeeUrlLabel = useString('attendeeLink')();
-  const attendeeIdLabel = useString('attendeeId')();
-  const hostUrlLabel = useString('hostLink')();
-  const pstnLabel = useString('PSTN')();
-  const pstnNumberLabel = useString('number')();
-  const pinLabel = useString('pin')();
-  const copiedToClipboard = useString('copiedToClipboard')();
-  const sharePhoneNumber = useString('sharePhoneNumber')();
-  const shareWithAttendee = useString('shareWithAttendee')();
-  const shareWithCoHost = useString('shareWithCoHost')();
   const isSDK = isSDKCheck();
   const isWebCheck =
     $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () =>
-    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
+  const shareRoomHostLink = useString<any>(shareRoomHostLinkLabel)(isWebCheck);
+  const shareRoomHostLinkSubTextLocal = useString<any>(
+    shareRoomHostLinkSubText,
+  )();
+  const shareRoomAttendeeLink = useString<any>(shareRoomAttendeeLinkLabel)(
+    isWebCheck,
+  );
+  const shareRoomAttendeeLinkSubTextLocal = useString<any>(
+    shareRoomAttendeeLinkSubText,
+  )();
+  const shareRoomPSTN = useString<any>(shareRoomPSTNLabel)();
+  const shareRoomPSTNNumber = useString<any>(shareRoomPSTNNumberLabel)();
+  const shareRoomPSTNPin = useString<any>(shareRoomPSTNPinLabel)();
+  const shareRoomPSTNSubTextLocal = useString<any>(shareRoomPSTNSubText)();
 
-  const getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWebCheck) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWebCheck) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
+
+  const getHostLabel = () => shareRoomHostLink;
 
   const clipboardIconButton = (type: SHARE_LINK_CONTENT_TYPE) => {
     return (
@@ -151,7 +153,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{shareWithAttendee}</Text>
+              <Text style={style.helpText}>
+                {shareRoomAttendeeLinkSubTextLocal}
+              </Text>
             </>
           )}
           <Spacer size={25} />
@@ -183,7 +187,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{shareWithCoHost}</Text>
+              <Text style={style.helpText}>
+                {shareRoomHostLinkSubTextLocal}
+              </Text>
             </>
           )}
           <Spacer size={25} />
@@ -193,7 +199,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
       )}
       {$config.PSTN && pstn && pstn?.number && pstn?.pin ? (
         <>
-          <Text style={style.urlTitle}>{pstnLabel}</Text>
+          <Text style={style.urlTitle}>{shareRoomPSTN}</Text>
           <Spacer size={11} />
           <View style={style.container}>
             <View style={[style.urlContainer, style.urlPadding]}>
@@ -204,8 +210,8 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                     //@ts-ignore
                     isWebCheck ? urlWeb : {opacity: 1},
                   ]}>
-                  {pstnNumberLabel} - {pstn?.number} {' | '} {pinLabel} -{' '}
-                  {pstn?.pin}
+                  {shareRoomPSTNNumber} - {pstn?.number} {' | '}{' '}
+                  {shareRoomPSTNPin} - {pstn?.pin}
                 </Text>
               </View>
             </View>
@@ -215,7 +221,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>{sharePhoneNumber}</Text>
+              <Text style={style.helpText}>{shareRoomPSTNSubTextLocal}</Text>
             </>
           )}
           {/* <Spacer size={25} /> */}
@@ -228,7 +234,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
 };
 
 const ClipboardIconButtonURL = ({url}) => {
-  const copiedToClipboard = useString('copiedToClipboard')();
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
   return (
     <View style={style.iconContainer}>
       <Tooltip
@@ -329,11 +335,11 @@ const Share = () => {
     data: {roomId, meetingTitle},
   } = useRoomInfo();
 
-  const startRoom = useString('startRoom')();
-  const startStream = useString('startStream')();
+  const shareRoomStartBtnTextLocal = useString<any>(shareRoomStartBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
 
-  const enterMeetingAfterCreateButton = isLiveStream ? startStream : startRoom;
-  const copyInviteButton = useString('copyInviteButton')();
+  const copyInviteButton = useString(shareRoomCopyBtnText)();
   const history = useHistory();
   const enterMeeting = () => {
     if (roomId?.host) {
@@ -381,7 +387,7 @@ const Share = () => {
               iconName="video-on"
               onPress={() => enterMeeting()}
               containerStyle={isMobileUA() && {width: '100%'}}
-              text={enterMeetingAfterCreateButton.toUpperCase()}
+              text={shareRoomStartBtnTextLocal}
             />
             <Spacer size={16} />
             <LinkButton

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

@@ -29,6 +29,15 @@ import {useSidePanel} from '../../utils/useSidePanel';
 import getUniqueID from '../../utils/getUniqueID';
 import {trimText} from '../../utils/common';
 import {useString} from '../../utils/useString';
+import {
+  publicChatToastHeading,
+  multiplePublicChatToastHeading,
+  multiplePrivateChatToastHeading,
+  privateChatToastHeading,
+  multiplePublicAndPrivateChatToastHeading,
+  multiplePublicAndPrivateChatToastSubHeading,
+  multiplePublicChatToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 enum ChatMessageActionEnum {
   Create = 'Create_Chat_Message',
@@ -99,34 +108,34 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const individualActiveRef = useRef<string | number>();
 
   //public single
-  const fromText = useString('publicChatToastHeading');
+  const fromText = useString(publicChatToastHeading);
 
   //public multple
-  const multiplePublicChatToastHeading = useString(
-    'multiplePublicChatToastHeading',
+  const multiplePublicChatToastHeadingTT = useString(
+    multiplePublicChatToastHeading,
   )();
-  const multiplePublicChatToastSubHeading = useString<{
+  const multiplePublicChatToastSubHeadingTT = useString<{
     count: number;
     from: string;
-  }>('multiplePublicChatToastSubHeading');
+  }>(multiplePublicChatToastSubHeading);
 
   //private single
-  const privateMessageLabel = useString('privateChatToastHeading')();
+  const privateMessageLabel = useString(privateChatToastHeading)();
 
   //private multiple
-  const multiplePrivateChatToastHeading = useString<{count: number}>(
-    'multiplePrivateChatToastHeading',
+  const multiplePrivateChatToastHeadingTT = useString<{count: number}>(
+    multiplePrivateChatToastHeading,
   );
 
   //multiple private and public toast
-  const multiplePublicAndPrivateChatToastHeading = useString(
-    'multiplePublicAndPrivateChatToastHeading',
+  const multiplePublicAndPrivateChatToastHeadingTT = useString(
+    multiplePublicAndPrivateChatToastHeading,
   )();
-  const multiplePublicAndPrivateChatToastSubHeading = useString<{
+  const multiplePublicAndPrivateChatToastSubHeadingTT = useString<{
     publicChatCount: number;
     privateChatCount: number;
     from: string;
-  }>('multiplePublicAndPrivateChatToastSubHeading');
+  }>(multiplePublicAndPrivateChatToastSubHeading);
 
   useEffect(() => {
     callActiveRef.current.callActive = callActive;
@@ -252,16 +261,16 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           leadingIconName: 'chat-nav',
           text1:
             privateMessages && privateMessages.length
-              ? multiplePublicAndPrivateChatToastHeading
-              : multiplePublicChatToastHeading,
+              ? multiplePublicAndPrivateChatToastHeadingTT
+              : multiplePublicChatToastHeadingTT,
           text2:
             privateMessages && privateMessages.length
-              ? multiplePublicAndPrivateChatToastSubHeading({
+              ? multiplePublicAndPrivateChatToastSubHeadingTT({
                   publicChatCount: publicMessages.length,
                   privateChatCount: privateMessages.length,
                   from: fromNames,
                 })
-              : multiplePublicChatToastSubHeading({
+              : multiplePublicChatToastSubHeadingTT({
                   count: publicMessages.length,
                   from: fromNames,
                 }),
@@ -288,7 +297,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           secondaryBtn: null,
           type: 'info',
           leadingIconName: 'chat-nav',
-          text1: multiplePrivateChatToastHeading({
+          text1: multiplePrivateChatToastHeadingTT({
             count: privateMessages.length,
           }),
           text2: ``,

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

@@ -22,6 +22,11 @@ import TertiaryButton from '../../atoms/TertiaryButton';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {trimText} from '../../utils/common';
 import {useString} from '../../utils/useString';
+import {
+  livestreamRequestAlreadyProcessed,
+  livestreamToastApprovalBtnText,
+  livestreamToastDenyBtnText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const LiveStreamContext = createContext(null as unknown as liveStreamContext);
 
@@ -30,7 +35,9 @@ export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
 export const LiveStreamContextProvider: React.FC<
   liveStreamPropsInterface
 > = props => {
-  const requestAlreadyProcessed = useString('requestAlreadyProcessed')();
+  const requestAlreadyProcessed = useString(
+    livestreamRequestAlreadyProcessed,
+  )();
 
   const raiseHandRequestReceivedToastHeading = useString(
     LSNotificationObject.RAISE_HAND_RECEIVED.text1TranslationKey,
@@ -157,8 +164,8 @@ export const LiveStreamContextProvider: React.FC<
 
   const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
 
-  const allowToBePresenter = useString('allowToBePresenter')();
-  const deny = useString('deny')();
+  const allowToBePresenter = useString(livestreamToastApprovalBtnText)();
+  const deny = useString(livestreamToastDenyBtnText)();
   const showToast = (
     text: string,
     text2: string,