react-duration-voice-recorder/dist/index.js

A react voice recorder component that records audio within a specified duration and generates audio file and url

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var reactMediaRecorder = require('react-media-recorder');
var fa = require('react-icons/fa');

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };
  return _extends.apply(this, arguments);
}

var useTimer = function useTimer(_ref) {
  var hoursMinSecs = _ref.hoursMinSecs,
      onTimeEnd = _ref.onTimeEnd,
      _ref$start = _ref.start,
      start = _ref$start === void 0 ? false : _ref$start,
      _ref$restart = _ref.restart,
      restart = _ref$restart === void 0 ? false : _ref$restart,
      _ref$timer = _ref.timer,
      timer = _ref$timer === void 0 ? true : _ref$timer;
  var _hoursMinSecs$hours = hoursMinSecs.hours,
      hours = _hoursMinSecs$hours === void 0 ? 0 : _hoursMinSecs$hours,
      _hoursMinSecs$minutes = hoursMinSecs.minutes,
      minutes = _hoursMinSecs$minutes === void 0 ? 0 : _hoursMinSecs$minutes,
      _hoursMinSecs$seconds = hoursMinSecs.seconds,
      seconds = _hoursMinSecs$seconds === void 0 ? 60 : _hoursMinSecs$seconds;

  var _useState = React.useState([hours, minutes, seconds]),
      _useState$ = _useState[0],
      hrs = _useState$[0],
      mins = _useState$[1],
      secs = _useState$[2],
      setTime = _useState[1];

  var tick = function tick() {
    if (timer) {
      if (restart) {
        setTime([hours, minutes, seconds]);
      }

      if (start) {
        if (hrs === 0 && mins === 0 && secs === 0) {
          onTimeEnd();
        } else if (mins === 0 && secs === 0) {
          setTime([hrs - 1, 59, 59]);
        } else if (secs === 0) {
          setTime([hrs, mins - 1, 59]);
        } else {
          setTime([hrs, mins, secs - 1]);
        }
      }
    }
  };

  React.useEffect(function () {
    var timerId = setInterval(function () {
      return tick();
    }, 1000);
    return function () {
      return clearInterval(timerId);
    };
  });
  return [hrs, mins, secs];
};

var DurationRecorder = function DurationRecorder(_ref) {
  var getFile = _ref.getFile,
      getUrl = _ref.getUrl,
      _ref$containerStyle = _ref.containerStyle,
      containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
      _ref$timer = _ref.timer,
      timer = _ref$timer === void 0 ? true : _ref$timer,
      _ref$btnClass = _ref.btnClass,
      btnClass = _ref$btnClass === void 0 ? '' : _ref$btnClass,
      _ref$showPreview = _ref.showPreview,
      showPreview = _ref$showPreview === void 0 ? true : _ref$showPreview,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? {
    hours: 0,
    minutes: 0,
    seconds: 30
  } : _ref$duration;

  var _useReactMediaRecorde = reactMediaRecorder.useReactMediaRecorder({
    audio: true
  }),
      startRecording = _useReactMediaRecorde.startRecording,
      stopRecording = _useReactMediaRecorde.stopRecording,
      status = _useReactMediaRecorde.status,
      mediaBlobUrl = _useReactMediaRecorde.mediaBlobUrl,
      clearBlobUrl = _useReactMediaRecorde.clearBlobUrl,
      pauseRecording = _useReactMediaRecorde.pauseRecording,
      resumeRecording = _useReactMediaRecorde.resumeRecording;

  var _useState = React.useState(false),
      isRecordingPaused = _useState[0],
      setIsRecordingPaused = _useState[1];

  var upload = function upload() {
    try {
      return Promise.resolve(fetch(mediaBlobUrl).then(function (r) {
        return r.blob();
      })).then(function (file) {
        getFile(file);
        getUrl(mediaBlobUrl);
      });
    } catch (e) {
      return Promise.reject(e);
    }
  };

  var _useTimer = useTimer({
    hoursMinSecs: _extends({}, duration),
    start: status === 'recording' ? true : false,
    onTimeEnd: upload,
    restart: status === 'idle' ? true : false,
    timer: timer
  }),
      hrs = _useTimer[0],
      mins = _useTimer[1],
      secs = _useTimer[2];

  var defaultContainer = {
    maxWidth: '350px',
    padding: '10px'
  };
  var innerContainer = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column'
  };
  return /*#__PURE__*/React__default.createElement("div", {
    style: _extends({}, defaultContainer, containerStyle)
  }, /*#__PURE__*/React__default.createElement("div", {
    style: _extends({}, innerContainer)
  }, status === 'stopped' ? showPreview && /*#__PURE__*/React__default.createElement("audio", {
    src: mediaBlobUrl,
    controls: true
  }) : /*#__PURE__*/React__default.createElement("span", null, timer ? /*#__PURE__*/React__default.createElement("h1", null, hrs + ":" + mins + ":" + secs) : /*#__PURE__*/React__default.createElement("h1", null, status === 'idle' ? '' : status)), /*#__PURE__*/React__default.createElement("p", null, status === 'idle' && 'Click on the Mic to record your voice'), status === 'idle' ? /*#__PURE__*/React__default.createElement(fa.FaMicrophone, {
    fontSize: '30',
    style: {
      cursor: 'pointer'
    },
    onClick: startRecording
  }) : status === 'stopped' ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
    className: btnClass,
    onClick: upload
  }, "Upload"), /*#__PURE__*/React__default.createElement("button", {
    className: btnClass,
    style: {
      marginLeft: '20px'
    },
    onClick: function onClick() {
      clearBlobUrl();
      setIsRecordingPaused(false);
    },
    sx: {
      marginLeft: '10px'
    }
  }, "Clear")) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(fa.FaStop, {
    onClick: stopRecording,
    fontSize: '25',
    style: {
      cursor: 'pointer',
      marginLeft: '20px'
    }
  }), isRecordingPaused ? /*#__PURE__*/React__default.createElement(fa.FaPlay, {
    fontSize: '25',
    style: {
      cursor: 'pointer',
      marginLeft: '20px'
    },
    onClick: function onClick() {
      resumeRecording();
      setIsRecordingPaused(false);
    }
  }) : /*#__PURE__*/React__default.createElement(fa.FaPause, {
    fontSize: '25',
    style: {
      cursor: 'pointer',
      marginLeft: '20px'
    },
    onClick: function onClick() {
      pauseRecording();
      setIsRecordingPaused(true);
    }
  }))));
};

module.exports = DurationRecorder;
//# sourceMappingURL=index.js.map