@realsee/vreo 0.2.0-alpha.7 → 0.2.0-alpha.8

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -54,114 +54,125 @@ function progressNumber(from, to, pst) {
 
 
 var CameraMovementPlugin = function CameraMovementPlugin(five) {
-  var move = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(args, duration) {
-      var opts,
-          _args = arguments;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              opts = _args.length > 2 && _args[2] !== undefined ? _args[2] : {
-                preload: true
-              };
+  var move = function move(args, duration) {
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+      preload: true
+    };
+    return new Promise( /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(resolve, reject) {
+        var panoIndex, movePanoOptions;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (opts.asyncStartCallback) {
+                  opts.asyncStartCallback();
+                }
 
-              if (opts.asyncStartCallback) {
-                opts.asyncStartCallback();
-              }
+                if (!(five.panoIndex === undefined)) {
+                  _context.next = 3;
+                  break;
+                }
 
-              if (!(args.mode && args.mode !== five.currentMode)) {
-                _context.next = 5;
-                break;
-              }
+                return _context.abrupt("return", reject(false));
+
+              case 3:
+                if (!(args.mode && args.mode !== five.currentMode)) {
+                  _context.next = 6;
+                  break;
+                }
 
-              _context.next = 5;
-              return new Promise(function (resolve) {
-                if (!args.mode) return;
-                five.once('modeChange', function (mode) {
-                  five.once('initAnimationEnded', function () {
-                    if (mode === args.mode) {
-                      resolve(true);
-                    }
+                _context.next = 6;
+                return new Promise(function (resolve) {
+                  if (!args.mode) return;
+                  five.once('modeChange', function (mode) {
+                    five.once('initAnimationEnded', function () {
+                      if (mode === args.mode) {
+                        resolve(true);
+                      }
+                    });
+                  });
+                  five.changeMode(args.mode, {
+                    fov: args.fov || undefined,
+                    latitude: args.latitude || undefined,
+                    longitude: args.longitude || undefined,
+                    panoIndex: args.panoIndex || undefined
                   });
                 });
-                five.changeMode(args.mode, {
-                  fov: args.fov || undefined,
-                  latitude: args.latitude || undefined,
-                  longitude: args.longitude || undefined,
-                  panoIndex: args.panoIndex || undefined
-                });
-              });
 
-            case 5:
-              if (!(args.mode === _five.Five.Mode.Floorplan)) {
-                _context.next = 7;
-                break;
-              }
+              case 6:
+                if (!(args.mode === _five.Five.Mode.Floorplan)) {
+                  _context.next = 8;
+                  break;
+                }
 
-              return _context.abrupt("return", true);
+                return _context.abrupt("return", resolve(true));
 
-            case 7:
-              if (!(opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
-                _context.next = 10;
-                break;
-              }
+              case 8:
+                if (!(opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
+                  _context.next = 11;
+                  break;
+                }
 
-              _context.next = 10;
-              return five.preloadPano(args.panoIndex);
+                _context.next = 11;
+                return five.preloadPano(args.panoIndex);
 
-            case 10:
-              if (opts.asyncEndCallback) {
-                opts.asyncEndCallback();
-              }
+              case 11:
+                if (opts.asyncEndCallback) {
+                  opts.asyncEndCallback();
+                }
 
-              if (!(args.panoIndex === undefined && args.fov === undefined && args.latitude === undefined && args.longitude === undefined)) {
-                _context.next = 13;
-                break;
-              }
+                if (!(args.panoIndex === undefined && args.fov === undefined && args.latitude === undefined && args.longitude === undefined)) {
+                  _context.next = 14;
+                  break;
+                }
 
-              return _context.abrupt("return", true);
+                return _context.abrupt("return", resolve(true));
 
-            case 13:
-              _context.next = 15;
-              return new Promise(function (resolve, reject) {
-                var panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
-
-                if (panoIndex !== undefined) {
-                  var movePanoOptions = {
-                    duration: duration,
-                    // 移动耗时
-                    moveEndCallback: function moveEndCallback() {
-                      return resolve(true);
-                    },
-                    // 移动结束
-                    moveCancelCallback: function moveCancelCallback() {
-                      return reject(false);
-                    },
-                    // 移动开始
-                    effect: 'fade'
-                  };
-                  five.moveToPano(panoIndex, Object.assign(movePanoOptions, args));
-                } else {
-                  reject(false);
+              case 14:
+                panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
+
+                if (!(panoIndex !== undefined)) {
+                  _context.next = 21;
+                  break;
                 }
-              });
 
-            case 15:
-              return _context.abrupt("return", _context.sent);
+                movePanoOptions = Object.assign(args, {
+                  duration: duration,
+                  // 移动耗时
+                  moveEndCallback: function moveEndCallback() {
+                    return resolve(true);
+                  },
+                  // 移动结束
+                  moveCancelCallback: function moveCancelCallback() {
+                    resolve(true);
+                  } // 移动开始
+                  // effect: args.transEffect || 'fade',
 
-            case 16:
-            case "end":
-              return _context.stop();
+                });
+                _context.next = 19;
+                return five.moveToPano(panoIndex, movePanoOptions);
+
+              case 19:
+                _context.next = 22;
+                break;
+
+              case 21:
+                reject(false);
+
+              case 22:
+              case "end":
+                return _context.stop();
+            }
           }
-        }
-      }, _callee);
-    }));
+        }, _callee);
+      }));
 
-    return function move(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  };
 
   var getAnimeParams = function getAnimeParams(args) {
     var currentFiveState = five.state; // latitude

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

@@ -1,4 +1,4 @@
-import { Mode, MovePanoOptions, Pose } from '@realsee/five';
+import { Mode, Pose } from '@realsee/five';
 export interface CameraMovementPluginParameterType {
 }
 export interface CameraMovementPluginExportType {
@@ -33,7 +33,8 @@ export interface CameraMovementOptsCallback {
 export declare type MoveArgs = {
     mode: Mode;
     panoIndex: number;
-} & Pose & Pick<MovePanoOptions, 'effect'>;
+    transEffect?: "fly" | "fade" | "instant";
+} & Pose;
 export declare type MoveOpts = {
     preload?: boolean;
 } & CameraMovementOptsCallback;

package/lib/typings/VreoUnit.d.ts

@@ -61,7 +61,7 @@ export declare type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-    uuid: string;
+    uuid?: string;
     type: VreoKeyframeEnum;
     start: number;
     end: number;
@@ -95,7 +95,7 @@ export declare type VreoKeyframeEvent = {
     [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
 } & {
     loaded: (vreoUnit: VreoUnit) => void;
-    paused: () => void;
+    paused: (ended?: boolean) => void;
     playing: () => void;
     unknownKeyframeType: (keyframe: Record<string, any>) => void;
 };
@@ -103,7 +103,8 @@ export declare type VreoKeyframeEvent = {
  * 相机运动
  */
 export declare type CameraMovementData = {
-    effect: CameraMovementEffect;
+    effect?: CameraMovementEffect;
+    transEffect?: "fly" | "fade" | "instant";
     mode: Mode;
     panoIndex: number;
     loop?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.7",
+  "version": "0.2.0-alpha.8",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",

package/resources/PlayController/createHTMLAudioElement.ts

@@ -0,0 +1,53 @@
+
+const BLANK_AUDIO = ''
++ 'data:audio/mpeg;base64,'
++ '//uQxAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAADAAAGhgBVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVWqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr///////////'
++ '////////////////////////////////8AAAA5TEFNRTMuOThyAc0AAAAAAAAAABSAJAiqQgAAg'
++ 'AAABobxtI73AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//uQxAACFEII9ACZ/sJZwWEoEb8w/////N//////Jcxj'
++ 'Hjf+7/v/H2PzCCFAiDtGeyBCIx7bJJ1mmEEMy6g8mm2c8nrGABB4h2Mkmn//4z/73u773R5qHHu'
++ '/j/w7Kxkzh5lWRWdsifCkNAnY9Zc1HvDAhjhSHdFkHFzLmabt/AQxSg2wwzLhHIJOBnAWwVY4zr'
++ 'hIYhhc2kvhYDfQ4hDi2Gmh5KyFn8EcGIrHAngNgIwVIEMf5bzbAiTRoAD///8z/KVhkkWEle6IX'
++ '+d/z4fvH3BShK1e5kmjkCMoxVmXhd4ROlTKo3iipasvTilY21q19ta30/v/0/idPX1v8PNxJL6r'
++ 'amnOVsdvMv2akO0iSYIzdJFirtzWXCZicS9vHqvSKyqm5XJBdqBwPxyfJdykhWTZ0G0ZyTZGpLK'
++ 'xsNwwoRhsx3tZfhwmeOBVISm3impAC/IT/8hP/EKEM1KMdVdVKM2rHV4x7HVXZvbVVKN/qq8CiV'
++ '9VL9jjH/6l6qf7MBCjZmOqsAibjcP+qqqv0oxqpa/NVW286hPo1nz2L/h8+jXt//uSxCmDU2IK/'
++ 'ECN98KKtE5IYzNoCfbw+u9i5r8PoadUMFPKqWL4LK3T/LCraMSHGkW4bpLXR/E6LlHOVQxmslKV'
++ 'J8IULktMN06N0FKCpHCoYsjC4F+Z0NVqdNFoGSTjSiyjzLdnZ2fNqTi2eHKONONKLMPMKLONKLM'
++ 'PQRJGlFxZRoKcJFAYEeIFiRQkUWUeYfef//Ko04soswso40UJAgMw8wosososy0EalnZyjQUGBR'
++ 'QGIFggOWUacWUeYmuadrZziQKKEgQsQLAhQkUJAgMQDghltLO1onp0cpkNInSFMqlYeSEJ5AHsq'
++ 'FdOwy1DA2sRmRJKxdKRfLhfLw5BzUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVf/7ksRRA8AAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=';
+
+
+export function createHTMLAudioElement(): HTMLAudioElement {
+  const ndAudio = document.querySelector('#vreo-playController-audio')
+  if (ndAudio) {
+    return ndAudio as HTMLAudioElement
+  }
+
+  const audio = document.createElement('audio')
+  audio.style.display = 'none'
+  audio.setAttribute('id', 'vreo-playController-audio')
+  audio.controls = false
+  document.body.appendChild(audio)
+  audio.src = BLANK_AUDIO
+
+  // 触发一次播放
+  Promise.resolve(async () => await audio.play())
+
+  return audio
+}

package/resources/PlayController/index.ts

@@ -0,0 +1,167 @@
+import { Subscribe } from '@realsee/five'
+import { requestAnimationFrameInterval } from '../shared-utils/animationFrame'
+import { VreoKeyframe, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
+import { createHTMLAudioElement } from './createHTMLAudioElement'
+
+export interface PlayControllerConfig {
+  audio?: HTMLAudioElement
+}
+
+const closures: Record<string, any> = {}
+
+export class PlayController extends Subscribe<VreoKeyframeEvent> {
+
+  vreoUnit?: VreoUnit
+
+  config: PlayControllerConfig = {}
+  stopInterval: () => void
+
+  get paused() {
+    return this.audioInstance.paused
+  }
+
+  get audioInstance() {
+    return this.config.audio!
+  }
+
+  get currentTime() {
+    return this.audioInstance.currentTime * 1000
+  }
+
+  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
+    })
+  }
+
+  /**
+   * 音频时长 不一定能获取得到，建议以 VreoUnit 配置的时长为准。
+   */
+  get duration() {
+    return this.audioInstance.duration * 1000
+  }
+
+  constructor(config: PlayControllerConfig = {}) {
+    super()
+
+    if (!config.audio) {
+      config.audio = createHTMLAudioElement()
+    }
+
+    this.config = Object.assign(this.config, config)
+
+    closures.onPlaying = () => this.emit('playing')
+    closures.onPaused = () => this.emit('paused')
+    closures.onEnded = () => this.emit('paused', true)
+
+    this.audioInstance.addEventListener('play', closures.onPlaying)
+    this.audioInstance.addEventListener('pause', closures.onPaused)
+    this.audioInstance.addEventListener('ended', closures.onEnded)
+
+    this.stopInterval = requestAnimationFrameInterval(() => {
+      if (this.audioInstance.paused) {
+        return
+      }
+
+      if (!this.vreoUnit) {
+        return
+      }
+
+      const keyframes = this.vreoUnit.keyframes
+      const currentTime = this.currentTime
+      // 没有被解析过且开始时间低于当前时间戳 100ms
+      const currentKeyframes = keyframes.filter((keyframe: VreoKeyframe) => {
+        if (keyframe.parsed) return false
+
+        const dur = currentTime - keyframe.start
+        return dur <= 60 && dur >= 0
+      })
+  
+      currentKeyframes.forEach((keyframe) => {
+        if (keyframe.parsed) return
+        keyframe.parsed = true
+        this.emit(keyframe.type, keyframe)
+      })
+    })
+
+  }
+
+
+
+  /**
+   * 载入数据
+   */
+  async load(vreoUnit: VreoUnit): Promise<boolean> {
+    this.vreoUnit = vreoUnit
+
+    await this.pause()
+    return await new Promise((resolve, reject) => {
+      if (vreoUnit.video.url === this.audioInstance.src) {
+        return resolve(true)
+      }
+
+      this.audioInstance.src = vreoUnit.video.url
+      const canplaythrough = () => {
+        resolve(true)
+        this.audioInstance.removeEventListener('canplaythrough', canplaythrough)
+      }
+      const error = (err: any) => {
+        reject(err)
+        this.audioInstance.removeEventListener('error', error)
+      }
+      this.audioInstance.addEventListener('canplaythrough', canplaythrough)
+      this.audioInstance.addEventListener('error', error)
+    })
+  }
+
+  /**
+   * 播放
+   */
+  async play() {
+    closures.playPromise = this.audioInstance.play()
+  }
+
+  /**
+   * 暂停
+   */
+  async pause() {
+    if (closures.playPromise) {
+      await closures.playPromise
+    }
+    this.audioInstance.pause()
+  }
+
+  /**
+   * 销毁资源
+   * @notice 一旦销毁，创建的实例将不可用：需重新创建实例。
+   * 
+   * @deprecated **慎重执行**
+   */
+  dispose() {
+    // 清理事件监听
+    this.audioInstance.removeEventListener('play', closures.onPlaying)
+    this.audioInstance.removeEventListener('pasue', closures.onPaused)
+    this.audioInstance.removeEventListener('ended', closures.onEnded)
+    if (this.stopInterval) {
+      this.stopInterval()
+    }
+  }
+}
+
+console.log(`
+
+┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
+┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
+┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
+┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
+┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
+┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
+
+`)

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

@@ -192,7 +192,6 @@ function SpatialScenePanelBg() {
     if (!ref.current) return
 
     const listener = () => {
-      console.log('listener')
       ref.current?.setAttribute('class', 'SpatialScenePanel-bg')
 
       timeoutRef.current = setTimeout(() => {

package/resources/Player/index.tsx

@@ -4,7 +4,7 @@ import { Five, Subscribe } from '@realsee/five'
 
 import { App } from './App'
 import { Controller, ControllerContext } from './Controller'
-import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
+import { CameraMovementData, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
@@ -69,7 +69,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     )
   }
 
-  async load(vreoUnit: VreoUnit, currentTime = 0) {
+  async load(vreoUnit: VreoUnit, currentTime = 0, preload = false) {
     if (!this.controller.visible) {
       this.controller.setVisible(true)
       // 延迟 500ms 规避跟 DOM 动画冲突
@@ -86,6 +86,38 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     this.controller.vreoUnit = vreoUnit
     this.controller.videoInstance?.pause()
 
+    // 预载逻辑
+    // 是否降低图片分辨率
+    if (this.$five.imageOptions.size && this.configs.imageOptions?.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+      this.$five.imageOptions.size = this.configs.imageOptions.size
+    }
+    
+    // 预载数据中的点位
+    if (preload || (preload === undefined && this.configs.autoPreload)) {
+      const panoIndexMap = vreoUnit.keyframes.filter((vreoKeyframe) => {
+        if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+          return false
+        }
+  
+        const data = vreoKeyframe.data as CameraMovementData
+        if (data.panoIndex === undefined) {
+          return false
+        }
+        return true
+      }).reduce((accu: Record<number, boolean>, curr) => {
+        const panoIndex = curr.data.panoIndex as number
+        if (!accu[panoIndex]) {
+          accu[panoIndex] = true
+        }
+        return accu
+      }, {})
+  
+      const panoIndexs = Object.keys(panoIndexMap)
+      for (let i = 0; i < panoIndexs.length; i++) {
+        await this.$five.preloadPano(Number(panoIndexs[i]))
+      }
+    }
+    
     // 新数据载入就绪
     this.emit('loaded', vreoUnit)
     if (vreoUnit.video.url) {

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

@@ -6,49 +6,52 @@ import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../.
 export function UpdateVRPanorama() {
   const controller = useController()
   const five = useFiveInstance()
-  const rawRef = React.useRef<string[] | null>(null)
-  const workRef = React.useRef<Work | null>(null)
+  const deafultWorkRef = React.useRef<string[] | null>(null)
+  const updateWorkRef = React.useRef<Work | null>(null)
 
   const restoreCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
       five.load(work)
     }
    
-    workRef.current = null
+    updateWorkRef.current = null
   }, [])
 
   const pausedCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
+      Object.assign(window, {$rawWork: work})
       five.load(work)
     }
   }, [])
 
   const playingCallback = React.useCallback(() => {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return
     }
-    five.load(workRef.current)
+    five.load(updateWorkRef.current)
   }, [])
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works
       }
 
       const data = keyframe.data as UpdateVRPanoramaData
 
       // 如果数据中有新 work 数据，则直接载入
       if (data.work) {
-        workRef.current = parseWork(data.work)
-        five.load(workRef.current)
+        updateWorkRef.current = parseWork(data.work)
+        five.load(updateWorkRef.current)
         return
       }
 
       const lastRawWork = five.work?.raw.works[0]
 
+
       // 动态场景：不提供完成的签名数据，需重新整理
       if (data.dynamic_scene && !data.panorama) {
         const lastWork = JSON.parse(lastRawWork)
@@ -59,8 +62,10 @@ export function UpdateVRPanorama() {
         delete data.dynamic_scene
       }
 
-      workRef.current = parseWork([lastRawWork, data])
-      five.load(workRef.current)
+      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)

package/resources/Player/typings.ts

@@ -20,6 +20,8 @@ export interface PlayerConfigs {
    */
   customPanelChildren?: ReactNode
   customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
+  imageOptions?: { size: number }
+  autoPreload?: boolean
 }
 
 export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>