twreporter-react/lib/components/article/CircleProgressButton.js

React-Redux site for The Reporter Foundation in Taiwan

/*eslint no-console:0*/
'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _playIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMCAwIDgwIDgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjguMyAoMjk4MDIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmljb24tcGxheTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJBcnRpY2xlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iVG9waWMt4oCTLU1vYmlsZS1Qb3J0cmFpdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyMS4wMDAwMDAsIC01MDEwLjAwMDAwMCkiIGZpbGw9IiNDNzFCMEEiPgogICAgICAgICAgICA8ZyBpZD0iVmlkZW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCA0OTYwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2MSwxMzAgQzE4My4wOTEzOSwxMzAgMjAxLDExMi4wOTEzOSAyMDEsOTAgQzIwMSw2Ny45MDg2MSAxODMuMDkxMzksNTAgMTYxLDUwIEMxMzguOTA4NjEsNTAgMTIxLDY3LjkwODYxIDEyMSw5MCBDMTIxLDExMi4wOTEzOSAxMzguOTA4NjEsMTMwIDE2MSwxMzAgWiBNMTQ2LDczLjYxOTI2ODYgTDE2NC44NTcxNDMsODIuNTcxNDI4NiBMMTY0Ljg1NzE0Myw5Ny40Mjg1NzE0IEwxNDYsMTA2LjM4MDg1MyBMMTQ2LDczLjYxOTI2ODYgWiBNMTY0Ljg1NzE0Myw4Mi41NzE0Mjg2IEwxNzYuODU3MTQzLDc5LjQ3ODM3NTcgTDE3Ni44NTcxNDMsMTAwLjU0MTQ4NiBMMTY0Ljg1NzE0Myw5Ny40Mjg1NzE0IEwxNjQuODU3MTQzLDgyLjU3MTQyODYgWiIgaWQ9Imljb24tcGxheSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=";

var _playIcon2 = _interopRequireDefault(_playIcon);

var _audioPlay = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQ4cHgiIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IHNrZXRjaHRvb2wgMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPjgxMjgwRDM3LURGRTEtNDAzMi1CNTg1LTE3RDA2MjMxNzVEODwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQ29tcG9uZW50cyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkF1ZGlvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTA0LjAwMDAwMCwgLTY0NS4wMDAwMDApIiBmaWxsPSIjQzcxQjBBIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAuMDAwMDAwLCA2MTcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDgsNzYgQzYxLjI1NDgzNCw3NiA3Miw2NS4yNTQ4MzQgNzIsNTIgQzcyLDM4Ljc0NTE2NiA2MS4yNTQ4MzQsMjggNDgsMjggQzM0Ljc0NTE2NiwyOCAyNCwzOC43NDUxNjYgMjQsNTIgQzI0LDY1LjI1NDgzNCAzNC43NDUxNjYsNzYgNDgsNzYgWiBNNDMuNzI3MDQ4Nyw2MS4wMTEzMTA1IEM0Mi43NzMyMjYsNjEuNTYxNDIzMyA0Miw2MS4xMjE2MDExIDQyLDYwLjAxNTI0MzEgTDQyLDQzLjk4NjA1NDkgQzQyLDQyLjg4NTgyOTMgNDIuNzY3OTA5Nyw0Mi40MzY4MDg1IDQzLjcyNzA0ODcsNDIuOTg5OTg3NSBMNTcuNjIzMjkyMiw1MS4wMDQ1ODE2IEM1OC41NzcxMTQ5LDUxLjU1NDY5NDUgNTguNTgyNDMxMiw1Mi40NDM1Mzc0IDU3LjYyMzI5MjIsNTIuOTk2NzE2NCBMNDMuNzI3MDQ4Nyw2MS4wMTEzMTA1IFoiIGlkPSJpY29uLWF1ZGlvLXBsYXkiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+";

var _audioPlay2 = _interopRequireDefault(_audioPlay);

var _audioPause = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQ4cHgiIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbi1hdWRpby1wYXVzZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJDb21wb25lbnRzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXVkaW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQuMDAwMDAwLCAtNzI0LjAwMDAwMCkiIGZpbGw9IiNDNzFCMEEiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwLjAwMDAwMCwgNjkyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ4LDgwIEM2MS4yNTQ4MzQsODAgNzIsNjkuMjU0ODM0IDcyLDU2IEM3Miw0Mi43NDUxNjYgNjEuMjU0ODM0LDMyIDQ4LDMyIEMzNC43NDUxNjYsMzIgMjQsNDIuNzQ1MTY2IDI0LDU2IEMyNCw2OS4yNTQ4MzQgMzQuNzQ1MTY2LDgwIDQ4LDgwIFogTTQzLDQ5IEw0Niw0OSBMNDYsNjMgTDQzLDYzIEw0Myw0OSBaIE01MCw0OSBMNTMsNDkgTDUzLDYzIEw1MCw2MyBMNTAsNDkgWiIgaWQ9Imljb24tYXVkaW8tcGF1c2UiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+";

var _audioPause2 = _interopRequireDefault(_audioPause);

var _CircleProgressButton = {
  "progress-button": "CircleProgressButton__progress-button___299oT",
  "progress-circle": "CircleProgressButton__progress-circle___1DtiB",
  "loading": "CircleProgressButton__loading___3gIr-"
};

var _CircleProgressButton2 = _interopRequireDefault(_CircleProgressButton);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var CircleProgressButton = function (_Component) {
  _inherits(CircleProgressButton, _Component);

  function CircleProgressButton(props) {
    _classCallCheck(this, CircleProgressButton);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CircleProgressButton).call(this, props));

    _this.state = {
      duration: props.duration,
      isOncePlayed: props.isOncePlayed,
      isPlaying: props.isPlaying,
      seek: props.seek
    };
    _this.diameter = props.radius * 2;
    return _this;
  }

  _createClass(CircleProgressButton, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        duration: nextProps.duration,
        isOncePlayed: nextProps.isOncePlayed,
        isPlaying: nextProps.isPlaying,
        seek: nextProps.seek
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      delete this.diameter;
    }
  }, {
    key: '_renderProgressCircle',
    value: function _renderProgressCircle() {
      var radius = this.props.radius;
      var _state = this.state;
      var duration = _state.duration;
      var seek = _state.seek;

      var circleLength = this.diameter * Math.PI;
      var proportion = void 0;

      try {
        proportion = 1 - seek / duration;
      } catch (err) {
        console.warn(err);
        proportion = 0;
      }
      var style = {
        strokeDasharray: circleLength,
        strokeDashoffset: circleLength * proportion
      };

      return _react2.default.createElement(
        'svg',
        { className: _CircleProgressButton2.default['progress-circle'], width: this.diameter, height: this.diameter },
        _react2.default.createElement('circle', { cx: radius, cy: radius, r: radius - 1, style: style })
      );
    }
  }, {
    key: '_renderIcon',
    value: function _renderIcon() {
      var _state2 = this.state;
      var isOncePlayed = _state2.isOncePlayed;
      var isPlaying = _state2.isPlaying;

      var style = {
        width: this.diameter,
        height: this.diameter
      };
      var iconSvg = void 0;

      if (!isOncePlayed) {
        iconSvg = this.props.icon || _playIcon2.default;
      } else if (isPlaying) {
        iconSvg = _audioPause2.default;
      } else {
        iconSvg = _audioPlay2.default;
      }

      return _react2.default.createElement('img', { className: _CircleProgressButton2.default['icon-img'], src: iconSvg, style: style });
    }
  }, {
    key: 'render',
    value: function render() {
      var isOncePlayed = this.state.isOncePlayed;

      var buttonStyle = {
        width: this.diameter,
        height: this.diameter
      };
      return _react2.default.createElement(
        'div',
        { onClick: this.props.onToggle,
          className: (0, _classnames2.default)(_CircleProgressButton2.default['progress-button'], isOncePlayed ? _CircleProgressButton2.default['loading'] : ''),
          style: { height: this.diameter, width: this.diameter } },
        _react2.default.createElement('button', { style: buttonStyle }),
        this._renderProgressCircle(),
        this._renderIcon()
      );
    }
  }]);

  return CircleProgressButton;
}(_react.Component);

CircleProgressButton.propTypes = {
  // react element
  icon: _react2.default.PropTypes.element,
  duration: _react2.default.PropTypes.number,
  onToggle: _react2.default.PropTypes.func.isRequired,
  isPlaying: _react2.default.PropTypes.bool,
  radius: _react2.default.PropTypes.number,
  seek: _react2.default.PropTypes.number
};

CircleProgressButton.defaultProps = {
  icon: null,
  duration: 0,
  isPlaying: false,
  radius: 40,
  seek: 0
};

exports.default = CircleProgressButton;