@realsee/vreo 0.1.1 → 0.1.5

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -47,6 +47,8 @@ var fragmentShaderTpl = function fragmentShaderTpl() {
   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";
 };
 
+var cacheInstance = {};
+
 /**
  * 视频经纪人MESH
  */
@@ -71,13 +73,18 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _classCallCheck(this, VideoAgentMesh);
 
     if (!options.videoInstance) {
-      var videoInstance = document.createElement('video');
-      videoInstance.style.opacity = '0';
-      videoInstance.style.display = 'none';
-      document.body.append(videoInstance);
-      options.videoInstance = videoInstance;
-      videoInstance.playsInline = true;
-      videoInstance.controls = false;
+      if (cacheInstance.videoInstance) {
+        options.videoInstance = cacheInstance.videoInstance;
+      } else {
+        var videoInstance = document.createElement('video');
+        videoInstance.style.opacity = '0';
+        videoInstance.style.display = 'none';
+        document.body.append(videoInstance);
+        options.videoInstance = videoInstance;
+        cacheInstance.videoInstance = videoInstance;
+        videoInstance.playsInline = true;
+        videoInstance.controls = false;
+      }
     }
 
     var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
@@ -100,16 +107,21 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _this.freeze = false;
     _this.paused = true;
     {
-      var audioInstance = document.createElement('audio');
-      audioInstance.crossOrigin = ''; // videoInstance.muted = true
-
-      audioInstance.muted = false;
-      audioInstance.setAttribute('playsinline', 'true');
-      audioInstance.setAttribute('webkit-playsinline', 'true');
-      audioInstance.setAttribute('autoplay', 'false');
-      audioInstance.setAttribute('style', 'display: none;');
-      document.body.appendChild(audioInstance);
-      _this.audioInstance = audioInstance;
+      if (cacheInstance.audioInstance) {
+        _this.audioInstance = cacheInstance.audioInstance;
+      } else {
+        var audioInstance = document.createElement('audio');
+        audioInstance.crossOrigin = ''; // videoInstance.muted = true
+
+        audioInstance.muted = false;
+        audioInstance.setAttribute('playsinline', 'true');
+        audioInstance.setAttribute('webkit-playsinline', 'true');
+        audioInstance.setAttribute('autoplay', 'false');
+        audioInstance.setAttribute('style', 'display: none;');
+        document.body.appendChild(audioInstance);
+        _this.audioInstance = audioInstance;
+        cacheInstance.audioInstance = audioInstance;
+      }
     }
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
@@ -121,13 +133,23 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       });
     };
 
-    _this.videoInstance.addEventListener('pause', function () {
+    var onPause = function onPause() {
       return updatePaused(true);
-    });
+    };
 
-    _this.videoInstance.addEventListener('play', function () {
+    var onPlay = function onPlay() {
       return updatePaused(false);
-    });
+    };
+
+    _this.videoInstance.addEventListener('pause', onPause);
+
+    _this.videoInstance.addEventListener('play', onPlay);
+
+    _this.$removeEventListener = function () {
+      _this.videoInstance.removeEventListener('pause', onPause);
+
+      _this.videoInstance.removeEventListener('play', onPlay);
+    };
 
     return _this;
   }
@@ -186,10 +208,12 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 this.videoInstance.setAttribute('data-src', this.videoUrl);
 
                 onStart = function onStart() {
+                  var _this2$videoUrl;
+
                   if (_this2.videoInstance.currentTime === 0) return;
                   _this2.freeze = false;
                   _this2.videoInstance.muted = false;
-                  uniforms.enable.value = 1;
+                  uniforms.enable.value = (_this2$videoUrl = _this2.videoUrl) !== null && _this2$videoUrl !== void 0 && _this2$videoUrl.endsWith('.mp4') ? 1 : 0;
 
                   _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
                 };
@@ -316,6 +340,22 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     get: function get() {
       return this.videoInstance.currentTime * 1000;
     }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      // 销毁事件监听
+      this.$removeEventListener();
+
+      if (cacheInstance.audioInstance) {
+        document.body.removeChild(cacheInstance.audioInstance);
+        cacheInstance.audioInstance = undefined;
+      }
+
+      if (cacheInstance.videoInstance) {
+        document.body.removeChild(cacheInstance.videoInstance);
+        cacheInstance.videoInstance = undefined;
+      }
+    }
   }]);
 
   return VideoAgentMesh;

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -5,6 +5,8 @@ export declare class VideoAgentScene {
     scene: THREE.Scene;
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
+    container: HTMLElement;
     constructor(container: HTMLElement, needRender?: boolean);
     run: () => void;
+    dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -43,6 +43,13 @@ var VideoAgentScene = function VideoAgentScene(container) {
     requestAnimationFrame(_this.run);
   });
 
+  _defineProperty(this, "dispose", function () {
+    var _this$videoAgentMesh;
+
+    (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
+  });
+
+  this.container = container;
   this.camera.position.set(0, 0, 10);
   this.camera.lookAt(0, 0, 0);
   var state = {

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

@@ -30,6 +30,12 @@ function VideoAgent(props) {
 
     var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current);
     controller.videoAgentScene = videoAgentScene;
+    return function () {
+      var _controller$videoAgen;
+
+      controller.dispose();
+      (_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.dispose();
+    };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "VideoAgent",

package/lib/Player/modules/keyframes/Prompter/index.js

@@ -84,7 +84,8 @@ function Prompter() {
   }, [controller]);
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames["default"])('vreo-prompter', {
-      'vreo-prompter--hidden': hidden
+      'vreo-prompter--hidden': hidden,
+      'vreo-prompter--audio': controller.isAudio
     })
   }, text ?
   /*#__PURE__*/

package/lib/react/index.js

@@ -36,7 +36,23 @@ var VreoContext = /*#__PURE__*/React.createContext(null);
 
 var VreoProvider = function VreoProvider(props) {
   var five = (0, _react.unsafe__useFiveInstance)();
-  var player = new _Player.Player(five);
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      player = _React$useState2[0],
+      setPlayer = _React$useState2[1];
+
+  var playerRef = React.useRef(null);
+  React.useEffect(function () {
+    playerRef.current = new _Player.Player(five);
+    setPlayer(playerRef.current);
+    return function () {
+      var _playerRef$current;
+
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.dispose();
+    };
+  }, []);
+  if (!player) return /*#__PURE__*/React.createElement(React.Fragment, null);
   return /*#__PURE__*/React.createElement(VreoContext.Provider, {
     value: player
   }, props.children);
@@ -96,19 +112,23 @@ function useVreoEventCallback(name, callback, deps) {
     dependencyList = dependencyList.concat(deps);
   }
 
-  React.useLayoutEffect(function () {
+  React.useEffect(function () {
     // @ts-ignore
-    return player.on(name, callback);
+    player.on(name, callback);
+    return function () {
+      // @ts-ignore
+      player.off(name, callback);
+    };
   }, dependencyList);
 }
 
 function useVreoPausedState() {
   var player = useVreoInstance();
 
-  var _React$useState = React.useState(player.paused),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      state = _React$useState2[0],
-      setState = _React$useState2[1];
+  var _React$useState3 = React.useState(player.paused),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      state = _React$useState4[0],
+      setState = _React$useState4[1];
 
   useVreoEventCallback('paused', function () {
     return setState(true);

package/lib/typings/VreoUnit.d.ts

@@ -38,7 +38,11 @@ export declare enum VreoKeyframeEnum {
     /**
      * 结束
      */
-    Exit = "Exit"
+    Exit = "Exit",
+    /**
+     * 自定义剧本帧
+     */
+    Custom = "Custom"
 }
 /**
  * 支持自定义剧本关键帧配置项
@@ -202,3 +206,5 @@ export declare type VideoEffectData = {
     direction?: Vertex;
     vector?: Pick<Pose, 'longitude' | 'latitude'>;
 };
+/** 自定义序列帧 */
+export declare type CustomData = Record<string, any>;

package/lib/typings/VreoUnit.js

@@ -22,6 +22,7 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["InfoPanel"] = "InfoPanel";
   VreoKeyframeEnum["VideoEffect"] = "VideoEffect";
   VreoKeyframeEnum["Exit"] = "Exit";
+  VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));
 
 /**

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
+  "keywords": [
+    "realsee",
+    "vreo"
+  ],
   "main": "lib/index.js",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
   "license": "MIT",
@@ -31,7 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/five": "^5.0.0-alpha.57",
+    "@realsee/five": "^5.0.0-alpha.80",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",

package/resources/Player/App.tsx

@@ -24,6 +24,9 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
       <div className="vreo-panel-inner">
         <VideoAgent
           onClick={() => {
+            if (controller.isAudio) {
+              return
+            }
             if (controller.playing) {
               controller.setPlaying(false)
             } else {

package/resources/Player/Controller.ts

@@ -1,5 +1,5 @@
 import { Five, Subscribe } from '@realsee/five'
-import { action, makeObservable, observable, reaction } from 'mobx'
+import { action, computed, makeObservable, observable, reaction } from 'mobx'
 import * as React from 'react'
 import { requestAnimationFrameInterval } from '../shared-utils/animationFrame'
 import { VreoKeyframe, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
@@ -20,6 +20,10 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
 
   visible = false
 
+  get isAudio() {
+    return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
+  }
+
   drawerConfig: {
     content: string | JSX.Element
     height?: number | string
@@ -55,7 +59,6 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       setPlaying: action,
       drawerConfig: observable.ref,
       openDrawer: action,
-
     })
 
     // 监听播放情况：抛出触发时机
@@ -149,6 +152,3 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
 }
 
 export const ControllerContext = React.createContext<Controller | null>(null)
-
-
-

package/resources/Player/index.tsx

@@ -9,18 +9,19 @@ import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
 
-const controller = new Controller()
-
 export class Player extends Subscribe<VreoKeyframeEvent> {
   $five: Five
+  private controller: Controller
   configs: Readonly<PlayerConfigs>
 
   constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
     super()
-    this.$five = controller.$five = five
+    this.controller = new Controller()
+    this.$five = this.controller.$five = five
 
     if (!configs.containter) {
-      const containter = document.createElement('div')
+      const containter = document.querySelector('#vreo-app') || document.createElement('div')
+      ReactDOM.unmountComponentAtNode(containter)
       containter.setAttribute('id', 'vreo-app')
       configs.containter = containter
       document.body.append(containter)
@@ -35,10 +36,10 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       )
     )
 
-    controller.configs = this.configs
+    this.controller.configs = this.configs
 
     ReactDOM.render(
-      <ControllerContext.Provider value={controller}>
+      <ControllerContext.Provider value={this.controller}>
         <App></App>
         <Drawer />
       </ControllerContext.Provider>,
@@ -47,7 +48,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
 
     // 监听播放情况：抛出触发时机
     reaction(
-      () => controller.playing,
+      () => this.controller.playing,
       (playing) => {
         this.emit(playing ? 'playing' : 'paused')
       }
@@ -55,49 +56,61 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   }
 
   async load(vreoUnit: VreoUnit, currentTime = 0) {
-    if (controller.stopInterval) {
-      controller.stopInterval()
-      controller.stopInterval = undefined
+    if (!this.controller.visible) {
+      this.controller.setVisible(true)
+      await new Promise((resolve) => {
+        setTimeout(() => resolve(true), 500)
+      })
+    }
+
+    if (this.controller.stopInterval) {
+      this.controller.stopInterval()
+      this.controller.stopInterval = undefined
     }
 
-    controller.vreoUnit = vreoUnit
-    controller.videoInstance?.pause()
+    this.controller.vreoUnit = vreoUnit
+    this.controller.videoInstance?.pause()
 
     if (vreoUnit.video.url) {
-      if (controller.videoAgentScene?.videoAgentMesh.videoInstance) {
-        controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
+      if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+        this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
       }
-      await controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
+      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
       this.play()
     }
-    controller.run((type, keyframe) => this.emit(type, keyframe))
+    this.controller.run((type, keyframe) => this.emit(type, keyframe))
     return true
   }
 
   get paused() {
-    return !controller.playing
+    return !this.controller.playing
   }
 
   play() {
-    if (controller.playing) return true
-    controller.setPlaying(true)
+    if (this.controller.playing) return true
+    this.controller.setPlaying(true)
     return true
   }
 
   pause() {
-    controller.setPlaying(false)
+    this.controller.setPlaying(false)
   }
 
   show() {
-    controller.setVisible(true)
+    this.controller.setVisible(true)
   }
 
   hide() {
-    controller.setVisible(false)
+    this.controller.setVisible(false)
   }
 
   dispose() {
-    controller.dispose()
+    this.pause()
+    this.controller.dispose()
+
+    if (this.configs.containter) {
+      ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+    }
   }
 }
 

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -57,6 +57,11 @@ void main(void) {
 }
 `
 
+const cacheInstance: {
+  videoInstance?: HTMLVideoElement
+  audioInstance?: HTMLAudioElement
+} = {}
+
 export interface VideoAgentMeshOptions {
   videoInstance?: HTMLVideoElement
 }
@@ -70,6 +75,7 @@ export class VideoAgentMesh extends THREE.Mesh {
   freeze: boolean
   paused: boolean
   audioInstance: HTMLAudioElement
+  $removeEventListener: () => void
 
   get videoInstance(): HTMLAudioElement {
     if (this.videoUrl?.endsWith('mp3')) {
@@ -96,13 +102,19 @@ export class VideoAgentMesh extends THREE.Mesh {
     options: VideoAgentMeshOptions = {},
   ) {
     if (!options.videoInstance) {
-      const videoInstance = document.createElement('video')
-      videoInstance.style.opacity = '0'
-      videoInstance.style.display = 'none'
-      document.body.append(videoInstance)
-      options.videoInstance = videoInstance
-      videoInstance.playsInline = true
-      videoInstance.controls = false
+      if (cacheInstance.videoInstance) {
+        options.videoInstance = cacheInstance.videoInstance
+      } else {
+        const videoInstance = document.createElement('video')
+        videoInstance.style.opacity = '0'
+        videoInstance.style.display = 'none'
+        document.body.append(videoInstance)
+        options.videoInstance = videoInstance
+        cacheInstance.videoInstance = videoInstance
+        videoInstance.playsInline = true
+        videoInstance.controls = false
+      }
+
     }
 
     const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
@@ -123,24 +135,41 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.paused = true
 
     {
-      const audioInstance = document.createElement('audio')
-      audioInstance.crossOrigin = ''
-      // videoInstance.muted = true
-      audioInstance.muted = false
-      audioInstance.setAttribute('playsinline', 'true')
-      audioInstance.setAttribute('webkit-playsinline', 'true')
-      audioInstance.setAttribute('autoplay', 'false')
-      audioInstance.setAttribute('style', 'display: none;')
-      document.body.appendChild(audioInstance)
-      this.audioInstance = audioInstance
+      if (cacheInstance.audioInstance) {
+        this.audioInstance = cacheInstance.audioInstance
+
+      } else {
+        const audioInstance = document.createElement('audio')
+        audioInstance.crossOrigin = ''
+        // videoInstance.muted = true
+        audioInstance.muted = false
+        audioInstance.setAttribute('playsinline', 'true')
+        audioInstance.setAttribute('webkit-playsinline', 'true')
+        audioInstance.setAttribute('autoplay', 'false')
+        audioInstance.setAttribute('style', 'display: none;')
+        document.body.appendChild(audioInstance)
+        this.audioInstance = audioInstance
+        cacheInstance.audioInstance = audioInstance
+      }
+
     }
+
     makeObservable(this, { paused: observable })
 
     const updatePaused = (paused: boolean) => runInAction(() => (this.paused = paused))
-    this.videoInstance.addEventListener('pause', () => updatePaused(true))
-    this.videoInstance.addEventListener('play', () => updatePaused(false))
+    const onPause = () => updatePaused(true)
+    const onPlay = () => updatePaused(false)
+
+    this.videoInstance.addEventListener('pause', onPause)
+    this.videoInstance.addEventListener('play', onPlay)
+
+    this.$removeEventListener = () => {
+      this.videoInstance.removeEventListener('pause', onPause)
+      this.videoInstance.removeEventListener('play', onPlay)
+    }
   }
 
+
   private async update(videoUrl: string) {
     if (this.videoUrl === videoUrl) {
       return
@@ -159,7 +188,7 @@ export class VideoAgentMesh extends THREE.Mesh {
       if (this.videoInstance.currentTime === 0) return
       this.freeze = false
       this.videoInstance.muted = false
-      uniforms.enable.value = 1
+      uniforms.enable.value = this.videoUrl?.endsWith('.mp4') ? 1 : 0
       this.videoInstance.removeEventListener('timeupdate', onStart, false)
     }
 
@@ -199,4 +228,18 @@ export class VideoAgentMesh extends THREE.Mesh {
   get currentTime() {
     return this.videoInstance.currentTime * 1000
   }
+
+  dispose() {
+    // 销毁事件监听
+    this.$removeEventListener()
+    if (cacheInstance.audioInstance) {
+      document.body.removeChild(cacheInstance.audioInstance)
+      cacheInstance.audioInstance = undefined
+    }
+
+    if (cacheInstance.videoInstance) {
+      document.body.removeChild(cacheInstance.videoInstance)
+      cacheInstance.videoInstance = undefined
+    }
+  }
 }

package/resources/Player/modules/VideoAgent/VideoAgentScene.ts

@@ -7,8 +7,10 @@ export class VideoAgentScene {
   scene = new THREE.Scene()
   camera = new THREE.OrthographicCamera(-240, 240, 135, -135)
   renderer = new THREE.WebGLRenderer({ alpha: true })
+  container: HTMLElement
 
   constructor(container: HTMLElement, needRender = true) {
+    this.container = container
     this.camera.position.set(0, 0, 10)
     this.camera.lookAt(0, 0, 0)
     const state = {
@@ -35,4 +37,8 @@ export class VideoAgentScene {
     }
     requestAnimationFrame(this.run)
   }
+
+  dispose = () => {
+    this.videoAgentMesh?.dispose()
+  }
 }

package/resources/Player/modules/VideoAgent/index.tsx

@@ -14,6 +14,11 @@ export function VideoAgent(props: { onClick?: () => void }) {
     }
     const videoAgentScene = new VideoAgentScene(ref.current)
     controller.videoAgentScene = videoAgentScene
+
+    return () => {
+      controller.dispose()
+      controller.videoAgentScene?.dispose()
+    }
   }, [])
 
   return (

package/resources/Player/modules/keyframes/Prompter/index.tsx

@@ -45,6 +45,7 @@ export function Prompter() {
     <div
       className={classNames('vreo-prompter', {
         'vreo-prompter--hidden': hidden,
+        'vreo-prompter--audio': controller.isAudio,
       })}
     >
       {text ? (

package/resources/react/index.tsx

@@ -8,7 +8,20 @@ const VreoContext = React.createContext<Player | null>(null)
 export const VreoProvider: React.FC = (props) => {
   const five = unsafe__useFiveInstance()
 
-  const player = new Player(five)
+  const [player, setPlayer] = React.useState<Player | null>(null)
+  const playerRef = React.useRef<Player | null>(null)
+
+  React.useEffect(() => {
+    playerRef.current = new Player(five)
+    setPlayer(playerRef.current)
+
+    return () => {
+      playerRef.current?.dispose()
+    }
+  }, [])
+
+  if (!player) return <></>
+
   return <VreoContext.Provider value={player}>{props.children}</VreoContext.Provider>
 }
 
@@ -78,9 +91,13 @@ export function useVreoEventCallback<T extends keyof VreoKeyframeEvent>(
   if (deps !== undefined) {
     dependencyList = dependencyList.concat(deps)
   }
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     // @ts-ignore
-    return player.on(name, callback)
+    player.on(name, callback)
+    return () => {
+      // @ts-ignore
+      player.off(name, callback)
+    }
   }, dependencyList)
 }