@realsee/vreo 0.2.0-alpha.2 → 0.2.0-alpha.20

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

@@ -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

@@ -11,144 +11,178 @@ import { PlayerConfigs } from './typings'
  */
 export class Controller extends Subscribe<VreoKeyframeEvent> {
 
-  $five?: Five
-  configs?: PlayerConfigs
-  videoAgentScene?: VideoAgentScene
-  vreoUnit?: VreoUnit
-  stopInterval?: () => void
-  playing = false
-
-  visible = false
-
-  get isAudio() {
-    return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
-  }
-
-  drawerConfig: {
-    content: string | JSX.Element
-    height?: number | string
-  } | null = null
-
-  setVisible(v: boolean) {
-    this.visible = v
-  }
-
-  setPlaying(playing: boolean) {
-    this.playing = playing
-  }
-
-  openDrawer(drawerConfig?: false | { content: string | JSX.Element; height?: number | string }) {
-    if (!drawerConfig) {
-      this.drawerConfig = {
-        content: '',
-        height: this.drawerConfig?.height
-      }
-      return
+    $five?: Five
+    configs?: PlayerConfigs
+    videoAgentScene?: VideoAgentScene
+    vreoUnit?: VreoUnit
+    stopInterval?: () => void
+    playing = false
+    ended = false
+
+    visible = false
+
+    get isAudio() {
+        return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
     }
 
-    this.drawerConfig = drawerConfig
-  }
-
-  constructor() {
-    super()
-
-    makeObservable(this, {
-      visible: observable,
-      setVisible: action,
-      playing: observable,
-      setPlaying: action,
-      drawerConfig: observable.ref,
-      openDrawer: action,
-    })
-
-    // 监听播放情况：抛出触发时机
-    reaction(
-      () => this.playing,
-      (playing) => {
-        this.emit(playing ? 'playing' : 'paused')
-      }
-    )
-  }
-
-  get ready() {
-    return !!this.videoAgentScene
-  }
-
-  get currentTime() {
-    return this.videoAgentScene?.videoAgentMesh.currentTime || 0
-  }
-
-  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
-    })
-  }
-
-  get videoInstance() {
-    return this.videoAgentScene?.videoAgentMesh.videoInstance
-  }
-
-  /**
-   * 逐帧任务
-   */
-  requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
-    if (this.videoInstance?.ended) {
-      this.setPlaying(false)
-      this.videoInstance.pause()
-      return
+    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
+    } | null = null
+
+    setVisible(v: boolean) {
+        this.visible = v
     }
-    if (!this.playing) {
-      if (!this.videoInstance?.paused) {
-        this.videoInstance?.pause()
-      }
-      return
+
+    setPlaying(playing: boolean) {
+        this.playing = playing
+    }
+
+    setEnded(ended: boolean) {
+        this.ended = ended
     }
-    if (this.videoInstance?.paused && this.playing) {
-      this.videoInstance.play()
+
+    openDrawer(drawerConfig?: false | { content: string | JSX.Element; height?: number | string }) {
+        if (!drawerConfig) {
+            this.drawerConfig = {
+                content: '',
+                height: this.drawerConfig?.height
+            }
+            return
+        }
+
+        this.drawerConfig = drawerConfig
     }
 
-    const currentKeyframes = this.currentKeyframes
+    constructor() {
+        super()
+
+        makeObservable(this, {
+            visible: observable,
+            setVisible: action,
+            playing: observable,
+            setPlaying: action,
+            popUp: observable.ref,
+            openPopUp: action,
+            drawerConfig: observable.ref,
+            openDrawer: action,
+            ended: observable,
+            setEnded: action
+        })
+
+        // 监听播放情况：抛出触发时机
+        reaction(
+            () => this.ended,
+            (ended) => {
+                if (ended) {
+                    this.emit('paused', true)
+                }
+            }
+        )
+
+        reaction(
+            () => this.playing,
+            (playing) => {
+                if (!this.ended) {
+                    this.emit(playing ? 'playing' : 'paused')
+                }
+            }
+        )
+
+    }
 
-    currentKeyframes.forEach((keyframe) => {
-      if (keyframe.parsed) return
-      keyframe.parsed = true
-      this.emit(keyframe.type, keyframe)
-      if (callback) {
-        callback(keyframe.type, keyframe)
-      }
-    })
-  }
+    get ready() {
+        return !!this.videoAgentScene
+    }
 
-  run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
-    if (this.stopInterval) return
-    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop(callback))
-  }
+    get currentTime() {
+        return this.videoAgentScene?.videoAgentMesh.currentTime || 0
+    }
 
-  dispose() {
-    this.setPlaying(false)
+    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
+        })
+    }
 
-    if (this.currentKeyframes) {
-      this.currentKeyframes.forEach((keyframe) => (keyframe.parsed = false))
+    get videoInstance() {
+        return this.videoAgentScene?.videoAgentMesh.videoInstance
     }
 
     /**
-     * 清理掉数据
+     * 逐帧任务
      */
-    this.vreoUnit = undefined
-    if (this.videoInstance) {
-      this.videoInstance.currentTime = 0
+    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
+        if (this.videoInstance?.ended) {
+            this.setEnded(true)
+            this.setPlaying(false)
+            this.videoInstance.pause()
+            return
+        }
+
+        if (!this.playing) {
+            if (!this.videoInstance?.paused) {
+                this.videoInstance?.pause()
+            }
+            return
+        }
+
+        if (this.videoInstance?.paused && this.playing) {
+            this.videoInstance.play()
+        }
+
+        const currentKeyframes = this.currentKeyframes
+
+        currentKeyframes.forEach((keyframe) => {
+            if (keyframe.parsed) return
+            keyframe.parsed = true
+            this.emit(keyframe.type, keyframe)
+            if (callback) {
+                callback(keyframe.type, keyframe)
+            }
+        })
+    }
+
+    run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
+        if (this.stopInterval) return
+        this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop(callback))
     }
 
-    if (this.stopInterval) {
-      this.stopInterval()
-      this.stopInterval = undefined
+    dispose() {
+        this.setPlaying(false)
+
+        if (this.currentKeyframes) {
+            this.currentKeyframes.forEach((keyframe) => (keyframe.parsed = false))
+        }
+
+        /**
+         * 清理掉数据
+         */
+        this.vreoUnit = undefined
+        if (this.videoInstance) {
+            this.videoInstance.currentTime = 0
+        }
+
+        if (this.stopInterval) {
+            this.stopInterval()
+            this.stopInterval = undefined
+        }
     }
-  }
 }
 
 export const ControllerContext = React.createContext<Controller | null>(null)