@fonixtree/magic-design 0.0.162 → 0.0.164

package/es/common/ColorPicker/index.less

@@ -1,5 +1,6 @@
 .m-color-picker-panel {
-  position: absolute;
+  position: fixed;
+  bottom: 5px;
   z-index: 999;
 
   .panel-bg {

package/es/common/Video/index.js

@@ -204,7 +204,7 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
   }
 };
 
-var createVideo = function createVideo(domId, opts) {
+var createAliVideo = function createAliVideo(domId, opts) {
   if (opts === void 0) {
     opts = {};
   }
@@ -301,12 +301,125 @@ var createVideo = function createVideo(domId, opts) {
   });
 };
 
-var AComponent =
+var createYoutuVideo = function createYoutuVideo(domId, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  return __awaiter(void 0, void 0, void 0, function () {
+    var videoId;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          videoId = opts.source.split('youtu.be/')[1];
+          return [4
+          /*yield*/
+          , (0, _commonUtil.asyncNextTick)(function () {
+            return __awaiter(void 0, void 0, void 0, function () {
+              var player;
+              return __generator(this, function (_a) {
+                player = new YT.Player('video' + domId, {
+                  height: '100%',
+                  width: '100%',
+                  videoId: videoId,
+                  events: {
+                    onReady: function onReady() {
+                      if (!opts.videoSound) {
+                        player.mute();
+                      }
+
+                      if (opts.speed) {
+                        player.setPlaybackRate(opts.speed);
+                      }
+
+                      if (opts.startAt) {
+                        player.seekTo(opts.startAt);
+                        player.pauseVideo();
+                      }
+
+                      if (opts.loop) {
+                        player.setLoop(true);
+                      }
+
+                      if (opts.autoplay) {
+                        player.playVideo();
+                      }
+                    }
+                  }
+                });
+                return [2
+                /*return*/
+                , player];
+              });
+            });
+          }, 500, 10)];
+
+        case 1:
+          return [2
+          /*return*/
+          , _a.sent()];
+      }
+    });
+  });
+};
+
+var createVideo = function createVideo(type, domId, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          if (!(type == 'ali')) return [3
+          /*break*/
+          , 2];
+          return [4
+          /*yield*/
+          , createAliVideo(domId, opts)];
+
+        case 1:
+          return [2
+          /*return*/
+          , _a.sent()];
+
+        case 2:
+          if (!(type == 'youtu')) return [3
+          /*break*/
+          , 4];
+          return [4
+          /*yield*/
+          , createYoutuVideo(domId, opts)];
+
+        case 3:
+          return [2
+          /*return*/
+          , _a.sent()];
+
+        case 4:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
+var getVideoType = function getVideoType(opts) {
+  if (/youtu/.test(opts.source)) {
+    return 'youtu';
+  }
+
+  return 'ali';
+};
+
+var Video =
 /** @class */
 function (_super) {
-  __extends(AComponent, _super);
+  __extends(Video, _super);
 
-  function AComponent() {
+  function Video() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
@@ -370,87 +483,93 @@ function (_super) {
       modelWrap.appendChild(shadowWrap);
       modelWrap.appendChild(contentWrap);
       (document.querySelector('[magic_design]') || document.body).appendChild(modelWrap);
-      createVideo('-modal-' + videoId, __assign(__assign({}, _this.props.opts), {
+      var type = getVideoType(_this.props.opts);
+      createVideo(type, '-modal-' + videoId, __assign(__assign({}, _this.props.opts), {
         autoplay: true
       }));
     };
 
     _this.getInit = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var videoId_1, _a;
+        var videoType, _a, _b;
 
         var _this = this;
 
-        return __generator(this, function (_b) {
-          switch (_b.label) {
+        return __generator(this, function (_c) {
+          switch (_c.label) {
             case 0:
-              if (!!window.Aliplayer) return [3
+              if (!this.props.opts.source) return [3
+              /*break*/
+              , 8];
+              videoType = getVideoType(this.props.opts);
+              if (!(videoType == 'youtu')) return [3
+              /*break*/
+              , 4];
+              if (!!window.YT) return [3
               /*break*/
               , 2];
               return [4
               /*yield*/
-              , Promise.all([(0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js'), (0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css')])];
+              , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
 
             case 1:
-              _b.sent();
+              _c.sent();
 
-              _b.label = 2;
+              _c.label = 2;
 
             case 2:
-              if (!!window.YT) return [3
-              /*break*/
-              , 4];
+              _a = this;
               return [4
               /*yield*/
-              , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
+              , createVideo('youtu', this.props.videoId, this.props.opts)];
 
             case 3:
-              _b.sent();
+              _a.ytPlayer = _c.sent();
+              this.ytPlayer.addEventListener('onStateChange', function (event) {
+                if (!_this.props.opts.loop) {
+                  if (event.data == YT.PlayerState.ENDED) {
+                    console.log('youtu end');
 
-              _b.label = 4;
+                    _this.props.onEnd();
+                  }
+                }
+              });
+              _c.label = 4;
 
             case 4:
-              if (!this.props.opts.source) return [3
+              if (!(videoType == 'ali')) return [3
               /*break*/
-              , 7];
-              if (!/youtu/.test(this.props.opts.source)) return [3
-              /*break*/
-              , 5];
-              videoId_1 = this.props.opts.source.split('youtu.be/')[1];
-              (0, _commonUtil.nextTick)(function () {
-                _this.ytPlayer = new YT.Player('video' + _this.props.videoId, {
-                  height: '100%',
-                  width: '100%',
-                  videoId: videoId_1,
-                  events: {
-                    onReady: function onReady() {
-                      console.log('onReady');
-                    },
-                    onStateChange: function onStateChange() {
-                      console.log('onStateChange');
-                    }
-                  }
-                });
-              }, 500, 10);
-              return [3
+              , 8];
+              if (!!window.Aliplayer) return [3
               /*break*/
-              , 7];
+              , 6];
+              return [4
+              /*yield*/
+              , Promise.all([(0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js'), (0, _commonUtil.importAsync)('https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css')])];
 
             case 5:
-              _a = this;
+              _c.sent();
+
+              _c.label = 6;
+
+            case 6:
+              _b = this;
               return [4
               /*yield*/
-              , createVideo(this.props.videoId, this.props.opts)];
+              , createVideo('ali', this.props.videoId, this.props.opts)];
 
-            case 6:
-              _a.aliPlayer = _b.sent();
+            case 7:
+              _b.aliPlayer = _c.sent();
               this.aliPlayer.on('ended', function () {
-                if (!_this.props.opts.loop) {// this.props.onEnd();
+                if (!_this.props.opts.loop) {
+                  console.log('ali end');
+
+                  _this.props.onEnd();
                 }
               });
-              _b.label = 7;
+              _c.label = 8;
 
-            case 7:
+            case 8:
               return [2
               /*return*/
               ];
@@ -466,11 +585,11 @@ function (_super) {
     return _this;
   }
 
-  AComponent.prototype.componentDidMount = function () {
+  Video.prototype.componentDidMount = function () {
     this.getInit();
   };
 
-  AComponent.prototype.render = function () {
+  Video.prototype.render = function () {
     var _a = this.props,
         videoId = _a.videoId,
         opts = _a.opts,
@@ -485,11 +604,9 @@ function (_super) {
     }));
   };
 
-  AComponent.defaultProps = {
-    title: 'title'
-  };
-  return AComponent;
+  Video.defaultProps = {};
+  return Video;
 }(_react["default"].Component);
 
-var _default = AComponent;
+var _default = Video;
 exports["default"] = _default;

package/es/common/Video/index.less

@@ -23,7 +23,7 @@
 }
 
 .pc-video-modal-wrap {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -31,6 +31,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 999;
 
   .video-shadow-wrap {
     position: fixed;
@@ -51,7 +52,7 @@
     background: rgb(255 255 255);
     border-radius: 5px;
     z-index: 1001;
-    position: fixed;
+    position: relative;
 
     .close-img-wrap {
       position: absolute;

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

@@ -18,8 +18,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'h5Name',
-        pcName: 'pcName',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''

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

@@ -208,12 +208,13 @@ function (_super) {
         });
       }
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) + 12 + "px";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

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

@@ -85,11 +85,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2em;
+        height: 1em;
         border-radius: 100px;
         opacity: 1;
       }

package/es/composite-comp/bol/components/Carousel/pc/index.js

@@ -205,12 +205,14 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) * 1.25 + 20 + "px";
+    var sliderWidth = "calc(100% - " + (data.setting.navigation.size + 20) * 2 + "px)";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -225,7 +227,11 @@ function (_super) {
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
-    }, settings), data.groupSource.map(function (item) {
+    }, settings, {
+      style: {
+        width: sliderWidth
+      }
+    }), data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "img-wrap"

package/es/composite-comp/bol/components/Carousel/pc/index.less

@@ -18,7 +18,7 @@
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    // width: calc(100% - 72px);
     margin: 0 auto;
     line-height: 1;
 
@@ -101,11 +101,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1.25em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2.5em;
+        height: 1.25em;
         border-radius: 100px;
         opacity: 1;
       }

package/es/composite-comp/bol/components/Text/index.js

@@ -59,11 +59,6 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-// import './index.less';
-// less to css 在线地址 https://tool.oschina.net/less
-// css 压缩地址 https://www.runoob.com/csspack
-var style = '.m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:10px 20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
-
 var Text =
 /** @class */
 function (_super) {
@@ -80,6 +75,8 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
+    var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
+    var style = ".m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
       onClick: this.onComponentClick

package/es/composite-comp/bol/components/Text/index.less

@@ -1,7 +1,7 @@
 .m-text {
   display: flex;
   flex-direction: column;
-  
+
   .title-wrap {
     font-weight: 500;
     font-size: 20px;
@@ -17,7 +17,7 @@
     width: 100%;
 
     .group-wrap-container {
-      padding: 10px 20px;
+      padding: 16px 20px;
     }
 
     .group-wrap {

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

@@ -13,6 +13,7 @@
     height: 100%;
     flex-shrink: 0;
     align-self: end;
+    min-height: 60px;
 
     .play-btn {
       position: absolute;

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

@@ -134,7 +134,7 @@ function (_super) {
             _this.setState({});
           }
         },
-        onPause: function onPause() {
+        onEnd: function onEnd() {
           _this.videoRefMap[group.id].playing = false;
 
           _this.setState({});

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

@@ -166,7 +166,7 @@ function (_super) {
             _this.setState({});
           }
         },
-        onPause: function onPause() {
+        onEnd: function onEnd() {
           _this.videoRefMap[group.id].playing = false;
 
           _this.setState({});

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

@@ -136,6 +136,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

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

@@ -133,6 +133,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

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

@@ -4,6 +4,7 @@
 
   .video-tag-container .left-wrap {
     width: 120px;
+    min-height: 170px;
   }
 
   .video-tag-container .left-wrap+.right-wrap {

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

@@ -135,6 +135,11 @@ function (_super) {
           _this.setState({});
         }
       },
+      onEnd: function onEnd() {
+        _this.videoRefMap[firstGroup.id].playing = false;
+
+        _this.setState({});
+      },
       opts: __assign(__assign({}, firstGroup.video), {
         cover: (0, _coreUtil.isPc)() ? firstGroup.overilay.content.pcImgSrc : firstGroup.overilay.content.h5ImgSrc,
         source: firstGroup.video.sourceUrl
@@ -179,6 +184,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

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

@@ -12,6 +12,7 @@
 
   .video-tag-container .left-wrap {
     width: 110px;
+    min-height: 110px;
   }
 
   .video-tag-container .left-wrap+.right-wrap {

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

@@ -142,6 +142,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

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

@@ -4,6 +4,7 @@
 
   .video-tag-container .left-wrap {
     width: 90px;
+    min-height: 100px;
   }
 
   .video-tag-container .left-wrap+.right-wrap {

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

@@ -136,6 +136,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

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

@@ -136,6 +136,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onEnd: function onEnd() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

package/es/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/index.js

@@ -112,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, (0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {