@fonixtree/magic-design 0.0.167 → 0.0.168

package/es/common/LinkModal/SelectVideoModal/index.js

@@ -15,8 +15,16 @@ var _Iconfont = _interopRequireDefault(require("../../Iconfont"));
 
 var _VideoUpload = _interopRequireDefault(require("../../VideoUpload"));
 
+var _locale = require("../../../locale");
+
+var _index = require("../../index");
+
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -43,141 +51,157 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var debug = require('debug')('worker:AComponent');
-
-var AComponent =
+var SelectVideoModal =
 /** @class */
 function (_super) {
-  __extends(AComponent, _super);
+  __extends(SelectVideoModal, _super);
 
-  function AComponent() {
+  function SelectVideoModal() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.state = {
-      ready: false
+    _this.state = {};
+    _this.videoSetting = {
+      speed: 1,
+      sourceType: 'Upload',
+      progressBar: true
     };
-    _this.search = {};
+
+    _this.onFieldChange = function (data) {
+      _extends(_this.videoSetting, data);
+
+      _this.setState({});
+
+      _this.props.setUrl('video-' + JSON.stringify(_this.videoSetting));
+    };
+
     return _this;
   }
 
-  AComponent.prototype.render = function () {
+  SelectVideoModal.prototype.render = function () {
     var _this = this;
 
-    var title = this.props.title;
-    var ready = this.state.ready;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "SelectVideoModal-container"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "Select Video"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-left-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-upload-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       title: "Select Video"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
       onChange: function onChange(v) {
-        _this.search.sourceType = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          sourceType: v
+        });
       },
-      value: this.search.sourceType
+      value: this.videoSetting.sourceType
     }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
       value: "Upload"
     }, "Upload"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
       value: "URL"
-    }, "URL"))), this.search.sourceType === 'URL' && /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+    }, "URL"))), this.videoSetting.sourceType === 'URL' && /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       title: "URL"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "input-url"
     }, /*#__PURE__*/_react["default"].createElement("input", {
       onChange: function onChange(e) {
-        _this.search.sourceUrl = e.target.value;
-
-        _this.reRender();
+        _this.onFieldChange({
+          sourceUrl: e.target.value
+        });
       },
-      placeholder: i18n('PLEASE_ADD_A_LINK'),
+      placeholder: (0, _locale.i18n)('PLEASE_ADD_A_LINK'),
       type: "text",
-      value: this.search.sourceUrl
+      value: this.videoSetting.sourceUrl
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "icon-btns"
     }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       color: "#FF4141",
       onClick: function onClick() {
-        _this.search.sourceUrl = '';
-
-        _this.reRender();
+        _this.onFieldChange({
+          sourceUrl: ''
+        });
       },
       size: "20px",
       type: "icon-delete1"
-    })))), this.search.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_VideoUpload["default"], {
+    })))), this.videoSetting.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_VideoUpload["default"], {
       onChange: function onChange(v) {
-        _this.search.sourceUrl = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          sourceUrl: v
+        });
       },
-      value: this.search.sourceUrl
-    }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "Setting"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+      value: this.videoSetting.sourceUrl
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-right-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-setting-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       layout: "horizontal",
       split: true,
       title: "Progress bar"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
-      checked: this.search.progressBar,
+      checked: this.videoSetting.progressBar,
       onChange: function onChange(v) {
-        _this.search.progressBar = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          progressBar: v
+        });
       }
     })), /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       layout: "horizontal",
       split: true,
       title: "Play in loop"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
-      checked: this.search.loop,
+      checked: this.videoSetting.loop,
       onChange: function onChange(v) {
-        _this.search.loop = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          loop: v
+        });
       }
     })), /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       layout: "horizontal",
       split: true,
       title: "Autoplays"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
-      checked: this.search.autoplay,
+      checked: this.videoSetting.autoplay,
       onChange: function onChange(v) {
-        _this.search.autoplay = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          autoplay: v
+        });
       }
     })), /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       layout: "horizontal",
       split: true,
       title: "Video Sound"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
-      checked: this.search.videoSound,
+      checked: this.videoSetting.videoSound,
       onChange: function onChange(v) {
-        _this.search.videoSound = v;
-
-        _this.reRender();
+        _this.onFieldChange({
+          videoSound: v
+        });
       }
     })), /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       title: "Play Speed"
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
+    }, /*#__PURE__*/_react["default"].createElement(_index.Slider, {
       inputType: "float",
       maxVal: 2,
       minVal: 0.5,
       onChange: function onChange(_a) {
         var count = _a.count;
-        _this.search.speed = count;
 
-        _this.reRender();
+        _this.onFieldChange({
+          speed: count
+        });
       },
       value: {
-        count: this.search.speed
+        count: this.videoSetting.speed
       }
     })))));
   };
 
-  AComponent.defaultProps = {
-    title: 'title'
+  SelectVideoModal.defaultProps = {
+    setUrl: function setUrl() {}
   };
-  return AComponent;
+  return SelectVideoModal;
 }(_react["default"].Component);
 
-var _default = AComponent;
+var _default = SelectVideoModal;
 exports["default"] = _default;

package/es/common/LinkModal/SelectVideoModal/index.less

@@ -0,0 +1,112 @@
+.SelectVideoModal-container {
+  display: flex;
+  padding: 20px 80px;
+  border-top: 1px solid #f0f0f0;
+
+  .video-left-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-right: 100px;
+
+    .video-title-wrap {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .video-upload-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .input-url {
+        width: 100%;
+        height: 40px;
+        background: #FFFFFF;
+        border: 1px solid #D2D9E5;
+        border-radius: 8px;
+        display: flex;
+        padding: 9px 14px;
+        display: flex;
+        align-items: center;
+
+        input {
+          border: none;
+          outline: none;
+          height: 24px;
+          flex-grow: 1;
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          color: #232F46;
+        }
+
+        /* 使用webkit内核的浏览器 */
+        input::-webkit-input-placeholder {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          color: #8493AF;
+        }
+
+        /* Firefox版本4-18 */
+        input:-moz-placeholder {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          color: #8493AF;
+        }
+
+        /* Firefox版本19+ */
+        input::-moz-placeholder {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          color: #8493AF;
+        }
+
+        /* IE浏览器 */
+        input:-ms-input-placeholder {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          color: #8493AF;
+        }
+
+        .icon-btns {
+          display: flex;
+          align-items: center;
+
+          &>span {
+            margin-left: 12px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  .video-right-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .video-title-wrap {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 16px;
+      color: #232F46;
+      margin-bottom: 12px;
+    }
+
+    .video-setting-wrap {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/es/common/LinkModal/index.js

@@ -25,6 +25,8 @@ var _CustomTable = _interopRequireDefault(require("./CustomTable"));
 
 var _BundleCampaign = _interopRequireDefault(require("./BundleCampaign"));
 
+var _SelectVideoModal = _interopRequireDefault(require("./SelectVideoModal"));
+
 var _locale = require("../../locale");
 
 var _commonUtil = require("../../utils/commonUtil");
@@ -180,6 +182,20 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
   }
 };
 
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
 var LinkModal = function LinkModal(props) {
   var onConfirm = props.onConfirm,
       onClose = props.onClose,
@@ -214,7 +230,12 @@ var LinkModal = function LinkModal(props) {
 
           case 1:
             types = _a.sent();
-            setLinkTypes(types);
+            setLinkTypes(__spreadArrays(types, [{
+              comments: 'Video',
+              linkTypeCode: 'Video',
+              linkTypeName: 'Video',
+              seq: 7
+            }]));
             setSelected(types[0].linkTypeCode);
             return [2
             /*return*/
@@ -297,7 +318,7 @@ var LinkModal = function LinkModal(props) {
     setUrl: function setUrl(url) {
       return setLinkUrl(url);
     }
-  }), selected === 'Video' && /*#__PURE__*/_react["default"].createElement(_BundleCampaign["default"], {
+  }), selected === 'Video' && /*#__PURE__*/_react["default"].createElement(_SelectVideoModal["default"], {
     setUrl: function setUrl(url) {
       return setLinkUrl(url);
     }

package/es/common/LinkModal/index.less

@@ -1,5 +1,5 @@
 .linkModal {
-  width: 1200px;
+  width: 1300px;
   right: unset !important;
   left: unset !important;
 

package/es/common/Video/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.createVideoModal = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -204,6 +204,61 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
   }
 };
 
+/** 检查youtube依赖包 */
+var checkYoutuVIdeo = function checkYoutuVIdeo() {
+  return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          if (!!window.YT) return [3
+          /*break*/
+          , 2];
+          return [4
+          /*yield*/
+          , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
+
+        case 1:
+          _a.sent();
+
+          _a.label = 2;
+
+        case 2:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+/** 检查Ali依赖包 */
+
+
+var checkAliVIdeo = function checkAliVIdeo() {
+  return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          if (!!window.Aliplayer) 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')])];
+
+        case 1:
+          _a.sent();
+
+          _a.label = 2;
+
+        case 2:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
 var createAliVideo = function createAliVideo(domId, opts) {
   if (opts === void 0) {
     opts = {};
@@ -328,6 +383,10 @@ var createYoutuVideo = function createYoutuVideo(domId, opts) {
                         player.mute();
                       }
 
+                      if (opts.videoSound) {
+                        player.unMute();
+                      }
+
                       if (opts.speed) {
                         player.setPlaybackRate(opts.speed);
                       }
@@ -413,6 +472,83 @@ var getVideoType = function getVideoType(opts) {
 
   return 'ali';
 };
+/** 创建视频弹框显示 */
+
+
+var createVideoModal = function createVideoModal(videoId, opts) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var modelWrap, shadowWrap, contentWrap, videoDom, closeImgDom, type;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          modelWrap = document.createElement('div');
+          modelWrap.className = 'pc-video-modal-wrap';
+          modelWrap.setAttribute('video-id', videoId);
+          shadowWrap = document.createElement('div');
+          shadowWrap.className = 'video-shadow-wrap';
+
+          shadowWrap.onclick = function () {
+            var _a;
+
+            (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
+          };
+
+          contentWrap = document.createElement('div');
+          contentWrap.className = 'content-wrap';
+          videoDom = document.createElement('div');
+          videoDom.id = 'video-modal-' + videoId;
+          contentWrap.appendChild(videoDom);
+          closeImgDom = document.createElement('img');
+          closeImgDom.src = _closeImg["default"];
+          closeImgDom.className = 'close-img-wrap';
+
+          closeImgDom.onclick = function () {
+            var _a;
+
+            (_a = document.querySelector("[video-id=\"" + videoId + "\"]")) === null || _a === void 0 ? void 0 : _a.remove();
+          };
+
+          contentWrap.appendChild(closeImgDom);
+          modelWrap.appendChild(shadowWrap);
+          modelWrap.appendChild(contentWrap);
+          (document.querySelector('[magic_design]') || document.body).appendChild(modelWrap);
+          type = getVideoType(opts);
+          if (!(type == 'youtu')) return [3
+          /*break*/
+          , 2];
+          return [4
+          /*yield*/
+          , checkYoutuVIdeo()];
+
+        case 1:
+          _a.sent();
+
+          _a.label = 2;
+
+        case 2:
+          if (!(type == 'ali')) return [3
+          /*break*/
+          , 4];
+          return [4
+          /*yield*/
+          , checkAliVIdeo()];
+
+        case 3:
+          _a.sent();
+
+          _a.label = 4;
+
+        case 4:
+          createVideo(type, '-modal-' + videoId, opts);
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
+exports.createVideoModal = createVideoModal;
 
 var Video =
 /** @class */
@@ -500,30 +636,24 @@ function (_super) {
             case 0:
               if (!this.props.opts.source) return [3
               /*break*/
-              , 8];
+              , 6];
               videoType = getVideoType(this.props.opts);
               if (!(videoType == 'youtu')) return [3
               /*break*/
-              , 4];
-              if (!!window.YT) return [3
-              /*break*/
-              , 2];
+              , 3];
               return [4
               /*yield*/
-              , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
+              , checkYoutuVIdeo()];
 
             case 1:
               _c.sent();
 
-              _c.label = 2;
-
-            case 2:
               _a = this;
               return [4
               /*yield*/
               , createVideo('youtu', this.props.videoId, this.props.opts)];
 
-            case 3:
+            case 2:
               _a.ytPlayer = _c.sent();
               this.ytPlayer.addEventListener('onStateChange', function (event) {
                 if (!_this.props.opts.loop) {
@@ -534,31 +664,25 @@ function (_super) {
                   }
                 }
               });
-              _c.label = 4;
+              _c.label = 3;
 
-            case 4:
+            case 3:
               if (!(videoType == 'ali')) return [3
               /*break*/
-              , 8];
-              if (!!window.Aliplayer) return [3
-              /*break*/
               , 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')])];
+              , checkAliVIdeo()];
 
-            case 5:
+            case 4:
               _c.sent();
 
-              _c.label = 6;
-
-            case 6:
               _b = this;
               return [4
               /*yield*/
               , createVideo('ali', this.props.videoId, this.props.opts)];
 
-            case 7:
+            case 5:
               _b.aliPlayer = _c.sent();
               this.aliPlayer.on('ended', function () {
                 if (!_this.props.opts.loop) {
@@ -567,9 +691,9 @@ function (_super) {
                   _this.props.onEnd();
                 }
               });
-              _c.label = 8;
+              _c.label = 6;
 
-            case 8:
+            case 6:
               return [2
               /*return*/
               ];
@@ -579,7 +703,9 @@ function (_super) {
     };
 
     _this.fullPlay = function () {
-      _this.createVideoModal(_this.props.videoId);
+      createVideoModal(_this.props.videoId, __assign(__assign({}, _this.props.opts), {
+        autoplay: true
+      }));
     };
 
     return _this;

package/es/common/VideoUpload/index.js

@@ -77,8 +77,7 @@ function (_super) {
   VideoUpload.prototype.render = function () {
     var _this = this;
 
-    var _a = this.props.value,
-        value = _a === void 0 ? '/get/resource/20220615/video/haha1536909657474453504.mp4' : _a;
+    var value = this.props.value;
     var visible = this.state.visible;
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-upload-container",
@@ -145,7 +144,7 @@ function (_super) {
   };
 
   VideoUpload.defaultProps = {
-    value: '/get/resource/20220615/video/haha1536909657474453504.mp4',
+    value: '',
     onChange: function onChange(v) {
       console.log(v);
     }

package/es/constants/index.js

@@ -41,7 +41,8 @@ var urlType = {
   CUSTOMIZED: 'customized',
   PROD_FILTER: 'filter',
   ANCHOR: 'anchor',
-  GET_COUPON: 'coupons'
+  GET_COUPON: 'coupons',
+  VIDEO: 'video'
 };
 exports.urlType = urlType;
 var respCodeMap = {