@100mslive/react-native-room-kit/lib/module/components/LeaveRoomBottomSheet.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSelector } from 'react-redux';
import { LeaveIcon } from '../Icons';
import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
import { BottomSheet } from './BottomSheet';
import { StopIcon } from '../Icons';
import { ModalTypes, OnLeaveReason } from '../utils/types';
import { TestIds } from '../utils/constants';
import { useIsHLSStreamingOn } from '../hooks-sdk';

// const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
// const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING

export const LeaveRoomBottomSheet = () => {
  const canEndRoom = useSelector(state => {
    var _state$hmsStates$loca;
    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.permissions) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.endRoom;
  });
  const canStream = useSelector(state => {
    var _state$hmsStates$loca2;
    return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.permissions) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.hlsStreaming;
  });
  const isHLSStreaming = useIsHLSStreamingOn();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    text: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    subtext: {
      color: theme.palette.on_surface_low,
      fontFamily: `${typography.font_family}-Regular`
    },
    endButton: {
      backgroundColor: theme.palette.alert_error_dim
    },
    endText: {
      color: theme.palette.alert_error_brighter,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    endSubtext: {
      color: theme.palette.alert_error_bright,
      fontFamily: `${typography.font_family}-Regular`
    },
    endIcon: {
      tintColor: theme.palette.alert_error_brighter
    }
  }));
  const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
  const {
    modalVisibleType,
    handleModalVisibleType
  } = useModalType();
  const {
    leave
  } = useLeaveMethods();

  /**
   * Closes the Leave Popup Menu
   * No action is taken when the popup is hidden
   */
  const onPopupDismiss = () => {
    leavePopCloseAction.current = ModalTypes.DEFAULT;
    handleModalVisibleType(ModalTypes.DEFAULT);
  };

  /**
   * Closes the Leave Popup Menu
   * Leave Modal will open after the popup is hidden
   */
  const onLeavePress = async () => {
    leavePopCloseAction.current = ModalTypes.DEFAULT;
    handleModalVisibleType(ModalTypes.DEFAULT);
    await leave(OnLeaveReason.LEAVE);
  };

  /**
   * Closes the Leave Popup Menu
   * End Session Modal will open after the popup is hidden
   */
  const onEndSessionPress = async () => {
    leavePopCloseAction.current = ModalTypes.END_ROOM;
    handleModalVisibleType(ModalTypes.DEFAULT);
  };
  const onEndStreamPress = async () => {
    leavePopCloseAction.current = ModalTypes.END_ROOM;
    handleModalVisibleType(ModalTypes.DEFAULT);
  };

  /**
   * Handles action to take when the leave popup is hidden
   */
  const handlePopupHide = () => {
    if (leavePopCloseAction.current !== ModalTypes.DEFAULT) {
      handleModalVisibleType(leavePopCloseAction.current);
    }
  };
  return /*#__PURE__*/React.createElement(BottomSheet, {
    isVisible: modalVisibleType === ModalTypes.LEAVE_ROOM,
    bottomOffsetSpace: 0,
    dismissModal: onPopupDismiss,
    onModalHide: handlePopupHide
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: TestIds.leave_cta,
    style: styles.button,
    onPress: onLeavePress
  }, /*#__PURE__*/React.createElement(LeaveIcon, {
    style: styles.icon
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.textContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, hmsRoomStyles.text]
  }, "Leave"), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.leave_description,
    style: [styles.subtext, hmsRoomStyles.subtext]
  }, "Others will continue after you leave. You can join the session again."))), canStream && isHLSStreaming ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: TestIds.end_stream_cta,
    style: [styles.button, hmsRoomStyles.endButton],
    onPress: onEndStreamPress
  }, /*#__PURE__*/React.createElement(StopIcon, {
    style: [styles.icon, hmsRoomStyles.endIcon]
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.textContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, hmsRoomStyles.endText]
  }, "End Stream"), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.end_stream_description,
    style: [styles.subtext, hmsRoomStyles.endSubtext]
  }, "The stream will end for everyone after they\u2019ve watched it."))) : canEndRoom ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: TestIds.end_session_cta,
    style: [styles.button, hmsRoomStyles.endButton],
    onPress: onEndSessionPress
  }, /*#__PURE__*/React.createElement(StopIcon, {
    style: [styles.icon, hmsRoomStyles.endIcon]
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.textContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, hmsRoomStyles.endText]
  }, "End Session"), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.end_session_description,
    style: [styles.subtext, hmsRoomStyles.endSubtext]
  }, "The session will end for everyone in the room immediately."))) : null));
};
const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    padding: 24
  },
  icon: {
    width: 24,
    height: 24,
    marginRight: 16
  },
  textContainer: {
    flex: 1
  },
  text: {
    fontSize: 20,
    lineHeight: 24,
    letterSpacing: 0.15
  },
  subtext: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25,
    marginTop: 4
  }
});
//# sourceMappingURL=LeaveRoomBottomSheet.js.map