feeles-ide/lib/Cards/EditorCard/Preview.js

The hackable and serializable IDE to make learning material

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 { fullWhite, fullBlack } from 'material-ui/styles/colors';

import CreditBar from './CreditBar';

var getStyles = function getStyles(props, context, state) {
  var prepareStyles = context.muiTheme.prepareStyles;
  var scale = state.scale;


  return {
    root: prepareStyles({
      position: 'absolute',
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      boxSizing: 'border-box',
      overflow: 'hidden',
      background: 'linear-gradient(' + fullWhite + ', ' + fullBlack + ')',
      width: '100%',
      height: '100%'
    }),
    img: prepareStyles({
      transform: 'scale(' + scale + ')'
    })
  };
};

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

  function Preview() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Preview);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Preview.__proto__ || _Object$getPrototypeOf(Preview)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      scale: 1
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Preview, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      var file = this.props.file;

      if (file.is('image')) {
        var image = new Image();
        image.onload = function () {
          var ratio = function ratio(size) {
            return Math.max(size.height, 1) / Math.max(size.width, 1);
          };
          var screenRect = _this2.container.getBoundingClientRect();
          var scale = ratio(screenRect) > ratio(image) ? screenRect.width / image.width : screenRect.height / image.height;
          _this2.setState({ scale: scale * 0.9 });
        };
        image.src = file.blobURL;
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var file = this.props.file;

      var _getStyles = getStyles(this.props, this.context, this.state),
          root = _getStyles.root,
          img = _getStyles.img;

      var content = file.is('image') ? React.createElement('img', { src: file.blobURL, alt: file.name, style: img }) : file.is('audio') ? React.createElement('audio', { src: file.blobURL, controls: true }) : null;

      var creditStyle = {
        position: 'absolute',
        bottom: 0,
        width: '100%'
      };

      return React.createElement(
        'div',
        { style: root, ref: function ref(_ref2) {
            return _ref2 && (_this3.container = _ref2);
          } },
        content,
        React.createElement(CreditBar, {
          file: file,
          openFileDialog: this.props.openFileDialog,
          putFile: this.props.putFile,
          localization: this.props.localization,
          getFiles: this.props.getFiles,
          style: creditStyle
        })
      );
    }
  }]);

  return Preview;
}(PureComponent);

Preview.propTypes = {
  file: PropTypes.object.isRequired,
  localization: PropTypes.object.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  getFiles: PropTypes.func.isRequired
};
Preview.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default Preview;