@chayns/react-audio-editor/lib/components/editor/controlBar/ControlBar.js

Tool to edit audio tracks.

'use strict';

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

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 _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _class, _temp;

exports.default = withContext;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

require('./ControlBar.css');

var _proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');

var _ContextMenu = require('chayns-components/lib/react-chayns-contextmenu/component/ContextMenu');

var _ContextMenu2 = _interopRequireDefault(_ContextMenu);

var _ControlItem = require('./controlItem/ControlItem');

var _ControlItem2 = _interopRequireDefault(_ControlItem);

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

var _TrackContext2 = _interopRequireDefault(_TrackContext);

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

var _Track2 = _interopRequireDefault(_Track);

var _ControlItemSettings = require('./controlItemSettings/ControlItemSettings');

var _ControlItemSettings2 = _interopRequireDefault(_ControlItemSettings);

var _filters = require('../../../constants/filters');

var _filters2 = _interopRequireDefault(_filters);

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

/** HOC to get the track instance */
function withContext(props) {
    return _react2.default.createElement(
        _TrackContext2.default.Consumer,
        null,
        function (context) {
            return _react2.default.createElement(ControlBar, (0, _extends3.default)({ track: context }, props));
        }
    );
}

var ControlBar = (_temp = _class = function (_PureComponent) {
    (0, _inherits3.default)(ControlBar, _PureComponent);

    function ControlBar(props) {
        (0, _classCallCheck3.default)(this, ControlBar);

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

        _this.playPause = function () {
            var playing = _this.state.playing;
            var track = _this.props.track;


            if (playing) {
                track.pause();
            } else {
                track.play();
            }
        };

        _this.openVolume = function (event) {
            // show volume bubble
            var rect = event.target.getBoundingClientRect();
            var coordinates = { x: rect.left + rect.width / 2, y: rect.bottom };
            _this.controlItemSettingsRef.current.toggle(coordinates, _filters2.default.find(function (filter) {
                return filter.type === _Track2.default.filterTypes.GAIN;
            }));
        };

        _this.openFilter = function (event, filter) {
            // show filter settings bubble
            _this.controlItemSettingsRef.current.show(_this.filterCoordinates, filter);
        };

        _this.setFilterCoordinates = function (event) {
            // set coordinates for filter settings bubble
            var rect = event.target.getBoundingClientRect();
            _this.filterCoordinates = { x: rect.left + rect.width / 2, y: rect.bottom };
        };

        _this.state = { playing: false };
        _this.controlItemSettingsRef = _react2.default.createRef();
        _this.filterItems = [];
        _filters2.default.forEach(function (filter) {
            // set items for filter menu
            if (filter.type !== _Track2.default.filterTypes.GAIN) {
                _this.filterItems.push({
                    text: filter.showName,
                    onClick: function onClick(event) {
                        _this.openFilter(event, filter);
                    }
                });
            }
        });
        props.track.setPlayPauseListener(function (playing) {
            // set listener to update play/pause
            _this.setState({ playing: playing });
        });
        document.onkeypress = function (e) {
            // play or pause on space click
            if (e.key === ' ') {
                _this.playPause();
                e.preventDefault();
                return false;
            }
            return true;
        };
        return _this;
    }

    (0, _createClass3.default)(ControlBar, [{
        key: 'render',
        value: function render() {
            var playing = this.state.playing;
            var _props = this.props,
                track = _props.track,
                onSave = _props.onSave,
                onRemove = _props.onRemove;


            return _react2.default.createElement(
                'div',
                { className: 'control-bar' },
                _react2.default.createElement(_ControlItem2.default, {
                    icon: _proSolidSvgIcons.faTrashAlt,
                    onClick: onRemove
                }),
                _react2.default.createElement(_ControlItem2.default, {
                    icon: _proSolidSvgIcons.faSave,
                    onClick: onSave
                }),
                _react2.default.createElement(_ControlItem2.default, {
                    icon: playing ? _proSolidSvgIcons.faPause : _proSolidSvgIcons.faPlay,
                    onClick: this.playPause
                }),
                _react2.default.createElement(_ControlItem2.default, {
                    icon: _proSolidSvgIcons.faVolume,
                    onClick: this.openVolume
                }),
                _react2.default.createElement(
                    _ContextMenu2.default,
                    {
                        items: this.filterItems,
                        position: 1
                    },
                    _react2.default.createElement(_ControlItem2.default, {
                        icon: _proSolidSvgIcons.faFilter,
                        onClick: this.setFilterCoordinates
                    })
                ),
                _react2.default.createElement(_ControlItemSettings2.default, {
                    track: track,
                    ref: this.controlItemSettingsRef
                })
            );
        }
    }]);
    return ControlBar;
}(_react.PureComponent), _class.propTypes = {
    track: _propTypes2.default.instanceOf(_Track2.default).isRequired,
    onSave: _propTypes2.default.func.isRequired,
    onRemove: _propTypes2.default.func.isRequired
}, _class.defaultProps = {}, _temp);
module.exports = exports.default;