@realsee/vreo 2.4.7 → 2.5.0-alpha.2

package/lib/PlayController/index.js

@@ -1,36 +1,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PlayController = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _five = require("@realsee/five");
-var _animationFrame = require("../shared-utils/animationFrame");
-var _createHTMLAudioElement = require("./createHTMLAudioElement");
-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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { Subscribe } from '@realsee/five';
+import { requestAnimationFrameInterval } from "../shared-utils/animationFrame/index.js";
+import { createHTMLAudioElement } from "./createHTMLAudioElement.js";
 var closures = {};
-var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe) {
-  (0, _inherits2["default"])(PlayController, _Subscribe);
+export var PlayController = /*#__PURE__*/function (_Subscribe) {
+  _inherits(PlayController, _Subscribe);
   var _super = _createSuper(PlayController);
   function PlayController() {
     var _this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    (0, _classCallCheck2["default"])(this, PlayController);
+    _classCallCheck(this, PlayController);
     _this = _super.call(this);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "config", {});
+    _defineProperty(_assertThisInitialized(_this), "config", {});
     if (!config.audio) {
-      config.audio = (0, _createHTMLAudioElement.createHTMLAudioElement)();
+      config.audio = createHTMLAudioElement();
     }
     _this.config = Object.assign(_this.config, config);
     closures.onPlaying = function () {
@@ -45,7 +38,7 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
     _this.audioInstance.addEventListener('play', closures.onPlaying);
     _this.audioInstance.addEventListener('pause', closures.onPaused);
     _this.audioInstance.addEventListener('ended', closures.onEnded);
-    _this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
+    _this.stopInterval = requestAnimationFrameInterval(function () {
       if (_this.audioInstance.paused) {
         return;
       }
@@ -72,7 +65,7 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
   /**
    * 载入数据
    */
-  (0, _createClass2["default"])(PlayController, [{
+  _createClass(PlayController, [{
     key: "paused",
     get: function get() {
       return this.audioInstance.paused;
@@ -112,9 +105,9 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
   }, {
     key: "load",
     value: (function () {
-      var _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(vreoUnit) {
+      var _load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this3 = this;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -160,8 +153,8 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
   }, {
     key: "play",
     value: (function () {
-      var _play = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
+      var _play = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
@@ -185,8 +178,8 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
   }, {
     key: "pause",
     value: (function () {
-      var _pause = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-        return _regenerator["default"].wrap(function _callee3$(_context3) {
+      var _pause = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
@@ -230,4 +223,4 @@ var PlayController = exports.PlayController = /*#__PURE__*/function (_Subscribe)
     }
   }]);
   return PlayController;
-}(_five.Subscribe);
+}(Subscribe);

package/lib/Player/App.js

@@ -1,43 +1,34 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.App = App;
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _mobxReact = require("mobx-react");
-var _hooks = require("./hooks");
-var _CameraMovement = require("./modules/keyframes/CameraMovement");
-var _ResizeObserver = require("./modules/ResizeObserver");
-var _InfoPanel = require("./modules/keyframes/InfoPanel");
-var _ModelVideo = require("./modules/keyframes/ModelVideo");
-var _PanoEffect = require("./modules/keyframes/PanoEffect");
-var _PanoTag = require("./modules/keyframes/PanoTag");
-var _PanoTextLabel = require("./modules/keyframes/PanoTextLabel");
-var _Prompter = require("./modules/keyframes/Prompter");
-var _UpdateVRPanorama = require("./modules/keyframes/UpdateVRPanorama");
-var _VideoEffect = require("./modules/keyframes/VideoEffect");
-var _VideoAgent = require("./modules/VideoAgent");
-var _BgMusic = require("./modules/keyframes/BgMusic");
-var _Wave = require("./modules/Wave");
-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 AppView = (0, _mobxReact.observer)(function (_ref) {
+import * as React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useController } from "./hooks.js";
+import { CameraMovement } from "./modules/keyframes/CameraMovement/index.js";
+import { ResizeObserver } from "./modules/ResizeObserver/index.js";
+import { InfoPanel } from "./modules/keyframes/InfoPanel/index.js";
+import { ModelVideo } from "./modules/keyframes/ModelVideo/index.js";
+import { PanoEffect } from "./modules/keyframes/PanoEffect/index.js";
+import { PanoTag } from "./modules/keyframes/PanoTag/index.js";
+import { PanoTextLabel } from "./modules/keyframes/PanoTextLabel/index.js";
+import { Prompter } from "./modules/keyframes/Prompter/index.js";
+import { UpdateVRPanorama } from "./modules/keyframes/UpdateVRPanorama/index.js";
+import { VideoEffect } from "./modules/keyframes/VideoEffect/index.js";
+import { VideoAgent } from "./modules/VideoAgent/index.js";
+import { BgMusic } from "./modules/keyframes/BgMusic/index.js";
+import { Wave } from "./modules/Wave/index.js";
+var AppView = observer(function (_ref) {
   var _controller$configs, _controller$waveAppea, _controller$configs3, _controller$configs4;
   var controller = _ref.controller;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-panel', {
+    className: classNames('vreo-panel', {
       'vreo-panel--hidden': !controller.visible
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-panel-inner"
-  }, /*#__PURE__*/React.createElement(_Wave.Wave, {
+  }, /*#__PURE__*/React.createElement(Wave, {
     onClick: (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.onWaveClick,
     appearance: (_controller$waveAppea = controller.waveAppearance) !== null && _controller$waveAppea !== void 0 ? _controller$waveAppea : 'single',
     staticPrefix: controller.configs.waveStaticPrefix
-  }), /*#__PURE__*/React.createElement(_VideoAgent.VideoAgent, {
+  }), /*#__PURE__*/React.createElement(VideoAgent, {
     onClick: function onClick() {
       var _controller$configs2;
       if ((_controller$configs2 = controller.configs) !== null && _controller$configs2 !== void 0 && _controller$configs2.onAvatarClick) {
@@ -51,11 +42,11 @@ var AppView = (0, _mobxReact.observer)(function (_ref) {
       }
     },
     options: ((_controller$configs3 = controller.configs) === null || _controller$configs3 === void 0 ? void 0 : _controller$configs3.videoAgentMeshOptions) || {}
-  }), /*#__PURE__*/React.createElement(_Prompter.Prompter, null), (_controller$configs4 = controller.configs) === null || _controller$configs4 === void 0 ? void 0 : _controller$configs4.customPanelChildren));
+  }), /*#__PURE__*/React.createElement(Prompter, null), (_controller$configs4 = controller.configs) === null || _controller$configs4 === void 0 ? void 0 : _controller$configs4.customPanelChildren));
 });
-function App() {
-  var controller = (0, _hooks.useController)();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ResizeObserver.ResizeObserver, null), /*#__PURE__*/React.createElement(_CameraMovement.CameraMovement, null), /*#__PURE__*/React.createElement(_ModelVideo.ModelVideo, null), /*#__PURE__*/React.createElement(_UpdateVRPanorama.UpdateVRPanorama, null), /*#__PURE__*/React.createElement(_VideoEffect.VideoEffect, null), /*#__PURE__*/React.createElement(_PanoTag.PanoTag, null), /*#__PURE__*/React.createElement(_PanoTextLabel.PanoTextLabel, null), /*#__PURE__*/React.createElement(_InfoPanel.InfoPanel, null), /*#__PURE__*/React.createElement(_PanoEffect.PanoEffect, null), /*#__PURE__*/React.createElement(_BgMusic.BgMusic, null)), /*#__PURE__*/React.createElement(AppView, {
+export function App() {
+  var controller = useController();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, null), /*#__PURE__*/React.createElement(CameraMovement, null), /*#__PURE__*/React.createElement(ModelVideo, null), /*#__PURE__*/React.createElement(UpdateVRPanorama, null), /*#__PURE__*/React.createElement(VideoEffect, null), /*#__PURE__*/React.createElement(PanoTag, null), /*#__PURE__*/React.createElement(PanoTextLabel, null), /*#__PURE__*/React.createElement(InfoPanel, null), /*#__PURE__*/React.createElement(PanoEffect, null), /*#__PURE__*/React.createElement(BgMusic, null)), /*#__PURE__*/React.createElement(AppView, {
     controller: controller
   }));
 }

package/lib/Player/Controller.d.ts

@@ -4,7 +4,28 @@ import { VreoKeyframe, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit, VreoVideo
 import { VideoAgentScene } from './modules/VideoAgent/VideoAgentScene';
 import { Appearance, PlayerConfigs, WaveAppearance } from './typings';
 /**
- * 逻辑控制器：内部状态。
+ * Vreo 播放器逻辑控制器
+ *
+ * 负责管理播放器的内部状态、事件处理、UI 控制和剧本执行。
+ * 提供播放控制、外观设置、弹窗管理、抽屉控制等功能。
+ *
+ * @example
+ * ```typescript
+ * const controller = new Controller({
+ *   five: fiveInstance,
+ *   container: document.getElementById('container'),
+ *   configs: playerConfigs
+ * })
+ *
+ * // 设置播放状态
+ * controller.setPlaying(true)
+ *
+ * // 打开弹窗
+ * controller.openPopUp('弹窗内容')
+ *
+ * // 打开抽屉
+ * controller.openDrawer({ content: '抽屉内容', height: 300 })
+ * ```
  */
 export declare class Controller extends Subscribe<VreoKeyframeEvent> {
     five: Five;
@@ -25,39 +46,122 @@ export declare class Controller extends Subscribe<VreoKeyframeEvent> {
     appearance: Appearance;
     avatar: VreoVideo['avatar'];
     visible: boolean;
+    /**
+     * 获取当前播放媒体的类型
+     * @returns 'video' | 'avatar' | 'none' - 媒体类型
+     */
     get agentType(): "video" | "none" | "avatar";
     popUp: string | JSX.Element | null;
+    /**
+     * 打开或关闭弹窗
+     * @param popUp - 弹窗内容，可以是字符串、JSX元素或false（关闭弹窗）
+     */
     openPopUp(popUp: string | JSX.Element | false): void;
+    /**
+     * 设置加载状态
+     * @param loading - 加载状态：true（加载中）、false（加载完成）、null（加载失败）
+     */
     setLoading(loading: boolean | null): void;
     drawerConfig: {
         content: string | JSX.Element;
         height?: number | string;
     } | null;
+    /**
+     * 设置虚拟形象配置
+     * @param avatar - 虚拟形象配置对象
+     */
     setAvatar(avatar: VreoVideo['avatar']): void;
+    /**
+     * 设置容器尺寸
+     * @param width - 容器宽度
+     * @param height - 容器高度
+     */
     setContainerSize(width: number, height: number): void;
+    /**
+     * 设置播放器可见性
+     * @param v - 是否可见
+     */
     setVisible(v: boolean): void;
+    /**
+     * 设置播放状态
+     * @param playing - 是否正在播放
+     */
     setPlaying(playing: boolean): void;
+    /**
+     * 设置结束状态
+     * @param ended - 是否已结束
+     */
     setEnded(ended: boolean): void;
+    /**
+     * 设置播放器外观
+     * @param appearance - 外观配置对象
+     */
     setAppearance(appearance: Appearance): void;
+    /**
+     * 打开或关闭抽屉
+     * @param drawerConfig - 抽屉配置对象，false表示关闭抽屉
+     */
     openDrawer(drawerConfig?: false | {
         content: string | JSX.Element;
         height?: number | string;
     }): void;
+    /**
+     * 创建 Controller 实例
+     * @param params - 构造参数对象
+     * @param params.five - Five 渲染引擎实例
+     * @param params.container - DOM 容器元素
+     * @param params.configs - 播放器配置
+     */
     constructor({ five, container, configs }: {
         five: Five;
         container: Element;
         configs: PlayerConfigs;
     });
+    /**
+     * 获取播放器是否准备就绪
+     * @returns 是否有可用的视频代理场景
+     */
     get ready(): boolean;
+    /**
+     * 获取当前播放时间（毫秒）
+     * @returns 当前播放时间戳
+     */
     get currentTime(): number;
+    /**
+     * 获取当前时间点应该触发的关键帧
+     * @returns 当前应该执行的关键帧数组
+     */
     get currentKeyframes(): VreoKeyframe[];
+    /**
+     * 获取当前媒体实例（音频或视频元素）
+     * @returns HTML媒体元素实例
+     */
     get mediaInstance(): HTMLVideoElement | HTMLAudioElement | import("../shared-utils/AudioLike").AudioLike | undefined;
     /**
-     * 逐帧任务
+     * 逐帧任务循环处理
+     *
+     * 在每个动画帧中检查播放状态、处理关键帧触发等
+     * @param callback - 关键帧触发时的回调函数
      */
     requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe, currentTime: number) => void): void;
+    /**
+     * 开始运行播放器逻辑循环
+     *
+     * 启动帧循环，持续监听并处理关键帧事件
+     * @param callback - 关键帧触发时的回调函数
+     */
     run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void): void;
+    /**
+     * 清理播放器状态
+     *
+     * 停止播放、重置关键帧状态、清理数据和定时器
+     */
     clear(): void;
+    /**
+     * 销毁控制器实例
+     *
+     * 清理所有状态和资源，释放内存
+     */
     dispose(): void;
 }
 declare const ControllerContext: React.Context<Controller | null>;