@fonixtree/magic-design 2.0.88 → 2.0.90

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

@@ -128,10 +128,11 @@ function (_super) {
       size: "20px",
       type: "icon-delete1"
     })))), this.videoSetting.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_VideoUpload["default"], {
-      onChange: function onChange(v, n) {
+      onChange: function onChange(v, n, id) {
         _this.onFieldChange({
           sourceUrl: v,
-          name: n
+          name: n,
+          sourceId: id
         });
       },
       value: this.videoSetting.sourceUrl

package/es/common/LinkModal/index.js

@@ -234,7 +234,7 @@ var LinkModal = function LinkModal(props) {
 
   var getLinkTypes = function getLinkTypes() {
     return __awaiter(void 0, void 0, void 0, function () {
-      var types, type;
+      var types, type_1;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -248,12 +248,15 @@ var LinkModal = function LinkModal(props) {
             types = _a.sent();
 
             if (onlySpecificCode) {
-              type = types.filter(function (item) {
-                return item.linkTypeCode === onlySpecificCode;
+              type_1 = [];
+              onlySpecificCode.forEach(function (code) {
+                type_1.push(types.find(function (item) {
+                  return item.linkTypeCode === code;
+                }));
               });
 
-              if (type.length > 0) {
-                types = type;
+              if (type_1.length > 0) {
+                types = type_1;
               }
             }
 

package/es/common/Video/QualityComponent/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./index.less");
+
+function parseDom(html) {
+  var ele = document.createElement('div');
+  ele.innerHTML = html;
+  return ele.childNodes[0];
+}
+
+function cookieSet(cname, cvalue, exdays) {
+  var d = new Date();
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+  var expires = 'expires=' + d.toGMTString();
+  document.cookie = cname + '=' + escape(cvalue) + '; ' + expires;
+}
+
+var qualityHtml = "<div class=\"quality-components\">\n  <div class=\"current-quality\" data-ref=\"\"></div>\n  <ul class=\"quality-list\">\n  </ul>\n</div>";
+var qualityModal = "<div class=\"quality-modal\">\n  <span class=\"switchimg\"></span> <span class=\"current-quality-tag\"></span> , <span class=\"wait\"></span>\n</div>";
+/**
+ * 切换清晰度组件
+ */
+
+var QualityComponent =
+/** @class */
+function () {
+  function QualityComponent(getQuality) {
+    this.html = parseDom(qualityHtml);
+    this.modalHtml = parseDom(qualityModal);
+    this.hasCreated = false;
+    this.definition = '';
+    this.getQuality = getQuality;
+  }
+
+  QualityComponent.prototype.createEl = function (el, player) {
+    var lang = player._options && player._options.language;
+    this.isEn = lang && lang === 'en-us';
+    this.html.querySelector('.current-quality').innerText = this.isEn ? 'Resolution' : '清晰度';
+    this.modalHtml.querySelector('.switchimg').innerText = this.isEn ? 'Switching to you for' : '正在为您切换到';
+    this.modalHtml.querySelector('.wait').innerText = this.isEn ? 'Please wait...' : '请稍后...';
+    var eleControlbar = el.querySelector('.prism-controlbar');
+    eleControlbar.appendChild(this.html);
+    el.appendChild(this.modalHtml);
+  };
+
+  QualityComponent.prototype.setCurrentQuality = function (quality, def) {
+    var currentQuality = this.html.querySelector('.current-quality');
+    currentQuality.innerText = quality;
+    currentQuality.dataset.def = def;
+    this.definition = def;
+    var qualityListEle = this.html.querySelector('.quality-list');
+    var currentEle = qualityListEle.querySelector('.current');
+
+    if (currentEle) {
+      currentEle.className = '';
+    }
+
+    var liTarget = qualityListEle.querySelector("li[data-def=\"" + def + "\"]");
+
+    if (liTarget) {
+      liTarget.className = 'current';
+    }
+  };
+
+  QualityComponent.prototype.created = function (player) {
+    var _this = this;
+
+    this._urls = player._urls;
+    var currentQualityEle = this.html.querySelector('.current-quality');
+    var qualityListEle = this.html.querySelector('.quality-list');
+
+    var lisEle = this._urls.map(function (url) {
+      return "<li data-def=\"" + url.definition + "\">" + url.desc + "</li>";
+    });
+
+    this.html.querySelector('.quality-list').innerHTML = lisEle.join('');
+    console.log(this.definition);
+
+    if (this.hasCreated == false && this.definition) {
+      var liTarget = qualityListEle.querySelector("li[data-def=\"" + this.definition + "\"]");
+      liTarget.className = 'current';
+    }
+
+    this.hasCreated = true;
+    var timeId = null;
+
+    currentQualityEle.onclick = function () {
+      var listVisible = qualityListEle.style.display !== 'none';
+
+      if (listVisible) {
+        qualityListEle.style.display = 'none';
+      } else {
+        qualityListEle.style.display = 'block';
+      }
+    };
+
+    currentQualityEle.onmouseleave = function () {
+      if (timeId) clearTimeout(timeId);
+      timeId = setTimeout(function () {
+        qualityListEle.style.display = 'none';
+      }, 150);
+    };
+
+    qualityListEle.onmouseenter = function () {
+      clearTimeout(timeId);
+    };
+
+    qualityListEle.onmouseleave = function () {
+      if (timeId) clearTimeout(timeId);
+      timeId = setTimeout(function () {
+        qualityListEle.style.display = 'none';
+      }, 150);
+    };
+
+    qualityListEle.onclick = function (_a) {
+      var target = _a.target;
+      var definition = target.dataset.def;
+      var desc = target.innerText;
+
+      if (definition && target.className !== 'current') {
+        var url = _this._urls.find(function (url) {
+          return url.definition === definition;
+        });
+
+        if (url) {
+          cookieSet('selectedStreamLevel', url.definition, 365);
+
+          if (player._switchLevel && !player._options.isLive) {
+            player._switchLevel(url.Url);
+          } else {
+            player._loadByUrlInner(url.Url, player.getCurrentTime(), true
+            /* autoPlay */
+            , true
+            /* isSwitchLevel */
+            );
+          }
+
+          _this.setCurrentQuality(url.desc, url.definition);
+
+          _this.modalHtml.style.display = 'block';
+          _this.modalHtml.querySelector('span.current-quality-tag').innerText = url.desc;
+        }
+      } // 点击切换清晰度时，调用这个方法
+
+
+      _this.getQuality(definition, desc);
+    };
+  };
+
+  QualityComponent.prototype.ready = function (player) {
+    this.modalHtml.style.display = 'none'; // 隐藏设置里面的倍速播放
+
+    var settingEle = document.querySelector('.prism-setting-item.prism-setting-quality');
+
+    if (settingEle) {
+      settingEle.classList.add('player-hidden');
+    }
+  };
+
+  return QualityComponent;
+}();
+
+var _default = QualityComponent;
+exports["default"] = _default;

package/es/common/Video/QualityComponent/index.less

@@ -0,0 +1,78 @@
+.player-hidden {
+  display: none !important;
+}
+
+.quality-components {
+  float: right;
+  color: #fff;
+  height: 35px;
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 4px;
+}
+
+.current-quality {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  // width: 70px;
+  cursor: pointer;
+}
+
+.quality-list {
+  position: absolute;
+  bottom: 46px;
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    text-align: center;
+    // width: 70px;
+    line-height: 30px;
+    background-color: rgba(0, 0, 0, .6);
+    cursor: pointer;
+
+    &.current {
+      color: #00c1de;
+    }
+
+    &+li {
+      border-top: 1px solid rgba(78, 78, 78, 0.3);
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .5);
+    }
+
+    ;
+  }
+}
+
+.quality-modal {
+  position: absolute;
+  bottom: 20%;
+  left: 5%;
+  background-color: rgba(0, 0, 0, .6);
+  border-radius: 5px;
+  color: #fff;
+  padding: 10px 15px;
+  font-size: 14px;
+  display: none;
+
+  span.current-quality-tag {
+    color: #00c1de;
+  }
+}
+
+@media(max-width: 768px) {
+  .current-quality {
+    width: 40px;
+  }
+
+  .quality-list li {
+    width: 45px;
+  }
+}

package/es/common/Video/index.js

@@ -7,7 +7,9 @@ exports["default"] = exports.createVideoModal = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _components = _interopRequireDefault(require("./components"));
+var _index = _interopRequireDefault(require("./RateComponent/index"));
+
+var _index2 = _interopRequireDefault(require("./QualityComponent/index"));
 
 var _closeImg = _interopRequireDefault(require("./closeImg.png"));
 
@@ -267,95 +269,149 @@ var createAliVideo = function createAliVideo(domId, opts) {
   }
 
   return new Promise(function (resolve) {
-    var _window$Aliplayer;
-
-    var skinLayout = [{
-      name: 'H5Loading',
-      align: 'cc'
-    }, {
-      name: 'errorDisplay',
-      align: 'tlabs',
-      x: 0,
-      y: 0
-    }, {
-      name: 'tooltip',
-      align: 'blabs',
-      x: 0,
-      y: 56
-    }, {
-      name: 'thumbnail'
-    }];
-    var controlBar = {
-      name: 'controlBar',
-      align: 'blabs',
-      x: 0,
-      y: 0,
-      children: [{
-        name: 'playButton',
-        align: 'tl',
-        x: 15,
-        y: 12
-      }, {
-        name: 'timeDisplay',
-        align: 'tl',
-        x: 10,
-        y: 7
-      }, {
-        name: 'volume',
-        align: 'tr',
-        x: 5,
-        y: 10
-      }, {
-        name: 'fullScreenButton',
-        align: 'tr',
-        x: 10,
-        y: 12
-      }]
-    };
-    skinLayout.push(controlBar);
-
-    if (opts.progressBar) {
-      controlBar.children.push({
-        name: 'progress',
-        align: 'blabs',
-        x: 0,
-        y: 10
-      });
-    }
+    return __awaiter(void 0, void 0, void 0, function () {
+      var components, res, qualitySource, source, skinLayout, controlBar;
+      return __generator(this, function (_a) {
+        var _window$Aliplayer;
 
-    new window.Aliplayer((_window$Aliplayer = {
-      id: 'video' + domId,
-      source: opts.source,
-      cover: opts.cover,
-      width: '100%',
-      height: '100%',
-      autoplay: false,
-      isLive: false,
-      rePlay: false,
-      playsinline: true,
-      preload: true,
-      controlBarVisibility: 'hover',
-      useH5Prism: true,
-      skinLayout: skinLayout
-    }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", [{
-      name: 'RateComponent',
-      type: _components["default"]
-    }]), _window$Aliplayer), function (player) {
-      if (!opts.videoSound) {
-        player.setVolume(0);
-      }
+        switch (_a.label) {
+          case 0:
+            components = [{
+              name: 'RateComponent',
+              type: _index["default"]
+            }];
+            return [4
+            /*yield*/
+            , (0, _commonUtil.commonFetch)('/designer/v1/content/' + opts.sourceId, {}, 'GET')];
 
-      if (opts.speed) {
-        var speed = Number(opts.speed).toFixed(1);
-        player.setSpeed(speed);
-        player._speed = speed;
-      }
+          case 1:
+            res = _a.sent();
+            qualitySource = {};
+            source = opts.source;
 
-      if (opts.startAt) {
-        player.seek(opts.startAt);
-      }
+            if (res.smallImgUrl) {
+              qualitySource['480P'] = res.smallImgUrl;
+            }
+
+            if (res.url) {
+              qualitySource['720P'] = res.url;
+            }
+
+            if (res.bigImgUrl) {
+              qualitySource['1080P'] = res.bigImgUrl;
+            }
 
-      resolve(player);
+            if (Object.keys(qualitySource).length) {
+              source = JSON.stringify(qualitySource);
+              components.push({
+                name: 'QualityComponent',
+                type: _index2["default"]
+              });
+            }
+
+            skinLayout = [{
+              name: 'H5Loading',
+              align: 'cc'
+            }, {
+              name: 'errorDisplay',
+              align: 'tlabs',
+              x: 0,
+              y: 0
+            }, {
+              name: 'tooltip',
+              align: 'blabs',
+              x: 0,
+              y: 56
+            }, {
+              name: 'thumbnail'
+            }];
+            controlBar = {
+              name: 'controlBar',
+              align: 'blabs',
+              x: 0,
+              y: 0,
+              children: [{
+                name: 'playButton',
+                align: 'tl',
+                x: 15,
+                y: 12
+              }, {
+                name: 'timeDisplay',
+                align: 'tl',
+                x: 10,
+                y: 7
+              }, {
+                name: 'volume',
+                align: 'tr',
+                x: 5,
+                y: 10
+              }, {
+                name: 'fullScreenButton',
+                align: 'tr',
+                x: 10,
+                y: 12
+              }]
+            };
+            skinLayout.push(controlBar);
+
+            if (opts.progressBar) {
+              controlBar.children.push({
+                name: 'progress',
+                align: 'blabs',
+                x: 0,
+                y: 10
+              });
+            }
+
+            console.log('source: ', source);
+            new window.Aliplayer((_window$Aliplayer = {
+              id: 'video' + domId,
+              source: source,
+              cover: opts.cover,
+              width: '100%',
+              height: '100%',
+              autoplay: false,
+              isLive: false,
+              rePlay: false,
+              playsinline: true,
+              preload: true,
+              controlBarVisibility: 'hover',
+              useH5Prism: true,
+              skinLayout: skinLayout
+            }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", components), _window$Aliplayer), function (player) {
+              if (!opts.videoSound) {
+                player.setVolume(0);
+              }
+
+              if (opts.speed) {
+                var speed = Number(opts.speed).toFixed(1);
+                player.setSpeed(speed);
+                player._speed = speed;
+              }
+
+              if (opts.startAt) {
+                player.seek(opts.startAt);
+              }
+
+              if (Object.keys(qualitySource).length) {
+                var defaultKey = Object.keys(qualitySource)[0];
+
+                if (qualitySource['720P']) {
+                  defaultKey = '720P';
+                } else {
+                  defaultKey = '480P';
+                }
+
+                player.getComponent('QualityComponent').setCurrentQuality(defaultKey, defaultKey);
+              }
+
+              resolve(player);
+            });
+            return [2
+            /*return*/
+            ];
+        }
+      });
     });
   });
 };

package/es/common/VideoUpload/index.js

@@ -67,7 +67,7 @@ function (_super) {
       });
 
       if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-        _this.props.onChange(data[0].url, data[0].contentTitle);
+        _this.props.onChange(data[0].url, data[0].contentTitle, data[0].contentId);
       }
     };
 

package/es/composite-comp/bol/second-config-panels/VideoSecondConfig/index.js

@@ -219,8 +219,10 @@ function (_super) {
         size: "20px",
         type: "icon-delete1"
       })))), panelProps.video.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_common.VideoUpload, {
-        onChange: function onChange(v) {
+        onChange: function onChange(v, n, id) {
           panelProps.video.sourceUrl = v;
+          panelProps.video.sourceName = n;
+          panelProps.video.sourceId = id;
 
           _this.reRender();
         },

package/es/composite-comp/dito/second-config-panels/HeadNavigationSecondConfig/index.js

@@ -71,7 +71,7 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image,
           needHover: false,
-          onlySpecificCode: "FunctionPage"
+          onlySpecificCode: ['CustomizedPage', 'FunctionPage']
         }),
         metaOption: panelProps.image
       }];

package/es/composite-comp/dito/second-config-panels/MenuNavigationSecondConfig/index.js

@@ -71,7 +71,7 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image,
           needClickArea: false,
-          onlySpecificCode: "FunctionPage"
+          onlySpecificCode: ['CustomizedPage', 'FunctionPage']
         }),
         metaOption: panelProps.image
       }];

package/es/decorator/index.js

@@ -55,11 +55,14 @@ function shouldUpdate() {
     descriptor.value = function (nextProps, nextState) {
       var nowPropsJson = JSON.stringify(nextProps);
       var nowStateJson = JSON.stringify(nextState);
+      var nowDevice = window.magicDesign.device;
       var should1 = nowPropsJson != this.preProps;
       var should2 = nowStateJson != this.preState;
+      var should3 = nowDevice != this.preDevice;
       this.preProps = nowPropsJson;
       this.preState = nowStateJson;
-      var result = should1 || should2;
+      this.preDevice = nowDevice;
+      var result = should1 || should2 || should3;
       return result && fn.apply(this, {
         nextProps: nextProps
       });

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

@@ -128,10 +128,11 @@ function (_super) {
       size: "20px",
       type: "icon-delete1"
     })))), this.videoSetting.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_VideoUpload["default"], {
-      onChange: function onChange(v, n) {
+      onChange: function onChange(v, n, id) {
         _this.onFieldChange({
           sourceUrl: v,
-          name: n
+          name: n,
+          sourceId: id
         });
       },
       value: this.videoSetting.sourceUrl

package/lib/common/LinkModal/index.js

@@ -234,7 +234,7 @@ var LinkModal = function LinkModal(props) {
 
   var getLinkTypes = function getLinkTypes() {
     return __awaiter(void 0, void 0, void 0, function () {
-      var types, type;
+      var types, type_1;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -248,12 +248,15 @@ var LinkModal = function LinkModal(props) {
             types = _a.sent();
 
             if (onlySpecificCode) {
-              type = types.filter(function (item) {
-                return item.linkTypeCode === onlySpecificCode;
+              type_1 = [];
+              onlySpecificCode.forEach(function (code) {
+                type_1.push(types.find(function (item) {
+                  return item.linkTypeCode === code;
+                }));
               });
 
-              if (type.length > 0) {
-                types = type;
+              if (type_1.length > 0) {
+                types = type_1;
               }
             }
 

package/lib/common/Video/QualityComponent/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./index.less");
+
+function parseDom(html) {
+  var ele = document.createElement('div');
+  ele.innerHTML = html;
+  return ele.childNodes[0];
+}
+
+function cookieSet(cname, cvalue, exdays) {
+  var d = new Date();
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+  var expires = 'expires=' + d.toGMTString();
+  document.cookie = cname + '=' + escape(cvalue) + '; ' + expires;
+}
+
+var qualityHtml = "<div class=\"quality-components\">\n  <div class=\"current-quality\" data-ref=\"\"></div>\n  <ul class=\"quality-list\">\n  </ul>\n</div>";
+var qualityModal = "<div class=\"quality-modal\">\n  <span class=\"switchimg\"></span> <span class=\"current-quality-tag\"></span> , <span class=\"wait\"></span>\n</div>";
+/**
+ * 切换清晰度组件
+ */
+
+var QualityComponent =
+/** @class */
+function () {
+  function QualityComponent(getQuality) {
+    this.html = parseDom(qualityHtml);
+    this.modalHtml = parseDom(qualityModal);
+    this.hasCreated = false;
+    this.definition = '';
+    this.getQuality = getQuality;
+  }
+
+  QualityComponent.prototype.createEl = function (el, player) {
+    var lang = player._options && player._options.language;
+    this.isEn = lang && lang === 'en-us';
+    this.html.querySelector('.current-quality').innerText = this.isEn ? 'Resolution' : '清晰度';
+    this.modalHtml.querySelector('.switchimg').innerText = this.isEn ? 'Switching to you for' : '正在为您切换到';
+    this.modalHtml.querySelector('.wait').innerText = this.isEn ? 'Please wait...' : '请稍后...';
+    var eleControlbar = el.querySelector('.prism-controlbar');
+    eleControlbar.appendChild(this.html);
+    el.appendChild(this.modalHtml);
+  };
+
+  QualityComponent.prototype.setCurrentQuality = function (quality, def) {
+    var currentQuality = this.html.querySelector('.current-quality');
+    currentQuality.innerText = quality;
+    currentQuality.dataset.def = def;
+    this.definition = def;
+    var qualityListEle = this.html.querySelector('.quality-list');
+    var currentEle = qualityListEle.querySelector('.current');
+
+    if (currentEle) {
+      currentEle.className = '';
+    }
+
+    var liTarget = qualityListEle.querySelector("li[data-def=\"" + def + "\"]");
+
+    if (liTarget) {
+      liTarget.className = 'current';
+    }
+  };
+
+  QualityComponent.prototype.created = function (player) {
+    var _this = this;
+
+    this._urls = player._urls;
+    var currentQualityEle = this.html.querySelector('.current-quality');
+    var qualityListEle = this.html.querySelector('.quality-list');
+
+    var lisEle = this._urls.map(function (url) {
+      return "<li data-def=\"" + url.definition + "\">" + url.desc + "</li>";
+    });
+
+    this.html.querySelector('.quality-list').innerHTML = lisEle.join('');
+    console.log(this.definition);
+
+    if (this.hasCreated == false && this.definition) {
+      var liTarget = qualityListEle.querySelector("li[data-def=\"" + this.definition + "\"]");
+      liTarget.className = 'current';
+    }
+
+    this.hasCreated = true;
+    var timeId = null;
+
+    currentQualityEle.onclick = function () {
+      var listVisible = qualityListEle.style.display !== 'none';
+
+      if (listVisible) {
+        qualityListEle.style.display = 'none';
+      } else {
+        qualityListEle.style.display = 'block';
+      }
+    };
+
+    currentQualityEle.onmouseleave = function () {
+      if (timeId) clearTimeout(timeId);
+      timeId = setTimeout(function () {
+        qualityListEle.style.display = 'none';
+      }, 150);
+    };
+
+    qualityListEle.onmouseenter = function () {
+      clearTimeout(timeId);
+    };
+
+    qualityListEle.onmouseleave = function () {
+      if (timeId) clearTimeout(timeId);
+      timeId = setTimeout(function () {
+        qualityListEle.style.display = 'none';
+      }, 150);
+    };
+
+    qualityListEle.onclick = function (_a) {
+      var target = _a.target;
+      var definition = target.dataset.def;
+      var desc = target.innerText;
+
+      if (definition && target.className !== 'current') {
+        var url = _this._urls.find(function (url) {
+          return url.definition === definition;
+        });
+
+        if (url) {
+          cookieSet('selectedStreamLevel', url.definition, 365);
+
+          if (player._switchLevel && !player._options.isLive) {
+            player._switchLevel(url.Url);
+          } else {
+            player._loadByUrlInner(url.Url, player.getCurrentTime(), true
+            /* autoPlay */
+            , true
+            /* isSwitchLevel */
+            );
+          }
+
+          _this.setCurrentQuality(url.desc, url.definition);
+
+          _this.modalHtml.style.display = 'block';
+          _this.modalHtml.querySelector('span.current-quality-tag').innerText = url.desc;
+        }
+      } // 点击切换清晰度时，调用这个方法
+
+
+      _this.getQuality(definition, desc);
+    };
+  };
+
+  QualityComponent.prototype.ready = function (player) {
+    this.modalHtml.style.display = 'none'; // 隐藏设置里面的倍速播放
+
+    var settingEle = document.querySelector('.prism-setting-item.prism-setting-quality');
+
+    if (settingEle) {
+      settingEle.classList.add('player-hidden');
+    }
+  };
+
+  return QualityComponent;
+}();
+
+var _default = QualityComponent;
+exports["default"] = _default;

package/lib/common/Video/QualityComponent/index.less

@@ -0,0 +1,78 @@
+.player-hidden {
+  display: none !important;
+}
+
+.quality-components {
+  float: right;
+  color: #fff;
+  height: 35px;
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 4px;
+}
+
+.current-quality {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  // width: 70px;
+  cursor: pointer;
+}
+
+.quality-list {
+  position: absolute;
+  bottom: 46px;
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    text-align: center;
+    // width: 70px;
+    line-height: 30px;
+    background-color: rgba(0, 0, 0, .6);
+    cursor: pointer;
+
+    &.current {
+      color: #00c1de;
+    }
+
+    &+li {
+      border-top: 1px solid rgba(78, 78, 78, 0.3);
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .5);
+    }
+
+    ;
+  }
+}
+
+.quality-modal {
+  position: absolute;
+  bottom: 20%;
+  left: 5%;
+  background-color: rgba(0, 0, 0, .6);
+  border-radius: 5px;
+  color: #fff;
+  padding: 10px 15px;
+  font-size: 14px;
+  display: none;
+
+  span.current-quality-tag {
+    color: #00c1de;
+  }
+}
+
+@media(max-width: 768px) {
+  .current-quality {
+    width: 40px;
+  }
+
+  .quality-list li {
+    width: 45px;
+  }
+}

package/lib/common/Video/index.js

@@ -7,7 +7,9 @@ exports["default"] = exports.createVideoModal = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _components = _interopRequireDefault(require("./components"));
+var _index = _interopRequireDefault(require("./RateComponent/index"));
+
+var _index2 = _interopRequireDefault(require("./QualityComponent/index"));
 
 var _closeImg = _interopRequireDefault(require("./closeImg.png"));
 
@@ -267,95 +269,149 @@ var createAliVideo = function createAliVideo(domId, opts) {
   }
 
   return new Promise(function (resolve) {
-    var _window$Aliplayer;
-
-    var skinLayout = [{
-      name: 'H5Loading',
-      align: 'cc'
-    }, {
-      name: 'errorDisplay',
-      align: 'tlabs',
-      x: 0,
-      y: 0
-    }, {
-      name: 'tooltip',
-      align: 'blabs',
-      x: 0,
-      y: 56
-    }, {
-      name: 'thumbnail'
-    }];
-    var controlBar = {
-      name: 'controlBar',
-      align: 'blabs',
-      x: 0,
-      y: 0,
-      children: [{
-        name: 'playButton',
-        align: 'tl',
-        x: 15,
-        y: 12
-      }, {
-        name: 'timeDisplay',
-        align: 'tl',
-        x: 10,
-        y: 7
-      }, {
-        name: 'volume',
-        align: 'tr',
-        x: 5,
-        y: 10
-      }, {
-        name: 'fullScreenButton',
-        align: 'tr',
-        x: 10,
-        y: 12
-      }]
-    };
-    skinLayout.push(controlBar);
-
-    if (opts.progressBar) {
-      controlBar.children.push({
-        name: 'progress',
-        align: 'blabs',
-        x: 0,
-        y: 10
-      });
-    }
+    return __awaiter(void 0, void 0, void 0, function () {
+      var components, res, qualitySource, source, skinLayout, controlBar;
+      return __generator(this, function (_a) {
+        var _window$Aliplayer;
 
-    new window.Aliplayer((_window$Aliplayer = {
-      id: 'video' + domId,
-      source: opts.source,
-      cover: opts.cover,
-      width: '100%',
-      height: '100%',
-      autoplay: false,
-      isLive: false,
-      rePlay: false,
-      playsinline: true,
-      preload: true,
-      controlBarVisibility: 'hover',
-      useH5Prism: true,
-      skinLayout: skinLayout
-    }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", [{
-      name: 'RateComponent',
-      type: _components["default"]
-    }]), _window$Aliplayer), function (player) {
-      if (!opts.videoSound) {
-        player.setVolume(0);
-      }
+        switch (_a.label) {
+          case 0:
+            components = [{
+              name: 'RateComponent',
+              type: _index["default"]
+            }];
+            return [4
+            /*yield*/
+            , (0, _commonUtil.commonFetch)('/designer/v1/content/' + opts.sourceId, {}, 'GET')];
 
-      if (opts.speed) {
-        var speed = Number(opts.speed).toFixed(1);
-        player.setSpeed(speed);
-        player._speed = speed;
-      }
+          case 1:
+            res = _a.sent();
+            qualitySource = {};
+            source = opts.source;
 
-      if (opts.startAt) {
-        player.seek(opts.startAt);
-      }
+            if (res.smallImgUrl) {
+              qualitySource['480P'] = res.smallImgUrl;
+            }
+
+            if (res.url) {
+              qualitySource['720P'] = res.url;
+            }
+
+            if (res.bigImgUrl) {
+              qualitySource['1080P'] = res.bigImgUrl;
+            }
 
-      resolve(player);
+            if (Object.keys(qualitySource).length) {
+              source = JSON.stringify(qualitySource);
+              components.push({
+                name: 'QualityComponent',
+                type: _index2["default"]
+              });
+            }
+
+            skinLayout = [{
+              name: 'H5Loading',
+              align: 'cc'
+            }, {
+              name: 'errorDisplay',
+              align: 'tlabs',
+              x: 0,
+              y: 0
+            }, {
+              name: 'tooltip',
+              align: 'blabs',
+              x: 0,
+              y: 56
+            }, {
+              name: 'thumbnail'
+            }];
+            controlBar = {
+              name: 'controlBar',
+              align: 'blabs',
+              x: 0,
+              y: 0,
+              children: [{
+                name: 'playButton',
+                align: 'tl',
+                x: 15,
+                y: 12
+              }, {
+                name: 'timeDisplay',
+                align: 'tl',
+                x: 10,
+                y: 7
+              }, {
+                name: 'volume',
+                align: 'tr',
+                x: 5,
+                y: 10
+              }, {
+                name: 'fullScreenButton',
+                align: 'tr',
+                x: 10,
+                y: 12
+              }]
+            };
+            skinLayout.push(controlBar);
+
+            if (opts.progressBar) {
+              controlBar.children.push({
+                name: 'progress',
+                align: 'blabs',
+                x: 0,
+                y: 10
+              });
+            }
+
+            console.log('source: ', source);
+            new window.Aliplayer((_window$Aliplayer = {
+              id: 'video' + domId,
+              source: source,
+              cover: opts.cover,
+              width: '100%',
+              height: '100%',
+              autoplay: false,
+              isLive: false,
+              rePlay: false,
+              playsinline: true,
+              preload: true,
+              controlBarVisibility: 'hover',
+              useH5Prism: true,
+              skinLayout: skinLayout
+            }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", components), _window$Aliplayer), function (player) {
+              if (!opts.videoSound) {
+                player.setVolume(0);
+              }
+
+              if (opts.speed) {
+                var speed = Number(opts.speed).toFixed(1);
+                player.setSpeed(speed);
+                player._speed = speed;
+              }
+
+              if (opts.startAt) {
+                player.seek(opts.startAt);
+              }
+
+              if (Object.keys(qualitySource).length) {
+                var defaultKey = Object.keys(qualitySource)[0];
+
+                if (qualitySource['720P']) {
+                  defaultKey = '720P';
+                } else {
+                  defaultKey = '480P';
+                }
+
+                player.getComponent('QualityComponent').setCurrentQuality(defaultKey, defaultKey);
+              }
+
+              resolve(player);
+            });
+            return [2
+            /*return*/
+            ];
+        }
+      });
     });
   });
 };

package/lib/common/VideoUpload/index.js

@@ -67,7 +67,7 @@ function (_super) {
       });
 
       if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-        _this.props.onChange(data[0].url, data[0].contentTitle);
+        _this.props.onChange(data[0].url, data[0].contentTitle, data[0].contentId);
       }
     };
 

package/lib/composite-comp/bol/second-config-panels/VideoSecondConfig/index.js

@@ -219,8 +219,10 @@ function (_super) {
         size: "20px",
         type: "icon-delete1"
       })))), panelProps.video.sourceType === 'Upload' && /*#__PURE__*/_react["default"].createElement(_common.VideoUpload, {
-        onChange: function onChange(v) {
+        onChange: function onChange(v, n, id) {
           panelProps.video.sourceUrl = v;
+          panelProps.video.sourceName = n;
+          panelProps.video.sourceId = id;
 
           _this.reRender();
         },

package/lib/composite-comp/dito/second-config-panels/HeadNavigationSecondConfig/index.js

@@ -71,7 +71,7 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image,
           needHover: false,
-          onlySpecificCode: "FunctionPage"
+          onlySpecificCode: ['CustomizedPage', 'FunctionPage']
         }),
         metaOption: panelProps.image
       }];

package/lib/composite-comp/dito/second-config-panels/MenuNavigationSecondConfig/index.js

@@ -71,7 +71,7 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image,
           needClickArea: false,
-          onlySpecificCode: "FunctionPage"
+          onlySpecificCode: ['CustomizedPage', 'FunctionPage']
         }),
         metaOption: panelProps.image
       }];

package/lib/decorator/index.js

@@ -55,11 +55,14 @@ function shouldUpdate() {
     descriptor.value = function (nextProps, nextState) {
       var nowPropsJson = JSON.stringify(nextProps);
       var nowStateJson = JSON.stringify(nextState);
+      var nowDevice = window.magicDesign.device;
       var should1 = nowPropsJson != this.preProps;
       var should2 = nowStateJson != this.preState;
+      var should3 = nowDevice != this.preDevice;
       this.preProps = nowPropsJson;
       this.preState = nowStateJson;
-      var result = should1 || should2;
+      this.preDevice = nowDevice;
+      var result = should1 || should2 || should3;
       return result && fn.apply(this, {
         nextProps: nextProps
       });

package/package.json

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