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

package/package.json

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

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/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/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/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/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,

package/template/src/components/livestream/Types.ts

@@ -21,6 +21,19 @@ export interface raiseHandItemInterface {
 }
 
 import {UidType} from '../../../agora-rn-uikit';
+import {
+  livestreamPromoteAsCoHostToastHeading,
+  livestreamRaiseHandApprovedRequestRecallToastHeading,
+  livestreamRaiseHandRequestAcceptedToastHeading,
+  livestreamRaiseHandRequestAcceptedToastSubHeading,
+  livestreamRaiseHandRequestRecallLocalToastHeading,
+  livestreamRaiseHandRequestRecallToastHeading,
+  livestreamRaiseHandRequestReceivedToastHeading,
+  livestreamRaiseHandRequestReceivedToastSubHeading,
+  livestreamRaiseHandRequestRejectedToastHeading,
+  livestreamRaiseHandRequestToastHeading,
+  livestreamRaiseHandRequestToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export enum requestStatus {
   AwaitingAction = 'AWAITING_ACTION',
@@ -59,31 +72,31 @@ interface LSNotificationObjectInterface {
 }
 export const LSNotificationObject: LSNotificationObjectInterface = {
   [LiveStreamControlMessageEnum.raiseHandRequest]: {
-    text1TranslationKey: 'raiseHandRequestToastHeading',
-    text2TranslationKey: 'raiseHandRequestToastSubHeading',
+    text1TranslationKey: livestreamRaiseHandRequestToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestReceived]: {
-    text1TranslationKey: 'raiseHandRequestReceivedToastHeading',
-    text2TranslationKey: 'raiseHandRequestReceivedToastSubHeading',
+    text1TranslationKey: livestreamRaiseHandRequestReceivedToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestReceivedToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestAccepted]: {
-    text1TranslationKey: 'raiseHandRequestAcceptedToastHeading',
-    text2TranslationKey: 'raiseHandRequestAcceptedToastSubHeading',
+    text1TranslationKey: livestreamRaiseHandRequestAcceptedToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestAcceptedToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRejected]: {
-    text1TranslationKey: 'raiseHandRequestRejectedToastHeading',
+    text1TranslationKey: livestreamRaiseHandRequestRejectedToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRecall]: {
-    text1TranslationKey: 'raiseHandRequestRecallToastHeading',
+    text1TranslationKey: livestreamRaiseHandRequestRecallToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRecallLocal]: {
-    text1TranslationKey: 'raiseHandRequestRecallLocalToastHeading',
+    text1TranslationKey: livestreamRaiseHandRequestRecallLocalToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall]: {
-    text1TranslationKey: 'raiseHandApprovedRequestRecallToastHeading',
+    text1TranslationKey: livestreamRaiseHandApprovedRequestRecallToastHeading,
   },
   [LiveStreamControlMessageEnum.promoteAsCoHost]: {
-    text1TranslationKey: 'promoteAsCoHostToastHeading',
+    text1TranslationKey: livestreamPromoteAsCoHostToastHeading,
   },
 };
 

package/template/src/components/livestream/views/LiveStreamAttendeeLandingTile.tsx

@@ -13,6 +13,19 @@ import TertiaryButton from '../../../atoms/TertiaryButton';
 import ThemeConfig from '../../../theme';
 import {useString} from '../../../utils/useString';
 import {TextDataInterface} from '../../../language/default-labels';
+import {
+  livestreamingAttendeeChatWithOthersInfoHeading,
+  livestreamingAttendeeChatWithOthersInfoSubHeading,
+  livestreamingAttendeeInviteOthersText,
+  livestreamingAttendeeJoinWithActivitiesInfoHeading,
+  livestreamingAttendeeJoinWithActivitiesInfoSubHeading,
+  livestreamingAttendeePresentYourScreenInfoHeading,
+  livestreamingAttendeePresentYourScreenInfoSubHeading,
+  livestreamingAttendeeRaiseHandInfoHeading,
+  livestreamingAttendeeRaiseHandInfoSubHeading,
+  livestreamingAttendeeWaitingForHostToJoinText,
+  livestreamingAttendeeWhatYouCanDoText,
+} from '../../../language/default-labels/videoCallScreenLabels';
 
 interface Feature {
   id: number;
@@ -26,29 +39,32 @@ const features: Feature[] = [
     id: 1,
     icon: 'raise-hand',
     tint: $config.SEMANTIC_WARNING,
-    titleTranslationKey: 'raiseYourHand',
-    descriptionTranslationKey: 'raiseYourHandInfo',
+    titleTranslationKey: livestreamingAttendeeRaiseHandInfoHeading,
+    descriptionTranslationKey: livestreamingAttendeeRaiseHandInfoSubHeading,
   },
   {
     id: 2,
     icon: 'chat-filled',
-    titleTranslationKey: 'chatWithOthers',
+    titleTranslationKey: livestreamingAttendeeChatWithOthersInfoHeading,
     tint: $config.SEMANTIC_SUCCESS,
-    descriptionTranslationKey: 'chatWithOthersInfo',
+    descriptionTranslationKey:
+      livestreamingAttendeeChatWithOthersInfoSubHeading,
   },
   {
     id: 3,
     icon: 'screen-share',
-    titleTranslationKey: 'presentYourScreen',
+    titleTranslationKey: livestreamingAttendeePresentYourScreenInfoHeading,
     tint: $config.PRIMARY_ACTION_BRAND_COLOR,
-    descriptionTranslationKey: 'presentYourScreenInfo',
+    descriptionTranslationKey:
+      livestreamingAttendeePresentYourScreenInfoSubHeading,
   },
   {
     id: 4,
     icon: 'celebration',
-    titleTranslationKey: 'joinWithActivites',
+    titleTranslationKey: livestreamingAttendeeJoinWithActivitiesInfoHeading,
     tint: $config.SEMANTIC_ERROR,
-    descriptionTranslationKey: 'joinWithActivitesInfo',
+    descriptionTranslationKey:
+      livestreamingAttendeeJoinWithActivitiesInfoSubHeading,
   },
 ];
 function FeatureTile({feature}: {feature: Feature}) {
@@ -89,9 +105,13 @@ function FeatureTile({feature}: {feature: Feature}) {
 export default function LiveStreamAttendeeLandingTile() {
   const isMobile = isMobileUA();
   const {copyShareLinkToClipboard, getShareLink} = useShareLink();
-  const inviteOtherAttendee = useString('inviteOtherAttendee')();
-  const whatYouCanDoHere = useString('whatYouCanDoHere')();
-  const waitingForHostToJoin = useString('waitingForHostToJoin')();
+  const inviteOtherAttendee = useString(
+    livestreamingAttendeeInviteOthersText,
+  )();
+  const whatYouCanDoHere = useString(livestreamingAttendeeWhatYouCanDoText)();
+  const waitingForHostToJoin = useString(
+    livestreamingAttendeeWaitingForHostToJoinText,
+  )();
   return (
     <View style={style.tileBackdrop}>
       <ScrollView contentContainerStyle={{flexGrow: 1}}>

package/template/src/components/meeting-info-invite/MeetingInfoGridTile.tsx

@@ -13,23 +13,22 @@ import {isMobileUA, isValidReactComponent} from '../../utils/common';
 import Avatar from '../../atoms/Avatar';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../../utils/useString';
+import {
+  inviteTileCopyInviteBtnText,
+  inviteTileNoElseJoinedYetText,
+  inviteTileWelcomeText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const waveHandEmoji = '👋';
 
 export default function MeetingInfoGridTile() {
   const isMobile = isMobileUA();
-  const welcomeLabel = useString('welcome')();
-  const inviteOthersButtonLabel = useString('inviteOthersButton')();
-  const copyInviteButtonLabel = useString('copyInvitationButton')();
-  const copyInviteButton = isMobile
-    ? inviteOthersButtonLabel
-    : copyInviteButtonLabel;
+  const welcomeLabel = useString(inviteTileWelcomeText)();
+  const copyInviteButtonLabel = useString(inviteTileCopyInviteBtnText)();
+  const copyInviteButton = copyInviteButtonLabel;
   const {copyShareLinkToClipboard} = useShareLink();
   const username = useGetName();
-  const noOneElseJoinedYet = useString('noOneElseJoinedYet')();
-  const noOneElseJoinedYetInviteOthers = useString(
-    'noOneElseJoinedYetInviteOthers',
-  )();
+  const noOneElseJoinedYet = useString(inviteTileNoElseJoinedYetText)();
   const {InvitePopupContent, InvitePopupTitle} = useCustomization(data => {
     let components: {
       InvitePopupContent?: React.ComponentType;
@@ -101,9 +100,7 @@ export default function MeetingInfoGridTile() {
                   {isMobile && <Spacer size={10} />}
                   <View style={{flexDirection: 'row'}}>
                     <Text style={[style.subheading, {flexShrink: 1}]}>
-                      {isMobile
-                        ? noOneElseJoinedYetInviteOthers
-                        : noOneElseJoinedYet}
+                      {noOneElseJoinedYet}
                     </Text>
                   </View>
                 </>

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

@@ -13,6 +13,7 @@ import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
 import {useScreenContext} from '../contexts/ScreenShareContext';
 import ScreenshareParticipants from './ScreenshareParticipants';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
 const AllAudienceParticipants = (props: any) => {
   const {screenShareData} = useScreenContext();
@@ -25,9 +26,7 @@ const AllAudienceParticipants = (props: any) => {
   } = props;
   const {defaultContent} = useContent();
   const {localUid} = useContext(chatContext);
-  //commented for v1 release
-  //const participantListPlaceholder = useString('participantListPlaceholder')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const getParticipantName = (uid: UidType) => {
     return defaultContent[uid]?.name || remoteUserDefaultLabel;
   };
@@ -70,7 +69,7 @@ const AllAudienceParticipants = (props: any) => {
       ) : (
         <>
           {/**Audience should see his name first */}
-          {uids.filter((i) => i === localUid).length ? (
+          {uids.filter(i => i === localUid).length ? (
             <>
               <Participant
                 isLocal={true}
@@ -102,7 +101,7 @@ const AllAudienceParticipants = (props: any) => {
           )}
           {/* Others Audience in the call */}
           {uids
-            .filter((i) => i !== localUid)
+            .filter(i => i !== localUid)
             .map((uid: any, index: number) => (
               <>
                 <Participant

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

@@ -9,13 +9,12 @@ import Spacer from '../../atoms/Spacer';
 import {useVideoMeetingData} from '../contexts/VideoMeetingDataContext';
 import {useScreenContext} from '../contexts/ScreenShareContext';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
 export default function AllHostParticipants(props: any) {
   const localUid = useLocalUid();
   const {screenShareData} = useScreenContext();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const {defaultContent} = useContent();
   const getParticipantName = (uid: UidType) => {
     return defaultContent[uid]?.name || remoteUserDefaultLabel;
@@ -67,7 +66,7 @@ export default function AllHostParticipants(props: any) {
         <>
           <Spacer size={4} />
           {/* User should see his name first */}
-          {uids.filter((uid) => uid === localUid).length > 0 ? (
+          {uids.filter(uid => uid === localUid).length > 0 ? (
             <>
               <Participant
                 isLocal={true}
@@ -89,10 +88,10 @@ export default function AllHostParticipants(props: any) {
           {/* Others Users in the call */}
           {uids
             .filter(
-              (uid) => uid !== localUid && defaultContent[uid].type === 'rtc',
+              uid => uid !== localUid && defaultContent[uid].type === 'rtc',
             )
             .map(
-              (uid) => (
+              uid => (
                 // defaultContent[uid]?.type === 'screenshare' ? (
                 //   <ScreenshareParticipants
                 //     name={getParticipantName(uid)}

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

@@ -48,6 +48,11 @@ import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
 import UserActionMenuOptionsOptions from './UserActionMenuOptions';
 
 import WaitingRoomButton from '../../subComponents/waiting-rooms/WaitingRoomControls';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelMeText,
+  peoplePanelPresenterText,
+} from '../../language/default-labels/videoCallScreenLabels';
 interface ParticipantInterface {
   isLocal: boolean;
   name: string;
@@ -64,6 +69,8 @@ interface ParticipantInterface {
 }
 
 const Participant = (props: ParticipantInterface) => {
+  const metext = useString(peoplePanelMeText)();
+  const presentertext = useString(peoplePanelPresenterText)();
   const {coHostUids} = useContext(LiveStreamContext);
   const [isHovered, setIsHovered] = React.useState(false);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
@@ -113,11 +120,11 @@ const Participant = (props: ParticipantInterface) => {
             <Text style={styles.participantNameText} numberOfLines={1}>
               {name}
             </Text>
-            {isLocal && <Text style={styles.subText}>{'Me'}</Text>}
+            {isLocal && <Text style={styles.subText}>{metext}</Text>}
             {!isLocal &&
             $config.EVENT_MODE &&
             coHostUids.indexOf(user.uid) !== -1 ? (
-              <Text style={styles.subText}>{'Presenter'}</Text>
+              <Text style={styles.subText}>{presentertext}</Text>
             ) : (
               <></>
             )}