@realsee/vreo 1.0.0-alpha.9 → 1.1.0-dev.0

package/lib/shared-utils/{AduioLike.js → AudioLike.js}

@@ -53,7 +53,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
         this.$currentTime = 0;
       }
       if (this.$timestamp === null) {
-        this.$timestamp = performance.now() - this.$currentTime;
+        this.$timestamp = performance.now();
       }
       this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
         return _this2.requestAnimationFrameLoop();
@@ -75,7 +75,8 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
     value: function requestAnimationFrameLoop() {
       if (this.$timestamp === null) return;
       var now = performance.now();
-      this.$currentTime = now - this.$timestamp;
+      this.$currentTime += now - this.$timestamp;
+      this.$timestamp = now;
       this.emit('timeupdate');
       if (this.$currentTime >= this.$duration - 10) {
         this.$currentTime = this.$duration;
@@ -89,7 +90,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
       return this.$currentTime / 1000;
     },
     set: function set(time) {
-      this.$currentTime = time;
+      this.$currentTime = time * 1000;
     }
   }, {
     key: "duration",
@@ -97,10 +98,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
       return this.$duration;
     },
     set: function set(duration) {
-      this.pause();
       this.$duration = duration;
-      this.$timestamp = null;
-      this.$currentTime = 0;
     }
   }, {
     key: "ended",

package/lib/shared-utils/animationFrame/tween.d.ts

@@ -1,61 +1,6 @@
-import * as TWEEN from '@tweenjs/tween.js';
-export declare const Easing: {
-    Linear: {
-        None: (amount: number) => number;
-    };
-    Quadratic: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Cubic: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Quartic: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Quintic: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Sinusoidal: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Exponential: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Circular: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Elastic: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Back: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-    Bounce: {
-        In: (amount: number) => number;
-        Out: (amount: number) => number;
-        InOut: (amount: number) => number;
-    };
-};
-interface ITween<T> extends TWEEN.Tween<T> {
-    onDestroy: (fn: () => void) => TWEEN.Tween<T>;
+import { Tween, Easing } from '@tweenjs/tween.js';
+interface ITween<T> extends Tween<T> {
+    onDestroy: (fn: () => void) => Tween<T>;
     destroy: () => void;
 }
 /**

package/lib/shared-utils/animationFrame/tween.js

@@ -1,18 +1,12 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Easing = void 0;
 exports["default"] = tween;
 exports.tweenProgress = tweenProgress;
-var TWEEN = _interopRequireWildcard(require("@tweenjs/tween.js"));
+var _tween = require("@tweenjs/tween.js");
 var _index = require("./index");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var Easing = TWEEN.Easing;
-exports.Easing = Easing;
 /**
  * 对象变化的补间动画
  * 1. 应用 requestAnimationFrameInterval 做 update
@@ -24,8 +18,8 @@ exports.Easing = Easing;
  * @param easing 过程动画，默认是 Easing.Linear.None
  */
 function tween(from, to, duration) {
-  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Easing.Linear.None;
-  var tween = new TWEEN.Tween(from).to(to, duration).easing(easing);
+  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _tween.Easing.Linear.None;
+  var tween = new _tween.Tween(from).to(to, duration).easing(easing);
   // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
   (0, _index.nextFrame)(function () {
     return tween.start(0);

package/lib/typings/VreoUnit.d.ts

@@ -85,10 +85,13 @@ export interface VreoVideo {
  * 剧本结构
  */
 export interface VreoUnit {
-    categoryId: string;
-    categoryText: string;
-    frontRequestId: string;
-    index: string | number;
+    categoryId?: string;
+    categoryText?: string;
+    frontRequestId?: string;
+    index?: string | number;
+    configure?: {
+        pageTitle?: string;
+    };
     keyframes: VreoKeyframe[];
     video: VreoVideo;
 }
@@ -96,7 +99,7 @@ export interface VreoUnit {
  * 剧本事件
  */
 export declare type VreoKeyframeEvent = {
-    [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
+    [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe, currentTime: number) => void;
 } & {
     loaded: (vreoUnit: VreoUnit) => void;
     paused: (ended?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "1.0.0-alpha.9",
+  "version": "1.1.0-dev.0",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -12,8 +12,6 @@
   "private": false,
   "files": [
     "lib",
-    "resources",
-    "docs",
     "stylesheets",
     "LICENSE",
     "CHANGELOG.md"
@@ -26,7 +24,10 @@
     "packages": "node ./dev-tools/build-packages.js"
   },
   "peerDependencies": {
-    "@realsee/five": "^5.0.0-alpha.103",
+    "@realsee/five": "^5.0.0",
+    "@realsee/dnalogel": "^2.3.3",
+    "@tweenjs/tween.js": "18.6.4",
+    "three": ">=0.115.0 <=0.117.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
@@ -36,8 +37,10 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/dnalogel": "^2.1.0-alpha.18",
+    "@realsee/dnalogel": "^2.3.3",
     "@realsee/five": "5.0.0-alpha.149",
+    "@tweenjs/tween.js": "18.6.4",
+    "@types/node": "^18.11.17",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -52,7 +55,6 @@
     "vite": "^2.6.14"
   },
   "dependencies": {
-    "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
     "mobx": "^6.3.7",
     "mobx-react": "^7.2.1"

package/stylesheets/default.css

@@ -106,12 +106,18 @@
 }
 
 .vreo-wave {
+  width: 100%;
   position: absolute;
   background-color: transparent;
   border: none;
   bottom: 0;
 }
 
+@keyframes vreo-wave-keyframes {
+  0% { background-position: 0 0; }
+  100% { background-position: 0 100%; }
+}
+
 /* @keyframes panel-sprites-animation {
   0% {
     background-position: 0 0;
@@ -306,7 +312,7 @@
 
 .vreo-prompter-text {
   position: absolute;
-  height: 0;
+  height: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -329,7 +335,6 @@
 }
 
 .vreo-prompter-innerText {
-  position: absolute;
   font-weight: bold;
   font-size: 14px;
   word-break: break-all;

package/docs/.nojekyll

@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/custom.css

@@ -1,78 +0,0 @@
-body {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  font-size: 16px;
-  color: #2e2e2e;
-}
-
-blockquote {
-  color: #7f8fa4;
-  padding: 8px 12px;
-  margin: 16px 0;
-  border-left: 3px solid #eaeaea;
-}
-
-blockquote p {
-  color: #7f8fa4 !important;
-  font-size: inherit;
-  line-height: 1.5;
-  margin: 0 !important;
-}
-
-.tsd-typography {
-  font-size: 16px;
-}
-
-.tsd-typography h4 {
-  line-height: 2;
-}
-
-.hljs {
-  background-color: transparent;
-  font-family: monospace;
-  font-size: 0.85rem;
-}
-code {
-  font-size: 14px;
-  background-color: rgb(96 125 139 / 10%);
-}
-
-pre {
-  background-color: rgb(205 220 57 / 8%);
-}
-
-p {
-  line-height: 1.5;
-}
-
-a {
-  color: #3832cf;
-}
-
-a:hover {
-  color: darkred;
-}
-
-body.dark {
-  color: #e9e9e9;
-}
-
-.dark a {
-  color: var(--color-link);
-}
-
-.dark a:hover {
-  color: #ed8e9f;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    color: #e9e9e9;
-  }
-  a {
-    color: var(--color-link);
-  }
-
-  a:hover {
-    color: #ed8e9f;
-  }
-}

package/docs/assets/highlight.css

@@ -1,127 +0,0 @@
-:root {
-    --light-hl-0: #000000;
-    --dark-hl-0: #D4D4D4;
-    --light-hl-1: #008000;
-    --dark-hl-1: #6A9955;
-    --light-hl-2: #AF00DB;
-    --dark-hl-2: #C586C0;
-    --light-hl-3: #0000FF;
-    --dark-hl-3: #569CD6;
-    --light-hl-4: #001080;
-    --dark-hl-4: #9CDCFE;
-    --light-hl-5: #A31515;
-    --dark-hl-5: #CE9178;
-    --light-hl-6: #0070C1;
-    --dark-hl-6: #4FC1FF;
-    --light-hl-7: #795E26;
-    --dark-hl-7: #DCDCAA;
-    --light-hl-8: #267F99;
-    --dark-hl-8: #4EC9B0;
-    --light-hl-9: #800000;
-    --dark-hl-9: #808080;
-    --light-hl-10: #800000;
-    --dark-hl-10: #569CD6;
-    --light-hl-11: #FF0000;
-    --dark-hl-11: #9CDCFE;
-    --light-hl-12: #000000FF;
-    --dark-hl-12: #D4D4D4;
-    --light-hl-13: #0451A5;
-    --dark-hl-13: #9CDCFE;
-    --light-hl-14: #098658;
-    --dark-hl-14: #B5CEA8;
-    --light-code-background: #F5F5F5;
-    --dark-code-background: #1E1E1E;
-}
-
-@media (prefers-color-scheme: light) { :root {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --hl-9: var(--light-hl-9);
-    --hl-10: var(--light-hl-10);
-    --hl-11: var(--light-hl-11);
-    --hl-12: var(--light-hl-12);
-    --hl-13: var(--light-hl-13);
-    --hl-14: var(--light-hl-14);
-    --code-background: var(--light-code-background);
-} }
-
-@media (prefers-color-scheme: dark) { :root {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --hl-9: var(--dark-hl-9);
-    --hl-10: var(--dark-hl-10);
-    --hl-11: var(--dark-hl-11);
-    --hl-12: var(--dark-hl-12);
-    --hl-13: var(--dark-hl-13);
-    --hl-14: var(--dark-hl-14);
-    --code-background: var(--dark-code-background);
-} }
-
-body.light {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --hl-9: var(--light-hl-9);
-    --hl-10: var(--light-hl-10);
-    --hl-11: var(--light-hl-11);
-    --hl-12: var(--light-hl-12);
-    --hl-13: var(--light-hl-13);
-    --hl-14: var(--light-hl-14);
-    --code-background: var(--light-code-background);
-}
-
-body.dark {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --hl-9: var(--dark-hl-9);
-    --hl-10: var(--dark-hl-10);
-    --hl-11: var(--dark-hl-11);
-    --hl-12: var(--dark-hl-12);
-    --hl-13: var(--dark-hl-13);
-    --hl-14: var(--dark-hl-14);
-    --code-background: var(--dark-code-background);
-}
-
-.hl-0 { color: var(--hl-0); }
-.hl-1 { color: var(--hl-1); }
-.hl-2 { color: var(--hl-2); }
-.hl-3 { color: var(--hl-3); }
-.hl-4 { color: var(--hl-4); }
-.hl-5 { color: var(--hl-5); }
-.hl-6 { color: var(--hl-6); }
-.hl-7 { color: var(--hl-7); }
-.hl-8 { color: var(--hl-8); }
-.hl-9 { color: var(--hl-9); }
-.hl-10 { color: var(--hl-10); }
-.hl-11 { color: var(--hl-11); }
-.hl-12 { color: var(--hl-12); }
-.hl-13 { color: var(--hl-13); }
-.hl-14 { color: var(--hl-14); }
-pre, code { background: var(--code-background); }