@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.9",
+  "version": "1.0.0-alpha.2",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -15,19 +15,20 @@
     "resources",
     "docs",
     "stylesheets",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "docs": "npx typedoc",
+    "docs": "npx typedoc && yarn run build",
     "packages": "node ./dev-tools/build-packages.js"
   },
   "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,8 +36,8 @@
     "@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",
+    "@realsee/dnalogel": "^2.1.0-alpha.17",
+    "@realsee/five": "5.0.0-alpha.149",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -47,14 +48,13 @@
     "react-dom": "^16.0.0",
     "three": "^0.117.1",
     "typedoc": "^0.22.10",
-    "typescript": "^4.5.2",
+    "typescript": "4.7.4",
     "vite": "^2.6.14"
   },
   "dependencies": {
     "@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/index.ts

@@ -152,16 +152,3 @@ export class PlayController extends Subscribe<VreoKeyframeEvent> {
     }
   }
 }
-
-console.log(`
-
-┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
-┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
-┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
-┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
-┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
-┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
-
-`)

package/resources/Player/App.tsx

@@ -2,8 +2,9 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react'
 import { Controller } from './Controller'
-import { useController, useFiveInstance } from './hooks'
+import { useController } from './hooks'
 import { CameraMovement } from './modules/keyframes/CameraMovement'
+import { ResizeObserver } from './modules/ResizeObserver'
 import { InfoPanel } from './modules/keyframes/InfoPanel'
 import { ModelVideo } from './modules/keyframes/ModelVideo'
 import { PanoEffect } from './modules/keyframes/PanoEffect'
@@ -14,6 +15,7 @@ import { UpdateVRPanorama } from './modules/keyframes/UpdateVRPanorama'
 import { VideoEffect } from './modules/keyframes/VideoEffect'
 import { VideoAgent } from './modules/VideoAgent'
 import { BgMusic } from './modules/keyframes/BgMusic'
+import { Wave } from './modules/Wave'
 
 const AppView = observer(({ controller }: { controller: Controller }) => {
   
@@ -24,11 +26,9 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
       })}
     >
       <div className="vreo-panel-inner">
+        {controller.waveAppearance && <Wave appearance={controller.waveAppearance}/>}
         <VideoAgent
           onClick={() => {
-            if (controller.isAudio) {
-              return
-            }
             if (controller.playing) {
               controller.setPlaying(false)
             } else {
@@ -49,6 +49,7 @@ export function App() {
   return (
     <>
       <>
+        <ResizeObserver />
         <CameraMovement />
         <ModelVideo />
         <UpdateVRPanorama />

package/resources/Player/Controller.ts

@@ -2,165 +2,296 @@ import { Five, Subscribe } from '@realsee/five'
 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'
+import { VreoKeyframe, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit, VreoVideo } from '../typings/VreoUnit'
 import { VideoAgentScene } from './modules/VideoAgent/VideoAgentScene'
-import { PlayerConfigs } from './typings'
+import { Appearance, PlayerConfigs, WaveAppearance } from './typings'
+import setElementDataset from '../shared-utils/setElementDataset'
+import { getMediaType } from '../shared-utils/getMediaInfo'
 
 /**
  * 逻辑控制器：内部状态。
  */
 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')
-  }
-
-  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
-  }
-
-  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
-    }
-
-    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
-    }
-    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))
-  }
-
-  dispose() {
-    this.setPlaying(false)
-
-    if (this.currentKeyframes) {
-      this.currentKeyframes.forEach((keyframe) => (keyframe.parsed = false))
+    five: Five
+    configs: PlayerConfigs
+    videoAgentScene?: VideoAgentScene
+    vreoUnit?: VreoUnit
+    stopInterval?: () => void
+    playing = false
+    ended = false
+    loading: boolean | null = false // null 表示加载失败
+    containerSize?: {
+        width: number
+        height: number
+    }
+    appSize?: 'S' | 'M' | 'L' | 'XL'
+    container: Element
+    waveAppearance: WaveAppearance | null = null
+    appearance: Appearance = {
+        waveStyle: 'solid',
+    }
+    avatar?: VreoVideo['avatar']
+
+
+    visible = false
+
+    get agentType() {
+        const type = getMediaType(this.videoAgentScene?.videoAgentMesh.videoUrl)
+        if (this.avatar?.force) return 'avatar'
+        if (type === 'video') return 'video'
+        return 'none'
+    }
+
+    popUp: string | JSX.Element | null = null
+
+    openPopUp(popUp: string | JSX.Element | false) {
+        if (!popUp) {
+            this.popUp = null
+            return
+        }
+        this.popUp = popUp
+    }
+
+    setLoading(loading: boolean | null) {
+        this.loading = loading
+    }
+
+    drawerConfig: {
+        content: string | JSX.Element
+        height?: number | string
+    } | null = null
+
+    setAvatar(avatar: VreoVideo['avatar']) {
+        this.avatar = avatar
+    }
+
+    setContainerSize(width: number, height: number) {
+        this.containerSize = { width, height }
+    }
+
+    setVisible(v: boolean) {
+        this.visible = v
+    }
+
+    setPlaying(playing: boolean) {
+        this.playing = playing
+    }
+
+    setEnded(ended: boolean) {
+        this.ended = ended
+    }
+
+    setAppearance(appearance: Appearance) {
+        this.appearance = { ...this.appearance, ...appearance }
+    }
+
+    openDrawer(drawerConfig?: false | { content: string | JSX.Element; height?: number | string }) {
+        if (!drawerConfig) {
+            this.drawerConfig = {
+                content: '',
+                height: this.drawerConfig?.height
+            }
+            return
+        }
+
+        this.drawerConfig = drawerConfig
+    }
+
+    constructor({five, container, configs}: { five: Five, container: Element, configs: PlayerConfigs }) {
+        super()
+
+        this.configs = configs
+        this.container = container
+        this.five = five
+        this.appSize = configs.appSize
+        this.appearance = { ...this.appearance, ...configs.appearance }
+
+        makeObservable(this, {
+            visible: observable,
+            setVisible: action,
+            playing: observable,
+            setPlaying: action,
+            loading: observable,
+            setLoading: action,
+            popUp: observable.ref,
+            openPopUp: action,
+            drawerConfig: observable.ref,
+            openDrawer: action,
+            ended: observable,
+            waveAppearance: observable,
+            avatar: observable,
+            containerSize: observable,
+            setContainerSize: action,
+            appearance: observable,
+            setAppearance: action,
+            configs: observable.ref,
+            setEnded: action,
+            setAvatar: action,
+        })
+
+        reaction<[typeof this.appearance.waveStyle, boolean | null], boolean>(
+            () => [this.appearance.waveStyle, this.loading], 
+            ([waveStyle, loading]) => {
+                if (loading === null) {
+                    this.waveAppearance = null
+                    return
+                }
+                if (waveStyle === 'wave') {
+                    switch (loading) {
+                        case true:
+                            this.waveAppearance = 'double'
+                            break
+                        case false:
+                            this.waveAppearance = 'solid'
+                            break
+                    }
+                } else if (waveStyle === 'solid') {
+                    switch (loading) {
+                        case true:
+                            this.waveAppearance = 'swap'
+                            break
+                        case false:
+                            this.waveAppearance = 'expand'
+                            break
+                    }
+                }
+            }, 
+            { fireImmediately: true }
+        )
+
+        if (!this.appSize) {
+            reaction(
+                () => this.containerSize,
+                (containerSize) => {
+                    if (!containerSize) return
+                    const width = containerSize.width
+                    const height = containerSize.height
+                    const size = (() => {
+                        if (width <= 500) return 'S'
+                        if (width <= 1024) return 'M'
+                        if (width <= 2048) return 'L'
+                        return 'XL'
+                    })()
+                    const orientation = (() => {
+                        if (height > width) return 'portrait'
+                        return 'landscape'
+                    })()
+                    setElementDataset(this.container, { size })
+                    setElementDataset(this.container, { orientation })
+                },
+                { fireImmediately: true }
+            )
+        } else {
+            setElementDataset(this.container, { size: this.appSize })
+        }
+
+        // 监听播放情况：抛出触发时机
+        reaction(
+            () => this.ended,
+            (ended) => {
+                if (ended) {
+                    this.emit('paused', true)
+                }
+            }
+        )
+
+        reaction(
+            () => this.playing,
+            (playing) => {
+                if (!this.ended) {
+                    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 mediaInstance() {
+        return this.videoAgentScene?.videoAgentMesh.mediaInstance
     }
 
     /**
-     * 清理掉数据
+     * 逐帧任务
      */
-    this.vreoUnit = undefined
-    if (this.videoInstance) {
-      this.videoInstance.currentTime = 0
+    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
+        if (this.mediaInstance?.ended) {
+            this.setEnded(true)
+            this.setPlaying(false)
+            this.mediaInstance.pause()
+            return
+        }
+
+        if (!this.playing) {
+            if (!this.mediaInstance?.paused) {
+                this.mediaInstance?.pause()
+            }
+            return
+        }
+
+        if (this.mediaInstance?.paused && this.playing) {
+            this.mediaInstance.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)
+            }
+        })
     }
 
-    if (this.stopInterval) {
-      this.stopInterval()
-      this.stopInterval = undefined
+    run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
+        if (this.stopInterval) return
+        this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop(callback))
+    }
+
+    dispose() {
+        this.setPlaying(false)
+
+        if (this.currentKeyframes) {
+            this.currentKeyframes.forEach((keyframe) => (keyframe.parsed = false))
+        }
+
+        /**
+         * 清理掉数据
+         */
+        this.vreoUnit = undefined
+        if (this.mediaInstance) {
+            this.mediaInstance.currentTime = 0
+        }
+
+        if (this.stopInterval) {
+            this.stopInterval()
+            this.stopInterval = undefined
+        }
     }
-  }
 }
 
-export const ControllerContext = React.createContext<Controller | null>(null)
+const ControllerContext = React.createContext<Controller | null>(null)
+
+export { ControllerContext }
+

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { Five } from '@realsee/five'
-import * as THREE from 'three'
-import { Object3D, Raycaster, Vector3 } from 'three'
-import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
-import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
+import { Raycaster, Vector3 } from 'three'
+import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween'
+import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '../../../fivePlugins/CSS3DRenderPlugin'
 
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
 import { CustomVreoKeyframeProps } from '../../typings'
@@ -33,6 +32,7 @@ import { CustomVreoKeyframeProps } from '../../typings'
 //   "temperature": "27",
 //   "title": "沉浸式回家"
 // }
+
 export interface SpatialScenePanelData {
   customType: 'SpatialScenePanel'
   title: string
@@ -222,7 +222,7 @@ const Panel = React.forwardRef(
         <div className="SpatialScenePanel-body">
           {props.data?.stateList?.map((state, index) => (
             <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
-              <img className="SpatialScenePanel-icon" src={state.icon}></img>
+              <img className="SpatialScenePanel-icon" src={state.icon} alt={`${state.text}`}></img>
               <div className="SpatialScenePanel-text">{state.text}</div>
               <div className="SpatialScenePanel-dot"></div>
             </div>

package/resources/Player/hooks.ts

@@ -2,8 +2,6 @@ import React from 'react'
 import { Vector3 } from 'three'
 import { ControllerContext } from './Controller'
 
-
-
 export function useController() {
   const controller = React.useContext(ControllerContext)
   if (!controller) {
@@ -15,14 +13,14 @@ export function useController() {
 
 export function useFiveInstance() {
   const controller = useController()
-  if (!controller.$five) {
+  if (!controller.five) {
     throw new Error('没有找到 "five" 实例')
   }
 
-  return controller.$five
+  return controller.five
 }
 
 export function useFiveProject2d() {
   const five = useFiveInstance()
   return (vector: Vector3) => five.project2d(vector, false)
-}
+}