@realsee/vreo 2.3.1 → 2.3.3

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

@@ -21,15 +21,17 @@ var isWX = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
 var isIOS = navigator.userAgent.toLowerCase().indexOf('iphone') !== -1;
 var isIOSorWX = isIOS || isWX;
 var videoElement = document.createElement('video');
+videoElement.setAttribute('playsinline', 'true');
+videoElement.setAttribute('webkit-playsinline', 'true');
 
 if (isIOSorWX) {
-  videoElement.playsInline = true;
-  videoElement.classList.add('vreo-infoPanelVideo');
-  document.body.addEventListener('click', function () {
-    return videoElement.play();
-  }, {
-    once: true
-  });
+  if (videoElement.paused) {
+    document.body.addEventListener('click', function () {
+      return videoElement.play();
+    }, {
+      once: true
+    });
+  }
 }
 
 function InfoPanelImg(_ref) {
@@ -49,7 +51,7 @@ function InfoPanelVideo(_ref2) {
       children = _ref2.children;
   var videoWrapperRef = React.useRef(null);
   React.useEffect(function () {
-    if (!isIOSorWX) return;
+    // if (!isIOSorWX) return
     if (!videoWrapperRef.current) return;
     videoElement.src = url;
 
@@ -57,7 +59,26 @@ function InfoPanelVideo(_ref2) {
       videoWrapperRef.current.appendChild(videoElement);
     }
 
-    videoElement.play();
+    var canplaythrough = function canplaythrough() {
+      videoElement.removeEventListener('canplaythrough', canplaythrough);
+
+      try {
+        videoElement.play();
+      } catch (error) {}
+    };
+
+    videoElement.addEventListener('canplaythrough', canplaythrough);
+    videoElement.load(); // videoElement.play()
+
+    return function () {
+      var _videoWrapperRef$curr;
+
+      videoElement.pause();
+
+      if ((_videoWrapperRef$curr = videoWrapperRef.current) !== null && _videoWrapperRef$curr !== void 0 && _videoWrapperRef$curr.contains(videoElement)) {
+        videoWrapperRef.current.removeChild(videoElement);
+      }
+    };
   }, [videoWrapperRef.current]);
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-container"
@@ -66,11 +87,7 @@ function InfoPanelVideo(_ref2) {
   }, children, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-inner",
     ref: videoWrapperRef
-  }, !isIOSorWX && /*#__PURE__*/React.createElement("video", {
-    playsInline: true,
-    autoPlay: true,
-    src: url
-  }))));
+  })));
 }
 
 var Title = function Title(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "mobx": "^6.3.7",
-    "mobx-react": "^7.2.1"
+    "mobx": "6.3.7",
+    "mobx-react": "7.2.1"
   }
 }

package/stylesheets/default.css

@@ -749,6 +749,9 @@
 
 .vreo-infoPanel-inner {
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
 }
@@ -756,8 +759,8 @@
 .vreo-infoPanel video,
 .vreo-infoPanel img {
   display: block;
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
   border-radius: 4px;
   overflow: hidden;