@fonixtree/magic-design 0.0.167 → 0.0.169

package/lib/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/lib/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/lib/composite-comp/common/components/ProductItem/index.js

@@ -166,7 +166,7 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_NewImg["default"], {
       className: "product-img",
       lazy: true,
-      src: (0, _commonUtil.convertImageUrl)(data.imgUrlContent || data.productImageUrlContent),
+      src: (0, _commonUtil.convertImageUrl)(data.productImg || data.imgUrlContent || data.productImageUrlContent),
       style: imgStyle
     }), /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
       labels: imgLabels,

package/lib/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 = {

package/lib/utils/businessUtil.js

@@ -9,6 +9,8 @@ var _qs = _interopRequireDefault(require("qs"));
 
 var _lodash = require("lodash");
 
+var _commonUtil = require("./commonUtil");
+
 var _constants = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,7 +58,7 @@ var parseUrl = function parseUrl(url) {
         action: 'jump',
         data: {
           type: 'NAVIGATE',
-          url: h5Link
+          url: link
         }
       };
       break;
@@ -97,6 +99,19 @@ var parseUrl = function parseUrl(url) {
       };
       break;
 
+    case _constants.urlType.VIDEO:
+      // 播放视频
+      params = {
+        type: 'operation',
+        params: {
+          type: 'VIDEO',
+          data: (0, _commonUtil.ensure)(function () {
+            return JSON.parse(url.slice('video-'.length));
+          }, {})
+        }
+      };
+      break;
+
     default:
       var map = {
         '/main/cart': 'CART',
@@ -119,7 +134,8 @@ var parseUrl = function parseUrl(url) {
       params = {
         action: 'jump',
         params: {
-          type: map[url]
+          type: map[url],
+          link: link
         }
       };
   }

package/lib/utils/commonUtil.js

@@ -281,7 +281,11 @@ var navigateTo = function navigateTo(url) {
     return;
   }
 
-  window.magicDesign.history.push(url);
+  if (url.startsWith('/')) {
+    window.magicDesign.history.push(url);
+  } else {
+    window.location.href = link;
+  }
 };
 
 exports.navigateTo = navigateTo;

package/lib/utils/coreUtil.js

@@ -19,6 +19,8 @@ var _MessageModal = _interopRequireDefault(require("../common/MessageModal"));
 
 var _locale = require("../locale");
 
+var _Video = require("../common/Video");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -292,27 +294,34 @@ var clickUrl = function clickUrl(url) {
       data = _a.data;
 
   var params = data.params;
-  console.log('data', data);
-  console.log('link', link);
 
-  if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
+  if (window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
+    return;
+  } // 如果是video 放开return
+
+
+  if (params.type !== 'VIDEO' && window.magicDesign.readOnly) {
     return;
   }
 
   if ((0, _androidUtil.browserVersion)().isApp) {
     (0, _androidUtil.sendToApp)(params);
   } else {
-    // 领取优惠券
+    // 视频
+    if (params.type === 'VIDEO') {
+      (0, _Video.createVideoModal)((0, _uuid.v4)(), __assign(__assign({}, params.data), {
+        source: params.data.sourceUrl
+      }));
+      return;
+    } // 领取优惠券
+
+
     if (params.type === 'GET_COUPON') {
       getCoupon(params.couponId);
       return;
     }
 
-    if (link.startsWith('/')) {
-      (0, _commonUtil.navigateTo)(newUrl);
-    } else {
-      window.location.href = newUrl;
-    }
+    (0, _commonUtil.navigateTo)(link);
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.167",
+  "version": "0.0.169",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",