@realsee/vreo 0.1.3 → 0.1.6-alpha.2

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

@@ -28,7 +28,19 @@ function UpdateVRPanorama() {
 
       var _ref = keyframe.data,
           panoIndex = _ref.panoIndex,
-          images = _ref.images;
+          images = _ref.images,
+          work = _ref.work;
+
+      if (work) {
+        five.load(work);
+        return;
+      }
+
+      console.warn('not support.');
+      Object.keys(images).forEach(function (_key) {
+        var key = _key;
+        images[key] = images[key].replace(/https*:\/\//, '//');
+      });
       var newWorkJSON = JSON.parse(JSON.stringify((_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.work)); // // 原Work数据不能被修改
 
       if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -204,18 +204,19 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
 
               if (opts.asyncStartCallback) {
                 opts.asyncStartCallback();
-              }
+              } // 先切换模型再出旋转效果
+
 
-              if (!(five.currentMode !== _five.Five.Mode.Panorama)) {
+              if (!(args.mode && five.currentMode !== args.mode)) {
                 _context2.next = 5;
                 break;
               }
 
               _context2.next = 5;
-              return five.changeMode(_five.Five.Mode.Panorama);
+              return five.changeMode(args.mode);
 
             case 5:
-              if (!(args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
+              if (!(args.mode === _five.Five.Mode.Panorama && five.currentMode === _five.Five.Mode.Panorama && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
                 _context2.next = 11;
                 break;
               }

package/lib/fivePlugins/CameraMovementPlugin/typings.d.ts

@@ -38,6 +38,7 @@ export declare type MoveOpts = {
     preload?: boolean;
 } & CameraMovementOptsCallback;
 export declare type RotateArgs = {
+    mode?: Mode;
     panoIndex: number;
     loop: boolean;
     rotateSpeed: number;

package/lib/react/index.js

@@ -42,10 +42,14 @@ var VreoProvider = function VreoProvider(props) {
       player = _React$useState2[0],
       setPlayer = _React$useState2[1];
 
+  var playerRef = React.useRef(null);
   React.useEffect(function () {
-    setPlayer(new _Player.Player(five));
+    playerRef.current = new _Player.Player(five);
+    setPlayer(playerRef.current);
     return function () {
-      player === null || player === void 0 ? void 0 : player.dispose();
+      var _playerRef$current;
+
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.dispose();
     };
   }, []);
   if (!player) return /*#__PURE__*/React.createElement(React.Fragment, null);

package/lib/typings/VreoUnit.d.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five';
+import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five';
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings';
 export declare enum VreoKeyframeEnum {
     /** 运镜 */
@@ -38,7 +38,11 @@ export declare enum VreoKeyframeEnum {
     /**
      * 结束
      */
-    Exit = "Exit"
+    Exit = "Exit",
+    /**
+     * 自定义剧本帧
+     */
+    Custom = "Custom"
 }
 /**
  * 支持自定义剧本关键帧配置项
@@ -111,6 +115,7 @@ export declare type PrompterData = {
 export declare type UpdateVRPanoramaData = {
     panoIndex: number;
     images: WorkCubeImage;
+    work?: Work;
 };
 /**
  * 顶点
@@ -202,3 +207,5 @@ export declare type VideoEffectData = {
     direction?: Vertex;
     vector?: Pick<Pose, 'longitude' | 'latitude'>;
 };
+/** 自定义序列帧 */
+export declare type CustomData = Record<string, any>;

package/lib/typings/VreoUnit.js

@@ -22,6 +22,7 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["InfoPanel"] = "InfoPanel";
   VreoKeyframeEnum["VideoEffect"] = "VideoEffect";
   VreoKeyframeEnum["Exit"] = "Exit";
+  VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.3",
+  "version": "0.1.6-alpha.2",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -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.57",
+    "@realsee/five": "^5.0.0-alpha.91",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",

package/resources/Player/Controller.ts

@@ -152,6 +152,3 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
 }
 
 export const ControllerContext = React.createContext<Controller | null>(null)
-
-
-

package/resources/Player/index.tsx

@@ -9,18 +9,19 @@ import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
 
-const controller = new Controller()
-
 export class Player extends Subscribe<VreoKeyframeEvent> {
   $five: Five
+  private controller: Controller
   configs: Readonly<PlayerConfigs>
 
   constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
     super()
-    this.$five = controller.$five = five
+    this.controller = new Controller()
+    this.$five = this.controller.$five = five
 
     if (!configs.containter) {
-      const containter = document.createElement('div')
+      const containter = document.querySelector('#vreo-app') || document.createElement('div')
+      ReactDOM.unmountComponentAtNode(containter)
       containter.setAttribute('id', 'vreo-app')
       configs.containter = containter
       document.body.append(containter)
@@ -35,10 +36,10 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       )
     )
 
-    controller.configs = this.configs
+    this.controller.configs = this.configs
 
     ReactDOM.render(
-      <ControllerContext.Provider value={controller}>
+      <ControllerContext.Provider value={this.controller}>
         <App></App>
         <Drawer />
       </ControllerContext.Provider>,
@@ -47,7 +48,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
 
     // 监听播放情况：抛出触发时机
     reaction(
-      () => controller.playing,
+      () => this.controller.playing,
       (playing) => {
         this.emit(playing ? 'playing' : 'paused')
       }
@@ -55,56 +56,61 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   }
 
   async load(vreoUnit: VreoUnit, currentTime = 0) {
-    if (!controller.visible) {
-      controller.setVisible(true)
+    if (!this.controller.visible) {
+      this.controller.setVisible(true)
       await new Promise((resolve) => {
         setTimeout(() => resolve(true), 500)
       })
     }
 
-    if (controller.stopInterval) {
-      controller.stopInterval()
-      controller.stopInterval = undefined
+    if (this.controller.stopInterval) {
+      this.controller.stopInterval()
+      this.controller.stopInterval = undefined
     }
 
-    controller.vreoUnit = vreoUnit
-    controller.videoInstance?.pause()
+    this.controller.vreoUnit = vreoUnit
+    this.controller.videoInstance?.pause()
 
     if (vreoUnit.video.url) {
-      if (controller.videoAgentScene?.videoAgentMesh.videoInstance) {
-        controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
+      if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+        this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
       }
-      await controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
+      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
       this.play()
     }
-    controller.run((type, keyframe) => this.emit(type, keyframe))
+    this.controller.run((type, keyframe) => this.emit(type, keyframe))
     return true
   }
 
   get paused() {
-    return !controller.playing
+    return !this.controller.playing
   }
 
   play() {
-    if (controller.playing) return true
-    controller.setPlaying(true)
+    if (this.controller.playing) return true
+    this.controller.setPlaying(true)
     return true
   }
 
   pause() {
-    controller.setPlaying(false)
+    this.controller.setPlaying(false)
   }
 
   show() {
-    controller.setVisible(true)
+    this.controller.setVisible(true)
   }
 
   hide() {
-    controller.setVisible(false)
+    this.controller.setVisible(false)
   }
 
   dispose() {
-    controller.dispose()
+    this.pause()
+    this.controller.dispose()
+
+    if (this.configs.containter) {
+      ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+    }
   }
 }
 

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

@@ -57,6 +57,11 @@ void main(void) {
 }
 `
 
+const cacheInstance: {
+  videoInstance?: HTMLVideoElement
+  audioInstance?: HTMLAudioElement
+} = {}
+
 export interface VideoAgentMeshOptions {
   videoInstance?: HTMLVideoElement
 }
@@ -70,6 +75,7 @@ export class VideoAgentMesh extends THREE.Mesh {
   freeze: boolean
   paused: boolean
   audioInstance: HTMLAudioElement
+  $removeEventListener: () => void
 
   get videoInstance(): HTMLAudioElement {
     if (this.videoUrl?.endsWith('mp3')) {
@@ -96,13 +102,19 @@ export class VideoAgentMesh extends THREE.Mesh {
     options: VideoAgentMeshOptions = {},
   ) {
     if (!options.videoInstance) {
-      const videoInstance = document.createElement('video')
-      videoInstance.style.opacity = '0'
-      videoInstance.style.display = 'none'
-      document.body.append(videoInstance)
-      options.videoInstance = videoInstance
-      videoInstance.playsInline = true
-      videoInstance.controls = false
+      if (cacheInstance.videoInstance) {
+        options.videoInstance = cacheInstance.videoInstance
+      } else {
+        const videoInstance = document.createElement('video')
+        videoInstance.style.opacity = '0'
+        videoInstance.style.display = 'none'
+        document.body.append(videoInstance)
+        options.videoInstance = videoInstance
+        cacheInstance.videoInstance = videoInstance
+        videoInstance.playsInline = true
+        videoInstance.controls = false
+      }
+
     }
 
     const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
@@ -123,24 +135,41 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.paused = true
 
     {
-      const audioInstance = document.createElement('audio')
-      audioInstance.crossOrigin = ''
-      // videoInstance.muted = true
-      audioInstance.muted = false
-      audioInstance.setAttribute('playsinline', 'true')
-      audioInstance.setAttribute('webkit-playsinline', 'true')
-      audioInstance.setAttribute('autoplay', 'false')
-      audioInstance.setAttribute('style', 'display: none;')
-      document.body.appendChild(audioInstance)
-      this.audioInstance = audioInstance
+      if (cacheInstance.audioInstance) {
+        this.audioInstance = cacheInstance.audioInstance
+
+      } else {
+        const audioInstance = document.createElement('audio')
+        audioInstance.crossOrigin = ''
+        // videoInstance.muted = true
+        audioInstance.muted = false
+        audioInstance.setAttribute('playsinline', 'true')
+        audioInstance.setAttribute('webkit-playsinline', 'true')
+        audioInstance.setAttribute('autoplay', 'false')
+        audioInstance.setAttribute('style', 'display: none;')
+        document.body.appendChild(audioInstance)
+        this.audioInstance = audioInstance
+        cacheInstance.audioInstance = audioInstance
+      }
+
     }
+
     makeObservable(this, { paused: observable })
 
     const updatePaused = (paused: boolean) => runInAction(() => (this.paused = paused))
-    this.videoInstance.addEventListener('pause', () => updatePaused(true))
-    this.videoInstance.addEventListener('play', () => updatePaused(false))
+    const onPause = () => updatePaused(true)
+    const onPlay = () => updatePaused(false)
+
+    this.videoInstance.addEventListener('pause', onPause)
+    this.videoInstance.addEventListener('play', onPlay)
+
+    this.$removeEventListener = () => {
+      this.videoInstance.removeEventListener('pause', onPause)
+      this.videoInstance.removeEventListener('play', onPlay)
+    }
   }
 
+
   private async update(videoUrl: string) {
     if (this.videoUrl === videoUrl) {
       return
@@ -199,4 +228,18 @@ export class VideoAgentMesh extends THREE.Mesh {
   get currentTime() {
     return this.videoInstance.currentTime * 1000
   }
+
+  dispose() {
+    // 销毁事件监听
+    this.$removeEventListener()
+    if (cacheInstance.audioInstance) {
+      document.body.removeChild(cacheInstance.audioInstance)
+      cacheInstance.audioInstance = undefined
+    }
+
+    if (cacheInstance.videoInstance) {
+      document.body.removeChild(cacheInstance.videoInstance)
+      cacheInstance.videoInstance = undefined
+    }
+  }
 }

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

@@ -37,4 +37,8 @@ export class VideoAgentScene {
     }
     requestAnimationFrame(this.run)
   }
+
+  dispose = () => {
+    this.videoAgentMesh?.dispose()
+  }
 }

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

@@ -14,6 +14,11 @@ export function VideoAgent(props: { onClick?: () => void }) {
     }
     const videoAgentScene = new VideoAgentScene(ref.current)
     controller.videoAgentScene = videoAgentScene
+
+    return () => {
+      controller.dispose()
+      controller.videoAgentScene?.dispose()
+    }
   }, [])
 
   return (

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { parseWork } from '@realsee/five'
+import { parseWork, WorkCubeImage } from '@realsee/five'
 import { useController, useFiveInstance } from '../../../hooks'
 import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
@@ -9,8 +9,18 @@ export function UpdateVRPanorama() {
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      const { panoIndex, images } = keyframe.data as UpdateVRPanoramaData
+      const { panoIndex, images, work } = keyframe.data as UpdateVRPanoramaData
 
+      if (work) {
+        five.load(work)
+        return
+      }
+
+      console.warn('not support.')
+      Object.keys(images).forEach((_key) => {
+        const key = _key as keyof WorkCubeImage
+        images[key] = images[key].replace(/https*:\/\//, '//')
+      })
       const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
 
       // // 原Work数据不能被修改

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -139,11 +139,16 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
       opts.asyncStartCallback()
     }
 
-    if (five.currentMode !== Five.Mode.Panorama) {
-      await five.changeMode(Five.Mode.Panorama)
+    // 先切换模型再出旋转效果
+    if (args.mode && five.currentMode !== args.mode) {
+      await five.changeMode(args.mode)
     }
 
-    if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+    // 全景状态下，需要点位对齐
+    if (args.mode === Five.Mode.Panorama &&
+      five.currentMode === Five.Mode.Panorama &&
+      args.panoIndex !== undefined &&
+      args.panoIndex !== five.panoIndex) {
       if (opts.preload) await five.preloadPano(args.panoIndex)
       await new Promise((resolve, reject) => {
         five.moveToPano(args.panoIndex, {

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -46,6 +46,7 @@ export type MoveOpts = {
 } & CameraMovementOptsCallback
 
 export type RotateArgs = {
+  mode?: Mode
   panoIndex: number
   loop: boolean
   rotateSpeed: number

package/resources/react/index.tsx

@@ -7,13 +7,16 @@ const VreoContext = React.createContext<Player | null>(null)
 
 export const VreoProvider: React.FC = (props) => {
   const five = unsafe__useFiveInstance()
+
   const [player, setPlayer] = React.useState<Player | null>(null)
+  const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    setPlayer(new Player(five))
+    playerRef.current = new Player(five)
+    setPlayer(playerRef.current)
 
     return () => {
-      player?.dispose()
+      playerRef.current?.dispose()
     }
   }, [])
 

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five'
+import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -40,6 +40,10 @@ export enum VreoKeyframeEnum {
    * 结束
    */
   Exit = 'Exit',
+  /**
+   * 自定义剧本帧
+   */
+  Custom = 'Custom',
 }
 
 /**
@@ -121,6 +125,7 @@ export type PrompterData = {
 export type UpdateVRPanoramaData = {
   panoIndex: number
   images: WorkCubeImage
+  work?: Work
 }
 
 /**
@@ -223,3 +228,6 @@ export type VideoEffectData = {
   direction?: Vertex
   vector?: Pick<Pose, 'longitude' | 'latitude'>
 }
+
+/** 自定义序列帧 */
+export type CustomData = Record<string, any>