agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/atoms/InfoBubble.tsx

@@ -0,0 +1,291 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,166 @@
+import {StyleSheet, Text, View} from 'react-native';
+import isSDKCheck from '../utils/isSDK';
+import platform from '../subComponents/Platform';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
+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 = 'Room Link';
+  const meetingIdText = 'Room 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},
+  } = useRoomInfo();
+
+  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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,74 @@
+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: {
+          fontFamily: 'Source Sans Pro',
+          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 : 8,
+    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,
+  },
+});