@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.
- package/lib/PlayController/createHTMLAudioElement.js +5 -12
- package/lib/PlayController/index.js +31 -41
- package/lib/Player/App.js +25 -34
- package/lib/Player/Controller.js +68 -76
- package/lib/Player/custom/SpatialScenePanel/index.js +20 -54
- package/lib/Player/hooks.js +6 -15
- package/lib/Player/index.d.ts +1 -0
- package/lib/Player/index.js +41 -47
- package/lib/Player/modules/Drawer/index.js +10 -18
- package/lib/Player/modules/PopUp/index.js +8 -17
- package/lib/Player/modules/ResizeObserver/index.js +10 -17
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +36 -46
- package/lib/Player/modules/VideoAgent/VideoAgentScene.js +16 -25
- package/lib/Player/modules/VideoAgent/index.js +8 -17
- package/lib/Player/modules/Wave/index.js +24 -33
- package/lib/Player/modules/keyframes/BgMusic/index.js +13 -22
- package/lib/Player/modules/keyframes/CameraMovement/index.js +17 -26
- package/lib/Player/modules/keyframes/InfoPanel/index.js +15 -23
- package/lib/Player/modules/keyframes/ModelVideo/index.js +17 -26
- package/lib/Player/modules/keyframes/PanoEffect/index.js +21 -30
- package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +6 -14
- package/lib/Player/modules/keyframes/PanoTag/index.js +10 -18
- package/lib/Player/modules/keyframes/PanoTextLabel/index.js +19 -28
- package/lib/Player/modules/keyframes/Prompter/index.js +13 -22
- package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +16 -24
- package/lib/Player/modules/keyframes/VideoEffect/index.js +17 -27
- package/lib/Player/typings.js +1 -5
- package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +3 -9
- package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +1 -7
- package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +1 -7
- package/lib/fivePlugins/CSS3DRenderPlugin/index.js +27 -37
- package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +3 -9
- package/lib/fivePlugins/CameraMovementPlugin/index.js +16 -23
- package/lib/fivePlugins/CameraMovementPlugin/typings.js +6 -10
- package/lib/fivePlugins/ModelTVVideoPlugin/index.js +9 -18
- package/lib/index.js +1 -12
- package/lib/react/index.js +12 -24
- package/lib/shared-utils/Audio.js +28 -38
- package/lib/shared-utils/AudioLike.js +23 -30
- package/lib/shared-utils/Preloader.js +1 -7
- package/lib/shared-utils/addResizeListener.js +4 -11
- package/lib/shared-utils/animationFrame/BetterTween.js +24 -34
- package/lib/shared-utils/animationFrame/index.js +4 -13
- package/lib/shared-utils/animationFrame/tween.js +9 -17
- package/lib/shared-utils/createTransMatrix.js +5 -14
- package/lib/shared-utils/getFileExpandedName.js +1 -7
- package/lib/shared-utils/getMediaInfo.js +9 -19
- package/lib/shared-utils/setElementDataset.js +1 -7
- package/lib/typings/VreoUnit.js +15 -63
- package/lib/typings/index.d.ts +1 -0
- package/lib/typings/index.js +1 -0
- package/package.json +61 -9
package/lib/Player/hooks.js
CHANGED
|
@@ -1,29 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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);
|
package/lib/Player/index.d.ts
CHANGED
package/lib/Player/index.js
CHANGED
|
@@ -1,32 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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 =
|
|
58
|
-
(
|
|
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
|
-
(
|
|
67
|
+
_classCallCheck(this, Player);
|
|
76
68
|
_this = _super.call(this);
|
|
77
69
|
_this.$five = five;
|
|
78
|
-
|
|
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
|
|
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(
|
|
100
|
+
ReactDOM.render( /*#__PURE__*/React.createElement(ControllerContext.Provider, {
|
|
109
101
|
value: _this.controller
|
|
110
|
-
}, /*#__PURE__*/React.createElement(
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
(
|
|
161
|
+
_createClass(Player, [{
|
|
170
162
|
key: "load",
|
|
171
|
-
value:
|
|
172
|
-
var _load = (
|
|
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
|
|
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 !==
|
|
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
|
|
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 ===
|
|
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
|
-
}(
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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 (
|
|
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: (
|
|
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 =
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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: (
|
|
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 =
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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 (
|
|
18
|
-
var dispose =
|
|
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__*/
|
|
18
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
26
19
|
className: "resizeObserver-element",
|
|
27
20
|
ref: ref
|
|
28
21
|
});
|
|
@@ -1,27 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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 =
|
|
64
|
-
(
|
|
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
|
-
(
|
|
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
|
|
142
|
-
|
|
143
|
-
paused:
|
|
133
|
+
_this.audioLikeInstance = new AudioLike();
|
|
134
|
+
makeObservable(_assertThisInitialized(_this), {
|
|
135
|
+
paused: observable
|
|
144
136
|
});
|
|
145
137
|
var updatePaused = function updatePaused(paused) {
|
|
146
|
-
return
|
|
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
|
-
(
|
|
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 (
|
|
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:
|
|
221
|
-
var _update = (
|
|
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
|
|
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 ||
|
|
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
|
|
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 =
|
|
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:
|
|
318
|
-
var _play = (
|
|
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
|
|
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__*/(
|
|
379
|
-
return
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
(
|
|
19
|
-
(
|
|
20
|
-
(
|
|
21
|
-
(
|
|
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
|
-
(
|
|
25
|
-
(
|
|
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
|
-
(
|
|
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
|
|
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 =
|
|
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");
|