agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/SelectDevice.tsx

@@ -9,40 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect, useState, useMemo} from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import {
-  PropsContext,
-  ClientRole,
-  LocalContext,
-  PermissionState,
-  LocalUserContext,
-} from '../../agora-rn-uikit';
+import React, {useContext} from 'react';
+import {Picker, StyleSheet, View, Text} from 'react-native';
+import {PropsContext, ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from '../components/DeviceContext';
 import ColorContext from '../components/ColorContext';
 import {useString} from '../utils/useString';
-import Spacer from '../atoms/Spacer';
-import Dropdown from '../atoms/Dropdown';
-import {usePreCall} from '../components/precall/usePreCall';
-import ThemeConfig from '../theme';
-import {randomNameGenerator} from '../utils';
-import pendingStateUpdateHelper from '../utils/pendingStateUpdateHelper';
 // import {dropdown} from '../../theme.json';
-
-/*
- * Chrome sometimes doesn't apply the "Default" prefix hence
- * Checks if the deviceId is default and adds "Default - " to label
- * string if not already present to differentiate from actual
- * device entry.
- */
-const applyDefaultPrefixConditionally = (device: MediaDeviceInfo) => {
-  const {label, deviceId} = device;
-  if (deviceId === 'default') {
-    return label.includes('Default') ? label : 'Default - ' + label;
-  }
-  return label;
-};
-
 /**
  * A component to diplay a dropdown and select a device.
  * It will add the selected device to the device context.
@@ -52,7 +25,6 @@ const useSelectDevice = (): [boolean, string] => {
   const {primaryColor} = useContext(ColorContext);
   const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
   const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
-
   React.useEffect(() => {
     if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
       setPickerDisabled(true);
@@ -62,7 +34,6 @@ const useSelectDevice = (): [boolean, string] => {
       setBtnTheme(primaryColor);
     }
   }, [rtcProps?.role]);
-
   return [isPickerDisabled, btnTheme];
 };
 
@@ -73,83 +44,31 @@ interface SelectVideoDeviceProps {
     deviceList: MediaDeviceInfo[],
     isDisabled: boolean,
   ) => JSX.Element;
-  isIconDropdown?: boolean;
 }
 
 const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
   const {selectedCam, setSelectedCam, deviceList} = useContext(DeviceContext);
   const [isPickerDisabled, btnTheme] = useSelectDevice();
-  const [isFocussed, setIsFocussed] = React.useState(false);
-  const [isPendingUpdate, setIsPendingUpdate] = useState(isPickerDisabled);
-  const local = useContext(LocalContext);
-
-  const data = useMemo(() => {
-    return deviceList
-      .filter((device) => {
-        if (device.kind === 'videoinput') {
-          return true;
-        }
-      })
-      ?.map((device: any) => {
-        if (device.kind === 'videoinput') {
-          return {
-            label: device.label,
-            value: device.deviceId,
-          };
-        }
-      });
-  }, [deviceList]);
-
-  useEffect(() => {
-    const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedCam),
-    );
-    if (isPendingUpdate) {
-      selectedDeviceExists && setIsPendingUpdate(false);
-    } else {
-      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
-    }
-  }, [selectedCam, data]);
-
-  const isPermissionGranted =
-    local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
-    local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
   return props?.render ? (
     props.render(selectedCam, setSelectedCam, deviceList, isPickerDisabled)
   ) : (
-    <>
-      <Text style={style.label}>Camera</Text>
-      <Dropdown
-        icon={
-          isPendingUpdate && isPermissionGranted
-            ? 'connection-loading'
-            : props?.isIconDropdown
-            ? 'video-on'
-            : undefined
-        }
-        enabled={!isPickerDisabled}
-        label={
-          !isPermissionGranted || !data || !data.length
-            ? 'No Camera Detected'
-            : isPendingUpdate
-            ? 'Updating'
-            : 'No Camera Selected'
+    <Picker
+      enabled={!isPickerDisabled}
+      selectedValue={selectedCam}
+      style={[{borderColor: btnTheme}, style.popupPicker]}
+      onValueChange={(itemValue) => setSelectedCam(itemValue)}>
+      {deviceList.map((device: any) => {
+        if (device.kind === 'videoinput') {
+          return (
+            <Picker.Item
+              label={device.label}
+              value={device.deviceId}
+              key={device.deviceId}
+            />
+          );
         }
-        data={isPermissionGranted ? data : []}
-        onSelect={({label, value}) => {
-          setIsFocussed(true);
-          try {
-            pendingStateUpdateHelper(
-              async () => await setSelectedCam(value),
-              setIsPendingUpdate,
-            );
-          } catch (e) {
-            setIsPendingUpdate(false);
-          }
-        }}
-        selectedValue={selectedCam}
-      />
-    </>
+      })}
+    </Picker>
   );
 };
 
@@ -160,337 +79,75 @@ interface SelectAudioDeviceProps {
     deviceList: MediaDeviceInfo[],
     isDisabled: boolean,
   ) => JSX.Element;
-  isIconDropdown?: boolean;
 }
 
 const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
   const {selectedMic, setSelectedMic, deviceList} = useContext(DeviceContext);
   const [isPickerDisabled, btnTheme] = useSelectDevice();
-  const [isFocussed, setIsFocussed] = useState(false);
-  const local = useContext(LocalContext);
-  const [isPendingUpdate, setIsPendingUpdate] = useState(isPickerDisabled);
-
-  const data = useMemo(() => {
-    return deviceList
-      .filter((device) => {
-        if (device.kind === 'audioinput') {
-          return true;
-        }
-      })
-      ?.map((device: any) => {
-        if (device.kind === 'audioinput') {
-          return {
-            label: applyDefaultPrefixConditionally(device),
-            value: device.deviceId,
-          };
-        }
-      });
-  }, [deviceList]);
-
-  useEffect(() => {
-    const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedMic),
-    );
-    if (isPendingUpdate) {
-      selectedDeviceExists && setIsPendingUpdate(false);
-    } else {
-      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
-    }
-  }, [selectedMic, data]);
-
-  const isPermissionGranted =
-    local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
-    local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY;
   return props?.render ? (
     props.render(selectedMic, setSelectedMic, deviceList, isPickerDisabled)
   ) : (
-    <View>
-      <Text style={style.label}>Microphone</Text>
-      <Dropdown
-        icon={
-          isPendingUpdate && isPermissionGranted
-            ? 'connection-loading'
-            : props?.isIconDropdown
-            ? 'mic-on'
-            : undefined
-        }
-        enabled={!isPickerDisabled && !isPendingUpdate}
-        selectedValue={selectedMic}
-        label={
-          !isPermissionGranted || !data || !data.length
-            ? 'No Microphone Detected'
-            : isPendingUpdate
-            ? 'Updating'
-            : 'No Microphone Selected'
-        }
-        data={isPermissionGranted ? data : []}
-        onSelect={({label, value}) => {
-          setIsFocussed(true);
-          try {
-            pendingStateUpdateHelper(
-              async () => await setSelectedMic(value),
-              setIsPendingUpdate,
-            );
-          } catch (e) {
-            setIsPendingUpdate(false);
-          }
-        }}
-      />
-    </View>
-  );
-};
-
-interface SelectSpeakerDeviceProps {
-  render?: (
-    selectedSpeaker: string,
-    setSelectedSpeaker: (speaker: string) => void,
-    deviceList: MediaDeviceInfo[],
-    isDisabled: boolean,
-  ) => JSX.Element;
-  isIconDropdown?: boolean;
-}
-
-const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
-  const {selectedSpeaker, setSelectedSpeaker, deviceList} =
-    useContext(DeviceContext);
-  const local = useContext(LocalContext);
-  const [isPickerDisabled, btnTheme] = useSelectDevice();
-  const [isFocussed, setIsFocussed] = React.useState(false);
-  const [isPendingUpdate, setIsPendingUpdate] = useState(isPickerDisabled);
-  const newRandomDeviceId = randomNameGenerator(64).toUpperCase();
-
-  const data = useMemo(() => {
-    return deviceList
-      .filter((device) => {
-        if (device.kind === 'audiooutput') {
-          return true;
-        }
-      })
-      ?.map((device) => {
-        if (device.kind === 'audiooutput') {
-          return {
-            label: applyDefaultPrefixConditionally(device),
-            value: device.deviceId,
-          };
+    <Picker
+      enabled={!isPickerDisabled}
+      selectedValue={selectedMic}
+      style={[{borderColor: btnTheme}, style.popupPicker]}
+      onValueChange={(itemValue) => setSelectedMic(itemValue)}>
+      {deviceList.map((device: any) => {
+        if (device.kind === 'audioinput') {
+          return (
+            <Picker.Item
+              label={device.label}
+              value={device.deviceId}
+              key={device.deviceId}
+            />
+          );
         }
-      });
-  }, [deviceList]);
-
-  useEffect(() => {
-    const selectedDeviceExists = Boolean(
-      data.find((device) => device.value === selectedSpeaker),
-    );
-    if (isPendingUpdate) {
-      selectedDeviceExists && setIsPendingUpdate(false);
-    } else {
-      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
-    }
-  }, [selectedSpeaker, data]);
-
-  return props?.render ? (
-    props.render(
-      selectedSpeaker,
-      setSelectedSpeaker,
-      deviceList,
-      isPickerDisabled,
-    )
-  ) : (
-    <View>
-      <Text style={style.label}>Speaker</Text>
-      {(local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
-        local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY) &&
-      (!data || data.length === 0) ? (
-        <Dropdown
-          icon={props?.isIconDropdown ? 'speaker' : undefined}
-          enabled={!isPickerDisabled}
-          selectedValue={newRandomDeviceId}
-          label={''}
-          data={[
-            {
-              value: newRandomDeviceId,
-              label: 'System Default Speaker Device',
-            },
-          ]}
-          onSelect={({label, value}) => {
-            setIsFocussed(true);
-            try {
-              pendingStateUpdateHelper(
-                async () => await setSelectedSpeaker(value),
-                setIsPendingUpdate,
-              );
-            } catch (e) {
-              setIsPendingUpdate(false);
-            }
-          }}
-        />
-      ) : (
-        <Dropdown
-          icon={
-            isPendingUpdate
-              ? 'connection-loading'
-              : props?.isIconDropdown
-              ? 'speaker'
-              : undefined
-          }
-          enabled={data && data.length && !isPendingUpdate}
-          selectedValue={selectedSpeaker}
-          label={
-            !data || !data.length
-              ? 'No Speaker Detected'
-              : isPendingUpdate
-              ? 'Updating'
-              : ''
-          }
-          data={data}
-          onSelect={({label, value}) => {
-            setIsFocussed(true);
-            setSelectedSpeaker(value);
-          }}
-        />
-      )}
-    </View>
+      })}
+    </Picker>
   );
 };
 
-interface SelectDeviceProps {
-  isIconDropdown?: boolean;
-}
-
-const SelectDevice = (props: SelectDeviceProps) => {
+const SelectDevice = () => {
   const [isPickerDisabled] = useSelectDevice();
-  const {deviceList} = useContext(DeviceContext);
-  const {setCameraAvailable, setMicAvailable, setSpeakerAvailable} =
-    usePreCall();
-
-  const [audioDevices, videoDevices, speakerDevices] = useMemo(
-    () =>
-      deviceList.reduce(
-        (prev, device) => {
-          const [audioDevices, videoDevices, speakerDevices] = prev;
-          if (device.kind === 'audioinput') {
-            audioDevices.push(device);
-          } else if (device.kind === 'videoinput') {
-            videoDevices.push(device);
-          } else if (device.kind === 'audiooutput') {
-            speakerDevices.push(device);
-          }
-
-          return [audioDevices, videoDevices, speakerDevices];
-        },
-        [[], [], []] as any,
-      ),
-    [deviceList],
-  );
-
-  // const audioDevices =
-  //     deviceList.filter((device) => {
-  //       if (device.kind === 'audioinput') {
-  //         return true;
-  //       }
-  //    });
-  //
-  // const videoDevices = deviceList.filter((device) => {
-  //   if (device.kind === 'videoinput') {
-  //     return true;
-  //   }
-  // });
-  // const speakerDevices = deviceList.filter((device) => {
-  //   if (device.kind === 'audiooutput') {
-  //     return true;
-  //   }
-  // });
-
-  useEffect(() => {
-    if (audioDevices && audioDevices.length) {
-      setMicAvailable(true);
-    }
-  }, [audioDevices]);
-
-  useEffect(() => {
-    if (videoDevices && videoDevices.length) {
-      setCameraAvailable(true);
-    }
-  }, [videoDevices]);
-
-  useEffect(() => {
-    if (speakerDevices && speakerDevices.length) {
-      setSpeakerAvailable(true);
-    }
-  }, [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 = $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.';
   return (
-    <>
-      <>
-        {$config.EVENT_MODE && isPickerDisabled && (
-          <>
-            <Spacer size={24} />
-            <View style={style.infoTxtContainer}>
-              <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
-            </View>
-          </>
-        )}
-        <Spacer size={24} />
-        {!$config.AUDIO_ROOM && (
-          <>
-            <SelectVideoDevice {...props} />
-            <Spacer size={24} />
-          </>
-        )}
-        <SelectAudioDevice {...props} />
-        <Spacer size={24} />
-        <SelectSpeakerDevice {...props} />
-        <Spacer size={24} />
-      </>
-    </>
+    <View>
+      <View style={{marginTop: 15}}></View>
+      <View>
+        {!$config.AUDIO_ROOM && <SelectVideoDevice />}
+        <SelectAudioDevice />
+      </View>
+      <View style={{marginTop: 15}}></View>
+      {$config.EVENT_MODE && isPickerDisabled && (
+        <View>
+          <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
+        </View>
+      )}
+    </View>
   );
 };
 export const SelectDeviceComponentsArray: [
   (props: SelectVideoDeviceProps) => JSX.Element,
   (props: SelectAudioDeviceProps) => JSX.Element,
-  (props: SelectSpeakerDeviceProps) => JSX.Element,
-] = [SelectVideoDevice, SelectAudioDevice, SelectSpeakerDevice];
+] = [SelectVideoDevice, SelectAudioDevice];
 
 const style = StyleSheet.create({
   popupPicker: {
-    // height: 30,
-    borderRadius: 12,
+    height: 30,
+    marginBottom: 10,
+    borderRadius: 50,
     paddingHorizontal: 15,
-    paddingVertical: 20,
-    fontSize: 14,
-    fontFamily: 'Source Sans Pro',
-  },
-  pickerItem: {
-    paddingLeft: 12,
-    paddingVertical: 24,
-    marginHorizontal: 8,
-    marginVertical: 20,
-    backgroundColor: '#FFFFFF',
-  },
-  infoTxtContainer: {
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 4,
+    fontSize: 15,
+    minHeight: 35,
   },
   infoTxt: {
-    textAlign: 'left',
-    fontSize: 16,
-    color: $config.FONT_COLOR,
-    fontFamily: 'Source Sans Pro',
-    fontWeight: '400',
-    padding: 12,
-  },
-  label: {
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    marginBottom: 12,
+    textAlign: 'center',
+    fontSize: 12,
+    color: '#FF0000',
   },
 });
 

package/template/src/subComponents/SelectOAuth.tsx

@@ -23,7 +23,6 @@ import microsoft from '../assets/microsoft.png';
 import Logo from './Logo';
 import {useHasBrandLogo} from '../utils/common';
 import {useString} from '../utils/useString';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 const SelectOAuth = ({onSelectOAuth}) => {
   const hasBrandLogo = useHasBrandLogo();
@@ -54,7 +53,7 @@ const SelectOAuth = ({onSelectOAuth}) => {
                   fontSize: 16,
                   fontWeight: '500',
                   marginBottom: 20,
-                  color: $config.FONT_COLOR,
+                  color: $config.PRIMARY_FONT_COLOR,
                 }}>
                 {oauthLoginLabel}
               </Text>
@@ -131,7 +130,7 @@ const style = StyleSheet.create({
   },
   secondaryBtn: {
     minWidth: 200,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderColor: $config.PRIMARY_COLOR,
     borderWidth: 1,
     display: 'flex',
     justifyContent: 'center',
@@ -139,7 +138,7 @@ const style = StyleSheet.create({
     alignItems: 'center',
     alignContent: 'space-around',
     // paddingTop: 20,
-    backgroundColor: $config.SECONDARY_ACTION_COLOR,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
     paddingHorizontal: 30,
     margin: 10,
     borderRadius: 100,
@@ -149,7 +148,7 @@ const style = StyleSheet.create({
     height: 45,
     lineHeight: 45,
     fontSize: 16,
-    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    color: $config.PRIMARY_COLOR,
     textAlign: 'center',
     fontWeight: '500',
     textAlignVertical: 'center',
@@ -188,14 +187,14 @@ const style = StyleSheet.create({
     fontSize: 32,
     fontWeight: '700',
     textAlign: 'center',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     marginBottom: 20,
   },
   headline: {
     fontSize: 18,
     fontWeight: '400',
     textAlign: 'center',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     marginBottom: 20,
   },
   inputs: {
@@ -220,14 +219,14 @@ const style = StyleSheet.create({
     // alignItems: 'flex-start',
   },
   checkboxTitle: {
-    color: $config.FONT_COLOR + hexadecimalTransparency['80%'],
+    color: $config.PRIMARY_FONT_COLOR + 80,
     paddingHorizontal: 5,
     alignSelf: 'center',
     // marginVertical: 'auto',
     // fontWeight: '700',
   },
   checkboxCaption: {
-    color: $config.FONT_COLOR + hexadecimalTransparency['80%'],
+    color: $config.PRIMARY_FONT_COLOR + 80,
     paddingHorizontal: 5,
   },
   checkboxTextHolder: {