@fonixtree/magic-design 1.0.4 → 2.0.2

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

@@ -13,14 +13,16 @@ 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 () {
@@ -49,6 +51,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 debug = require('debug')('worker:VideoTag');
 
 var VideoTag =
@@ -73,23 +91,43 @@ function (_super) {
         padding = _a.padding,
         share = _a.share,
         layout = _a.layout,
-        align = _a.align,
-        GAData = _a.GAData;
+        customize = _a.customize,
+        GAData = _a.GAData,
+        _c = _a.notVertical,
+        notVertical = _c === void 0 ? false : _c;
+    var align = customize.align,
+        vertical = customize.vertical;
     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)({
+      style: (0, _commonUtil.pxToRem)(__assign({
         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("img", {
-      alt: "",
-      src: _playCircle["default"]
+    }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+      imgName: data.playIcon.iconType,
+      imgWidth: (0, _coreUtil.isPc)() ? data.playIcon.pcSize : data.playIcon.size
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -136,7 +174,8 @@ function (_super) {
 
   VideoTag.defaultProps = {
     data: {},
-    noShare: false
+    noShare: false,
+    notVertical: false
   };
   return VideoTag;
 }(_react["default"].Component);

package/es/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: 5px;
+        margin: 0 5px;
       }
 
       .secondary-button {
-        margin: 5px;
+        margin: 0 5px;
       }
     }
 

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

@@ -154,6 +154,16 @@ 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/es/composite-comp/bol/components/Video/index.js

@@ -66,7 +66,29 @@ 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/es/composite-comp/bol/components/Video/mobile/Layout1/index.js

@@ -11,8 +11,6 @@ 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"));
@@ -23,6 +21,8 @@ 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 () {
@@ -111,14 +111,11 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout1-wrap"
     }, data.groupSource.map(function (group) {
-      var _a, _b;
+      var _a, _b, _c;
       /** 当前是否在播放 */
 
 
@@ -151,18 +148,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' && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !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", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "",
-        src: _playCircle["default"]
+      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: group.playIcon.iconType,
+        imgWidth: group === null || group === void 0 ? void 0 : group.playIcon.size
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_index["default"], {
         data: data
       }), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -1,30 +1,24 @@
 .video-layout1-wrap {
   display: flex;
   flex-direction: column;
-
-  .video-item-wrap {
-    height: 212px;
-    position: relative;
-    margin-bottom: 10px;
-
-    &:last-child{
-      margin-bottom: 0;
-    }
-
-    .play-btn {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 60px;
-      height: 60px;
-      z-index: 1;
-      cursor: pointer;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
+}
+.video-layout1-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+  margin-bottom: 0.2rem;
+}
+.video-layout1-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout1-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout1-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}

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

@@ -11,8 +11,6 @@ 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");
@@ -23,6 +21,8 @@ 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 () {
@@ -136,10 +136,7 @@ function (_super) {
 
     var sliderIndex = this.state.sliderIndex;
     var data = this.props.data;
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout2-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -183,16 +180,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' && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.video.playButton == 'Middle' && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "play-btn center",
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "",
-        src: _playCircle["default"]
+      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: group.playIcon.iconType,
+        imgWidth: group.playIcon.size
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -2,48 +2,39 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 36px;
-
-  .slider-wrap {
-    width: 100%;
-    overflow: hidden;
-
-    .slider-list-wrap {
-      display: flex;
-      transform: translateX(-100%);
-      transition: all .3s linear;
-      position: relative;
-
-      &.noAnimation {
-        animation: none;
-      }
-    }
-
-    .video-item-wrap {
-      height: 212px;
-      position: relative;
-      width: 100%;
-      flex-shrink: 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .play-btn {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 60px;
-        height: 60px;
-        z-index: 1;
-        cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}
+  padding-bottom: 0.72rem;
+}
+.video-layout2-wrap .slider-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+.video-layout2-wrap .slider-wrap .slider-list-wrap {
+  display: flex;
+  transform: translateX(-100%);
+  transition: all 0.3s linear;
+  position: relative;
+}
+.video-layout2-wrap .slider-wrap .slider-list-wrap.noAnimation {
+  animation: none;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}

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

@@ -11,8 +11,6 @@ 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");
@@ -25,6 +23,8 @@ 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 () {
@@ -111,10 +111,7 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-layout3-wrap"
     }, data.groupSource.map(function (group) {
@@ -153,7 +150,7 @@ function (_super) {
         }),
         play: (_b = _this.videoRefMap[group.id]) === null || _b === void 0 ? void 0 : _b.playing,
         videoId: group.id
-      }), !isPlaying && /*#__PURE__*/_react["default"].createElement("div", {
+      }), !isPlaying && group.playIcon.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])('play-btn', {
           middle: group.video.playButton == 'Middle',
           bottomLeft: group.video.playButton == 'Bottom Left'
@@ -161,13 +158,13 @@ function (_super) {
         onClick: function onClick() {
           _this.playOrPause(group);
         }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "",
-        src: _playCircle["default"]
+      }, /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: group.playIcon.iconType,
+        imgWidth: group.playIcon.size
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_ShareBtn["default"], {
         data: data.share
       })), /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,
@@ -175,6 +172,7 @@ function (_super) {
         }),
         layout: 'h5-' + data.customize.layout.h5Layout,
         noShare: true,
+        notVertical: true,
         onPlayClick: function onPlayClick() {
           return _this.playOrPause(group);
         },

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

@@ -1,53 +1,46 @@
 .video-layout3-wrap {
   display: flex;
   flex-direction: column;
-
-  .video-layout3-item-con {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .video-item-wrap {
-    height: 212px;
-    position: relative;
-
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .play-btn {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 60px;
-      height: 60px;
-      z-index: 1;
-      cursor: pointer;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-      &.bottomLeft {
-        left: 12px;
-        bottom: 10px;
-        transform: unset;
-        top: unset;
-      }
-    }
-
-    .video-share-btn {
-      position: absolute;
-      right: 12px;
-      bottom: 12px;
-    }
-  }
-}
+}
+.video-layout3-wrap .video-tag-container {
+  padding-top: 0.4rem;
+  padding-bottom: 0.76rem;
+}
+.video-layout3-wrap .video-layout3-item-con {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.2rem;
+}
+.video-layout3-wrap .video-layout3-item-con:last-child {
+  margin-bottom: 0;
+}
+.video-layout3-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+}
+.video-layout3-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout3-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout3-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}
+.video-layout3-wrap .video-item-wrap .play-btn.bottomLeft {
+  left: 0.24rem;
+  bottom: 0.2rem;
+  transform: unset;
+  top: unset;
+}
+.video-layout3-wrap .video-item-wrap .video-share-btn {
+  position: absolute;
+  right: 0.24rem;
+  bottom: 0.24rem;
+}

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

@@ -43,60 +43,19 @@ 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 BannerMobile =
+var VideoMobile =
 /** @class */
 function (_super) {
-  __extends(BannerMobile, _super);
+  __extends(VideoMobile, _super);
 
-  function BannerMobile() {
+  function VideoMobile() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _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);
-    };
-
+    _this.state = {};
     return _this;
   }
 
-  BannerMobile.prototype.render = function () {
+  VideoMobile.prototype.render = function () {
     var data = this.props.data;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-video-mobile"
@@ -112,9 +71,9 @@ function (_super) {
     }));
   };
 
-  BannerMobile.defaultProps = {};
-  return BannerMobile;
+  VideoMobile.defaultProps = {};
+  return VideoMobile;
 }(_react["default"].Component);
 
-var _default = BannerMobile;
+var _default = VideoMobile;
 exports["default"] = _default;