@realsee/vreo 2.4.7 → 2.5.0-alpha.2

package/lib/Player/index.d.ts

@@ -1,18 +1,121 @@
 import { Five, Subscribe } from '@realsee/five';
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
 import { Appearance, PlayerConfigs } from './typings';
+/**
+ * Vreo 播放器核心类
+ *
+ * 提供 VR 视频播放、剧本执行、相机运镜等功能的主要接口。
+ * 基于 Five 渲染引擎和 React 构建的 3D 空间剧本播放器。
+ *
+ * @example
+ * ```typescript
+ * import { Five } from '@realsee/five'
+ * import { Player } from '@realsee/vreo'
+ *
+ * const five = new Five({
+ *   // Five 配置选项
+ * })
+ * const player = new Player(five, {
+ *   autoPreload: true,
+ *   imageOptions: { size: 1024 }
+ * })
+ *
+ * await player.load(vreoUnit)
+ * player.play()
+ * ```
+ */
 export declare class Player extends Subscribe<VreoKeyframeEvent> {
+    /** Five 渲染引擎实例 */
     $five: Five;
+    /** 内部控制器 */
     private controller;
+    /** 播放器配置（只读） */
     configs: Readonly<PlayerConfigs>;
+    /**
+     * 创建 Vreo 播放器实例
+     *
+     * @param five - Five 渲染引擎实例
+     * @param configs - 播放器配置选项
+     */
     constructor(five: Five, configs?: Partial<PlayerConfigs>);
+    /**
+     * 加载剧本数据
+     *
+     * 加载 VreoUnit 剧本数据，准备播放器状态，预载资源，并初始化播放环境。
+     *
+     * @param vreoUnit - 剧本数据对象，包含视频信息和关键帧序列
+     * @param currentTime - 起始播放时间（毫秒），默认为 0
+     * @param preload - 是否预载相关资源，默认为 false
+     * @param force - 是否强制重新载入（深拷贝数据），默认为 false
+     * @returns Promise<boolean> 返回加载是否成功
+     *
+     * @example
+     * ```typescript
+     * // 基本加载
+     * await player.load(vreoUnit)
+     *
+     * // 从指定时间开始加载，并预载资源
+     * await player.load(vreoUnit, 5000, true)
+     *
+     * // 强制重新加载
+     * await player.load(vreoUnit, 0, false, true)
+     * ```
+     */
     load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean): Promise<boolean>;
+    /**
+     * 获取播放器是否处于暂停状态
+     * @returns 是否暂停中
+     */
     get paused(): boolean;
+    /**
+     * 开始播放
+     *
+     * @param currentTime - 可选的播放起始时间（毫秒）
+     * @returns 是否开始播放成功
+     *
+     * @example
+     * ```typescript
+     * // 从当前位置播放
+     * player.play()
+     *
+     * // 从指定时间开始播放
+     * player.play(10000) // 从10秒处开始
+     * ```
+     */
     play(currentTime?: number): boolean;
+    /**
+     * 设置播放器外观
+     * @param appearance - 外观配置对象
+     *
+     * @example
+     * ```typescript
+     * player.setAppearance({
+     *   waveStyle: 'solid'
+     * })
+     * ```
+     */
     setAppearance(appearance: Appearance): void;
+    /**
+     * 暂停播放
+     */
     pause(): void;
+    /**
+     * 显示播放器界面
+     */
     show(): void;
+    /**
+     * 隐藏播放器界面
+     */
     hide(): void;
+    /**
+     * 获取当前播放时间
+     * @returns 当前播放时间（毫秒）
+     */
     getCurrentTime(): number;
+    /**
+     * 销毁播放器实例
+     *
+     * 清理所有资源、事件监听器和DOM元素
+     */
     dispose(): void;
 }

package/lib/Player/index.js

@@ -1,45 +1,73 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Player = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _five = require("@realsee/five");
-var _App = require("./App");
-var _Controller = require("./Controller");
-var _VreoUnit = require("../typings/VreoUnit");
-var _mobx = require("mobx");
-var _Drawer = require("./modules/Drawer");
-var _PopUp = require("./modules/PopUp");
-var _Audio = require("../shared-utils/Audio");
-var _location$search$matc, _location$search$matc2; // 下面这一行不能删
-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); }
-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); }; }
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+var _location$search$matc, _location$search$matc2;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// 下面这一行不能删
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Subscribe } from '@realsee/five';
+import { App } from "./App.js";
+import { Controller, ControllerContext } from "./Controller.js";
+import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
+import { reaction } from 'mobx';
+import { Drawer } from "./modules/Drawer/index.js";
+import { PopUp } from "./modules/PopUp/index.js";
+import { generateBlankAudio, waitForBlankAudioGenerated } from "../shared-utils/Audio.js";
 var DefaultAudioCacheLength = 3;
 var id = "vreo-app-dhjskadhksahdjskahdjksa";
 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);
-var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
-  (0, _inherits2["default"])(Player, _Subscribe);
+
+/**
+ * Vreo 播放器核心类
+ * 
+ * 提供 VR 视频播放、剧本执行、相机运镜等功能的主要接口。
+ * 基于 Five 渲染引擎和 React 构建的 3D 空间剧本播放器。
+ * 
+ * @example
+ * ```typescript
+ * import { Five } from '@realsee/five'
+ * import { Player } from '@realsee/vreo'
+ * 
+ * const five = new Five({
+ *   // Five 配置选项
+ * })
+ * const player = new Player(five, {
+ *   autoPreload: true,
+ *   imageOptions: { size: 1024 }
+ * })
+ * 
+ * await player.load(vreoUnit)
+ * player.play()
+ * ```
+ */
+export var Player = /*#__PURE__*/function (_Subscribe) {
+  _inherits(Player, _Subscribe);
   var _super = _createSuper(Player);
+  /** Five 渲染引擎实例 */
+
+  /** 内部控制器 */
+
+  /** 播放器配置（只读） */
+
+  /**
+   * 创建 Vreo 播放器实例
+   * 
+   * @param five - Five 渲染引擎实例
+   * @param configs - 播放器配置选项
+   */
   function Player(five) {
     var _this;
     var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    (0, _classCallCheck2["default"])(this, Player);
+    _classCallCheck(this, Player);
     _this = _super.call(this);
     _this.$five = five;
-    (0, _Audio.generateBlankAudio)(audioCacheLength);
+    generateBlankAudio(audioCacheLength);
     if (!configs.container) {
       configs.container = configs.containter;
     }
@@ -64,14 +92,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     _this.configs = Object.freeze(Object.assign({
       keyframeMap: {}
     }, configs));
-    _this.controller = new _Controller.Controller({
+    _this.controller = new Controller({
       five: five,
       container: configs.container,
       configs: _this.configs
     });
-    ReactDOM.render(/*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
+    ReactDOM.render(/*#__PURE__*/React.createElement(ControllerContext.Provider, {
       value: _this.controller
-    }, /*#__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) {
+    }, /*#__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) {
       return /*#__PURE__*/React.createElement(CustomCmpt, {
         key: key,
         subscribe: {
@@ -90,14 +118,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     })), configs.container);
 
     // 监听播放情况：抛出触发时机
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.controller.ended;
     }, function (ended) {
       if (ended) {
         _this.emit('paused', true);
       }
     });
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.controller.playing;
     }, function (playing) {
       if (!_this.controller.ended) {
@@ -106,10 +134,34 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(Player, [{
+
+  /**
+   * 加载剧本数据
+   * 
+   * 加载 VreoUnit 剧本数据，准备播放器状态，预载资源，并初始化播放环境。
+   * 
+   * @param vreoUnit - 剧本数据对象，包含视频信息和关键帧序列
+   * @param currentTime - 起始播放时间（毫秒），默认为 0
+   * @param preload - 是否预载相关资源，默认为 false
+   * @param force - 是否强制重新载入（深拷贝数据），默认为 false
+   * @returns Promise<boolean> 返回加载是否成功
+   * 
+   * @example
+   * ```typescript
+   * // 基本加载
+   * await player.load(vreoUnit)
+   * 
+   * // 从指定时间开始加载，并预载资源
+   * await player.load(vreoUnit, 5000, true)
+   * 
+   * // 强制重新加载
+   * await player.load(vreoUnit, 0, false, true)
+   * ```
+   */
+  _createClass(Player, [{
     key: "load",
-    value: function () {
-      var _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(vreoUnit) {
+    value: (function () {
+      var _load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$medi,
           _this$configs$imageOp,
           _this$controller$vide,
@@ -122,7 +174,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
           panoIndexes,
           i,
           _args = arguments;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -161,7 +213,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
                   break;
                 }
                 panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
-                  if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
+                  if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
                     return false;
                   }
                   var data = vreoKeyframe.data;
@@ -198,7 +250,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
                 }
                 this.controller.setAvatar(vreoUnit.video.avatar);
                 _context.next = 26;
-                return (0, _Audio.waitForBlankAudioGenerated)();
+                return waitForBlankAudioGenerated();
               case 26:
                 _context.next = 28;
                 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);
@@ -222,11 +274,32 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
       }
       return load;
     }()
+    /**
+     * 获取播放器是否处于暂停状态
+     * @returns 是否暂停中
+     */
+    )
   }, {
     key: "paused",
     get: function get() {
       return !this.controller.playing;
     }
+
+    /**
+     * 开始播放
+     * 
+     * @param currentTime - 可选的播放起始时间（毫秒）
+     * @returns 是否开始播放成功
+     * 
+     * @example
+     * ```typescript
+     * // 从当前位置播放
+     * player.play()
+     * 
+     * // 从指定时间开始播放
+     * player.play(10000) // 从10秒处开始
+     * ```
+     */
   }, {
     key: "play",
     value: function play(currentTime) {
@@ -241,37 +314,72 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
       this.controller.setEnded(false);
       this.controller.setPlaying(true);
       (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 ? void 0 : _this$controller$vreo.keyframes.forEach(function (keyframe) {
-        if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) {
+        if (keyframe.type === VreoKeyframeEnum.BgMusic) {
           keyframe.parsed = false;
         }
       });
       return true;
     }
+
+    /**
+     * 设置播放器外观
+     * @param appearance - 外观配置对象
+     * 
+     * @example
+     * ```typescript
+     * player.setAppearance({
+     *   waveStyle: 'solid'
+     * })
+     * ```
+     */
   }, {
     key: "setAppearance",
     value: function setAppearance(appearance) {
       this.controller.setAppearance(appearance);
     }
+
+    /**
+     * 暂停播放
+     */
   }, {
     key: "pause",
     value: function pause() {
       this.controller.setPlaying(false);
     }
+
+    /**
+     * 显示播放器界面
+     */
   }, {
     key: "show",
     value: function show() {
       this.controller.setVisible(true);
     }
+
+    /**
+     * 隐藏播放器界面
+     */
   }, {
     key: "hide",
     value: function hide() {
       this.controller.setVisible(false);
     }
+
+    /**
+     * 获取当前播放时间
+     * @returns 当前播放时间（毫秒）
+     */
   }, {
     key: "getCurrentTime",
     value: function getCurrentTime() {
       return this.controller.currentTime;
     }
+
+    /**
+     * 销毁播放器实例
+     * 
+     * 清理所有资源、事件监听器和DOM元素
+     */
   }, {
     key: "dispose",
     value: function dispose() {
@@ -282,5 +390,5 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     }
   }]);
   return Player;
-}(_five.Subscribe);
+}(Subscribe);
 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");

package/lib/Player/modules/Drawer/index.js

@@ -1,17 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = Drawer;
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _mobxReact = require("mobx-react");
-var _hooks = require("../../hooks");
-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); }
-var DrawerView = (0, _mobxReact.observer)(function (_ref) {
+import * as React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useController } from "../../hooks.js";
+var DrawerView = observer(function (_ref) {
   var _controller$drawerCon2;
   var controller = _ref.controller;
   var maxHeight = '400px';
@@ -26,7 +17,7 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
     return height;
   }();
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-drawer', {
+    className: classNames('vreo-drawer', {
       'vreo-drawer-visible': controller.drawerConfig && controller.drawerConfig.content
     }),
     onClick: function onClick() {
@@ -40,8 +31,8 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
     }
   }, ((_controller$drawerCon2 = controller.drawerConfig) === null || _controller$drawerCon2 === void 0 ? void 0 : _controller$drawerCon2.content) || ''));
 });
-function Drawer() {
-  var controller = (0, _hooks.useController)();
+export function Drawer() {
+  var controller = useController();
   return /*#__PURE__*/React.createElement(DrawerView, {
     controller: controller
   });

package/lib/Player/modules/PopUp/index.js

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PopUp = PopUp;
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _mobxReact = require("mobx-react");
-var _hooks = require("../../hooks");
-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); }
-var PopUpView = (0, _mobxReact.observer)(function (_ref) {
+import * as React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useController } from "../../hooks.js";
+var PopUpView = observer(function (_ref) {
   var controller = _ref.controller;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-PopUp', {
+    className: classNames('vreo-PopUp', {
       'vreo-PopUp-visible': controller.popUp
     }),
     onClick: function onClick() {
@@ -24,8 +15,8 @@ var PopUpView = (0, _mobxReact.observer)(function (_ref) {
     className: "vreo-PopUp-inner"
   }, controller.popUp || ''));
 });
-function PopUp() {
-  var controller = (0, _hooks.useController)();
+export function PopUp() {
+  var controller = useController();
   return /*#__PURE__*/React.createElement(PopUpView, {
     controller: controller
   });

package/lib/Player/modules/ResizeObserver/index.js

@@ -1,28 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ResizeObserver = ResizeObserver;
-var _react = _interopRequireDefault(require("react"));
-var _addResizeListener = require("../../../shared-utils/addResizeListener");
-var _hooks = require("../../hooks");
-function ResizeObserver() {
-  var ref = _react["default"].useRef(null);
-  var controller = (0, _hooks.useController)();
-  _react["default"].useEffect(function () {
+import React from 'react';
+import { addResizeListener, hasResizeListener } from "../../../shared-utils/addResizeListener.js";
+import { useController } from "../../hooks.js";
+export function ResizeObserver() {
+  var ref = React.useRef(null);
+  var controller = useController();
+  React.useEffect(function () {
     if (!ref.current) return;
     var resizeElement = controller.container.parentElement;
-    if ((0, _addResizeListener.hasResizeListener)(resizeElement)) return;
-    var dispose = (0, _addResizeListener.addResizeListener)(resizeElement, function (width, height) {
+    if (hasResizeListener(resizeElement)) return;
+    var dispose = addResizeListener(resizeElement, function (width, height) {
       controller.setContainerSize(width, height);
     });
     return function () {
       dispose();
     };
   }, []);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "resizeObserver-element",
     ref: ref
   });