@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.12

package/lib/shared-utils/createTransMatrix.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTransMatrix = createTransMatrix;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+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; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function createTransMatrix(arr1) {
+  var matrix4 = new THREE.Matrix4();
+  matrix4.fromArray(arr1);
+  return function (arr2) {
+    var vector3 = _construct(THREE.Vector3, _toConsumableArray(arr2));
+
+    vector3.applyMatrix4(matrix4);
+    return vector3.toArray();
+  };
+}

package/lib/typings/VreoUnit.d.ts

@@ -61,7 +61,7 @@ export declare type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-    uuid: string;
+    uuid?: string;
     type: VreoKeyframeEnum;
     start: number;
     end: number;
@@ -95,14 +95,16 @@ export declare type VreoKeyframeEvent = {
     [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
 } & {
     loaded: (vreoUnit: VreoUnit) => void;
-    paused: () => void;
+    paused: (ended?: boolean) => void;
     playing: () => void;
+    unknownKeyframeType: (keyframe: Record<string, any>) => void;
 };
 /**
  * 相机运动
  */
 export declare type CameraMovementData = {
-    effect: CameraMovementEffect;
+    effect?: CameraMovementEffect;
+    transEffect?: "fly" | "fade" | "instant";
     mode: Mode;
     panoIndex: number;
     loop?: boolean;
@@ -145,9 +147,13 @@ export interface Vertex {
     z: number;
 }
 /**
- * 四个顶点元组
+ * 矩形顶点
  */
 export declare type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex];
+/**
+ * 顶点数组
+ */
+export declare type Vertexs = Vertex[];
 /**
  * 视频广告
  */
@@ -163,7 +169,8 @@ export declare type ModelVideoData = {
     /**
      * 视频映射在模型中的顶点
      */
-    vertexs: QuadrangleVertexs;
+    vertexs: QuadrangleVertexs | Vertexs;
+    matrixWorld?: number[];
 };
 /**
  * 全景文本标签
@@ -180,8 +187,22 @@ export declare enum PanoTagEnum {
     Text = "Text",
     Image = "Image"
 }
+/**
+ * 标签样式种类
+ */
+export declare enum PanoTagStyleEnum {
+    /**
+     * 生长动画：默认值
+     */
+    Growth = "Growth",
+    /**
+     * 展开动画
+     */
+    Expand = "Expand"
+}
 export declare type PanoTagData = {
     type: PanoTagEnum;
+    style: PanoTagStyleEnum;
     text: string;
     vertex: Vertex;
     imgUrl?: string;
@@ -209,13 +230,18 @@ export declare enum InfoPanelTypeEnum {
     Image = "Image",
     Video = "Video"
 }
+export declare enum InfoPanelStyleEnum {
+    Drawer = "Drawer",
+    PopUp = "PopUp"
+}
 /**
  * 信息面板
  */
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
+    style?: InfoPanelStyleEnum;
     url: string;
-    tilte?: string;
+    title?: string;
     subTitle?: string;
 };
 /**

package/lib/typings/VreoUnit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagStyleEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
@@ -30,6 +30,10 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
  * 全景标签枚举
  */
 var PanoTagEnum;
+/**
+ * 标签样式种类
+ */
+
 exports.PanoTagEnum = PanoTagEnum;
 
 (function (PanoTagEnum) {
@@ -37,6 +41,14 @@ exports.PanoTagEnum = PanoTagEnum;
   PanoTagEnum["Image"] = "Image";
 })(PanoTagEnum || (exports.PanoTagEnum = PanoTagEnum = {}));
 
+var PanoTagStyleEnum;
+exports.PanoTagStyleEnum = PanoTagStyleEnum;
+
+(function (PanoTagStyleEnum) {
+  PanoTagStyleEnum["Growth"] = "Growth";
+  PanoTagStyleEnum["Expand"] = "Expand";
+})(PanoTagStyleEnum || (exports.PanoTagStyleEnum = PanoTagStyleEnum = {}));
+
 /**
  * 全景特效枚举
  */
@@ -55,13 +67,21 @@ exports.PanoEffectEnum = PanoEffectEnum;
  * 信息面板类型枚举
  */
 var InfoPanelTypeEnum;
-/**
- * 信息面板
- */
-
 exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
 
 (function (InfoPanelTypeEnum) {
   InfoPanelTypeEnum["Image"] = "Image";
   InfoPanelTypeEnum["Video"] = "Video";
-})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+
+var InfoPanelStyleEnum;
+/**
+ * 信息面板
+ */
+
+exports.InfoPanelStyleEnum = InfoPanelStyleEnum;
+
+(function (InfoPanelStyleEnum) {
+  InfoPanelStyleEnum["Drawer"] = "Drawer";
+  InfoPanelStyleEnum["PopUp"] = "PopUp";
+})(InfoPanelStyleEnum || (exports.InfoPanelStyleEnum = InfoPanelStyleEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.12",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -18,7 +18,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite --port=3088",
+    "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "docs": "npx typedoc",
@@ -26,8 +26,8 @@
   },
   "peerDependencies": {
     "@realsee/five": "^5.0.0-alpha.103",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -35,6 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
+    "@realsee/dnalogel": "^0.1.7-alpha.10",
     "@realsee/five": "^5.0.0-alpha.103",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
@@ -53,7 +54,6 @@
     "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
     "mobx": "^6.3.7",
-    "mobx-react": "^7.2.1",
-    "react-transition-group": "^4.4.2"
+    "mobx-react": "^7.2.1"
   }
 }

package/resources/PlayController/createHTMLAudioElement.ts

@@ -0,0 +1,53 @@
+
+const BLANK_AUDIO = ''
++ 'data:audio/mpeg;base64,'
++ '//uQxAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAADAAAGhgBVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVWqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr///////////'
++ '////////////////////////////////8AAAA5TEFNRTMuOThyAc0AAAAAAAAAABSAJAiqQgAAg'
++ 'AAABobxtI73AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//uQxAACFEII9ACZ/sJZwWEoEb8w/////N//////Jcxj'
++ 'Hjf+7/v/H2PzCCFAiDtGeyBCIx7bJJ1mmEEMy6g8mm2c8nrGABB4h2Mkmn//4z/73u773R5qHHu'
++ '/j/w7Kxkzh5lWRWdsifCkNAnY9Zc1HvDAhjhSHdFkHFzLmabt/AQxSg2wwzLhHIJOBnAWwVY4zr'
++ 'hIYhhc2kvhYDfQ4hDi2Gmh5KyFn8EcGIrHAngNgIwVIEMf5bzbAiTRoAD///8z/KVhkkWEle6IX'
++ '+d/z4fvH3BShK1e5kmjkCMoxVmXhd4ROlTKo3iipasvTilY21q19ta30/v/0/idPX1v8PNxJL6r'
++ 'amnOVsdvMv2akO0iSYIzdJFirtzWXCZicS9vHqvSKyqm5XJBdqBwPxyfJdykhWTZ0G0ZyTZGpLK'
++ 'xsNwwoRhsx3tZfhwmeOBVISm3impAC/IT/8hP/EKEM1KMdVdVKM2rHV4x7HVXZvbVVKN/qq8CiV'
++ '9VL9jjH/6l6qf7MBCjZmOqsAibjcP+qqqv0oxqpa/NVW286hPo1nz2L/h8+jXt//uSxCmDU2IK/'
++ 'ECN98KKtE5IYzNoCfbw+u9i5r8PoadUMFPKqWL4LK3T/LCraMSHGkW4bpLXR/E6LlHOVQxmslKV'
++ 'J8IULktMN06N0FKCpHCoYsjC4F+Z0NVqdNFoGSTjSiyjzLdnZ2fNqTi2eHKONONKLMPMKLONKLM'
++ 'PQRJGlFxZRoKcJFAYEeIFiRQkUWUeYfef//Ko04soswso40UJAgMw8wosososy0EalnZyjQUGBR'
++ 'QGIFggOWUacWUeYmuadrZziQKKEgQsQLAhQkUJAgMQDghltLO1onp0cpkNInSFMqlYeSEJ5AHsq'
++ 'FdOwy1DA2sRmRJKxdKRfLhfLw5BzUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVf/7ksRRA8AAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=';
+
+
+export function createHTMLAudioElement(): HTMLAudioElement {
+  const ndAudio = document.querySelector('#vreo-playController-audio')
+  if (ndAudio) {
+    return ndAudio as HTMLAudioElement
+  }
+
+  const audio = document.createElement('audio')
+  audio.style.display = 'none'
+  audio.setAttribute('id', 'vreo-playController-audio')
+  audio.controls = false
+  document.body.appendChild(audio)
+  audio.src = BLANK_AUDIO
+
+  // 触发一次播放
+  Promise.resolve(async () => await audio.play())
+
+  return audio
+}

package/resources/PlayController/index.ts

@@ -0,0 +1,167 @@
+import { Subscribe } from '@realsee/five'
+import { requestAnimationFrameInterval } from '../shared-utils/animationFrame'
+import { VreoKeyframe, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
+import { createHTMLAudioElement } from './createHTMLAudioElement'
+
+export interface PlayControllerConfig {
+  audio?: HTMLAudioElement
+}
+
+const closures: Record<string, any> = {}
+
+export class PlayController extends Subscribe<VreoKeyframeEvent> {
+
+  vreoUnit?: VreoUnit
+
+  config: PlayControllerConfig = {}
+  stopInterval: () => void
+
+  get paused() {
+    return this.audioInstance.paused
+  }
+
+  get audioInstance() {
+    return this.config.audio!
+  }
+
+  get currentTime() {
+    return this.audioInstance.currentTime * 1000
+  }
+
+  get currentKeyframes() {
+    if (!this.vreoUnit) return []
+    const keyframes = this.vreoUnit.keyframes
+    // 没有被解析过且开始时间低于当前时间戳 100ms
+    return keyframes.filter((keyframe: VreoKeyframe) => {
+      if (keyframe.parsed) return false
+      const dur = this.currentTime - keyframe.start
+      return dur <= 100 && dur >= 0
+    })
+  }
+
+  /**
+   * 音频时长 不一定能获取得到，建议以 VreoUnit 配置的时长为准。
+   */
+  get duration() {
+    return this.audioInstance.duration * 1000
+  }
+
+  constructor(config: PlayControllerConfig = {}) {
+    super()
+
+    if (!config.audio) {
+      config.audio = createHTMLAudioElement()
+    }
+
+    this.config = Object.assign(this.config, config)
+
+    closures.onPlaying = () => this.emit('playing')
+    closures.onPaused = () => this.emit('paused')
+    closures.onEnded = () => this.emit('paused', true)
+
+    this.audioInstance.addEventListener('play', closures.onPlaying)
+    this.audioInstance.addEventListener('pause', closures.onPaused)
+    this.audioInstance.addEventListener('ended', closures.onEnded)
+
+    this.stopInterval = requestAnimationFrameInterval(() => {
+      if (this.audioInstance.paused) {
+        return
+      }
+
+      if (!this.vreoUnit) {
+        return
+      }
+
+      const keyframes = this.vreoUnit.keyframes
+      const currentTime = this.currentTime
+      // 没有被解析过且开始时间低于当前时间戳 100ms
+      const currentKeyframes = keyframes.filter((keyframe: VreoKeyframe) => {
+        if (keyframe.parsed) return false
+
+        const dur = currentTime - keyframe.start
+        return dur <= 60 && dur >= 0
+      })
+  
+      currentKeyframes.forEach((keyframe) => {
+        if (keyframe.parsed) return
+        keyframe.parsed = true
+        this.emit(keyframe.type, keyframe)
+      })
+    })
+
+  }
+
+
+
+  /**
+   * 载入数据
+   */
+  async load(vreoUnit: VreoUnit): Promise<boolean> {
+    this.vreoUnit = vreoUnit
+
+    await this.pause()
+    return await new Promise((resolve, reject) => {
+      if (vreoUnit.video.url === this.audioInstance.src) {
+        return resolve(true)
+      }
+
+      this.audioInstance.src = vreoUnit.video.url
+      const canplaythrough = () => {
+        resolve(true)
+        this.audioInstance.removeEventListener('canplaythrough', canplaythrough)
+      }
+      const error = (err: any) => {
+        reject(err)
+        this.audioInstance.removeEventListener('error', error)
+      }
+      this.audioInstance.addEventListener('canplaythrough', canplaythrough)
+      this.audioInstance.addEventListener('error', error)
+    })
+  }
+
+  /**
+   * 播放
+   */
+  async play() {
+    closures.playPromise = this.audioInstance.play()
+  }
+
+  /**
+   * 暂停
+   */
+  async pause() {
+    if (closures.playPromise) {
+      await closures.playPromise
+    }
+    this.audioInstance.pause()
+  }
+
+  /**
+   * 销毁资源
+   * @notice 一旦销毁，创建的实例将不可用：需重新创建实例。
+   * 
+   * @deprecated **慎重执行**
+   */
+  dispose() {
+    // 清理事件监听
+    this.audioInstance.removeEventListener('play', closures.onPlaying)
+    this.audioInstance.removeEventListener('pasue', closures.onPaused)
+    this.audioInstance.removeEventListener('ended', closures.onEnded)
+    if (this.stopInterval) {
+      this.stopInterval()
+    }
+  }
+}
+
+console.log(`
+
+┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
+┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
+┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
+┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
+┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
+┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
+
+`)

package/resources/Player/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react'
 import { Controller } from './Controller'
-import { useController } from './hooks'
+import { useController, useFiveInstance } from './hooks'
 import { CameraMovement } from './modules/keyframes/CameraMovement'
 import { InfoPanel } from './modules/keyframes/InfoPanel'
 import { ModelVideo } from './modules/keyframes/ModelVideo'
@@ -16,6 +16,7 @@ import { VideoAgent } from './modules/VideoAgent'
 import { BgMusic } from './modules/keyframes/BgMusic'
 
 const AppView = observer(({ controller }: { controller: Controller }) => {
+  
   return (
     <div
       className={classNames('vreo-panel', {
@@ -34,6 +35,7 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
               controller.setPlaying(true)
             }
           }}
+          options={controller.configs?.videoAgentMeshOptions || {}}
         />
         <Prompter />
         {controller.configs?.customPanelChildren}

package/resources/Player/Controller.ts

@@ -24,6 +24,16 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
     return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
   }
 
+  popUp: string | JSX.Element | null = null
+
+  openPopUp(popUp: string | JSX.Element | false) {
+    if (!popUp) {
+      this.popUp = null
+      return
+    }
+    this.popUp = popUp
+  }
+
   drawerConfig: {
     content: string | JSX.Element
     height?: number | string
@@ -57,6 +67,8 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       setVisible: action,
       playing: observable,
       setPlaying: action,
+      popUp: observable.ref,
+      openPopUp: action,
       drawerConfig: observable.ref,
       openDrawer: action,
     })