@100mslive/react-native-room-kit/lib/module/components/StopRecordingModalContent.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 { useDispatch, useSelector } from 'react-redux';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
import { AlertTriangleIcon, CloseIcon } from '../Icons';
import { HMSDangerButton } from './HMSDangerButton';
import { setStartingOrStoppingRecording } from '../redux/actions';
export const StopRecordingModalContent = ({
  dismissModal
}) => {
  const dispatch = useDispatch();
  const hmsInstance = useHMSInstance();
  const startingOrStoppingRecording = useSelector(state => {
    var _state$hmsStates$room;
    return state.app.startingOrStoppingRecording || (((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.browserRecordingState.initialising) ?? false);
  });
  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 stopRecording = async () => {
    dispatch(setStartingOrStoppingRecording(true));
    try {
      await hmsInstance.stopRtmpAndRecording();
      dismissModal();
    } catch (error) {
      dispatch(setStartingOrStoppingRecording(false));
    }
  };
  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, {
    style: [styles.headerText, hmsRoomStyles.headerText]
  }, "Stop Recording")), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: dismissModal,
    hitSlop: styles.closeIconHitSlop
  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, hmsRoomStyles.text]
  }, "Are you sure you want to stop recording? You can't undo this action."), /*#__PURE__*/React.createElement(HMSDangerButton, {
    loading: startingOrStoppingRecording,
    onPress: stopRecording,
    title: "Stop Recording",
    disabled: startingOrStoppingRecording
  }));
};
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: 16
  }
});
//# sourceMappingURL=StopRecordingModalContent.js.map