agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.7

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,13 +9,15 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
   ClientRole,
   PropsContext,
+  RtcContext,
+  DispatchContext,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
 import Styles from '../components/styles';
@@ -25,8 +27,24 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useScreenshare} from './screenshare/useScreenshare';
+import {isAndroid, isWebInternal} from '../utils/common';
+import {isIOS} from '../utils/common';
+import {useVideoCall} from '../components/useVideoCall';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {isMobileUA} from '../utils/common';
+import {useToolbar} from '../utils/useToolbar';
+import {
+  I18nDeviceStatus,
+  livestreamingCameraTooltipText,
+  toolbarItemCameraText,
+  toolbarItemCameraTooltipText,
+} from '../language/default-labels/videoCallScreenLabels';
+import events from '../rtm-events-api';
+import {controlMessageEnum} from '../components/ChatContext';
+import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local video
@@ -34,52 +52,105 @@ import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 export interface LocalVideoMuteProps {
   plainIconHoverEffect?: boolean;
   showToolTip?: boolean;
-  showLabel?: boolean;
   render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
   disabled?: boolean;
-  isOnActionSheet?: boolean;
   iconProps?: (
     isVideoEnabled: boolean,
     isPermissionDenied: boolean,
   ) => Partial<ImageIconProps>;
   showWarningIcon?: boolean;
-  isMobileView?: boolean;
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
   const {rtcProps} = useContext(PropsContext);
+  const {isScreenshareActive} = useScreenshare();
+  const {setShowStopScreenSharePopup} = useVideoCall();
   const {isToolbarMenuItem} = useToolbarMenu();
   const {
     data: {isHost},
   } = useRoomInfo();
+
+  const isHostRef = useRef(isHost);
+  useEffect(() => {
+    isHostRef.current = isHost;
+  }, [isHost]);
+
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
+  const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
+
+  useEffect(() => {
+    events.on(controlMessageEnum.disableButton, async ({payload}) => {
+      try {
+        const data = JSON.parse(payload);
+        if (
+          data &&
+          data?.button === MUTE_REMOTE_TYPE.video &&
+          !isHostRef.current
+        ) {
+          if (data?.action === true) {
+            isWebInternal()
+              ? await RtcEngineUnsafe.muteLocalVideoStream(true)
+              : //@ts-ignore
+                await RtcEngineUnsafe.enableLocalVideo(false);
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [0, true],
+            });
+          } else {
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [0, false],
+            });
+          }
+        }
+      } catch (error) {
+        console.log('debugging error on disableButton');
+      }
+    });
+  }, []);
+
+  const {isOnActionSheet, isOnFirstRow, showLabel} = useActionSheet();
+  const {position} = useToolbar();
   const {
-    showToolTip = false,
-    showLabel = $config.ICON_TEXT,
-    disabled = false,
-    isOnActionSheet = false,
-    showWarningIcon = true,
-    isMobileView = false,
-  } = props;
-  //commented for v1 release
-  //const videoLabel = useString('toggleVideoButton')();
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+
+  const videoButtonLabel = useString<I18nDeviceStatus>(toolbarItemCameraText);
+  const videoButtonTooltip = useString<I18nDeviceStatus>(
+    toolbarItemCameraTooltipText,
+  );
 
+  const lstooltip = useString<boolean>(livestreamingCameraTooltipText);
   const onPress = () => {
-    localMute(MUTE_LOCAL_TYPE.video);
+    //if screensharing is going on native - to turn on video screenshare should be turn off
+    //show confirm popup to stop the screenshare
+    if ((isAndroid() || isIOS()) && isScreenshareActive) {
+      setShowStopScreenSharePopup(true);
+    } else {
+      localMute(MUTE_LOCAL_TYPE.video);
+    }
   };
-  const isVideoEnabled = local.video === ToggleState.enabled;
+  //native screen share uses same local uid to publish the screenshare steam
+  //so if screenshare active on native then its means local video is turned off
+  const isVideoEnabled =
+    (isAndroid() || isIOS()) && isScreenshareActive
+      ? false
+      : local.video === ToggleState.enabled;
 
   const permissionDenied =
     local.permissionStatus === PermissionState.REJECTED ||
     local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY;
 
   const videoLabel = permissionDenied
-    ? 'Video'
+    ? videoButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
     : isVideoEnabled
-    ? 'Video On'
-    : 'Video Off';
+    ? videoButtonLabel(I18nDeviceStatus.ON)
+    : videoButtonLabel(I18nDeviceStatus.OFF);
 
   let iconProps: IconButtonProps['iconProps'] = {
     showWarningIcon: permissionDenied && showWarningIcon ? true : false,
@@ -111,21 +182,55 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
     onPress,
     iconProps,
     btnTextProps: {
-      text: showLabel ? videoLabel : '',
+      text: showLabel && callActive && !isMobileUA() ? videoLabel : '',
       textColor: $config.FONT_COLOR,
     },
     disabled: permissionDenied || disabled ? true : false,
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    const isAudience = rtcProps?.role == ClientRole.Audience;
+    const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+
+    iconButtonProps.disabled =
+      permissionDenied || ($config.EVENT_MODE && isAudience && !isBroadCasting)
+        ? true
+        : false;
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
+
   iconButtonProps.isOnActionSheet = isOnActionSheet;
-  if (!isMobileView) {
+  if (!isOnActionSheet) {
     iconButtonProps.toolTipMessage = showToolTip
       ? permissionDenied
-        ? 'Give Permissions'
+        ? videoButtonTooltip(I18nDeviceStatus.PERMISSION_DENIED)
         : isVideoEnabled
-        ? 'Disable Camera'
-        : 'Enable Camera'
+        ? videoButtonTooltip(I18nDeviceStatus.ON)
+        : videoButtonTooltip(I18nDeviceStatus.OFF)
       : '';
+    if (
+      //precall mobile/mobile web UI - mute button should not show the label
+      (!callActive && isMobileUA()) ||
+      //sidepanel mute button should not show the label
+      (callActive && !position)
+    ) {
+      iconButtonProps.btnTextProps.text = '';
+    }
   }
 
   if (
@@ -137,21 +242,21 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
-    $config.EVENT_MODE &&
-    $config.RAISE_HAND &&
-    !isHost
+    (rtcProps.role == ClientRole.Audience &&
+      $config.EVENT_MODE &&
+      $config.RAISE_HAND &&
+      !isHost) ||
+    local.localVideoForceDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
       name: 'video-off',
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
-    iconButtonProps.toolTipMessage = showToolTip
-      ? isHandRaised(local.uid)
-        ? 'Waiting for host to appove the request'
-        : 'Raise Hand in order to turn video on'
-      : '';
+    iconButtonProps.toolTipMessage =
+      showToolTip && !local.localVideoForceDisabled
+        ? lstooltip(isHandRaised(local.uid))
+        : '';
     iconButtonProps.disabled = true;
   }
   return props?.render ? (

package/template/src/subComponents/LogoutButton.tsx

@@ -54,7 +54,7 @@ const LogoutButton = () => {
   };
 
   const login = () => {
-    history.push('/authenticate');
+    history.push('/login');
   };
 
   return (

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -20,6 +20,10 @@ import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {useLayout, useContent} from 'customization-api';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import {
+  NetworkQualities,
+  videoTileNetworkQuailtyLabel,
+} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  *
@@ -38,40 +42,19 @@ const NetworkQualityPill = (props: NetworkQualityPillProps) => {
   const {uid} = props;
   const {defaultContent} = useContent();
   const [networkTextVisible, setNetworkTextVisible] = useState(false);
-  //commented for v1 release
-  //const getLabel = useString<NetworkQualities>('networkQualityLabel');
-  const getLabel = (quality: string) => {
-    switch (quality) {
-      case 'unknown':
-        return 'Network Unsupported';
-      case 'excellent':
-        return 'Excellent Network';
-      case 'good':
-        return 'Good Network';
-      case 'bad':
-        return 'Bad Network';
-      case 'veryBad':
-        return 'Very Bad Network';
-      case 'unpublished':
-        return 'Network Unpublished';
-      case 'loading':
-        return 'Network Loading';
-      default:
-        return 'Loading';
-    }
-  };
+  const getLabel = useString<NetworkQualities>(videoTileNetworkQuailtyLabel);
+
   const networkQualityStat = useContext(NetworkQualityContext);
   const networkStat = networkQualityStat[uid]
     ? networkQualityStat[uid]
     : defaultContent[uid]?.audio || defaultContent[uid]?.video
     ? 8
     : 7;
-  const {activeUids} = useContent();
+  const {activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const {currentLayout} = useLayout();
   const reduceSpace =
-    isMobileUA() &&
-    activeUids.length > 4 &&
-    currentLayout === getGridLayoutName();
+    isMobileUA() && activeUidsLen > 4 && currentLayout === getGridLayoutName();
   return (
     <View
       testID="videocall-networkpill"
@@ -91,7 +74,7 @@ const NetworkQualityPill = (props: NetworkQualityPillProps) => {
           networkTextVisible,
           setNetworkTextVisible,
           reduceSpace,
-          activeUids,
+          activeUidsLen,
         }}>
         <View>
           <ImageIcon
@@ -121,7 +104,7 @@ const PlatformSpecificWrapper = ({
   setNetworkTextVisible,
   children,
   reduceSpace,
-  activeUids,
+  activeUidsLen,
 }: any) => {
   return !isWebInternal() ? (
     <Pressable
@@ -130,7 +113,7 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
+        padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
       }}
       onPress={() => {
         setNetworkTextVisible((visible: boolean) => !visible);
@@ -144,9 +127,9 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
+        padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
       }}
-      onClick={(e) => {
+      onClick={e => {
         e.preventDefault();
         setNetworkTextVisible((visible: boolean) => !visible);
       }}

package/template/src/subComponents/Recording.tsx

@@ -15,21 +15,20 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemRecordingText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface RecordingButtonProps {
   showLabel?: boolean;
   render?: (onPress: () => void, isRecordingActive: boolean) => JSX.Element;
-  isOnActionSheet?: boolean;
 }
 
 const Recording = (props: RecordingButtonProps) => {
   const {isToolbarMenuItem} = useToolbarMenu();
   const {startRecording, inProgress, isRecordingActive} = useRecording();
-  //commented for v1 release
-  //const recordingButton = useString<boolean>('recordingButton');
-  const recordingButton = (recording: boolean) =>
-    recording ? 'Stop Rec' : 'Record';
-  const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
+  const recordingButton = useString<boolean>(toolbarItemRecordingText);
+  const {isOnActionSheet, showLabel} = useActionSheet();
   const {setShowStopRecordingPopup} = useVideoCall();
   const onPress = () => {
     if (!isRecordingActive) {
@@ -54,6 +53,24 @@ const Recording = (props: RecordingButtonProps) => {
     containerStyle: inProgress ? {opacity: 0.6} : {},
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -18,7 +18,7 @@ import Styles from '../components/styles';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 import IconButton from '../atoms/IconButton';
 import RemoteMutePopup from './RemoteMutePopup';
-import {useContent} from 'customization-api';
+import {I18nMuteType, useContent} from 'customization-api';
 import {calculatePosition} from '../utils/common';
 import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 export interface RemoteAudioMuteProps {
@@ -61,7 +61,7 @@ const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
     <>
       <RemoteMutePopup
         action={props?.audio ? 'mute' : 'request'}
-        type="audio"
+        type={I18nMuteType.audio}
         actionMenuVisible={showModal}
         setActionMenuVisible={setShowModal}
         name={defaultContent[props.uid]?.name}
@@ -69,7 +69,7 @@ const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
         onMutePress={onPress}
       />
       <IconButton
-        setRef={(ref) => (btnRef.current = ref)}
+        setRef={ref => (btnRef.current = ref)}
         disabled={!isHost}
         onPress={() => {
           btnRef?.current?.measure(

package/template/src/subComponents/RemoteMutePopup.tsx

@@ -13,8 +13,21 @@ import Spacer from '../atoms/Spacer';
 import PlatformWrapper from '../utils/PlatformWrapper';
 import {isMobileOrTablet} from 'customization-api';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useString} from '../utils/useString';
+import {
+  I18nMuteConfirmation,
+  I18nMuteType,
+  I18nRequestConfirmation,
+  muteAllConfirmationPopoverContent,
+  muteAllConfirmationPopoverPrimaryBtnText,
+  muteConfirmationPopoverContent,
+  muteConfirmationPopoverPrimaryBtnText,
+  requestConfirmationPopoverContent,
+  requestConfirmationPopoverPrimaryBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
 
-export interface ActionMenuProps {
+export interface RemoteMutePopupProps {
   actionMenuVisible: boolean;
   setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
   modalPosition?: {
@@ -25,11 +38,26 @@ export interface ActionMenuProps {
   };
   name: string;
   onMutePress: () => void;
-  type: 'video' | 'audio';
+  type: I18nMuteType;
   action?: 'mute' | 'request';
 }
 
-const RemoteMutePopup = (props: ActionMenuProps) => {
+const RemoteMutePopup = (props: RemoteMutePopupProps) => {
+  const cancelLabel = useString(cancelText)();
+  const muteLabel = useString(muteConfirmationPopoverPrimaryBtnText)();
+  const muteAllLabel = useString(muteAllConfirmationPopoverPrimaryBtnText)();
+  const requestLabel = useString(requestConfirmationPopoverPrimaryBtnText)();
+
+  const muteAllConfirmation = useString<I18nMuteType>(
+    muteAllConfirmationPopoverContent,
+  );
+  const requestConfirmation = useString<I18nRequestConfirmation>(
+    requestConfirmationPopoverContent,
+  );
+  const muteConfirmation = useString<I18nMuteConfirmation>(
+    muteConfirmationPopoverContent,
+  );
+
   const {height} = useWindowDimensions();
   const {
     actionMenuVisible,
@@ -38,22 +66,35 @@ const RemoteMutePopup = (props: ActionMenuProps) => {
     action = 'mute',
   } = props;
   let message = '';
+  let btnLabel = '';
 
   if (props.name) {
     //mute action
     if (action === 'mute') {
-      message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
+      message = muteConfirmation({
+        name: props?.name,
+        type: props.type,
+      });
+      btnLabel = muteLabel;
+      //message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
     }
     //request action
     else {
-      if (props?.type === 'audio') {
-        message = `Request ${props.name} to turn on their microphone?`;
-      } else {
-        message = `Request ${props.name} to turn on their camera?`;
-      }
+      message = requestConfirmation({
+        name: props?.name,
+        type: props?.type,
+      });
+      btnLabel = requestLabel;
+      // if (props?.type === 'audio') {
+      //   //message = `Request ${props.name} to turn on their microphone?`;
+      // } else {
+      //   //message = `Request ${props.name} to turn on their camera?`;
+      // }
     }
   } else {
-    message = `Mute everyone's ${props.type} on the call?`;
+    message = muteAllConfirmation(props?.type);
+    btnLabel = muteAllLabel;
+    //message = `Mute everyone's ${props.type} on the call?`;
   }
 
   return (
@@ -95,7 +136,9 @@ const RemoteMutePopup = (props: ActionMenuProps) => {
                     <TouchableOpacity
                       style={isHovered ? styles.onHoverBtnStyle : {}}
                       onPress={() => props.setActionMenuVisible(false)}>
-                      <Text style={styles.btnText}>Cancel</Text>
+                      <Text style={styles.btnText}>
+                        {cancelLabel?.toLowerCase()}
+                      </Text>
                     </TouchableOpacity>
                   );
                 }}
@@ -107,9 +150,7 @@ const RemoteMutePopup = (props: ActionMenuProps) => {
                     <TouchableOpacity
                       style={isHovered ? styles.onHoverBtnStyle : {}}
                       onPress={() => props.onMutePress()}>
-                      <Text style={styles.btnText}>
-                        {action === 'mute' ? 'Mute' : 'Request'}
-                      </Text>
+                      <Text style={styles.btnText}>{btnLabel}</Text>
                     </TouchableOpacity>
                   );
                 }}

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -15,7 +15,7 @@ import {UidType} from '../../agora-rn-uikit';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 import IconButton from '../atoms/IconButton';
 import RemoteMutePopup from './RemoteMutePopup';
-import {useContent} from 'customization-api';
+import {I18nMuteType, useContent} from 'customization-api';
 import {calculatePosition} from '../utils/common';
 import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 /**
@@ -48,7 +48,7 @@ const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
     <>
       <RemoteMutePopup
         action={props?.video ? 'mute' : 'request'}
-        type="video"
+        type={I18nMuteType.video}
         actionMenuVisible={showModal}
         setActionMenuVisible={setShowModal}
         name={defaultContent[props.uid]?.name}
@@ -61,7 +61,7 @@ const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
           backgroundColor: $config.ICON_BG_COLOR,
           borderRadius: 20,
         }}
-        setRef={(ref) => (btnRef.current = ref)}
+        setRef={ref => (btnRef.current = ref)}
         disabled={!isHost}
         onPress={() => {
           btnRef?.current?.measure(

package/template/src/subComponents/RemoveMeetingPopup.tsx

@@ -6,6 +6,13 @@ import TertiaryButton from '../atoms/TertiaryButton';
 import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  removeUserFromRoomPopupHeading,
+  removeUserFromRoomPopupPrimaryBtnText,
+  removeUserFromRoomPopupSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
 
 interface RemoveMeetingPopupProps {
   modalVisible: boolean;
@@ -15,20 +22,26 @@ interface RemoveMeetingPopupProps {
 }
 const RemoveMeetingPopup = (props: RemoveMeetingPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const removeMeetingLabelHeading = 'Remove ' + props.username + '?';
-  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to rejoin the room later.`;
+  const removeMeetingLabelHeading = useString(removeUserFromRoomPopupHeading);
+  const removeMeetingLabelSubHeading = useString(
+    removeUserFromRoomPopupSubHeading,
+  );
 
-  const cancelBtnLabel = 'CANCEL';
-  const removeBtnLabel = 'REMOVE';
+  const cancelBtnLabel = useString(cancelText)();
+  const removeBtnLabel = useString(removeUserFromRoomPopupPrimaryBtnText)();
   return (
     <Popup
       modalVisible={props.modalVisible}
       setModalVisible={props.setModalVisible}
       showCloseIcon={false}
       contentContainerStyle={styles.contentContainer}>
-      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
+      <Text style={styles.heading}>
+        {removeMeetingLabelHeading(props?.username)}
+      </Text>
       <Spacer size={8} />
-      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
+      <Text style={styles.subHeading}>
+        {removeMeetingLabelSubHeading(props?.username)}
+      </Text>
       <Spacer size={32} />
       <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
         <View style={isDesktop && {flex: 1}}>

package/template/src/subComponents/RemoveScreensharePopup.tsx

@@ -6,6 +6,13 @@ import TertiaryButton from '../atoms/TertiaryButton';
 import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  removeScreenshareFromRoomPopupHeading,
+  removeScreenshareFromRoomPopupPrimaryBtnText,
+  removeScreenshareFromRoomPopupSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
 
 interface RemoveScreensharePopupProps {
   modalVisible: boolean;
@@ -15,11 +22,17 @@ interface RemoveScreensharePopupProps {
 }
 const RemoveScreensharePopup = (props: RemoveScreensharePopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const removeMeetingLabelHeading = 'Remove Screenshare?';
-  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to screen share later.`;
+  const removeMeetingLabelHeading = useString(
+    removeScreenshareFromRoomPopupHeading,
+  )();
+  const removeMeetingLabelSubHeading = useString(
+    removeScreenshareFromRoomPopupSubHeading,
+  );
 
-  const cancelBtnLabel = 'CANCEL';
-  const removeBtnLabel = 'REMOVE';
+  const cancelBtnLabel = useString(cancelText)();
+  const removeBtnLabel = useString(
+    removeScreenshareFromRoomPopupPrimaryBtnText,
+  )();
   return (
     <Popup
       modalVisible={props.modalVisible}
@@ -28,7 +41,9 @@ const RemoveScreensharePopup = (props: RemoveScreensharePopupProps) => {
       contentContainerStyle={styles.contentContainer}>
       <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
       <Spacer size={8} />
-      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
+      <Text style={styles.subHeading}>
+        {removeMeetingLabelSubHeading(props?.username)}
+      </Text>
       <Spacer size={32} />
       <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
         <View style={isDesktop && {flex: 1}}>