@realsee/vreo 2.3.7 → 2.3.8
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.
- package/lib/PlayController/createHTMLAudioElement.js +7 -13
- package/lib/PlayController/index.js +27 -95
- package/lib/Player/App.js +2 -28
- package/lib/Player/Controller.js +48 -132
- package/lib/Player/custom/SpatialScenePanel/index.js +45 -76
- package/lib/Player/hooks.js +1 -11
- package/lib/Player/index.js +34 -101
- package/lib/Player/modules/Drawer/index.js +2 -19
- package/lib/Player/modules/PopUp/index.js +2 -12
- package/lib/Player/modules/ResizeObserver/index.js +1 -9
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +29 -123
- package/lib/Player/modules/VideoAgent/VideoAgentScene.js +15 -37
- package/lib/Player/modules/VideoAgent/index.js +2 -19
- package/lib/Player/modules/Wave/index.js +14 -43
- package/lib/Player/modules/keyframes/BgMusic/index.js +10 -28
- package/lib/Player/modules/keyframes/CameraMovement/index.js +6 -30
- package/lib/Player/modules/keyframes/InfoPanel/index.js +9 -39
- package/lib/Player/modules/keyframes/ModelVideo/index.js +6 -32
- package/lib/Player/modules/keyframes/PanoEffect/index.js +19 -52
- package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +1 -8
- package/lib/Player/modules/keyframes/PanoTag/index.js +5 -23
- package/lib/Player/modules/keyframes/PanoTextLabel/index.js +27 -57
- package/lib/Player/modules/keyframes/Prompter/index.js +15 -42
- package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +19 -26
- package/lib/Player/modules/keyframes/VideoEffect/index.js +18 -59
- package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +0 -2
- package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +0 -1
- package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +0 -1
- package/lib/fivePlugins/CSS3DRenderPlugin/index.js +21 -62
- package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +2 -5
- package/lib/fivePlugins/CameraMovementPlugin/index.js +20 -74
- package/lib/fivePlugins/CameraMovementPlugin/typings.js +0 -4
- package/lib/fivePlugins/ModelTVVideoPlugin/index.js +15 -69
- package/lib/index.js +0 -1
- package/lib/react/index.js +10 -41
- package/lib/shared-utils/Audio.js +35 -96
- package/lib/shared-utils/AudioLike.js +20 -56
- package/lib/shared-utils/Preloader.js +0 -7
- package/lib/shared-utils/addResizeListener.js +0 -5
- package/lib/shared-utils/animationFrame/BetterTween.js +19 -58
- package/lib/shared-utils/animationFrame/index.js +2 -10
- package/lib/shared-utils/animationFrame/tween.js +2 -11
- package/lib/shared-utils/createTransMatrix.js +5 -26
- package/lib/shared-utils/getFileExpandedName.js +0 -1
- package/lib/shared-utils/getMediaInfo.js +1 -10
- package/lib/shared-utils/setElementDataset.js +0 -2
- package/lib/typings/VreoUnit.js +0 -15
- package/package.json +2 -1
|
@@ -1,42 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.SpatialScenePanel = SpatialScenePanel;
|
|
9
|
-
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
11
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
13
|
-
|
|
14
12
|
var _three = require("three");
|
|
15
|
-
|
|
16
13
|
var _BetterTween = require("../../../shared-utils/animationFrame/BetterTween");
|
|
17
|
-
|
|
18
14
|
var _CSS3DRenderPlugin = require("../../../fivePlugins/CSS3DRenderPlugin");
|
|
19
|
-
|
|
20
15
|
var _VreoUnit = require("../../../typings/VreoUnit");
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
16
|
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
|
-
|
|
26
17
|
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
|
-
|
|
28
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
|
-
|
|
30
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
31
|
-
|
|
32
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
33
|
-
|
|
34
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
35
|
-
|
|
36
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
37
|
-
|
|
38
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
39
|
-
|
|
40
18
|
// const getSphere = (position: Vector3, color = 0xffff00) => {
|
|
41
19
|
// const geometry = new SphereGeometry(0.05, 32, 16)
|
|
42
20
|
// const material = new MeshBasicMaterial({ color })
|
|
@@ -44,28 +22,27 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
44
22
|
// sphere.position.copy(position)
|
|
45
23
|
// return sphere
|
|
46
24
|
// }
|
|
25
|
+
|
|
47
26
|
var searchV1 = function searchV1(_ref) {
|
|
48
27
|
var five = _ref.five,
|
|
49
|
-
|
|
28
|
+
dom = _ref.dom;
|
|
50
29
|
var cameraDirection = new _three.Vector3();
|
|
51
30
|
five.camera.getWorldDirection(cameraDirection);
|
|
52
31
|
var cameraPosition = five.camera.position;
|
|
53
|
-
|
|
54
32
|
var _five$model$intersect = five.model.intersectRaycaster(new _three.Raycaster(cameraPosition, cameraDirection)),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
33
|
+
_five$model$intersect2 = (0, _slicedToArray2["default"])(_five$model$intersect, 1),
|
|
34
|
+
intersect = _five$model$intersect2[0];
|
|
58
35
|
var point = five.project2d(intersect.point);
|
|
59
|
-
var widescreen = window.innerWidth > 560 ? true : false;
|
|
60
|
-
|
|
36
|
+
var widescreen = window.innerWidth > 560 ? true : false;
|
|
37
|
+
// const width = dom!.clientWidth
|
|
61
38
|
var height = dom.clientHeight;
|
|
62
39
|
dom.style.left = point.x + 'px';
|
|
63
40
|
dom.style.top = point.y - height / 2 + 'px';
|
|
64
41
|
var rect = dom.getBoundingClientRect();
|
|
65
42
|
var left = rect.left,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
43
|
+
top = rect.top,
|
|
44
|
+
bottom = rect.bottom,
|
|
45
|
+
right = rect.right;
|
|
69
46
|
var leftBottom = new _three.Vector3(left, bottom);
|
|
70
47
|
var leftTop = new _three.Vector3(left, top);
|
|
71
48
|
var rightTop = new _three.Vector3(right, top);
|
|
@@ -75,23 +52,24 @@ var searchV1 = function searchV1(_ref) {
|
|
|
75
52
|
point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
|
|
76
53
|
point.setZ(0.5);
|
|
77
54
|
return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
|
|
78
|
-
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// __debug__
|
|
79
58
|
// const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
|
|
80
59
|
// points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
|
|
81
|
-
// 判断是手机 150
|
|
82
60
|
|
|
61
|
+
// 判断是手机 150
|
|
83
62
|
var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
|
|
84
63
|
return {
|
|
85
64
|
points: points,
|
|
86
65
|
ratio: ratio
|
|
87
66
|
};
|
|
88
67
|
};
|
|
68
|
+
|
|
89
69
|
/**
|
|
90
70
|
* 空间场景面板
|
|
91
71
|
* @returns
|
|
92
72
|
*/
|
|
93
|
-
|
|
94
|
-
|
|
95
73
|
function SpatialScenePanel(props) {
|
|
96
74
|
var timeoutRef = React.useRef(null);
|
|
97
75
|
var ref = React.useRef(null);
|
|
@@ -101,68 +79,63 @@ function SpatialScenePanel(props) {
|
|
|
101
79
|
if (!ref.current) {
|
|
102
80
|
return;
|
|
103
81
|
}
|
|
104
|
-
|
|
105
82
|
var callback = function callback(keyframe) {
|
|
106
83
|
if (keyframe.data.customType !== 'SpatialScenePanel') {
|
|
107
84
|
return;
|
|
108
85
|
}
|
|
86
|
+
var data = keyframe.data;
|
|
109
87
|
|
|
110
|
-
|
|
111
|
-
|
|
88
|
+
// const data = mockData
|
|
112
89
|
var _searchV = searchV1({
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
90
|
+
five: props.five,
|
|
91
|
+
dom: ref.current
|
|
92
|
+
}),
|
|
93
|
+
points = _searchV.points,
|
|
94
|
+
ratio = _searchV.ratio;
|
|
119
95
|
var _ref2 = rendererRef.current.create3DDomContainer(points, {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
96
|
+
ratio: ratio,
|
|
97
|
+
autoRender: false
|
|
98
|
+
}) || {},
|
|
99
|
+
container = _ref2.container,
|
|
100
|
+
dispose = _ref2.dispose,
|
|
101
|
+
css3DObject = _ref2.css3DObject,
|
|
102
|
+
render = _ref2.render;
|
|
128
103
|
Object.assign(window, {
|
|
129
104
|
$css3DObject: css3DObject
|
|
130
105
|
});
|
|
131
106
|
if (!container) return;
|
|
132
|
-
|
|
133
107
|
_reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
|
|
134
108
|
ref: function ref(_ref3) {
|
|
135
109
|
return panelRef.current = _ref3;
|
|
136
110
|
},
|
|
137
111
|
data: data
|
|
138
112
|
}), container);
|
|
139
|
-
|
|
140
113
|
var startRotateY = -(Math.PI * 2) / 9;
|
|
141
114
|
var lastRotateY = 0;
|
|
142
115
|
(0, _BetterTween.tweenProgress)(1000).onUpdate(function (_ref4) {
|
|
143
116
|
var progress = _ref4.progress;
|
|
144
117
|
var needRotateY = Math.PI / 90 * 11 * progress;
|
|
145
118
|
var rotateY = needRotateY - lastRotateY;
|
|
146
|
-
css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
|
|
147
|
-
|
|
119
|
+
css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
|
|
120
|
+
// css3DObject?.rotateZ
|
|
148
121
|
lastRotateY = needRotateY;
|
|
149
122
|
}).onStart(function () {
|
|
150
123
|
css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
|
|
151
124
|
render();
|
|
152
125
|
}).onDispose(function () {
|
|
153
126
|
var _panelRef$current;
|
|
154
|
-
|
|
155
127
|
(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
|
|
156
|
-
}).play();
|
|
128
|
+
}).play();
|
|
129
|
+
|
|
130
|
+
// Object.assign(window, { $dispose: () => {
|
|
157
131
|
// panelRef.current?.classList.add('hide')
|
|
158
132
|
// setTimeout(() => dispose?.(), 1500)
|
|
159
133
|
// } })
|
|
160
134
|
|
|
161
135
|
var start = keyframe.start,
|
|
162
|
-
|
|
136
|
+
end = keyframe.end;
|
|
163
137
|
timeoutRef.current = setTimeout(function () {
|
|
164
138
|
var _panelRef$current2;
|
|
165
|
-
|
|
166
139
|
(_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
|
|
167
140
|
timeoutRef.current = setTimeout(function () {
|
|
168
141
|
dispose === null || dispose === void 0 ? void 0 : dispose();
|
|
@@ -170,15 +143,14 @@ function SpatialScenePanel(props) {
|
|
|
170
143
|
}, 1500);
|
|
171
144
|
}, end - start);
|
|
172
145
|
};
|
|
173
|
-
|
|
174
146
|
Object.assign(window, {
|
|
175
147
|
$callback: callback
|
|
176
|
-
});
|
|
148
|
+
});
|
|
177
149
|
|
|
150
|
+
// setTimeout(() => {callback()}, 8000)
|
|
178
151
|
props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
|
|
179
152
|
return function () {
|
|
180
153
|
props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
|
|
181
|
-
|
|
182
154
|
if (timeoutRef.current) {
|
|
183
155
|
clearTimeout(timeoutRef.current);
|
|
184
156
|
}
|
|
@@ -189,27 +161,22 @@ function SpatialScenePanel(props) {
|
|
|
189
161
|
ref: ref
|
|
190
162
|
});
|
|
191
163
|
}
|
|
192
|
-
/** 背景动画:控制延迟 */
|
|
193
|
-
|
|
194
164
|
|
|
165
|
+
/** 背景动画:控制延迟 */
|
|
195
166
|
function SpatialScenePanelBg() {
|
|
196
167
|
var ref = React.useRef(null);
|
|
197
168
|
var timeoutRef = React.useRef(null);
|
|
198
169
|
React.useEffect(function () {
|
|
199
170
|
if (!ref.current) return;
|
|
200
|
-
|
|
201
171
|
var listener = function listener() {
|
|
202
172
|
var _ref$current;
|
|
203
|
-
|
|
204
173
|
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
|
|
205
174
|
timeoutRef.current = setTimeout(function () {
|
|
206
175
|
var _ref$current2;
|
|
207
|
-
|
|
208
176
|
(_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
|
|
209
177
|
timeoutRef.current = null;
|
|
210
178
|
}, 3000);
|
|
211
179
|
};
|
|
212
|
-
|
|
213
180
|
ref.current.addEventListener('animationend', listener);
|
|
214
181
|
return function () {
|
|
215
182
|
if (ref.current) ref.current.removeEventListener('animationend', listener);
|
|
@@ -221,10 +188,8 @@ function SpatialScenePanelBg() {
|
|
|
221
188
|
className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation"
|
|
222
189
|
});
|
|
223
190
|
}
|
|
224
|
-
|
|
225
191
|
var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
|
|
226
192
|
var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
|
|
227
|
-
|
|
228
193
|
return /*#__PURE__*/React.createElement("div", {
|
|
229
194
|
className: "SpatialScenePanel",
|
|
230
195
|
ref: myRef
|
|
@@ -254,8 +219,11 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
|
|
|
254
219
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
255
220
|
className: "SpatialScenePanel-disappear-area"
|
|
256
221
|
}));
|
|
257
|
-
});
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
// export function SpatialScenePanel() {
|
|
258
225
|
// // const data = mockData
|
|
226
|
+
|
|
259
227
|
// return (
|
|
260
228
|
// <div className="SpatialScenePanel" >
|
|
261
229
|
// <div className="SpatialScenePanel-show-area">
|
|
@@ -274,6 +242,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
|
|
|
274
242
|
// ))}
|
|
275
243
|
// </div>
|
|
276
244
|
// </div>
|
|
245
|
+
|
|
277
246
|
// <div className="SpatialScenePanel-disappear-area"></div>
|
|
278
247
|
// </div>
|
|
279
248
|
// )
|
package/lib/Player/hooks.js
CHANGED
|
@@ -1,38 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.useController = useController;
|
|
7
8
|
exports.useFiveInstance = useFiveInstance;
|
|
8
9
|
exports.useFiveProject2d = useFiveProject2d;
|
|
9
|
-
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
11
|
var _Controller = require("./Controller");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
-
|
|
16
12
|
function useController() {
|
|
17
13
|
var controller = _react["default"].useContext(_Controller.ControllerContext);
|
|
18
|
-
|
|
19
14
|
if (!controller) {
|
|
20
15
|
throw new Error('没有找到 "ControllerContext"');
|
|
21
16
|
}
|
|
22
|
-
|
|
23
17
|
return controller;
|
|
24
18
|
}
|
|
25
|
-
|
|
26
19
|
function useFiveInstance() {
|
|
27
20
|
var controller = useController();
|
|
28
|
-
|
|
29
21
|
if (!controller.five) {
|
|
30
22
|
throw new Error('没有找到 "five" 实例');
|
|
31
23
|
}
|
|
32
|
-
|
|
33
24
|
return controller.five;
|
|
34
25
|
}
|
|
35
|
-
|
|
36
26
|
function useFiveProject2d() {
|
|
37
27
|
var five = useFiveInstance();
|
|
38
28
|
return function (vector) {
|
package/lib/Player/index.js
CHANGED
|
@@ -1,108 +1,66 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.Player = void 0;
|
|
9
|
-
|
|
9
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
15
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
10
16
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
17
|
var ReactDOM = _interopRequireWildcard(require("react-dom"));
|
|
13
|
-
|
|
14
18
|
var _five = require("@realsee/five");
|
|
15
|
-
|
|
16
19
|
var _App = require("./App");
|
|
17
|
-
|
|
18
20
|
var _Controller = require("./Controller");
|
|
19
|
-
|
|
20
21
|
var _VreoUnit = require("../typings/VreoUnit");
|
|
21
|
-
|
|
22
22
|
var _mobx = require("mobx");
|
|
23
|
-
|
|
24
23
|
var _Drawer = require("./modules/Drawer");
|
|
25
|
-
|
|
26
24
|
var _PopUp = require("./modules/PopUp");
|
|
27
|
-
|
|
28
25
|
var _Audio = require("../shared-utils/Audio");
|
|
29
|
-
|
|
30
26
|
var _location$search$matc, _location$search$matc2;
|
|
31
|
-
|
|
32
27
|
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); }
|
|
33
|
-
|
|
34
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; }
|
|
35
|
-
|
|
36
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
37
|
-
|
|
38
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
39
|
-
|
|
40
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
41
|
-
|
|
42
|
-
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); } }
|
|
43
|
-
|
|
44
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
45
|
-
|
|
46
|
-
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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
47
|
-
|
|
48
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
49
|
-
|
|
50
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
51
|
-
|
|
52
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
53
|
-
|
|
54
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
55
|
-
|
|
29
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
56
30
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
57
|
-
|
|
58
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
59
|
-
|
|
60
31
|
var DefaultAudioCacheLength = 3;
|
|
61
32
|
var id = "vreo-app-dhjskadhksahdjskahdjksa";
|
|
62
33
|
var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 = location.search.match(/audio_cache=(\d+)/)) === null || _location$search$matc2 === void 0 ? void 0 : _location$search$matc2[1]) !== null && _location$search$matc !== void 0 ? _location$search$matc : DefaultAudioCacheLength);
|
|
63
|
-
|
|
64
34
|
var Player = /*#__PURE__*/function (_Subscribe) {
|
|
65
|
-
|
|
66
|
-
|
|
35
|
+
(0, _inherits2["default"])(Player, _Subscribe);
|
|
67
36
|
var _super = _createSuper(Player);
|
|
68
|
-
|
|
69
37
|
function Player(five) {
|
|
70
38
|
var _this;
|
|
71
|
-
|
|
72
39
|
var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
73
|
-
|
|
74
|
-
_classCallCheck(this, Player);
|
|
75
|
-
|
|
40
|
+
(0, _classCallCheck2["default"])(this, Player);
|
|
76
41
|
_this = _super.call(this);
|
|
77
42
|
_this.$five = five;
|
|
78
43
|
(0, _Audio.generateBlankAudio)(audioCacheLength);
|
|
79
|
-
|
|
80
44
|
if (!configs.container) {
|
|
81
45
|
configs.container = configs.containter;
|
|
82
46
|
}
|
|
83
|
-
|
|
84
47
|
if (!configs.container) {
|
|
85
48
|
var _five$getElement;
|
|
86
|
-
|
|
87
49
|
var oldElement = document.getElementById(id);
|
|
88
|
-
|
|
89
50
|
if (oldElement) {
|
|
90
51
|
ReactDOM.unmountComponentAtNode(oldElement);
|
|
91
52
|
oldElement.remove();
|
|
92
53
|
}
|
|
93
|
-
|
|
94
54
|
var container = document.createElement('div');
|
|
95
55
|
container.id = id;
|
|
96
56
|
configs.container = container;
|
|
97
57
|
var fiveCanvasDomParent = (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : _five$getElement.parentNode;
|
|
98
|
-
|
|
99
58
|
if (fiveCanvasDomParent) {
|
|
100
59
|
fiveCanvasDomParent.append(container);
|
|
101
60
|
} else {
|
|
102
61
|
document.body.append(container);
|
|
103
62
|
}
|
|
104
63
|
}
|
|
105
|
-
|
|
106
64
|
if (!configs.container.classList.contains('vreo-app')) configs.container.classList.add('vreo-app');
|
|
107
65
|
_this.configs = Object.freeze(Object.assign({
|
|
108
66
|
keyframeMap: {}
|
|
@@ -130,8 +88,9 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
130
88
|
},
|
|
131
89
|
five: five
|
|
132
90
|
});
|
|
133
|
-
})), configs.container);
|
|
91
|
+
})), configs.container);
|
|
134
92
|
|
|
93
|
+
// 监听播放情况:抛出触发时机
|
|
135
94
|
(0, _mobx.reaction)(function () {
|
|
136
95
|
return _this.controller.ended;
|
|
137
96
|
}, function (ended) {
|
|
@@ -148,25 +107,23 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
148
107
|
});
|
|
149
108
|
return _this;
|
|
150
109
|
}
|
|
151
|
-
|
|
152
|
-
_createClass(Player, [{
|
|
110
|
+
(0, _createClass2["default"])(Player, [{
|
|
153
111
|
key: "load",
|
|
154
112
|
value: function () {
|
|
155
|
-
var _load =
|
|
113
|
+
var _load = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(vreoUnit) {
|
|
156
114
|
var _this$controller$medi,
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
115
|
+
_this$configs$imageOp,
|
|
116
|
+
_this$controller$vide,
|
|
117
|
+
_this$controller$vide2,
|
|
118
|
+
_this2 = this;
|
|
162
119
|
var currentTime,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
return
|
|
120
|
+
preload,
|
|
121
|
+
force,
|
|
122
|
+
panoIndexMap,
|
|
123
|
+
panoIndexes,
|
|
124
|
+
i,
|
|
125
|
+
_args = arguments;
|
|
126
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
170
127
|
while (1) {
|
|
171
128
|
switch (_context.prev = _context.next) {
|
|
172
129
|
case 0:
|
|
@@ -175,10 +132,10 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
175
132
|
force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
|
|
176
133
|
this.controller.clear();
|
|
177
134
|
this.controller.setLoading(true);
|
|
178
|
-
|
|
179
135
|
if (force) {
|
|
180
136
|
vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
|
|
181
|
-
}
|
|
137
|
+
}
|
|
138
|
+
// if (!this.controller.visible) {
|
|
182
139
|
// this.controller.setVisible(true)
|
|
183
140
|
// // 延迟 500ms 规避跟 DOM 动画冲突
|
|
184
141
|
// await new Promise((resolve) => {
|
|
@@ -186,81 +143,66 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
186
143
|
// })
|
|
187
144
|
// }
|
|
188
145
|
|
|
189
|
-
|
|
190
146
|
if (this.controller.stopInterval) {
|
|
191
147
|
this.controller.stopInterval();
|
|
192
148
|
this.controller.stopInterval = undefined;
|
|
193
149
|
}
|
|
194
|
-
|
|
195
150
|
this.controller.vreoUnit = vreoUnit;
|
|
196
|
-
(_this$controller$medi = this.controller.mediaInstance) === null || _this$controller$medi === void 0 ? void 0 : _this$controller$medi.pause();
|
|
197
|
-
// 是否降低图片分辨率
|
|
151
|
+
(_this$controller$medi = this.controller.mediaInstance) === null || _this$controller$medi === void 0 ? void 0 : _this$controller$medi.pause();
|
|
198
152
|
|
|
153
|
+
// 预载逻辑
|
|
154
|
+
// 是否降低图片分辨率
|
|
199
155
|
if (this.$five.imageOptions.size && (_this$configs$imageOp = this.configs.imageOptions) !== null && _this$configs$imageOp !== void 0 && _this$configs$imageOp.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
|
|
200
156
|
this.$five.imageOptions.size = this.configs.imageOptions.size;
|
|
201
|
-
}
|
|
202
|
-
|
|
157
|
+
}
|
|
203
158
|
|
|
159
|
+
// 预载数据中的点位
|
|
204
160
|
if (!(preload || preload === undefined && this.configs.autoPreload)) {
|
|
205
161
|
_context.next = 20;
|
|
206
162
|
break;
|
|
207
163
|
}
|
|
208
|
-
|
|
209
164
|
panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
|
|
210
165
|
if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
|
|
211
166
|
return false;
|
|
212
167
|
}
|
|
213
|
-
|
|
214
168
|
var data = vreoKeyframe.data;
|
|
215
|
-
|
|
216
169
|
if (data.panoIndex === undefined) {
|
|
217
170
|
return false;
|
|
218
171
|
}
|
|
219
|
-
|
|
220
172
|
return true;
|
|
221
173
|
}).reduce(function (accu, curr) {
|
|
222
174
|
var panoIndex = curr.data.panoIndex;
|
|
223
|
-
|
|
224
175
|
if (!accu[panoIndex]) {
|
|
225
176
|
accu[panoIndex] = true;
|
|
226
177
|
}
|
|
227
|
-
|
|
228
178
|
return accu;
|
|
229
179
|
}, {});
|
|
230
180
|
panoIndexes = Object.keys(panoIndexMap);
|
|
231
181
|
i = 0;
|
|
232
|
-
|
|
233
182
|
case 14:
|
|
234
183
|
if (!(i < panoIndexes.length)) {
|
|
235
184
|
_context.next = 20;
|
|
236
185
|
break;
|
|
237
186
|
}
|
|
238
|
-
|
|
239
187
|
_context.next = 17;
|
|
240
188
|
return this.$five.preloadPano(Number(panoIndexes[i]));
|
|
241
|
-
|
|
242
189
|
case 17:
|
|
243
190
|
i++;
|
|
244
191
|
_context.next = 14;
|
|
245
192
|
break;
|
|
246
|
-
|
|
247
193
|
case 20:
|
|
248
194
|
// 新数据载入就绪
|
|
249
195
|
this.emit('loaded', vreoUnit);
|
|
250
196
|
this.controller.emit('loaded', vreoUnit);
|
|
251
|
-
|
|
252
197
|
if ((_this$controller$vide = this.controller.videoAgentScene) !== null && _this$controller$vide !== void 0 && _this$controller$vide.videoAgentMesh.mediaInstance) {
|
|
253
198
|
this.controller.videoAgentScene.videoAgentMesh.mediaInstance.currentTime = currentTime / 1000;
|
|
254
199
|
}
|
|
255
|
-
|
|
256
200
|
this.controller.setAvatar(vreoUnit.video.avatar);
|
|
257
201
|
_context.next = 26;
|
|
258
202
|
return (0, _Audio.waitForBlankAudioGenerated)();
|
|
259
|
-
|
|
260
203
|
case 26:
|
|
261
204
|
_context.next = 28;
|
|
262
205
|
return (_this$controller$vide2 = this.controller.videoAgentScene) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
|
|
263
|
-
|
|
264
206
|
case 28:
|
|
265
207
|
this.controller.setEnded(false);
|
|
266
208
|
this.play();
|
|
@@ -269,7 +211,6 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
269
211
|
});
|
|
270
212
|
this.controller.setLoading(false);
|
|
271
213
|
return _context.abrupt("return", true);
|
|
272
|
-
|
|
273
214
|
case 33:
|
|
274
215
|
case "end":
|
|
275
216
|
return _context.stop();
|
|
@@ -277,11 +218,9 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
277
218
|
}
|
|
278
219
|
}, _callee, this);
|
|
279
220
|
}));
|
|
280
|
-
|
|
281
221
|
function load(_x) {
|
|
282
222
|
return _load.apply(this, arguments);
|
|
283
223
|
}
|
|
284
|
-
|
|
285
224
|
return load;
|
|
286
225
|
}()
|
|
287
226
|
}, {
|
|
@@ -293,13 +232,10 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
293
232
|
key: "play",
|
|
294
233
|
value: function play(currentTime) {
|
|
295
234
|
var _this$controller$vreo;
|
|
296
|
-
|
|
297
235
|
if (this.controller.playing) return true;
|
|
298
|
-
|
|
299
236
|
if (currentTime && this.controller.mediaInstance) {
|
|
300
237
|
this.controller.mediaInstance.currentTime = currentTime / 1000;
|
|
301
238
|
}
|
|
302
|
-
|
|
303
239
|
Object.assign(window, {
|
|
304
240
|
$vreoController: this.controller
|
|
305
241
|
});
|
|
@@ -341,15 +277,12 @@ var Player = /*#__PURE__*/function (_Subscribe) {
|
|
|
341
277
|
key: "dispose",
|
|
342
278
|
value: function dispose() {
|
|
343
279
|
this.controller.dispose();
|
|
344
|
-
|
|
345
280
|
if (this.configs.container) {
|
|
346
281
|
ReactDOM.unmountComponentAtNode(this.configs.container);
|
|
347
282
|
}
|
|
348
283
|
}
|
|
349
284
|
}]);
|
|
350
|
-
|
|
351
285
|
return Player;
|
|
352
286
|
}(_five.Subscribe);
|
|
353
|
-
|
|
354
287
|
exports.Player = Player;
|
|
355
288
|
console.log("\n \u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n \u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n \u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n \u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
|