react-xrplayer/lib/Player.js

An excellent xr player for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _player = require("./redux/player.redux");

var _EffectContainer = _interopRequireDefault(require("./effect/EffectContainer"));

var _fullscreen = _interopRequireDefault(require("./utils/fullscreen"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _XRPlayerManager = _interopRequireDefault(require("./manager/XRPlayerManager"));

require("./App.css");

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var XRPlayer = /*#__PURE__*/function (_Component) {
  _inherits(XRPlayer, _Component);

  var _super = _createSuper(XRPlayer);

  function XRPlayer(_props) {
    var _this;

    _classCallCheck(this, XRPlayer);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "initState", function () {
      _this.sceneContainer.volume = _this.props.volume;
      _this.sceneContainer.muted = _this.props.muted;
      _this.sceneContainer.crossOrigin = 'anonymous';
    });

    _defineProperty(_assertThisInitialized(_this), "eventHandler", function (name, props) {
      var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};

      var result = _this.props.onEventHandler(name, props);

      if (result === true) return; // 为true，外部拦截响应，由外部处理

      switch (name) {
        case 'infocard':
        case 'image':
        case 'control':
          _this.props.enableEffectContainer(true);

          _this.props.setEffectData(props.data);

          break;

        case 'video':
        case 'alpha_video':
          _this.effectCallback = callback;

          _this.props.enableEffectContainer(true);

          var tip = document.getElementById(props.data.id);
          var margin = props.data.margin; // if (tip && props.data.width === "40vw") { // 只对大屏做调整
          //   console.log('tip', tip, ' top', tip.getBoundingClientRect().top, ' height', tip.clientHeight);
          //   let top = tip.getBoundingClientRect().top - tip.clientHeight;
          //   let left = tip.getBoundingClientRect().left - tip.clientWidth;
          //   console.log('top', top, ' left', left);
          //   margin = `${top}px ${left}px`
          // }

          var data = _objectSpread({}, props.data, {
            margin: margin
          });

          _this.props.setEffectData(data);

          _this.xrManager.setIsTipVisible(false);

          break;

        case 'close_effect_container':
          _this.onCloseEffectContainer();

          break;

        case 'global_muted':
          _this.props.setGlobalMuted(props.muted);

          break;

        case 'global_volume':
          _this.props.setGlobalVolume(props.volume);

          break;

        case 'sence_res_ready':
          break;

        default:
          break;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "initEvent", function () {
      window.addEventListener('resize', _this.onWindowResize, false);
    });

    _defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
      _this.xrManager.onWindowResize(_this.mount.clientWidth, _this.mount.clientHeight);
    });

    _defineProperty(_assertThisInitialized(_this), "onFullScreenChange", function (isFull) {
      _this.props.onFullScreenChange(isFull);

      _this.onWindowResize();
    });

    _defineProperty(_assertThisInitialized(_this), "onCloseEffectContainer", function () {
      _this.props.enableEffectContainer(false);

      _this.props.setEffectData({});
    });

    _this.mount = null;
    _this.scene = null;
    _this.camera = null;
    _this.renderer = null;
    _this.controls = null;
    _this.sceneContainer = null;
    _this.xrManager = null;
    _this.effectCallback = null;
    _this.innerView = true; // 是否是内视角

    _this.innerViewControls = null;
    _this.spriteShapeHelper = null;
    _this.centerModelHelper = null;
    _this.viewConvertHelper = null;
    _this.spriteData = null;
    return _this;
  }

  _createClass(XRPlayer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.xrManager = new _XRPlayerManager.default(this.mount, this.props, this.eventHandler);
      this.props.onCreated && this.props.onCreated(this.xrManager);
      this.initState();
      this.initEvent();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.xrManager && this.xrManager.destroy();
      window.removeEventListener('resize', this.onWindowResize);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          width = _this$props.width,
          height = _this$props.height,
          _this$props$is_full_s = _this$props.is_full_screen,
          is_full_screen = _this$props$is_full_s === void 0 ? false : _this$props$is_full_s,
          is_effect_displaying = _this$props.is_effect_displaying,
          effect_data = _this$props.effect_data;
      var _this$props2 = this.props,
          muted = _this$props2.muted,
          volume = _this$props2.volume;

      if (this.sceneContainer) {
        this.sceneContainer.volume = volume;
        this.sceneContainer.muted = muted;
      }

      return /*#__PURE__*/_react.default.createElement(_fullscreen.default, {
        enabled: is_full_screen,
        onChange: this.onFullScreenChange
      }, /*#__PURE__*/_react.default.createElement("div", {
        id: "xr-container",
        style: {
          width: is_full_screen ? "100vw" : width,
          height: is_full_screen ? "100vh" : height,
          background: '#fff',
          overflow: "hidden"
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        id: "canvas",
        style: {
          width: '100%',
          height: '100%',
          background: '#fff'
        },
        ref: function ref(mount) {
          _this2.mount = mount;
        }
      }), is_effect_displaying ? /*#__PURE__*/_react.default.createElement(_EffectContainer.default, {
        data: effect_data,
        onCloseClickHandler: function onCloseClickHandler() {
          _this2.eventHandler("close_effect_container");
        },
        onCallback: this.effectCallback
      }) : "", /*#__PURE__*/_react.default.createElement("video", {
        id: "video",
        style: {
          display: "none"
        },
        muted: muted,
        ref: function ref(mount) {
          _this2.sceneContainer = mount;
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        id: "display",
        style: {
          display: "none"
        }
      })));
    }
  }]);

  return XRPlayer;
}(_react.Component);

XRPlayer.protoTypes = {
  width: _propTypes.default.string,
  height: _propTypes.default.string,
  camera_fov: _propTypes.default.number,
  camera_near: _propTypes.default.number,
  camera_far: _propTypes.default.number,
  camera_position: _propTypes.default.object,
  camera_target: _propTypes.default.object,
  scene_texture_resource: _propTypes.default.object.isRequired,
  axes_helper_display: _propTypes.default.bool,
  hot_spot_list: _propTypes.default.array,
  event_list: _propTypes.default.array,
  is_full_screen: _propTypes.default.bool,
  onCreated: _propTypes.default.func,
  onFullScreenChange: _propTypes.default.func,
  onEventHandler: _propTypes.default.func
};
XRPlayer.defaultProps = {
  width: '100%',
  height: '100%',
  camera_fov: 80,
  camera_near: 0.01,
  camera_far: 10000,
  camera_position: {
    x: 0,
    y: 0,
    z: 10
  },
  camera_target: {
    x: 0,
    y: 0,
    z: 0
  },
  axes_helper_display: false,
  hot_spot_list: [],
  event_list: [],
  model_list: [],
  is_full_screen: false,
  onFullScreenChange: function onFullScreenChange(isFull) {},
  onEventHandler: function onEventHandler(name, prop) {
    return false;
  }
};

var _default = (0, _reactRedux.connect)(function (state) {
  return state.player;
}, {
  enableEffectContainer: _player.enableEffectContainer,
  setEffectData: _player.setEffectData,
  setGlobalVolume: _player.setGlobalVolume,
  setGlobalMuted: _player.setGlobalMuted
})(XRPlayer);

exports.default = _default;