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

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -15,6 +15,8 @@ var _mobx = require("mobx");
 
 var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
 
+var _getMediaInfo = require("../../../shared-utils/getMediaInfo");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -86,6 +88,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       } else {
         var videoInstance = document.createElement('video');
         videoInstance.style.opacity = '0';
+        videoInstance.style.pointerEvents = 'none';
         videoInstance.style.display = 'none';
         document.body.append(videoInstance);
         options.videoInstance = videoInstance;
@@ -123,10 +126,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         audioInstance.crossOrigin = ''; // videoInstance.muted = true
 
         audioInstance.muted = false;
-        audioInstance.setAttribute('playsinline', 'true');
-        audioInstance.setAttribute('webkit-playsinline', 'true');
-        audioInstance.setAttribute('autoplay', 'false');
-        audioInstance.setAttribute('style', 'display: none;');
+        audioInstance.autoplay = false;
+        audioInstance.style.display = 'none';
         document.body.appendChild(audioInstance);
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
@@ -155,7 +156,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     };
 
     var onEnded = function onEnded() {
-      console.log('vreo: video 播放结束');
+      return console.log('vreo: video 播放结束');
     };
 
     _this.audioInstance.addEventListener('pause', onPause);
@@ -192,15 +193,13 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
   }
 
   _createClass(VideoAgentMesh, [{
-    key: "videoInstance",
+    key: "mediaInstance",
     get: function get() {
-      var _this$videoUrl;
-
       if (!this.videoUrl) {
         return this.audioLikeInstance;
       }
 
-      if ((_this$videoUrl = this.videoUrl) !== null && _this$videoUrl !== void 0 && _this$videoUrl.endsWith('mp3')) {
+      if ((0, _getMediaInfo.getMediaType)(this.videoUrl) === 'audio') {
         return this.audioInstance;
       }
 
@@ -227,16 +226,22 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 return _context.abrupt("return");
 
               case 2:
-                this.videoUrl = videoUrl;
+                this.videoUrl = videoUrl; // // 兼容非视频场景
+                // if (this.mediaInstance instanceof HTMLAudioElement) {
+                //   this.mediaInstance.style.display = 'none'
+                // } else if (this.mediaInstance instanceof HTMLVideoElement) {
+                //   this.mediaInstance.style.display = 'block'
+                // }
+
                 this.freeze = true;
                 _context.next = 6;
-                return this.videoInstance.pause();
+                return this.mediaInstance.pause();
 
               case 6:
                 uniforms = this.material.uniforms;
-                this.videoInstance.muted = true;
+                this.mediaInstance.muted = true;
 
-                if (!(this.options.preload || this.options.preload === undefined || this.videoUrl.endsWith('.mp4'))) {
+                if (!(this.options.preload || this.options.preload === undefined || (0, _getMediaInfo.getMediaType)(this.videoUrl) === 'video')) {
                   _context.next = 18;
                   break;
                 }
@@ -259,21 +264,19 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 _context.t0 = this.videoUrl;
 
               case 19:
-                this.videoInstance.src = _context.t0;
-                this.videoInstance.setAttribute('data-src', this.videoUrl);
+                this.mediaInstance.src = _context.t0;
+                this.mediaInstance.setAttribute('data-src', this.videoUrl);
 
                 onStart = function onStart() {
-                  var _this2$videoUrl;
-
-                  if (_this2.videoInstance.currentTime === 0) return;
+                  if (_this2.mediaInstance.currentTime === 0) return;
                   _this2.freeze = false;
-                  _this2.videoInstance.muted = false;
-                  uniforms.enable.value = (_this2$videoUrl = _this2.videoUrl) !== null && _this2$videoUrl !== void 0 && _this2$videoUrl.endsWith('.mp4') ? 1 : 0;
+                  _this2.mediaInstance.muted = false;
+                  uniforms.enable.value = (0, _getMediaInfo.getMediaType)(_this2.videoUrl) ? 1 : 0;
 
-                  _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
+                  _this2.mediaInstance.removeEventListener('timeupdate', onStart, false);
                 };
 
-                this.videoInstance.addEventListener('timeupdate', onStart, false);
+                this.mediaInstance.addEventListener('timeupdate', onStart, false);
 
               case 23:
               case "end":
@@ -314,12 +317,12 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 }
 
                 if (this.currentTime) {
-                  this.videoInstance.currentTime = currentTime;
+                  this.mediaInstance.currentTime = currentTime;
                 }
 
-                this.videoInstance.duration = duration;
+                this.mediaInstance.duration = duration;
                 this.videoUrl = '';
-                this.videoInstance.play();
+                this.mediaInstance.play();
                 return _context3.abrupt("return", true);
 
               case 10:
@@ -334,7 +337,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 }
 
                 _context3.next = 14;
-                return this.videoInstance.play();
+                return this.mediaInstance.play();
 
               case 14:
                 _context3.next = 17;
@@ -347,36 +350,34 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 return _context3.abrupt("return", true);
 
               case 18:
-                console.log('play', videoUrl, this.videoUrl);
-
                 if (!(videoUrl === this.videoUrl)) {
-                  _context3.next = 24;
+                  _context3.next = 23;
                   break;
                 }
 
-                this.videoInstance.currentTime = currentTime;
-                _context3.next = 23;
-                return this.videoInstance.play();
+                this.mediaInstance.currentTime = currentTime;
+                _context3.next = 22;
+                return this.mediaInstance.play();
 
-              case 23:
+              case 22:
                 return _context3.abrupt("return", true);
 
-              case 24:
-                _context3.next = 26;
+              case 23:
+                _context3.next = 25;
                 return this.update(videoUrl);
 
-              case 26:
-                this.videoInstance.pause();
-                _context3.next = 29;
+              case 25:
+                this.mediaInstance.pause();
+                _context3.next = 28;
                 return new Promise(function (resolve) {
                   return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
                     return regeneratorRuntime.wrap(function _callee2$(_context2) {
                       while (1) {
                         switch (_context2.prev = _context2.next) {
                           case 0:
-                            _this3.videoInstance.currentTime = currentTime;
+                            _this3.mediaInstance.currentTime = currentTime;
                             _context2.next = 3;
-                            return _this3.videoInstance.play();
+                            return _this3.mediaInstance.play();
 
                           case 3:
                             resolve(true);
@@ -390,10 +391,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                   })), 20);
                 });
 
-              case 29:
+              case 28:
                 return _context3.abrupt("return", _context3.sent);
 
-              case 30:
+              case 29:
               case "end":
                 return _context3.stop();
             }
@@ -414,7 +415,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
   }, {
     key: "currentTime",
     get: function get() {
-      return this.videoInstance.currentTime * 1000;
+      return this.mediaInstance.currentTime * 1000;
     }
   }, {
     key: "dispose",

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -1,16 +1,12 @@
 import * as THREE from 'three';
-import { VideoAgentMesh } from './VideoAgentMesh';
+import { VideoAgentMesh, VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare class VideoAgentScene {
     videoAgentMesh: VideoAgentMesh;
     scene: THREE.Scene;
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
-    container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean, options?: {
-        videoInstance?: HTMLVideoElement;
-        audioInstance?: HTMLAudioElement;
-        preload?: boolean;
-    });
+    disposers: (() => void)[];
+    constructor(container?: HTMLElement, options?: VideoAgentMeshOptions);
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -9,6 +9,8 @@ exports.VideoAgentScene = void 0;
 
 var THREE = _interopRequireWildcard(require("three"));
 
+var _addResizeListener = require("../../../shared-utils/addResizeListener");
+
 var _VideoAgentMesh = require("./VideoAgentMesh");
 
 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); }
@@ -23,12 +25,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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; }
 
-var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container) {
+var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container, options) {
   var _this = this;
 
-  var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
   _classCallCheck(this, VideoAgentScene);
 
   _defineProperty(this, "scene", new THREE.Scene());
@@ -39,20 +38,12 @@ var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(contain
     alpha: true
   }));
 
-  _defineProperty(this, "run", function () {
-    var _this$videoAgentMesh$;
-
-    var domElement = _this.renderer.domElement; // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+  _defineProperty(this, "disposers", []);
 
+  _defineProperty(this, "run", function () {
+    // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(_this.videoAgentMesh.paused || _this.videoAgentMesh.freeze) && _this.videoAgentMesh.currentTime > 1000) {
       _this.renderer.render(_this.scene, _this.camera);
-    } // 兼容非视频场景
-
-
-    if (!((_this$videoAgentMesh$ = _this.videoAgentMesh.videoUrl) !== null && _this$videoAgentMesh$ !== void 0 && _this$videoAgentMesh$.endsWith('.mp4'))) {
-      if (domElement.style.display !== 'none') domElement.style.display = 'none';
-    } else {
-      if (domElement.style.display !== 'block') domElement.style.display = 'block';
     }
 
     requestAnimationFrame(_this.run);
@@ -62,27 +53,27 @@ var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(contain
     var _this$videoAgentMesh;
 
     (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
-  });
-
-  this.container = container;
-  this.camera.position.set(0, 0, 10);
-  this.camera.lookAt(0, 0, 0);
-  var state = {
-    width: container.offsetWidth,
-    height: container.offsetHeight
-  };
-  var _domElement = this.renderer.domElement;
-
-  _domElement.classList.add('VideoAgent-canvas');
 
-  this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-
-  _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
+    _this.disposers.forEach(function (disposer) {
+      return disposer === null || disposer === void 0 ? void 0 : disposer();
+    });
+  });
 
-  if (needRender) {
-    container.append(_domElement);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options); // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
+
+  if (container) {
+    this.camera.position.set(0, 0, 10);
+    this.camera.lookAt(0, 0, 0);
+    var domElement = this.renderer.domElement;
+    domElement.classList.add('VideoAgent-canvas');
+    var dispose = (0, _addResizeListener.addResizeListener)(container, function (width, height) {
+      _this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+
+      domElement.style.width = "".concat(width, "px");
+      domElement.style.height = "".concat(height, "px");
+    });
+    this.disposers.push(dispose);
+    container.append(domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }

package/lib/Player/modules/VideoAgent/index.js

@@ -13,38 +13,79 @@ var _hooks = require("../../hooks");
 
 var _VideoAgentScene = require("./VideoAgentScene");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 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; }
 
 function VideoAgent(props) {
+  var _controller$avatar2;
+
   var ref = React.useRef(null);
   var controller = (0, _hooks.useController)();
+  var showAvatar = React.useMemo(function () {
+    var _controller$avatar;
+
+    return ((_controller$avatar = controller.avatar) === null || _controller$avatar === void 0 ? void 0 : _controller$avatar.url) && controller.avatar.force === true;
+  }, [controller.avatar]);
+  var showVideoAgent = React.useMemo(function () {
+    var _controller$videoAgen;
+
+    if (showAvatar) return false;
+    return ((_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.videoAgentMesh.mediaInstance) instanceof HTMLVideoElement;
+  }, [controller.videoAgentScene]);
   React.useEffect(function () {
     if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...');
 
     if (controller.videoAgentScene) {
-      console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...');
+      console.warn('VideoAgentScene" 重复初始化，已被过滤');
       return;
     }
 
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, true, props.options || {});
+    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, props.options);
     controller.videoAgentScene = videoAgentScene;
     return function () {
-      var _controller$videoAgen;
+      var _controller$videoAgen2;
 
       controller.dispose();
-      (_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.dispose();
+      (_controller$videoAgen2 = controller.videoAgentScene) === null || _controller$videoAgen2 === void 0 ? void 0 : _controller$videoAgen2.dispose();
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "VideoAgent",
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "Avatar",
+    style: {
+      display: showAvatar ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Avatar-wrapper ratio-1-1"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "Avatar-img",
+    src: (_controller$avatar2 = controller.avatar) === null || _controller$avatar2 === void 0 ? void 0 : _controller$avatar2.url,
     onClick: function onClick() {
-      if (!props.onClick) return;
-      props.onClick();
-    },
+      var _props$onClick;
+
+      return (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])('VideoAgent', {
+      hide: !showVideoAgent
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-wrapper ratio-16-9"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-inner",
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
-    className: "VideoAgent-play"
-  }));
+    className: "VideoAgent-play",
+    onClick: function onClick() {
+      var _props$onClick2;
+
+      return (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 ? void 0 : _props$onClick2.call(props);
+    }
+  }))))));
 }

package/lib/Player/modules/Wave/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WaveAppearance } from '../../typings';
+export declare function Wave(props?: {
+    appearance?: WaveAppearance;
+}): JSX.Element;

package/lib/Player/modules/Wave/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wave = Wave;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Wave(props) {
+  var waveUrl = _react["default"].useMemo(function () {
+    var _props$appearance;
+
+    var appearance = (_props$appearance = props === null || props === void 0 ? void 0 : props.appearance) !== null && _props$appearance !== void 0 ? _props$appearance : 'solid';
+
+    switch (appearance) {
+      default:
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm';
+
+      case 'solid':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm';
+
+      case 'single':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm';
+
+      case 'double':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm';
+
+      case 'swap':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm';
+
+      case 'expand':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm';
+    }
+  }, [props === null || props === void 0 ? void 0 : props.appearance]);
+
+  return /*#__PURE__*/_react["default"].createElement("video", {
+    className: "vreo-wave",
+    width: "100%",
+    preload: "auto",
+    muted: true,
+    autoPlay: true,
+    loop: true,
+    playsInline: true,
+    disablePictureInPicture: true,
+    controls: false,
+    src: waveUrl
+  });
+}

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

@@ -21,20 +21,30 @@ function InfoPanelImg(_ref) {
   var url = _ref.url,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--img"
-  }, children, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ratio-4-5 vreo-infoPanel-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-inner"
+  }, children, /*#__PURE__*/React.createElement("img", {
     className: "vreo-infoPanelImg",
-    style: {
-      backgroundImage: "url(".concat(url, ")")
-    }
-  }));
+    src: url
+  })))));
 }
 
 function InfoPanelVideo(_ref2) {
   var url = _ref2.url,
       children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--video"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ratio-4-5 vreo-infoPanel-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-inner"
   }, children, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanelVideo"
   }, /*#__PURE__*/React.createElement("video", {
@@ -42,7 +52,7 @@ function InfoPanelVideo(_ref2) {
     autoPlay: true,
     className: "vreo-infoPanelVideo",
     src: url
-  })));
+  }))))));
 }
 
 var Title = function Title(props) {
@@ -50,13 +60,15 @@ var Title = function Title(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-title-shadow"
+  }), /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-title"
   }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-t1"
   }, props.title), /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-t2"
-  }, props.subTitle));
+  }, props.subTitle)));
 };
 
 function InfoPanel() {

package/lib/Player/modules/keyframes/PanoTag/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function PanoTag(): JSX.Element;
+export declare function PanoTag(): null;