@chayns/react-audio-editor/lib/components/editor/background/Background.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);

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

var _TrackContext2 = _interopRequireDefault(_TrackContext);

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

var _Track2 = _interopRequireDefault(_Track);

require('./Background.css');

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

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

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

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

        _this.drawLine = function (left, right, time) {
            // function draws a line to the spectrum
            var height = _this.props.height;
            // x: time; y: y position to start with the line (half height - half left); w: width; h: height of the line (half of (left value + right value))

            _this.canvas.fillRect(time / 100 * _this.width, (height - left) / 2, 1, (left + right) / 2);
        };

        _this.canvasRef = _react2.default.createRef();
        return _this;
    }

    (0, _createClass3.default)(Background, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            // init spectrum
            var track = this.props.track;

            this.width = this.canvasRef.current.clientWidth;
            this.canvasRef.current.width = this.width;
            this.canvas = this.canvasRef.current.getContext('2d');
            this.canvas.fillStyle = chayns.env.site.colorMode === 1 ? '#fff' : chayns.env.site.color;
            track.getSpectrum(this.drawLine);
        }
    }, {
        key: 'render',
        value: function render() {
            var height = this.props.height;

            if (chayns.env.browser.name === 'safari') {
                // Safari needs a click event to start the player used to generate the spectrum.
                return null;
            }
            return _react2.default.createElement('canvas', {
                className: 'background',
                ref: this.canvasRef,
                height: height
            });
        }
    }]);
    return Background;
}(_react.PureComponent), _class.propTypes = {
    track: _propTypes2.default.instanceOf(_Track2.default).isRequired,
    height: _propTypes2.default.number
}, _class.defaultProps = {
    height: 250
}, _temp);
module.exports = exports.default;