@fonixtree/magic-design 0.1.70 → 0.1.72

package/lib/composite-comp/bol/components/Banner/index.js

@@ -49,6 +49,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
   var c = arguments.length,
       r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
@@ -66,21 +82,33 @@ function (_super) {
 
   function Banner() {
     return _super !== null && _super.apply(this, arguments) || this;
-  } // componentWillMount() {
-  //   // 兼容新功能： 轮播的 dots 点 区分pc 移动
-  //   const { nodeData } = this.props;
-  //   if (!nodeData.setting.dots.color.pc || !nodeData.setting.dots.hoverColor.pc || !nodeData.setting.dots.size.pc) {
-  //     nodeData.setting.dots = { ...nodeData.setting.dots,
-  //       ...{
-  //         color: { pc: '#fff', mobile: '#fff' },
-  //         hoverColor: { pc: '#fff', mobile: '#fff' },
-  //         size: { pc: 16, mobile: 8 },
-  //         hoverSize: { pc: 16, mobile: 8 },
-  //       },
-  //     };
-  //   }
-  // }
+  }
 
+  Banner.prototype.componentWillMount = function () {
+    // 兼容新功能： 轮播的 dots 点 区分pc 移动
+    var nodeData = this.props.nodeData;
+
+    if (!nodeData.setting.dots.color.pc || !nodeData.setting.dots.hoverColor.pc || !nodeData.setting.dots.size.pc) {
+      nodeData.setting.dots = __assign(__assign({}, nodeData.setting.dots), {
+        color: {
+          pc: '#fff',
+          mobile: '#fff'
+        },
+        hoverColor: {
+          pc: '#fff',
+          mobile: '#fff'
+        },
+        size: {
+          pc: 16,
+          mobile: 8
+        },
+        hoverSize: {
+          pc: 16,
+          mobile: 8
+        }
+      });
+    }
+  };
 
   Banner.prototype.render = function () {
     var nodeData = this.props.nodeData; // console.log('---banner', nodeData);

package/lib/composite-comp/bol/components/Video/components/VideoTag/index.js

@@ -13,16 +13,14 @@ var _components = require("../../../../../../meta-comp/components");
 
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _index = _interopRequireDefault(require("../ShareBtn/index"));
 
 require("./index.less");
 
 var _AlignSelector = require("../../../../../../common/AlignSelector");
 
-var _coreUtil = require("../../../../../../utils/coreUtil");
-
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -51,22 +49,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
 var debug = require('debug')('worker:VideoTag');
 
 var VideoTag =
@@ -91,43 +73,23 @@ function (_super) {
         padding = _a.padding,
         share = _a.share,
         layout = _a.layout,
-        customize = _a.customize,
-        GAData = _a.GAData,
-        _c = _a.notVertical,
-        notVertical = _c === void 0 ? false : _c;
-    var align = customize.align,
-        vertical = customize.vertical;
+        align = _a.align,
+        GAData = _a.GAData;
     var showBtn = data.video.playButton == 'Bottom Left' && !['h5-layout3', 'pc-layout4', 'pc-layout5'].includes(layout);
-    var distanceObj = {};
-
-    if (!notVertical) {
-      if (vertical === 'top') {
-        distanceObj.top = (0, _coreUtil.isPc)() ? 40 : 12;
-        distanceObj.bottom = 'unset';
-      } else if (vertical === 'center') {
-        distanceObj.top = '50%';
-        distanceObj.bottom = 'unset';
-        distanceObj.transform = 'translateY(-50%)';
-      } else {
-        //  if (vertical === 'bottom')
-        distanceObj.bottom = (0, _coreUtil.isPc)() ? 40 : 12;
-      }
-    }
-
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-tag-container",
-      style: (0, _commonUtil.pxToRem)(__assign({
+      style: (0, _commonUtil.pxToRem)({
         position: position,
         padding: padding
-      }, distanceObj))
+      })
     }, showBtn && /*#__PURE__*/_react["default"].createElement("div", {
       className: "left-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "play-btn center",
       onClick: onPlayClick
-    }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-      imgName: data.playIcon.iconType,
-      imgWidth: (0, _coreUtil.isPc)() ? data.playIcon.pcSize : data.playIcon.size
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _playCircle["default"]
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -174,8 +136,7 @@ function (_super) {
 
   VideoTag.defaultProps = {
     data: {},
-    noShare: false,
-    notVertical: false
+    noShare: false
   };
   return VideoTag;
 }(_react["default"].Component);

package/lib/composite-comp/bol/components/Video/components/VideoTag/index.less

@@ -3,7 +3,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  // padding-bottom: 10px;
+  padding-bottom: 10px;
   display: flex;
   align-items: center;
 
@@ -20,8 +20,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      // width: 60px;
-      // height: 60px;
+      width: 60px;
+      height: 60px;
       z-index: 1;
       cursor: pointer;
       transform: translateX(-50%) !important;
@@ -53,11 +53,11 @@
       }
 
       .first-button {
-        margin: 0 5px;
+        margin: 5px;
       }
 
       .secondary-button {
-        margin: 0 5px;
+        margin: 5px;
       }
     }
 

package/lib/composite-comp/bol/components/Video/defaultJSON.js

@@ -154,16 +154,6 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       speed: 1,
       playPosition: 'Play in Box',
       playButton: 'Middle'
-    },
-    playIcon: {
-      open: true,
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      type: 'PLAY',
-      size: 48,
-      pcSize: 60,
-      iconType: 'light-playicon-01',
-      iconColor: 'Light'
     }
   };
 };

package/lib/composite-comp/bol/components/Video/index.js

@@ -66,29 +66,7 @@ function (_super) {
 
   function Video() {
     return _super !== null && _super.apply(this, arguments) || this;
-  } // componentWillMount() {
-  //   console.log('--video WillMount');
-  //   // 兼容新开发的功能： video新增播放按钮 的设置
-  //   const { nodeData } = this.props;
-  //   if (nodeData.groupSource && nodeData.groupSource.length > 0) {
-  //     nodeData.groupSource.forEach(group => {
-  //       if (!group.playIcon) {
-  //         console.log('--video add group.playIcon ');
-  //         group.playIcon = {
-  //           open: true,
-  //           parentId: group.id,
-  //           id: uuidv4(),
-  //           type: 'PLAY',
-  //           size: 48,
-  //           pcSize: 60,
-  //           iconType: 'light-playicon-01',
-  //           iconColor: 'Light',
-  //         };
-  //       }
-  //     });
-  //   }
-  // }
-
+  }
 
   Video.prototype.render = function () {
     var nodeData = this.props.nodeData; // console.log('---Video', nodeData);

package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.js

@@ -11,6 +11,8 @@ var _index = _interopRequireDefault(require("../../components/ShareBtn/index"));
 
 var _common = require("../../../../../../common");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _VideoTag = _interopRequireDefault(require("../../components/VideoTag"));
@@ -21,8 +23,6 @@ var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
 
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -118,7 +118,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout1-wrap"
     }, data.groupSource.map(function (group) {
-      var _a, _b, _c;
+      var _a, _b;
       /** 当前是否在播放 */
 
 
@@ -151,18 +151,18 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && ((_c = group === null || group === void 0 ? void 0 : group.playIcon) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-        imgName: group.playIcon.iconType,
-        imgWidth: group === null || group === void 0 ? void 0 : group.playIcon.size
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: _playCircle["default"]
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_index["default"], {
         data: data
       }), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        customize: data.customize,
+        align: data.customize.align,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.less

@@ -16,8 +16,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      // width: 60px;
-      // height: 60px;
+      width: 60px;
+      height: 60px;
       z-index: 1;
       cursor: pointer;
 

package/lib/composite-comp/bol/components/Video/mobile/Layout2/index.js

@@ -11,6 +11,8 @@ var _index = _interopRequireDefault(require("../../components/ShareBtn/index"));
 
 var _common = require("../../../../../../common");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../../utils/coreUtil");
@@ -21,8 +23,6 @@ var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
 
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -183,16 +183,16 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-        imgName: group.playIcon.iconType,
-        imgWidth: group.playIcon.size
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        customize: data.customize,
+        align: data.customize.align,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

package/lib/composite-comp/bol/components/Video/mobile/Layout2/index.less

@@ -34,8 +34,8 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        // width: 60px;
-        // height: 60px;
+        width: 60px;
+        height: 60px;
         z-index: 1;
         cursor: pointer;
 

package/lib/composite-comp/bol/components/Video/mobile/Layout3/index.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../../../../../../common");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../../utils/coreUtil");
@@ -23,8 +25,6 @@ var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
 
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -153,7 +153,7 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])('play-btn', {
           middle: group.video.playButton == 'Middle',
           bottomLeft: group.video.playButton == 'Bottom Left'
@@ -161,13 +161,13 @@ function (_super) {
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-        imgName: group.playIcon.iconType,
-        imgWidth: group.playIcon.size
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: _playCircle["default"]
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_ShareBtn["default"], {
         data: data.share
       })), /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        customize: data.customize,
+        align: data.customize.align,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,
@@ -175,7 +175,6 @@ function (_super) {
         }),
         layout: 'h5-' + data.customize.layout.h5Layout,
         noShare: true,
-        notVertical: true,
         onPlayClick: function onPlayClick() {
           return _this.playOrPause(group);
         },

package/lib/composite-comp/bol/components/Video/mobile/Layout3/index.less

@@ -1,10 +1,6 @@
 .video-layout3-wrap {
   display: flex;
   flex-direction: column;
-  .video-tag-container {
-    padding-top: 20px;
-    padding-bottom: 38px;
-  }
 
   .video-layout3-item-con {
     display: flex;
@@ -30,8 +26,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      // width: 60px;
-      // height: 60px;
+      width: 60px;
+      height: 60px;
       z-index: 1;
       cursor: pointer;
 

package/lib/composite-comp/bol/components/Video/mobile/index.js

@@ -43,19 +43,60 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var VideoMobile =
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var BannerMobile =
 /** @class */
 function (_super) {
-  __extends(VideoMobile, _super);
+  __extends(BannerMobile, _super);
 
-  function VideoMobile() {
+  function BannerMobile() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.state = {};
+    _this.state = {}; // padding用统一设置
+
+    _this.getBackgroundStyle = function (item) {
+      // const { data: { spacing }  } = this.props;
+      // const { spacing, background } = data;
+      // const { device } = window.magicDesign;
+      var wrapStyle = {}; // 边距
+      // if (spacing && spacing[device]) {
+      //   wrapStyle = { ...wrapStyle, ...spacing[device] };
+      // }
+      // 背景
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          wrapStyle.backgroundColor = item.background.color;
+          wrapStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          wrapStyle.backgroundImage = "url(" + item.background.image + ")";
+          wrapStyle.backgroundPosition = 'center';
+          wrapStyle.backgroundSize = 'cover';
+        }
+      }
+
+      return __assign({}, wrapStyle);
+    };
+
     return _this;
   }
 
-  VideoMobile.prototype.render = function () {
+  BannerMobile.prototype.render = function () {
     var data = this.props.data;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-video-mobile"
@@ -71,9 +112,9 @@ function (_super) {
     }));
   };
 
-  VideoMobile.defaultProps = {};
-  return VideoMobile;
+  BannerMobile.defaultProps = {};
+  return BannerMobile;
 }(_react["default"].Component);
 
-var _default = VideoMobile;
+var _default = BannerMobile;
 exports["default"] = _default;

package/lib/composite-comp/bol/components/Video/pc/Layout1/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _common = require("../../../../../../common");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _VideoTag = _interopRequireDefault(require("../../components/VideoTag"));
@@ -21,8 +23,6 @@ var _coreUtil = require("../../../../../../utils/coreUtil");
 
 require("./index.less");
 
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -117,7 +117,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-pc-layout1-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", null, data.groupSource.map(function (group) {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
       /** 当前是否在播放 */
 
 
@@ -150,16 +150,16 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && ((_c = group === null || group === void 0 ? void 0 : group.playIcon) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-        imgName: (_d = group === null || group === void 0 ? void 0 : group.playIcon) === null || _d === void 0 ? void 0 : _d.iconType,
-        imgWidth: (_e = group === null || group === void 0 ? void 0 : group.playIcon) === null || _e === void 0 ? void 0 : _e.pcSize
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        customize: data.customize,
+        align: data.customize.align,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

package/lib/composite-comp/bol/components/Video/pc/Layout1/index.less

@@ -26,8 +26,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      // width: 100px;
-      // height: 100px;
+      width: 100px;
+      height: 100px;
       z-index: 1;
       cursor: pointer;
 

package/lib/composite-comp/bol/components/Video/pc/Layout2/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _common = require("../../../../../../common");
 
+var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _VideoTag = _interopRequireDefault(require("../../components/VideoTag"));
@@ -21,8 +23,6 @@ var _coreUtil = require("../../../../../../utils/coreUtil");
 
 require("./index.less");
 
-var _PlaySvg = _interopRequireDefault(require("../../../../../../meta-comp/config-panels/PlayIconConfig/PlaySvg"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -108,8 +108,6 @@ function (_super) {
   Layout2.prototype.render = function () {
     var _this = this;
 
-    var _a;
-
     var data = this.props.data;
     var GAData = {
       moduleId: data.id,
@@ -154,16 +152,16 @@ function (_super) {
       }),
       play: isFirstGroupPlaying,
       videoId: firstGroup.id
-    }), !isFirstGroupPlaying && firstGroup.video.playButton == 'Middle' && ((_a = firstGroup === null || firstGroup === void 0 ? void 0 : firstGroup.playIcon) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }), !isFirstGroupPlaying && firstGroup.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
       className: "play-btn center",
       onClick: function onClick() {
         _this.playOrPause(firstGroup);
       }
-    }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-      imgName: firstGroup.playIcon.iconType,
-      imgWidth: firstGroup.playIcon.pcSize
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _playCircle["default"]
     })), !isFirstGroupPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-      customize: data.customize,
+      align: data.customize.align,
       data: firstGroup,
       GAData: __assign(__assign({}, GAData), {
         groupId: firstGroup.id,
@@ -207,16 +205,16 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && group.video.playButton == 'Middle' && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
-        imgName: group.playIcon.iconType,
-        imgWidth: group.playIcon.pcSize
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "",
+        src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        customize: data.customize,
+        align: data.customize.align,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,