@fonixtree/magic-design 1.0.187 → 1.0.188

package/es/composite-comp/common/components/ProductItem/index.js

@@ -91,9 +91,17 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
+  ProductItem.prototype.componentDidMount = function () {
+    if (this.videoRef.current) {
+      this.videoRef.current.setAttribute('playsinline', '');
+      this.videoRef.current.setAttribute('webkit-playsinline', '');
+    }
+  };
+
   ProductItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f, _g;
 
@@ -165,29 +173,16 @@ function (_super) {
       }, data.url && !data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("img", {
         alt: "welcome advertise",
         src: data.url
-      }), data.url && data.url.includes('.mp4') &&
-      /*#__PURE__*/
-      // <video
-      //   autoPlay
-      //   loop
-      //   muted
-      //   playsinline
-      //   webkit-playsinline
-      // >
-      //   <source src={data.url} type="video/mp4" />
-      // </video>
-      _react["default"].createElement("div", {
-        className: "video-wrap"
-      }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
-        key: data.id + "-" + data.url + "}",
-        opts: {
-          source: data.url,
-          controlBarHide: true,
-          autoplay: true,
-          loop: true,
-          speed: 1
-        },
-        videoId: data.id
+      }), data.url && data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("video", {
+        ref: this.videoRef,
+        autoPlay: true,
+        loop: true,
+        muted: true,
+        playsinline: true,
+        "webkit-playsinline": true
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        src: data.url,
+        type: "video/mp4"
       })));
     }
 

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -91,9 +91,17 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
+  ProductItem.prototype.componentDidMount = function () {
+    if (this.videoRef.current) {
+      this.videoRef.current.setAttribute('playsinline', '');
+      this.videoRef.current.setAttribute('webkit-playsinline', '');
+    }
+  };
+
   ProductItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f, _g;
 
@@ -165,29 +173,16 @@ function (_super) {
       }, data.url && !data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("img", {
         alt: "welcome advertise",
         src: data.url
-      }), data.url && data.url.includes('.mp4') &&
-      /*#__PURE__*/
-      // <video
-      //   autoPlay
-      //   loop
-      //   muted
-      //   playsinline
-      //   webkit-playsinline
-      // >
-      //   <source src={data.url} type="video/mp4" />
-      // </video>
-      _react["default"].createElement("div", {
-        className: "video-wrap"
-      }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
-        key: data.id + "-" + data.url + "}",
-        opts: {
-          source: data.url,
-          controlBarHide: true,
-          autoplay: true,
-          loop: true,
-          speed: 1
-        },
-        videoId: data.id
+      }), data.url && data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("video", {
+        ref: this.videoRef,
+        autoPlay: true,
+        loop: true,
+        muted: true,
+        playsinline: true,
+        "webkit-playsinline": true
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        src: data.url,
+        type: "video/mp4"
       })));
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.187",
+  "version": "1.0.188",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",