@realsee/vreo 0.2.0-alpha.16 → 0.2.0-alpha.19

package/resources/Player/Controller.ts

@@ -11,158 +11,178 @@ import { PlayerConfigs } from './typings'
  */
 export class Controller extends Subscribe<VreoKeyframeEvent> {
 
-  $five?: Five
-  configs?: PlayerConfigs
-  videoAgentScene?: VideoAgentScene
-  vreoUnit?: VreoUnit
-  stopInterval?: () => void
-  playing = false
+    $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')
+    }
 
-  visible = false
+    popUp: string | JSX.Element | null = null
 
-  get isAudio() {
-    return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
-  }
+    openPopUp(popUp: string | JSX.Element | false) {
+        if (!popUp) {
+            this.popUp = null
+            return
+        }
+        this.popUp = popUp
+    }
 
-  popUp: string | JSX.Element | null = null
+    drawerConfig: {
+        content: string | JSX.Element
+        height?: number | string
+    } | 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
-  }
-
-  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
+    setVisible(v: boolean) {
+        this.visible = v
     }
 
-    this.drawerConfig = drawerConfig
-  }
-
-  constructor() {
-    super()
-
-    makeObservable(this, {
-      visible: observable,
-      setVisible: action,
-      playing: observable,
-      setPlaying: action,
-      popUp: observable.ref,
-      openPopUp: 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
+    setPlaying(playing: boolean) {
+        this.playing = playing
     }
 
-    if (!this.playing) {
-      if (!this.videoInstance?.paused) {
-        this.videoInstance?.pause()
-      }
-      return
+    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)
-      }
-    })
-  }
+    }
 
-  run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
-    if (this.stopInterval) return
-    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop(callback))
-  }
+    get ready() {
+        return !!this.videoAgentScene
+    }
 
-  dispose() {
-    this.setPlaying(false)
+    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
+        })
+    }
 
-    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)

package/resources/Player/index.tsx

@@ -11,175 +11,191 @@ import { PlayerConfigs } from './typings'
 import { PopUp } from './modules/PopUp'
 
 export class Player extends Subscribe<VreoKeyframeEvent> {
-  $five: Five
-  private controller: Controller
-  configs: Readonly<PlayerConfigs>
-
-  constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
-    super()
-    this.controller = new Controller()
-    this.$five = this.controller.$five = five
-
-    if (!configs.containter) {
-      const containter = document.querySelector('#vreo-app') || document.createElement('div')
-      ReactDOM.unmountComponentAtNode(containter)
-      containter.setAttribute('id', 'vreo-app')
-      configs.containter = containter
-      document.body.append(containter)
+    $five: Five
+    private controller: Controller
+    configs: Readonly<PlayerConfigs>
+
+    constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
+        super()
+        this.controller = new Controller()
+        this.$five = this.controller.$five = five
+
+        if (!configs.containter) {
+            const containter = document.getElementById('vreo-app') || document.createElement('div')
+            ReactDOM.unmountComponentAtNode(containter)
+            containter.setAttribute('id', 'vreo-app')
+            configs.containter = containter
+            const fiveCanvasDomParent = five.getElement()?.parentNode
+            if (fiveCanvasDomParent) {
+                fiveCanvasDomParent.append(containter)
+            } else {
+                document.body.append(containter)
+            }
+            // document.body.append(containter)
+        }
+
+        this.configs = Object.freeze(
+            Object.assign(
+                {
+                    keyframeMap: {},
+                },
+                configs
+            )
+        )
+
+        this.controller.configs = this.configs
+
+        ReactDOM.render(
+            <ControllerContext.Provider value={this.controller}>
+                <App />
+                <Drawer />
+                <PopUp />
+                {this.configs.customKeyframes &&
+                this.configs.customKeyframes.map((CustomCmpt, key) => (
+                    <CustomCmpt
+                        key={key}
+                        subscribe={{
+                            on: (name, callback) => this.on(name, callback),
+                            once: (name, callback) => this.once(name, callback),
+                            off: (name, callback) => this.off(name, callback),
+                        }}
+                        five={five}
+                    />
+                ))}
+            </ControllerContext.Provider>,
+            configs.containter
+        )
+
+        // 监听播放情况：抛出触发时机
+        reaction(
+            () => [this.controller.playing, this.controller.ended],
+            ([playing, ended]) => {
+                if (ended) {
+                    this.emit('paused', true)
+                } else {
+                    this.emit(playing ? 'playing' : 'paused')
+                }
+            }
+        )
     }
 
-    this.configs = Object.freeze(
-      Object.assign(
-        {
-          keyframeMap: {},
-        },
-        configs
-      )
-    )
-
-    this.controller.configs = this.configs
-
-    ReactDOM.render(
-      <ControllerContext.Provider value={this.controller}>
-        <App />
-        <Drawer />
-        <PopUp />
-        {this.configs.customKeyframes &&
-          this.configs.customKeyframes.map((CustomCmpt, key) => (
-            <CustomCmpt
-              key={key}
-              subscribe={{
-                on: (name, callback) => this.on(name, callback),
-                once: (name, callback) => this.once(name, callback),
-                off: (name, callback) => this.off(name, callback),
-              }}
-              five={five}
-            />
-          ))}
-      </ControllerContext.Provider>,
-      configs.containter
-    )
-
-    // 监听播放情况：抛出触发时机
-    reaction(
-      () => this.controller.playing,
-      (playing) => {
-        this.emit(playing ? 'playing' : 'paused')
-      }
-    )
-  }
-
-  async load(vreoUnit: VreoUnit, currentTime = 0, preload = false, force = false) {
-    if (force) {
-      vreoUnit = JSON.parse(JSON.stringify(vreoUnit))
-    }
-    if (!this.controller.visible) {
-      this.controller.setVisible(true)
-      // 延迟 500ms 规避跟 DOM 动画冲突
-      await new Promise((resolve) => {
-        setTimeout(() => resolve(true), 500)
-      })
+    async load(vreoUnit: VreoUnit, currentTime = 0, preload = false, force = false) {
+        if (force) {
+            vreoUnit = JSON.parse(JSON.stringify(vreoUnit))
+        }
+        if (!this.controller.visible) {
+            this.controller.setVisible(true)
+            // 延迟 500ms 规避跟 DOM 动画冲突
+            await new Promise((resolve) => {
+                setTimeout(() => resolve(true), 500)
+            })
+        }
+
+        if (this.controller.stopInterval) {
+            this.controller.stopInterval()
+            this.controller.stopInterval = undefined
+        }
+
+        this.controller.vreoUnit = vreoUnit
+        this.controller.videoInstance?.pause()
+
+        // 预载逻辑
+        // 是否降低图片分辨率
+        if (
+            this.$five.imageOptions.size &&
+            this.configs.imageOptions?.size &&
+            this.$five.imageOptions.size > this.configs.imageOptions.size
+        ) {
+            this.$five.imageOptions.size = this.configs.imageOptions.size
+        }
+
+        // 预载数据中的点位
+        if (preload || (preload === undefined && this.configs.autoPreload)) {
+            const panoIndexMap = vreoUnit.keyframes
+                .filter((vreoKeyframe) => {
+                    if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+                        return false
+                    }
+
+                    const data = vreoKeyframe.data as CameraMovementData
+                    if (data.panoIndex === undefined) {
+                        return false
+                    }
+                    return true
+                })
+                .reduce((accu: Record<number, boolean>, curr) => {
+                    const panoIndex = curr.data.panoIndex as number
+                    if (!accu[panoIndex]) {
+                        accu[panoIndex] = true
+                    }
+                    return accu
+                }, {})
+
+            const panoIndexs = Object.keys(panoIndexMap)
+            for (let i = 0; i < panoIndexs.length; i++) {
+                await this.$five.preloadPano(Number(panoIndexs[i]))
+            }
+        }
+
+        // 新数据载入就绪
+        this.emit('loaded', vreoUnit)
+        this.controller.emit('loaded', vreoUnit)
+
+        if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+            this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
+        }
+        await this.controller.videoAgentScene?.videoAgentMesh.play(
+            vreoUnit.video.url,
+            currentTime / 1000,
+            vreoUnit.video.duration
+        )
+
+        this.controller.setEnded(false)
+        this.play()
+
+        this.controller.run((type, keyframe) => this.emit(type, keyframe))
+        return true
     }
 
-    if (this.controller.stopInterval) {
-      this.controller.stopInterval()
-      this.controller.stopInterval = undefined
+    get paused() {
+        return !this.controller.playing
     }
 
-    this.controller.vreoUnit = vreoUnit
-    this.controller.videoInstance?.pause()
-
-    // 预载逻辑
-    // 是否降低图片分辨率
-    if (
-      this.$five.imageOptions.size &&
-      this.configs.imageOptions?.size &&
-      this.$five.imageOptions.size > this.configs.imageOptions.size
-    ) {
-      this.$five.imageOptions.size = this.configs.imageOptions.size
-    }
+    play(currentTime?: number) {
+        if (this.controller.playing) return true
+        if (currentTime && this.controller.videoInstance) {
+            this.controller.videoInstance.currentTime = currentTime / 1000
+        }
+        Object.assign(window, { $vreoController: this.controller })
 
-    // 预载数据中的点位
-    if (preload || (preload === undefined && this.configs.autoPreload)) {
-      const panoIndexMap = vreoUnit.keyframes
-        .filter((vreoKeyframe) => {
-          if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
-            return false
-          }
-
-          const data = vreoKeyframe.data as CameraMovementData
-          if (data.panoIndex === undefined) {
-            return false
-          }
-          return true
-        })
-        .reduce((accu: Record<number, boolean>, curr) => {
-          const panoIndex = curr.data.panoIndex as number
-          if (!accu[panoIndex]) {
-            accu[panoIndex] = true
-          }
-          return accu
-        }, {})
-
-      const panoIndexs = Object.keys(panoIndexMap)
-      for (let i = 0; i < panoIndexs.length; i++) {
-        await this.$five.preloadPano(Number(panoIndexs[i]))
-      }
+        this.controller.setPlaying(true)
+        return true
     }
 
-    // 新数据载入就绪
-    this.emit('loaded', vreoUnit)
-    this.controller.emit('loaded', vreoUnit)
-
-    if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
-      this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
-    }
-    await this.controller.videoAgentScene?.videoAgentMesh.play(
-      vreoUnit.video.url,
-      currentTime / 1000,
-      vreoUnit.video.duration
-    )
-    this.play()
-
-    this.controller.run((type, keyframe) => this.emit(type, keyframe))
-    return true
-  }
-
-  get paused() {
-    return !this.controller.playing
-  }
-
-  play(currentTime?: number) {
-    if (this.controller.playing) return true
-    if (currentTime && this.controller.videoInstance) {
-      this.controller.videoInstance.currentTime = currentTime / 1000
+    pause() {
+        this.controller.setPlaying(false)
     }
-    Object.assign(window, {$vreoController: this.controller})
 
-    this.controller.setPlaying(true)
-    return true
-  }
-
-  pause() {
-    this.controller.setPlaying(false)
-  }
+    show() {
+        this.controller.setVisible(true)
+    }
 
-  show() {
-    this.controller.setVisible(true)
-  }
+    hide() {
+        this.controller.setVisible(false)
+    }
 
-  hide() {
-    this.controller.setVisible(false)
-  }
+    getCurrentTime() {
+        return this.controller.currentTime
+    }
 
-  dispose() {
-    this.pause()
-    this.controller.dispose()
+    dispose() {
+        this.pause()
+        this.controller.dispose()
 
-    if (this.configs.containter) {
-      ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+        if (this.configs.containter) {
+            ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+        }
     }
-  }
 }
 
 console.log(`