slate-editor-icons/lib/helpers/videoNode.js

icons for slate editors

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _class, _temp;

/* eslint-disable require-jsdoc */


exports['default'] = function (type, readOnly) {
  var NodeComponent = function () {
    function NodeComponent(_ref) {
      var props = (0, _objectWithoutProperties3['default'])(_ref, []);

      return _react2['default'].createElement(VideoNode, (0, _extends3['default'])({}, props, { type: type, readOnly: readOnly }));
    }

    return NodeComponent;
  }();
  return NodeComponent;
};

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _slatePlugins = require('slate-plugins');

var _reactResizable = require('react-resizable');

var _arrowUp = require('react-icons/lib/fa/arrow-up');

var _arrowUp2 = _interopRequireDefault(_arrowUp);

var _arrowDown = require('react-icons/lib/fa/arrow-down');

var _arrowDown2 = _interopRequireDefault(_arrowDown);

var _trashO = require('react-icons/lib/fa/trash-o');

var _trashO2 = _interopRequireDefault(_trashO);

var _edit = require('react-icons/lib/fa/edit');

var _edit2 = _interopRequireDefault(_edit);

var _videoModal = require('./videoModal');

var _videoModal2 = _interopRequireDefault(_videoModal);

var _videoNode = require('./style/videoNode.scss');

var _videoNode2 = _interopRequireDefault(_videoNode);

require('./style/react-resizable.lib.scss');

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

var VideoNode = (_temp = _class = function (_Component) {
  (0, _inherits3['default'])(VideoNode, _Component);

  function VideoNode(props) {
    (0, _classCallCheck3['default'])(this, VideoNode);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (VideoNode.__proto__ || (0, _getPrototypeOf2['default'])(VideoNode)).call(this, props));

    _this.onResizeEnd = _this.onResizeEnd.bind(_this);
    _this.onResize = _this.onResize.bind(_this);
    _this.moveUp = _this.moveUp.bind(_this);
    _this.moveDown = _this.moveDown.bind(_this);
    _this.remove = _this.remove.bind(_this);
    _this.edit = _this.edit.bind(_this);
    _this.hideModal = _this.hideModal.bind(_this);

    _this.state = {
      width: null,
      height: null,
      isShow: false
    };
    return _this;
  }

  (0, _createClass3['default'])(VideoNode, [{
    key: 'onResizeEnd',
    value: function () {
      function onResizeEnd(e, data) {
        var onChange = this.props.editor.onChange;
        var _data$size = data.size,
            width = _data$size.width,
            height = _data$size.height;

        onChange(_slatePlugins.blocks.addDataToCurrent(this.props.state, {
          data: { width: width, height: height }
        }));
      }

      return onResizeEnd;
    }()
  }, {
    key: 'onResize',
    value: function () {
      function onResize(e, data) {
        var _data$size2 = data.size,
            width = _data$size2.width,
            height = _data$size2.height;

        this.setState({
          width: width,
          height: height
        });
      }

      return onResize;
    }()
  }, {
    key: 'moveUp',
    value: function () {
      function moveUp() {
        var _props = this.props,
            state = _props.state,
            node = _props.node,
            editor = _props.editor;
        var document = state.document;

        var parent = document.getParent(node);
        var index = parent.nodes.indexOf(node) - 1;
        var newState = state.transform().moveNodeByKey(node, parent, index === -1 ? 0 : index).apply();
        editor.onChange(newState);
      }

      return moveUp;
    }()
  }, {
    key: 'moveDown',
    value: function () {
      function moveDown() {
        var _props2 = this.props,
            state = _props2.state,
            node = _props2.node,
            editor = _props2.editor;
        var document = state.document;

        var parent = document.getParent(node);
        var index = parent.nodes.indexOf(node) + 1;
        var newState = state.transform().moveNodeByKey(node, parent, index > parent.nodes.count() ? parent.nodes.count() : index) // eslint-disable-line max-len
        .apply();
        editor.onChange(newState);
      }

      return moveDown;
    }()
  }, {
    key: 'remove',
    value: function () {
      function remove() {
        var _props3 = this.props,
            state = _props3.state,
            node = _props3.node,
            editor = _props3.editor;

        var newState = state.transform().unsetSelection().removeNodeByKey(node.key).apply();

        editor.onChange(newState);
      }

      return remove;
    }()
  }, {
    key: 'edit',
    value: function () {
      function edit(e) {
        e.preventDefault();
        this.setState({
          isShow: true
        });
      }

      return edit;
    }()
  }, {
    key: 'hideModal',
    value: function () {
      function hideModal() {
        this.setState({
          isShow: false
        });
      }

      return hideModal;
    }()
  }, {
    key: 'render',
    value: function () {
      function render() {
        var _props4 = this.props,
            node = _props4.node,
            state = _props4.state,
            type = _props4.type,
            attributes = _props4.attributes,
            children = _props4.children,
            editor = _props4.editor,
            readOnly = _props4.readOnly;

        var link = void 0;
        var align = node.data.get('align');
        var indent = node.data.get('indent');
        var id = node.data.get('id');
        var width = this.state.width || node.data.get('width') || 560;
        var height = this.state.height || node.data.get('height') || 315;
        var isFocused = state.selection.hasEdgeIn(node);

        if (type === 'youtube') {
          link = 'https://www.youtube.com/embed/' + String(id);
        } else if (type === 'dailymotion') {
          link = 'https://www.dailymotion.com/embed/video/' + String(id);
        } else if (type === 'vimeo') {
          link = 'https://player.vimeo.com/video/' + String(id);
        } else if (type === 'youku') {
          link = 'https://player.youku.com/embed/' + String(id);
        }

        if (readOnly) {
          return _react2['default'].createElement(
            'div',
            { style: {
                textAlign: align,
                paddingLeft: 3 * indent + 'em'
              }, 'data-slate-type': 'video' },
            _react2['default'].createElement(
              'div',
              {
                className: _videoNode2['default'].videoNode,
                style: {
                  width: width,
                  height: height
                } },
              _react2['default'].createElement('iframe', (0, _extends3['default'])({}, attributes, {
                src: link })),
              children
            )
          );
        }

        return _react2['default'].createElement(
          'div',
          { style: {
              textAlign: align,
              paddingLeft: 3 * indent + 'em'
            }, 'data-slate-type': 'video' },
          _react2['default'].createElement(
            _reactResizable.Resizable,
            {
              lockAspectRatio: true,
              minConstraints: [256, 182],
              maxConstraints: [700, 500],
              onResize: this.onResize,
              onResizeEnd: this.onResizeEnd,
              width: width,
              height: height },
            _react2['default'].createElement(
              'div',
              {
                className: isFocused ? _videoNode2['default'].videoNodeActive : _videoNode2['default'].videoNode,
                style: {
                  width: width,
                  height: height
                } },
              _react2['default'].createElement('div', { className: _videoNode2['default'].overlay }),
              _react2['default'].createElement(
                'div',
                { className: _videoNode2['default'].videoToolbar },
                _react2['default'].createElement(
                  'div',
                  { className: _videoNode2['default'].videoToolbarItem },
                  _react2['default'].createElement(_arrowUp2['default'], { onClick: this.moveUp })
                ),
                _react2['default'].createElement(
                  'div',
                  { className: _videoNode2['default'].videoToolbarItem },
                  _react2['default'].createElement(_arrowDown2['default'], { onClick: this.moveDown })
                ),
                _react2['default'].createElement(
                  'div',
                  { className: _videoNode2['default'].videoToolbarItem },
                  _react2['default'].createElement(_trashO2['default'], { onClick: this.remove })
                ),
                _react2['default'].createElement(
                  'div',
                  { className: _videoNode2['default'].videoToolbarItem },
                  _react2['default'].createElement(_edit2['default'], { onClick: this.edit })
                )
              ),
              _react2['default'].createElement('iframe', (0, _extends3['default'])({}, attributes, {
                src: link })),
              children
            )
          ),
          _react2['default'].createElement(_videoModal2['default'], {
            onChange: editor.onChange,
            state: state,
            initialValue: link,
            node: node,
            width: width,
            height: height,
            hideModal: this.hideModal,
            isShow: this.state.isShow })
        );
      }

      return render;
    }()
  }]);
  return VideoNode;
}(_react.Component), _class.propTypes = {
  attributes: _react.PropTypes.object,
  children: _react.PropTypes.any,
  node: _react.PropTypes.any,
  state: _react.PropTypes.object,
  editor: _react.PropTypes.object,
  type: _react.PropTypes.string,
  readOnly: _react.PropTypes.bool
}, _temp);
module.exports = exports['default'];