@realsee/vreo 1.0.0-alpha.2 → 1.0.0-alpha.21

package/lib/Player/modules/keyframes/BgMusic/index.js

@@ -17,6 +17,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function getAudio() {
+  var src = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var currentTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var audio = new Audio();
+  audio.src = src;
+  audio.currentTime = currentTime;
+  return audio;
+}
+
 function BgMusic() {
   var controller = (0, _hooks.useController)();
   var timeoutIdRef = React.useRef(null);
@@ -27,48 +40,54 @@ function BgMusic() {
     }
   }, []);
   React.useEffect(function () {
-    var audio = new Audio();
-    audio.setAttribute('id', 'vreo-singleton-bgmusic');
-    audio.style.display = 'none';
-    audio.setAttribute('playsinline', 'true');
-    audio.loop = true;
-    document.body.append(audio);
-
-    var callback = function callback(keyframe) {
-      var start = keyframe.start,
-          end = keyframe.end;
-      var _ref = keyframe.data,
-          url = _ref.url;
-      audio.src = url;
-
-      var playCallback = function playCallback() {
-        audio.play();
-      };
+    var callback = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(keyframe, currentTime) {
+        var start, end, audio, playCallback, cleanAudio, duration;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                start = keyframe.start, end = keyframe.end;
+                audio = getAudio(keyframe.data.url, Math.max((currentTime - start) / 1000, 0));
 
-      audio.addEventListener('canplaythrough', playCallback);
-      cleanTimeout();
+                playCallback = function playCallback() {
+                  audio.play();
+                };
 
-      var cleanAudio = function cleanAudio() {
-        audio.pause();
-        audio.currentTime = 0;
-        audio.src = '';
-        cleanTimeout();
-        audio.removeEventListener('canplaythrough', playCallback);
-      };
+                audio.addEventListener('canplaythrough', playCallback);
+                cleanTimeout();
 
-      var duration = end - start || 5000;
-      timeoutIdRef.current = setTimeout(function () {
-        cleanAudio();
-      }, duration);
-      controller.once('paused', function () {
-        cleanAudio();
-      });
-    };
+                cleanAudio = function cleanAudio() {
+                  audio.removeEventListener('canplaythrough', playCallback);
+                  audio.pause();
+                  cleanTimeout();
+                };
+
+                duration = end - start;
+                timeoutIdRef.current = setTimeout(function () {
+                  cleanAudio();
+                }, duration);
+                controller.once('paused', function () {
+                  cleanAudio();
+                });
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function callback(_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }();
 
     controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
     return function () {
+      console.log('off');
       controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
-      document.body.removeChild(audio);
       cleanTimeout();
     };
   });

package/lib/Player/modules/keyframes/PanoTag/index.js

@@ -53,7 +53,7 @@ function PanoTag() {
           end = keyframe.end,
           data = keyframe.data;
       var panoTagData = data;
-      var id = 'any-id';
+      var id = Date.now().toString();
       var pointType = _dnalogel.PointType.PointTag;
       var dimensionType = _dnalogel.DimensionType.Two;
       var position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z];
@@ -95,9 +95,9 @@ function PanoTag() {
       timeoutRef.current = setTimeout(function () {
         var _tag$hooks;
 
-        var id = Date.now(); // clear
-
+        // clear
         var tag = panoTagPlugin.current.getTagById(id);
+        if (!tag) return;
 
         if (tag.state) {
           tag.state.unfolded = false;

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

@@ -82,7 +82,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
       }
 
       if (this.$timestamp === null) {
-        this.$timestamp = performance.now() - this.$currentTime;
+        this.$timestamp = performance.now();
       }
 
       this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
@@ -106,7 +106,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) {
@@ -121,7 +122,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
       return this.$currentTime / 1000;
     },
     set: function set(time) {
-      this.$currentTime = time;
+      this.$currentTime = time * 1000;
     }
   }, {
     key: "duration",
@@ -129,10 +130,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/typings/VreoUnit.d.ts

@@ -77,7 +77,7 @@ export interface VreoVideo {
     end: number;
     url: string;
     avatar?: {
-        url: string;
+        url?: string;
         force?: true;
     };
 }
@@ -85,10 +85,10 @@ export interface VreoVideo {
  * 剧本结构
  */
 export interface VreoUnit {
-    categoryId: string;
-    categoryText: string;
-    frontRequestId: string;
-    index: string | number;
+    categoryId?: string;
+    categoryText?: string;
+    frontRequestId?: string;
+    index?: string | number;
     keyframes: VreoKeyframe[];
     video: VreoVideo;
 }
@@ -96,7 +96,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.2",
+  "version": "1.0.0-alpha.21",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -12,8 +12,6 @@
   "private": false,
   "files": [
     "lib",
-    "resources",
-    "docs",
     "stylesheets",
     "LICENSE",
     "CHANGELOG.md"
@@ -36,7 +34,6 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/dnalogel": "^2.1.0-alpha.17",
     "@realsee/five": "5.0.0-alpha.149",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
@@ -52,6 +49,7 @@
     "vite": "^2.6.14"
   },
   "dependencies": {
+    "@realsee/dnalogel": "^2.1.0-alpha.29",
     "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
     "mobx": "^6.3.7",

package/stylesheets/default.css

@@ -106,10 +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;
@@ -304,7 +312,7 @@
 
 .vreo-prompter-text {
   position: absolute;
-  height: 0;
+  height: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -327,7 +335,6 @@
 }
 
 .vreo-prompter-innerText {
-  position: absolute;
   font-weight: bold;
   font-size: 14px;
   word-break: break-all;
@@ -855,8 +862,8 @@
 
 .vreo-app .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1,
 .vreo-app[data-size="S"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
-  font-size: 20px;
-  line-height: 28px;
+  font-size: 16px;
+  line-height: 22px;
 }
 .vreo-app[data-size="M"][data-orientation="landscape"] .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
   font-size: 14px;

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); }