@realsee/vreo 2.5.0 → 2.6.1-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 (52) hide show
  1. package/lib/PlayController/createHTMLAudioElement.js +5 -12
  2. package/lib/PlayController/index.js +31 -41
  3. package/lib/Player/App.js +25 -34
  4. package/lib/Player/Controller.js +68 -76
  5. package/lib/Player/custom/SpatialScenePanel/index.js +20 -54
  6. package/lib/Player/hooks.js +6 -15
  7. package/lib/Player/index.d.ts +1 -0
  8. package/lib/Player/index.js +41 -47
  9. package/lib/Player/modules/Drawer/index.js +10 -18
  10. package/lib/Player/modules/PopUp/index.js +8 -17
  11. package/lib/Player/modules/ResizeObserver/index.js +10 -17
  12. package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +36 -46
  13. package/lib/Player/modules/VideoAgent/VideoAgentScene.js +16 -25
  14. package/lib/Player/modules/VideoAgent/index.js +8 -17
  15. package/lib/Player/modules/Wave/index.js +24 -33
  16. package/lib/Player/modules/keyframes/BgMusic/index.js +13 -22
  17. package/lib/Player/modules/keyframes/CameraMovement/index.js +17 -26
  18. package/lib/Player/modules/keyframes/InfoPanel/index.js +15 -23
  19. package/lib/Player/modules/keyframes/ModelVideo/index.js +17 -26
  20. package/lib/Player/modules/keyframes/PanoEffect/index.js +21 -30
  21. package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +6 -14
  22. package/lib/Player/modules/keyframes/PanoTag/index.js +10 -18
  23. package/lib/Player/modules/keyframes/PanoTextLabel/index.js +19 -28
  24. package/lib/Player/modules/keyframes/Prompter/index.js +13 -22
  25. package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +16 -24
  26. package/lib/Player/modules/keyframes/VideoEffect/index.js +17 -27
  27. package/lib/Player/typings.js +1 -5
  28. package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +3 -9
  29. package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +1 -7
  30. package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +1 -7
  31. package/lib/fivePlugins/CSS3DRenderPlugin/index.js +27 -37
  32. package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +3 -9
  33. package/lib/fivePlugins/CameraMovementPlugin/index.js +16 -23
  34. package/lib/fivePlugins/CameraMovementPlugin/typings.js +6 -10
  35. package/lib/fivePlugins/ModelTVVideoPlugin/index.js +9 -18
  36. package/lib/index.js +1 -12
  37. package/lib/react/index.js +12 -24
  38. package/lib/shared-utils/Audio.js +28 -38
  39. package/lib/shared-utils/AudioLike.js +23 -30
  40. package/lib/shared-utils/Preloader.js +1 -7
  41. package/lib/shared-utils/addResizeListener.js +4 -11
  42. package/lib/shared-utils/animationFrame/BetterTween.js +24 -34
  43. package/lib/shared-utils/animationFrame/index.js +4 -13
  44. package/lib/shared-utils/animationFrame/tween.js +9 -17
  45. package/lib/shared-utils/createTransMatrix.js +5 -14
  46. package/lib/shared-utils/getFileExpandedName.js +1 -7
  47. package/lib/shared-utils/getMediaInfo.js +9 -19
  48. package/lib/shared-utils/setElementDataset.js +1 -7
  49. package/lib/typings/VreoUnit.js +15 -63
  50. package/lib/typings/index.d.ts +1 -0
  51. package/lib/typings/index.js +1 -0
  52. package/package.json +61 -9
@@ -1,29 +1,20 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.useController = useController;
8
- exports.useFiveInstance = useFiveInstance;
9
- exports.useFiveProject2d = useFiveProject2d;
10
- var _react = _interopRequireDefault(require("react"));
11
- var _Controller = require("./Controller");
12
- function useController() {
13
- var controller = _react["default"].useContext(_Controller.ControllerContext);
1
+ import React from 'react';
2
+ import { ControllerContext } from "./Controller.js";
3
+ export function useController() {
4
+ var controller = React.useContext(ControllerContext);
14
5
  if (!controller) {
15
6
  throw new Error('没有找到 "ControllerContext"');
16
7
  }
17
8
  return controller;
18
9
  }
19
- function useFiveInstance() {
10
+ export function useFiveInstance() {
20
11
  var controller = useController();
21
12
  if (!controller.five) {
22
13
  throw new Error('没有找到 "five" 实例');
23
14
  }
24
15
  return controller.five;
25
16
  }
26
- function useFiveProject2d() {
17
+ export function useFiveProject2d() {
27
18
  var five = useFiveInstance();
28
19
  return function (vector) {
29
20
  return five.project2d(vector, false);
@@ -119,3 +119,4 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
119
119
  */
120
120
  dispose(): void;
121
121
  }
122
+ export { SpatialScenePanel } from './custom/SpatialScenePanel';
@@ -1,32 +1,24 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Player = void 0;
9
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
10
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
15
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
16
- var React = _interopRequireWildcard(require("react"));
17
- var ReactDOM = _interopRequireWildcard(require("react-dom"));
18
- var _five = require("@realsee/five");
19
- var _App = require("./App");
20
- var _Controller = require("./Controller");
21
- var _VreoUnit = require("../typings/VreoUnit");
22
- var _mobx = require("mobx");
23
- var _Drawer = require("./modules/Drawer");
24
- var _PopUp = require("./modules/PopUp");
25
- var _Audio = require("../shared-utils/Audio");
26
- var _location$search$matc, _location$search$matc2; // 下面这一行不能删
27
- 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
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
29
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
1
+ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
2
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
4
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
5
+ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
6
+ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
7
+ var _location$search$matc, _location$search$matc2;
8
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
9
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
10
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
11
+ // 下面这一行不能删
12
+ import * as React from 'react';
13
+ import * as ReactDOM from 'react-dom';
14
+ import { Subscribe } from '@realsee/five';
15
+ import { App } from "./App.js";
16
+ import { Controller, ControllerContext } from "./Controller.js";
17
+ import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
18
+ import { reaction } from 'mobx';
19
+ import { Drawer } from "./modules/Drawer/index.js";
20
+ import { PopUp } from "./modules/PopUp/index.js";
21
+ import { generateBlankAudio, waitForBlankAudioGenerated } from "../shared-utils/Audio.js";
30
22
  var DefaultAudioCacheLength = 3;
31
23
  var id = "vreo-app-dhjskadhksahdjskahdjksa";
32
24
  var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 = location.search.match(/audio_cache=(\d+)/)) === null || _location$search$matc2 === void 0 ? void 0 : _location$search$matc2[1]) !== null && _location$search$matc !== void 0 ? _location$search$matc : DefaultAudioCacheLength);
@@ -54,8 +46,8 @@ var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 =
54
46
  * player.play()
55
47
  * ```
56
48
  */
57
- var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
58
- (0, _inherits2["default"])(Player, _Subscribe);
49
+ export var Player = /*#__PURE__*/function (_Subscribe) {
50
+ _inherits(Player, _Subscribe);
59
51
  var _super = _createSuper(Player);
60
52
  /** Five 渲染引擎实例 */
61
53
 
@@ -72,10 +64,10 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
72
64
  function Player(five) {
73
65
  var _this;
74
66
  var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
75
- (0, _classCallCheck2["default"])(this, Player);
67
+ _classCallCheck(this, Player);
76
68
  _this = _super.call(this);
77
69
  _this.$five = five;
78
- (0, _Audio.generateBlankAudio)(audioCacheLength);
70
+ generateBlankAudio(audioCacheLength);
79
71
  if (!configs.container) {
80
72
  configs.container = configs.containter;
81
73
  }
@@ -100,14 +92,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
100
92
  _this.configs = Object.freeze(Object.assign({
101
93
  keyframeMap: {}
102
94
  }, configs));
103
- _this.controller = new _Controller.Controller({
95
+ _this.controller = new Controller({
104
96
  five: five,
105
97
  container: configs.container,
106
98
  configs: _this.configs
107
99
  });
108
- ReactDOM.render(/*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
100
+ ReactDOM.render( /*#__PURE__*/React.createElement(ControllerContext.Provider, {
109
101
  value: _this.controller
110
- }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null), /*#__PURE__*/React.createElement(_PopUp.PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
102
+ }, /*#__PURE__*/React.createElement(App, null), /*#__PURE__*/React.createElement(Drawer, null), /*#__PURE__*/React.createElement(PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
111
103
  return /*#__PURE__*/React.createElement(CustomCmpt, {
112
104
  key: key,
113
105
  subscribe: {
@@ -126,14 +118,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
126
118
  })), configs.container);
127
119
 
128
120
  // 监听播放情况:抛出触发时机
129
- (0, _mobx.reaction)(function () {
121
+ reaction(function () {
130
122
  return _this.controller.ended;
131
123
  }, function (ended) {
132
124
  if (ended) {
133
125
  _this.emit('paused', true);
134
126
  }
135
127
  });
136
- (0, _mobx.reaction)(function () {
128
+ reaction(function () {
137
129
  return _this.controller.playing;
138
130
  }, function (playing) {
139
131
  if (!_this.controller.ended) {
@@ -166,10 +158,10 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
166
158
  * await player.load(vreoUnit, 0, false, true)
167
159
  * ```
168
160
  */
169
- (0, _createClass2["default"])(Player, [{
161
+ _createClass(Player, [{
170
162
  key: "load",
171
- value: (function () {
172
- var _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(vreoUnit) {
163
+ value: function () {
164
+ var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(vreoUnit) {
173
165
  var _this$controller$medi,
174
166
  _this$configs$imageOp,
175
167
  _this$controller$vide,
@@ -182,7 +174,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
182
174
  panoIndexes,
183
175
  i,
184
176
  _args = arguments;
185
- return _regenerator["default"].wrap(function _callee$(_context) {
177
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
186
178
  while (1) {
187
179
  switch (_context.prev = _context.next) {
188
180
  case 0:
@@ -221,7 +213,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
221
213
  break;
222
214
  }
223
215
  panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
224
- if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
216
+ if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
225
217
  return false;
226
218
  }
227
219
  var data = vreoKeyframe.data;
@@ -258,7 +250,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
258
250
  }
259
251
  this.controller.setAvatar(vreoUnit.video.avatar);
260
252
  _context.next = 26;
261
- return (0, _Audio.waitForBlankAudioGenerated)();
253
+ return waitForBlankAudioGenerated();
262
254
  case 26:
263
255
  _context.next = 28;
264
256
  return (_this$controller$vide2 = this.controller.videoAgentScene) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
@@ -286,7 +278,6 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
286
278
  * 获取播放器是否处于暂停状态
287
279
  * @returns 是否暂停中
288
280
  */
289
- )
290
281
  }, {
291
282
  key: "paused",
292
283
  get: function get() {
@@ -322,7 +313,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
322
313
  this.controller.setEnded(false);
323
314
  this.controller.setPlaying(true);
324
315
  (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 ? void 0 : _this$controller$vreo.keyframes.forEach(function (keyframe) {
325
- if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) {
316
+ if (keyframe.type === VreoKeyframeEnum.BgMusic) {
326
317
  keyframe.parsed = false;
327
318
  }
328
319
  });
@@ -398,5 +389,8 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
398
389
  }
399
390
  }]);
400
391
  return Player;
401
- }(_five.Subscribe);
392
+ }(Subscribe);
393
+
394
+ // 导出自定义组件
395
+ export { SpatialScenePanel } from "./custom/SpatialScenePanel/index.js";
402
396
  console.log("\n \u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n \u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n \u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n \u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
@@ -1,21 +1,13 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Drawer = Drawer;
9
- var React = _interopRequireWildcard(require("react"));
10
- var _classnames = _interopRequireDefault(require("classnames"));
11
- var _mobxReact = require("mobx-react");
12
- var _hooks = require("../../hooks");
13
- 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); }
14
- var DrawerView = (0, _mobxReact.observer)(function (_ref) {
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+ import { observer } from 'mobx-react';
4
+ import { useController } from "../../hooks.js";
5
+ var DrawerView = observer(function (_ref) {
15
6
  var _controller$drawerCon2;
16
7
  var controller = _ref.controller;
17
8
  var maxHeight = '400px';
18
- var height = function (_controller$drawerCon) {
9
+ var height = function () {
10
+ var _controller$drawerCon;
19
11
  var height = (_controller$drawerCon = controller.drawerConfig) === null || _controller$drawerCon === void 0 ? void 0 : _controller$drawerCon.height;
20
12
  if (!height) {
21
13
  return 'max-content';
@@ -26,7 +18,7 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
26
18
  return height;
27
19
  }();
28
20
  return /*#__PURE__*/React.createElement("div", {
29
- className: (0, _classnames["default"])('vreo-drawer', {
21
+ className: classNames('vreo-drawer', {
30
22
  'vreo-drawer-visible': controller.drawerConfig && controller.drawerConfig.content
31
23
  }),
32
24
  onClick: function onClick() {
@@ -40,8 +32,8 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
40
32
  }
41
33
  }, ((_controller$drawerCon2 = controller.drawerConfig) === null || _controller$drawerCon2 === void 0 ? void 0 : _controller$drawerCon2.content) || ''));
42
34
  });
43
- function Drawer() {
44
- var controller = (0, _hooks.useController)();
35
+ export function Drawer() {
36
+ var controller = useController();
45
37
  return /*#__PURE__*/React.createElement(DrawerView, {
46
38
  controller: controller
47
39
  });
@@ -1,20 +1,11 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.PopUp = PopUp;
9
- var React = _interopRequireWildcard(require("react"));
10
- var _classnames = _interopRequireDefault(require("classnames"));
11
- var _mobxReact = require("mobx-react");
12
- var _hooks = require("../../hooks");
13
- 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); }
14
- var PopUpView = (0, _mobxReact.observer)(function (_ref) {
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+ import { observer } from 'mobx-react';
4
+ import { useController } from "../../hooks.js";
5
+ var PopUpView = observer(function (_ref) {
15
6
  var controller = _ref.controller;
16
7
  return /*#__PURE__*/React.createElement("div", {
17
- className: (0, _classnames["default"])('vreo-PopUp', {
8
+ className: classNames('vreo-PopUp', {
18
9
  'vreo-PopUp-visible': controller.popUp
19
10
  }),
20
11
  onClick: function onClick() {
@@ -24,8 +15,8 @@ var PopUpView = (0, _mobxReact.observer)(function (_ref) {
24
15
  className: "vreo-PopUp-inner"
25
16
  }, controller.popUp || ''));
26
17
  });
27
- function PopUp() {
28
- var controller = (0, _hooks.useController)();
18
+ export function PopUp() {
19
+ var controller = useController();
29
20
  return /*#__PURE__*/React.createElement(PopUpView, {
30
21
  controller: controller
31
22
  });
@@ -1,28 +1,21 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ResizeObserver = ResizeObserver;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _addResizeListener = require("../../../shared-utils/addResizeListener");
10
- var _hooks = require("../../hooks");
11
- function ResizeObserver() {
12
- var ref = _react["default"].useRef(null);
13
- var controller = (0, _hooks.useController)();
14
- _react["default"].useEffect(function () {
1
+ import React from 'react';
2
+ import { addResizeListener, hasResizeListener } from "../../../shared-utils/addResizeListener.js";
3
+ import { useController } from "../../hooks.js";
4
+ export function ResizeObserver() {
5
+ var ref = React.useRef(null);
6
+ var controller = useController();
7
+ React.useEffect(function () {
15
8
  if (!ref.current) return;
16
9
  var resizeElement = controller.container.parentElement;
17
- if ((0, _addResizeListener.hasResizeListener)(resizeElement)) return;
18
- var dispose = (0, _addResizeListener.addResizeListener)(resizeElement, function (width, height) {
10
+ if (hasResizeListener(resizeElement)) return;
11
+ var dispose = addResizeListener(resizeElement, function (width, height) {
19
12
  controller.setContainerSize(width, height);
20
13
  });
21
14
  return function () {
22
15
  dispose();
23
16
  };
24
17
  }, []);
25
- return /*#__PURE__*/_react["default"].createElement("div", {
18
+ return /*#__PURE__*/React.createElement("div", {
26
19
  className: "resizeObserver-element",
27
20
  ref: ref
28
21
  });
@@ -1,27 +1,18 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.VideoAgentMesh = void 0;
9
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
10
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
16
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17
- var THREE = _interopRequireWildcard(require("three"));
18
- var _Preloader = require("../../../shared-utils/Preloader");
19
- var _mobx = require("mobx");
20
- var _AudioLike = _interopRequireDefault(require("../../../shared-utils/AudioLike"));
21
- var _getMediaInfo = require("../../../shared-utils/getMediaInfo");
22
- 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); }
23
- function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
24
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
1
+ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
2
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
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
+ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
7
+ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
8
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
9
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
10
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
11
+ import * as THREE from 'three';
12
+ import { Preloader } from "../../../shared-utils/Preloader.js";
13
+ import { makeObservable, observable, runInAction } from 'mobx';
14
+ import AudioLike from "../../../shared-utils/AudioLike.js";
15
+ import { getMediaType } from "../../../shared-utils/getMediaInfo.js";
25
16
  var vertexShader = "\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\nvoid main(){\n vUv = uv;\n vColorUv = vec2(uv.x / 2.0, uv.y);\n vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
26
17
  var fragmentShaderTpl = function fragmentShaderTpl() {
27
18
  return "\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\n\nvec3 hsv2rgb(vec3 c) {\n const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nvec3 rgb2hsv(vec3 c) {\n const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n float d = q.x - min(q.w, q.y);\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);\n}\n\nvoid main(void) {\n vec3 color = texture2D(map, vUv).xyz;\n float amask = 1.0;\n\n float ref = color.r;\n if (ref < color.b) ref = color.b;\n amask = color.g - ref + 0.1;\n amask = smoothstep(0.1, 0.3, amask);\n amask = 1.0 - amask;\n\n vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));\n vec3 hsv = rgb2hsv(color);\n float distance = abs(hsv.x - target.x);\n if (distance < 0.15) {\n hsv.y = 0.0;\n }\n color = hsv2rgb(hsv);\n\n gl_FragColor = vec4(color.rgb, amask * float(enable));\n}\n";
@@ -31,6 +22,7 @@ var cacheInstance = {};
31
22
  /**
32
23
  * 视频经纪人贴片的配置选项
33
24
  */
25
+
34
26
  /**
35
27
  * 视频经纪人贴片类
36
28
  *
@@ -60,8 +52,8 @@ var cacheInstance = {};
60
52
  * videoMesh.dispose()
61
53
  * ```
62
54
  */
63
- var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
64
- (0, _inherits2["default"])(VideoAgentMesh, _THREE$Mesh);
55
+ export var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
56
+ _inherits(VideoAgentMesh, _THREE$Mesh);
65
57
  var _super = _createSuper(VideoAgentMesh);
66
58
  /**
67
59
  * 创建视频经纪人贴片实例
@@ -86,7 +78,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
86
78
  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
87
79
  preload: true
88
80
  };
89
- (0, _classCallCheck2["default"])(this, VideoAgentMesh);
81
+ _classCallCheck(this, VideoAgentMesh);
90
82
  if (!options.videoInstance) {
91
83
  if (cacheInstance.videoInstance) {
92
84
  options.videoInstance = cacheInstance.videoInstance;
@@ -138,12 +130,12 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
138
130
  } else {
139
131
  _this.audioInstance = options.audioInstance;
140
132
  }
141
- _this.audioLikeInstance = new _AudioLike["default"]();
142
- (0, _mobx.makeObservable)((0, _assertThisInitialized2["default"])(_this), {
143
- paused: _mobx.observable
133
+ _this.audioLikeInstance = new AudioLike();
134
+ makeObservable(_assertThisInitialized(_this), {
135
+ paused: observable
144
136
  });
145
137
  var updatePaused = function updatePaused(paused) {
146
- return (0, _mobx.runInAction)(function () {
138
+ return runInAction(function () {
147
139
  return _this.paused = paused;
148
140
  });
149
141
  };
@@ -178,7 +170,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
178
170
  * @param videoUrl - 媒体文件URL
179
171
  * @private
180
172
  */
181
- (0, _createClass2["default"])(VideoAgentMesh, [{
173
+ _createClass(VideoAgentMesh, [{
182
174
  key: "mediaInstance",
183
175
  get: /** 配置选项 */
184
176
 
@@ -208,7 +200,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
208
200
  if (!this.videoUrl) {
209
201
  return this.audioLikeInstance;
210
202
  }
211
- if ((0, _getMediaInfo.getMediaType)(this.videoUrl) === 'audio') {
203
+ if (getMediaType(this.videoUrl) === 'audio') {
212
204
  return this.audioInstance;
213
205
  }
214
206
  var uniforms = this.material.uniforms;
@@ -217,11 +209,11 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
217
209
  }
218
210
  }, {
219
211
  key: "update",
220
- value: (function () {
221
- var _update = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(videoUrl) {
212
+ value: function () {
213
+ var _update = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(videoUrl) {
222
214
  var _this2 = this;
223
215
  var uniforms, onStart;
224
- return _regenerator["default"].wrap(function _callee$(_context) {
216
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
225
217
  while (1) {
226
218
  switch (_context.prev = _context.next) {
227
219
  case 0:
@@ -246,13 +238,13 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
246
238
  case 6:
247
239
  uniforms = this.material.uniforms;
248
240
  this.mediaInstance.muted = true;
249
- if (!(this.options.preload || this.options.preload === undefined || (0, _getMediaInfo.getMediaType)(this.videoUrl) === 'video')) {
241
+ if (!(this.options.preload || this.options.preload === undefined || getMediaType(this.videoUrl) === 'video')) {
250
242
  _context.next = 18;
251
243
  break;
252
244
  }
253
245
  _context.t1 = URL;
254
246
  _context.next = 12;
255
- return _Preloader.Preloader.blob(this.videoUrl);
247
+ return Preloader.blob(this.videoUrl);
256
248
  case 12:
257
249
  _context.t2 = _context.sent;
258
250
  _context.next = 15;
@@ -270,7 +262,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
270
262
  if (_this2.mediaInstance.currentTime === 0) return;
271
263
  _this2.freeze = false;
272
264
  _this2.mediaInstance.muted = false;
273
- uniforms.enable.value = (0, _getMediaInfo.getMediaType)(_this2.videoUrl) ? 1 : 0;
265
+ uniforms.enable.value = getMediaType(_this2.videoUrl) ? 1 : 0;
274
266
  _this2.mediaInstance.removeEventListener('timeupdate', onStart, false);
275
267
  };
276
268
  this.mediaInstance.addEventListener('timeupdate', onStart, false);
@@ -311,17 +303,16 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
311
303
  * await mesh.play()
312
304
  * ```
313
305
  */
314
- )
315
306
  }, {
316
307
  key: "play",
317
- value: (function () {
318
- var _play = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
308
+ value: function () {
309
+ var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
319
310
  var _this3 = this;
320
311
  var videoUrl,
321
312
  currentTime,
322
313
  duration,
323
314
  _args3 = arguments;
324
- return _regenerator["default"].wrap(function _callee3$(_context3) {
315
+ return _regeneratorRuntime.wrap(function _callee3$(_context3) {
325
316
  while (1) {
326
317
  switch (_context3.prev = _context3.next) {
327
318
  case 0:
@@ -375,8 +366,8 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
375
366
  this.mediaInstance.pause();
376
367
  _context3.next = 28;
377
368
  return new Promise(function (resolve) {
378
- return setTimeout(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
379
- return _regenerator["default"].wrap(function _callee2$(_context2) {
369
+ return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
370
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
380
371
  while (1) {
381
372
  switch (_context2.prev = _context2.next) {
382
373
  case 0:
@@ -413,7 +404,6 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
413
404
  * 将媒体实例的秒级时间转换为毫秒,提供更高精度的时间控制
414
405
  * @returns 当前播放时间戳(毫秒)
415
406
  */
416
- )
417
407
  }, {
418
408
  key: "currentTime",
419
409
  get: function get() {
@@ -1,42 +1,33 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.VideoAgentScene = void 0;
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
- var THREE = _interopRequireWildcard(require("three"));
13
- var _addResizeListener = require("../../../shared-utils/addResizeListener");
14
- var _VideoAgentMesh = require("./VideoAgentMesh");
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); }
16
- var VideoAgentScene = exports.VideoAgentScene = /*#__PURE__*/(0, _createClass2["default"])(function VideoAgentScene(container, options) {
1
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
2
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
+ import * as THREE from 'three';
5
+ import { addResizeListener } from "../../../shared-utils/addResizeListener.js";
6
+ import { VideoAgentMesh } from "./VideoAgentMesh.js";
7
+ export var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container, options) {
17
8
  var _this = this;
18
- (0, _classCallCheck2["default"])(this, VideoAgentScene);
19
- (0, _defineProperty2["default"])(this, "scene", new THREE.Scene());
20
- (0, _defineProperty2["default"])(this, "camera", new THREE.OrthographicCamera(-240, 240, 135, -135));
21
- (0, _defineProperty2["default"])(this, "renderer", new THREE.WebGLRenderer({
9
+ _classCallCheck(this, VideoAgentScene);
10
+ _defineProperty(this, "scene", new THREE.Scene());
11
+ _defineProperty(this, "camera", new THREE.OrthographicCamera(-240, 240, 135, -135));
12
+ _defineProperty(this, "renderer", new THREE.WebGLRenderer({
22
13
  alpha: true
23
14
  }));
24
- (0, _defineProperty2["default"])(this, "disposers", []);
25
- (0, _defineProperty2["default"])(this, "run", function () {
15
+ _defineProperty(this, "disposers", []);
16
+ _defineProperty(this, "run", function () {
26
17
  // 视频开始 1s 不渲染:规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
27
18
  if (!(_this.videoAgentMesh.paused || _this.videoAgentMesh.freeze) && _this.videoAgentMesh.currentTime > 1000) {
28
19
  _this.renderer.render(_this.scene, _this.camera);
29
20
  }
30
21
  requestAnimationFrame(_this.run);
31
22
  });
32
- (0, _defineProperty2["default"])(this, "dispose", function () {
23
+ _defineProperty(this, "dispose", function () {
33
24
  var _this$videoAgentMesh;
34
25
  (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
35
26
  _this.disposers.forEach(function (disposer) {
36
27
  return disposer === null || disposer === void 0 ? void 0 : disposer();
37
28
  });
38
29
  });
39
- this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
30
+ this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options);
40
31
 
41
32
  // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
42
33
 
@@ -45,7 +36,7 @@ var VideoAgentScene = exports.VideoAgentScene = /*#__PURE__*/(0, _createClass2["
45
36
  this.camera.lookAt(0, 0, 0);
46
37
  var domElement = this.renderer.domElement;
47
38
  domElement.classList.add('VideoAgent-canvas');
48
- var dispose = (0, _addResizeListener.addResizeListener)(container, function (width, height) {
39
+ var dispose = addResizeListener(container, function (width, height) {
49
40
  _this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
50
41
  domElement.style.width = "".concat(width, "px");
51
42
  domElement.style.height = "".concat(height, "px");