@realsee/vreo 0.1.3 → 0.1.4

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,56 +56,61 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   }
 
   async load(vreoUnit: VreoUnit, currentTime = 0) {
-    if (!controller.visible) {
-      controller.setVisible(true)
+    if (!this.controller.visible) {
+      this.controller.setVisible(true)
       await new Promise((resolve) => {
         setTimeout(() => resolve(true), 500)
       })
     }
 
-    if (controller.stopInterval) {
-      controller.stopInterval()
-      controller.stopInterval = undefined
+    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
@@ -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

@@ -37,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/react/index.tsx

@@ -7,13 +7,16 @@ const VreoContext = React.createContext<Player | null>(null)
 
 export const VreoProvider: React.FC = (props) => {
   const five = unsafe__useFiveInstance()
+
   const [player, setPlayer] = React.useState<Player | null>(null)
+  const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    setPlayer(new Player(five))
+    playerRef.current = new Player(five)
+    setPlayer(playerRef.current)
 
     return () => {
-      player?.dispose()
+      playerRef.current?.dispose()
     }
   }, [])