agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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

@@ -0,0 +1,207 @@
+/*
+********************************************
+ 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, 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 {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 === ClientRole.Audience) {
+      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/SidePanelHeader.tsx

@@ -0,0 +1,112 @@
+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';
+
+export interface SidePanelHeaderProps {
+  centerComponent?: React.ReactNode;
+  leadingIconName?: keyof IconsInterface;
+  leadingIconOnPress?: () => void;
+  trailingIconName?: keyof IconsInterface;
+  trailingIconOnPress?: () => void;
+  isChat?: boolean;
+}
+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();
+            }}
+          />
+        </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>
+  );
+};
+
+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',
+  },
+});
+export default SidePanelHeader;

package/template/src/subComponents/ToastConfig.tsx

@@ -11,9 +11,37 @@
 */
 // @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={{alignSelf: 'flex-end'}}>
+    <View style={{width: 26, height: 26}}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={$config.SECONDARY_ACTION_COLOR}
+        name="close"
+        iconSize={26}
+      />
+    </View>
+  </TouchableOpacity>
+);
+
+const leadingIcon = (iconName: keyof IconsInterface, color: string) => {
+  return (
+    <View style={{marginRight: 4, alignSelf: 'center', width: 26, height: 26}}>
+      <ImageIcon iconType="plain" tintColor={color} name={iconName} />
+    </View>
+  );
+};
 
 const ToastConfig = {
   /* 
@@ -24,22 +52,134 @@ const ToastConfig = {
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon('tick-fill', $config.SEMANTIC_SUCCESS)}
+      trailingIcon={trailingIcon}
       style={{
-        borderLeftColor: $config.PRIMARY_COLOR,
-        backgroundColor: $config.SECONDARY_FONT_COLOR,
-        width: !isMobileOrTablet() ? '40%' : '95%',
+        borderRadius: 4,
+        borderTopWidth: 6,
+        backgroundColor: $config.CARD_LAYER_4_COLOR,
+        //width: !isMobileOrTablet() ? '40%' : '95%',
+        width: '100%',
+        borderTopColor: $config.SEMANTIC_SUCCESS,
       }}
-      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}
+    />
+  ),
+  error: ({text1, text2, props, ...rest}) => (
+    <BaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon('alert', $config.SEMANTIC_ERROR)}
+      trailingIcon={trailingIcon}
+      style={{
+        borderRadius: 4,
+        borderTopWidth: 6,
+        backgroundColor: $config.CARD_LAYER_4_COLOR,
+        //width: !isMobileOrTablet() ? '40%' : '95%',
+        width: '100%',
+        borderTopColor: $config.SEMANTIC_ERROR,
       }}
+      contentContainerStyle={styles.contentContainerStyle}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
       text1={text1}
       text2={text2}
-      // text2={props.uuid}
+      primaryBtn={null}
+      secondaryBtn={null}
+    />
+  ),
+  info: ({text1, text2, props, primaryBtn, secondaryBtn, ...rest}) => (
+    <BaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      trailingIcon={trailingIcon}
+      style={{
+        height: 'auto', //primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
+        borderRadius: ThemeConfig.BorderRadius.small,
+        borderTopWidth: 6,
+        backgroundColor: $config.CARD_LAYER_4_COLOR,
+        width: '100%',
+        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+      }}
+      contentContainerStyle={styles.contentContainerStyle}
+      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,
+    ...rest
+  }) => (
+    <CheckBoxBaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      trailingIcon={trailingIcon}
+      style={{
+        height: primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
+        borderRadius: 4,
+        borderTopWidth: 6,
+        backgroundColor: $config.CARD_LAYER_4_COLOR,
+        width: '100%',
+        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+      }}
+      contentContainerStyle={styles.contentContainerStyle}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+      subTextStyle={styles.subTextStyle}
+      text1={text1}
+      text2={text2}
+      primaryBtn={primaryBtn ? primaryBtn : null}
+      secondaryBtn={secondaryBtn ? secondaryBtn : null}
+      checkbox={checkbox}
     />
   ),
 };
 
 export default ToastConfig;
+
+const styles = StyleSheet.create({
+  text1Style: {
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: 22,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    color: $config.FONT_COLOR,
+    alignSelf: 'center',
+  },
+  text2Style: {
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: 22,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    marginTop: 11,
+    alignSelf: 'center',
+  },
+  subTextStyle: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+  },
+  contentContainerStyle: {
+    paddingHorizontal: 15,
+    paddingTop: 20,
+    paddingBottom: 25,
+    overflow: 'hidden',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+  },
+  containerStyle: {},
+});