@100mslive/react-native-room-kit/lib/module/components/EndRoomModalContent.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 { useSelector } from 'react-redux';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
import { AlertTriangleIcon, CloseIcon } from '../Icons';
import { HMSDangerButton } from './HMSDangerButton';
import { OnLeaveReason } from '../utils/types';
import { TestIds } from '../utils/constants';
import { useIsHLSStreamingOn } from '../hooks-sdk';
export const EndRoomModalContent = ({
  dismissModal
}) => {
  const {
    endRoom,
    leave
  } = useLeaveMethods();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    headerText: {
      color: theme.palette.alert_error_default,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    text: {
      color: theme.palette.on_surface_medium,
      fontFamily: `${typography.font_family}-Regular`
    }
  }));
  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();
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.header
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.headerControls
  }, /*#__PURE__*/React.createElement(AlertTriangleIcon, null), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.end_confirmation_heading,
    style: [styles.headerText, hmsRoomStyles.headerText]
  }, canStream && isHLSStreaming ? 'End Stream' : canEndRoom ? 'End Session' : 'Leave')), /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: TestIds.end_confirmation_close_btn,
    onPress: dismissModal,
    hitSlop: styles.closeIconHitSlop
  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.end_confirmation_description,
    style: [styles.text, hmsRoomStyles.text]
  }, canStream && isHLSStreaming ? 'The stream will end for everyone after they’ve watched it.' : canEndRoom ? 'The session will end for everyone in the room immediately. ' : 'Others will continue after you leave. You can join the session again.'), /*#__PURE__*/React.createElement(HMSDangerButton, {
    testID: TestIds.end_confirmation_cta,
    loading: false,
    onPress: () => {
      if (canStream && isHLSStreaming) {
        leave(OnLeaveReason.LEAVE, true);
      } else {
        endRoom(OnLeaveReason.ROOM_END);
      }
    },
    title: canStream && isHLSStreaming ? 'End Stream' : 'End Session'
  }));
};
const styles = StyleSheet.create({
  container: {
    marginTop: 24,
    marginHorizontal: 24
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8
  },
  headerControls: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    lineHeight: 24,
    letterSpacing: 0.15,
    marginLeft: 8
  },
  closeIconHitSlop: {
    bottom: 16,
    left: 16,
    right: 16,
    top: 16
  },
  text: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25,
    marginBottom: 24
  }
});
//# sourceMappingURL=EndRoomModalContent.js.map