@realsee/vreo 0.1.6 → 0.2.0-alpha.11

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

@@ -9,7 +9,7 @@ export class VideoAgentScene {
   renderer = new THREE.WebGLRenderer({ alpha: true })
   container: HTMLElement
 
-  constructor(container: HTMLElement, needRender = true) {
+  constructor(container: HTMLElement, needRender = true, options: { videoInstance?: HTMLVideoElement, audioInstance?: HTMLAudioElement } = {}) {
     this.container = container
     this.camera.position.set(0, 0, 10)
     this.camera.lookAt(0, 0, 0)
@@ -22,7 +22,7 @@ export class VideoAgentScene {
     this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio)
     domElement.setAttribute('style', `width: ${state.width}px;height: ${state.height}px;`)
 
-    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1)
+    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
     if (needRender) {
       container.append(domElement)
       this.scene.add(this.videoAgentMesh)
@@ -31,10 +31,19 @@ export class VideoAgentScene {
   }
 
   run = () => {
+    const domElement = this.renderer.domElement
+
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
       this.renderer.render(this.scene, this.camera)
     }
+
+    // 兼容非视频场景
+    if (!this.videoAgentMesh.videoUrl?.endsWith('.mp4')) {
+      if (domElement.style.display !== 'none') domElement.style.display = 'none'
+    } else {
+      if (domElement.style.display !== 'block') domElement.style.display = 'block'
+    }
     requestAnimationFrame(this.run)
   }
 

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

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { useController } from '../../hooks'
+import { VideoAgentMeshOptions } from './VideoAgentMesh'
 import { VideoAgentScene } from './VideoAgentScene'
 
-export function VideoAgent(props: { onClick?: () => void }) {
+export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
   const ref = React.useRef<HTMLDivElement>(null)
   const controller = useController()
 
@@ -12,7 +13,7 @@ export function VideoAgent(props: { onClick?: () => void }) {
       console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...')
       return
     }
-    const videoAgentScene = new VideoAgentScene(ref.current)
+    const videoAgentScene = new VideoAgentScene(ref.current, true, props.options || {})
     controller.videoAgentScene = videoAgentScene
 
     return () => {

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

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { BgMusicData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { useController } from '../../../hooks'
+
+export function BgMusic() {
+  const controller = useController()
+  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null)
+  const cleanTimeout = React.useCallback( () => {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current)
+      timeoutIdRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const audio = new Audio()
+    audio.setAttribute('id', 'vreo-singleton-bgmusic')
+    audio.style.display = 'none'
+
+    audio.setAttribute('playsinline', 'true')
+    audio.loop = true
+    document.body.append(audio)
+
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end } = keyframe
+      const { url } = keyframe.data as BgMusicData
+      audio.src = url
+      const playCallback = () => {
+        audio.play()
+      }
+  
+      audio.addEventListener('canplaythrough', playCallback)
+
+      cleanTimeout()
+    
+      const cleanAudio = () => {
+        audio.pause()
+        audio.currentTime = 0
+        audio.src = ''
+        cleanTimeout()
+        audio.removeEventListener('canplaythrough', playCallback)
+      }
+  
+      const duration = (end - start) || 5000
+    
+      timeoutIdRef.current = setTimeout(() => {
+        cleanAudio()
+      }, duration)
+
+      controller.once('paused', () => {
+        cleanAudio()
+      })
+
+    }
+
+    controller.on(VreoKeyframeEnum.BgMusic, callback)
+
+    return () => {
+      controller.off(VreoKeyframeEnum.BgMusic, callback)
+      document.body.removeChild(audio)
+      cleanTimeout()
+    }
+  })
+
+  return <></>
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CameraMovementPlugin } from '../../../../fivePlugins/CameraMovementPlugin'
-import { CameraMovementEffect, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
+import { CameraMovementEffect, MoveArgs, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
 import { CameraMovementData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 import { useController, useFiveInstance } from '../../../hooks'
 
@@ -18,9 +18,13 @@ export function CameraMovement() {
       const cameraMovementData = data as CameraMovementData
       const effect = cameraMovementData.effect
       if (effect === CameraMovementEffect.Rotate) {
-        ref.current.rotate(data as RotateArgs, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
+      } else if (effect === CameraMovementEffect.Move) {
+        await ref.current.move(data as MoveArgs, end - start)
+      } else if (cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex) {
+        await ref.current.move(data as MoveArgs, end - start)
       } else {
-        ref.current.move(data, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
       }
     }
 

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

@@ -1,19 +1,48 @@
 import * as React from 'react'
-import { InfoPanelData, InfoPanelTypeEnum, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { ReactNode } from 'react'
+import {
+  InfoPanelData,
+  InfoPanelStyleEnum,
+  InfoPanelTypeEnum,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 import { useController } from '../../../hooks'
 
-function InfoPanelImg({ url }: { url: string }) {
+function InfoPanelImg({ url, children }: { url: string; children?: ReactNode }) {
   return (
     <div className="vreo-infoPanel vreo-infoPanel--img">
-      <img className="vreo-infoPanelImg" src={url} />
+      {children}
+      <div className="vreo-infoPanelImg" style={{ backgroundImage: `url(${url})` }}></div>
     </div>
   )
 }
 
-function InfoPanelVideo({ url }: { url: string }) {
+function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }) {
   return (
     <div className="vreo-infoPanel vreo-infoPanel--video">
-      <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      {children}
+      <div className="vreo-infoPanelWrapper">
+        <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      </div>
+    </div>
+  )
+}
+
+interface TitleProps {
+  title?: string
+  subTitle?: string
+}
+
+const Title = (props: TitleProps) => {
+  if (!props.title && !props.subTitle) {
+    return null
+  }
+
+  return (
+    <div className="vreo-infoPanel-title">
+      <div className="vreo-infoPanel-t1">{props.title}</div>
+      <div className="vreo-infoPanel-t2">{props.subTitle}</div>
     </div>
   )
 }
@@ -26,20 +55,89 @@ export function InfoPanel() {
     if (controller.configs?.keyframeMap.InfoPanel === false) {
       return
     }
+
     const callback = (keyframe: VreoKeyframe) => {
       const { start, end, data } = keyframe
 
       const infoPanelData = data as InfoPanelData
 
-      if (infoPanelData.type === InfoPanelTypeEnum.Image) {
-        controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
-      } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
-        controller.openDrawer({ content: <InfoPanelVideo url={infoPanelData.url} />, height: '60vh' })
-      }
-      timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
+      const { title, subTitle, style } = infoPanelData
+      do {
+        if (style === InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+            controller.openPopUp(
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            )
+          } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+            controller.openPopUp(
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            )
+          }
+          break
+        }
+        if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            ),
+            height: '60vh',
+          })
+        } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            ),
+            height: '60vh',
+          })
+        }
+      } while (false)
+
+      timeoutRef.current = setTimeout(() => {
+        controller.openDrawer(false)
+        controller.openPopUp(false)
+      }, end - start)
     }
     controller.on(VreoKeyframeEnum.InfoPanel, callback)
 
+    // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    // })
+
     return () => {
       controller.off(VreoKeyframeEnum.InfoPanel, callback)
       if (timeoutRef.current) {

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

@@ -1,7 +1,9 @@
 import * as React from 'react'
+import * as THREE from 'three'
+import { useController, useFiveInstance } from '../../../hooks'
 import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
+import { createTransMatrix } from '../../../../shared-utils/createTransMatrix'
 import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
 
 export function ModelVideo() {
   const controller = useController()
@@ -15,14 +17,45 @@ export function ModelVideo() {
         ref.current = ModelTVVideoPlugin(five, {})
       }
       const { start, end } = keyframe
-      const { videoSrc, videoPosterSrc, vertexs } = keyframe.data as ModelVideoData
+      const { videoSrc, videoPosterSrc, vertexs, matrixWorld } = keyframe.data as ModelVideoData
+
+      const position = (() => {
+        if (vertexs.length < 4) {
+          throw new Error('ModelVideo: 顶点数据集合不够，无法组成矩形 ....')
+        }
+        if (vertexs.length === 4) {
+          return vertexs
+        }
+
+        const box = new THREE.Box3()
+        vertexs.forEach((v) => box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z)))
+        return [
+          new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+          new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+        ]
+      })()
+
+      const points = (() => {
+        if (matrixWorld) {
+          const transMatrix = createTransMatrix(matrixWorld)
+          return [
+            position.map((p) => {
+              const res = transMatrix([p.x, p.y, p.z])
+              return { x: res[0], y: res[1], z: res[2] }
+            }),
+          ]
+        }
+        return [position]
+      })()
 
       ref.current.disable()
       await ref.current.load(
         {
-          video_src: videoSrc.replace(/https*:/, ''),
-          video_poster_src: videoPosterSrc.replace(/https*:/, ''),
-          points: [vertexs],
+          video_src: videoSrc,
+          video_poster_src: videoPosterSrc,
+          points,
         },
         controller.configs?.videos?.modelTVVideo
       )

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

@@ -30,13 +30,13 @@ export function PanoTextLabel() {
       if (!res) return
       const { x: left, y: top } = res
 
-      Object.assign(window, { $PanoTextLabel: { setState } })
+      // Object.assign(window, { $PanoTextLabel: { setState } })
       setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
       timeoutRef.current = setTimeout(() => setState(null), end - start)
     }
     controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
 
-    Object.assign(window, { $panoTextLabel: { setState } })
+    // Object.assign(window, { $panoTextLabel: { setState } })
     return () => {
       controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
       if (timeoutRef.current) {

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

@@ -2,7 +2,6 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { useController } from '../../../hooks'
 
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
 export function Prompter() {
@@ -27,7 +26,8 @@ export function Prompter() {
 
       ref.current = setTimeout(() => {
         setHidden(true)
-        setTimeout(() => setText(''), 500)
+        setText('')
+        // setTimeout(() => setText(''), 500)
 
         if (ref.current) clearTimeout(ref.current)
         ref.current = null
@@ -48,19 +48,9 @@ export function Prompter() {
         'vreo-prompter--audio': controller.isAudio,
       })}
     >
-      {text ? (
-        /* @warning "index.js:1 Warning: findDOMNode is deprecated in StrictMode." */
-        <TransitionGroup className="vreo-prompter-text">
-          <CSSTransition
-            key={text}
-            classNames="vreo-prompter-text-transition"
-            timeout={500}
-            addEndListener={(node, done) => node.addEventListener('transitionend', done, false)}
-          >
-            <div className="vreo-prompter-innerText">{text}</div>
-          </CSSTransition>
-        </TransitionGroup>
-      ) : undefined}
+      <div className="vreo-prompter-text">
+        <div className="vreo-prompter-innerText">{text}</div>
+      </div>
     </div>
   )
 }

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

@@ -1,36 +1,99 @@
 import * as React from 'react'
-import { parseWork } from '@realsee/five'
+import { parseWork, Work } from '@realsee/five'
 import { useController, useFiveInstance } from '../../../hooks'
 import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
 export function UpdateVRPanorama() {
   const controller = useController()
   const five = useFiveInstance()
+  const deafultWorkRef = React.useRef<string[] | null>(null)
+  const updateWorkRef = React.useRef<Work | null>(null)
+
+  // 恢复默认 VR
+  const restoreCallback = React.useCallback(() => {
+    // 先清理掉 之前的 VR 数据备份
+    updateWorkRef.current = null
+
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
+      five.load(work)
+    }
+   
+  }, [])
+
+  // 暂停时： 恢复默认 VR 
+  const pausedCallback = React.useCallback(() => {
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
+      Object.assign(window, {$rawWork: work})
+      five.load(work)
+    }
+  }, [])
+
+  // 播放时：如果暂停前有更新 VR 需要还原
+  const playingCallback = React.useCallback(() => {
+    if (!updateWorkRef.current) {
+      return
+    }
+    five.load(updateWorkRef.current)
+  }, [])
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      const { panoIndex, images } = keyframe.data as UpdateVRPanoramaData
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works
+      }
 
-      const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
+      const data = keyframe.data as UpdateVRPanoramaData
 
-      // // 原Work数据不能被修改
-      if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {
-        Object.assign(newWorkJSON.panorama.list[panoIndex], images)
-      } else if (newWorkJSON.observers && newWorkJSON.observers[panoIndex] && newWorkJSON.observers[panoIndex].images) {
-        Object.assign(newWorkJSON.observers[panoIndex].images, images)
+      // 如果数据中有新 work 数据，则直接载入
+      if (data.work) {
+        updateWorkRef.current = parseWork(data.work)
+        five.load(updateWorkRef.current)
+        return
       }
 
-      const newWork = parseWork(newWorkJSON)
+      const lastRawWork = five.work?.raw.works[0]
 
-      // // 需要还原么？待定 ...
-      five.load(newWork)
+
+      // 动态场景：不提供完成的签名数据，需重新整理
+      if (data.dynamic_scene && !data.panorama) {
+        const lastWork = JSON.parse(lastRawWork)
+        const panorama = lastWork.panorama
+        const index = data.dynamic_scene.images.index
+        panorama.list[index] = data.dynamic_scene.images
+        data.panorama = panorama
+        delete data.dynamic_scene
+      }
+
+      Object.assign(window, {$work1: JSON.parse(lastRawWork), $work2: data, parseWork: parseWork})
+
+      updateWorkRef.current = parseWork([lastRawWork, data])
+      five.load(updateWorkRef.current)
     }
 
     controller.on(VreoKeyframeEnum.UpdateVRPanorama, callback)
+
+    // 离开 将之前的内容清空
+    controller.on(VreoKeyframeEnum.Exit, restoreCallback)
+  
+    // 新载入数据 将之前的内容清空
+    controller.on('loaded', restoreCallback)
+
+    // 暂停 回到默认状态
+    controller.on('paused', pausedCallback)
+    // 播放 回归暂停前状态
+    controller.on('playing', playingCallback)
+
     return () => {
+      // 清理事件监听
       controller.off(VreoKeyframeEnum.UpdateVRPanorama, callback)
+      controller.off(VreoKeyframeEnum.Exit, restoreCallback)
+      controller.off('loaded', restoreCallback)
+      controller.off('paused', pausedCallback)
+      controller.off('playing', playingCallback)
     }
-  }, [controller])
+  }, [])
 
   return <></>
 }

package/resources/Player/typings.ts

@@ -1,4 +1,8 @@
-import { VreoKeyframeConfigMap } from '../typings/VreoUnit'
+import React, { ReactNode } from 'react';
+import { Subscribe, Five } from '@realsee/five';
+
+import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit'
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 
 export interface PlayerConfigs {
   containter?: ReactDOM.Container
@@ -12,4 +16,20 @@ export interface PlayerConfigs {
     videoEffect?: HTMLVideoElement
     modelTVVideo?: HTMLVideoElement
   }
+
+  videoAgentMeshOptions?: VideoAgentMeshOptions
+  /**
+   * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
+   */
+  customPanelChildren?: ReactNode
+  customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
+  imageOptions?: { size: number }
+  autoPreload?: boolean
+}
+
+export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>
+
+export interface CustomVreoKeyframeProps {
+  subscribe: VreoSubscribe
+  five: Five
 }