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

package/lib/Player/typings.d.ts

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

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;
@@ -210,11 +211,16 @@ export declare enum InfoPanelTypeEnum {
     Image = "Image",
     Video = "Video"
 }
+export declare enum InfoPanelStyleEnum {
+    Drawer = "Drawer",
+    PopUp = "PopUp"
+}
 /**
  * 信息面板
  */
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
+    style?: InfoPanelStyleEnum;
     url: string;
     title?: string;
     subTitle?: string;

package/lib/typings/VreoUnit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
@@ -55,13 +55,21 @@ exports.PanoEffectEnum = PanoEffectEnum;
  * 信息面板类型枚举
  */
 var InfoPanelTypeEnum;
-/**
- * 信息面板
- */
-
 exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
 
 (function (InfoPanelTypeEnum) {
   InfoPanelTypeEnum["Image"] = "Image";
   InfoPanelTypeEnum["Video"] = "Video";
-})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+
+var InfoPanelStyleEnum;
+/**
+ * 信息面板
+ */
+
+exports.InfoPanelStyleEnum = InfoPanelStyleEnum;
+
+(function (InfoPanelStyleEnum) {
+  InfoPanelStyleEnum["Drawer"] = "Drawer";
+  InfoPanelStyleEnum["PopUp"] = "PopUp";
+})(InfoPanelStyleEnum || (exports.InfoPanelStyleEnum = InfoPanelStyleEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.5",
+  "version": "0.2.0-alpha.8",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -18,7 +18,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite --port=3088",
+    "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "docs": "npx typedoc",

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/Controller.ts

@@ -24,6 +24,16 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
     return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
   }
 
+  popUp: string | JSX.Element | null = null
+
+  openPopUp(popUp: string | JSX.Element | false) {
+    if (!popUp) {
+      this.popUp = null
+      return
+    }
+    this.popUp = popUp
+  }
+
   drawerConfig: {
     content: string | JSX.Element
     height?: number | string
@@ -57,6 +67,8 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       setVisible: action,
       playing: observable,
       setPlaying: action,
+      popUp: observable.ref,
+      openPopUp: action,
       drawerConfig: observable.ref,
       openDrawer: action,
     })