agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/atoms/MeetingLink.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../components/useShareLink';
+import platform from '../subComponents/Platform';
+import Spacer from './Spacer';
+import isSDKCheck from '../utils/isSDK';
+import ClipboardIconButton from './ClipboardIconButton';
+import ThemeConfig, {FontSizes} from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface MeetingLinkStyleProps {
+  size?: keyof FontSizes;
+  linkFontSize?: keyof FontSizes;
+  variant?: 'primary' | 'secondary';
+}
+
+interface MeetingLinkProps {
+  label: string;
+  link: SHARE_LINK_CONTENT_TYPE | string;
+  linkToCopy?: SHARE_LINK_CONTENT_TYPE;
+  helperText?: string;
+  styleProps?: MeetingLinkStyleProps;
+  gutterBottom?: boolean;
+}
+const urlWeb = {wordBreak: 'break-all'};
+
+const MeetingLink = (props: MeetingLinkProps) => {
+  const {
+    label = '',
+    link,
+    helperText = '',
+    linkToCopy,
+    styleProps = {
+      size: 'medium',
+      variant: 'primary',
+    },
+    gutterBottom = false,
+  } = props;
+
+  const style = useStyles(styleProps);
+
+  const {getShareLink} = useShareLink();
+
+  const isSDK = isSDKCheck();
+  const isWebCheck =
+    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+
+  return (
+    <>
+      {label ? <Text style={style.label}>{label}</Text> : <></>}
+      <Spacer size={5} />
+      <View style={style.linkContainer}>
+        <View style={style.linkTextBox}>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              style.linkText,
+              //@ts-ignore
+              isWebCheck ? urlWeb : {opacity: 1},
+            ]}>
+            {link}
+          </Text>
+        </View>
+        <ClipboardIconButton text={linkToCopy} variant="secondary" size={20} />
+      </View>
+      {helperText && (
+        <>
+          <Text style={style.linkHelperText}>{helperText}</Text>{' '}
+        </>
+      )}
+      {gutterBottom && <Spacer size={25} />}
+    </>
+  );
+};
+
+export default MeetingLink;
+
+const useStyles = (styleProps: MeetingLinkStyleProps) => {
+  let customStyles = {
+    label: {},
+    linkTextBox: {},
+    linkText: {},
+    linkContainer: {},
+  };
+  if (styleProps.size === 'tiny') {
+    customStyles.label = {
+      fontSize: ThemeConfig.FontSize.tiny,
+    };
+    customStyles.linkContainer = {
+      borderRadius: ThemeConfig.BorderRadius[styleProps.size],
+    };
+    customStyles.linkTextBox = {
+      paddingVertical: 18,
+    };
+    customStyles.linkText = {
+      fontSize: ThemeConfig.FontSize.small,
+    };
+  }
+  if (styleProps?.linkFontSize === 'tiny') {
+    customStyles.linkText = {
+      fontSize: ThemeConfig.FontSize.tiny,
+    };
+  }
+  if (styleProps.variant === 'secondary') {
+    customStyles.linkText = {
+      ...customStyles.linkText,
+      color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    };
+  }
+  return StyleSheet.create({
+    linkContainer: {
+      flexDirection: 'row',
+    },
+    label: {
+      color: $config.FONT_COLOR,
+      fontSize: ThemeConfig.FontSize.medium,
+      fontWeight: '600',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'left',
+      marginBottom: 8,
+      ...customStyles.label,
+    },
+    linkTextBox: {
+      flex: 0.9,
+      width: 0,
+      backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+      borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+      borderWidth: 1,
+      borderTopLeftRadius: ThemeConfig.BorderRadius.medium,
+      borderBottomLeftRadius: ThemeConfig.BorderRadius.medium,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      paddingHorizontal: 20,
+      paddingVertical: 21,
+      ...customStyles.linkTextBox,
+    },
+    linkText: {
+      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+      fontSize: ThemeConfig.FontSize.small,
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      ...customStyles.linkText,
+    },
+    linkIcon: {
+      marginLeft: 'auto',
+      flexDirection: 'row',
+      alignSelf: 'center',
+    },
+    linkHelperText: {
+      color: '#CCCCCC',
+      marginTop: 10,
+      fontSize: 14,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+    },
+  });
+};

package/template/src/atoms/ParticipantsCount.tsx

@@ -7,22 +7,35 @@ 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
-          ? `Host: ${
+          ? `${hostlabel}: ${
               $config.EVENT_MODE
                 ? hostUids?.length || 0
                 : hostUidsVM.length || 0
-            }\n${$config.EVENT_MODE ? 'Audience: ' : 'Attendee: '}${
+            }\n${attendeelabel({eventMode: $config.EVENT_MODE})}: ${
               $config.EVENT_MODE
                 ? audienceUids.length || 0
                 : attendeeUids?.length || 0
@@ -35,13 +48,11 @@ const ParticipantsCount = () => {
         name: 'people',
         iconType: 'plain',
         iconSize: 20,
-        tintColor:
-          $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
+        tintColor: $config.FONT_COLOR + hexadecimalTransparency['50%'],
       }}
       btnTextProps={{
-        text: numFormatter(onlineUsersCount),
-        textColor:
-          $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
+        text: numFormatter(count),
+        textColor: $config.FONT_COLOR + hexadecimalTransparency['50%'],
         textStyle: {
           fontFamily: 'Source Sans Pro',
           fontWeight: '600',

package/template/src/atoms/Popup.tsx

@@ -12,23 +12,28 @@ 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;
   containerStyle?: ViewStyle;
+  cancelable?: boolean;
 }
 const Popup = (props: PopupProps) => {
   const {
     title,
+    subtitle = '',
     modalVisible,
     setModalVisible,
     children,
     showCloseIcon,
+    cancelable = true,
     ...otherProps
   } = props;
 
@@ -51,40 +56,49 @@ const Popup = (props: PopupProps) => {
         ]}>
         <TouchableWithoutFeedback
           onPress={() => {
-            setModalVisible(false);
+            cancelable && setModalVisible(false);
           }}>
           <View style={styles.backDrop} />
         </TouchableWithoutFeedback>
 
         <View style={[styles.modalView, props?.contentContainerStyle]}>
           {title || showCloseIcon ? (
-            <View style={styles.header}>
-              <Text style={styles.title}>{title}</Text>
-              {showCloseIcon ? (
-                <View>
-                  <IconButton
-                    hoverEffect={true}
-                    hoverEffectStyle={{
-                      backgroundColor: $config.ICON_BG_COLOR,
-                      borderRadius: 20,
-                    }}
-                    iconProps={{
-                      iconType: 'plain',
-                      iconContainerStyle: {
-                        padding: isMobileUA() ? 0 : 5,
-                      },
-                      name: 'close',
-                      tintColor: $config.SECONDARY_ACTION_COLOR,
-                    }}
-                    onPress={() => {
-                      setModalVisible(false);
-                    }}
-                  />
-                </View>
+            <>
+              <View style={styles.header}>
+                <Text style={styles.title}>{title}</Text>
+                {showCloseIcon ? (
+                  <View>
+                    <IconButton
+                      hoverEffect={true}
+                      hoverEffectStyle={{
+                        backgroundColor: $config.ICON_BG_COLOR,
+                        borderRadius: 20,
+                      }}
+                      iconProps={{
+                        iconType: 'plain',
+                        iconContainerStyle: {
+                          padding: isMobileUA() ? 0 : 5,
+                        },
+                        name: 'close',
+                        tintColor: $config.SECONDARY_ACTION_COLOR,
+                      }}
+                      onPress={() => {
+                        setModalVisible(false);
+                      }}
+                    />
+                  </View>
+                ) : (
+                  <></>
+                )}
+              </View>
+              {subtitle ? (
+                <Text style={styles.subtitle}>{subtitle}</Text>
               ) : (
                 <></>
               )}
-            </View>
+
+              <Spacer size={32} />
+            </>
           ) : (
             <></>
           )}
@@ -134,7 +148,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
-    marginBottom: 32,
   },
   title: {
     color: $config.FONT_COLOR,
@@ -142,6 +155,15 @@ const styles = StyleSheet.create({
     fontSize: 24,
     lineHeight: 24,
     fontWeight: '600',
-    flex: 0.9,
+    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

@@ -27,12 +27,21 @@ import ImageIcon from '../atoms/ImageIcon';
 export interface PrimaryButtonProps extends TouchableOpacityProps {
   text?: string;
   iconName?: keyof IconsInterface;
-  containerStyle?: ViewStyle;
+  containerStyle?: ViewStyle | ViewStyle[];
   textStyle?: TextStyle;
+  iconSize?: number;
+  iconColor?: string;
 }
 
 export default function PrimaryButton(props: PrimaryButtonProps) {
-  const {children, iconName, textStyle, containerStyle, ...otherProps} = props;
+  const {
+    iconName,
+    textStyle,
+    containerStyle,
+    iconSize,
+    iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    ...otherProps
+  } = props;
   return (
     <TouchableOpacity
       style={[
@@ -43,14 +52,17 @@ export default function PrimaryButton(props: PrimaryButtonProps) {
         containerStyle ? containerStyle : {},
       ]}
       {...otherProps}>
-      {iconName && (
-        <View style={{marginRight: 8}}>
+      {iconName ? (
+        <View style={{marginRight: 4}}>
           <ImageIcon
             iconType="plain"
             name={iconName}
-            tintColor={$config.PRIMARY_ACTION_TEXT_COLOR}
+            tintColor={iconColor}
+            iconSize={iconSize}
           />
         </View>
+      ) : (
+        <></>
       )}
       {props.text && (
         <Text style={[styles.text, textStyle ? textStyle : {}]}>
@@ -62,7 +74,9 @@ export default function PrimaryButton(props: PrimaryButtonProps) {
 }
 
 const styles = StyleSheet.create({
+  //@ts-ignore
   primaryButton,
+  //@ts-ignore
   primaryButtonText,
   container: {
     flexDirection: 'row',

package/template/src/atoms/RecordingInfo.tsx

@@ -40,8 +40,8 @@ const styles = StyleSheet.create({
     lineHeight: 12,
     fontWeight: '600',
     fontFamily: 'Source Sans Pro',
-    color: $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
-    marginLeft: 8,
+    color: $config.FONT_COLOR + hexadecimalTransparency['50%'],
+    marginLeft: 4,
   },
   recordingStatus: {
     width: 12,

package/template/src/atoms/SecondaryButton.tsx

@@ -64,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

@@ -9,6 +9,7 @@ interface SpacerProps {
 const Spacer = ({size, horizontal = false}: SpacerProps) => {
   return (
     <View
+      //@ts-ignore
       style={{
         width: horizontal ? size : 'auto',
         height: !horizontal ? size : 'auto',

package/template/src/atoms/TertiaryButton.tsx

@@ -5,11 +5,14 @@ import {
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
+  View,
 } from 'react-native';
 import React, {useState} from 'react';
 import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {isWebInternal} from '../utils/common';
+import {isWebInternal, isMobileUA} from '../utils/common';
+import {IconsInterface} from '../atoms/CustomIcon';
+import ImageIcon from '../atoms/ImageIcon';
 
 interface ButtonProps extends TouchableOpacityProps {
   setRef?: (ref: any) => void;
@@ -17,11 +20,21 @@ interface ButtonProps extends TouchableOpacityProps {
   children?: React.ReactNode;
   containerStyle?: ViewStyle;
   textStyle?: TextStyle;
+  iconName?: keyof IconsInterface;
+  iconSize?: number;
+  iconColor?: string;
 }
 
 const TertiaryButton = (props: ButtonProps) => {
-  const {text, ...rest} = props;
-  const [isHovered, setIsHovered] = useState();
+  const {
+    text,
+    iconName,
+    iconSize = 26,
+    iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    ...rest
+  } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <PlatformWrapper setIsHovered={setIsHovered}>
       <TouchableOpacity
@@ -37,13 +50,25 @@ const TertiaryButton = (props: ButtonProps) => {
           props?.containerStyle,
         ]}
         {...rest}>
-        <Text style={[styles.text, props?.textStyle]}>{text}</Text>
+        <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() ? (
+  return isWebInternal() && !isMobileUA() ? (
     <div
       onMouseEnter={() => {
         setIsHovered(true);
@@ -60,6 +85,11 @@ const PlatformWrapper = ({children, setIsHovered}) => {
 export default TertiaryButton;
 
 const styles = StyleSheet.create({
+  flexRow: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
   container: {
     paddingHorizontal: 12,
     paddingVertical: 11,

package/template/src/atoms/TextInput.tsx

@@ -23,7 +23,7 @@ const TextInputCustom = (props: TextInputCustomProps) => {
   const {style, setRef, ...otherProps} = props;
   return (
     <TextInput
-      ref={(ref) => props?.setRef && props.setRef(ref)}
+      ref={ref => props?.setRef && props.setRef(ref)}
       style={[styles.textInput, styles.textWrapFix, styles.noOutline, style]}
       placeholderTextColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
       autoCorrect={false}
@@ -35,6 +35,7 @@ const TextInputCustom = (props: TextInputCustomProps) => {
 export default TextInputCustom;
 
 const styles = StyleSheet.create({
+  // @ts-ignore
   textInput,
   // @ts-ignore
   noOutline: isWebInternal() ? {outlineStyle: 'none'} : {},

package/template/src/atoms/Toolbar.tsx

@@ -1,41 +1,76 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useToolbar, ToolbarPosition} from '../utils/useToolbar';
-import {isWebInternal, useIsDesktop} from '../utils/common';
+import {isMobileUA, isWebInternal, useIsDesktop} from '../utils/common';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {ToolbarCustomItem} from './ToolbarPreset';
+import ActionSheet from '../pages/video-call/ActionSheet';
 
-export interface ToolbarProps {
+// export interface ToolbarProps {
+//   children: React.ReactNode;
+//   bottomSheetOnMobile?: boolean;
+//   customItems?: ToolbarCustomItem[];
+// }
+
+export interface ToolbarPropsBase {
   children: React.ReactNode;
 }
+
+export interface ToolbarPropsDesktop extends ToolbarPropsBase {
+  bottomSheetOnMobile?: never;
+  snapPointsMinMax?: never;
+}
+export interface ToolbarPropsMobile extends ToolbarPropsBase {
+  bottomSheetOnMobile: boolean;
+  snapPointsMinMax: [number, number];
+}
+export type ToolbarProps = ToolbarPropsDesktop | ToolbarPropsMobile;
+
 const Toolbar = (props: ToolbarProps) => {
   const {position} = useToolbar();
-  const {children} = props;
+  const {children, bottomSheetOnMobile = false, snapPointsMinMax} = props;
   const isDesktop = useIsDesktop();
-  const paddingHorizontal = isDesktop('toolbar') ? 32 : 10;
+  const paddingHorizontal = $config.ICON_TEXT
+    ? isDesktop('toolbar')
+      ? 32
+      : 10
+    : 0;
 
-  return (
-    <View
-      style={[
-        position === ToolbarPosition.left || position === ToolbarPosition.right
-          ? {
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              paddingVertical: paddingHorizontal,
-            }
-          : position === ToolbarPosition.top
-          ? isWebInternal()
-            ? toolBarStyles.topBarNonNativeStyle
-            : toolBarStyles.topBarNativeStyle
-          : position === ToolbarPosition.bottom
-          ? toolBarStyles.bottomBarStyle
-          : {},
-        position === ToolbarPosition.top || position === ToolbarPosition.bottom
-          ? {paddingHorizontal}
-          : {},
-      ]}>
-      {children}
-    </View>
-  );
+  if (isMobileUA() && bottomSheetOnMobile) {
+    return (
+      <ActionSheet
+        displayCustomBottomSheetContent={true}
+        customBottomSheetContent={children}
+        snapPointsMinMax={snapPointsMinMax}
+      />
+    );
+  } else {
+    return (
+      <View
+        style={[
+          position === ToolbarPosition.left ||
+          position === ToolbarPosition.right
+            ? {
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                paddingVertical: paddingHorizontal,
+              }
+            : position === ToolbarPosition.top
+            ? isWebInternal()
+              ? toolBarStyles.topBarNonNativeStyle
+              : toolBarStyles.topBarNativeStyle
+            : position === ToolbarPosition.bottom
+            ? toolBarStyles.bottomBarStyle
+            : {},
+          position === ToolbarPosition.top ||
+          position === ToolbarPosition.bottom
+            ? {paddingHorizontal}
+            : {},
+        ]}>
+        {children}
+      </View>
+    );
+  }
 };
 
 export default Toolbar;
@@ -51,14 +86,13 @@ const toolBarStyles = StyleSheet.create({
   },
   topBarNativeStyle: {
     width: '100%',
-    zIndex: 999,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     position: 'relative',
     height: '8%',
-    backgroundColor:
-      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
+    backgroundColor: $config.TOOLBAR_COLOR,
+    //$config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
   },
   bottomBarStyle: {
     flexDirection: 'row',

package/template/src/atoms/ToolbarItem.tsx

@@ -17,7 +17,7 @@ const ToolbarItem = (props: ToolbarItemProps) => {
   //action sheet
   if (isMobileUA() && position === ToolbarPosition.bottom) {
     return (
-      <View {...props} style={toolbarItemStyles.iconWithText}>
+      <View {...props} style={[props?.style, toolbarItemStyles.iconWithText]}>
         {props?.children}
       </View>
     );
@@ -51,19 +51,25 @@ const toolbarItemStyles = StyleSheet.create({
   iconWithText: {
     justifyContent: 'center',
     alignItems: 'center',
+    // alignSelf: 'center',
     flexBasis: '25%',
     paddingBottom: 24,
   },
-  topBarItemNativeStyle: {},
-  topBarItemNonNativeStyle: {
+  topBarItemNativeStyle: {
     marginTop: 8,
     marginBottom: 10,
     marginHorizontal: 10,
     justifyContent: 'center',
   },
+  topBarItemNonNativeStyle: {
+    marginTop: $config.ICON_TEXT ? 8 : 0,
+    marginBottom: $config.ICON_TEXT ? 10 : 0,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
   bottomBarItemStyle: {
-    marginTop: 10,
-    marginBottom: 16,
+    marginTop: $config.ICON_TEXT ? 10 : 0,
+    marginBottom: $config.ICON_TEXT ? 16 : 0,
     marginHorizontal: 10,
   },
   leftBarItemStyle: {