@realsee/vreo 0.2.0-alpha.12 → 0.2.0-alpha.13

package/lib/shared-utils/AduioLike.js

@@ -0,0 +1,165 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AudioLike = void 0;
+
+var _five = require("@realsee/five");
+
+var _animationFrame = require("./animationFrame");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
+ */
+var AudioLike = /*#__PURE__*/function (_Subscribe) {
+  _inherits(AudioLike, _Subscribe);
+
+  var _super = _createSuper(AudioLike);
+
+  function AudioLike() {
+    var _this;
+
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        duration = _ref.duration;
+
+    _classCallCheck(this, AudioLike);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "$timestamp", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "$currentTime", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "$duration", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "muted", false);
+
+    _defineProperty(_assertThisInitialized(_this), "src", '');
+
+    if (duration) {
+      _this.$duration = duration;
+    }
+
+    return _this;
+  }
+
+  _createClass(AudioLike, [{
+    key: "setAttribute",
+    value: function setAttribute(name, value) {// nothing todo
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      var _this2 = this;
+
+      if (this.$timestamp === 0) {
+        this.$timestamp = performance.now();
+      }
+
+      if (this.$currentTime === this.$duration) {
+        this.$currentTime = 0;
+      }
+
+      this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
+        return _this2.requestAnimationFrameLoop();
+      });
+      this.emit('play');
+    }
+  }, {
+    key: "pause",
+    value: function pause() {
+      if (this.stopInterval) {
+        this.stopInterval();
+        this.emit('pause');
+        this.stopInterval = undefined;
+      }
+
+      this.$timestamp = 0;
+    }
+  }, {
+    key: "requestAnimationFrameLoop",
+    value: function requestAnimationFrameLoop() {
+      var now = performance.now();
+      this.$currentTime = now - this.$timestamp;
+      this.emit('timeupdate');
+
+      if (this.$currentTime >= this.$duration - 10) {
+        this.$currentTime = this.$duration;
+        this.pause();
+        this.emit('ended');
+      }
+    }
+  }, {
+    key: "currentTime",
+    get: function get() {
+      return this.$currentTime / 1000;
+    },
+    set: function set(time) {
+      this.$currentTime = time;
+    }
+  }, {
+    key: "duration",
+    get: function get() {
+      return this.$duration;
+    },
+    set: function set(duration) {
+      this.pause();
+      this.$duration = duration;
+      this.$timestamp = 0;
+      this.$currentTime = 0;
+    }
+  }, {
+    key: "ended",
+    get: function get() {
+      return this.$currentTime === this.$duration;
+    }
+  }, {
+    key: "paused",
+    get: function get() {
+      return !this.stopInterval;
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(evtName, callback) {
+      var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.on(evtName, callback);
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(evtName, callback) {
+      var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.off(evtName, callback);
+    }
+  }]);
+
+  return AudioLike;
+}(_five.Subscribe);
+
+exports.AudioLike = AudioLike;
+var _default = AudioLike;
+exports["default"] = _default;

package/package.json

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

package/resources/Player/Controller.ts

@@ -114,12 +114,14 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       this.videoInstance.pause()
       return
     }
+
     if (!this.playing) {
       if (!this.videoInstance?.paused) {
         this.videoInstance?.pause()
       }
       return
     }
+
     if (this.videoInstance?.paused && this.playing) {
       this.videoInstance.play()
     }

package/resources/Player/index.tsx

@@ -91,47 +91,56 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
 
     // 预载逻辑
     // 是否降低图片分辨率
-    if (this.$five.imageOptions.size && this.configs.imageOptions?.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+    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 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)
     this.controller.emit('loaded', vreoUnit)
 
-    if (vreoUnit.video.url) {
-      if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
-        this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
-      }
-      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000)
-      this.play()
+    if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+      this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
     }
+    await this.controller.videoAgentScene?.videoAgentMesh.play(
+      vreoUnit.video.url,
+      currentTime / 1000,
+      vreoUnit.video.duration
+    )
+    this.play()
+
     this.controller.run((type, keyframe) => this.emit(type, keyframe))
     return true
   }
@@ -143,9 +152,10 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   play(currentTime?: number) {
     if (this.controller.playing) return true
     if (currentTime && this.controller.videoInstance) {
-      // Object.assign(window, {$vreoController: this.controller})
       this.controller.videoInstance.currentTime = currentTime / 1000
     }
+    Object.assign(window, {$vreoController: this.controller})
+
     this.controller.setPlaying(true)
     return true
   }

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

@@ -1,6 +1,7 @@
 import * as THREE from 'three'
 import { Preloader } from '../../../shared-utils/Preloader'
 import { makeObservable, observable, runInAction } from 'mobx'
+import AudioLike from '../../../shared-utils/AduioLike'
 
 const vertexShader = `
 varying vec2 vUv;
@@ -76,14 +77,21 @@ export class VideoAgentMesh extends THREE.Mesh {
   freeze: boolean
   paused: boolean
   audioInstance: HTMLAudioElement
+  audioLikeInstance: AudioLike
   $removeEventListener: () => void
 
-  get videoInstance(): HTMLAudioElement {
+  get videoInstance(): HTMLAudioElement | AudioLike {
+    if (!this.videoUrl) {
+      return this.audioLikeInstance
+    }
+
     if (this.videoUrl?.endsWith('mp3')) {
       return this.audioInstance
     }
+
     const uniforms = (this.material as THREE.ShaderMaterial).uniforms
     const videoInstance = uniforms.map.value.image as HTMLVideoElement
+
     return videoInstance
   }
 
@@ -155,23 +163,33 @@ export class VideoAgentMesh extends THREE.Mesh {
       this.audioInstance = options.audioInstance
     }
 
+    this.audioLikeInstance = new AudioLike()
+
     makeObservable(this, { paused: observable })
 
     const updatePaused = (paused: boolean) => runInAction(() => (this.paused = paused))
     const onPause = () => updatePaused(true)
     const onPlay = () => updatePaused(false)
 
-    this.videoInstance.addEventListener('pause', onPause)
-    this.videoInstance.addEventListener('play', onPlay)
+    this.audioInstance.addEventListener('pause', onPause)
+    this.audioInstance.addEventListener('play', onPlay)
+    this.options.videoInstance?.addEventListener('pause', onPause)
+    this.options.videoInstance?.addEventListener('play', onPlay)
+    this.audioLikeInstance.addEventListener('pause', onPause)
+    this.audioLikeInstance.addEventListener('play', onPlay)
 
     this.$removeEventListener = () => {
-      this.videoInstance.removeEventListener('pause', onPause)
-      this.videoInstance.removeEventListener('play', onPlay)
+      this.audioInstance.removeEventListener('pause', onPause)
+      this.audioInstance.removeEventListener('play', onPlay)
+      this.options.videoInstance?.removeEventListener('pause', onPause)
+      this.options.videoInstance?.removeEventListener('play', onPlay)
+      this.audioLikeInstance.removeEventListener('pause', onPause)
+      this.audioLikeInstance.removeEventListener('play', onPlay)
     }
   }
 
-
   private async update(videoUrl: string) {
+
     if (this.videoUrl === videoUrl) {
       return
     }
@@ -191,19 +209,31 @@ export class VideoAgentMesh extends THREE.Mesh {
       this.videoInstance.muted = false
       uniforms.enable.value = this.videoUrl?.endsWith('.mp4') ? 1 : 0
       this.videoInstance.removeEventListener('timeupdate', onStart, false)
+
     }
 
     this.videoInstance.addEventListener('timeupdate', onStart, false)
   }
 
-  async play(videoUrl = '', currentTime = 0) {
+  async play(videoUrl = '', currentTime = 0, duration?: number) {
     videoUrl = videoUrl || ''
+    if (duration && !videoUrl) {
+      if (this.currentTime) {
+        this.videoInstance.currentTime = currentTime
+      }
+      (this.videoInstance as AudioLike).duration = duration
+      this.videoUrl = ''
+      this.videoInstance.play()
+      return true
+    }
+
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
       else console.warn('警告：视频资源未初始化。')
       return true
     }
 
+    console.log('play', videoUrl, this.videoUrl)
     if (videoUrl === this.videoUrl) {
       this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()

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

@@ -33,6 +33,8 @@ export class VideoAgentScene {
   run = () => {
     const domElement = this.renderer.domElement
 
+    // console.log('renderder', this.videoAgentMesh.paused, this.videoAgentMesh.freeze)
+
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
       this.renderer.render(this.scene, this.camera)

package/resources/shared-utils/AduioLike.ts

@@ -0,0 +1,108 @@
+import { Subscribe } from '@realsee/five'
+import { requestAnimationFrameInterval } from './animationFrame'
+
+/**
+ * 模拟 `<Audio>` 事件。
+ */
+export type AudioLikeEvent = {
+  // 播放
+  play: () => void
+  // 语音状态 播放 -> 暂停
+  pause: () => void
+  // 语音时间刷新
+  timeupdate: () => void
+  // 播放
+  ended: () => void
+}
+
+
+/**
+ * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
+ */
+export class AudioLike extends Subscribe<AudioLikeEvent> {
+  private $timestamp = 0
+  private $currentTime = 0
+  private $duration = 0
+  private stopInterval?: () => void
+  muted = false
+  src = ''
+
+  setAttribute(name: string, value: string) {
+    // nothing todo
+  }
+
+  constructor({ duration }: { duration?: number } = {}) {
+    super()
+    if (duration) {
+      this.$duration = duration
+    }
+  }
+
+  play() {
+    if (this.$timestamp === 0) {
+      this.$timestamp = performance.now()
+    }
+    if (this.$currentTime === this.$duration) {
+      this.$currentTime = 0
+    }
+    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
+    this.emit('play')
+  }
+
+  pause() {
+    if (this.stopInterval) {
+      this.stopInterval()
+      this.emit('pause')
+      this.stopInterval = undefined
+    }
+    this.$timestamp = 0
+  }
+
+  requestAnimationFrameLoop() {
+    const now = performance.now()
+    this.$currentTime = now - this.$timestamp
+    this.emit('timeupdate')
+    if (this.$currentTime >= this.$duration - 10) {
+      this.$currentTime = this.$duration
+      this.pause()
+      this.emit('ended')
+    }
+  }
+
+  get currentTime() {
+    return this.$currentTime / 1000
+  }
+
+  set currentTime(time: number) {
+    this.$currentTime = time
+  }
+
+  get duration() {
+    return this.$duration
+  }
+
+  set duration(duration: number) {
+    this.pause()
+    this.$duration = duration
+    this.$timestamp = 0
+    this.$currentTime = 0
+  }
+
+  get ended() {
+    return this.$currentTime === this.$duration
+  }
+
+  get paused() {
+    return !this.stopInterval
+  }
+
+  addEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.on(evtName, callback)
+  }
+
+  removeEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.off(evtName, callback)
+  }
+}
+
+export default AudioLike