@realsee/vreo 0.1.6-alpha.5 → 0.2.0-alpha.2

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

@@ -1,19 +1,40 @@
 import * as React from 'react'
+import { ReactNode } from 'react'
 import { InfoPanelData, 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>
   )
 }
@@ -31,15 +52,47 @@ export function InfoPanel() {
 
       const infoPanelData = data as InfoPanelData
 
+      const { title, subTitle } = infoPanelData
       if (infoPanelData.type === InfoPanelTypeEnum.Image) {
-        controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
+        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} />, height: '60vh' })
+        controller.openDrawer({
+          content: (
+            <InfoPanelVideo url={infoPanelData.url}>
+              <Title title={title} subTitle={subTitle} />
+            </InfoPanelVideo>
+          ),
+          height: '60vh',
+        })
       }
       timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
     }
     controller.on(VreoKeyframeEnum.InfoPanel, callback)
 
+    // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     controller.openDrawer({
+    //       content: (
+    //         // <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>
+    //       ),
+    //       height: '60vh',
+    //     })
+    //   },
+    // })
+
     return () => {
       controller.off(VreoKeyframeEnum.InfoPanel, callback)
       if (timeoutRef.current) {

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

@@ -1,40 +1,88 @@
 import * as React from 'react'
-import { parseWork, WorkCubeImage } 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 rawRef = React.useRef<string[] | null>(null)
+  const workRef = React.useRef<Work | null>(null)
+
+  const restoreCallback = React.useCallback(() => {
+    if (rawRef.current) {
+      const work = parseWork(rawRef.current)
+      five.load(work)
+    }
+   
+    workRef.current = null
+  }, [])
+
+  const pausedCallback = React.useCallback(() => {
+    if (rawRef.current) {
+      const work = parseWork(rawRef.current)
+      five.load(work)
+    }
+  }, [])
+
+  const playingCallback = React.useCallback(() => {
+    if (!workRef.current) {
+      return
+    }
+    five.load(workRef.current)
+  }, [])
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      const { panoIndex, images, work } = keyframe.data as UpdateVRPanoramaData
+      if (!rawRef.current) {
+        rawRef.current = five.work.raw.works
+      }
+
+      const data = keyframe.data as UpdateVRPanoramaData
 
-      if (work) {
-        five.load(work)
+      // 如果数据中有新 work 数据，则直接载入
+      if (data.work) {
+        workRef.current = parseWork(data.work)
+        five.load(workRef.current)
         return
       }
 
-      console.warn('not support.')
-      const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
+      const lastRawWork = five.work?.raw.works[0]
 
-      // // 原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)
+      // 动态场景：不提供完成的签名数据，需重新整理
+      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
       }
 
-      const newWork = parseWork(newWorkJSON)
-
-      // // 需要还原么？待定 ...
-      five.load(newWork)
+      workRef.current = parseWork([lastRawWork, data])
+      five.load(workRef.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])
 

package/resources/Player/typings.ts

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

package/resources/react/index.tsx

@@ -1,18 +1,23 @@
 import { unsafe__useFiveInstance } from '@realsee/five/react'
 import * as React from 'react'
 import { Player } from '../Player'
+import { PlayerConfigs } from '../Player/typings'
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 
 const VreoContext = React.createContext<Player | null>(null)
 
-export const VreoProvider: React.FC = (props) => {
+export interface VreoProviderProps {
+  configs?: Partial<PlayerConfigs>
+} 
+
+export const VreoProvider: React.FC<VreoProviderProps> = (props ) => {
   const five = unsafe__useFiveInstance()
 
   const [player, setPlayer] = React.useState<Player | null>(null)
   const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    playerRef.current = new Player(five)
+    playerRef.current = new Player(five, props.configs || {})
     setPlayer(playerRef.current)
 
     return () => {

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five'
+import { Mode, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -36,6 +36,10 @@ export enum VreoKeyframeEnum {
    * 视频特效
    */
   VideoEffect = 'VideoEffect',
+  /**
+   * 背景音乐
+   */
+  BgMusic = 'BgMusic',
   /**
    * 结束
    */
@@ -61,6 +65,7 @@ export type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
+  uuid: string
   type: VreoKeyframeEnum
   start: number
   end: number
@@ -96,8 +101,14 @@ export interface VreoUnit {
  * 剧本事件
  */
 export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void } & {
+  // 新数据载入完成
+  loaded: (vreoUnit: VreoUnit) => void
+  // 语音状态 播放 -> 暂停
   paused: () => void
+  // 语音状态 暂停 -> 播放
   playing: () => void
+  // 未知的 剧本帧类型
+  unknownKeyframeType: (keyframe: Record<string, any>) => void
 }
 
 /**
@@ -123,9 +134,23 @@ export type PrompterData = {
  * VR 全景切换
  */
 export type UpdateVRPanoramaData = {
-  panoIndex: number
-  images: WorkCubeImage
-  work?: Work
+  _signature: string
+  allow_hosts: string[]
+  certificate: string
+  expire_at: string
+  // 动态场景
+  dynamic_scene?: {
+    images: {
+      index: number
+      right: string
+      left: string
+      up: string
+      down: string
+      front: string
+      back: string
+    }
+  }
+  [key: string]: any
 }
 
 /**
@@ -216,6 +241,10 @@ export enum InfoPanelTypeEnum {
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
   url: string
+  // 标题
+  title?: string
+  // 副标题
+  subTitle?: string
 }
 
 /**
@@ -229,5 +258,12 @@ export type VideoEffectData = {
   vector?: Pick<Pose, 'longitude' | 'latitude'>
 }
 
+/**
+ * 背景音乐
+ */
+export type BgMusicData = {
+  url: string
+}
+
 /** 自定义序列帧 */
 export type CustomData = Record<string, any>

package/stylesheets/custom/SpatialScenePanel.css

@@ -0,0 +1,303 @@
+@keyframes SpatialScenePanel-panel-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -330rem 0
+  }
+}
+
+
+@keyframes SpatialScenePanel-opacity-animation {
+  0% {
+      opacity: .3
+  }
+
+  100% {
+      opacity: 1
+  }
+}
+
+@keyframes SpatialScenePanel-dot-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -31.25rem 0
+  }
+}
+
+@keyframes SpatialScenePanel-line-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -9.583333333333334rem 0
+  }
+}
+
+.vreo-SpatialScenePanel {
+  width: 10rem;
+  height: 13.4375rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  user-select: none
+}
+
+.SpatialScenePanel {
+  width: 10rem;
+  height: 13.4375rem;
+  transform: scale3d(1,1,1);
+  transform-origin: center;
+  position: fixed;
+  left: 3rem;
+  top: 3rem;
+}
+
+.SpatialScenePanel-show-area {
+  width: 100%;
+  height: 100%;
+  transform: scale3d(1,1,1);
+  transform-origin: center;
+  position: absolute
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-bg {
+  width: 10rem;
+  height: 13.4375rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
+  background-size: 340rem 13.4375rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header {
+  width: 7.5rem;
+  height: 1.375rem;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/title-bg.377af865.png");
+  background-size: 100%;
+  margin: 1.875rem auto 1.25rem auto;
+  padding-bottom: .25rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-title {
+  font-family: PingFangSC-Medium;
+  font-size: 1.0625rem;
+  color: #ffe5b0;
+  letter-spacing: 0;
+  line-height: 1.0625rem;
+  text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-temperature {
+  font-family: PingFangSC-Semibold;
+  font-size: .625rem;
+  color: rgba(255,229,176,0.6);
+  letter-spacing: 0;
+  line-height: .625rem;
+  text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
+  align-self: flex-end
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body {
+  position: relative;
+  padding: 0 1.25rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  width: 100%
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-text {
+  opacity: .3;
+  font-family: PingFangSC-Regular;
+  font-size: .75rem;
+  color: #fff;
+  letter-spacing: 0;
+  line-height: .75rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-icon {
+  opacity: .3;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  flex-shrink: 0
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot {
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: -.625rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot::before {
+  display: block;
+  position: absolute;
+  width: .25rem;
+  height: .25rem;
+  background: #c3d5ff;
+  opacity: .3;
+  content: '';
+  z-index: 1;
+  border-radius: 100%
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot::after {
+  display: block;
+  position: absolute;
+  content: '';
+  z-index: 2
+}
+
+.SpatialScenePanel.show .SpatialScenePanel-disappear-area {
+  display: none
+}
+
+.SpatialScenePanel.show .SpatialScenePanel-show-area {
+  transform: scale3d(1,1,1);
+  transition: -webkit-transform 1s linear;
+  transition: transform 1s linear;
+  transition: transform 1s linear, -webkit-transform 1s linear
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 1s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 1s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 1s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 2s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 2s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 2s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 3s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 3s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 3s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 4s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 4s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 4s steps(15) 1 normal
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-show-area {
+  transform: scale3d(0,1,1);
+  transition: -webkit-transform 500ms linear;
+  transition: transform 500ms linear;
+  transition: transform 500ms linear, -webkit-transform 500ms linear
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
+  display: -ms-flexbox;
+  display: flex;
+  width: 1.25rem;
+  height: 13.4375rem;
+  justify-content: center;
+  align-items: center
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-disappear-area::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  width: .4166666666666667rem;
+  height: 11.666666666666666rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/line.4ac1c0bb.png");
+  background-size: 10rem 11.666666666666666rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-line-sprites-animation 500ms 500ms steps(23) 1 normal
+}
+