@realsee/vreo 2.6.4-alpha.1 → 2.6.4-alpha.2
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 +10 -14
- package/lib/PlayController/index.js +63 -73
- package/lib/Player/App.js +2 -2
- package/lib/Player/AudioFocus.d.ts +36 -0
- package/lib/Player/AudioFocus.js +139 -0
- package/lib/Player/Controller.d.ts +6 -0
- package/lib/Player/Controller.js +93 -62
- package/lib/Player/custom/SpatialScenePanel/index.js +34 -11
- package/lib/Player/index.d.ts +8 -2
- package/lib/Player/index.js +182 -123
- package/lib/Player/modules/Drawer/index.js +1 -2
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts +8 -1
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +173 -203
- package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts +1 -0
- package/lib/Player/modules/VideoAgent/VideoAgentScene.js +6 -2
- package/lib/Player/modules/VideoAgent/index.js +10 -2
- package/lib/Player/modules/keyframes/BgMusic/index.js +46 -74
- package/lib/Player/modules/keyframes/CameraMovement/index.js +43 -45
- package/lib/Player/modules/keyframes/InfoPanel/index.js +37 -32
- package/lib/Player/modules/keyframes/ModelVideo/index.js +98 -57
- package/lib/Player/modules/keyframes/PanoTag/index.js +1 -1
- package/lib/Player/modules/keyframes/PanoTextLabel/index.js +3 -3
- package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +3 -3
- package/lib/Player/modules/keyframes/VideoEffect/index.js +87 -74
- package/lib/Player/typings.d.ts +3 -0
- package/lib/fivePlugins/CSS3DRenderPlugin/index.js +6 -6
- package/lib/fivePlugins/CameraMovementPlugin/index.js +173 -180
- package/lib/fivePlugins/CameraMovementPlugin/typings.js +6 -6
- package/lib/fivePlugins/ModelTVVideoPlugin/index.d.ts +2 -0
- package/lib/fivePlugins/ModelTVVideoPlugin/index.js +87 -43
- package/lib/index.d.ts +1 -0
- package/lib/react/index.js +1 -1
- package/lib/shared-utils/Audio.js +53 -56
- package/lib/shared-utils/AudioLike.js +12 -14
- package/lib/shared-utils/animationFrame/BetterTween.js +13 -15
- package/lib/shared-utils/animationFrame/tween.js +1 -3
- package/lib/shared-utils/getMediaInfo.js +0 -1
- package/lib/typings/VreoUnit.js +134 -27
- package/package.json +6 -4
- package/docs/.nojekyll +0 -1
- package/docs/assets/custom.css +0 -78
- package/docs/assets/hierarchy.js +0 -1
- package/docs/assets/highlight.css +0 -127
- package/docs/assets/icons.js +0 -18
- package/docs/assets/icons.svg +0 -1
- package/docs/assets/main.js +0 -60
- package/docs/assets/navigation.js +0 -1
- package/docs/assets/search.js +0 -1
- package/docs/assets/style.css +0 -1640
- package/docs/classes/Player.AudioLike.html +0 -15
- package/docs/classes/Player.Controller.html +0 -87
- package/docs/classes/Player.Player.html +0 -54
- package/docs/classes/Player.VideoAgentMesh.html +0 -72
- package/docs/classes/Player.VideoAgentScene.html +0 -9
- package/docs/demo/assets/AppReact-CkuqZtcS.js +0 -1
- package/docs/demo/assets/default-BQGCQRLt.css +0 -1
- package/docs/demo/assets/default-CVvVdmSW.js +0 -5540
- package/docs/demo/assets/dynamic-CO5wq52h.js +0 -1
- package/docs/demo/assets/examples-BCLzFApO.css +0 -1
- package/docs/demo/assets/examples-DfiAz2fR.js +0 -25
- package/docs/demo/assets/index-CBBSwaYT.js +0 -1
- package/docs/demo/assets/index-CmEXi2sK.css +0 -1
- package/docs/demo/assets/main-BF1tvUg-.js +0 -25
- package/docs/demo/assets/react-BnzBLum3.css +0 -1
- package/docs/demo/assets/react-C4h9qndP.js +0 -25
- package/docs/demo/examples.html +0 -16
- package/docs/demo/index-react-dynamic.html +0 -18
- package/docs/demo/index-react.html +0 -19
- package/docs/demo/index.html +0 -19
- package/docs/enums/Player.InfoPanelStyleEnum.html +0 -3
- package/docs/enums/Player.InfoPanelTypeEnum.html +0 -4
- package/docs/enums/Player.PanoEffectEnum.html +0 -4
- package/docs/enums/Player.PanoTagEnum.html +0 -4
- package/docs/enums/Player.PanoTagStyleEnum.html +0 -6
- package/docs/enums/Player.VreoKeyframeEnum.html +0 -25
- package/docs/enums/fivePlugins.CameraMovementEffect.html +0 -3
- package/docs/enums/fivePlugins.Rotation.html +0 -4
- package/docs/functions/custom.SpatialScenePanel.html +0 -2
- package/docs/functions/react.useVreoAction.html +0 -8
- package/docs/functions/react.useVreoEventCallback.html +0 -10
- package/docs/functions/react.useVreoPausedState.html +0 -8
- package/docs/hierarchy.html +0 -1
- package/docs/index.html +0 -160
- package/docs/interfaces/Player.Appearance.html +0 -2
- package/docs/interfaces/Player.CustomVreoKeyframeProps.html +0 -3
- package/docs/interfaces/Player.PlayerConfigs.html +0 -20
- package/docs/interfaces/Player.Vertex.html +0 -5
- package/docs/interfaces/Player.VideoAgentMeshOptions.html +0 -9
- package/docs/interfaces/Player.VreoKeyframe.html +0 -8
- package/docs/interfaces/Player.VreoUnit.html +0 -9
- package/docs/interfaces/Player.VreoVideo.html +0 -7
- package/docs/interfaces/fivePlugins.CSS3DRenderPluginExportType.html +0 -8
- package/docs/interfaces/fivePlugins.CameraMovementOptsCallback.html +0 -3
- package/docs/interfaces/fivePlugins.CameraMovementPluginExportType.html +0 -5
- package/docs/interfaces/fivePlugins.CameraMovementPluginParameterType.html +0 -1
- package/docs/interfaces/fivePlugins.ModelTVVideoPluginData.html +0 -5
- package/docs/interfaces/fivePlugins.ModelTVVideoPluginExportType.html +0 -4
- package/docs/interfaces/fivePlugins.ModelTVVideoPluginParameterType.html +0 -2
- package/docs/interfaces/fivePlugins.Vector3Position.html +0 -5
- package/docs/interfaces/react.VreoActionCallbacks.html +0 -18
- package/docs/interfaces/react.VreoProviderProps.html +0 -6
- package/docs/modules/Player.html +0 -1
- package/docs/modules/custom.html +0 -1
- package/docs/modules/fivePlugins.html +0 -1
- package/docs/modules/react.html +0 -1
- package/docs/modules.html +0 -1
- package/docs/types/Player.AppSize.html +0 -1
- package/docs/types/Player.AudioLikeEvent.html +0 -6
- package/docs/types/Player.CameraMovementData.html +0 -2
- package/docs/types/Player.CustomData.html +0 -2
- package/docs/types/Player.InfoPanelData.html +0 -7
- package/docs/types/Player.ModelVideoData.html +0 -9
- package/docs/types/Player.PanoEffectData.html +0 -4
- package/docs/types/Player.PanoTagData.html +0 -6
- package/docs/types/Player.PanoTextLabelData.html +0 -7
- package/docs/types/Player.PrompterData.html +0 -3
- package/docs/types/Player.QuadrangleVertexs.html +0 -2
- package/docs/types/Player.Quaternion.html +0 -6
- package/docs/types/Player.UpdateVRPanoramaData.html +0 -7
- package/docs/types/Player.Vertexs.html +0 -2
- package/docs/types/Player.VideoEffectData.html +0 -7
- package/docs/types/Player.VreoKeyframeEvent.html +0 -2
- package/docs/types/Player.VreoKeyframeMap.html +0 -6
- package/docs/types/Player.VreoSubscribe.html +0 -1
- package/docs/types/Player.WaveAppearance.html +0 -1
- package/docs/types/fivePlugins.CSS3DRenderPluginParameterType.html +0 -1
- package/docs/types/fivePlugins.MoveArgs.html +0 -1
- package/docs/types/fivePlugins.MoveOpts.html +0 -1
- package/docs/types/fivePlugins.RotateArgs.html +0 -1
- package/docs/types/fivePlugins.RotateOpts.html +0 -1
- package/docs/variables/fivePlugins.CSS3DRenderPlugin.html +0 -3
- package/docs/variables/fivePlugins.CameraMovementPlugin.html +0 -2
- package/docs/variables/fivePlugins.ModelTVVideoPlugin.html +0 -1
- package/docs/variables/react.VreoProvider.html +0 -9
package/lib/Player/Controller.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
7
5
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
-
function ownKeys(
|
|
10
|
-
function _objectSpread(
|
|
11
|
-
function
|
|
12
|
-
function _isNativeReflectConstruct() {
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
11
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
|
+
import { NarrationAudioFocus } from "./AudioFocus.js";
|
|
13
13
|
import { Subscribe } from '@realsee/five';
|
|
14
14
|
import { action, makeObservable, observable, reaction } from 'mobx';
|
|
15
15
|
import * as React from 'react';
|
|
@@ -42,44 +42,57 @@ import { getMediaType } from "../shared-utils/getMediaInfo.js";
|
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
44
|
export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
45
|
-
_inherits(Controller, _Subscribe);
|
|
46
|
-
var _super = _createSuper(Controller);
|
|
47
|
-
/**
|
|
48
|
-
* 创建 Controller 实例
|
|
49
|
-
* @param params - 构造参数对象
|
|
50
|
-
* @param params.five - Five 渲染引擎实例
|
|
51
|
-
* @param params.container - DOM 容器元素
|
|
52
|
-
* @param params.configs - 播放器配置
|
|
53
|
-
*/
|
|
54
45
|
function Controller(_ref) {
|
|
55
46
|
var _this;
|
|
56
47
|
var five = _ref.five,
|
|
57
48
|
container = _ref.container,
|
|
58
49
|
configs = _ref.configs;
|
|
59
50
|
_classCallCheck(this, Controller);
|
|
60
|
-
_this =
|
|
61
|
-
_defineProperty(
|
|
62
|
-
_defineProperty(
|
|
63
|
-
_defineProperty(
|
|
64
|
-
|
|
51
|
+
_this = _callSuper(this, Controller);
|
|
52
|
+
_defineProperty(_this, "playing", false);
|
|
53
|
+
_defineProperty(_this, "ended", false);
|
|
54
|
+
_defineProperty(_this, "loading", false);
|
|
55
|
+
// null 表示加载失败
|
|
56
|
+
_defineProperty(_this, "containerSize", {
|
|
65
57
|
width: 0,
|
|
66
58
|
height: 0
|
|
67
59
|
});
|
|
68
|
-
_defineProperty(
|
|
69
|
-
_defineProperty(
|
|
60
|
+
_defineProperty(_this, "waveAppearance", null);
|
|
61
|
+
_defineProperty(_this, "appearance", {
|
|
70
62
|
waveStyle: 'wave'
|
|
71
63
|
});
|
|
72
|
-
_defineProperty(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
_defineProperty(_this, "avatar", {});
|
|
65
|
+
/**
|
|
66
|
+
* 是否正在等待背景音乐加载
|
|
67
|
+
* 当此状态为 true 时,播放流程会暂停,等待音频加载完成
|
|
68
|
+
*/
|
|
69
|
+
_defineProperty(_this, "waitingForBgMusic", false);
|
|
70
|
+
_defineProperty(_this, "visible", false);
|
|
71
|
+
_defineProperty(_this, "popUp", null);
|
|
72
|
+
_defineProperty(_this, "drawerConfig", null);
|
|
73
|
+
/**
|
|
74
|
+
* 创建 Controller 实例
|
|
75
|
+
* @param params - 构造参数对象
|
|
76
|
+
* @param params.five - Five 渲染引擎实例
|
|
77
|
+
* @param params.container - DOM 容器元素
|
|
78
|
+
* @param params.configs - 播放器配置
|
|
79
|
+
*/
|
|
80
|
+
_defineProperty(_this, "resumeGeneration", 0);
|
|
81
|
+
_defineProperty(_this, "disposers", []);
|
|
82
|
+
_this.audioFocus = new NarrationAudioFocus(configs.audioFocus, function () {
|
|
83
|
+
var _this$videoAgentScene;
|
|
84
|
+
_this.resuming = undefined;
|
|
85
|
+
++_this.resumeGeneration;
|
|
86
|
+
_this.setPlaying(false);
|
|
87
|
+
(_this$videoAgentScene = _this.videoAgentScene) === null || _this$videoAgentScene === void 0 || _this$videoAgentScene.videoAgentMesh.stop();
|
|
88
|
+
_this.setWaitingForBgMusic(false);
|
|
89
|
+
});
|
|
77
90
|
_this.configs = configs;
|
|
78
91
|
_this.container = container;
|
|
79
92
|
_this.five = five;
|
|
80
93
|
_this.appSize = configs.appSize;
|
|
81
94
|
_this.appearance = _objectSpread(_objectSpread({}, _this.appearance), configs.appearance);
|
|
82
|
-
makeObservable(
|
|
95
|
+
makeObservable(_this, {
|
|
83
96
|
visible: observable,
|
|
84
97
|
setVisible: action,
|
|
85
98
|
playing: observable,
|
|
@@ -104,7 +117,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
104
117
|
waitingForBgMusic: observable,
|
|
105
118
|
setWaitingForBgMusic: action
|
|
106
119
|
});
|
|
107
|
-
reaction(function () {
|
|
120
|
+
_this.disposers.push(reaction(function () {
|
|
108
121
|
return [_this.appearance.waveStyle, _this.loading];
|
|
109
122
|
}, function (_ref2) {
|
|
110
123
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
@@ -135,9 +148,9 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
135
148
|
}
|
|
136
149
|
}, {
|
|
137
150
|
fireImmediately: true
|
|
138
|
-
});
|
|
151
|
+
}));
|
|
139
152
|
if (!_this.appSize) {
|
|
140
|
-
reaction(function () {
|
|
153
|
+
_this.disposers.push(reaction(function () {
|
|
141
154
|
return _this.containerSize;
|
|
142
155
|
}, function (containerSize) {
|
|
143
156
|
if (!(containerSize !== null && containerSize !== void 0 && containerSize.width)) return;
|
|
@@ -161,7 +174,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
161
174
|
});
|
|
162
175
|
}, {
|
|
163
176
|
fireImmediately: true
|
|
164
|
-
});
|
|
177
|
+
}));
|
|
165
178
|
} else {
|
|
166
179
|
setElementDataset(_this.container, {
|
|
167
180
|
size: _this.appSize
|
|
@@ -169,20 +182,20 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
169
182
|
}
|
|
170
183
|
|
|
171
184
|
// 监听播放情况:抛出触发时机
|
|
172
|
-
reaction(function () {
|
|
185
|
+
_this.disposers.push(reaction(function () {
|
|
173
186
|
return _this.ended;
|
|
174
187
|
}, function (ended) {
|
|
175
188
|
if (ended) {
|
|
176
189
|
_this.emit('paused', true);
|
|
177
190
|
}
|
|
178
|
-
});
|
|
179
|
-
reaction(function () {
|
|
191
|
+
}));
|
|
192
|
+
_this.disposers.push(reaction(function () {
|
|
180
193
|
return _this.playing;
|
|
181
194
|
}, function (playing) {
|
|
182
195
|
if (!_this.ended) {
|
|
183
196
|
_this.emit(playing ? 'playing' : 'paused');
|
|
184
197
|
}
|
|
185
|
-
});
|
|
198
|
+
}));
|
|
186
199
|
return _this;
|
|
187
200
|
}
|
|
188
201
|
|
|
@@ -190,23 +203,17 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
190
203
|
* 获取播放器是否准备就绪
|
|
191
204
|
* @returns 是否有可用的视频代理场景
|
|
192
205
|
*/
|
|
193
|
-
|
|
206
|
+
_inherits(Controller, _Subscribe);
|
|
207
|
+
return _createClass(Controller, [{
|
|
194
208
|
key: "agentType",
|
|
195
209
|
get:
|
|
196
|
-
// null 表示加载失败
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* 是否正在等待背景音乐加载
|
|
200
|
-
* 当此状态为 true 时,播放流程会暂停,等待音频加载完成
|
|
201
|
-
*/
|
|
202
|
-
|
|
203
210
|
/**
|
|
204
211
|
* 获取当前播放媒体的类型
|
|
205
212
|
* @returns 'video' | 'avatar' | 'none' - 媒体类型
|
|
206
213
|
*/
|
|
207
214
|
function get() {
|
|
208
|
-
var _this$
|
|
209
|
-
var type = getMediaType((_this$
|
|
215
|
+
var _this$videoAgentScene2, _this$avatar;
|
|
216
|
+
var type = getMediaType((_this$videoAgentScene2 = this.videoAgentScene) === null || _this$videoAgentScene2 === void 0 ? void 0 : _this$videoAgentScene2.videoAgentMesh.videoUrl);
|
|
210
217
|
if ((_this$avatar = this.avatar) !== null && _this$avatar !== void 0 && _this$avatar.force) return 'avatar';
|
|
211
218
|
if (type === 'video') return 'video';
|
|
212
219
|
return 'none';
|
|
@@ -277,7 +284,9 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
277
284
|
}, {
|
|
278
285
|
key: "setPlaying",
|
|
279
286
|
value: function setPlaying(playing) {
|
|
287
|
+
if (playing && !this.audioFocus.active) return;
|
|
280
288
|
this.playing = playing;
|
|
289
|
+
if (playing) this.resumeMedia();
|
|
281
290
|
}
|
|
282
291
|
|
|
283
292
|
/**
|
|
@@ -340,8 +349,8 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
340
349
|
}, {
|
|
341
350
|
key: "currentTime",
|
|
342
351
|
get: function get() {
|
|
343
|
-
var _this$
|
|
344
|
-
return ((_this$
|
|
352
|
+
var _this$videoAgentScene3;
|
|
353
|
+
return ((_this$videoAgentScene3 = this.videoAgentScene) === null || _this$videoAgentScene3 === void 0 ? void 0 : _this$videoAgentScene3.videoAgentMesh.currentTime) || 0;
|
|
345
354
|
}
|
|
346
355
|
|
|
347
356
|
/**
|
|
@@ -375,8 +384,8 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
375
384
|
}, {
|
|
376
385
|
key: "mediaInstance",
|
|
377
386
|
get: function get() {
|
|
378
|
-
var _this$
|
|
379
|
-
return (_this$
|
|
387
|
+
var _this$videoAgentScene4;
|
|
388
|
+
return (_this$videoAgentScene4 = this.videoAgentScene) === null || _this$videoAgentScene4 === void 0 ? void 0 : _this$videoAgentScene4.videoAgentMesh.mediaInstance;
|
|
380
389
|
}
|
|
381
390
|
|
|
382
391
|
/**
|
|
@@ -389,23 +398,23 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
389
398
|
key: "requestAnimationFrameLoop",
|
|
390
399
|
value: function requestAnimationFrameLoop(callback) {
|
|
391
400
|
var _this$mediaInstance3,
|
|
392
|
-
_this$mediaInstance6,
|
|
393
401
|
_this3 = this;
|
|
394
402
|
// 如果正在等待背景音乐加载,暂停整个播放流程
|
|
395
403
|
if (this.waitingForBgMusic) {
|
|
396
404
|
var _this$mediaInstance;
|
|
397
405
|
if (!((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.paused)) {
|
|
398
406
|
var _this$mediaInstance2;
|
|
399
|
-
(_this$mediaInstance2 = this.mediaInstance) === null || _this$mediaInstance2 === void 0
|
|
407
|
+
(_this$mediaInstance2 = this.mediaInstance) === null || _this$mediaInstance2 === void 0 || _this$mediaInstance2.pause();
|
|
400
408
|
}
|
|
401
409
|
return;
|
|
402
410
|
}
|
|
403
411
|
if ((_this$mediaInstance3 = this.mediaInstance) !== null && _this$mediaInstance3 !== void 0 && _this$mediaInstance3.ended && this.mediaInstance.currentTime !== 0) {
|
|
404
412
|
var _this$vreoUnit;
|
|
405
413
|
if (this.ended) return;
|
|
406
|
-
(_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0
|
|
414
|
+
(_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 || _this$vreoUnit.keyframes.forEach(function (keyframe) {
|
|
407
415
|
return keyframe.parsed = false;
|
|
408
416
|
});
|
|
417
|
+
this.audioFocus.cancel('paused');
|
|
409
418
|
this.setEnded(true);
|
|
410
419
|
this.setPlaying(false);
|
|
411
420
|
this.mediaInstance.pause();
|
|
@@ -416,13 +425,11 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
416
425
|
var _this$mediaInstance4;
|
|
417
426
|
if (!((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused)) {
|
|
418
427
|
var _this$mediaInstance5;
|
|
419
|
-
(_this$mediaInstance5 = this.mediaInstance) === null || _this$mediaInstance5 === void 0
|
|
428
|
+
(_this$mediaInstance5 = this.mediaInstance) === null || _this$mediaInstance5 === void 0 || _this$mediaInstance5.pause();
|
|
420
429
|
}
|
|
421
430
|
return;
|
|
422
431
|
}
|
|
423
|
-
|
|
424
|
-
this.mediaInstance.play();
|
|
425
|
-
}
|
|
432
|
+
this.resumeMedia();
|
|
426
433
|
var currentKeyframes = this.currentKeyframes;
|
|
427
434
|
currentKeyframes.forEach(function (keyframe) {
|
|
428
435
|
if (keyframe.parsed) return;
|
|
@@ -433,6 +440,27 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
433
440
|
}
|
|
434
441
|
});
|
|
435
442
|
}
|
|
443
|
+
}, {
|
|
444
|
+
key: "resumeMedia",
|
|
445
|
+
value: function resumeMedia() {
|
|
446
|
+
var _this$mediaInstance6,
|
|
447
|
+
_this4 = this;
|
|
448
|
+
if (this.waitingForBgMusic) return;
|
|
449
|
+
if ((_this$mediaInstance6 = this.mediaInstance) !== null && _this$mediaInstance6 !== void 0 && _this$mediaInstance6.paused && this.playing && !this.resuming) {
|
|
450
|
+
var _this$videoAgentScene5;
|
|
451
|
+
var attempt = ++this.resumeGeneration;
|
|
452
|
+
this.resuming = attempt;
|
|
453
|
+
var valid = this.audioFocus.capture();
|
|
454
|
+
void ((_this$videoAgentScene5 = this.videoAgentScene) === null || _this$videoAgentScene5 === void 0 ? void 0 : _this$videoAgentScene5.videoAgentMesh.play().catch(function (error) {
|
|
455
|
+
if (valid()) {
|
|
456
|
+
_this4.audioFocus.cancel('paused');
|
|
457
|
+
console.error(error);
|
|
458
|
+
}
|
|
459
|
+
}).finally(function () {
|
|
460
|
+
if (_this4.resuming === attempt) _this4.resuming = undefined;
|
|
461
|
+
}));
|
|
462
|
+
}
|
|
463
|
+
}
|
|
436
464
|
|
|
437
465
|
/**
|
|
438
466
|
* 开始运行播放器逻辑循环
|
|
@@ -443,10 +471,10 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
443
471
|
}, {
|
|
444
472
|
key: "run",
|
|
445
473
|
value: function run(callback) {
|
|
446
|
-
var
|
|
474
|
+
var _this5 = this;
|
|
447
475
|
if (this.stopInterval) return;
|
|
448
476
|
this.stopInterval = requestAnimationFrameInterval(function () {
|
|
449
|
-
return
|
|
477
|
+
return _this5.requestAnimationFrameLoop(callback);
|
|
450
478
|
});
|
|
451
479
|
}
|
|
452
480
|
|
|
@@ -460,7 +488,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
460
488
|
value: function clear() {
|
|
461
489
|
var _this$vreoUnit2, _this$stopInterval;
|
|
462
490
|
this.setPlaying(false);
|
|
463
|
-
(_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0
|
|
491
|
+
(_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 || _this$vreoUnit2.keyframes.forEach(function (keyframe) {
|
|
464
492
|
return keyframe.parsed = false;
|
|
465
493
|
});
|
|
466
494
|
|
|
@@ -472,7 +500,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
472
500
|
this.mediaInstance.pause();
|
|
473
501
|
this.mediaInstance.currentTime = 0;
|
|
474
502
|
}
|
|
475
|
-
(_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0
|
|
503
|
+
(_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 || _this$stopInterval.call(this);
|
|
476
504
|
this.stopInterval = undefined;
|
|
477
505
|
}
|
|
478
506
|
|
|
@@ -484,10 +512,13 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
|
|
|
484
512
|
}, {
|
|
485
513
|
key: "dispose",
|
|
486
514
|
value: function dispose() {
|
|
515
|
+
this.disposers.splice(0).forEach(function (dispose) {
|
|
516
|
+
return dispose();
|
|
517
|
+
});
|
|
518
|
+
this.audioFocus.dispose();
|
|
487
519
|
this.clear();
|
|
488
520
|
}
|
|
489
521
|
}]);
|
|
490
|
-
return Controller;
|
|
491
522
|
}(Subscribe);
|
|
492
523
|
var ControllerContext = /*#__PURE__*/React.createContext(null);
|
|
493
524
|
export { ControllerContext };
|
|
@@ -4,7 +4,30 @@ import { createRoot } from 'react-dom/client';
|
|
|
4
4
|
import { Raycaster, Vector3 } from 'three';
|
|
5
5
|
import { tweenProgress } from "../../../shared-utils/animationFrame/BetterTween.js";
|
|
6
6
|
import { CSS3DRenderPlugin } from "../../../fivePlugins/CSS3DRenderPlugin/index.js";
|
|
7
|
-
import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js";
|
|
7
|
+
import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js"; // __debug__
|
|
8
|
+
// const mockData: SpatialScenePanelData = {
|
|
9
|
+
// customType: 'SpatialScenePanel',
|
|
10
|
+
// "stateList": [
|
|
11
|
+
// {
|
|
12
|
+
// "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___fc42f951076607a22fd5c54f005ba553.png",
|
|
13
|
+
// "text": "窗帘关闭"
|
|
14
|
+
// },
|
|
15
|
+
// {
|
|
16
|
+
// "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___b331e7ad732debc07250a169a3393b13.png",
|
|
17
|
+
// "text": "摄像头休眠"
|
|
18
|
+
// },
|
|
19
|
+
// {
|
|
20
|
+
// "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___2e425a81ac0ad88232d50d4e52a9abfa.png",
|
|
21
|
+
// "text": "氛围音乐"
|
|
22
|
+
// },
|
|
23
|
+
// {
|
|
24
|
+
// "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___bff48bb81cde37aa6a319d6f5d56e3a4.png",
|
|
25
|
+
// "text": "空调打开"
|
|
26
|
+
// }
|
|
27
|
+
// ],
|
|
28
|
+
// "temperature": "27",
|
|
29
|
+
// "title": "沉浸式回家"
|
|
30
|
+
// }
|
|
8
31
|
// const getSphere = (position: Vector3, color = 0xffff00) => {
|
|
9
32
|
// const geometry = new SphereGeometry(0.05, 32, 16)
|
|
10
33
|
// const material = new MeshBasicMaterial({ color })
|
|
@@ -95,7 +118,7 @@ export function SpatialScenePanel(props) {
|
|
|
95
118
|
});
|
|
96
119
|
if (!container) return;
|
|
97
120
|
var root = createRoot(container);
|
|
98
|
-
root.render(
|
|
121
|
+
root.render(/*#__PURE__*/React.createElement(Panel, {
|
|
99
122
|
ref: function ref(_ref3) {
|
|
100
123
|
return panelRef.current = _ref3;
|
|
101
124
|
},
|
|
@@ -107,15 +130,15 @@ export function SpatialScenePanel(props) {
|
|
|
107
130
|
var progress = _ref4.progress;
|
|
108
131
|
var needRotateY = Math.PI / 90 * 11 * progress;
|
|
109
132
|
var rotateY = needRotateY - lastRotateY;
|
|
110
|
-
css3DObject === null || css3DObject === void 0
|
|
133
|
+
css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(rotateY);
|
|
111
134
|
// css3DObject?.rotateZ
|
|
112
135
|
lastRotateY = needRotateY;
|
|
113
136
|
}).onStart(function () {
|
|
114
|
-
css3DObject === null || css3DObject === void 0
|
|
137
|
+
css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(startRotateY);
|
|
115
138
|
render();
|
|
116
139
|
}).onDispose(function () {
|
|
117
140
|
var _panelRef$current;
|
|
118
|
-
(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0
|
|
141
|
+
(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.classList.add('show');
|
|
119
142
|
}).play();
|
|
120
143
|
|
|
121
144
|
// Object.assign(window, { $dispose: () => {
|
|
@@ -127,9 +150,9 @@ export function SpatialScenePanel(props) {
|
|
|
127
150
|
end = keyframe.end;
|
|
128
151
|
timeoutRef.current = setTimeout(function () {
|
|
129
152
|
var _panelRef$current2;
|
|
130
|
-
(_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0
|
|
153
|
+
(_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 || _panelRef$current2.classList.add('hide');
|
|
131
154
|
timeoutRef.current = setTimeout(function () {
|
|
132
|
-
dispose === null || dispose === void 0
|
|
155
|
+
dispose === null || dispose === void 0 || dispose();
|
|
133
156
|
timeoutRef.current = null;
|
|
134
157
|
}, 1500);
|
|
135
158
|
}, end - start);
|
|
@@ -161,10 +184,10 @@ function SpatialScenePanelBg() {
|
|
|
161
184
|
if (!ref.current) return;
|
|
162
185
|
var listener = function listener() {
|
|
163
186
|
var _ref$current;
|
|
164
|
-
(_ref$current = ref.current) === null || _ref$current === void 0
|
|
187
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
|
|
165
188
|
timeoutRef.current = setTimeout(function () {
|
|
166
189
|
var _ref$current2;
|
|
167
|
-
(_ref$current2 = ref.current) === null || _ref$current2 === void 0
|
|
190
|
+
(_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
|
|
168
191
|
timeoutRef.current = null;
|
|
169
192
|
}, 3000);
|
|
170
193
|
};
|
|
@@ -180,7 +203,7 @@ function SpatialScenePanelBg() {
|
|
|
180
203
|
});
|
|
181
204
|
}
|
|
182
205
|
var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
|
|
183
|
-
var _props$data, _props$data2, _props$data3
|
|
206
|
+
var _props$data, _props$data2, _props$data3;
|
|
184
207
|
return /*#__PURE__*/React.createElement("div", {
|
|
185
208
|
className: "SpatialScenePanel",
|
|
186
209
|
ref: myRef
|
|
@@ -194,7 +217,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
|
|
|
194
217
|
className: "SpatialScenePanel-temperature"
|
|
195
218
|
}, (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.temperature, "\u2103")), /*#__PURE__*/React.createElement("div", {
|
|
196
219
|
className: "SpatialScenePanel-body"
|
|
197
|
-
}, (_props$data3 = props.data) === null || _props$data3 === void 0
|
|
220
|
+
}, (_props$data3 = props.data) === null || _props$data3 === void 0 || (_props$data3 = _props$data3.stateList) === null || _props$data3 === void 0 ? void 0 : _props$data3.map(function (state, index) {
|
|
198
221
|
return /*#__PURE__*/React.createElement("div", {
|
|
199
222
|
key: "scene-".concat(state.text),
|
|
200
223
|
className: "SpatialScenePanel-item index_".concat(index)
|
package/lib/Player/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { AudioIntent } from './AudioFocus';
|
|
1
2
|
import { Five, Subscribe } from '@realsee/five';
|
|
2
3
|
import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
|
|
3
4
|
import { Appearance, PlayerConfigs } from './typings';
|
|
@@ -29,6 +30,11 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
|
|
|
29
30
|
$five: Five;
|
|
30
31
|
/** 内部控制器 */
|
|
31
32
|
private controller;
|
|
33
|
+
private root;
|
|
34
|
+
private disposers;
|
|
35
|
+
private loadGeneration;
|
|
36
|
+
private disposed;
|
|
37
|
+
get audioFocus(): import("./AudioFocus").AudioFocusHost;
|
|
32
38
|
/** 播放器配置(只读) */
|
|
33
39
|
configs: Readonly<PlayerConfigs>;
|
|
34
40
|
/**
|
|
@@ -61,7 +67,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
|
|
|
61
67
|
* await player.load(vreoUnit, 0, false, true)
|
|
62
68
|
* ```
|
|
63
69
|
*/
|
|
64
|
-
load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean): Promise<boolean>;
|
|
70
|
+
load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean, intent?: AudioIntent): Promise<boolean>;
|
|
65
71
|
/**
|
|
66
72
|
* 获取播放器是否处于暂停状态
|
|
67
73
|
* @returns 是否暂停中
|
|
@@ -82,7 +88,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
|
|
|
82
88
|
* player.play(10000) // 从10秒处开始
|
|
83
89
|
* ```
|
|
84
90
|
*/
|
|
85
|
-
play(currentTime?: number): boolean;
|
|
91
|
+
play(currentTime?: number, intent?: AudioIntent): boolean;
|
|
86
92
|
/**
|
|
87
93
|
* 设置播放器外观
|
|
88
94
|
* @param appearance - 外观配置对象
|