agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/subComponents/LayoutIconButton.tsx

@@ -1,201 +0,0 @@
-import React, {useState, useRef} from 'react';
-
-import LayoutIconDropdown from './LayoutIconDropdown';
-import useLayoutsData from '../pages/video-call/useLayoutsData';
-import {useChangeDefaultLayout} from '../pages/video-call/DefaultLayouts';
-import {useLayout} from '../utils/useLayout';
-import IconButton, {IconButtonProps} from '../atoms/IconButton';
-import {isMobileUA} from '../utils/common';
-import isMobileOrTablet from '../utils/isMobileOrTablet';
-import {useWindowDimensions} from 'react-native';
-import {useRender} from 'customization-api';
-
-interface LayoutIconButtonInterface {
-  render?: (onPress: () => void) => JSX.Element;
-  showLabel?: boolean;
-}
-
-const LayoutIconButton = (props: LayoutIconButtonInterface) => {
-  const {activeUids} = useRender();
-  const {height: windowHeight} = useWindowDimensions();
-  const [modalPosition, setModalPosition] = useState(null);
-  const layoutBtnRef = useRef();
-  const [isHovered, setIsHoveredLocal] = useState(false);
-  const [isHoveredOnModal, setIsHoveredOnModal] = useState(false);
-  const isMobileView = isMobileUA();
-  const {showLabel = $config.ICON_TEXT} = props;
-  const setIsHovered = (hovered: boolean) => {
-    if (layoutBtnRef && layoutBtnRef.current) {
-      layoutBtnRef?.current?.measure((_fx, _fy, _w, h, _px, _py) => {
-        setModalPosition({
-          bottom: isMobileOrTablet()
-            ? windowHeight - _py + 10
-            : windowHeight - _py - 10,
-          left: isMobileOrTablet() ? _px - 10 : -10,
-        });
-        setIsHoveredLocal(hovered);
-      });
-    }
-  };
-  //commented for v1 release
-  //const layoutLabel = useString('layoutLabel')('');
-  const layoutLabel = 'Layout';
-  const layouts = useLayoutsData();
-  const changeLayout = useChangeDefaultLayout();
-  const {currentLayout, setLayout} = useLayout();
-
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
-  const renderLayoutIcon = (showDropdown?: boolean) => {
-    let onPress = () => {};
-    let renderContent = [];
-    if (!showDropdown) {
-      onPress = () => {
-        changeLayout();
-      };
-    } else {
-      onPress = () => {
-        //desktop web don't need onpress
-        if (isMobileUA()) {
-          setIsHovered(!isHovered);
-        }
-      };
-    }
-    let iconButtonProps: Partial<IconButtonProps> = {
-      onPress: onPress,
-      btnTextProps: {
-        text: showLabel ? layoutLabel : '',
-        textColor: $config.FONT_COLOR,
-      },
-    };
-    const iconName =
-      layouts[layout]?.iconName === 'pinned' && isMobileView
-        ? 'list-view'
-        : layouts[layout]?.iconName;
-
-    renderContent.push(
-      props?.render ? (
-        props.render(onPress)
-      ) : (
-        <PlatformWrapper
-          key={'layout-icon-btn'}
-          //showDropdown={isHovered}
-          setIsHovered={
-            setIsHovered
-            // (flag) => {
-            //   if (flag) {
-            //     setIsHovered(true);
-            //   } else {
-            //     if (isMobileOrTablet()) {
-            //       setIsHovered(false);
-            //     } else {
-            //       setTimeout(() => {
-            //         setIsHovered(false);
-            //       }, 100);
-            //     }
-            //   }
-            // }
-          }>
-          <IconButton
-            disabled={!activeUids || activeUids.length === 0}
-            containerStyle={{
-              opacity: !activeUids || activeUids.length === 0 ? 0.6 : 1,
-            }}
-            setRef={(ref) => {
-              layoutBtnRef.current = ref;
-            }}
-            key={'defaultLayoutIconWithName'}
-            iconProps={{
-              name: iconName,
-              tintColor: $config.SECONDARY_ACTION_COLOR,
-            }}
-            {...iconButtonProps}
-          />
-        </PlatformWrapper>
-      ),
-    );
-    return renderContent;
-  };
-  return (
-    <>
-      {/**
-       * Based on the flag. it will render the dropdown
-       */}
-      {activeUids && activeUids.length ? (
-        <PlatformWrapperPopup
-          setIsHovered={
-            isMobileOrTablet()
-              ? setIsHovered
-              : (isHoveredOnPopup: boolean) => {
-                  if (isHoveredOnPopup) {
-                    setIsHoveredOnModal(isHoveredOnPopup);
-                  } else {
-                    if (isMobileUA()) {
-                      setIsHoveredOnModal(isHoveredOnPopup);
-                    } else {
-                      setTimeout(() => {
-                        if (!isHovered) {
-                          setIsHoveredOnModal(isHoveredOnPopup);
-                        }
-                      }, 100);
-                    }
-                  }
-                }
-          }>
-          <LayoutIconDropdown
-            caretPosition={{
-              bottom: isMobileOrTablet() ? -8 : -10,
-              left: isMobileOrTablet() ? 26 : 26,
-            }}
-            modalPosition={modalPosition}
-            showDropdown={
-              isMobileOrTablet() ? isHovered : isHovered || isHoveredOnModal
-            }
-            setShowDropdown={
-              isMobileOrTablet() ? setIsHovered : setIsHoveredOnModal
-            }
-          />
-        </PlatformWrapperPopup>
-      ) : (
-        <></>
-      )}
-      {/**
-       * If layout contains more than 2 data. it will render the dropdown.
-       */}
-      {layouts && Array.isArray(layouts) && layouts.length > 1
-        ? renderLayoutIcon(true)
-        : renderLayoutIcon(false)}
-    </>
-  );
-};
-const PlatformWrapper = ({children, ...props}) => {
-  return !isMobileOrTablet() ? (
-    <div
-      onMouseEnter={() => {
-        props?.setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        props?.setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-};
-const PlatformWrapperPopup = ({children, ...props}) => {
-  return !isMobileOrTablet() ? (
-    <div
-      onMouseEnter={() => {
-        props?.setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        props?.setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-};
-
-export default LayoutIconButton;

package/template/src/subComponents/RemoteMutePopup.tsx

@@ -1,193 +0,0 @@
-import {
-  Modal,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import React, {SetStateAction} from 'react';
-import ThemeConfig from '../theme';
-import Spacer from '../atoms/Spacer';
-import PlatformWrapper from '../utils/PlatformWrapper';
-import {isMobileOrTablet} from 'customization-api';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-
-export interface ActionMenuProps {
-  actionMenuVisible: boolean;
-  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
-  modalPosition?: {
-    top?: number;
-    right?: number;
-    left?: number;
-    bottom?: number;
-  };
-  name: string;
-  onMutePress: () => void;
-  type: 'video' | 'audio';
-  action?: 'mute' | 'request';
-}
-
-const RemoteMutePopup = (props: ActionMenuProps) => {
-  const {height} = useWindowDimensions();
-  const {
-    actionMenuVisible,
-    setActionMenuVisible,
-    modalPosition,
-    action = 'mute',
-  } = props;
-  let message = '';
-
-  if (props.name) {
-    //mute action
-    if (action === 'mute') {
-      message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
-    }
-    //request action
-    else {
-      if (props?.type === 'audio') {
-        message = `Request ${props.name} to turn on their microphone?`;
-      } else {
-        message = `Request ${props.name} to turn on their camera?`;
-      }
-    }
-  } else {
-    message = `Mute everyone's ${props.type} on the call?`;
-  }
-
-  return (
-    <View>
-      <Modal
-        testID="action-menu"
-        animationType="none"
-        transparent={true}
-        visible={actionMenuVisible}>
-        <TouchableWithoutFeedback
-          onPress={() => {
-            setActionMenuVisible(false);
-          }}>
-          <View
-            style={[
-              styles.backDrop,
-              isMobileOrTablet()
-                ? {
-                    backgroundColor:
-                      $config.HARD_CODED_BLACK_COLOR +
-                      hexadecimalTransparency['50%'],
-                  }
-                : {},
-            ]}
-          />
-        </TouchableWithoutFeedback>
-        <View
-          style={
-            isMobileOrTablet()
-              ? [styles.modalViewUA, {marginTop: height / 3}]
-              : [styles.modalView, modalPosition]
-          }>
-          <View style={styles.container}>
-            <Text style={styles.messageStyle}>{message}</Text>
-            <View style={styles.btnContainer}>
-              <PlatformWrapper>
-                {(isHovered: boolean) => {
-                  return (
-                    <TouchableOpacity
-                      style={isHovered ? styles.onHoverBtnStyle : {}}
-                      onPress={() => props.setActionMenuVisible(false)}>
-                      <Text style={styles.btnText}>Cancel</Text>
-                    </TouchableOpacity>
-                  );
-                }}
-              </PlatformWrapper>
-              <Spacer size={8} horizontal={true} />
-              <PlatformWrapper>
-                {(isHovered: boolean) => {
-                  return (
-                    <TouchableOpacity
-                      style={isHovered ? styles.onHoverBtnStyle : {}}
-                      onPress={() => props.onMutePress()}>
-                      <Text style={styles.btnText}>
-                        {action === 'mute' ? 'Mute' : 'Request'}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                }}
-              </PlatformWrapper>
-            </View>
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default RemoteMutePopup;
-
-const styles = StyleSheet.create({
-  onHoverBtnStyle: {
-    backgroundColor: $config.CARD_LAYER_3_COLOR,
-    borderRadius: 8,
-  },
-  container: {
-    paddingHorizontal: 12,
-    paddingTop: 24,
-    paddingBottom: 14,
-  },
-  messageStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.normal,
-    color: $config.FONT_COLOR,
-    paddingBottom: 18,
-  },
-  btnText: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.normal,
-    color: $config.PRIMARY_ACTION_BRAND_COLOR,
-  },
-  btnContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  modalView: {
-    position: 'absolute',
-    width: 290,
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 4,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    zIndex: 1,
-    elevation: 1,
-  },
-  modalViewUA: {
-    alignSelf: 'center',
-    maxWidth: '80%',
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 4,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    zIndex: 1,
-    elevation: 1,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});

package/template/src/subComponents/RemoveMeetingPopup.tsx

@@ -1,109 +0,0 @@
-import React, {SetStateAction, useContext} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import Spacer from '../atoms/Spacer';
-import Popup from '../atoms/Popup';
-import TertiaryButton from '../atoms/TertiaryButton';
-import PrimaryButton from '../atoms/PrimaryButton';
-import ThemeConfig from '../theme';
-import {useIsDesktop} from '../utils/common';
-
-interface RemoveMeetingPopupProps {
-  modalVisible: boolean;
-  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  removeUserFromMeeting: () => void;
-  username: string;
-}
-const RemoveMeetingPopup = (props: RemoveMeetingPopupProps) => {
-  const isDesktop = useIsDesktop()('popup');
-  const removeMeetingLabelHeading = 'Remove ' + props.username + '?';
-  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to rejoin the meeting later.`;
-
-  const cancelBtnLabel = 'CANCEL';
-  const removeBtnLabel = 'REMOVE';
-  return (
-    <Popup
-      modalVisible={props.modalVisible}
-      setModalVisible={props.setModalVisible}
-      showCloseIcon={false}
-      contentContainerStyle={styles.contentContainer}>
-      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
-      <Spacer size={8} />
-      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
-      <Spacer size={32} />
-      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
-        <View style={isDesktop && {flex: 1}}>
-          <TertiaryButton
-            containerStyle={{
-              width: '100%',
-              height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-              borderRadius: ThemeConfig.BorderRadius.medium,
-            }}
-            textStyle={styles.btnText}
-            text={cancelBtnLabel}
-            onPress={() => props.setModalVisible(false)}
-          />
-        </View>
-        <Spacer
-          size={isDesktop ? 10 : 20}
-          horizontal={isDesktop ? true : false}
-        />
-        <View style={isDesktop && {flex: 1}}>
-          <PrimaryButton
-            containerStyle={{
-              minWidth: 'auto',
-              width: '100%',
-              borderRadius: ThemeConfig.BorderRadius.medium,
-              height: 48,
-              backgroundColor: $config.SEMANTIC_ERROR,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-            }}
-            textStyle={styles.btnText}
-            text={removeBtnLabel}
-            onPress={() => {
-              props.removeUserFromMeeting();
-              props.setModalVisible(false);
-            }}
-          />
-        </View>
-      </View>
-    </Popup>
-  );
-};
-
-export default RemoveMeetingPopup;
-
-const styles = StyleSheet.create({
-  btnContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    padding: 24,
-    maxWidth: 342,
-  },
-  btnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  btnContainerMobile: {
-    flexDirection: 'column-reverse',
-  },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 22,
-    color: $config.SEMANTIC_ERROR,
-  },
-  subHeading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: 14,
-    color: $config.FONT_COLOR,
-  },
-});

package/template/src/subComponents/RemoveScreensharePopup.tsx

@@ -1,109 +0,0 @@
-import React, {SetStateAction, useContext} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import Spacer from '../atoms/Spacer';
-import Popup from '../atoms/Popup';
-import TertiaryButton from '../atoms/TertiaryButton';
-import PrimaryButton from '../atoms/PrimaryButton';
-import ThemeConfig from '../theme';
-import {useIsDesktop} from '../utils/common';
-
-interface RemoveScreensharePopupProps {
-  modalVisible: boolean;
-  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  removeScreenShareFromMeeting: () => void;
-  username: string;
-}
-const RemoveScreensharePopup = (props: RemoveScreensharePopupProps) => {
-  const isDesktop = useIsDesktop()('popup');
-  const removeMeetingLabelHeading = 'Remove Screenshare?';
-  const removeMeetingLabelSubHeading = `Once removed, ${props.username} will still be able to screen share later.`;
-
-  const cancelBtnLabel = 'CANCEL';
-  const removeBtnLabel = 'REMOVE';
-  return (
-    <Popup
-      modalVisible={props.modalVisible}
-      setModalVisible={props.setModalVisible}
-      showCloseIcon={false}
-      contentContainerStyle={styles.contentContainer}>
-      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
-      <Spacer size={8} />
-      <Text style={styles.subHeading}>{removeMeetingLabelSubHeading}</Text>
-      <Spacer size={32} />
-      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
-        <View style={isDesktop && {flex: 1}}>
-          <TertiaryButton
-            containerStyle={{
-              width: '100%',
-              height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-              borderRadius: ThemeConfig.BorderRadius.medium,
-            }}
-            textStyle={styles.btnText}
-            text={cancelBtnLabel}
-            onPress={() => props.setModalVisible(false)}
-          />
-        </View>
-        <Spacer
-          size={isDesktop ? 10 : 20}
-          horizontal={isDesktop ? true : false}
-        />
-        <View style={isDesktop && {flex: 1}}>
-          <PrimaryButton
-            containerStyle={{
-              minWidth: 'auto',
-              width: '100%',
-              borderRadius: ThemeConfig.BorderRadius.medium,
-              height: 48,
-              backgroundColor: $config.SEMANTIC_ERROR,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-            }}
-            textStyle={styles.btnText}
-            text={removeBtnLabel}
-            onPress={() => {
-              props.removeScreenShareFromMeeting();
-              props.setModalVisible(false);
-            }}
-          />
-        </View>
-      </View>
-    </Popup>
-  );
-};
-
-export default RemoveScreensharePopup;
-
-const styles = StyleSheet.create({
-  btnContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    padding: 24,
-    maxWidth: 342,
-  },
-  btnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  btnContainerMobile: {
-    flexDirection: 'column-reverse',
-  },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 22,
-    color: $config.SEMANTIC_ERROR,
-  },
-  subHeading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: 14,
-    color: $config.FONT_COLOR,
-  },
-});