@realsee/vreo 2.0.0-alpha.0 → 2.1.0-alpha.0

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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "2.0.0-alpha.0",
+  "version": "2.1.0-alpha.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;