@chayns/react-audio-editor/lib/components/editor/playerControl/PlayerControl.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('./PlayerControl.css');

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

var _TrackContext2 = _interopRequireDefault(_TrackContext);

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

var _Track2 = _interopRequireDefault(_Track);

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(PlayerControl, (0, _extends3.default)({ track: context }, props));
        }
    );
}

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

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

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

        _this.getRgb = function (hex) {
            // converts hex color to rgb
            var r = parseInt(hex.substring(1, 3), 16);
            var g = parseInt(hex.substring(3, 5), 16);
            var b = parseInt(hex.substring(5, 7), 16);
            return { r: r, g: g, b: b };
        };

        _this.setClickStatus = function (event) {
            _this.isClicking = true;
            _this.move(event);
        };

        _this.resetClickStatus = function () {
            _this.isClicking = false;
            _this.setState({ searchPosition: null });
        };

        _this.move = function (event) {
            // move selection
            var rect = event.target.getBoundingClientRect();
            var clientX = event.changedTouches ? event.changedTouches[0].clientX : event.clientX;
            var state = { searchPosition: (clientX - rect.left) / rect.width * 100 };
            var _this$state = _this.state,
                start = _this$state.start,
                end = _this$state.end;

            if (_this.isClicking) {
                state.playPosition = state.searchPosition;
            }
            if (state.playPosition > end || state.playPosition < start) {
                state.playPosition = start;
            }
            if (state.searchPosition > end || state.searchPosition < start) {
                state.searchPosition = null;
            }
            if (_this.isClicking) {
                var track = _this.props.track;

                track.setPlayTime(state.playPosition);
            }
            _this.setState(state);
        };

        _this.isClicking = false;
        _this.chaynsRgb = _this.getRgb(chayns.env.site.colorMode === 1 ? '#ffffff' : chayns.env.site.color); // get color for selection
        _this.state = {
            playPosition: 0, searchPosition: 0, start: 0, end: 100
        };
        props.track.setCutListener(function (start, end) {
            // set listener to get new cuts
            var playPosition = _this.state.playPosition;

            var state = { start: start, end: end };
            if (playPosition > end) {
                state.playPosition = end;
            } else if (playPosition < start) {
                state.playPosition = start;
            }
            _this.setState(state);
        });
        props.track.setProgressListener(function (progress) {
            // set listener to get play progress
            _this.setState({ playPosition: progress });
        });
        return _this;
    }

    (0, _createClass3.default)(PlayerControl, [{
        key: 'render',
        value: function render() {
            var _state = this.state,
                searchPosition = _state.searchPosition,
                playPosition = _state.playPosition;
            var start = this.state.start;


            if (searchPosition === null) {
                // set searchPosition to playPosition if user is not moving over the play control
                searchPosition = playPosition;
            } else if (searchPosition < playPosition) {
                // set left interval darker than right
                var pP = playPosition;
                playPosition = searchPosition;
                searchPosition = pP;
            }

            var rgb = this.chaynsRgb.r + ',' + this.chaynsRgb.g + ',' + this.chaynsRgb.b;

            return _react2.default.createElement('div', {
                className: 'player-control',
                style: { background: 'linear-gradient(90deg, transparent ' + start + '%, rgba(' + rgb + ',0.4) ' + start + '%, rgba(' + rgb + ',0.4) ' + playPosition + '%, rgba(' + rgb + ',0.2) ' + playPosition + '%, rgba(' + rgb + ',0.2) ' + searchPosition + '%, transparent ' + searchPosition + '%)' },
                onMouseDown: this.setClickStatus,
                onMouseMove: this.move,
                onMouseUp: this.resetClickStatus,
                onMouseLeave: this.resetClickStatus,
                onTouchStart: this.setClickStatus,
                onTouchMove: this.move,
                onTouchEnd: this.resetClickStatus,
                onTouchCancel: this.resetClickStatus
            });
        }
    }]);
    return PlayerControl;
}(_react.PureComponent), _class.propTypes = {
    track: _propTypes2.default.instanceOf(_Track2.default).isRequired
}, _class.defaultProps = {}, _temp);
module.exports = exports.default;