agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/components/Settings.tsx

@@ -13,126 +13,62 @@ import React, {useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
 import ColorContext from './ColorContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
 import {useSidePanel} from '../utils/useSidePanel';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-import Styles from './styles';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
 
 export interface SettingsIconButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isPanelActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
 }
 
 const Settings = (props: SettingsIconButtonProps) => {
-  const {primaryColor} = useContext(ColorContext);
   const {sidePanel, setSidePanel} = useSidePanel();
   //commented for v1 release
   //const settingsLabel = useString('settingsLabel')();
   const settingsLabel = 'Settings';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {
     isPanelActive
       ? setSidePanel(SidePanelType.None)
       : setSidePanel(SidePanelType.Settings);
   };
-  let btnTemplateProps: BtnTemplateInterface = {
+  let iconButtonProps: IconButtonProps = {
     onPress: onPress,
-    name: isPanelActive ? 'settingsFilled' : 'settings',
+
+    iconProps: {
+      name: 'settings',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: $config.ICON_TEXT ? settingsLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = settingsLabel;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.style = [
-      style.localButtonWithMatchingStyle,
-      {borderColor: primaryColor},
-    ];
-  }
+
   return props?.render ? (
-    props.render(onPress, isPanelActive, buttonTemplateName)
+    props.render(onPress, isPanelActive)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      <View>
+        <IconButton {...iconButtonProps} />
+      </View>
+    </>
   );
 };
 
 export const SettingsWithViewWrapper = (props: SettingsIconButtonProps) => {
-  return (
-    <View style={[style.navItem, style.navSmItem]}>
-      <Settings {...props} />
-    </View>
-  );
+  return <Settings {...props} />;
 };
 
 const style = StyleSheet.create({
-  navItem: {
-    height: '100%',
-    alignItems: 'center',
-    position: 'relative',
-  },
-  navSmItem: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: '15%',
-  },
-  main: {
-    width: '50%',
-    height: '80%',
-    left: '25%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    justifyContent: 'space-evenly',
-    alignContent: 'center',
-    paddingVertical: 5,
-    flexDirection: 'column',
-  },
-  popupPickerHolder: {
-    // height: '40%',
-    justifyContent: 'space-around',
-    paddingHorizontal: '8%',
-  },
-  buttonIcon: {
-    // width: 30,
-    // height: 30,
-    width: '100%',
-    height: '100%',
-    tintColor: $config.PRIMARY_COLOR,
-  },
-  heading: {
-    fontSize: 30,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    // marginBottom: 20,
-    alignSelf: 'center',
-  },
-  primaryBtn: {
-    width: '60%',
-    alignSelf: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    maxWidth: 400,
-    minHeight: 45,
-  },
-  primaryBtnText: {
-    width: '100%',
-    height: 45,
-    lineHeight: 45,
-    fontSize: 16,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
-  },
   localButton: {
     borderRadius: 2,
-    borderColor: $config.PRIMARY_COLOR,
-    // borderWidth: 1,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     width: 30,
     height: 30,
     display: 'flex',
@@ -141,11 +77,6 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     resizeMode: 'contain',
   },
-  localButtonWithMatchingStyle: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'contain',
-  },
 });
 
 export default Settings;

package/template/src/components/SettingsView.tsx

@@ -9,77 +9,272 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  TextInput,
+  Platform,
+} from 'react-native';
 import SelectDevice from '../subComponents/SelectDevice';
-import HostControlView from './HostControlView';
-import {useString} from '../utils/useString';
 import LanguageSelector from '../subComponents/LanguageSelector';
-import {isWebInternal} from '../utils/common';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {
+  isMobileUA,
+  isWebInternal,
+  maxInputLimit,
+  useIsSmall,
+} from '../utils/common';
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+import ThemeConfig from '../theme';
+import SidePanelHeader, {
+  SidePanelStyles,
+} from '../subComponents/SidePanelHeader';
+import useGetName from '../utils/useGetName';
+import useSetName from '../utils/useSetName';
+import ImageIcon from '../atoms/ImageIcon';
+import Spacer from '../atoms/Spacer';
+import CommonStyles from './CommonStyles';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import {useFocus} from '../utils/useFocus';
+import {SettingsHeader} from '../pages/video-call/SidePanelHeader';
 
-const SettingsView = () => {
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
-  //commented for v1 release
-  //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
-  const selectInputDeviceLabel = 'Select Input Device';
+interface EditNameProps {}
+const EditName: React.FC = (props?: EditNameProps) => {
+  const [saved, setSaved] = useState(false);
+  const username = useGetName();
+  const [newName, setNewName] = useState(username);
+  const [editable, setEditable] = useState(true);
+  const [disabled, setDisabled] = useState(
+    !newName ||
+      newName.length === 0 ||
+      newName.trim() == '' ||
+      newName === username,
+  );
+  const setUsername = useSetName();
+
+  useEffect(() => {
+    setDisabled(
+      !newName ||
+        newName.length === 0 ||
+        newName.trim() == '' ||
+        newName === username,
+    );
+  }, [newName]);
+
+  const inputRef = useRef(null);
+  const onPress = () => {
+    //true -> prev editable variable
+    if (true) {
+      const trimmedText = newName?.trim();
+      if (trimmedText) {
+        setUsername(trimmedText);
+        setNewName(trimmedText);
+      } else {
+        setNewName(username);
+      }
+      setSaved(true);
+      setTimeout(() => {
+        setSaved(false);
+      }, 2000);
+      setEditable(false);
+    } else {
+      setEditable(true);
+      inputRef.current.focus();
+    }
+  };
+
+  const {currentFocus, setFocus} = useFocus();
+
+  useEffect(() => {
+    if (currentFocus.editName) {
+      setEditable(true);
+      setTimeout(() => {
+        inputRef.current.focus();
+        setFocus((prevState) => {
+          return {
+            ...prevState,
+            editName: false,
+          };
+        });
+      }, 500);
+    }
+  }, [currentFocus?.editName]);
 
   return (
-    <View
-      style={isWebInternal() ? style.settingsView : style.settingsViewNative}>
-      <View style={style.main}>
-        <View>
-          <Text style={style.heading}>{selectInputDeviceLabel}</Text>
-          <View style={style.popupPickerHolder}>
-            <SelectDevice />
-          </View>
+    <>
+      <Text style={editNameStyle.yournameText}>Your name</Text>
+      <Spacer size={12} />
+      <View style={editNameStyle.container}>
+        <View style={editNameStyle.nameContainer}>
+          <ImageIcon
+            name="person"
+            iconSize={20}
+            iconType="plain"
+            tintColor={$config.SEMANTIC_NEUTRAL}
+          />
+          <TextInput
+            maxLength={maxInputLimit}
+            ref={inputRef}
+            style={[
+              editNameStyle.inputStyle,
+              //true -> previously editable variable
+              !true
+                ? {
+                    color:
+                      $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+                  }
+                : {},
+            ]}
+            onBlur={onPress}
+            placeholder={username}
+            value={newName}
+            editable={true}
+            onChangeText={(text) => setNewName(text)}
+            onSubmitEditing={onPress}
+            placeholderTextColor={
+              $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+            }
+          />
         </View>
-        {isHost ? <HostControlView /> : <></>}
-        <LanguageSelector />
+        {/* <PlatformWrapper>
+          <TouchableOpacity
+            disabled={saved ? true : editable ? disabled : false}
+            style={[
+              editNameStyle.editBtn,
+              editable
+                ? disabled
+                  ? {opacity: ThemeConfig.EmphasisOpacity.disabled}
+                  : {}
+                : {},
+            ]}
+            onPress={onPress}>
+            <Text style={editNameStyle.editBtnText}>
+              {saved ? 'Saved' : editable ? 'Save' : 'Edit'}
+            </Text>
+          </TouchableOpacity>
+        </PlatformWrapper> */}
       </View>
-    </View>
+    </>
   );
 };
 
-const style = StyleSheet.create({
-  main: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    justifyContent: 'space-evenly',
-    alignContent: 'center',
-    paddingVertical: 5,
-    flexGrow: 1,
-    shadowColor: $config.PRIMARY_FONT_COLOR + '80',
-    shadowOpacity: 0.5,
-    shadowOffset: {width: -2, height: 0},
-    shadowRadius: 3,
-    paddingHorizontal: 20,
-  },
-  popupPickerHolder: {
-    justifyContent: 'space-around',
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      style={
+        isHovered
+          ? {
+              background:
+                $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+            }
+          : {}
+      }
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+};
+
+const editNameStyle = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    borderRadius: 8,
+    paddingLeft: 20,
+    overflow: 'hidden',
   },
-  heading: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    alignSelf: 'center',
+  editBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+    borderLeftWidth: 1,
+    borderLeftColor: $config.INPUT_FIELD_BORDER_COLOR,
   },
-  settingsView: {
-    width: '20%',
-    minWidth: 200,
-    maxWidth: 300,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+  nameContainer: {
+    flexDirection: 'row',
     flex: 1,
+    alignItems: 'center',
   },
-  settingsViewNative: {
-    position: 'absolute',
-    zIndex: 5,
+  inputStyle: {
+    color: $config.FONT_COLOR,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.medium,
     width: '100%',
-    height: '100%',
-    right: 0,
-    top: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    paddingHorizontal: 8,
+    paddingVertical: 18,
+    borderWidth: 0,
+    ...Platform.select({
+      web: {
+        outlineStyle: 'none',
+      },
+    }),
+  },
+  editBtnText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '600',
+    color: $config.SECONDARY_ACTION_COLOR,
+  },
+  yournameText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});
+const SettingsView = (props) => {
+  const {hideName = false, showHeader = true} = props;
+  const isSmall = useIsSmall();
+  const settingsLabel = 'Settings';
+  const {setSidePanel} = useSidePanel();
+  const {currentLayout} = useLayout();
+
+  return (
+    <View
+      style={[
+        isMobileUA()
+          ? //mobile and mobile web
+            CommonStyles.sidePanelContainerNative
+          : isSmall()
+          ? // desktop minimized
+            CommonStyles.sidePanelContainerWebMinimzed
+          : // desktop maximized
+            CommonStyles.sidePanelContainerWeb,
+        isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
+          ? {marginVertical: 4}
+          : {},
+      ]}>
+      {showHeader && <SettingsHeader {...props} />}
+      <ScrollView style={style.contentContainer}>
+        {hideName ? <></> : <EditName />}
+        {isWebInternal() && <SelectDevice isIconDropdown />}
+        <LanguageSelector />
+      </ScrollView>
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  contentContainer: {
+    padding: 20,
   },
 });