@100mslive/react-native-room-kit/lib/module/components/HMSRecordingIndicator.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 { ActivityIndicator, StyleSheet } from 'react-native';
import { HMSRecordingState } from '@100mslive/react-native-hms';
import { RecordingIcon } from '../Icons';
import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
export const HMSRecordingIndicator = () => {
  const isRecordingOn = useIsAnyRecordingOn();
  const isRecordingPaused = useIsAnyRecordingPaused();
  const startingOrStoppingRecording = useSelector(state => {
    var _state$hmsStates$room, _state$hmsStates$room2, _state$hmsStates$room3;
    return state.app.startingOrStoppingRecording || ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.browserRecordingState.state) === HMSRecordingState.STARTING || ((_state$hmsStates$room2 = state.hmsStates.room) === null || _state$hmsStates$room2 === void 0 ? void 0 : _state$hmsStates$room2.serverRecordingState.state) === HMSRecordingState.STARTING || ((_state$hmsStates$room3 = state.hmsStates.room) === null || _state$hmsStates$room3 === void 0 || (_state$hmsStates$room3 = _state$hmsStates$room3.hlsRecordingState) === null || _state$hmsStates$room3 === void 0 ? void 0 : _state$hmsStates$room3.state) === HMSRecordingState.STARTING;
  });
  const {
    on_surface_high: onSurfaceHighColor
  } = useHMSRoomColorPalette();
  const iconStyles = useHMSRoomStyle(theme => ({
    tintColor: theme.palette.alert_error_default
  }));
  if (startingOrStoppingRecording) {
    return /*#__PURE__*/React.createElement(ActivityIndicator, {
      size: 'small',
      color: onSurfaceHighColor,
      style: styles.rightSpace
    });
  }
  if (isRecordingPaused) {
    return /*#__PURE__*/React.createElement(RecordingIcon, {
      type: "pause",
      style: [styles.icon, styles.rightSpace]
    });
  }
  if (isRecordingOn) {
    return /*#__PURE__*/React.createElement(RecordingIcon, {
      style: [styles.icon, styles.rightSpace, iconStyles]
    });
  }
  return null;
};
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24
  },
  rightSpace: {
    marginRight: 8
  }
});
//# sourceMappingURL=HMSRecordingIndicator.js.map