@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.md +16 -5
  3. package/docs/assets/highlight.css +1 -1
  4. package/docs/assets/main.js +2 -2
  5. package/docs/assets/search.js +1 -1
  6. package/docs/assets/style.css +28 -2
  7. package/docs/classes/Player.AudioLike.html +52 -0
  8. package/docs/classes/Player.Controller.html +13 -13
  9. package/docs/classes/Player.Player-1.html +11 -11
  10. package/docs/classes/Player.VideoAgentMesh.html +53 -53
  11. package/docs/classes/Player.VideoAgentScene.html +1 -1
  12. package/docs/demo/assets/AppReact.d0ee843a.js +1 -0
  13. package/docs/demo/assets/default.63925584.js +3984 -0
  14. package/docs/demo/assets/default.f3f3ca8c.css +1 -0
  15. package/docs/demo/assets/dynamic.76506c2c.js +1 -0
  16. package/docs/demo/assets/examples.3d8323db.js +25 -0
  17. package/docs/demo/assets/examples.dac4a6fe.css +1 -0
  18. package/docs/demo/assets/index.7e31122c.js +1 -0
  19. package/docs/demo/assets/index.9331038f.css +1 -0
  20. package/docs/demo/assets/main.79b11b9d.js +1 -0
  21. package/docs/demo/assets/react.2ee8565f.css +1 -0
  22. package/docs/demo/assets/react.c1c07c14.js +25 -0
  23. package/docs/demo/assets/znRoyv06SZQeqA7m.0057e8ae.js +1 -0
  24. package/docs/demo/examples.html +17 -0
  25. package/docs/demo/index-react-dynamic.html +20 -0
  26. package/docs/demo/index-react.html +20 -0
  27. package/docs/demo/index.html +19 -0
  28. package/docs/enums/Player.InfoPanelStyleEnum.html +1 -1
  29. package/docs/enums/Player.InfoPanelTypeEnum.html +2 -2
  30. package/docs/enums/Player.PanoEffectEnum.html +2 -2
  31. package/docs/enums/Player.PanoTagEnum.html +2 -2
  32. package/docs/enums/Player.PanoTagStyleEnum.html +7 -0
  33. package/docs/enums/Player.VreoKeyframeEnum.html +12 -12
  34. package/docs/enums/fivePlugins.CameraMovementEffect.html +1 -1
  35. package/docs/enums/fivePlugins.Rotation.html +1 -1
  36. package/docs/index.html +13 -6
  37. package/docs/interfaces/Player.CustomVreoKeyframeProps.html +1 -1
  38. package/docs/interfaces/Player.PlayerConfigs.html +3 -3
  39. package/docs/interfaces/Player.Vertex.html +2 -2
  40. package/docs/interfaces/Player.VideoAgentMeshOptions.html +8 -1
  41. package/docs/interfaces/Player.VreoKeyframe.html +2 -2
  42. package/docs/interfaces/Player.VreoUnit.html +2 -2
  43. package/docs/interfaces/Player.VreoVideo.html +2 -2
  44. package/docs/interfaces/fivePlugins.CSS3DRenderPluginExportType.html +4 -0
  45. package/docs/interfaces/fivePlugins.CameraMovementOptsCallback.html +1 -1
  46. package/docs/interfaces/fivePlugins.CameraMovementPluginExportType.html +2 -2
  47. package/docs/interfaces/fivePlugins.CameraMovementPluginParameterType.html +1 -1
  48. package/docs/interfaces/fivePlugins.ModelTVVideoPluginData.html +1 -1
  49. package/docs/interfaces/fivePlugins.ModelTVVideoPluginExportType.html +1 -1
  50. package/docs/interfaces/fivePlugins.ModelTVVideoPluginParameterType.html +1 -1
  51. package/docs/interfaces/fivePlugins.Vector3Position.html +3 -0
  52. package/docs/interfaces/react.VreoActionCallbacks.html +15 -7
  53. package/docs/interfaces/react.VreoProviderProps.html +1 -1
  54. package/docs/modules/Player.html +21 -15
  55. package/docs/modules/custom.html +1 -1
  56. package/docs/modules/fivePlugins.html +5 -2
  57. package/docs/modules/react.html +1 -1
  58. package/docs/modules.html +1 -1
  59. package/lib/PlayController/index.js +3 -3
  60. package/lib/Player/App.js +1 -1
  61. package/lib/Player/Controller.d.ts +3 -1
  62. package/lib/Player/Controller.js +24 -5
  63. package/lib/Player/custom/SpatialScenePanel/index.js +3 -3
  64. package/lib/Player/index.d.ts +3 -2
  65. package/lib/Player/index.js +73 -42
  66. package/lib/Player/modules/Drawer/index.js +1 -1
  67. package/lib/Player/modules/PopUp/index.js +1 -1
  68. package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts +16 -2
  69. package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +108 -36
  70. package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts +1 -0
  71. package/lib/Player/modules/VideoAgent/VideoAgentScene.js +7 -3
  72. package/lib/Player/modules/VideoAgent/index.js +1 -1
  73. package/lib/Player/modules/keyframes/BgMusic/index.js +1 -1
  74. package/lib/Player/modules/keyframes/CameraMovement/index.js +1 -1
  75. package/lib/Player/modules/keyframes/InfoPanel/index.js +2 -2
  76. package/lib/Player/modules/keyframes/ModelVideo/index.js +46 -9
  77. package/lib/Player/modules/keyframes/PanoEffect/index.js +1 -1
  78. package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +1 -1
  79. package/lib/Player/modules/keyframes/PanoTag/index.js +20 -7
  80. package/lib/Player/modules/keyframes/PanoTextLabel/index.d.ts +3 -0
  81. package/lib/Player/modules/keyframes/PanoTextLabel/index.js +97 -44
  82. package/lib/Player/modules/keyframes/Prompter/index.js +5 -19
  83. package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +10 -6
  84. package/lib/Player/modules/keyframes/VideoEffect/index.js +1 -1
  85. package/lib/Player/typings.d.ts +4 -0
  86. package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.d.ts +2 -0
  87. package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +12 -0
  88. package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.d.ts +7 -0
  89. package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +32 -0
  90. package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.d.ts +3 -0
  91. package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +11 -0
  92. package/lib/fivePlugins/CSS3DRenderPlugin/index.d.ts +56 -0
  93. package/lib/fivePlugins/CSS3DRenderPlugin/index.js +275 -0
  94. package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.d.ts +7 -0
  95. package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +18 -0
  96. package/lib/fivePlugins/CameraMovementPlugin/index.js +18 -14
  97. package/lib/fivePlugins/ModelTVVideoPlugin/index.js +1 -1
  98. package/lib/react/index.d.ts +7 -3
  99. package/lib/react/index.js +3 -3
  100. package/lib/shared-utils/AduioLike.d.ts +37 -0
  101. package/lib/shared-utils/AduioLike.js +165 -0
  102. package/lib/shared-utils/animationFrame/BetterTween.js +7 -3
  103. package/lib/shared-utils/animationFrame/tween.js +1 -1
  104. package/lib/shared-utils/createTransMatrix.d.ts +1 -0
  105. package/lib/shared-utils/createTransMatrix.js +43 -0
  106. package/lib/typings/VreoUnit.d.ts +33 -2
  107. package/lib/typings/VreoUnit.js +13 -1
  108. package/package.json +10 -10
  109. package/resources/PlayController/index.ts +0 -13
  110. package/resources/Player/App.tsx +5 -4
  111. package/resources/Player/Controller.ts +277 -146
  112. package/resources/Player/custom/SpatialScenePanel/index.tsx +5 -5
  113. package/resources/Player/hooks.ts +3 -5
  114. package/resources/Player/index.tsx +189 -141
  115. package/resources/Player/modules/ResizeObserver/index.tsx +23 -0
  116. package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts +87 -31
  117. package/resources/Player/modules/VideoAgent/VideoAgentScene.ts +27 -24
  118. package/resources/Player/modules/VideoAgent/index.tsx +28 -12
  119. package/resources/Player/modules/Wave/index.tsx +18 -0
  120. package/resources/Player/modules/keyframes/InfoPanel/index.tsx +26 -11
  121. package/resources/Player/modules/keyframes/ModelVideo/index.tsx +36 -3
  122. package/resources/Player/modules/keyframes/PanoTag/index.tsx +53 -97
  123. package/resources/Player/modules/keyframes/PanoTextLabel/index.tsx +86 -34
  124. package/resources/Player/modules/keyframes/Prompter/index.tsx +6 -16
  125. package/resources/Player/modules/keyframes/UpdateVRPanorama/index.tsx +6 -2
  126. package/resources/Player/typings.ts +15 -1
  127. package/resources/fivePlugins/CSS3DRenderPlugin/centerPoint.ts +5 -0
  128. package/resources/fivePlugins/CSS3DRenderPlugin/createResizeObserver.ts +17 -0
  129. package/resources/fivePlugins/CSS3DRenderPlugin/evenNumber.ts +4 -0
  130. package/resources/fivePlugins/CSS3DRenderPlugin/index.ts +254 -0
  131. package/resources/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.ts +5 -0
  132. package/resources/fivePlugins/CameraMovementPlugin/index.ts +19 -12
  133. package/resources/react/index.tsx +7 -3
  134. package/resources/shared-utils/AduioLike.ts +109 -0
  135. package/resources/shared-utils/addResizeListener.ts +46 -0
  136. package/resources/shared-utils/createTransMatrix.ts +12 -0
  137. package/resources/shared-utils/getFileExpandedName.ts +6 -0
  138. package/resources/shared-utils/getMediaInfo.ts +52 -0
  139. package/resources/shared-utils/setElementDataset.ts +18 -0
  140. package/resources/typings/VreoUnit.ts +41 -3
  141. package/stylesheets/custom/SpatialScenePanel.css +2 -1
  142. package/stylesheets/default.css +348 -84
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -37,9 +37,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
37
37
 
38
38
  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); } }
39
39
 
40
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
40
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
41
41
 
42
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
42
+ 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); }
43
43
 
44
44
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
45
45
 
@@ -69,12 +69,21 @@ var Player = /*#__PURE__*/function (_Subscribe) {
69
69
  _this.controller = new _Controller.Controller();
70
70
  _this.$five = _this.controller.$five = five;
71
71
 
72
- if (!configs.containter) {
73
- var containter = document.querySelector('#vreo-app') || document.createElement('div');
74
- ReactDOM.unmountComponentAtNode(containter);
75
- containter.setAttribute('id', 'vreo-app');
76
- configs.containter = containter;
77
- document.body.append(containter);
72
+ if (!configs.container) {
73
+ var _five$getElement;
74
+
75
+ var container = document.getElementById('vreo-app') || document.createElement('div');
76
+ ReactDOM.unmountComponentAtNode(container);
77
+ container.setAttribute('id', 'vreo-app');
78
+ configs.container = container;
79
+ var fiveCanvasDomParent = (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : _five$getElement.parentNode;
80
+
81
+ if (fiveCanvasDomParent) {
82
+ fiveCanvasDomParent.append(container);
83
+ } else {
84
+ document.body.append(container);
85
+ } // document.body.append(container)
86
+
78
87
  }
79
88
 
80
89
  _this.configs = Object.freeze(Object.assign({
@@ -99,12 +108,21 @@ var Player = /*#__PURE__*/function (_Subscribe) {
99
108
  },
100
109
  five: five
101
110
  });
102
- })), configs.containter); // 监听播放情况:抛出触发时机
111
+ })), configs.container); // 监听播放情况:抛出触发时机
103
112
 
113
+ (0, _mobx.reaction)(function () {
114
+ return _this.controller.ended;
115
+ }, function (ended) {
116
+ if (ended) {
117
+ _this.emit('paused', true);
118
+ }
119
+ });
104
120
  (0, _mobx.reaction)(function () {
105
121
  return _this.controller.playing;
106
122
  }, function (playing) {
107
- _this.emit(playing ? 'playing' : 'paused');
123
+ if (!_this.controller.ended) {
124
+ _this.emit(playing ? 'playing' : 'paused');
125
+ }
108
126
  });
109
127
  return _this;
110
128
  }
@@ -115,39 +133,44 @@ var Player = /*#__PURE__*/function (_Subscribe) {
115
133
  var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
116
134
  var _this$controller$vide,
117
135
  _this$configs$imageOp,
136
+ _this$controller$vide2,
137
+ _this$controller$vide3,
118
138
  _this2 = this;
119
139
 
120
140
  var currentTime,
121
141
  preload,
142
+ force,
122
143
  panoIndexMap,
123
- panoIndexs,
144
+ panoIndexes,
124
145
  i,
125
- _this$controller$vide2,
126
- _this$controller$vide3,
127
146
  _args = arguments;
128
-
129
147
  return regeneratorRuntime.wrap(function _callee$(_context) {
130
148
  while (1) {
131
149
  switch (_context.prev = _context.next) {
132
150
  case 0:
133
151
  currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
134
152
  preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
153
+ force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
154
+
155
+ if (force) {
156
+ vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
157
+ }
135
158
 
136
159
  if (this.controller.visible) {
137
- _context.next = 6;
160
+ _context.next = 8;
138
161
  break;
139
162
  }
140
163
 
141
164
  this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
142
165
 
143
- _context.next = 6;
166
+ _context.next = 8;
144
167
  return new Promise(function (resolve) {
145
168
  setTimeout(function () {
146
169
  return resolve(true);
147
170
  }, 500);
148
171
  });
149
172
 
150
- case 6:
173
+ case 8:
151
174
  if (this.controller.stopInterval) {
152
175
  this.controller.stopInterval();
153
176
  this.controller.stopInterval = undefined;
@@ -163,7 +186,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
163
186
 
164
187
 
165
188
  if (!(preload || preload === undefined && this.configs.autoPreload)) {
166
- _context.next = 20;
189
+ _context.next = 22;
167
190
  break;
168
191
  }
169
192
 
@@ -188,49 +211,44 @@ var Player = /*#__PURE__*/function (_Subscribe) {
188
211
 
189
212
  return accu;
190
213
  }, {});
191
- panoIndexs = Object.keys(panoIndexMap);
214
+ panoIndexes = Object.keys(panoIndexMap);
192
215
  i = 0;
193
216
 
194
- case 14:
195
- if (!(i < panoIndexs.length)) {
196
- _context.next = 20;
217
+ case 16:
218
+ if (!(i < panoIndexes.length)) {
219
+ _context.next = 22;
197
220
  break;
198
221
  }
199
222
 
200
- _context.next = 17;
201
- return this.$five.preloadPano(Number(panoIndexs[i]));
223
+ _context.next = 19;
224
+ return this.$five.preloadPano(Number(panoIndexes[i]));
202
225
 
203
- case 17:
226
+ case 19:
204
227
  i++;
205
- _context.next = 14;
228
+ _context.next = 16;
206
229
  break;
207
230
 
208
- case 20:
231
+ case 22:
209
232
  // 新数据载入就绪
210
233
  this.emit('loaded', vreoUnit);
211
-
212
- if (!vreoUnit.video.url) {
213
- _context.next = 26;
214
- break;
215
- }
234
+ this.controller.emit('loaded', vreoUnit);
216
235
 
217
236
  if ((_this$controller$vide2 = this.controller.videoAgentScene) !== null && _this$controller$vide2 !== void 0 && _this$controller$vide2.videoAgentMesh.videoInstance) {
218
237
  this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
219
238
  }
220
239
 
221
- _context.next = 25;
222
- return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
240
+ _context.next = 27;
241
+ return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
223
242
 
224
- case 25:
243
+ case 27:
244
+ this.controller.setEnded(false);
225
245
  this.play();
226
-
227
- case 26:
228
246
  this.controller.run(function (type, keyframe) {
229
247
  return _this2.emit(type, keyframe);
230
248
  });
231
249
  return _context.abrupt("return", true);
232
250
 
233
- case 28:
251
+ case 31:
234
252
  case "end":
235
253
  return _context.stop();
236
254
  }
@@ -251,8 +269,16 @@ var Player = /*#__PURE__*/function (_Subscribe) {
251
269
  }
252
270
  }, {
253
271
  key: "play",
254
- value: function play() {
272
+ value: function play(currentTime) {
255
273
  if (this.controller.playing) return true;
274
+
275
+ if (currentTime && this.controller.videoInstance) {
276
+ this.controller.videoInstance.currentTime = currentTime / 1000;
277
+ }
278
+
279
+ Object.assign(window, {
280
+ $vreoController: this.controller
281
+ });
256
282
  this.controller.setPlaying(true);
257
283
  return true;
258
284
  }
@@ -271,14 +297,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
271
297
  value: function hide() {
272
298
  this.controller.setVisible(false);
273
299
  }
300
+ }, {
301
+ key: "getCurrentTime",
302
+ value: function getCurrentTime() {
303
+ return this.controller.currentTime;
304
+ }
274
305
  }, {
275
306
  key: "dispose",
276
307
  value: function dispose() {
277
308
  this.pause();
278
309
  this.controller.dispose();
279
310
 
280
- if (this.configs.containter) {
281
- ReactDOM.unmountComponentAtNode(this.configs.containter);
311
+ if (this.configs.container) {
312
+ ReactDOM.unmountComponentAtNode(this.configs.container);
282
313
  }
283
314
  }
284
315
  }]);
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -1,7 +1,20 @@
1
1
  import * as THREE from 'three';
2
+ import AudioLike from '../../../shared-utils/AduioLike';
2
3
  export interface VideoAgentMeshOptions {
4
+ /**
5
+ * 自定义视频实例。
6
+ */
3
7
  videoInstance?: HTMLVideoElement;
8
+ /**
9
+ * 自定义音频实例。
10
+ */
4
11
  audioInstance?: HTMLAudioElement;
12
+ /**
13
+ * 是否开启音频预载能力。**仅对`.mp3`有效**。
14
+ *
15
+ * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音频文件下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音(`muted` 为 `false`,但是没有声音)。
16
+ */
17
+ preload?: boolean;
5
18
  }
6
19
  /**
7
20
  * 视频经纪人MESH
@@ -12,8 +25,9 @@ export declare class VideoAgentMesh extends THREE.Mesh {
12
25
  freeze: boolean;
13
26
  paused: boolean;
14
27
  audioInstance: HTMLAudioElement;
28
+ audioLikeInstance: AudioLike;
15
29
  $removeEventListener: () => void;
16
- get videoInstance(): HTMLAudioElement;
30
+ get videoInstance(): HTMLAudioElement | AudioLike;
17
31
  /**
18
32
  *
19
33
  * @param width
@@ -24,7 +38,7 @@ export declare class VideoAgentMesh extends THREE.Mesh {
24
38
  */
25
39
  constructor(width: number, height: number, widthSegments: number, heightSegments: number, options?: VideoAgentMeshOptions);
26
40
  private update;
27
- play(videoUrl?: string): Promise<unknown>;
41
+ play(videoUrl?: string, currentTime?: number, duration?: number): Promise<unknown>;
28
42
  /**
29
43
  * 转成毫秒,保障精准度
30
44
  */
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -13,6 +13,10 @@ var _Preloader = require("../../../shared-utils/Preloader");
13
13
 
14
14
  var _mobx = require("mobx");
15
15
 
16
+ var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
+
16
20
  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); }
17
21
 
18
22
  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; }
@@ -25,9 +29,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
25
29
 
26
30
  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); } }
27
31
 
28
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
32
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
29
33
 
30
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
34
+ 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); }
31
35
 
32
36
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
33
37
 
@@ -66,9 +70,13 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
66
70
  * @param options
67
71
  */
68
72
  function VideoAgentMesh(width, height, widthSegments, heightSegments) {
73
+ var _this$options$videoIn, _this$options$videoIn2, _this$options$videoIn3;
74
+
69
75
  var _this;
70
76
 
71
- var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
77
+ var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
78
+ preload: true
79
+ };
72
80
 
73
81
  _classCallCheck(this, VideoAgentMesh);
74
82
 
@@ -127,6 +135,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
127
135
  _this.audioInstance = options.audioInstance;
128
136
  }
129
137
 
138
+ _this.audioLikeInstance = new _AduioLike["default"]();
130
139
  (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
131
140
  paused: _mobx.observable
132
141
  });
@@ -145,14 +154,38 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
145
154
  return updatePaused(false);
146
155
  };
147
156
 
148
- _this.videoInstance.addEventListener('pause', onPause);
157
+ var onEnded = function onEnded() {
158
+ console.log('vreo: video 播放结束');
159
+ };
160
+
161
+ _this.audioInstance.addEventListener('pause', onPause);
162
+
163
+ _this.audioInstance.addEventListener('play', onPlay);
149
164
 
150
- _this.videoInstance.addEventListener('play', onPlay);
165
+ (_this$options$videoIn = _this.options.videoInstance) === null || _this$options$videoIn === void 0 ? void 0 : _this$options$videoIn.addEventListener('pause', onPause);
166
+ (_this$options$videoIn2 = _this.options.videoInstance) === null || _this$options$videoIn2 === void 0 ? void 0 : _this$options$videoIn2.addEventListener('play', onPlay);
167
+
168
+ _this.audioLikeInstance.addEventListener('pause', onPause);
169
+
170
+ _this.audioLikeInstance.addEventListener('play', onPlay);
171
+
172
+ (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.addEventListener('ended', onEnded);
151
173
 
152
174
  _this.$removeEventListener = function () {
153
- _this.videoInstance.removeEventListener('pause', onPause);
175
+ var _this$options$videoIn4, _this$options$videoIn5, _this$options$videoIn6;
176
+
177
+ _this.audioInstance.removeEventListener('pause', onPause);
178
+
179
+ _this.audioInstance.removeEventListener('play', onPlay);
180
+
181
+ (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('pause', onPause);
182
+ (_this$options$videoIn5 = _this.options.videoInstance) === null || _this$options$videoIn5 === void 0 ? void 0 : _this$options$videoIn5.removeEventListener('play', onPlay);
154
183
 
155
- _this.videoInstance.removeEventListener('play', onPlay);
184
+ _this.audioLikeInstance.removeEventListener('pause', onPause);
185
+
186
+ _this.audioLikeInstance.removeEventListener('play', onPlay);
187
+
188
+ (_this$options$videoIn6 = _this.options.videoInstance) === null || _this$options$videoIn6 === void 0 ? void 0 : _this$options$videoIn6.removeEventListener('ended', onEnded);
156
189
  };
157
190
 
158
191
  return _this;
@@ -163,6 +196,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
163
196
  get: function get() {
164
197
  var _this$videoUrl;
165
198
 
199
+ if (!this.videoUrl) {
200
+ return this.audioLikeInstance;
201
+ }
202
+
166
203
  if ((_this$videoUrl = this.videoUrl) !== null && _this$videoUrl !== void 0 && _this$videoUrl.endsWith('mp3')) {
167
204
  return this.audioInstance;
168
205
  }
@@ -198,17 +235,31 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
198
235
  case 6:
199
236
  uniforms = this.material.uniforms;
200
237
  this.videoInstance.muted = true;
201
- _context.t0 = URL;
202
- _context.next = 11;
238
+
239
+ if (!(this.options.preload || this.options.preload === undefined || this.videoUrl.endsWith('.mp4'))) {
240
+ _context.next = 18;
241
+ break;
242
+ }
243
+
244
+ _context.t1 = URL;
245
+ _context.next = 12;
203
246
  return _Preloader.Preloader.blob(this.videoUrl);
204
247
 
205
- case 11:
206
- _context.t1 = _context.sent;
207
- _context.next = 14;
208
- return _context.t0.createObjectURL.call(_context.t0, _context.t1);
248
+ case 12:
249
+ _context.t2 = _context.sent;
250
+ _context.next = 15;
251
+ return _context.t1.createObjectURL.call(_context.t1, _context.t2);
209
252
 
210
- case 14:
211
- this.videoInstance.src = _context.sent;
253
+ case 15:
254
+ _context.t0 = _context.sent;
255
+ _context.next = 19;
256
+ break;
257
+
258
+ case 18:
259
+ _context.t0 = this.videoUrl;
260
+
261
+ case 19:
262
+ this.videoInstance.src = _context.t0;
212
263
  this.videoInstance.setAttribute('data-src', this.videoUrl);
213
264
 
214
265
  onStart = function onStart() {
@@ -224,7 +275,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
224
275
 
225
276
  this.videoInstance.addEventListener('timeupdate', onStart, false);
226
277
 
227
- case 18:
278
+ case 23:
228
279
  case "end":
229
280
  return _context.stop();
230
281
  }
@@ -245,64 +296,85 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
245
296
  var _this3 = this;
246
297
 
247
298
  var videoUrl,
299
+ currentTime,
300
+ duration,
248
301
  _args3 = arguments;
249
302
  return regeneratorRuntime.wrap(function _callee3$(_context3) {
250
303
  while (1) {
251
304
  switch (_context3.prev = _context3.next) {
252
305
  case 0:
253
306
  videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
307
+ currentTime = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 0;
308
+ duration = _args3.length > 2 ? _args3[2] : undefined;
254
309
  videoUrl = videoUrl || '';
255
310
 
256
- if (videoUrl) {
311
+ if (!(duration && !videoUrl)) {
257
312
  _context3.next = 10;
258
313
  break;
259
314
  }
260
315
 
316
+ if (this.currentTime) {
317
+ this.videoInstance.currentTime = currentTime;
318
+ }
319
+
320
+ this.videoInstance.duration = duration;
321
+ this.videoUrl = '';
322
+ this.videoInstance.play();
323
+ return _context3.abrupt("return", true);
324
+
325
+ case 10:
326
+ if (videoUrl) {
327
+ _context3.next = 18;
328
+ break;
329
+ }
330
+
261
331
  if (!this.videoUrl) {
262
- _context3.next = 8;
332
+ _context3.next = 16;
263
333
  break;
264
334
  }
265
335
 
266
- _context3.next = 6;
336
+ _context3.next = 14;
267
337
  return this.videoInstance.play();
268
338
 
269
- case 6:
270
- _context3.next = 9;
339
+ case 14:
340
+ _context3.next = 17;
271
341
  break;
272
342
 
273
- case 8:
343
+ case 16:
274
344
  console.warn('警告:视频资源未初始化。');
275
345
 
276
- case 9:
346
+ case 17:
277
347
  return _context3.abrupt("return", true);
278
348
 
279
- case 10:
349
+ case 18:
350
+ console.log('play', videoUrl, this.videoUrl);
351
+
280
352
  if (!(videoUrl === this.videoUrl)) {
281
- _context3.next = 15;
353
+ _context3.next = 24;
282
354
  break;
283
355
  }
284
356
 
285
- this.videoInstance.currentTime = 0;
286
- _context3.next = 14;
357
+ this.videoInstance.currentTime = currentTime;
358
+ _context3.next = 23;
287
359
  return this.videoInstance.play();
288
360
 
289
- case 14:
361
+ case 23:
290
362
  return _context3.abrupt("return", true);
291
363
 
292
- case 15:
293
- _context3.next = 17;
364
+ case 24:
365
+ _context3.next = 26;
294
366
  return this.update(videoUrl);
295
367
 
296
- case 17:
368
+ case 26:
297
369
  this.videoInstance.pause();
298
- _context3.next = 20;
370
+ _context3.next = 29;
299
371
  return new Promise(function (resolve) {
300
372
  return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
301
373
  return regeneratorRuntime.wrap(function _callee2$(_context2) {
302
374
  while (1) {
303
375
  switch (_context2.prev = _context2.next) {
304
376
  case 0:
305
- _this3.videoInstance.currentTime = 0;
377
+ _this3.videoInstance.currentTime = currentTime;
306
378
  _context2.next = 3;
307
379
  return _this3.videoInstance.play();
308
380
 
@@ -318,10 +390,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
318
390
  })), 20);
319
391
  });
320
392
 
321
- case 20:
393
+ case 29:
322
394
  return _context3.abrupt("return", _context3.sent);
323
395
 
324
- case 21:
396
+ case 30:
325
397
  case "end":
326
398
  return _context3.stop();
327
399
  }
@@ -9,6 +9,7 @@ export declare class VideoAgentScene {
9
9
  constructor(container: HTMLElement, needRender?: boolean, options?: {
10
10
  videoInstance?: HTMLVideoElement;
11
11
  audioInstance?: HTMLAudioElement;
12
+ preload?: boolean;
12
13
  });
13
14
  run: () => void;
14
15
  dispose: () => void;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -15,11 +15,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
15
15
 
16
16
  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; }
17
17
 
18
+ 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); } }
19
+
20
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
21
+
18
22
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
19
23
 
20
24
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
25
 
22
- var VideoAgentScene = function VideoAgentScene(container) {
26
+ var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container) {
23
27
  var _this = this;
24
28
 
25
29
  var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -82,6 +86,6 @@ var VideoAgentScene = function VideoAgentScene(container) {
82
86
  this.scene.add(this.videoAgentMesh);
83
87
  this.run();
84
88
  }
85
- };
89
+ });
86
90
 
87
91
  exports.VideoAgentScene = VideoAgentScene;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true