feeles-ide/lib/Cards/MediaCard/index.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Card from '../CardWindow';
import AvMusicVideo from 'material-ui/svg-icons/av/music-video';
import ReactPlayer from 'react-player';

var defaultPlayerState = {
  // https://github.com/CookPete/react-player#props
  width: 'initial',
  style: {
    maxWidth: 500
  },
  soundcloudConfig: {
    clientId: 'iFAPeKCVCOTKeA0nNJCHuVHif2gEBKbl',
    showArtwork: true
  }
};

var MediaCard = function (_PureComponent) {
  _inherits(MediaCard, _PureComponent);

  function MediaCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, MediaCard);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MediaCard.__proto__ || _Object$getPrototypeOf(MediaCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      playerState: {}
    }, _this.handleMedia = function (event) {
      var value = event.data.value;

      if (value) {
        // feeles.openMedia()
        _this.setState({ playerState: value });
        _this.props.updateCard('MediaCard', { visible: true });
      } else {
        // feeles.closeMedia()
        _this.props.updateCard('MediaCard', { visible: false });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(MediaCard, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var globalEvent = this.props.globalEvent;

      globalEvent.on('message.media', this.handleMedia);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var visible = this.props.cardPropsBag.visible;

      if (visible && !nextProps.cardPropsBag.visible) {
        // カードが close されたとき動画を止める
        this.setState({
          playerState: _extends({}, this.state.playerState, {
            playing: false
          })
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var playerState = _extends({}, defaultPlayerState, this.state.playerState);

      return React.createElement(
        Card,
        _extends({ icon: MediaCard.icon() }, this.props.cardPropsBag),
        this.state.playerState.url ? React.createElement(ReactPlayer, playerState) : React.createElement(
          'div',
          null,
          'URL not given'
        )
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(AvMusicVideo, null);
    }
  }]);

  return MediaCard;
}(PureComponent);

MediaCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  updateCard: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired
};
export default MediaCard;