@realsee/vreo 2.6.2 → 2.6.4-alpha.2

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

@@ -1,24 +1,12 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 import classNames from 'classnames';
 import * as React from 'react';
 // import { Preloader } from '../../../../shared-utils/Preloader'
 import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
-import { useController, useFiveInstance } from "../../../hooks.js";
-var inlinePlay = function inlinePlay(videoInstance) {
-  if (!videoInstance) return;
-  var canplaythrough = function canplaythrough() {
-    videoInstance.removeEventListener('canplaythrough', canplaythrough);
-    try {
-      videoInstance.play();
-    } catch (error) {}
-  };
-  videoInstance.addEventListener('canplaythrough', canplaythrough);
-  videoInstance.load();
-};
-
-// const emptyVideo = '//vr-static.realsee-cdn.cn/release/web/leisure.69fd3522.mov'
+import { useController, useFiveInstance } from "../../../hooks.js"; // const emptyVideo = '//vr-static.realsee-cdn.cn/release/web/leisure.69fd3522.mov'
 var PI = Math.PI;
 var PI_2 = PI * 2;
 export function VideoEffect() {
@@ -36,46 +24,75 @@ export function VideoEffect() {
     videoRef.current.src = blob;
   };
   React.useEffect(function () {
+    var generation = 0;
+    var removeCanPlay;
     var callback = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyframe) {
-        var start, end, _ref2, videoSrc, fov, direction, panoIndex, vector, _ref3, _ref4, longitude, latitude;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                start = keyframe.start, end = keyframe.end;
-                _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, fov = _ref2.fov, direction = _ref2.direction, panoIndex = _ref2.panoIndex, vector = _ref2.vector;
-                _ref3 = function () {
-                  if (vector) {
-                    return [vector.longitude, vector.latitude];
-                  }
-                  if (!direction) {
-                    return [0, 0];
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(keyframe) {
+        var _removeCanPlay;
+        var current, start, end, _ref2, videoSrc, fov, direction, panoIndex, vector, _ref3, _ref4, longitude, latitude, active, valid, video, play;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              current = ++generation;
+              start = keyframe.start, end = keyframe.end;
+              _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, fov = _ref2.fov, direction = _ref2.direction, panoIndex = _ref2.panoIndex, vector = _ref2.vector;
+              _ref3 = function () {
+                if (vector) {
+                  return [vector.longitude, vector.latitude];
+                }
+                if (!direction) {
+                  return [0, 0];
+                }
+                var longitude = -Math.atan2(direction.x, -direction.z);
+                longitude = (longitude % PI_2 + PI_2) % PI_2;
+                var latitude = -Math.asin(direction.y / 1);
+                return [longitude, latitude];
+              }(), _ref4 = _slicedToArray(_ref3, 2), longitude = _ref4[0], latitude = _ref4[1];
+              if (timeoutRef.current) clearTimeout(timeoutRef.current);
+              if (videoRef.current) {
+                videoRef.current.muted = true;
+                videoRef.current.pause();
+              }
+              five.setState({
+                fov: fov,
+                panoIndex: panoIndex,
+                longitude: longitude,
+                latitude: latitude
+              }, true);
+              setBlobSrc(videoSrc);
+              (_removeCanPlay = removeCanPlay) === null || _removeCanPlay === void 0 || _removeCanPlay();
+              active = controller.audioFocus.capture();
+              valid = function valid() {
+                return current === generation && active();
+              };
+              video = videoRef.current;
+              if (!(!video || !valid())) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2);
+            case 1:
+              play = function play() {
+                var _removeCanPlay2;
+                (_removeCanPlay2 = removeCanPlay) === null || _removeCanPlay2 === void 0 || _removeCanPlay2();
+                if (!valid()) return;
+                video.muted = false;
+                void video.play().catch(function (error) {
+                  if (valid()) {
+                    controller.audioFocus.cancel('paused');
+                    console.error(error);
                   }
-                  var longitude = -Math.atan2(direction.x, -direction.z);
-                  longitude = (longitude % PI_2 + PI_2) % PI_2;
-                  var latitude = -Math.asin(direction.y / 1);
-                  return [longitude, latitude];
-                }(), _ref4 = _slicedToArray(_ref3, 2), longitude = _ref4[0], latitude = _ref4[1];
-                five.setState({
-                  fov: fov,
-                  panoIndex: panoIndex,
-                  longitude: longitude,
-                  latitude: latitude
-                }, true);
-                setBlobSrc(videoSrc);
-                inlinePlay(videoRef.current);
-                setVisible(true);
-                timeoutRef.current = setTimeout(function () {
-                  var _videoRef$current;
-                  (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.pause();
-                  setVisible(false);
-                  setBlobSrc('');
-                }, end - start);
-              case 8:
-              case "end":
-                return _context.stop();
-            }
+                });
+              };
+              removeCanPlay = function removeCanPlay() {
+                return video.removeEventListener('canplaythrough', play);
+              };
+              video.addEventListener('canplaythrough', play);
+              video.load();
+              setVisible(true);
+              timeoutRef.current = setTimeout(destroy, Math.max(0, end - start));
+            case 2:
+              return _context.a(2);
           }
         }, _callee);
       }));
@@ -85,21 +102,21 @@ export function VideoEffect() {
     }();
     controller.on(VreoKeyframeEnum.VideoEffect, callback);
     var destroy = function destroy() {
-      var _videoRef$current2;
+      var _removeCanPlay3, _videoRef$current;
+      ++generation;
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
-      (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause();
+      (_removeCanPlay3 = removeCanPlay) === null || _removeCanPlay3 === void 0 || _removeCanPlay3();
+      if (videoRef.current) videoRef.current.muted = true;
+      (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 || _videoRef$current.pause();
       setVisible(false);
       setBlobSrc('');
     };
-    controller.on('paused', function () {
-      return destroy();
-    });
-    controller.on('ended', function () {
-      return destroy();
-    });
+    var remove = controller.audioFocus.add(destroy);
     return function () {
+      destroy();
+      remove();
       controller.off(VreoKeyframeEnum.VideoEffect, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -107,27 +124,23 @@ export function VideoEffect() {
     };
   }, [controller]);
   React.useEffect(function () {
-    var _controller$configs, _controller$configs$v;
+    var _controller$configs;
     if (!ref.current) return;
-    var video = ((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.videoEffect) || document.createElement('video');
+    var video = ((_controller$configs = controller.configs) === null || _controller$configs === void 0 || (_controller$configs = _controller$configs.videos) === null || _controller$configs === void 0 ? void 0 : _controller$configs.videoEffect) || document.createElement('video');
     // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
     video.setAttribute('playsinline', 'true');
     video.setAttribute('webkit-playsinline', 'true');
-    video.setAttribute('autoplay', 'true');
+    video.autoplay = false;
+    video.muted = true;
     video.setAttribute('key', 'VideoEffect-video');
     video.setAttribute('class', 'VideoEffect-video');
     videoRef.current = video;
     ref.current.append(videoRef.current);
-    document.addEventListener('WeixinJSBridgeReady', function () {
-      var _videoRef$current3;
-      (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 ? void 0 : _videoRef$current3.play();
-    }, false);
-    if (!ref.current) return;
-    // const asyncfunc = async () => {
-    //   setBlobSrc(await URL.createObjectURL(await Preloader.blob(emptyVideo)))
-    //   inlinePlay(videoRef.current)
-    // }
-    // asyncfunc()
+    return function () {
+      video.muted = true;
+      video.pause();
+      video.remove();
+    };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/lib/Player/typings.d.ts

@@ -1,8 +1,10 @@
+import type { AudioFocusHost } from './AudioFocus';
 import React, { ReactNode } from 'react';
 import { Subscribe, Five } from '@realsee/five';
 import { VreoKeyframe, VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
 import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 export interface PlayerConfigs {
+    audioFocus?: AudioFocusHost;
     /**
      * @deprecated rename to container
      */
@@ -37,6 +39,13 @@ export interface PlayerConfigs {
     waveStaticPrefix?: string;
     onAvatarClick?: () => any;
     onWaveClick?: () => any;
+    /**
+     * 是否等待背景音乐加载完成后再播放
+     * - true: 等待音频完全可播放（canplaythrough）后再播放，确保不会卡顿
+     * - false: 立即播放，边加载边播放（默认行为）
+     * @default false
+     */
+    waitForBgMusicLoaded?: boolean;
 }
 export type AppSize = 'S' | 'M' | 'L' | 'XL';
 export type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';
@@ -45,6 +54,7 @@ export interface Appearance {
 }
 export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
 export interface CustomVreoKeyframeProps {
+    audioFocus: AudioFocusHost;
     subscribe: Pick<Subscribe<{
         [key: string]: (data: VreoKeyframe, currentTime: number) => any;
     }>, 'on' | 'once' | 'off'>;

package/lib/fivePlugins/CSS3DRenderPlugin/index.js

@@ -28,7 +28,7 @@ export var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
     });
     var config = params[1];
     if ((points === null || points === void 0 ? void 0 : points.length) < 4) return console.error('points must be equal or greater than than 4');
-    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 ? void 0 : (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
+    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 || (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
     var fiveElement = five.getElement();
     if (!fiveElement) return console.error('five.getElement() is ' + fiveElement);
     var disposers = [];
@@ -92,16 +92,16 @@ export var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
         css3DRenderer.domElement.style.top = '0';
         css3DRenderer.domElement.style.userSelect = 'none';
         css3DRenderer.domElement.style.pointerEvents = 'none';
-        var renderEveryFrame = function renderEveryFrame() {
+        var _renderEveryFrame = function renderEveryFrame() {
           if (stopRenderFlag) return;
-          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+          requestAnimationFrameId = requestAnimationFrame(_renderEveryFrame);
           css3DRenderer.render(scene, five.camera);
         };
         return function () {
           var _resizeObserver, _resizeObserver$obser;
           scene.add(css3DObject);
-          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 ? void 0 : _resizeObserver$obser.call(_resizeObserver);
-          renderEveryFrame();
+          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 || _resizeObserver$obser.call(_resizeObserver);
+          _renderEveryFrame();
           if (mode === 'behind' && mesh) {
             five.scene.add(mesh);
             disposers.push(function () {
@@ -138,7 +138,7 @@ export var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
         if (mode === 'behind') state.behindMode = undefined;
         if (!state.behindMode && !state.frontMode) {
           var _resizeObserver2, _resizeObserver2$unob;
-          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 ? void 0 : _resizeObserver2$unob.call(_resizeObserver2);
+          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 || (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 || _resizeObserver2$unob.call(_resizeObserver2);
         }
       }
       return true;