xgplayer 3.0.0-alpha.166 → 3.0.0-alpha.167

package/es/plugins/progressPreview/dotsApi.js

@@ -24,29 +24,63 @@ function mergeISPOT(iSpot) {
 }
 var APIS = {
   initDots: function initDots() {
+    this.createDots(this._ispots, false);
+    this._ispotsInit = true;
+  },
+  /**
+   * 批量创建故事点DOM元素
+   * @param {Array} iSpots
+   * @public
+   */
+  createDots: function createDots() {
     var _this = this;
-    this._ispots.map(function (item) {
-      _this.createDot(item, false);
+    var iSpots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (!Array.isArray(iSpots) || !iSpots.length) return;
+    var progress = this.player.plugins.progress;
+    if (!progress || !progress.outer) return;
+    var fragment = document.createDocumentFragment();
+    iSpots.forEach(function (item) {
+      var dotDom = _this._createDotElement(item, isNew);
+      if (dotDom) {
+        fragment.appendChild(dotDom);
+      }
     });
-    this._ispotsInit = true;
+    progress.outer.appendChild(fragment);
   },
   /**
    * 创建一个故事点
    * @param { object } iSpot
    * @param { boolean } isNew
+   * @public
    */
   createDot: function createDot(iSpot) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var dotDom = this._createDotElement(iSpot, isNew);
+    if (dotDom) {
+      var progress = this.player.plugins.progress;
+      progress.outer && progress.outer.appendChild(dotDom);
+    }
+  },
+  /**
+   * 创建故事点DOM元素（内部方法，不直接添加到DOM）
+   * @param { object } iSpot
+   * @param { boolean } isNew
+   * @returns { HTMLElement | null }
+   * @private
+   */
+  _createDotElement: function _createDotElement(iSpot) {
     var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var progress = this.player.plugins.progress;
     if (!progress) {
-      return;
+      return null;
     }
     if (isNew) {
       mergeISPOT(iSpot);
       this._ispots.push(iSpot);
     }
     if (!this._ispotsInit && isNew) {
-      return;
+      return null;
     }
     var ret = this.calcuPosition(iSpot.time, iSpot.duration);
     var style = iSpot.style || {};
@@ -60,10 +94,10 @@ var APIS = {
       'data-time': iSpot.time,
       'data-id': iSpot.id
     }, className);
-    Object.keys(style).map(function (key) {
+    Object.keys(style).forEach(function (key) {
       dotDom.style[key] = style[key];
     });
-    progress.outer && progress.outer.appendChild(dotDom);
+    return dotDom;
   },
   /**
    * 根据id查找节点

package/es/plugins/progressPreview/index.js

@@ -382,20 +382,25 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
     value: function calcuPosition(time, duration) {
       var progress = this.player.plugins.progress;
       var player = this.player;
-      var totalWidth = progress.root.getBoundingClientRect().width;
-      var widthPerSeconds = player.duration / totalWidth * 6;
-      var ret = {};
       if (time + duration > player.duration) {
         duration = player.duration - time;
       }
-      ret.left = time / player.duration * 100;
-      ret.width = duration / player.duration;
-      ret.isMini = widthPerSeconds > duration;
-      return {
+      var ret = {
         left: time / player.duration * 100,
         width: duration / player.duration * 100,
-        isMini: duration < widthPerSeconds
+        isMini: false
       };
+      if (this.config.isDotAdaptWidth) {
+        var widthPerSeconds = 0;
+        if (player.duration > 0) {
+          var totalWidth = progress.root.getBoundingClientRect().width;
+          widthPerSeconds = player.duration / totalWidth * 6;
+        }
+        ret.isMini = widthPerSeconds > duration;
+      } else {
+        ret.isMini = true;
+      }
+      return ret;
     }
   }, {
     key: "showDot",
@@ -542,7 +547,9 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
         disable: false,
         width: 160,
         // 显示宽度
-        height: 90 // 显示高度
+        height: 90,
+        // 显示高度
+        isDotAdaptWidth: true // 故事点是否动态宽度
       };
     }
   }]);

package/es/version.js

@@ -1,5 +1,5 @@
 /**
  * @type {string}
  * */
-var version = JSON.parse("\"3.0.0-alpha.166\"");
+var version = JSON.parse("\"3.0.0-alpha.167\"");
 export default version;

package/lib/plugins/progressPreview/dotsApi.js

@@ -30,29 +30,63 @@ function mergeISPOT(iSpot) {
 }
 var APIS = {
   initDots: function initDots() {
+    this.createDots(this._ispots, false);
+    this._ispotsInit = true;
+  },
+  /**
+   * 批量创建故事点DOM元素
+   * @param {Array} iSpots
+   * @public
+   */
+  createDots: function createDots() {
     var _this = this;
-    this._ispots.map(function (item) {
-      _this.createDot(item, false);
+    var iSpots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (!Array.isArray(iSpots) || !iSpots.length) return;
+    var progress = this.player.plugins.progress;
+    if (!progress || !progress.outer) return;
+    var fragment = document.createDocumentFragment();
+    iSpots.forEach(function (item) {
+      var dotDom = _this._createDotElement(item, isNew);
+      if (dotDom) {
+        fragment.appendChild(dotDom);
+      }
     });
-    this._ispotsInit = true;
+    progress.outer.appendChild(fragment);
   },
   /**
    * 创建一个故事点
    * @param { object } iSpot
    * @param { boolean } isNew
+   * @public
    */
   createDot: function createDot(iSpot) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var dotDom = this._createDotElement(iSpot, isNew);
+    if (dotDom) {
+      var progress = this.player.plugins.progress;
+      progress.outer && progress.outer.appendChild(dotDom);
+    }
+  },
+  /**
+   * 创建故事点DOM元素（内部方法，不直接添加到DOM）
+   * @param { object } iSpot
+   * @param { boolean } isNew
+   * @returns { HTMLElement | null }
+   * @private
+   */
+  _createDotElement: function _createDotElement(iSpot) {
     var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var progress = this.player.plugins.progress;
     if (!progress) {
-      return;
+      return null;
     }
     if (isNew) {
       mergeISPOT(iSpot);
       this._ispots.push(iSpot);
     }
     if (!this._ispotsInit && isNew) {
-      return;
+      return null;
     }
     var ret = this.calcuPosition(iSpot.time, iSpot.duration);
     var style = iSpot.style || {};
@@ -66,10 +100,10 @@ var APIS = {
       'data-time': iSpot.time,
       'data-id': iSpot.id
     }, className);
-    Object.keys(style).map(function (key) {
+    Object.keys(style).forEach(function (key) {
       dotDom.style[key] = style[key];
     });
-    progress.outer && progress.outer.appendChild(dotDom);
+    return dotDom;
   },
   /**
    * 根据id查找节点

package/lib/plugins/progressPreview/index.js

@@ -391,20 +391,25 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
     value: function calcuPosition(time, duration) {
       var progress = this.player.plugins.progress;
       var player = this.player;
-      var totalWidth = progress.root.getBoundingClientRect().width;
-      var widthPerSeconds = player.duration / totalWidth * 6;
-      var ret = {};
       if (time + duration > player.duration) {
         duration = player.duration - time;
       }
-      ret.left = time / player.duration * 100;
-      ret.width = duration / player.duration;
-      ret.isMini = widthPerSeconds > duration;
-      return {
+      var ret = {
         left: time / player.duration * 100,
         width: duration / player.duration * 100,
-        isMini: duration < widthPerSeconds
+        isMini: false
       };
+      if (this.config.isDotAdaptWidth) {
+        var widthPerSeconds = 0;
+        if (player.duration > 0) {
+          var totalWidth = progress.root.getBoundingClientRect().width;
+          widthPerSeconds = player.duration / totalWidth * 6;
+        }
+        ret.isMini = widthPerSeconds > duration;
+      } else {
+        ret.isMini = true;
+      }
+      return ret;
     }
   }, {
     key: "showDot",
@@ -551,7 +556,9 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
         disable: false,
         width: 160,
         // 显示宽度
-        height: 90 // 显示高度
+        height: 90,
+        // 显示高度
+        isDotAdaptWidth: true // 故事点是否动态宽度
       };
     }
   }]);

package/lib/version.js

@@ -7,6 +7,6 @@ exports.default = void 0;
 /**
  * @type {string}
  * */
-var version = JSON.parse("\"3.0.0-alpha.166\"");
+var version = JSON.parse("\"3.0.0-alpha.167\"");
 var _default = version;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xgplayer",
-  "version": "3.0.0-alpha.166",
+  "version": "3.0.0-alpha.167",
   "description": "video player",
   "main": "./lib/index.js",
   "module": "./es/index.js",