@realsee/vreo 2.3.8 → 2.3.9-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/lib/PlayController/createHTMLAudioElement.js +10 -2
  2. package/lib/PlayController/index.js +66 -6
  3. package/lib/Player/App.js +26 -0
  4. package/lib/Player/Controller.js +77 -21
  5. package/lib/Player/custom/SpatialScenePanel/index.js +63 -42
  6. package/lib/Player/hooks.js +10 -0
  7. package/lib/Player/index.js +79 -19
  8. package/lib/Player/modules/Drawer/index.js +17 -0
  9. package/lib/Player/modules/PopUp/index.js +10 -0
  10. package/lib/Player/modules/ResizeObserver/index.js +8 -0
  11. package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +96 -8
  12. package/lib/Player/modules/VideoAgent/VideoAgentScene.js +17 -3
  13. package/lib/Player/modules/VideoAgent/index.js +17 -0
  14. package/lib/Player/modules/Wave/index.js +32 -11
  15. package/lib/Player/modules/keyframes/BgMusic/index.js +24 -4
  16. package/lib/Player/modules/keyframes/CameraMovement/index.js +26 -0
  17. package/lib/Player/modules/keyframes/InfoPanel/index.js +38 -8
  18. package/lib/Player/modules/keyframes/ModelVideo/index.js +28 -0
  19. package/lib/Player/modules/keyframes/PanoEffect/index.js +38 -15
  20. package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +7 -0
  21. package/lib/Player/modules/keyframes/PanoTag/index.js +22 -4
  22. package/lib/Player/modules/keyframes/PanoTextLabel/index.js +42 -22
  23. package/lib/Player/modules/keyframes/Prompter/index.js +27 -10
  24. package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +25 -18
  25. package/lib/Player/modules/keyframes/VideoEffect/index.js +42 -10
  26. package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +2 -0
  27. package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +1 -0
  28. package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +1 -0
  29. package/lib/fivePlugins/CSS3DRenderPlugin/index.js +60 -19
  30. package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +5 -2
  31. package/lib/fivePlugins/CameraMovementPlugin/index.js +109 -50
  32. package/lib/fivePlugins/CameraMovementPlugin/typings.js +4 -0
  33. package/lib/fivePlugins/ModelTVVideoPlugin/index.js +54 -8
  34. package/lib/index.js +1 -0
  35. package/lib/react/index.js +30 -7
  36. package/lib/shared-utils/Audio.js +49 -8
  37. package/lib/shared-utils/AudioLike.js +28 -3
  38. package/lib/shared-utils/Preloader.js +7 -0
  39. package/lib/shared-utils/addResizeListener.js +5 -0
  40. package/lib/shared-utils/animationFrame/BetterTween.js +28 -0
  41. package/lib/shared-utils/animationFrame/index.js +10 -2
  42. package/lib/shared-utils/animationFrame/tween.js +11 -2
  43. package/lib/shared-utils/createTransMatrix.js +8 -0
  44. package/lib/shared-utils/getFileExpandedName.js +1 -0
  45. package/lib/shared-utils/getMediaInfo.js +9 -0
  46. package/lib/shared-utils/setElementDataset.js +2 -0
  47. package/lib/typings/VreoUnit.js +15 -0
  48. package/package.json +1 -1
@@ -1,16 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  var _typeof = require("@babel/runtime/helpers/typeof");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.PanoTag = PanoTag;
9
+
8
10
  var React = _interopRequireWildcard(require("react"));
11
+
9
12
  var _hooks = require("../../../hooks");
13
+
10
14
  var _VreoUnit = require("../../../../typings/VreoUnit");
15
+
11
16
  var _dnalogel = require("@realsee/dnalogel");
17
+
12
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
+
13
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
21
+
14
22
  function PanoTag() {
15
23
  var timeoutRef = React.useRef();
16
24
  var controller = (0, _hooks.useController)();
@@ -32,19 +40,22 @@ function PanoTag() {
32
40
  }));
33
41
  React.useEffect(function () {
34
42
  var _controller$configs;
43
+
35
44
  if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTag) === false) {
36
45
  return;
37
46
  }
47
+
38
48
  var callback = function callback(keyframe) {
39
49
  if (!panoTagPlugin.current) return;
40
50
  var start = keyframe.start,
41
- end = keyframe.end,
42
- data = keyframe.data;
51
+ end = keyframe.end,
52
+ data = keyframe.data;
43
53
  var panoTagData = data;
44
54
  var id = Date.now().toString();
45
55
  var pointType = 'PointTag';
46
56
  var dimensionType = '2D';
47
57
  var position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z];
58
+
48
59
  var tag = function () {
49
60
  if (panoTagData.imgUrl) {
50
61
  return {
@@ -75,26 +86,31 @@ function PanoTag() {
75
86
  }
76
87
  };
77
88
  }
78
- }();
89
+ }(); // show
90
+
79
91
 
80
- // show
81
92
  panoTagPlugin.current.load({
82
93
  tagList: [tag]
83
94
  });
84
95
  var tagInstance = panoTagPlugin.current.getTagById(id);
96
+
85
97
  if (tagInstance) {
86
98
  tagInstance.state.unfolded = true;
87
99
  panoTagPlugin.current.updateRenderAllTags();
88
100
  }
101
+
89
102
  timeoutRef.current = setTimeout(function () {
90
103
  var _tag$hooks;
104
+
91
105
  // clear
92
106
  var tag = panoTagPlugin.current.getTagById(id);
93
107
  if (!tag) return;
108
+
94
109
  if (tag.state) {
95
110
  tag.state.unfolded = false;
96
111
  panoTagPlugin.current.updateRenderAllTags();
97
112
  }
113
+
98
114
  (_tag$hooks = tag.hooks) === null || _tag$hooks === void 0 ? void 0 : _tag$hooks.on('folded', function () {
99
115
  setTimeout(function () {
100
116
  if (tag.state) {
@@ -105,9 +121,11 @@ function PanoTag() {
105
121
  });
106
122
  }, end - start);
107
123
  };
124
+
108
125
  controller.on(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
109
126
  return function () {
110
127
  controller.off(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
128
+
111
129
  if (timeoutRef.current) {
112
130
  clearTimeout(timeoutRef.current);
113
131
  }
@@ -1,20 +1,32 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.PanoTextLabel = PanoTextLabel;
11
+
9
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
10
14
  var React = _interopRequireWildcard(require("react"));
15
+
11
16
  var THREE = _interopRequireWildcard(require("three"));
17
+
12
18
  var _reactDom = _interopRequireDefault(require("react-dom"));
19
+
13
20
  var _hooks = require("../../../hooks");
21
+
14
22
  var _CSS3DRenderPlugin = require("../../../../fivePlugins/CSS3DRenderPlugin");
23
+
15
24
  var _VreoUnit = require("../../../../typings/VreoUnit");
25
+
16
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
17
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
29
+
18
30
  /**
19
31
  * 通过传入中心点确定矩形框架容器的四个点:
20
32
  * 1. 已知矩形长宽和中心点
@@ -26,11 +38,11 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
26
38
  var length = wrapperLength / 375;
27
39
  var width = wrapperWidth / 375;
28
40
  var geometry = new THREE.PlaneGeometry(length, width);
41
+
29
42
  if (normal) {
30
43
  var lookPoint = new THREE.Vector3(normal.x + centerPoint.x, normal.y + centerPoint.y, normal.z + centerPoint.z);
31
44
  geometry.lookAt(lookPoint);
32
- }
33
- // const pointgeometry = new THREE.Geometry()
45
+ } // const pointgeometry = new THREE.Geometry()
34
46
  // pointgeometry.vertices.push(cameraPosition)
35
47
  // const pointmaterial = new THREE.PointsMaterial({
36
48
  // color: 0xffffff,
@@ -38,32 +50,33 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
38
50
  // })
39
51
  // _point = new THREE.Points(pointgeometry, pointmaterial)
40
52
 
53
+
41
54
  var material = new THREE.MeshBasicMaterial({
42
55
  color: 0xffff00,
43
56
  side: THREE.DoubleSide
44
57
  });
45
58
  var plane = new THREE.Mesh(geometry, material);
46
59
  var v0 = centerPoint.clone();
47
- plane.position.copy(v0);
60
+ plane.position.copy(v0); // 计算传入的四个点的坐标
48
61
 
49
- // 计算传入的四个点的坐标
50
62
  var _plane$geometry$verti = (0, _slicedToArray2["default"])(plane.geometry.vertices, 4),
51
- v1 = _plane$geometry$verti[0],
52
- v2 = _plane$geometry$verti[1],
53
- v3 = _plane$geometry$verti[2],
54
- v4 = _plane$geometry$verti[3];
63
+ v1 = _plane$geometry$verti[0],
64
+ v2 = _plane$geometry$verti[1],
65
+ v3 = _plane$geometry$verti[2],
66
+ v4 = _plane$geometry$verti[3];
67
+
55
68
  var downLeft = v0.clone().add(v4);
56
69
  var downRight = v0.clone().add(v3);
57
70
  var upLeft = v0.clone().add(v2);
58
- var upRight = v0.clone().add(v1);
71
+ var upRight = v0.clone().add(v1); // 插件使用要求:矩形四个点位数据,顺序为**必须**为左下、右下、右上、左上
59
72
 
60
- // 插件使用要求:矩形四个点位数据,顺序为**必须**为左下、右下、右上、左上
61
73
  return [downLeft, downRight, upRight, upLeft];
62
74
  };
63
-
64
75
  /**
65
76
  * 空间文本标签。
66
77
  */
78
+
79
+
67
80
  function PanoTextLabel() {
68
81
  var timeoutRef = React.useRef();
69
82
  var controller = (0, _hooks.useController)();
@@ -71,35 +84,39 @@ function PanoTextLabel() {
71
84
  var ref = React.useRef();
72
85
  React.useEffect(function () {
73
86
  var _controller$configs;
87
+
74
88
  if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTextLabel) === false) {
75
89
  return;
76
90
  }
91
+
77
92
  var callback = function callback(keyframe) {
78
93
  var _panoTextLabelData$no, _panoTextLabelData$no2, _panoTextLabelData$no3;
94
+
79
95
  var start = keyframe.start,
80
- end = keyframe.end,
81
- data = keyframe.data;
82
- var panoTextLabelData = data;
83
- // 增加无文本情况的判断
96
+ end = keyframe.end,
97
+ data = keyframe.data;
98
+ var panoTextLabelData = data; // 增加无文本情况的判断
99
+
84
100
  if (data.text === '') return;
85
101
  var _panoTextLabelData$ve = panoTextLabelData.vertex,
86
- x = _panoTextLabelData$ve.x,
87
- y = _panoTextLabelData$ve.y,
88
- z = _panoTextLabelData$ve.z;
102
+ x = _panoTextLabelData$ve.x,
103
+ y = _panoTextLabelData$ve.y,
104
+ z = _panoTextLabelData$ve.z;
89
105
  var centerPoint = new THREE.Vector3(x, y, z);
90
- var normal = new THREE.Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z);
91
- // 生成传入的四个点,将文本框最大宽度定在200px,最高高度在30px
106
+ var normal = new THREE.Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z); // 生成传入的四个点,将文本框最大宽度定在200px,最高高度在30px
107
+
92
108
  var wrapperLength = 200;
93
109
  var wrapperWidth = 30;
94
110
  var points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth);
95
111
  if (!ref.current) ref.current = (0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(five);
96
112
  var container = ref.current.create3DDomContainer(points);
97
- var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject;
98
- // 将获取的mesh进行旋转操作,根据欧拉角去进行mesh的变换
113
+ var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject; // 将获取的mesh进行旋转操作,根据欧拉角去进行mesh的变换
114
+
99
115
  if (data.quaternion) {
100
116
  var quaternion = new THREE.Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w);
101
117
  css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.quaternion.copy(quaternion);
102
118
  }
119
+
103
120
  if (container !== null && container !== void 0 && container.container) _reactDom["default"].render( /*#__PURE__*/React.createElement("div", {
104
121
  className: "PanoTextLabel PanoTextLabel--notHidden"
105
122
  }, /*#__PURE__*/React.createElement("div", {
@@ -112,12 +129,15 @@ function PanoTextLabel() {
112
129
  }, data.text || ''))), container === null || container === void 0 ? void 0 : container.container);
113
130
  timeoutRef.current = setTimeout(function () {
114
131
  var _ref$current;
132
+
115
133
  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disposeAll();
116
134
  }, end - start);
117
135
  };
136
+
118
137
  controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
119
138
  return function () {
120
139
  controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
140
+
121
141
  if (timeoutRef.current) {
122
142
  clearTimeout(timeoutRef.current);
123
143
  }
@@ -1,54 +1,71 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.Prompter = Prompter;
11
+
9
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
10
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
11
16
  var React = _interopRequireWildcard(require("react"));
17
+
12
18
  var _classnames = _interopRequireDefault(require("classnames"));
19
+
13
20
  var _hooks = require("../../../hooks");
21
+
14
22
  var _VreoUnit = require("../../../../typings/VreoUnit");
23
+
15
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
16
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
27
+
17
28
  function Prompter() {
18
29
  var _React$useState = React.useState(''),
19
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
20
- text = _React$useState2[0],
21
- setText = _React$useState2[1];
30
+ _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
31
+ text = _React$useState2[0],
32
+ setText = _React$useState2[1];
33
+
22
34
  var _React$useState3 = React.useState(true),
23
- _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
24
- hidden = _React$useState4[0],
25
- setHidden = _React$useState4[1];
35
+ _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
36
+ hidden = _React$useState4[0],
37
+ setHidden = _React$useState4[1];
38
+
26
39
  var ref = React.useRef(null);
27
40
  var controller = (0, _hooks.useController)();
28
41
  React.useEffect(function () {
29
42
  var _controller$configs;
43
+
30
44
  if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.Prompter) === false) {
31
45
  return;
32
46
  }
47
+
33
48
  var callback = function callback(keyframe) {
34
49
  var start = keyframe.start,
35
- end = keyframe.end,
36
- data = keyframe.data;
50
+ end = keyframe.end,
51
+ data = keyframe.data;
37
52
  setText(data.text);
38
53
  setHidden(false);
54
+
39
55
  if (ref.current) {
40
56
  clearTimeout(ref.current);
41
57
  ref.current = null;
42
58
  }
59
+
43
60
  ref.current = setTimeout(function () {
44
61
  setHidden(true);
45
- setText('');
46
- // setTimeout(() => setText(''), 500)
62
+ setText(''); // setTimeout(() => setText(''), 500)
47
63
 
48
64
  if (ref.current) clearTimeout(ref.current);
49
65
  ref.current = null;
50
66
  }, end - start);
51
67
  };
68
+
52
69
  controller.on(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
53
70
  return function () {
54
71
  controller.off(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
@@ -1,33 +1,40 @@
1
1
  "use strict";
2
2
 
3
3
  var _typeof = require("@babel/runtime/helpers/typeof");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.UpdateVRPanorama = UpdateVRPanorama;
9
+
8
10
  var React = _interopRequireWildcard(require("react"));
11
+
9
12
  var _five = require("@realsee/five");
13
+
10
14
  var _hooks = require("../../../hooks");
15
+
11
16
  var _VreoUnit = require("../../../../typings/VreoUnit");
17
+
12
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
+
13
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
21
+
14
22
  function UpdateVRPanorama() {
15
23
  var controller = (0, _hooks.useController)();
16
24
  var five = (0, _hooks.useFiveInstance)();
17
25
  var deafultWorkRef = React.useRef(null);
18
- var updateWorkRef = React.useRef(null);
26
+ var updateWorkRef = React.useRef(null); // 恢复默认 VR
19
27
 
20
- // 恢复默认 VR
21
28
  var restoreCallback = React.useCallback(function () {
22
29
  // 先清理掉 之前的 VR 数据备份
23
30
  updateWorkRef.current = null;
31
+
24
32
  if (deafultWorkRef.current) {
25
33
  var work = (0, _five.parseWork)(deafultWorkRef.current);
26
34
  five.load(work);
27
35
  }
28
- }, []);
36
+ }, []); // 暂停时: 恢复默认 VR
29
37
 
30
- // 暂停时: 恢复默认 VR
31
38
  var pausedCallback = React.useCallback(function () {
32
39
  if (deafultWorkRef.current) {
33
40
  var work = (0, _five.parseWork)(deafultWorkRef.current);
@@ -36,32 +43,33 @@ function UpdateVRPanorama() {
36
43
  });
37
44
  five.load(work);
38
45
  }
39
- }, []);
46
+ }, []); // 播放时:如果暂停前有更新 VR 需要还原
40
47
 
41
- // 播放时:如果暂停前有更新 VR 需要还原
42
48
  var playingCallback = React.useCallback(function () {
43
49
  if (!updateWorkRef.current) {
44
50
  return;
45
51
  }
52
+
46
53
  five.load(updateWorkRef.current);
47
54
  }, []);
48
55
  React.useEffect(function () {
49
56
  var callback = function callback(keyframe) {
50
57
  var _five$work;
58
+
51
59
  if (!deafultWorkRef.current) {
52
60
  deafultWorkRef.current = five.work.raw.works;
53
61
  }
54
- var data = keyframe.data;
55
62
 
56
- // 如果数据中有新 work 数据,则直接载入
63
+ var data = keyframe.data; // 如果数据中有新 work 数据,则直接载入
64
+
57
65
  if (data.work) {
58
66
  updateWorkRef.current = (0, _five.parseWork)(data.work);
59
67
  five.load(updateWorkRef.current);
60
68
  return;
61
69
  }
62
- var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0];
63
70
 
64
- // 动态场景:不提供完成的签名数据,需重新整理
71
+ var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0]; // 动态场景:不提供完成的签名数据,需重新整理
72
+
65
73
  if (data.dynamic_scene && !data.panorama) {
66
74
  var lastWork = JSON.parse(lastRawWork);
67
75
  var panorama = lastWork.panorama;
@@ -70,6 +78,7 @@ function UpdateVRPanorama() {
70
78
  data.panorama = panorama;
71
79
  delete data.dynamic_scene;
72
80
  }
81
+
73
82
  Object.assign(window, {
74
83
  $work1: JSON.parse(lastRawWork),
75
84
  $work2: data,
@@ -78,17 +87,15 @@ function UpdateVRPanorama() {
78
87
  updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
79
88
  five.load(updateWorkRef.current);
80
89
  };
81
- controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
82
90
 
83
- // 离开 将之前的内容清空
84
- controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
91
+ controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
92
+
93
+ controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback); // 新载入数据 将之前的内容清空
94
+
95
+ controller.on('loaded', restoreCallback); // 暂停 回到默认状态
85
96
 
86
- // 新载入数据 将之前的内容清空
87
- controller.on('loaded', restoreCallback);
97
+ controller.on('paused', pausedCallback); // 播放 回归暂停前状态
88
98
 
89
- // 暂停 回到默认状态
90
- controller.on('paused', pausedCallback);
91
- // 播放 回归暂停前状态
92
99
  controller.on('playing', playingCallback);
93
100
  return function () {
94
101
  // 清理事件监听
@@ -1,55 +1,75 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.VideoEffect = VideoEffect;
11
+
9
12
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
+
10
14
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
+
11
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
12
18
  var _classnames = _interopRequireDefault(require("classnames"));
19
+
13
20
  var React = _interopRequireWildcard(require("react"));
21
+
14
22
  var _VreoUnit = require("../../../../typings/VreoUnit");
23
+
15
24
  var _hooks = require("../../../hooks");
25
+
16
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
17
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
18
- // import { Preloader } from '../../../../shared-utils/Preloader'
19
29
 
30
+ // import { Preloader } from '../../../../shared-utils/Preloader'
20
31
  var inlinePlay = function inlinePlay(videoInstance) {
21
32
  if (!videoInstance) return;
33
+
22
34
  var canplaythrough = function canplaythrough() {
23
35
  videoInstance.removeEventListener('canplaythrough', canplaythrough);
36
+
24
37
  try {
25
38
  videoInstance.play();
26
39
  } catch (error) {}
27
40
  };
41
+
28
42
  videoInstance.addEventListener('canplaythrough', canplaythrough);
29
43
  videoInstance.load();
30
- };
44
+ }; // const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
45
+
31
46
 
32
- // const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
33
47
  var PI = Math.PI;
34
48
  var PI_2 = PI * 2;
49
+
35
50
  function VideoEffect() {
36
51
  var ref = React.useRef(null);
37
52
  var videoRef = React.useRef();
38
53
  var controller = (0, _hooks.useController)();
39
54
  var timeoutRef = React.useRef();
55
+
40
56
  var _React$useState = React.useState(false),
41
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
42
- visible = _React$useState2[0],
43
- setVisible = _React$useState2[1];
57
+ _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
58
+ visible = _React$useState2[0],
59
+ setVisible = _React$useState2[1];
60
+
44
61
  var five = (0, _hooks.useFiveInstance)();
62
+
45
63
  var setBlobSrc = function setBlobSrc(blob) {
46
64
  if (!videoRef.current) return;
47
65
  videoRef.current.src = blob;
48
66
  };
67
+
49
68
  React.useEffect(function () {
50
69
  var callback = /*#__PURE__*/function () {
51
70
  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
52
71
  var start, end, _ref2, videoSrc, fov, direction, panoIndex, vector, _ref3, _ref4, longitude, latitude;
72
+
53
73
  return _regenerator["default"].wrap(function _callee$(_context) {
54
74
  while (1) {
55
75
  switch (_context.prev = _context.next) {
@@ -60,9 +80,11 @@ function VideoEffect() {
60
80
  if (vector) {
61
81
  return [vector.longitude, vector.latitude];
62
82
  }
83
+
63
84
  if (!direction) {
64
85
  return [0, 0];
65
86
  }
87
+
66
88
  var longitude = -Math.atan2(direction.x, -direction.z);
67
89
  longitude = (longitude % PI_2 + PI_2) % PI_2;
68
90
  var latitude = -Math.asin(direction.y / 1);
@@ -79,10 +101,12 @@ function VideoEffect() {
79
101
  setVisible(true);
80
102
  timeoutRef.current = setTimeout(function () {
81
103
  var _videoRef$current;
104
+
82
105
  (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.pause();
83
106
  setVisible(false);
84
107
  setBlobSrc('');
85
108
  }, end - start);
109
+
86
110
  case 8:
87
111
  case "end":
88
112
  return _context.stop();
@@ -90,20 +114,26 @@ function VideoEffect() {
90
114
  }
91
115
  }, _callee);
92
116
  }));
117
+
93
118
  return function callback(_x) {
94
119
  return _ref.apply(this, arguments);
95
120
  };
96
121
  }();
122
+
97
123
  controller.on(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
124
+
98
125
  var destroy = function destroy() {
99
126
  var _videoRef$current2;
127
+
100
128
  if (timeoutRef.current) {
101
129
  clearTimeout(timeoutRef.current);
102
130
  }
131
+
103
132
  (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause();
104
133
  setVisible(false);
105
134
  setBlobSrc('');
106
135
  };
136
+
107
137
  controller.on('paused', function () {
108
138
  return destroy();
109
139
  });
@@ -112,6 +142,7 @@ function VideoEffect() {
112
142
  });
113
143
  return function () {
114
144
  controller.off(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
145
+
115
146
  if (timeoutRef.current) {
116
147
  clearTimeout(timeoutRef.current);
117
148
  }
@@ -119,9 +150,10 @@ function VideoEffect() {
119
150
  }, [controller]);
120
151
  React.useEffect(function () {
121
152
  var _controller$configs, _controller$configs$v;
153
+
122
154
  if (!ref.current) return;
123
- var video = ((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.videoEffect) || document.createElement('video');
124
- // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
155
+ var video = ((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.videoEffect) || document.createElement('video'); // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
156
+
125
157
  video.setAttribute('playsinline', 'true');
126
158
  video.setAttribute('webkit-playsinline', 'true');
127
159
  video.setAttribute('autoplay', 'true');
@@ -131,10 +163,10 @@ function VideoEffect() {
131
163
  ref.current.append(videoRef.current);
132
164
  document.addEventListener('WeixinJSBridgeReady', function () {
133
165
  var _videoRef$current3;
166
+
134
167
  (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 ? void 0 : _videoRef$current3.play();
135
168
  }, false);
136
- if (!ref.current) return;
137
- // const asyncfunc = async () => {
169
+ if (!ref.current) return; // const asyncfunc = async () => {
138
170
  // setBlobSrc(await URL.createObjectURL(await Preloader.blob(emptyVideo)))
139
171
  // inlinePlay(videoRef.current)
140
172
  // }
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = centerPoint;
7
+
7
8
  var _three = require("three");
9
+
8
10
  function centerPoint(point1, point2) {
9
11
  return new _three.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
10
12
  }
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = createResizeObserver;
7
+
7
8
  /**
8
9
  * @description: 简陋的 ResizeObserver polyfill
9
10
  */
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = evenNumber;
7
+
7
8
  function evenNumber(num, config) {
8
9
  var roundNum = Math.round(num);
9
10
  return roundNum % 2 === 0 ? roundNum : roundNum + Number(config !== null && config !== void 0 && config.smaller ? -1 : 1);