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

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

@@ -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';
 
 /*
@@ -85,7 +99,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
 
   const data = useMemo(() => {
     return deviceList
-      .filter((device) => {
+      .filter(device => {
         if (device.kind === 'videoinput') {
           return true;
         }
@@ -102,7 +116,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 +128,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 +149,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 +191,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
 
   const data = useMemo(() => {
     return deviceList
-      .filter((device) => {
+      .filter(device => {
         if (device.kind === 'audioinput') {
           return true;
         }
@@ -189,7 +208,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 +220,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 +246,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 +279,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 +289,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 +306,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 +315,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 +330,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 +342,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
           data={[
             {
               value: newRandomDeviceId,
-              label: 'System Default Speaker Device',
+              label: speakerDefaultLabel,
             },
           ]}
           onSelect={({label, value}) => {
@@ -336,9 +370,9 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
           selectedValue={selectedSpeaker}
           label={
             !data || !data.length
-              ? 'No Speaker Detected'
+              ? noSpeakerLabel
               : isPendingUpdate
-              ? 'Updating'
+              ? updateLabel
               : ''
           }
           data={data}
@@ -354,6 +388,7 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
 
 interface SelectDeviceProps {
   isIconDropdown?: boolean;
+  isOnPrecall?: boolean;
 }
 
 const SelectDevice = (props: SelectDeviceProps) => {
@@ -361,7 +396,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 +453,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/SidePanelEnum.tsx

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

package/template/src/subComponents/SidePanelHeader.tsx

@@ -4,6 +4,7 @@ import IconButton from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {IconsInterface} from '../atoms/CustomIcon';
 import {isWebInternal} from '../utils/common';
+import styles from 'react-native-toast-message/src/styles';
 
 export interface SidePanelHeaderProps {
   centerComponent?: React.ReactNode;
@@ -11,72 +12,99 @@ export interface SidePanelHeaderProps {
   leadingIconOnPress?: () => void;
   trailingIconName?: keyof IconsInterface;
   trailingIconOnPress?: () => void;
+  trailingIconName2?: keyof IconsInterface;
+  trailingIconOnPress2?: () => void;
   isChat?: boolean;
+  children?: React.ReactNode;
 }
-const SidePanelHeader = (props: SidePanelHeaderProps) => {
-  const {isChat = false} = props;
-  return (
-    <View
-      style={[
-        SidePanelStyles.sidePanelHeader,
-        isChat ? SidePanelStyles.chatPadding : {},
-      ]}>
-      {props?.leadingIconName ? (
-        <View>
-          <IconButton
-            hoverEffect={true}
-            hoverEffectStyle={{
-              backgroundColor: $config.ICON_BG_COLOR,
-              borderRadius: 20,
-            }}
-            iconProps={{
-              iconType: 'plain',
-              iconContainerStyle: {
-                padding: 5,
-              },
-              iconSize: 20,
-              name: props.leadingIconName,
-              tintColor: $config.SECONDARY_ACTION_COLOR,
-            }}
-            onPress={() => {
-              props?.leadingIconOnPress && props.leadingIconOnPress();
-            }}
-          />
+const SidePanelHeader = React.forwardRef<View, SidePanelHeaderProps>(
+  (props: SidePanelHeaderProps, ref) => {
+    const {isChat = false, children = <></>} = props;
+    return (
+      <>
+        <View
+          style={[
+            SidePanelStyles.sidePanelHeader,
+            isChat ? SidePanelStyles.chatPadding : {},
+          ]}>
+          {props?.leadingIconName ? (
+            <View>
+              <IconButton
+                hoverEffect={true}
+                hoverEffectStyle={{
+                  backgroundColor: $config.ICON_BG_COLOR,
+                  borderRadius: 20,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: 5,
+                  },
+                  iconSize: 20,
+                  name: props.leadingIconName,
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                }}
+                onPress={() => {
+                  props?.leadingIconOnPress && props.leadingIconOnPress();
+                }}
+              />
+            </View>
+          ) : isChat ? (
+            <View style={{width: 30, height: 'auto'}}></View>
+          ) : null}
+          {props?.centerComponent ? props.centerComponent : null}
+          <View style={props?.trailingIconName2 && SidePanelStyles.row}>
+            {props?.trailingIconName ? (
+              <View ref={ref} collapsable={false} style={{flex: 1}}>
+                <IconButton
+                  hoverEffect={true}
+                  hoverEffectStyle={{
+                    backgroundColor: $config.ICON_BG_COLOR,
+                    borderRadius: 20,
+                  }}
+                  iconProps={{
+                    iconType: 'plain',
+                    iconContainerStyle: {
+                      padding: 5,
+                    },
+                    iconSize: 20,
+                    name: props?.trailingIconName,
+                    tintColor: $config.SECONDARY_ACTION_COLOR,
+                  }}
+                  onPress={() => {
+                    props?.trailingIconOnPress && props.trailingIconOnPress();
+                  }}
+                />
+              </View>
+            ) : null}
+            {props?.trailingIconName2 ? (
+              <IconButton
+                hoverEffect={true}
+                hoverEffectStyle={{
+                  backgroundColor: $config.ICON_BG_COLOR,
+                  borderRadius: 20,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: 5,
+                  },
+                  iconSize: 20,
+                  name: props?.trailingIconName2,
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                }}
+                onPress={() => {
+                  props?.trailingIconOnPress2 && props.trailingIconOnPress2();
+                }}
+              />
+            ) : null}
+          </View>
         </View>
-      ) : isChat ? (
-        <View style={{width: 30, height: 'auto'}}></View>
-      ) : (
-        <></>
-      )}
-      {props?.centerComponent ? props.centerComponent : <></>}
-      <View>
-        {props?.trailingIconName ? (
-          <IconButton
-            hoverEffect={true}
-            hoverEffectStyle={{
-              backgroundColor: $config.ICON_BG_COLOR,
-              borderRadius: 20,
-            }}
-            iconProps={{
-              iconType: 'plain',
-              iconContainerStyle: {
-                padding: 5,
-              },
-              iconSize: 20,
-              name: props?.trailingIconName,
-              tintColor: $config.SECONDARY_ACTION_COLOR,
-            }}
-            onPress={() => {
-              props?.trailingIconOnPress && props.trailingIconOnPress();
-            }}
-          />
-        ) : (
-          <></>
-        )}
-      </View>
-    </View>
-  );
-};
+        {children}
+      </>
+    );
+  },
+);
 
 export const SidePanelStyles = StyleSheet.create({
   sidePanelHeader: {
@@ -108,5 +136,11 @@ export const SidePanelStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 0.3,
+  },
 });
 export default SidePanelHeader;