@realsee/vreo 2.0.0-alpha.0 → 2.1.1-dev.0

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

@@ -48,10 +48,13 @@ function BgMusic() {
                 audio.addEventListener('ended', function () {
                   cleanAudio();
                 });
+                audio.addEventListener('pause', function () {
+                  audio.play();
+                });
                 controller.once('paused', function () {
                   cleanAudio();
                 });
-              case 10:
+              case 11:
               case "end":
                 return _context.stop();
             }

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

@@ -29,15 +29,10 @@ function InfoPanelImg(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "vreo-infoPanel vreo-infoPanel--img"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ratio-4-5 vreo-infoPanel-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vreo-infoPanel-inner"
+    className: "vreo-infoPanel"
   }, children, /*#__PURE__*/React.createElement("img", {
-    className: "vreo-infoPanelImg",
     src: url
-  })))));
+  })));
 }
 function InfoPanelVideo(_ref2) {
   var url = _ref2.url,
@@ -55,28 +50,21 @@ function InfoPanelVideo(_ref2) {
   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"
+    className: "vreo-infoPanel"
   }, children, /*#__PURE__*/React.createElement("div", {
-    className: "vreo-infoPanelVideo",
+    className: "vreo-infoPanel-inner",
     ref: videoWrapperRef
   }, !isWX && /*#__PURE__*/React.createElement("video", {
     playsInline: true,
     autoPlay: true,
-    className: "vreo-infoPanelVideo",
     src: url
-  }))))));
+  }))));
 }
 var Title = function Title(props) {
   if (!props.title && !props.subTitle) {
     return null;
   }
   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"
@@ -147,38 +135,12 @@ function InfoPanel() {
       }, end - start);
     };
     controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
-
-    // Object.assign(window, {
-    //   $setInfoPanel: () => {
-    //     controller.openPopUp(
-    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
-    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
-    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       </InfoPanelImg>
-    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
-    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       // </InfoPanelVideo>
-    //     )
-    //   },
-    //   $setInfoPanel2: () => {
-    //     controller.openPopUp(
-    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
-    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
-    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
-    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       // </InfoPanelImg>
-    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
-    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       // </InfoPanelVideo>
-    //     )
-    //   },
-    // })
-
+    controller.on('ended', function () {
+      controller.openPopUp(false);
+    });
+    controller.on('paused', function () {
+      controller.openPopUp(false);
+    });
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
       if (timeoutRef.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "2.0.0-alpha.0",
+  "version": "2.1.1-dev.0",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",

package/stylesheets/default.css

@@ -732,38 +732,35 @@
   align-items: center;
 }
 
-.vreo-infoPanel-wrapper {
+.vreo-infoPanel {
   position: relative;
-}
-
-.vreo-infoPanel-inner {
-  position: absolute;
-  left: 0;
-  top: 0;
   width: 100%;
   height: 100%;
+  min-width: 70%;
+  max-width: 80%;
+  min-height: 30%;
+  max-height: 60%;
   border-radius: 4px;
   overflow: hidden;
-  background-color: rgba(0, 0, 0, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.vreo-infoPanel {
+.vreo-infoPanel-inner {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
-.vreo-app .vreo-infoPanel,
-.vreo-app[data-size="S"] .vreo-infoPanel {
-  width: 327px;
-}
-.vreo-app[data-size="M"][data-orientation="landscape"] .vreo-infoPanel {
-  width: 192px;
-}
-.vreo-app[data-size="M"][data-orientation="portrait"] .vreo-infoPanel,
-.vreo-app[data-size="L"] .vreo-infoPanel {
-  width: 319px;
-}
-.vreo-app[data-size="XL"] .vreo-infoPanel {
-  width: 384px;
+.vreo-infoPanel video,
+.vreo-infoPanel img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .vreo-infoPanel-title {
@@ -790,15 +787,6 @@
   padding-top: 6px;
 }
 
-.vreo-infoPanelImg,
-.vreo-infoPanelVideo {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  object-position: center center;
-  object-fit: contain;
-}
-
 .vreo-panel--hidden .vreo-panel-inner {
   opacity: 0;
   transition: opacity 0.45s;
@@ -839,7 +827,7 @@
   box-sizing: border-box;
   padding-left: 16px;
   padding-right: 16px;
-  margin-bottom: 16.5%;
+  margin-bottom: 30px;
   bottom: 0;
   z-index: 1;
   flex-direction: column;
@@ -855,6 +843,11 @@
   z-index: 1;
 }
 
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1,
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t2 {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
+}
+
 .vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
   padding-left: 0;
   font-weight: 600;