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

package/template/src/atoms/ParticipantsCount.tsx

@@ -0,0 +1,78 @@
+import React, {useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {numFormatter} from '../utils/index';
+import ChatContext from '../components/ChatContext';
+import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
+import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
+import {isMobileUA} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  videoRoomPeopleCountTooltipAttendeeText,
+  videoRoomPeopleCountTooltipHostText,
+} from '../language/default-labels/videoCallScreenLabels';
+
+const ParticipantsCount = () => {
+  const {onlineUsersCount} = useContext(ChatContext);
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const {attendeeUids, hostUids: hostUidsVM} = useVideoMeetingData();
+  const count = $config.EVENT_MODE
+    ? hostUids.length + audienceUids.length
+    : onlineUsersCount;
+
+  const hostlabel = useString(videoRoomPeopleCountTooltipHostText)();
+  const attendeelabel = useString<{eventMode: boolean}>(
+    videoRoomPeopleCountTooltipAttendeeText,
+  );
+  return (
+    <IconButton
+      placement="right"
+      isClickable={isMobileUA() ? true : false}
+      toolTipMessage={
+        $config.EVENT_MODE
+          ? `${hostlabel}: ${
+              $config.EVENT_MODE
+                ? hostUids?.length || 0
+                : hostUidsVM.length || 0
+            }\n${attendeelabel({eventMode: $config.EVENT_MODE})}: ${
+              $config.EVENT_MODE
+                ? audienceUids.length || 0
+                : attendeeUids?.length || 0
+            }`
+          : ''
+      }
+      containerStyle={styles.participantCountView}
+      disabled={true}
+      iconProps={{
+        name: 'people',
+        iconType: 'plain',
+        iconSize: 20,
+        tintColor: $config.FONT_COLOR + hexadecimalTransparency['50%'],
+      }}
+      btnTextProps={{
+        text: numFormatter(count),
+        textColor: $config.FONT_COLOR + hexadecimalTransparency['50%'],
+        textStyle: {
+          fontFamily: 'Source Sans Pro',
+          fontWeight: '600',
+          fontSize: 12,
+          lineHeight: 12,
+          marginTop: 0,
+          marginLeft: 4,
+        },
+      }}
+    />
+  );
+};
+
+export default ParticipantsCount;
+
+const styles = StyleSheet.create({
+  participantCountView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+});

package/template/src/atoms/Popup.tsx

@@ -0,0 +1,178 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  ModalProps,
+  ViewStyle,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import IconButton from './IconButton';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {isMobileUA, useIsDesktop} from '../../src/utils/common';
+import Spacer from './Spacer';
+
+interface PopupProps extends ModalProps {
+  title?: string;
+  subtitle?: string;
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  showCloseIcon?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  bodyContainerStyle?: ViewStyle;
+  closeBtnStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  cancelable?: boolean;
+  headerComponent?: React.ReactNode;
+}
+const Popup = (props: PopupProps) => {
+  const {
+    title,
+    subtitle = '',
+    modalVisible,
+    setModalVisible,
+    children,
+    showCloseIcon,
+    cancelable = true,
+    bodyContainerStyle = {},
+    closeBtnStyle = {},
+    headerComponent = null,
+    ...otherProps
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(false);
+      }}
+      {...otherProps}>
+      <View
+        style={[
+          styles.centeredView,
+          isDesktop && {alignItems: 'center'},
+          props?.containerStyle,
+        ]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            cancelable && setModalVisible(false);
+          }}>
+          <View style={styles.backDrop} />
+        </TouchableWithoutFeedback>
+
+        <View style={[styles.modalView, props?.contentContainerStyle]}>
+          {title || showCloseIcon || headerComponent ? (
+            <>
+              <View style={styles.header}>
+                {title && <Text style={styles.title}>{title}</Text>}
+                {headerComponent}
+
+                {showCloseIcon ? (
+                  <View>
+                    <IconButton
+                      hoverEffect={true}
+                      hoverEffectStyle={{
+                        backgroundColor: $config.ICON_BG_COLOR,
+                        borderRadius: 20,
+                      }}
+                      iconProps={{
+                        iconType: 'plain',
+                        iconContainerStyle: {
+                          padding: isMobileUA() ? 0 : 5,
+                          ...closeBtnStyle,
+                        },
+                        name: 'close',
+                        tintColor: $config.SECONDARY_ACTION_COLOR,
+                      }}
+                      onPress={() => {
+                        setModalVisible(false);
+                      }}
+                    />
+                  </View>
+                ) : (
+                  <></>
+                )}
+              </View>
+              {subtitle ? (
+                <Text style={styles.subtitle}>{subtitle}</Text>
+              ) : (
+                <></>
+              )}
+
+              {title ? <Spacer size={32} /> : null}
+            </>
+          ) : (
+            <></>
+          )}
+          <View style={bodyContainerStyle}>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default Popup;
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    padding: 32,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 650,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 24,
+    lineHeight: 24,
+    fontWeight: '600',
+    alignSelf: 'center',
+    marginRight: 5,
+  },
+  subtitle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 20,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    marginTop: 8,
+  },
+});

package/template/src/atoms/PrimaryButton.tsx

@@ -9,51 +9,90 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
-  Pressable,
-  PressableProps,
-  StyleProp,
+  TouchableOpacityProps,
   StyleSheet,
   Text,
   TextStyle,
+  View,
+  ViewStyle,
+  TouchableOpacity,
 } from 'react-native';
+import ThemeConfig from '../theme';
 import {primaryButton, primaryButtonText} from '../../theme.json';
-import ColorContext from '../components/ColorContext';
+import {IconsInterface} from '../atoms/CustomIcon';
+import ImageIcon from '../atoms/ImageIcon';
 
-export interface PrimaryButtonProps extends PressableProps {
+export interface PrimaryButtonProps extends TouchableOpacityProps {
   text?: string;
+  iconName?: keyof IconsInterface;
+  containerStyle?: ViewStyle | ViewStyle[];
+  textStyle?: TextStyle;
+  iconSize?: number;
+  iconColor?: string;
 }
 
 export default function PrimaryButton(props: PrimaryButtonProps) {
-  const {primaryColor} = useContext(ColorContext);
-  const {children, ...otherProps} = props;
+  const {
+    iconName,
+    textStyle,
+    containerStyle,
+    iconSize,
+    iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    ...otherProps
+  } = props;
   return (
-    <Pressable
+    <TouchableOpacity
       style={[
-        styles.primaryButton,
-        {backgroundColor: props.disabled ? primaryColor + '80' : primaryColor},
+        styles.container,
+        props?.disabled
+          ? {backgroundColor: $config.SEMANTIC_NEUTRAL}
+          : {backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR},
+        containerStyle ? containerStyle : {},
       ]}
       {...otherProps}>
-      <>
-        {props.text ? (
-          <Text
-            style={[
-              styles.primaryButtonText as StyleProp<TextStyle>,
-              {color: '#fff'},
-            ]}>
-            {props.text}
-          </Text>
-        ) : (
-          <></>
-        )}
-        {children}
-      </>
-    </Pressable>
+      {iconName ? (
+        <View style={{marginRight: 4}}>
+          <ImageIcon
+            iconType="plain"
+            name={iconName}
+            tintColor={iconColor}
+            iconSize={iconSize}
+          />
+        </View>
+      ) : (
+        <></>
+      )}
+      {props.text && (
+        <Text style={[styles.text, textStyle ? textStyle : {}]}>
+          {props.text}
+        </Text>
+      )}
+    </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
+  //@ts-ignore
   primaryButton,
+  //@ts-ignore
   primaryButtonText,
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 52,
+    paddingVertical: 18,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    minWidth: 250,
+  },
+  text: {
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.medium,
+    fontWeight: '700',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    //paddingLeft: 8,
+    textTransform: 'uppercase',
+  },
 });

package/template/src/atoms/RecordingInfo.tsx

@@ -0,0 +1,47 @@
+import {StyleSheet, Text, View} from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import React from 'react';
+import {isMobileUA} from '../utils/common';
+import IconButton from '../atoms/IconButton';
+
+const RecordingInfo = ({recordingLabel = ''}) => {
+  return (
+    <View style={[styles.recordingView]}>
+      <IconButton
+        placement="right"
+        isClickable={false}
+        containerStyle={styles.recordingView}
+        disabled={true}
+        iconProps={{
+          name: 'recording-status',
+          iconType: 'plain',
+          iconSize: 20,
+          tintColor: $config.SEMANTIC_ERROR,
+        }}
+        btnTextProps={{
+          text: recordingLabel,
+          textColor: $config.SEMANTIC_ERROR,
+          textStyle: {
+            fontFamily: 'Source Sans Pro',
+            fontWeight: '600',
+            fontSize: 12,
+            lineHeight: 12,
+            marginTop: 0,
+            marginLeft: 4,
+          },
+        }}
+      />
+    </View>
+  );
+};
+
+export default RecordingInfo;
+
+const styles = StyleSheet.create({
+  recordingView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+});

package/template/src/atoms/SecondaryButton.tsx

@@ -18,6 +18,7 @@ import {
   Text,
   TextStyle,
 } from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {secondaryBtn, secondaryButtonText} from '../../theme.json';
 // import ColorContext from '../components/ColorContext';
 
@@ -27,7 +28,7 @@ export interface SecondaryButtonProps extends TouchableOpacityProps {
 }
 
 export default function SecondaryButton(props: SecondaryButtonProps) {
-  // const primaryColor = $config.PRIMARY_FONT_COLOR; //useContext(ColorContext);
+  // const primaryColor = $config.FONT_COLOR; //useContext(ColorContext);
   const {children, ...otherProps} = props;
   return (
     <TouchableOpacity
@@ -35,8 +36,9 @@ export default function SecondaryButton(props: SecondaryButtonProps) {
         styles.secondaryBtn,
         {
           borderColor: props.disabled
-            ? $config.PRIMARY_COLOR + '80'
-            : $config.PRIMARY_COLOR,
+            ? $config.PRIMARY_ACTION_BRAND_COLOR +
+              hexadecimalTransparency['80%']
+            : $config.PRIMARY_ACTION_BRAND_COLOR,
         },
       ]}
       {...otherProps}>
@@ -46,8 +48,9 @@ export default function SecondaryButton(props: SecondaryButtonProps) {
             styles.secondaryButtonText as StyleProp<TextStyle>,
             {
               color: props.disabled
-                ? $config.PRIMARY_COLOR + '80'
-                : $config.PRIMARY_COLOR,
+                ? $config.PRIMARY_ACTION_BRAND_COLOR +
+                  hexadecimalTransparency['80%']
+                : $config.PRIMARY_ACTION_BRAND_COLOR,
             },
           ]}>
           {props.text}
@@ -61,6 +64,8 @@ export default function SecondaryButton(props: SecondaryButtonProps) {
 }
 
 const styles = StyleSheet.create({
+  //@ts-ignore
   secondaryBtn,
+  //@ts-ignore
   secondaryButtonText,
 });

package/template/src/atoms/Spacer.tsx

@@ -0,0 +1,23 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+
+interface SpacerProps {
+  size: number | string;
+  horizontal?: boolean;
+}
+
+const Spacer = ({size, horizontal = false}: SpacerProps) => {
+  return (
+    <View
+      //@ts-ignore
+      style={{
+        width: horizontal ? size : 'auto',
+        height: !horizontal ? size : 'auto',
+      }}
+    />
+  );
+};
+
+export default Spacer;
+
+const styles = StyleSheet.create({});

package/template/src/atoms/TertiaryButton.tsx

@@ -0,0 +1,108 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  ViewStyle,
+  TextStyle,
+  View,
+} from 'react-native';
+import React, {useState} from 'react';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {isWebInternal, isMobileUA} from '../utils/common';
+import {IconsInterface} from '../atoms/CustomIcon';
+import ImageIcon from '../atoms/ImageIcon';
+
+interface ButtonProps extends TouchableOpacityProps {
+  setRef?: (ref: any) => void;
+  text?: string;
+  children?: React.ReactNode;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  iconName?: keyof IconsInterface;
+  iconSize?: number;
+  iconColor?: string;
+}
+
+const TertiaryButton = (props: ButtonProps) => {
+  const {
+    text,
+    iconName,
+    iconSize = 26,
+    iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    ...rest
+  } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <PlatformWrapper setIsHovered={setIsHovered}>
+      <TouchableOpacity
+        ref={(ref) => props?.setRef && props.setRef(ref)}
+        style={[
+          styles.container,
+          isHovered
+            ? {
+                backgroundColor:
+                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+              }
+            : {},
+          props?.containerStyle,
+        ]}
+        {...rest}>
+        <View style={styles.flexRow}>
+          {iconName && (
+            <View style={{marginRight: 8}}>
+              <ImageIcon
+                iconSize={iconSize}
+                iconType="plain"
+                name={iconName}
+                tintColor={iconColor}
+              />
+            </View>
+          )}
+          <Text style={[styles.text, props?.textStyle]}>{text}</Text>
+        </View>
+      </TouchableOpacity>
+    </PlatformWrapper>
+  );
+};
+const PlatformWrapper = ({children, setIsHovered}) => {
+  return isWebInternal() && !isMobileUA() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+};
+export default TertiaryButton;
+
+const styles = StyleSheet.create({
+  flexRow: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    borderWidth: 1,
+    borderColor: $config.SECONDARY_ACTION_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+  },
+});

package/template/src/atoms/TextInput.tsx

@@ -13,30 +13,29 @@ import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
 import {isWebInternal} from '../utils/common';
 import {textInput} from '../../theme.json';
-import ColorContext from '../components/ColorContext';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
-const PrimaryButton = (props: TextInputProps) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {style, ...otherProps} = props;
+interface TextInputCustomProps extends TextInputProps {
+  setRef?: (ref: any) => void;
+}
+
+const TextInputCustom = (props: TextInputCustomProps) => {
+  const {style, setRef, ...otherProps} = props;
   return (
     <TextInput
-      style={[
-        styles.textInput,
-        styles.textWrapFix,
-        style,
-        styles.noOutline,
-        {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR},
-      ]}
-      placeholderTextColor={$config.PRIMARY_FONT_COLOR + '70'}
-      {...otherProps}
+      ref={ref => props?.setRef && props.setRef(ref)}
+      style={[styles.textInput, styles.textWrapFix, styles.noOutline, style]}
+      placeholderTextColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
       autoCorrect={false}
+      {...otherProps}
     />
   );
 };
 
-export default PrimaryButton;
+export default TextInputCustom;
 
 const styles = StyleSheet.create({
+  // @ts-ignore
   textInput,
   // @ts-ignore
   noOutline: isWebInternal() ? {outlineStyle: 'none'} : {},

package/template/src/atoms/Toggle.tsx

@@ -0,0 +1,47 @@
+import {StyleSheet, Text, View, Platform} from 'react-native';
+import React from 'react';
+import CustomSwitch from './CustomSwitch';
+
+interface SwitchProps {
+  isEnabled: boolean;
+  disabled?: boolean;
+  toggleSwitch: (isEnabled: boolean) => void;
+}
+
+const Toggle = (props: SwitchProps) => {
+  const {isEnabled, toggleSwitch, disabled = false} = props;
+  return (
+    <View>
+      <CustomSwitch
+        barHeight={20}
+        switchWidth={16}
+        switchHeight={16}
+        value={isEnabled}
+        onValueChange={toggleSwitch}
+        disabled={false}
+        backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
+        backgroundInactive={$config.SEMANTIC_NEUTRAL}
+        circleActiveColor={$config.CARD_LAYER_1_COLOR}
+        circleInActiveColor={$config.CARD_LAYER_1_COLOR}
+        // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
+        changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
+        innerCircleStyle={{
+          borderWidth: 0,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }} // style for inner animated circle for what you (may) be rendering inside the circle
+        outerCircleStyle={{}} // style for outer animated circle
+        renderActiveText={false}
+        renderInActiveText={false}
+        switchLeftPx={3} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
+        switchRightPx={3} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
+        switchWidthMultiplier={2} // multiplied by the `circleSize` prop to calculate total width of the Switch
+        switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
+      />
+    </View>
+  );
+};
+
+export default Toggle;
+
+const styles = StyleSheet.create({});