@fonixtree/magic-design 0.0.163 → 0.0.165

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/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/defaultJSON.js

@@ -44,7 +44,7 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
         fontFamily: 'Open Sans',
         fontWeight: 700,
         fontSize: 16,
-        pcFontSize: 28,
+        pcFontSize: 18,
         color: '#232f46',
         width: 319
       },
@@ -67,7 +67,7 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 13,
-        pcFontSize: 22,
+        pcFontSize: 13,
         color: '#232f46',
         width: 319
       },

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/mobile/Layout3/index.less

@@ -46,8 +46,8 @@
 
     .video-share-btn {
       position: absolute;
-      right: 20px;
-      bottom: 20px;
+      right: 12px;
+      bottom: 12px;
     }
   }
 }

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: 100px;
   }
 
   .video-tag-container .left-wrap+.right-wrap {
@@ -24,8 +25,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 170px;
-      height: 170px;
+      width: 100px;
+      height: 100px;
       z-index: 1;
       cursor: pointer;
 

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

@@ -11,7 +11,8 @@
   }
 
   .video-tag-container .left-wrap {
-    width: 110px;
+    width: 100px;
+    min-height: 100px;
   }
 
   .video-tag-container .left-wrap+.right-wrap {
@@ -28,8 +29,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 110px;
-      height: 110px;
+      width: 100px;
+      height: 100px;
       z-index: 1;
       cursor: pointer;
 
@@ -52,8 +53,8 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 110px;
-      height: 110px;
+      width: 100px;
+      height: 100px;
       z-index: 1;
       cursor: pointer;
 

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