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