@realsee/vreo 0.1.6-alpha.4 → 0.2.0-alpha.1

package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js

@@ -22,37 +22,76 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
+  var rawRef = React.useRef(null);
+  var workRef = React.useRef(null);
+  var restoreCallback = React.useCallback(function () {
+    if (rawRef.current) {
+      var work = (0, _five.parseWork)(rawRef.current);
+      five.load(work);
+    }
+
+    workRef.current = null;
+  }, []);
+  var pausedCallback = React.useCallback(function () {
+    if (rawRef.current) {
+      var work = (0, _five.parseWork)(rawRef.current);
+      five.load(work);
+    }
+  }, []);
+  var playingCallback = React.useCallback(function () {
+    if (!workRef.current) {
+      return;
+    }
+
+    five.load(workRef.current);
+  }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      var _ref = keyframe.data,
-          panoIndex = _ref.panoIndex,
-          images = _ref.images,
-          work = _ref.work;
+      if (!rawRef.current) {
+        rawRef.current = five.work.raw.works;
+      }
+
+      var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
 
-      if (work) {
-        five.load(work);
+      if (data.work) {
+        workRef.current = (0, _five.parseWork)(data.work);
+        five.load(workRef.current);
         return;
       }
 
-      console.warn('not support.');
-      var newWorkJSON = JSON.parse(JSON.stringify((_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.work)); // // 原Work数据不能被修改
+      var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0]; // 动态场景：不提供完成的签名数据，需重新整理
 
-      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) {
+        var lastWork = JSON.parse(lastRawWork);
+        var panorama = lastWork.panorama;
+        var index = data.dynamic_scene.images.index;
+        panorama.list[index] = data.dynamic_scene.images;
+        data.panorama = panorama;
+        delete data.dynamic_scene;
       }
 
-      var newWork = (0, _five.parseWork)(newWorkJSON); // // 需要还原么？待定 ...
-
-      five.load(newWork);
+      workRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(workRef.current);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
+
+    controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback); // 新载入数据 将之前的内容清空
+
+    controller.on('loaded', restoreCallback); // 暂停 回到默认状态
+
+    controller.on('paused', pausedCallback); // 播放 回归暂停前状态
+
+    controller.on('playing', playingCallback);
     return function () {
+      // 清理事件监听
       controller.off(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+      controller.off(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
+      controller.off('loaded', restoreCallback);
+      controller.off('paused', pausedCallback);
+      controller.off('playing', playingCallback);
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);

package/lib/Player/typings.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { VreoKeyframeConfigMap } from '../typings/VreoUnit';
 export interface PlayerConfigs {
     containter?: ReactDOM.Container;
@@ -11,4 +12,8 @@ export interface PlayerConfigs {
         videoEffect?: HTMLVideoElement;
         modelTVVideo?: HTMLVideoElement;
     };
+    /**
+     * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
+     */
+    customPanelChildren?: ReactNode;
 }

package/lib/typings/VreoUnit.d.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 declare enum VreoKeyframeEnum {
     /** 运镜 */
@@ -35,6 +35,10 @@ export declare enum VreoKeyframeEnum {
      * 视频特效
      */
     VideoEffect = "VideoEffect",
+    /**
+     * 背景音乐
+     */
+    BgMusic = "BgMusic",
     /**
      * 结束
      */
@@ -57,6 +61,7 @@ export declare type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
+    uuid: string;
     type: VreoKeyframeEnum;
     start: number;
     end: number;
@@ -89,6 +94,7 @@ export interface VreoUnit {
 export declare type VreoKeyframeEvent = {
     [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
 } & {
+    loaded: (vreoUnit: VreoUnit) => void;
     paused: () => void;
     playing: () => void;
 };
@@ -113,9 +119,22 @@ export declare type PrompterData = {
  * VR 全景切换
  */
 export declare 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;
 };
 /**
  * 顶点
@@ -196,6 +215,8 @@ export declare enum InfoPanelTypeEnum {
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
     url: string;
+    tilte?: string;
+    subTitle?: string;
 };
 /**
  * 视频特效
@@ -207,5 +228,11 @@ export declare type VideoEffectData = {
     direction?: Vertex;
     vector?: Pick<Pose, 'longitude' | 'latitude'>;
 };
+/**
+ * 背景音乐
+ */
+export declare type BgMusicData = {
+    url: string;
+};
 /** 自定义序列帧 */
 export declare type CustomData = Record<string, any>;

package/lib/typings/VreoUnit.js

@@ -21,6 +21,7 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["PanoEffect"] = "PanoEffect";
   VreoKeyframeEnum["InfoPanel"] = "InfoPanel";
   VreoKeyframeEnum["VideoEffect"] = "VideoEffect";
+  VreoKeyframeEnum["BgMusic"] = "BgMusic";
   VreoKeyframeEnum["Exit"] = "Exit";
   VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.6-alpha.4",
+  "version": "0.2.0-alpha.1",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -25,7 +25,7 @@
     "packages": "node ./dev-tools/build-packages.js"
   },
   "peerDependencies": {
-    "@realsee/five": "^5.0.0-alpha.53",
+    "@realsee/five": "^5.0.0-alpha.103",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
@@ -35,7 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/five": "^5.0.0-alpha.91",
+    "@realsee/five": "^5.0.0-alpha.103",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",

package/resources/Player/App.tsx

@@ -13,6 +13,7 @@ import { Prompter } from './modules/keyframes/Prompter'
 import { UpdateVRPanorama } from './modules/keyframes/UpdateVRPanorama'
 import { VideoEffect } from './modules/keyframes/VideoEffect'
 import { VideoAgent } from './modules/VideoAgent'
+import { BgMusic } from './modules/keyframes/BgMusic'
 
 const AppView = observer(({ controller }: { controller: Controller }) => {
   return (
@@ -35,6 +36,7 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
           }}
         />
         <Prompter />
+        {controller.configs?.customPanelChildren}
       </div>
     </div>
   )
@@ -53,6 +55,7 @@ export function App() {
         <PanoTextLabel />
         <InfoPanel />
         <PanoEffect />
+        <BgMusic />
       </>
       <AppView controller={controller} />
     </>

package/resources/Player/index.tsx

@@ -58,6 +58,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   async load(vreoUnit: VreoUnit, currentTime = 0) {
     if (!this.controller.visible) {
       this.controller.setVisible(true)
+      // 延迟 500ms 规避跟 DOM 动画冲突
       await new Promise((resolve) => {
         setTimeout(() => resolve(true), 500)
       })
@@ -71,6 +72,8 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     this.controller.vreoUnit = vreoUnit
     this.controller.videoInstance?.pause()
 
+    // 新数据载入就绪
+    this.emit('loaded', vreoUnit)
     if (vreoUnit.video.url) {
       if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
         this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000

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

@@ -5,7 +5,7 @@ import { Controller } from '../../Controller'
 import { useController } from '../../hooks'
 
 const DrawerView = observer(({ controller }: { controller: Controller }) => {
-  const maxHeight = '540px'
+  const maxHeight = '400px'
   const height = (() => {
     const height = controller.drawerConfig?.height
     if (!height) {

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

@@ -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/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/InfoPanel/index.tsx

@@ -1,23 +1,42 @@
 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">
+      {children}
       <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
     </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>
+}
+
 export function InfoPanel() {
   const timeoutRef = React.useRef<NodeJS.Timeout | null>()
   const controller = useController()
@@ -30,6 +49,8 @@ export function InfoPanel() {
       const { start, end, data } = keyframe
 
       const infoPanelData = data as InfoPanelData
+  
+
 
       if (infoPanelData.type === InfoPanelTypeEnum.Image) {
         controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
@@ -40,6 +61,16 @@ export function InfoPanel() {
     }
     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>
+      ), 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,3 +1,4 @@
+import { ReactNode } from 'react';
 import { VreoKeyframeConfigMap } from '../typings/VreoUnit'
 
 export interface PlayerConfigs {
@@ -12,4 +13,8 @@ export interface PlayerConfigs {
     videoEffect?: HTMLVideoElement
     modelTVVideo?: HTMLVideoElement
   }
+  /**
+   * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
+   */
+  customPanelChildren?: ReactNode
 }

package/resources/typings/VreoUnit.ts

@@ -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,6 +101,7 @@ export interface VreoUnit {
  * 剧本事件
  */
 export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void } & {
+  loaded: (vreoUnit: VreoUnit) => void
   paused: () => void
   playing: () => void
 }
@@ -123,9 +129,22 @@ 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 +235,8 @@ export enum InfoPanelTypeEnum {
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
   url: string
+  tilte?: string
+  subTitle?: string
 }
 
 /**
@@ -229,5 +250,12 @@ export type VideoEffectData = {
   vector?: Pick<Pose, 'longitude' | 'latitude'>
 }
 
+/**
+ * 背景音乐
+ */
+export type BgMusicData = {
+  url: string
+}
+
 /** 自定义序列帧 */
 export type CustomData = Record<string, any>

package/stylesheets/default.css

@@ -489,14 +489,47 @@
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
+  background-color: rgba(0, 0, 0, 0.75);
+  flex-direction: column;
+}
+
+.vreo-infoPanel::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 20px;
+}
+
+.vreo-infoPanel-title {
+  height: 64px;
+  width: 100%;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.vreo-infoPanel-t1 {
+  font-size: 17px;
+  font-weight: 600;
+  padding-left: 26px;
+}
+
+.vreo-infoPanel-t2 {
+  font-size: 12px;
+  opacity: 0.6;
+  padding-right: 26px;
+  padding-left: 8px;
+  padding-top: 6px;
 }
 
 .vreo-infoPanelImg,
 .vreo-infoPanelVideo {
+  flex: 1;
+  background-size: contain;
   width: 100%;
-  max-width: 375px;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
 
 .vreo-panel--hidden .vreo-panel-inner {