agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -0,0 +1,210 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext, useEffect} from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+import {PropsContext, ClientRoleType} 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 {dropdown} from '../../theme.json';
+/**
+ * A component to diplay a dropdown and select a device.
+ * It will add the selected device to the device context.
+ */
+const useSelectDevice = (): [boolean, string] => {
+  const {rtcProps} = useContext(PropsContext);
+  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 === ClientRoleType.ClientRoleAudience
+    ) {
+      setPickerDisabled(true);
+      setBtnTheme('rgba(16, 16, 16, 0.3)');
+    } else {
+      setPickerDisabled(false);
+      setBtnTheme(primaryColor);
+    }
+  }, [rtcProps?.role]);
+  return [isPickerDisabled, btnTheme];
+};
+
+interface SelectVideoDeviceProps {
+  render?: (
+    selectedCam: string,
+    setSelectedCam: (cam: string) => void,
+    deviceList: MediaDeviceInfo[],
+    isDisabled: boolean,
+  ) => JSX.Element;
+}
+
+const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
+  const {selectedCam, setSelectedCam, deviceList} = useContext(DeviceContext);
+  const [isPickerDisabled, btnTheme] = useSelectDevice();
+  const [isFocussed, setIsFocussed] = React.useState(false);
+  const data = deviceList
+    .filter((device: any) => {
+      if (device.kind === 'videoinput') {
+        return true;
+      }
+    })
+    ?.map(device => {
+      return {
+        label: device.label,
+        value: device.deviceId,
+      };
+    });
+
+  return props?.render ? (
+    props.render(selectedCam, setSelectedCam, deviceList, isPickerDisabled)
+  ) : (
+    <>
+      <Text style={[style.label]}>Camera</Text>
+      <Dropdown
+        icon={'video-on'}
+        enabled={!isPickerDisabled}
+        label={!data || !data.length ? 'No Camera Detected' : ''}
+        data={data}
+        onSelect={({label, value}) => {
+          setIsFocussed(true);
+          setSelectedCam(value);
+        }}
+        selectedValue={selectedCam}
+      />
+    </>
+  );
+};
+
+interface SelectAudioDeviceProps {
+  render?: (
+    selectedMic: string,
+    setSelectedMic: (mic: string) => void,
+    deviceList: MediaDeviceInfo[],
+    isDisabled: boolean,
+  ) => JSX.Element;
+}
+
+const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
+  const {selectedMic, setSelectedMic, deviceList} = useContext(DeviceContext);
+  const [isPickerDisabled, btnTheme] = useSelectDevice();
+  const [isFocussed, setIsFocussed] = React.useState(false);
+
+  const data = deviceList
+    .filter(device => {
+      if (device.kind === 'audioinput') {
+        return true;
+      }
+    })
+    ?.map((device: any) => {
+      if (device.kind === 'audioinput') {
+        return {
+          label: device.label,
+          value: device.deviceId,
+        };
+      }
+    });
+  return props?.render ? (
+    props.render(selectedMic, setSelectedMic, deviceList, isPickerDisabled)
+  ) : (
+    <>
+      <Text style={[style.label]}>Microphone</Text>
+      <Dropdown
+        icon="mic-on"
+        enabled={!isPickerDisabled}
+        selectedValue={selectedMic}
+        label={!data || !data.length ? 'No Microphone Detected' : ''}
+        data={data}
+        onSelect={({label, value}) => {
+          setIsFocussed(true);
+          setSelectedMic(value);
+        }}
+      />
+    </>
+  );
+};
+
+const SelectDeviceSettings = () => {
+  const [isPickerDisabled] = useSelectDevice();
+  const {deviceList} = useContext(DeviceContext);
+  const {setCameraAvailable, setMicAvailable} = usePreCall();
+
+  const audioDevices = deviceList.filter(device => {
+    if (device.kind === 'audioinput') {
+      return true;
+    }
+  });
+  const videoDevices = deviceList.filter(device => {
+    if (device.kind === 'videoinput') {
+      return true;
+    }
+  });
+
+  useEffect(() => {
+    if (audioDevices && audioDevices.length) {
+      setMicAvailable(true);
+    }
+  }, [audioDevices]);
+
+  useEffect(() => {
+    if (videoDevices && videoDevices.length) {
+      setCameraAvailable(true);
+    }
+  }, [videoDevices]);
+
+  //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.';
+  return (
+    <View>
+      <View>
+        {!$config.AUDIO_ROOM && <SelectVideoDevice />}
+        <Spacer size={20} />
+        <SelectAudioDevice />
+      </View>
+      {$config.EVENT_MODE && isPickerDisabled && (
+        <View>
+          <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+export const SelectDeviceSettingsComponentsArray: [
+  (props: SelectVideoDeviceProps) => JSX.Element,
+  (props: SelectAudioDeviceProps) => JSX.Element,
+] = [SelectVideoDevice, SelectAudioDevice];
+
+const style = StyleSheet.create({
+  infoTxt: {
+    textAlign: 'center',
+    fontSize: 12,
+    color: '#FF0000',
+  },
+  label: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginBottom: 12,
+    lineHeight: ThemeConfig.FontSize.small,
+  },
+});
+
+export default SelectDeviceSettings;

package/template/src/subComponents/SelectOAuth.tsx

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

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

@@ -10,8 +10,10 @@
 *********************************************
 */
 export enum SidePanelType {
-  None,
-  Participants,
-  Chat,
-  Settings,
+  None = 'None',
+  Participants = 'Participants',
+  Chat = 'Chat',
+  Settings = 'Settings',
+  Transcript = 'Transcript',
+  VirtualBackground = 'VirtualBackground',
 }

package/template/src/subComponents/SidePanelHeader.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+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;
+  leadingIconName?: keyof IconsInterface;
+  leadingIconOnPress?: () => void;
+  trailingIconName?: keyof IconsInterface;
+  trailingIconOnPress?: () => void;
+  trailingIconName2?: keyof IconsInterface;
+  trailingIconOnPress2?: () => void;
+  isChat?: boolean;
+  children?: React.ReactNode;
+}
+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>
+        {children}
+      </>
+    );
+  },
+);
+
+export const SidePanelStyles = StyleSheet.create({
+  sidePanelHeader: {
+    height: isWebInternal() ? 60 : 'auto',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  chatPadding: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: 1.6 * ThemeConfig.FontSize.normal,
+    fontWeight: '600',
+    color: $config.FONT_COLOR,
+    alignSelf: 'center',
+  },
+  alignCenterNoPadding: {
+    padding: 0,
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 0.3,
+  },
+});
+export default SidePanelHeader;

package/template/src/subComponents/ToastConfig.tsx

@@ -11,35 +11,184 @@
 */
 // @ts-nocheck
 import React from 'react';
-import {Platform} from 'react-native';
+import {Platform, TouchableOpacity, View, StyleSheet} from 'react-native';
+import ThemeConfig from '../theme';
 import Toast, {BaseToast} from '../../react-native-toast-message';
+import CheckBoxBaseToast from '../../react-native-toast-message/src/components/checkbox';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
+import ImageIcon from '../atoms/ImageIcon';
+import {IconsInterface} from 'src/atoms/CustomIcon';
+import {autoUpdater} from 'electron';
+
+const trailingIcon = (
+  <TouchableOpacity onPress={() => Toast.hide()} style={{}}>
+    <ImageIcon
+      iconType="plain"
+      tintColor={$config.SECONDARY_ACTION_COLOR}
+      name="close"
+      iconSize={24}
+    />
+  </TouchableOpacity>
+);
+
+const leadingIcon = (iconName: keyof IconsInterface, color: string) => {
+  return (
+    <View style={{marginRight: 4, alignSelf: 'center'}}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={color}
+        name={iconName}
+        iconSize={20}
+      />
+    </View>
+  );
+};
+
+const warnIcon = () => {
+  return (
+    <View style={{marginRight: 4, alignSelf: 'center', width: 26, height: 26}}>
+      <ImageIcon base64={true} iconType="plain" name={'warning'} />
+    </View>
+  );
+};
 
 const ToastConfig = {
   /* 
       overwrite 'success' type, 
       modifying the existing `BaseToast` component
     */
-  success: ({text1, text2, props, ...rest}) => (
+  success: ({text1, text2, leadingIconName, props, ...rest}) => (
+    <BaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'tick-fill',
+        $config.SEMANTIC_SUCCESS,
+      )}
+      trailingIcon={trailingIcon}
+      style={{
+        borderTopColor: $config.SEMANTIC_SUCCESS,
+      }}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+      text1={text1}
+      text2={text2}
+      primaryBtn={null}
+      secondaryBtn={null}
+    />
+  ),
+  error: ({text1, text2, leadingIconName, props, ...rest}) => (
+    <BaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'alert',
+        $config.SEMANTIC_ERROR,
+      )}
+      trailingIcon={trailingIcon}
+      style={{
+        borderTopColor: $config.SEMANTIC_ERROR,
+      }}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+      text1={text1}
+      text2={text2}
+      primaryBtn={null}
+      secondaryBtn={null}
+    />
+  ),
+  warn: ({text1, text2, props, ...rest}) => (
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
+      leadingIcon={warnIcon()}
+      trailingIcon={trailingIcon}
       style={{
-        borderLeftColor: $config.PRIMARY_COLOR,
-        backgroundColor: $config.SECONDARY_FONT_COLOR,
-        width: !isMobileOrTablet() ? '40%' : '95%',
+        borderTopColor: '#FFAB00',
       }}
-      contentContainerStyle={{paddingHorizontal: 15, overflow: 'hidden'}}
-      text1Style={{
-        fontSize: 15,
-        fontWeight: '400',
-        color: $config.PRIMARY_FONT_COLOR,
+      contentContainerStyle={styles.contentContainerStyle}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+      text1={text1}
+      text2={text2}
+      primaryBtn={null}
+      secondaryBtn={null}
+    />
+  ),
+  info: ({
+    text1,
+    text2,
+    props,
+    primaryBtn,
+    leadingIconName,
+    secondaryBtn,
+    ...rest
+  }) => {
+    return (
+      <BaseToast
+        {...rest}
+        //BaseToast is modified to have zIndex: 100
+        leadingIcon={leadingIcon(
+          leadingIconName ? leadingIconName : 'info',
+          $config.FONT_COLOR,
+        )}
+        trailingIcon={trailingIcon}
+        style={{
+          borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+        }}
+        text1Style={styles.text1Style}
+        text2Style={styles.text2Style}
+        text1={text1}
+        text2={text2}
+        primaryBtn={primaryBtn ? primaryBtn : null}
+        secondaryBtn={secondaryBtn ? secondaryBtn : null}
+      />
+    );
+  },
+  checked: ({
+    text1,
+    text2,
+    props,
+    primaryBtn,
+    secondaryBtn,
+    checkbox,
+    leadingIconName,
+    ...rest
+  }) => (
+    <CheckBoxBaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'info',
+        $config.FONT_COLOR,
+      )}
+      trailingIcon={trailingIcon}
+      style={{
+        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
       }}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+      subTextStyle={styles.subTextStyle}
       text1={text1}
       text2={text2}
-      // text2={props.uuid}
+      primaryBtn={primaryBtn ? primaryBtn : null}
+      secondaryBtn={secondaryBtn ? secondaryBtn : null}
+      checkbox={checkbox}
     />
   ),
 };
 
 export default ToastConfig;
+
+const styles = StyleSheet.create({
+  text1Style: {
+    color: $config.FONT_COLOR,
+    alignSelf: 'center',
+  },
+  text2Style: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+  },
+  subTextStyle: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+  },
+});