@chayns/react-audio-editor/lib/components/AudioEditor.js

Tool to edit audio tracks.

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = undefined;

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp; /* eslint-disable jsx-a11y/media-has-caption */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _FileInput = require('chayns-components/lib/react-chayns-file_input/component/FileInput');

var _FileInput2 = _interopRequireDefault(_FileInput);

var _fileSaver = require('file-saver');

var _fileSaver2 = _interopRequireDefault(_fileSaver);

var _TrackContext = require('../context/TrackContext');

var _TrackContext2 = _interopRequireDefault(_TrackContext);

var _Track = require('../utils/Track');

var _Track2 = _interopRequireDefault(_Track);

var _Editor = require('./editor/Editor');

var _Editor2 = _interopRequireDefault(_Editor);

require('./AudioEditor.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** Main Component */
var AudioEditor = (_temp = _class = function (_PureComponent) {
    (0, _inherits3.default)(AudioEditor, _PureComponent);

    function AudioEditor(props) {
        var _this2 = this;

        (0, _classCallCheck3.default)(this, AudioEditor);

        var _this = (0, _possibleConstructorReturn3.default)(this, (AudioEditor.__proto__ || (0, _getPrototypeOf2.default)(AudioEditor)).call(this, props));

        _this.remove = function () {
            var onRemove = _this.props.onRemove;
            var track = _this.state.track;

            track.remove();
            _this.setState({ track: null });
            onRemove();
        };

        _this.save = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
            var onSave, track, file;
            return _regenerator2.default.wrap(function _callee$(_context) {
                while (1) {
                    switch (_context.prev = _context.next) {
                        case 0:
                            onSave = _this.props.onSave;
                            track = _this.state.track;
                            _context.next = 4;
                            return track.getMp3(function (saveProgress) {
                                _this.setState({ saveProgress: saveProgress });
                            });

                        case 4:
                            file = _context.sent;


                            onSave(file);

                        case 6:
                        case 'end':
                            return _context.stop();
                    }
                }
            }, _callee, _this2);
        }));

        _this.cancelSaving = function () {
            var track = _this.state.track;

            track.cancelSaving();
        };

        _this.state = {
            track: props.file ? new _Track2.default(props.file) : null,
            saveProgress: null
        };
        return _this;
    }

    (0, _createClass3.default)(AudioEditor, [{
        key: 'render',
        value: function render() {
            var _this3 = this;

            var _state = this.state,
                track = _state.track,
                saveProgress = _state.saveProgress;


            return [_react2.default.createElement(_FileInput2.default, {
                key: 'fileInput',
                className: !track || 'audio-editor',
                items: [track ? { // show editor if a track is loaded
                    content: {
                        children: _react2.default.createElement(
                            _TrackContext2.default.Provider,
                            { value: track },
                            _react2.default.createElement(_Editor2.default, { onSave: this.save, onRemove: this.remove, onCancel: this.cancelSaving, saveProgress: saveProgress })
                        )
                    }
                } : { // show file input if there is no track
                    maxNumberOfFiles: 1,
                    types: [_FileInput2.default.types.AUDIO],
                    content: {
                        text: 'Track auswählen'
                    },
                    onChange: function onChange(validFiles) {
                        if (validFiles && validFiles.length) {
                            var file = validFiles[0];
                            if (chayns.env.browser.name === 'ie') {
                                // IE don't supports the web audio api, so return file if it's an mp3
                                if (file.type.startsWith('audio') && (file.type.endsWith('mpeg') || file.name.endsWith('mp3'))) {
                                    var onSave = _this3.props.onSave;

                                    onSave(file);
                                    chayns.dialog.alert('', 'Die Datei kann im Internet Explorer nicht bearbeitet werden.');
                                } else {
                                    chayns.dialog.alert('', 'Die Datei kann im Internet Explorer nicht bearbeitet werden. Bitte wähle eine MP3-Datei.');
                                }
                            } else {
                                _this3.setState({ track: new _Track2.default(file) });
                            }
                        }
                    }
                }]
            })];
        }
    }]);
    return AudioEditor;
}(_react.PureComponent), _class.propTypes = {
    file: _propTypes2.default.instanceOf(File),
    onSave: _propTypes2.default.func,
    onRemove: _propTypes2.default.func
}, _class.defaultProps = {
    file: null,
    onSave: _fileSaver2.default.saveAs,
    onRemove: console.log
}, _temp);
exports.default = AudioEditor;
module.exports = exports.default;