agora-appbuilder-core 4.0.0 → 4.0.2

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 {useRender} from 'customization-api';
+import {I18nMuteType, useContent} from 'customization-api';
 import {calculatePosition} from '../utils/common';
 import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 /**
@@ -36,7 +36,7 @@ const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
   const requestRemoteVideo = useRemoteRequest();
   const [showModal, setShowModal] = useState(false);
   const [pos, setPos] = useState({});
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const onPress = () => {
     props?.video
@@ -48,10 +48,10 @@ const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
     <>
       <RemoteMutePopup
         action={props?.video ? 'mute' : 'request'}
-        type="video"
+        type={I18nMuteType.video}
         actionMenuVisible={showModal}
         setActionMenuVisible={setShowModal}
-        name={renderList[props.uid]?.name}
+        name={defaultContent[props.uid]?.name}
         modalPosition={pos}
         onMutePress={onPress}
       />
@@ -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 meeting 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}}>

package/template/src/subComponents/ScreenShareNotice.tsx

@@ -20,6 +20,10 @@ import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {useLayout} from 'customization-api';
 import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
+import {
+  videoRoomScreenshareOverlayText,
+  videoRoomScreenshareStopSharingBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
 /**
  *
  * @param uid - uid of the user
@@ -28,13 +32,14 @@ import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
  *
  */
 function ScreenShareNotice({uid, isMax}: {uid: UidType; isMax: boolean}) {
-  //commented for v1 release
-  // const screensharingActiveOverlayLabel = useString(
-  //   'screensharingActiveOverlayLabel',
-  // )();
+  const screensharingActiveOverlayLabel = useString(
+    videoRoomScreenshareOverlayText,
+  )();
+  const stopsharingbtnText = useString(
+    videoRoomScreenshareStopSharingBtnText,
+  )();
   const {currentLayout} = useLayout();
   const {stopUserScreenShare} = useScreenshare();
-  const screensharingActiveOverlayLabel = 'You are sharing your screen';
   const {rtcProps} = useContext(PropsContext);
   return uid === rtcProps?.screenShareUid ? (
     <View style={styles.screenSharingMessageContainer}>
@@ -61,7 +66,7 @@ function ScreenShareNotice({uid, isMax}: {uid: UidType; isMax: boolean}) {
             />
           </View>
           <View style={styles.btnTextContainer}>
-            <Text style={styles.btnText}>Stop Sharing</Text>
+            <Text style={styles.btnText}>{stopsharingbtnText}</Text>
           </View>
         </TouchableOpacity>
       )}

package/template/src/subComponents/SelectDevice.tsx

@@ -13,7 +13,7 @@ import React, {useContext, useEffect, useState, useMemo} from 'react';
 import {StyleSheet, View, Text} from 'react-native';
 import {
   PropsContext,
-  ClientRole,
+  ClientRoleType,
   LocalContext,
   PermissionState,
   LocalUserContext,
@@ -27,6 +27,20 @@ import {usePreCall} from '../components/precall/usePreCall';
 import ThemeConfig from '../theme';
 import {randomNameGenerator} from '../utils';
 import pendingStateUpdateHelper from '../utils/pendingStateUpdateHelper';
+import InlineNotification from '../atoms/InlineNotification';
+import {
+  settingsPanelCameraLabel,
+  settingsPanelLiveStreamingAttendeeInfo,
+  settingsPanelMicrophoneLabel,
+  settingsPanelNoCameraDetectedText,
+  settingsPanelNoCameraSelectedText,
+  settingsPanelNoMicrophoneDetectedText,
+  settingsPanelNoMicrophoneSelectedText,
+  settingsPanelNoSpeakerDetectedText,
+  settingsPanelSpeakerLabel,
+  settingsPanelSystemDefaultSpeakerText,
+  settingsPanelUpdatingText,
+} from '../language/default-labels/precallScreenLabels';
 // import {dropdown} from '../../theme.json';
 
 /*
@@ -54,7 +68,10 @@ const useSelectDevice = (): [boolean, string] => {
   const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role === ClientRoleType.ClientRoleAudience
+    ) {
       setPickerDisabled(true);
       setBtnTheme('rgba(16, 16, 16, 0.3)');
     } else {
@@ -85,7 +102,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
 
   const data = useMemo(() => {
     return deviceList
-      .filter((device) => {
+      .filter(device => {
         if (device.kind === 'videoinput') {
           return true;
         }
@@ -102,7 +119,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
 
   useEffect(() => {
     const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedCam),
+      data.find(device => device.value === selectedCam),
     );
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
@@ -114,11 +131,16 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
   const isPermissionGranted =
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
+
+  const cameraLabel = useString(settingsPanelCameraLabel)();
+  const noCameraLabel = useString(settingsPanelNoCameraDetectedText)();
+  const noCameraSelectedLabel = useString(settingsPanelNoCameraSelectedText)();
+  const updateLabel = useString(settingsPanelUpdatingText)();
   return props?.render ? (
     props.render(selectedCam, setSelectedCam, deviceList, isPickerDisabled)
   ) : (
     <>
-      <Text style={style.label}>Camera</Text>
+      <Text style={style.label}>{cameraLabel}</Text>
       <Dropdown
         icon={
           isPendingUpdate && isPermissionGranted
@@ -130,10 +152,10 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
         enabled={!isPickerDisabled}
         label={
           !isPermissionGranted || !data || !data.length
-            ? 'No Camera Detected'
+            ? noCameraLabel
             : isPendingUpdate
-            ? 'Updating'
-            : 'No Camera Selected'
+            ? updateLabel
+            : noCameraSelectedLabel
         }
         data={isPermissionGranted ? data : []}
         onSelect={({label, value}) => {
@@ -172,7 +194,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
 
   const data = useMemo(() => {
     return deviceList
-      .filter((device) => {
+      .filter(device => {
         if (device.kind === 'audioinput') {
           return true;
         }
@@ -189,7 +211,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
 
   useEffect(() => {
     const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedMic),
+      data.find(device => device.value === selectedMic),
     );
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
@@ -201,11 +223,20 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
   const isPermissionGranted =
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
     local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY;
+
+  const microphoneLabel = useString(settingsPanelMicrophoneLabel)();
+  const noMicrophoneDetectedLabel = useString(
+    settingsPanelNoMicrophoneDetectedText,
+  )();
+  const updateLabel = useString(settingsPanelUpdatingText)();
+  const noMicrophoneSelectedLabel = useString(
+    settingsPanelNoMicrophoneSelectedText,
+  )();
   return props?.render ? (
     props.render(selectedMic, setSelectedMic, deviceList, isPickerDisabled)
   ) : (
     <View>
-      <Text style={style.label}>Microphone</Text>
+      <Text style={style.label}>{microphoneLabel}</Text>
       <Dropdown
         icon={
           isPendingUpdate && isPermissionGranted
@@ -218,10 +249,10 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
         selectedValue={selectedMic}
         label={
           !isPermissionGranted || !data || !data.length
-            ? 'No Microphone Detected'
+            ? noMicrophoneDetectedLabel
             : isPendingUpdate
-            ? 'Updating'
-            : 'No Microphone Selected'
+            ? updateLabel
+            : noMicrophoneSelectedLabel
         }
         data={isPermissionGranted ? data : []}
         onSelect={({label, value}) => {
@@ -251,7 +282,7 @@ interface SelectSpeakerDeviceProps {
 }
 
 const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
-  const {selectedSpeaker, setSelectedSpeaker, deviceList} =
+  const {selectedSpeaker, setSelectedSpeaker, deviceList, isChrome} =
     useContext(DeviceContext);
   const local = useContext(LocalContext);
   const [isPickerDisabled, btnTheme] = useSelectDevice();
@@ -261,12 +292,12 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
 
   const data = useMemo(() => {
     return deviceList
-      .filter((device) => {
+      .filter(device => {
         if (device.kind === 'audiooutput') {
           return true;
         }
       })
-      ?.map((device) => {
+      ?.map(device => {
         if (device.kind === 'audiooutput') {
           return {
             label: applyDefaultPrefixConditionally(device),
@@ -278,7 +309,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
 
   useEffect(() => {
     const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedSpeaker),
+      data.find(device => device.value === selectedSpeaker),
     );
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
@@ -287,6 +318,12 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
     }
   }, [selectedSpeaker, data]);
 
+  const speakerLabel = useString(settingsPanelSpeakerLabel)();
+  const speakerDefaultLabel = useString(
+    settingsPanelSystemDefaultSpeakerText,
+  )();
+  const noSpeakerLabel = useString(settingsPanelNoSpeakerDetectedText)();
+  const updateLabel = useString(settingsPanelUpdatingText)();
   return props?.render ? (
     props.render(
       selectedSpeaker,
@@ -296,10 +333,10 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
     )
   ) : (
     <View>
-      <Text style={style.label}>Speaker</Text>
+      <Text style={style.label}>{speakerLabel}</Text>
       {(local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
         local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY) &&
-      (!data || data.length === 0) ? (
+      (!isChrome || !data || data.length === 0) ? (
         <Dropdown
           icon={props?.isIconDropdown ? 'speaker' : undefined}
           enabled={!isPickerDisabled}
@@ -308,7 +345,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
           data={[
             {
               value: newRandomDeviceId,
-              label: 'System Default Speaker Device',
+              label: speakerDefaultLabel,
             },
           ]}
           onSelect={({label, value}) => {
@@ -336,9 +373,9 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
           selectedValue={selectedSpeaker}
           label={
             !data || !data.length
-              ? 'No Speaker Detected'
+              ? noSpeakerLabel
               : isPendingUpdate
-              ? 'Updating'
+              ? updateLabel
               : ''
           }
           data={data}
@@ -354,6 +391,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
 
 interface SelectDeviceProps {
   isIconDropdown?: boolean;
+  isOnPrecall?: boolean;
 }
 
 const SelectDevice = (props: SelectDeviceProps) => {
@@ -361,7 +399,7 @@ const SelectDevice = (props: SelectDeviceProps) => {
   const {deviceList} = useContext(DeviceContext);
   const {setCameraAvailable, setMicAvailable, setSpeakerAvailable} =
     usePreCall();
-
+  const {isOnPrecall} = props;
   const [audioDevices, videoDevices, speakerDevices] = useMemo(
     () =>
       deviceList.reduce(
@@ -418,22 +456,53 @@ const SelectDevice = (props: SelectDeviceProps) => {
     }
   }, [speakerDevices]);
 
-  //commented for v1 release
-  // const settingScreenInfoMessage = useString('settingScreenInfoMessage')();
-  // const settingScreenInfoMessage = $config.AUDIO_ROOM
-  //   ? 'Audio sharing is disabled for attendees. Raise hand to request permission to share.'
-  //   : 'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.';
-  const settingScreenInfoMessage =
-    'Attendees need to raise their hand to access the devices.';
+  const settingScreenInfoMessage = useString(
+    settingsPanelLiveStreamingAttendeeInfo,
+  )();
+  if (isOnPrecall) {
+    return (
+      <>
+        <>
+          {$config.EVENT_MODE && isPickerDisabled && (
+            <>
+              <Spacer size={24} />
+              <InlineNotification
+                text={settingScreenInfoMessage}
+                warning={true}
+                customStyle={{
+                  backgroundColor: 'rgba(255, 171, 0, 0.15)',
+                }}
+              />
+            </>
+          )}
+          <Spacer size={24} />
+          <SelectAudioDevice {...props} />
+          <Spacer size={24} />
+          <SelectSpeakerDevice {...props} />
+          <Spacer size={24} />
+          {!$config.AUDIO_ROOM && (
+            <>
+              <SelectVideoDevice {...props} />
+              <Spacer size={8} />
+            </>
+          )}
+        </>
+      </>
+    );
+  }
   return (
     <>
       <>
         {$config.EVENT_MODE && isPickerDisabled && (
           <>
             <Spacer size={24} />
-            <View style={style.infoTxtContainer}>
-              <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
-            </View>
+            <InlineNotification
+              text={settingScreenInfoMessage}
+              warning={true}
+              customStyle={{
+                backgroundColor: 'rgba(255, 171, 0, 0.15)',
+              }}
+            />
           </>
         )}
         <Spacer size={24} />

package/template/src/subComponents/SelectDeviceSettings.backup.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext, useEffect} from 'react';
 import {StyleSheet, View, Text} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import DeviceContext from '../components/DeviceContext';
 import ColorContext from '../components/ColorContext';
 import {useString} from '../utils/useString';
@@ -30,7 +30,10 @@ const useSelectDevice = (): [boolean, string] => {
   const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
   const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
   React.useEffect(() => {
-    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role === ClientRoleType.ClientRoleAudience
+    ) {
       setPickerDisabled(true);
       setBtnTheme('rgba(16, 16, 16, 0.3)');
     } else {
@@ -60,7 +63,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
         return true;
       }
     })
-    ?.map((device) => {
+    ?.map(device => {
       return {
         label: device.label,
         value: device.deviceId,
@@ -102,7 +105,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
   const [isFocussed, setIsFocussed] = React.useState(false);
 
   const data = deviceList
-    .filter((device) => {
+    .filter(device => {
       if (device.kind === 'audioinput') {
         return true;
       }
@@ -140,12 +143,12 @@ const SelectDeviceSettings = () => {
   const {deviceList} = useContext(DeviceContext);
   const {setCameraAvailable, setMicAvailable} = usePreCall();
 
-  const audioDevices = deviceList.filter((device) => {
+  const audioDevices = deviceList.filter(device => {
     if (device.kind === 'audioinput') {
       return true;
     }
   });
-  const videoDevices = deviceList.filter((device) => {
+  const videoDevices = deviceList.filter(device => {
     if (device.kind === 'videoinput') {
       return true;
     }

package/template/src/subComponents/SidePanelButtons.ts

@@ -1,4 +1,3 @@
-import {ChatSendButton, ChatSendButtonProps} from './ChatInput';
 import {
   RemoteLiveStreamApprovedRequestRecall,
   RemoteLiveStreamRequestApprove,
@@ -23,7 +22,6 @@ type SidePanelButtonsArrayProps = [
   (props: RemoteLiveStreamApprovedRequestRecallProps) => JSX.Element,
   (props: RemoteLiveStreamControlProps) => JSX.Element,
   (props: RemoteLiveStreamControlProps) => JSX.Element,
-  (props: ChatSendButtonProps) => JSX.Element,
   (props: MuteAllAudioButtonProps) => JSX.Element,
   (props: MuteAllVideoButtonProps) => JSX.Element,
 ];
@@ -34,7 +32,6 @@ export const SidePanelButtonsArray: SidePanelButtonsArrayProps = [
   RemoteLiveStreamApprovedRequestRecall,
   RemoteLiveStreamRequestApprove,
   RemoteLiveStreamRequestReject,
-  ChatSendButton,
   MuteAllAudioButton,
   MuteAllVideoButton,
 ];

package/template/src/subComponents/SidePanelEnum.tsx

@@ -14,4 +14,6 @@ export enum SidePanelType {
   Participants,
   Chat,
   Settings,
+  Transcript,
+  VirtualBackground,
 }