agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/atoms/InfoBubble.tsx

@@ -1,291 +0,0 @@
-import {
-  StyleSheet,
-  Image,
-  View,
-  Pressable,
-  Text,
-  Modal,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-} from 'react-native';
-import React, {useRef, useState} from 'react';
-import ImageIcon, {ImageIconProps} from './ImageIcon';
-import ThemeConfig from '../theme';
-import {isMobileUA, isWebInternal} from '../utils/common';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-
-interface iconProps extends ImageIconProps {
-  activeTintColor: string;
-}
-
-interface InfoBubbleProps {
-  text: string;
-  iconProps: iconProps;
-  bubbleIconProps?: iconProps;
-  hoverMode?: boolean;
-  onPress?: () => void;
-}
-
-const InfoBubble = (props: InfoBubbleProps) => {
-  const [toolTipVisible, setToolTipVisible] = useState(false);
-  const [left, setLeft] = useState(0);
-  const [position, setPosition] = useState({});
-  const [arrowPosition, setArrowPosition] = useState({});
-  const {hoverMode = true} = props;
-  const tooltipRef = useRef(null);
-  const iconRef = useRef(null);
-  const pressableRef = useRef(null);
-  const {width, height} = useWindowDimensions();
-
-  const setModalPosition = (width: number) => {
-    setTimeout(() => {
-      pressableRef?.current?.measure(
-        (
-          _fx: number,
-          _fy: number,
-          _localWidth: number,
-          _localHeight: number,
-          px: number,
-          py: number,
-        ) => {
-          setPosition({
-            top: py - (hoverMode ? 80 : 70),
-            left: hoverMode ? 40 : px - (width ? width / 1.5 : 0),
-            //left: px - (width ? width / 2 : 0), //TODO: need to dynamically adjust
-          });
-          setArrowPosition({
-            top: py - 6,
-            left: 100,
-          });
-        },
-      );
-    });
-  };
-
-  return (
-    <PlatformWrapper
-      onPress={() => setToolTipVisible(true)}
-      setToolTipVisible={setToolTipVisible}
-      toolTipVisible={toolTipVisible}
-      hoverMode={hoverMode}>
-      {/* toolTipBox for desktop  */}
-      {!isMobileUA() && hoverMode && isWebInternal() && toolTipVisible ? (
-        <>
-          <View
-            style={[
-              styles.textContainer,
-              position,
-              {left: left - 20},
-              {opacity: !left ? 0 : 1},
-            ]}
-            onLayout={({
-              nativeEvent: {
-                layout: {x, y, width, height},
-              },
-            }) => {
-              //To center align the tooltip above the icons
-              if (!left) setLeft(-(width / 2));
-            }}
-            ref={tooltipRef}>
-            <Text style={[styles.textStyle, {padding: 24}]} numberOfLines={1}>
-              {props.text}
-            </Text>
-          </View>
-          <View style={styles.downsideTriangleIconContainer}>
-            <ImageIcon
-              customSize={{
-                width: styles.downsideTriangleIcon.width,
-                height: styles.downsideTriangleIcon.height,
-              }}
-              name={'downside-triangle'}
-              tintColor={$config.CARD_LAYER_3_COLOR}
-            />
-          </View>
-        </>
-      ) : (
-        <></>
-      )}
-      {/* toolTip modal for mobile  */}
-      {(isMobileUA() || !hoverMode) && (
-        <>
-          <Modal
-            animationType="none"
-            transparent={true}
-            visible={toolTipVisible}
-            onRequestClose={() => {
-              setToolTipVisible(!toolTipVisible);
-            }}>
-            <TouchableWithoutFeedback
-              onPress={() => {
-                setToolTipVisible(false);
-              }}>
-              <View style={styles.backDrop} />
-            </TouchableWithoutFeedback>
-            <View
-              style={[styles.textContainer, position, {maxWidth: width - 100}]}
-              onLayout={({
-                nativeEvent: {
-                  layout: {x, y, width, height},
-                },
-              }) => {
-                //To center align the tooltip above the icons
-                setModalPosition(width);
-              }}
-              ref={tooltipRef}>
-              {props?.bubbleIconProps ? (
-                <View
-                  style={{
-                    paddingLeft: 12,
-                    marginRight: -4,
-                    alignSelf: 'center',
-                  }}>
-                  <ImageIcon {...props.bubbleIconProps} />
-                </View>
-              ) : (
-                <></>
-              )}
-              <Text style={[styles.textStyle, {padding: 12}]}>
-                {props.text}
-              </Text>
-            </View>
-          </Modal>
-          {toolTipVisible ? (
-            <View style={styles.downsideTriangleIconContainer}>
-              <ImageIcon
-                customSize={{
-                  width: styles.downsideTriangleIcon.width,
-                  height: styles.downsideTriangleIcon.height,
-                }}
-                name={'downside-triangle'}
-                tintColor={$config.CARD_LAYER_3_COLOR}
-              />
-            </View>
-          ) : (
-            <></>
-          )}
-        </>
-      )}
-      {/* info icon */}
-      <View style={styles.iconStyleView} ref={pressableRef}>
-        <ImageIcon
-          iconSize={props.iconProps.iconSize}
-          name={props.iconProps.name}
-          tintColor={
-            toolTipVisible
-              ? props?.iconProps.activeTintColor || props?.iconProps.tintColor
-              : props?.iconProps.tintColor
-          }
-        />
-      </View>
-    </PlatformWrapper>
-  );
-};
-
-const PlatformWrapper = ({
-  children,
-  onPress,
-  setToolTipVisible,
-  toolTipVisible,
-  hoverMode,
-}) => {
-  if (isWebInternal()) {
-    window.addEventListener('resize', () => {
-      setToolTipVisible(false);
-    });
-  }
-  return hoverMode && isWebInternal() && !isMobileUA() ? (
-    <div
-      style={{
-        position: 'relative',
-        marginTop: -3,
-        marginLeft: -3,
-        background:
-          hoverMode && toolTipVisible
-            ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%']
-            : 'transparent',
-        width: 28,
-        height: 28,
-        borderRadius: '50%',
-      }}
-      onMouseEnter={() => {
-        setToolTipVisible(true);
-      }}
-      onMouseLeave={() => {
-        setToolTipVisible(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    <View
-      style={{
-        position: 'relative',
-        marginTop: -3,
-        marginLeft: -3,
-        backgroundColor:
-          hoverMode && toolTipVisible
-            ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%']
-            : 'transparent',
-
-        width: 28,
-        height: 28,
-        borderRadius: 14,
-      }}>
-      <Pressable hitSlop={2} onPress={onPress}>
-        {children}
-      </Pressable>
-    </View>
-  );
-};
-
-export default InfoBubble;
-
-const styles = StyleSheet.create({
-  iconStyleView: {
-    marginTop: 4,
-    marginLeft: 4,
-  },
-  downsideTriangleIconContainer: {
-    position: 'absolute',
-    top: -24,
-    left: -2,
-    zIndex: 999,
-  },
-  downsideTriangleIcon: {
-    width: 27,
-    height: 36,
-  },
-  textContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    position: 'absolute',
-    zIndex: 998,
-    backgroundColor: $config.CARD_LAYER_3_COLOR,
-    top: -87,
-    borderRadius: 12,
-    shadowColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['10%'],
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    elevation: 5,
-    shadowRadius: 2,
-  },
-  textStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 24,
-    textAlign: 'left',
-    color: $config.FONT_COLOR,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'transparent',
-  },
-});

package/template/src/atoms/Input.tsx

@@ -1,87 +0,0 @@
-import {
-  StyleSheet,
-  Text,
-  TextInput,
-  TextInputProps,
-  View,
-  Platform,
-  TextStyle,
-} from 'react-native';
-import React from 'react';
-import Spacer from './Spacer';
-import ThemeConfig from '../theme';
-
-interface InputProps extends TextInputProps {
-  helpText?: string;
-  label?: string;
-  labelStyle?: TextStyle;
-  autoFocus?: boolean;
-}
-const Input = (props: InputProps) => {
-  const {style, labelStyle, helpText, label, autoFocus, ...otherProps} = props;
-  const [isFocussed, setIsFocussed] = React.useState(() =>
-    autoFocus ? true : false,
-  );
-  return (
-    <>
-      {label ? (
-        <>
-          <Text style={[styles.label, labelStyle]}>{label}</Text>
-          <Spacer size={8} />
-        </>
-      ) : (
-        <></>
-      )}
-
-      <TextInput
-        style={[
-          styles.input,
-          style,
-          // {borderColor: isFocussed ? $config.FONT_COLOR : '#666666'},
-        ]}
-        placeholderTextColor={
-          $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
-        }
-        autoCorrect={false}
-        // autoFocus
-        {...otherProps}
-        // onFocus={() => setIsFocussed(true)}
-        // onBlur={() => setIsFocussed(false)}
-      />
-      {/* {helpText && <Text style={styles.helpText}>{props.helpText}</Text>} */}
-    </>
-  );
-};
-
-export default Input;
-
-const styles = StyleSheet.create({
-  input: {
-    // height: 60, //causes text cut off in android
-    width: '100%',
-    borderWidth: 1,
-    paddingVertical: 21,
-    paddingHorizontal: 16,
-    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
-    color: $config.FONT_COLOR,
-    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: ThemeConfig.FontSize.medium,
-    borderRadius: ThemeConfig.BorderRadius.medium,
-    ...Platform.select({
-      web: {
-        outlineStyle: 'none',
-      },
-    }),
-  },
-  label: {
-    fontWeight: '600',
-    fontSize: ThemeConfig.FontSize.medium,
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-  },
-  helpText: {
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-  },
-});

package/template/src/atoms/InviteInfo.tsx

@@ -1,166 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import isSDKCheck from '../utils/isSDK';
-import platform from '../subComponents/Platform';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import {
-  SHARE_LINK_CONTENT_TYPE,
-  useShareLink,
-} from '../components/useShareLink';
-import Spacer from './Spacer';
-
-import React from 'react';
-import IconButton from './IconButton';
-
-const InviteInfo = () => {
-  const meetingUrlText = 'Meeting Link';
-  const meetingIdText = 'Meeting ID';
-  const hostIdText = 'Host ID';
-  const attendeeUrlLabel = 'Attendee Link';
-  const attendeeIdLabel = 'Attendee ID';
-  const hostUrlLabel = 'Host Link';
-  const pstnLabel = 'PSTN';
-  const pstnNumberLabel = 'Number';
-  const pinLabel = 'Pin';
-  const urlWeb = {wordBreak: 'break-all'};
-
-  const {copyShareLinkToClipboard, getShareLink} = useShareLink();
-  const {
-    data: {isSeparateHostLink},
-  } = useMeetingInfo();
-
-  const isSDK = isSDKCheck();
-  const isWeb = $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
-  const getAttendeeLabel = () => (isWeb ? attendeeUrlLabel : attendeeIdLabel);
-  const getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWeb) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWeb) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
-  return (
-    <>
-      {isSeparateHostLink ? (
-        <>
-          <Text style={style.urlTitle}>{getAttendeeLabel()}</Text>
-          <View style={style.urlContainer}>
-            <View style={{width: '90%'}}>
-              <View style={style.urlHolder}>
-                <Text
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                  style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
-                  {getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
-                </Text>
-              </View>
-            </View>
-            <View
-              style={{
-                marginLeft: 'auto',
-                flexDirection: 'row',
-                alignSelf: 'center',
-              }}>
-              <IconButton
-                iconProps={{
-                  name: 'clipboard',
-                }}
-                onPress={() =>
-                  copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.ATTENDEE)
-                }
-              />
-              {/* </View> */}
-            </View>
-          </View>
-          <Text style={style.helpText}>
-            Copy the invite and share it with attendees you want to invite.
-          </Text>
-          <Spacer size={20} />
-        </>
-      ) : (
-        <></>
-      )}
-      <>
-        <Text style={style.urlTitle}>{getHostLabel()}</Text>
-        <View style={style.urlContainer}>
-          <View style={{width: '90%'}}>
-            <View style={style.urlHolder}>
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
-                {getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
-              </Text>
-            </View>
-          </View>
-
-          <View
-            style={{
-              marginLeft: 'auto',
-              flexDirection: 'row',
-              alignSelf: 'center',
-            }}>
-            <IconButton
-              iconProps={{
-                name: 'clipboard',
-                tintColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-              }}
-              onPress={() =>
-                copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.HOST)
-              }
-            />
-          </View>
-        </View>
-        <Text style={style.helpText}>
-          Copy the invite and share it with other co-hosts you want to invite
-        </Text>
-      </>
-    </>
-  );
-};
-
-export default InviteInfo;
-
-const style = StyleSheet.create({
-  urlContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: '#F2F2F2',
-    paddingVertical: 22,
-    paddingHorizontal: 20,
-    borderRadius: 8,
-  },
-  urlTitle: {
-    color: $config.FONT_COLOR,
-    fontSize: 18,
-    fontWeight: '600',
-    fontFamily: 'Source Sans Pro',
-    textAlign: 'left',
-    marginBottom: 8,
-  },
-  urlHolder: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    minHeight: 30,
-  },
-  helpText: {
-    color: '#CCCCCC',
-    marginTop: 10,
-    fontSize: 14,
-    fontWeight: '400',
-    fontFamily: 'Source Sans Pro',
-  },
-  url: {
-    color: $config.FONT_COLOR,
-    fontSize: 14,
-    fontWeight: '600',
-    fontFamily: 'Source Sans Pro',
-  },
-});

package/template/src/atoms/LinkButton.tsx

@@ -1,28 +0,0 @@
-import {StyleSheet, Text, TouchableOpacity} from 'react-native';
-import React from 'react';
-import ThemeConfig from '../theme';
-
-interface LinkButtonProps {
-  onPress: () => void;
-  text: string;
-}
-
-const LinkButton = ({onPress, text}: LinkButtonProps) => {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <Text style={styles.text}> {text} </Text>
-    </TouchableOpacity>
-  );
-};
-
-export default LinkButton;
-
-const styles = StyleSheet.create({
-  text: {
-    color: $config.PRIMARY_ACTION_BRAND_COLOR,
-    fontWeight: '600',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: ThemeConfig.FontSize.normal,
-  },
-});

package/template/src/atoms/OutlineButton.tsx

@@ -1,61 +0,0 @@
-import {IconsInterface} from '../atoms/CustomIcon';
-import ImageIcon from './ImageIcon';
-import React from 'react';
-import {
-  ImageStyle,
-  TextStyle,
-  TouchableOpacity,
-  ViewStyle,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-
-interface OutlineButtonProps {
-  onPress: () => void;
-  text: string;
-  containerStyle?: ViewStyle;
-  iconName?: keyof IconsInterface;
-  iconStyle?: ImageStyle;
-  textStyle?: TextStyle;
-}
-
-const OutlineButton = (props: OutlineButtonProps) => {
-  return (
-    <TouchableOpacity
-      onPress={props.onPress}
-      style={[styles.containerStyle, props?.containerStyle]}>
-      {props?.iconName ? (
-        <View style={styles.iconStyleView}>
-          <ImageIcon iconSize={20} iconType="plain" name={props.iconName} />
-        </View>
-      ) : (
-        <></>
-      )}
-      <Text style={[styles.textStyle, props?.textStyle]}>{props.text}</Text>
-    </TouchableOpacity>
-  );
-};
-
-export default OutlineButton;
-const styles = StyleSheet.create({
-  containerStyle: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 20,
-    borderWidth: 1,
-    borderColor: '#099DFD',
-    borderRadius: 4,
-  },
-  iconStyleView: {
-    margin: 8,
-    alignSelf: 'center',
-  },
-  textStyle: {
-    paddingVertical: 12,
-    paddingRight: 12,
-    color: '#099DFD',
-    textAlign: 'left',
-  },
-});

package/template/src/atoms/ParticipantsCount.tsx

@@ -1,73 +0,0 @@
-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';
-
-const ParticipantsCount = () => {
-  const {onlineUsersCount} = useContext(ChatContext);
-  const {audienceUids, hostUids} = useLiveStreamDataContext();
-  const {attendeeUids, hostUids: hostUidsVM} = useVideoMeetingData();
-  return (
-    <IconButton
-      placement="right"
-      isClickable={isMobileUA() ? true : false}
-      toolTipMessage={
-        $config.EVENT_MODE
-          ? `Host: ${
-              $config.EVENT_MODE
-                ? hostUids?.length || 0
-                : hostUidsVM.length || 0
-            }\n${$config.EVENT_MODE ? 'Audience: ' : 'Attendee: '}${
-              $config.EVENT_MODE
-                ? audienceUids.length || 0
-                : attendeeUids?.length || 0
-            }`
-          : ''
-      }
-      containerStyle={styles.participantCountView}
-      disabled={true}
-      iconProps={{
-        name: 'people',
-        iconType: 'plain',
-        iconSize: 20,
-        tintColor:
-          $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
-      }}
-      btnTextProps={{
-        text: numFormatter(onlineUsersCount),
-        textColor:
-          $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
-        textStyle: {
-          fontWeight: '600',
-          fontSize: 12,
-          lineHeight: 12,
-          marginTop: 0,
-          marginLeft: 4,
-        },
-      }}
-    />
-  );
-};
-
-export default ParticipantsCount;
-
-const styles = StyleSheet.create({
-  participantCountView: {
-    flexDirection: 'row',
-    padding: 12,
-    paddingVertical: isMobileUA ? 5 : 12,
-    backgroundColor: $config.ICON_BG_COLOR,
-    borderRadius: 25,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.1,
-    shadowRadius: 20,
-  },
-});