@realsee/vreo 0.2.0-alpha.10 → 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/lib/typings/VreoUnit.d.ts

@@ -187,8 +187,22 @@ export declare enum PanoTagEnum {
     Text = "Text",
     Image = "Image"
 }
+/**
+ * 标签样式种类
+ */
+export declare enum PanoTagStyleEnum {
+    /**
+     * 生长动画：默认值
+     */
+    Growth = "Growth",
+    /**
+     * 展开动画
+     */
+    Expand = "Expand"
+}
 export declare type PanoTagData = {
     type: PanoTagEnum;
+    style: PanoTagStyleEnum;
     text: string;
     vertex: Vertex;
     imgUrl?: string;

package/lib/typings/VreoUnit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagStyleEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
@@ -30,6 +30,10 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
  * 全景标签枚举
  */
 var PanoTagEnum;
+/**
+ * 标签样式种类
+ */
+
 exports.PanoTagEnum = PanoTagEnum;
 
 (function (PanoTagEnum) {
@@ -37,6 +41,14 @@ exports.PanoTagEnum = PanoTagEnum;
   PanoTagEnum["Image"] = "Image";
 })(PanoTagEnum || (exports.PanoTagEnum = PanoTagEnum = {}));
 
+var PanoTagStyleEnum;
+exports.PanoTagStyleEnum = PanoTagStyleEnum;
+
+(function (PanoTagStyleEnum) {
+  PanoTagStyleEnum["Growth"] = "Growth";
+  PanoTagStyleEnum["Expand"] = "Expand";
+})(PanoTagStyleEnum || (exports.PanoTagStyleEnum = PanoTagStyleEnum = {}));
+
 /**
  * 全景特效枚举
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.10",
+  "version": "0.2.0-alpha.13",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -21,13 +21,13 @@
     "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": {
     "@realsee/five": "^5.0.0-alpha.103",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",

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)
-      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
   }
@@ -140,8 +149,13 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     return !this.controller.playing
   }
 
-  play() {
+  play(currentTime?: number) {
     if (this.controller.playing) return true
+    if (currentTime && this.controller.videoInstance) {
+      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,21 +209,33 @@ 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 = '') {
+  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 = 0
+      this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()
       return true
     }
@@ -216,7 +246,7 @@ export class VideoAgentMesh extends THREE.Mesh {
 
     return await new Promise((resolve) =>
       setTimeout(async () => {
-        this.videoInstance.currentTime = 0
+        this.videoInstance.currentTime = currentTime
         await this.videoInstance.play()
         resolve(true)
       }, 20),

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/Player/modules/keyframes/ModelVideo/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import * as THREE from 'three'
+import { useController, useFiveInstance } from '../../../hooks'
 import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
 import { createTransMatrix } from '../../../../shared-utils/createTransMatrix'
 import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
 
 export function ModelVideo() {
   const controller = useController()

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

@@ -2,13 +2,21 @@ import classNames from 'classnames'
 import * as React from 'react'
 import { Vector3 } from 'three'
 import { useController, useFiveInstance, useFiveProject2d } from '../../../hooks'
-import { PanoTagData, PanoTagEnum, Vertex, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import {
+  PanoTagData,
+  PanoTagEnum,
+  PanoTagStyleEnum,
+  Vertex,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 
 export function PanoTag() {
   const [state, setState] = React.useState<{
     vertex: Vertex
     text?: string
     type: PanoTagEnum
+    style?: PanoTagStyleEnum
     imgUrl?: string
   } | null>(null)
 
@@ -30,6 +38,7 @@ export function PanoTag() {
       const vertex = panoTagData.vertex
       const { x, y, z } = panoTagData.vertex
       const res = project2d(new Vector3(x, y, z))
+
       if (!res) return
       const { x: left, y: top } = res
       setState({
@@ -37,6 +46,7 @@ export function PanoTag() {
         text: panoTagData.text || PanoTagEnum.Text,
         type: panoTagData.type,
         imgUrl: panoTagData.imgUrl,
+        style: panoTagData.style || PanoTagStyleEnum.Growth,
       })
       setPos({ left, top })
       timeoutRef.current = setTimeout(() => {
@@ -92,6 +102,25 @@ export function PanoTag() {
     return undefined
   })()
 
+  if (state?.style === PanoTagStyleEnum.Expand) {
+    return (
+      <>
+        <div
+          className={classNames('PanoTag', {
+            'PanoTag--expand': true,
+            'PanoTag--notHidden': state,
+          })}
+          style={{
+            left: (pos?.left || 0) + 'px',
+            top: (pos?.top || 0) + 'px',
+          }}
+        >
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
+          <div className="PanoTag-guideline"></div>
+        </div>
+      </>
+    )
+  }
   return (
     <>
       <div
@@ -109,17 +138,7 @@ export function PanoTag() {
             <span className="PanoTag-slashline"></span>
             <span className="PanoTag-straightline"></span>
           </span>
-          <div
-            onClick={() => {
-              if (state?.imgUrl) {
-                // @TODO
-                // setDrawerVisible(true)
-              }
-            }}
-            className={'PanoTag-box PanoTag-box--' + (state?.type || '')}
-          >
-            {boxContent}
-          </div>
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
         </div>
       </div>
     </>

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

@@ -26,7 +26,8 @@ export function Prompter() {
 
       ref.current = setTimeout(() => {
         setHidden(true)
-        setTimeout(() => setText(''), 500)
+        setText('')
+        // setTimeout(() => setText(''), 500)
 
         if (ref.current) clearTimeout(ref.current)
         ref.current = null

package/resources/react/index.tsx

@@ -54,7 +54,7 @@ export interface VreoActionCallbacks {
   /**
    * 播放。
    */
-  play: () => void
+  play: (currentTime?: number) => void
   /**
    * 暂停。
    */
@@ -81,7 +81,7 @@ export function useVreoAction() {
     [player]
   )
 
-  const play = React.useCallback(() => player.play(), [player])
+  const play = React.useCallback((currentTime?: number) => player.play(currentTime || 0), [player])
   const pause = React.useCallback(() => player.pause(), [player])
   const show = React.useCallback(() => player.show(), [player])
   const hide = React.useCallback(() => player.hide(), [player])