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

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import _regeneratorRuntime from 'babel-runtime/regenerator';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
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 { CardMedia } from 'material-ui/Card';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
import NavigationFullscreen from 'material-ui/svg-icons/navigation/fullscreen';
import ActionSettings from 'material-ui/svg-icons/action/settings';
import OpenInBrowser from 'material-ui/svg-icons/action/open-in-browser';
import DeviceDevices from 'material-ui/svg-icons/device/devices';
import HardwareDesktopWindows from 'material-ui/svg-icons/hardware/desktop-windows';
import ImagePhotoCamera from 'material-ui/svg-icons/image/photo-camera';
import AvPlayArrow from 'material-ui/svg-icons/av/play-arrow';
import AvPause from 'material-ui/svg-icons/av/pause';

import Monitor from './Monitor';
import ResolveProgress from './ResolveProgress';

var frameSizes = [[480, 320], [640, 480], [720, 480], [800, 600], [1024, 768], [1136, 640], [1280, 720], [1280, 800], [1920, 1080]];

var by = 'x';

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

  function MonitorCard() {
    var _ref,
        _this2 = this;

    var _temp, _this, _ret;

    _classCallCheck(this, MonitorCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MonitorCard.__proto__ || _Object$getPrototypeOf(MonitorCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      frameWidth: 300,
      frameHeight: 150,
      processing: false,
      isStopped: false // WIP
    }, _this.handleScreenShot = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var request;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!_this.state.processing) {
                _context.next = 2;
                break;
              }

              return _context.abrupt('return');

            case 2:
              _this.setState({ processing: true });
              // Monitor にスクリーンショットを撮るようリクエスト
              request = {
                query: 'capture',
                type: 'image/jpeg'
              };
              _context.next = 6;
              return _this.props.globalEvent.emitAsync('postMessage', request);

            case 6:
              // capture がおわったら, processing state を元に戻す
              _this.setState({ processing: false });

            case 7:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, _this2);
    })), _this.toggleStopped = function () {
      // Monitor に stop/resume するようリクエスト
      var query = _this.state.isStopped ? 'resume' : 'stop';
      var request = {
        query: query
      };
      _this.props.globalEvent.emit('postMessage', request);
      _this.setState({
        isStopped: !_this.state.isStopped
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(MonitorCard, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      try {
        var frame = this.props.cards.MonitorCard.frame;

        if (frame && Array.isArray(frame.size)) {
          var _frame$size = _slicedToArray(frame.size, 2),
              frameWidth = _frame$size[0],
              frameHeight = _frame$size[1];

          this.setState({ frameWidth: frameWidth, frameHeight: frameHeight });
        }
      } catch (e) {
        // continue regardless of error
      }
    }
  }, {
    key: 'changeSize',
    value: function changeSize(frameWidth, frameHeight) {
      this.setState({ frameWidth: frameWidth, frameHeight: frameHeight });
    }
  }, {
    key: 'renderMenuItem',
    value: function renderMenuItem(_ref3) {
      var _this3 = this;

      var _ref4 = _slicedToArray(_ref3, 2),
          w = _ref4[0],
          h = _ref4[1];

      var value = w + by + h;
      return React.createElement(MenuItem, {
        key: value,
        primaryText: value,
        onClick: function onClick() {
          return _this3.changeSize(w, h);
        }
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var styles = {
        flexible: {
          position: 'relative',
          width: '100%'
        },
        parent: {
          position: 'absolute',
          width: '100%',
          height: '100%',
          top: 0,
          left: 0
        }
      };
      if (this.props.isPopout) {
        styles.flexible.height = 8;
      } else {
        styles.flexible.paddingTop = this.height + '%';
      }

      var sizeValue = this.state.frameWidth + by + this.state.frameHeight;
      var _props = this.props,
          localization = _props.localization,
          showAll = _props.showAll,
          loadConfig = _props.loadConfig;

      var feelesrc = loadConfig('feelesrc');

      var actions = [React.createElement(
        IconButton,
        { key: 'progress', disabled: true },
        React.createElement(ResolveProgress, { size: 24, globalEvent: this.props.globalEvent })
      ), React.createElement(
        IconButton,
        {
          key: 'refresh',
          disabled: feelesrc.disableReloadButton,
          onClick: function onClick() {
            return _this4.props.setLocation();
          }
        },
        React.createElement(NavigationRefresh, {
          color: this.context.muiTheme.palette.primary1Color
        })
      ), React.createElement(
        IconButton,
        { key: 'stop_resume', onClick: this.toggleStopped },
        this.state.isStopped ? React.createElement(AvPlayArrow, null) : React.createElement(AvPause, null)
      ), React.createElement(
        IconButton,
        {
          key: 'fullscreen',
          disabled: feelesrc.disableFullScreenButton,
          onClick: function onClick() {
            return _this4.props.toggleFullScreen();
          }
        },
        React.createElement(NavigationFullscreen, null)
      )];
      if (showAll) {
        actions.push(React.createElement(
          IconButton,
          {
            key: 'screenshot',
            disabled: this.state.processing,
            onClick: this.handleScreenShot
          },
          React.createElement(ImagePhotoCamera, null)
        ), React.createElement(
          IconMenu,
          {
            key: 'settings',
            iconButtonElement: React.createElement(
              IconButton,
              null,
              React.createElement(ActionSettings, null)
            )
          },
          React.createElement(MenuItem, {
            primaryText: sizeValue,
            leftIcon: React.createElement(DeviceDevices, null),
            menuItems: frameSizes.map(this.renderMenuItem, this)
          }),
          React.createElement(MenuItem, {
            primaryText: localization.monitorCard.popout,
            leftIcon: React.createElement(OpenInBrowser, null),
            onClick: function onClick() {
              return _this4.props.togglePopout();
            }
          })
        ));
      }

      return React.createElement(
        Card,
        _extends({
          icon: MonitorCard.icon()
        }, this.props.cardPropsBag, {
          actions: actions,
          disableCloseButton: true
        }),
        React.createElement(
          CardMedia,
          { style: styles.flexible },
          React.createElement(
            'div',
            { style: styles.parent },
            React.createElement(Monitor, {
              files: this.props.files,
              cards: this.props.cards,
              isPopout: this.props.isPopout,
              isFullScreen: this.props.isFullScreen,
              reboot: this.props.reboot,
              href: this.props.href,
              togglePopout: this.props.togglePopout,
              toggleFullScreen: this.props.toggleFullScreen,
              localization: this.props.localization,
              getConfig: this.props.getConfig,
              addFile: this.props.addFile,
              findFile: this.props.findFile,
              putFile: this.props.putFile,
              saveAs: this.props.saveAs,
              setLocation: this.props.setLocation,
              frameWidth: this.state.frameWidth,
              frameHeight: this.state.frameHeight,
              globalEvent: this.props.globalEvent
            })
          )
        )
      );
    }
  }, {
    key: 'height',
    get: function get() {
      return this.state.frameHeight / this.state.frameWidth * 100 >> 0;
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(HardwareDesktopWindows, null);
    }
  }]);

  return MonitorCard;
}(PureComponent);

MonitorCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  setLocation: PropTypes.func.isRequired,
  isPopout: PropTypes.bool.isRequired,
  togglePopout: PropTypes.func.isRequired,
  toggleFullScreen: PropTypes.func.isRequired,
  files: PropTypes.array.isRequired,
  cards: PropTypes.object.isRequired,
  isFullScreen: PropTypes.bool.isRequired,
  reboot: PropTypes.bool.isRequired,
  href: PropTypes.string.isRequired,
  showAll: PropTypes.bool.isRequired,
  localization: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  addFile: PropTypes.func.isRequired,
  findFile: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  saveAs: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired
};
MonitorCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default MonitorCard;