agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/Settings.tsx

@@ -13,62 +13,126 @@ 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 IconButton, {IconButtonProps} from '../atoms/IconButton';
+import Styles from './styles';
 
 export interface SettingsIconButtonProps {
-  render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isPanelActive: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => 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 iconButtonProps: IconButtonProps = {
+  let btnTemplateProps: BtnTemplateInterface = {
     onPress: onPress,
-
-    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,
-    },
+    name: isPanelActive ? 'settingsFilled' : 'settings',
   };
-
+  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)
+    props.render(onPress, isPanelActive, buttonTemplateName)
   ) : (
-    <>
-      <View>
-        <IconButton {...iconButtonProps} />
-      </View>
-    </>
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
 export const SettingsWithViewWrapper = (props: SettingsIconButtonProps) => {
-  return <Settings {...props} />;
+  return (
+    <View style={[style.navItem, style.navSmItem]}>
+      <Settings {...props} />
+    </View>
+  );
 };
 
 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_ACTION_BRAND_COLOR,
+    borderColor: $config.PRIMARY_COLOR,
+    // borderWidth: 1,
     width: 30,
     height: 30,
     display: 'flex',
@@ -77,6 +141,11 @@ 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,272 +9,77 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useRef, useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  TextInput,
-  Platform,
-} from 'react-native';
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
 import SelectDevice from '../subComponents/SelectDevice';
+import HostControlView from './HostControlView';
+import {useString} from '../utils/useString';
 import LanguageSelector from '../subComponents/LanguageSelector';
-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';
+import {isWebInternal} from '../utils/common';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 
-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]);
+const SettingsView = () => {
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  //commented for v1 release
+  //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
+  const selectInputDeviceLabel = 'Select Input Device';
 
   return (
-    <>
-      <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
+      style={isWebInternal() ? style.settingsView : style.settingsViewNative}>
+      <View style={style.main}>
+        <View>
+          <Text style={style.heading}>{selectInputDeviceLabel}</Text>
+          <View style={style.popupPickerHolder}>
+            <SelectDevice />
+          </View>
         </View>
-        {/* <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> */}
+        {isHost ? <HostControlView /> : <></>}
+        <LanguageSelector />
       </View>
-    </>
-  );
-};
-
-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
+    </View>
   );
 };
 
-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',
+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',
   },
-  editBtn: {
-    paddingHorizontal: 24,
-    paddingVertical: 20,
-    borderLeftWidth: 1,
-    borderLeftColor: $config.INPUT_FIELD_BORDER_COLOR,
+  heading: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+    alignSelf: 'center',
   },
-  nameContainer: {
-    flexDirection: 'row',
+  settingsView: {
+    width: '20%',
+    minWidth: 200,
+    maxWidth: 300,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
     flex: 1,
-    alignItems: 'center',
   },
-  inputStyle: {
-    color: $config.FONT_COLOR,
-    fontWeight: '600',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: ThemeConfig.FontSize.medium,
+  settingsViewNative: {
+    position: 'absolute',
+    zIndex: 5,
     width: '100%',
-    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,
+    height: '100%',
+    right: 0,
+    top: 0,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
 });