@realsee/vreo 2.6.4-alpha.5 → 3.0.0-webgpu-react18.8

package/lib/Player/Controller.js

@@ -1,530 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import { PlaybackLifecycle } from "./PlaybackLifecycle.js";
-import { Subscribe } from '@realsee/five';
-import { action, makeObservable, observable, reaction } from 'mobx';
-import * as React from 'react';
-import { requestAnimationFrameInterval } from "../shared-utils/animationFrame/index.js";
-import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
-import setElementDataset from "../shared-utils/setElementDataset.js";
-import { getMediaType } from "../shared-utils/getMediaInfo.js";
-/**
- * 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 var Controller = /*#__PURE__*/function (_Subscribe) {
-  function Controller(_ref) {
-    var _this;
-    var five = _ref.five,
-      container = _ref.container,
-      configs = _ref.configs;
-    _classCallCheck(this, Controller);
-    _this = _callSuper(this, Controller);
-    _defineProperty(_this, "playing", false);
-    _defineProperty(_this, "ended", false);
-    _defineProperty(_this, "loading", false);
-    // null 表示加载失败
-    _defineProperty(_this, "containerSize", {
-      width: 0,
-      height: 0
-    });
-    _defineProperty(_this, "waveAppearance", null);
-    _defineProperty(_this, "appearance", {
-      waveStyle: 'wave'
-    });
-    _defineProperty(_this, "avatar", {});
-    /**
-     * 是否正在等待背景音乐加载
-     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
-     */
-    _defineProperty(_this, "waitingForBgMusic", false);
-    _defineProperty(_this, "visible", false);
-    _defineProperty(_this, "popUp", null);
-    _defineProperty(_this, "drawerConfig", null);
-    /**
-     * 创建 Controller 实例
-     * @param params - 构造参数对象
-     * @param params.five - Five 渲染引擎实例
-     * @param params.container - DOM 容器元素
-     * @param params.configs - 播放器配置
-     */
-    _defineProperty(_this, "resumeGeneration", 0);
-    _defineProperty(_this, "disposers", []);
-    _this.playback = new PlaybackLifecycle(configs.mediaManager, function () {
-      var _this$videoAgentScene;
-      _this.resuming = undefined;
-      ++_this.resumeGeneration;
-      _this.setPlaying(false);
-      (_this$videoAgentScene = _this.videoAgentScene) === null || _this$videoAgentScene === void 0 || _this$videoAgentScene.videoAgentMesh.stop();
-      _this.setWaitingForBgMusic(false);
-    });
-    _this.configs = configs;
-    _this.container = container;
-    _this.five = five;
-    _this.appSize = configs.appSize;
-    _this.appearance = _objectSpread(_objectSpread({}, _this.appearance), configs.appearance);
-    makeObservable(_this, {
-      visible: observable,
-      setVisible: action,
-      playing: observable,
-      setPlaying: action,
-      loading: observable,
-      // videoAgentScene: observable.ref,
-      setLoading: action,
-      popUp: observable.ref,
-      openPopUp: action,
-      drawerConfig: observable.ref,
-      openDrawer: action,
-      ended: observable,
-      waveAppearance: observable,
-      avatar: observable,
-      containerSize: observable,
-      setContainerSize: action,
-      appearance: observable,
-      setAppearance: action,
-      configs: observable.ref,
-      setEnded: action,
-      setAvatar: action,
-      waitingForBgMusic: observable,
-      setWaitingForBgMusic: action
-    });
-    _this.disposers.push(reaction(function () {
-      return [_this.appearance.waveStyle, _this.loading];
-    }, function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        waveStyle = _ref3[0],
-        loading = _ref3[1];
-      if (loading === null) {
-        _this.waveAppearance = null;
-        return;
-      }
-      if (waveStyle === 'wave') {
-        switch (loading) {
-          case true:
-            _this.waveAppearance = 'double';
-            break;
-          case false:
-            _this.waveAppearance = 'solid';
-            break;
-        }
-      } else if (waveStyle === 'solid') {
-        switch (loading) {
-          case true:
-            _this.waveAppearance = 'swap';
-            break;
-          case false:
-            _this.waveAppearance = 'expand';
-            break;
-        }
-      }
-    }, {
-      fireImmediately: true
-    }));
-    if (!_this.appSize) {
-      _this.disposers.push(reaction(function () {
-        return _this.containerSize;
-      }, function (containerSize) {
-        if (!(containerSize !== null && containerSize !== void 0 && containerSize.width)) return;
-        var width = containerSize.width;
-        var height = containerSize.height;
-        var size = function () {
-          if (width <= 500) return 'S';
-          if (width <= 1024) return 'M';
-          if (width <= 2048) return 'L';
-          return 'XL';
-        }();
-        var orientation = function () {
-          if (height > width) return 'portrait';
-          return 'landscape';
-        }();
-        setElementDataset(_this.container, {
-          size: size
-        });
-        setElementDataset(_this.container, {
-          orientation: orientation
-        });
-      }, {
-        fireImmediately: true
-      }));
-    } else {
-      setElementDataset(_this.container, {
-        size: _this.appSize
-      });
-    }
-
-    // 监听播放情况：抛出触发时机
-    _this.disposers.push(reaction(function () {
-      return _this.ended;
-    }, function (ended) {
-      if (ended) {
-        _this.emit('paused', true);
-      }
-    }));
-    _this.disposers.push(reaction(function () {
-      return _this.playing;
-    }, function (playing) {
-      if (!_this.ended) {
-        _this.emit(playing ? 'playing' : 'paused');
-      }
-    }));
-    return _this;
-  }
-
-  /**
-   * 获取播放器是否准备就绪
-   * @returns 是否有可用的视频代理场景
-   */
-  _inherits(Controller, _Subscribe);
-  return _createClass(Controller, [{
-    key: "agentType",
-    get:
-    /**
-     * 获取当前播放媒体的类型
-     * @returns 'video' | 'avatar' | 'none' - 媒体类型
-     */
-    function get() {
-      var _this$videoAgentScene2, _this$avatar;
-      var type = getMediaType((_this$videoAgentScene2 = this.videoAgentScene) === null || _this$videoAgentScene2 === void 0 ? void 0 : _this$videoAgentScene2.videoAgentMesh.videoUrl);
-      if ((_this$avatar = this.avatar) !== null && _this$avatar !== void 0 && _this$avatar.force) return 'avatar';
-      if (type === 'video') return 'video';
-      return 'none';
-    }
-  }, {
-    key: "openPopUp",
-    value:
-    /**
-     * 打开或关闭弹窗
-     * @param popUp - 弹窗内容，可以是字符串、JSX元素或false（关闭弹窗）
-     */
-    function openPopUp(popUp) {
-      if (!popUp) {
-        this.popUp = null;
-        return;
-      }
-      this.popUp = popUp;
-    }
-
-    /**
-     * 设置加载状态
-     * @param loading - 加载状态：true（加载中）、false（加载完成）、null（加载失败）
-     */
-  }, {
-    key: "setLoading",
-    value: function setLoading(loading) {
-      this.loading = loading;
-    }
-  }, {
-    key: "setAvatar",
-    value:
-    /**
-     * 设置虚拟形象配置
-     * @param avatar - 虚拟形象配置对象
-     */
-    function setAvatar(avatar) {
-      this.avatar = avatar;
-    }
-
-    /**
-     * 设置容器尺寸
-     * @param width - 容器宽度
-     * @param height - 容器高度
-     */
-  }, {
-    key: "setContainerSize",
-    value: function setContainerSize(width, height) {
-      this.containerSize = {
-        width: width,
-        height: height
-      };
-    }
-
-    /**
-     * 设置播放器可见性
-     * @param v - 是否可见
-     */
-  }, {
-    key: "setVisible",
-    value: function setVisible(v) {
-      this.visible = v;
-    }
-
-    /**
-     * 设置播放状态
-     * @param playing - 是否正在播放
-     */
-  }, {
-    key: "setPlaying",
-    value: function setPlaying(playing) {
-      if (playing && !this.playback.active) return;
-      this.playing = playing;
-      if (playing) this.resumeMedia();
-    }
-
-    /**
-     * 设置结束状态
-     * @param ended - 是否已结束
-     */
-  }, {
-    key: "setEnded",
-    value: function setEnded(ended) {
-      this.ended = ended;
-    }
-
-    /**
-     * 设置是否正在等待背景音乐加载
-     * @param waiting - 是否正在等待
-     */
-  }, {
-    key: "setWaitingForBgMusic",
-    value: function setWaitingForBgMusic(waiting) {
-      this.waitingForBgMusic = waiting;
-    }
-
-    /**
-     * 设置播放器外观
-     * @param appearance - 外观配置对象
-     */
-  }, {
-    key: "setAppearance",
-    value: function setAppearance(appearance) {
-      this.appearance = _objectSpread(_objectSpread({}, this.appearance), appearance);
-    }
-
-    /**
-     * 打开或关闭抽屉
-     * @param drawerConfig - 抽屉配置对象，false表示关闭抽屉
-     */
-  }, {
-    key: "openDrawer",
-    value: function openDrawer(drawerConfig) {
-      if (!drawerConfig) {
-        var _this$drawerConfig;
-        this.drawerConfig = {
-          content: '',
-          height: (_this$drawerConfig = this.drawerConfig) === null || _this$drawerConfig === void 0 ? void 0 : _this$drawerConfig.height
-        };
-        return;
-      }
-      this.drawerConfig = drawerConfig;
-    }
-  }, {
-    key: "ready",
-    get: function get() {
-      return !!this.videoAgentScene;
-    }
-
-    /**
-     * 获取当前播放时间（毫秒）
-     * @returns 当前播放时间戳
-     */
-  }, {
-    key: "currentTime",
-    get: function get() {
-      var _this$videoAgentScene3;
-      return ((_this$videoAgentScene3 = this.videoAgentScene) === null || _this$videoAgentScene3 === void 0 ? void 0 : _this$videoAgentScene3.videoAgentMesh.currentTime) || 0;
-    }
-
-    /**
-     * 获取当前时间点应该触发的关键帧
-     * @returns 当前应该执行的关键帧数组
-     */
-  }, {
-    key: "currentKeyframes",
-    get: function get() {
-      var _this2 = this;
-      if (!this.vreoUnit) return [];
-      var keyframes = this.vreoUnit.keyframes;
-      // 没有被解析过且开始时间低于当前时间戳 100ms
-      return keyframes.filter(function (keyframe) {
-        if (keyframe.parsed) return false;
-        // 检测结束时间
-        if (keyframe.end < _this2.currentTime) return false;
-        // 检测开始时间
-        if (keyframe.start > _this2.currentTime) return false;
-        if (keyframe.type === VreoKeyframeEnum.BgMusic) return true;
-        // 开始时间低于当前时间戳 100ms
-        var dur = _this2.currentTime - keyframe.start;
-        return dur <= 100 && dur >= 0;
-      });
-    }
-
-    /**
-     * 获取当前媒体实例（音频或视频元素）
-     * @returns HTML媒体元素实例
-     */
-  }, {
-    key: "mediaInstance",
-    get: function get() {
-      var _this$videoAgentScene4;
-      return (_this$videoAgentScene4 = this.videoAgentScene) === null || _this$videoAgentScene4 === void 0 ? void 0 : _this$videoAgentScene4.videoAgentMesh.mediaInstance;
-    }
-
-    /**
-     * 逐帧任务循环处理
-     * 
-     * 在每个动画帧中检查播放状态、处理关键帧触发等
-     * @param callback - 关键帧触发时的回调函数
-     */
-  }, {
-    key: "requestAnimationFrameLoop",
-    value: function requestAnimationFrameLoop(callback) {
-      var _this$mediaInstance2,
-        _this3 = this;
-      // 如果正在等待背景音乐加载，暂停整个播放流程
-      if (this.waitingForBgMusic) {
-        var _this$mediaInstance;
-        if (!((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.paused)) {
-          var _this$videoAgentScene5;
-          (_this$videoAgentScene5 = this.videoAgentScene) === null || _this$videoAgentScene5 === void 0 || (_this$videoAgentScene5 = _this$videoAgentScene5.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene5 === void 0 || _this$videoAgentScene5.pause();
-        }
-        return;
-      }
-      if ((_this$mediaInstance2 = this.mediaInstance) !== null && _this$mediaInstance2 !== void 0 && _this$mediaInstance2.ended && this.mediaInstance.currentTime !== 0) {
-        var _this$vreoUnit, _this$videoAgentScene6;
-        if (this.ended) return;
-        (_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 || _this$vreoUnit.keyframes.forEach(function (keyframe) {
-          return keyframe.parsed = false;
-        });
-        var media = (_this$videoAgentScene6 = this.videoAgentScene) === null || _this$videoAgentScene6 === void 0 ? void 0 : _this$videoAgentScene6.videoAgentMesh.mediaOperations;
-        media === null || media === void 0 || media.pause();
-        if (media) media.currentTime = 0;
-        this.playback.finish();
-        this.setEnded(true);
-        this.setPlaying(false);
-        return;
-      }
-      if (!this.playing) {
-        var _this$mediaInstance3;
-        if (!((_this$mediaInstance3 = this.mediaInstance) !== null && _this$mediaInstance3 !== void 0 && _this$mediaInstance3.paused)) {
-          var _this$videoAgentScene7;
-          (_this$videoAgentScene7 = this.videoAgentScene) === null || _this$videoAgentScene7 === void 0 || (_this$videoAgentScene7 = _this$videoAgentScene7.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene7 === void 0 || _this$videoAgentScene7.pause();
-        }
-        return;
-      }
-      this.resumeMedia();
-      var currentKeyframes = this.currentKeyframes;
-      var run = this.playback.capture();
-      currentKeyframes.forEach(function (keyframe) {
-        if (!(run !== null && run !== void 0 && run.valid()) || keyframe.parsed) return;
-        keyframe.parsed = true;
-        _this3.emit(keyframe.type, keyframe, _this3.currentTime);
-        if (callback && run.valid()) {
-          callback(keyframe.type, keyframe, _this3.currentTime);
-        }
-      });
-    }
-  }, {
-    key: "resumeMedia",
-    value: function resumeMedia() {
-      var _this$mediaInstance4,
-        _this4 = this;
-      if (this.waitingForBgMusic) return;
-      if ((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused && this.playing && !this.resuming) {
-        var _this$videoAgentScene8;
-        var attempt = ++this.resumeGeneration;
-        this.resuming = attempt;
-        var run = this.playback.capture();
-        var valid = function valid() {
-          return !!(run !== null && run !== void 0 && run.valid());
-        };
-        void ((_this$videoAgentScene8 = this.videoAgentScene) === null || _this$videoAgentScene8 === void 0 ? void 0 : _this$videoAgentScene8.videoAgentMesh.play().catch(function (error) {
-          if (valid()) {
-            _this4.playback.cancel();
-            console.error(error);
-          }
-        }).finally(function () {
-          if (_this4.resuming === attempt) _this4.resuming = undefined;
-        }));
-      }
-    }
-
-    /**
-     * 开始运行播放器逻辑循环
-     * 
-     * 启动帧循环，持续监听并处理关键帧事件
-     * @param callback - 关键帧触发时的回调函数
-     */
-  }, {
-    key: "run",
-    value: function run(callback) {
-      var _this5 = this;
-      if (this.stopInterval) return;
-      this.stopInterval = requestAnimationFrameInterval(function () {
-        return _this5.requestAnimationFrameLoop(callback);
-      });
-    }
-
-    /**
-     * 清理播放器状态
-     * 
-     * 停止播放、重置关键帧状态、清理数据和定时器
-     */
-  }, {
-    key: "clear",
-    value: function clear() {
-      var _this$vreoUnit2, _this$stopInterval;
-      this.setPlaying(false);
-      (_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 || _this$vreoUnit2.keyframes.forEach(function (keyframe) {
-        return keyframe.parsed = false;
-      });
-
-      /**
-       * 清理掉数据
-       */
-      this.vreoUnit = undefined;
-      if (this.mediaInstance) {
-        var _this$videoAgentScene9, _this$videoAgentScene0;
-        (_this$videoAgentScene9 = this.videoAgentScene) === null || _this$videoAgentScene9 === void 0 || (_this$videoAgentScene9 = _this$videoAgentScene9.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene9 === void 0 || _this$videoAgentScene9.pause();
-        if ((_this$videoAgentScene0 = this.videoAgentScene) !== null && _this$videoAgentScene0 !== void 0 && _this$videoAgentScene0.videoAgentMesh.mediaOperations) this.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = 0;
-      }
-      (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 || _this$stopInterval.call(this);
-      this.stopInterval = undefined;
-    }
-
-    /**
-     * 销毁控制器实例
-     * 
-     * 清理所有状态和资源，释放内存
-     */
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      this.disposers.splice(0).forEach(function (dispose) {
-        return dispose();
-      });
-      this.playback.dispose();
-      this.clear();
-    }
-  }]);
-}(Subscribe);
-var ControllerContext = /*#__PURE__*/React.createContext(null);
-export { ControllerContext };

package/lib/Player/PlaybackLifecycle.js

@@ -1,117 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/** Local timeline lifetime only. Playback permission is owned by the injected manager. */
-export var PlaybackLifecycle = /*#__PURE__*/function () {
-  function PlaybackLifecycle(manager, onStop) {
-    var _this = this;
-    _classCallCheck(this, PlaybackLifecycle);
-    _defineProperty(this, "generation", 0);
-    _defineProperty(this, "disposed", false);
-    _defineProperty(this, "members", new Set());
-    this.onStop = onStop;
-    this.controller = manager === null || manager === void 0 ? void 0 : manager.createController({
-      label: 'vreo',
-      onCancel: function onCancel() {
-        return _this.stop();
-      }
-    });
-  }
-  return _createClass(PlaybackLifecycle, [{
-    key: "active",
-    get: function get() {
-      var _this$run;
-      return !!((_this$run = this.run) !== null && _this$run !== void 0 && _this$run.valid());
-    }
-  }, {
-    key: "capture",
-    value: function capture() {
-      return this.run;
-    }
-  }, {
-    key: "begin",
-    value: function begin(userAction) {
-      var _this$controller$begi,
-        _this$controller,
-        _this2 = this;
-      if (this.disposed) return false;
-      if (this.active) return true;
-      var session = (_this$controller$begi = (_this$controller = this.controller) === null || _this$controller === void 0 ? void 0 : _this$controller.begin({
-        userAction: userAction,
-        audible: true
-      })) !== null && _this$controller$begi !== void 0 ? _this$controller$begi : undefined;
-      if (this.controller && !session) return false;
-      var generation = ++this.generation;
-      var mediaManager = session === null || session === void 0 ? void 0 : session.mediaManager;
-      this.run = {
-        session: session,
-        mediaManager: mediaManager,
-        valid: function valid() {
-          return generation === _this2.generation && !_this2.disposed && !(session !== null && session !== void 0 && session.signal.aborted);
-        },
-        bind: function bind(element) {
-          return session ? session.bind(element) : element;
-        }
-      };
-      return true;
-    }
-  }, {
-    key: "add",
-    value: function add(stop) {
-      var _this3 = this;
-      this.members.add(stop);
-      return function () {
-        _this3.members.delete(stop);
-      };
-    }
-  }, {
-    key: "stop",
-    value: function stop() {
-      ++this.generation;
-      this.run = undefined;
-      var errors = [];
-      try {
-        this.onStop();
-      } catch (error) {
-        errors.push(error);
-      }
-      for (var _i = 0, _arr = _toConsumableArray(this.members); _i < _arr.length; _i++) {
-        var _stop = _arr[_i];
-        try {
-          _stop();
-        } catch (error) {
-          errors.push(error);
-        }
-      }
-      if (errors.length) throw errors[0];
-    }
-  }, {
-    key: "cancel",
-    value: function cancel() {
-      var _this$controller2;
-      var generation = this.generation;
-      (_this$controller2 = this.controller) === null || _this$controller2 === void 0 || _this$controller2.cancel();
-      if (generation === this.generation) this.stop();
-    }
-  }, {
-    key: "finish",
-    value: function finish() {
-      var _this$run2;
-      var session = (_this$run2 = this.run) === null || _this$run2 === void 0 ? void 0 : _this$run2.session;
-      this.stop();
-      session === null || session === void 0 || session.finish();
-    }
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      var _this$controller3;
-      if (this.disposed) return;
-      this.disposed = true;
-      var generation = this.generation;
-      (_this$controller3 = this.controller) === null || _this$controller3 === void 0 || _this$controller3.dispose();
-      if (generation === this.generation) this.stop();
-      this.members.clear();
-    }
-  }]);
-}();