xgplayer 3.0.0-next.4 → 3.0.0-next.40

package/es/plugins/progressPreview/index.js

@@ -1,78 +1,91 @@
-import 'core-js/modules/es.reflect.construct.js';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.object.keys.js';
-import 'core-js/modules/es.array.concat.js';
-import Util from '../../utils/util.js';
-import Sniffer from '../../utils/sniffer.js';
-import Plugin from '../../plugin/plugin.js';
-import initDotsAPI from './dotsApi.js';
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/**
- * @typedef {{
- *   miniWidth?: number, // 故事点显示最小宽度
- *   ispots?: Array<{ //故事点列表
- *     time?: number, // 进度条在此时间戳打点 单位为s
- *     text?: string, // 打点处的自定义文案
- *     id?: number | string, // 标记唯一标识，用于删除的时候索引
- *     duration:? number, // 进度条标识点的时长 默认1s【可选】单位为s
- *     color?: string, // 进度条标识点的显示颜色【可选】
- *     style?: { [propName: string]: any }, // 指定样式
- *     width?: number,
- *     height?: number
- *    }>,
- *   defaultText?: '', // 故事点hover默认文案
- *   isFocusDots?: true, //
- *   isShowThumbnail?: true, // 是否显示预览图
- *   isShowCoverPreview?: false, // 进度条拖动时是否显示播放区域预览图
- *   mode?: 'short' | 'production', // short // production
- *   [propName: string]: any
- * }} IProgressPreviewConfig
- */
-
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.concat.js";
+import util from "../../utils/util.js";
+import sniffer from "../../utils/sniffer.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.slice.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.splice.js";
+import initDotsAPI from "./dotsApi.js";
 var CALLBACK_MAP = {
-  dragmove: 'onProgressMove',
-  dragstart: 'onProgressDragStart',
-  dragend: 'onProgressDragEnd'
+  dragmove: "onProgressMove",
+  dragstart: "onProgressDragStart",
+  dragend: "onProgressDragEnd",
+  click: "onProgressClick",
+  mouseover: "onProgressMouseOver"
 };
-/** */
-
-var ProgressPreview = /*#__PURE__*/function (_Plugin) {
-  _inherits(ProgressPreview, _Plugin);
-
-  var _super = _createSuper(ProgressPreview);
-
-  function ProgressPreview(args) {
+var ProgressPreview = /* @__PURE__ */ function(_Plugin) {
+  _inherits(ProgressPreview2, _Plugin);
+  var _super = _createSuper(ProgressPreview2);
+  function ProgressPreview2(args) {
     var _this;
-
-    _classCallCheck(this, ProgressPreview);
-
+    _classCallCheck(this, ProgressPreview2);
     _this = _super.call(this, args);
-
-    _defineProperty(_assertThisInitialized(_this), "onMousemove", function (e) {
-      if (_this._state.f || Util.hasClass(e.target, 'xg-spot-content')) {
-        Util.event(e);
+    _defineProperty(_assertThisInitialized(_this), "onMousemove", function(e) {
+      if (_this.config.disable) {
+        return;
+      }
+      if (_this._state.f || util.hasClass(e.target, "xg-spot-content")) {
+        util.event(e);
         e.stopPropagation();
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onMousedown", function (e) {
-      if (_this._state.f || Util.hasClass(e.target, 'xg-spot-content')) {
-        Util.event(e);
+    _defineProperty(_assertThisInitialized(_this), "onMousedown", function(e) {
+      if (_this.config.disable) {
+        return;
+      }
+      if (_this._state.f || util.hasClass(e.target, "xg-spot-content")) {
+        util.event(e);
         e.stopPropagation();
       }
     });
-
+    _defineProperty(_assertThisInitialized(_this), "onMouseup", function(e) {
+      if (!_this.isDrag) {
+        return;
+      }
+      var progress = _this.player.plugins.progress;
+      if (progress && progress.pos) {
+        progress.onMouseUp(e);
+        !progress.pos.isEnter && progress.onMouseLeave(e);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDotMouseLeave", function(e) {
+      if (_this.config.disable) {
+        return;
+      }
+      _this._curDot.removeEventListener("mouseleave", _this.onDotMouseLeave);
+      _this.blurDot(e.target);
+      _this._curDot = null;
+      var progress = _this.player.plugins.progress;
+      progress && progress.enableBlur();
+      _this.show();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onProgressMouseOver", function(data, e) {
+      if (_this.config.disable) {
+        return;
+      }
+      if (util.hasClass(e.target, "xgplayer-spot") && !_this._curDot) {
+        _this._curDot = e.target;
+        _this.focusDot(e.target);
+        if (_this._curDot.children.length > 0) {
+          _this.hide();
+        }
+        var progress = _this.player.plugins.progress;
+        progress && progress.disableBlur();
+        _this._curDot.addEventListener("mouseleave", _this.onDotMouseLeave);
+      }
+    });
     _this._ispots = [];
     _this.videoPreview = null;
     _this.videothumbnail = null;
@@ -83,93 +96,133 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
     };
     return _this;
   }
-
-  _createClass(ProgressPreview, [{
+  _createClass(ProgressPreview2, [{
     key: "beforeCreate",
     value: function beforeCreate(args) {
       var progress = args.player.plugins.progress;
-
       if (progress) {
         args.root = progress.root;
       }
     }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      this._curDot = null;
+      this.handlerSpotClick = this.hook("spotClick", function(event, data) {
+        if (data.time) {
+          _this2.player.seek(data.time);
+        }
+      });
+      initDotsAPI(this);
+      if (this.config.disable) {
+        this.disable();
+      }
+    }
+  }, {
+    key: "setConfig",
+    value: function setConfig(config) {
+      var _this3 = this;
+      if (!config) {
+        return;
+      }
+      Object.keys(config).map(function(key) {
+        _this3.config[key] = config[key];
+      });
+    }
   }, {
     key: "onPluginsReady",
     value: function onPluginsReady() {
       var player = this.player;
-
       if (!player.plugins.progress) {
         return;
       }
-
-      this.previewLine = this.find('.xg-spot-line');
-      this.timePoint = this.find('.xgplayer-progress-point');
-      this.timeText = this.find('.xg-spot-time');
-      this.tipText = this.find('.spot-inner-text');
+      this.previewLine = this.find(".xg-spot-line");
+      this.timePoint = this.find(".xgplayer-progress-point");
+      this.timeText = this.find(".xg-spot-time");
+      this.tipText = this.find(".spot-inner-text");
       this._hasThumnail = false;
       this.registerThumbnail();
-      initDotsAPI(this);
       this.bindEvents();
     }
   }, {
     key: "bindEvents",
     value: function bindEvents() {
-      var _this2 = this;
-
+      var _this4 = this;
       var progress = this.player.plugins.progress;
-
-      if (Sniffer.device === 'mobile' || !progress) {
+      if (!progress) {
         return;
       }
-
-      Object.keys(CALLBACK_MAP).map(function (key) {
-        _this2[CALLBACK_MAP[key]] = _this2[CALLBACK_MAP[key]].bind(_this2);
-        progress.addCallBack(key, _this2[CALLBACK_MAP[key]]);
+      Object.keys(CALLBACK_MAP).map(function(key) {
+        _this4[CALLBACK_MAP[key]] = _this4[CALLBACK_MAP[key]].bind(_this4);
+        progress.addCallBack(key, _this4[CALLBACK_MAP[key]]);
       });
-      this.bind('.xg-spot-info', 'mousemove', this.onMousemove);
-      this.bind('.xg-spot-info', 'mousedown', this.onMousedown);
-      var fun = this.hook('previewClick', function () {// console.log('args', args)
+      if (sniffer.device === "mobile")
+        return;
+      this.bind(".xg-spot-info", "mousemove", this.onMousemove);
+      this.bind(".xg-spot-info", "mousedown", this.onMousedown);
+      this.bind(".xg-spot-info", "mouseup", this.onMouseup);
+      var fun = this.hook("previewClick", function() {
       });
-
-      this.handlerPreviewClick = function (e) {
+      this.handlerPreviewClick = function(e) {
         e.stopPropagation();
-        fun(parseInt(_this2._state.now * 1000, 10) / 1000, e);
+        fun(parseInt(_this4._state.now * 1e3, 10) / 1e3, e);
       };
-
-      this.bind('.xg-spot-content', 'mouseup', this.handlerPreviewClick);
+      this.bind(".xg-spot-content", "mouseup", this.handlerPreviewClick);
     }
   }, {
     key: "onProgressMove",
-    value: function onProgressMove(data) {
+    value: function onProgressMove(data, e) {
+      if (this.config.disable || !this.player.duration) {
+        return;
+      }
       this.updatePosition(data.offset, data.width, data.currentTime, data.e);
     }
   }, {
     key: "onProgressDragStart",
     value: function onProgressDragStart(data) {
+      if (this.config.disable || !this.player.duration) {
+        return;
+      }
       this.isDrag = true;
-      this.videoPreview && Util.addClass(this.videoPreview, 'show');
+      this.videoPreview && util.addClass(this.videoPreview, "show");
     }
   }, {
     key: "onProgressDragEnd",
     value: function onProgressDragEnd(data) {
+      if (this.config.disable || !this.player.duration) {
+        return;
+      }
       this.isDrag = false;
-      this.videoPreview && Util.removeClass(this.videoPreview, 'show');
+      this.videoPreview && util.removeClass(this.videoPreview, "show");
+    }
+  }, {
+    key: "onProgressClick",
+    value: function onProgressClick(data, e) {
+      if (this.config.disable) {
+        return;
+      }
+      if (util.hasClass(e.target, "xgplayer-spot")) {
+        e.stopPropagation();
+        e.preventDefault();
+        var _data = {};
+        ["time", "id", "text"].map(function(key) {
+          _data[key] = e.target.getAttribute("data-".concat(key));
+        });
+        _data.time && (_data.time = Number(_data.time));
+        this.handlerSpotClick(e, _data);
+      }
     }
   }, {
     key: "updateLinePos",
     value: function updateLinePos(offset, cwidth) {
-      var root = this.root,
-          previewLine = this.previewLine,
-          timePoint = this.timePoint,
-          player = this.player;
+      var root = this.root, previewLine = this.previewLine, timePoint = this.timePoint, player = this.player;
       var mode = player.controls.mode;
-      var isflex = mode === 'flex';
+      var isflex = mode === "flex";
       var lwidth = root.getBoundingClientRect().width;
       var tWidth = timePoint.getBoundingClientRect().width;
       var x = offset - lwidth / 2;
-
       var _t, _tt;
-
       if (x < 0 && !isflex) {
         x = 0;
         _t = offset - lwidth / 2;
@@ -179,101 +232,112 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
         !this.thumbnail && (_tt = x - (cwidth - lwidth) - tWidth / 2);
         x = cwidth - lwidth;
       } else {
-        _t = 0;
         !this.thumbnail && (_tt = -tWidth / 2);
       }
-
-      _t !== undefined && (previewLine.style.transform = "translateX(".concat(_t, "px)"));
-      _tt !== undefined && (timePoint.style.transform = "translateX(".concat(_tt, "px)"));
+      _t !== void 0 ? previewLine.style.transform = "translateX(".concat(_t, "px)") : previewLine.style.transform = "";
+      _tt !== void 0 ? timePoint.style.transform = "translateX(".concat(_tt, "px)") : timePoint.style.transform = "";
       root.style.transform = "translateX(".concat(x, "px)");
     }
   }, {
     key: "updateTimeText",
     value: function updateTimeText(timeStr) {
-      var timeText = this.timeText,
-          timePoint = this.timePoint;
+      var timeText = this.timeText, timePoint = this.timePoint;
       timeText.textContent = timeStr;
       !this.thumbnail && (timePoint.textContent = timeStr);
     }
   }, {
     key: "updatePosition",
     value: function updatePosition(offset, cwidth, time, e) {
-      var root = this.root,
-          config = this.config,
-          _state = this._state;
-
+      var root = this.root, config = this.config, _state = this._state;
       if (!root) {
         return;
       }
-
-      this.updateLinePos(offset, cwidth); // let now = offset / cwidth * player.duration
-      // now = now < 0 ? 0 : (now > player.duration ? player.duration : now)
-
+      this.updateLinePos(offset, cwidth);
       _state.now = time;
-      var timeStr = Util.format(time);
-
-      if (e && e.target && Util.hasClass(e.target, 'xgplayer-spot')) {
-        this.showTips(e.target.getAttribute('data-text'), false, timeStr);
+      var timeStr = util.format(time);
+      if (e && e.target && util.hasClass(e.target, "xgplayer-spot")) {
+        this.showTips(e.target.getAttribute("data-text"), false, timeStr);
+        this.focusDot(e.target);
         _state.f = true;
-        config.isFocusDots && _state.f && (_state.now = parseInt(e.target.getAttribute('data-time'), 10));
+        config.isFocusDots && _state.f && (_state.now = parseInt(e.target.getAttribute("data-time"), 10));
       } else if (config.defaultText) {
         _state.f = false;
         this.showTips(config.defaultText, true, timeStr);
       } else {
         _state.f = false;
-        this.hideTips('');
+        this.hideTips("");
       }
-
       this.updateTimeText(timeStr);
       this.updateThumbnails(_state.now);
     }
   }, {
     key: "updateThumbnails",
     value: function updateThumbnails(time) {
-      var player = this.player,
-          videoPreview = this.videoPreview;
+      var player = this.player, videoPreview = this.videoPreview;
       var thumbnail = player.plugins.thumbnail;
-
       if (thumbnail && thumbnail.usable) {
         this.thumbnail && thumbnail.update(this.thumbnail, time, 160, 90);
         var rect = videoPreview && videoPreview.getBoundingClientRect();
         this.videothumbnail && thumbnail.update(this.videothumbnail, time, rect.width, rect.height);
       }
     }
+  }, {
+    key: "changeThumbnail",
+    value: function changeThumbnail() {
+      var thumbnailConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      if (sniffer.device === "mobile") {
+        return;
+      }
+      var player = this.player, config = this.config;
+      var thumbnail = player.getPlugin("thumbnail");
+      thumbnail.changeConfig(thumbnailConfig);
+      if (!thumbnail || !thumbnail.usable || !config.isShowThumbnail) {
+        util.addClass(this.root, "short-line no-thumbnail");
+        var tRoot = this.find(".xg-spot-thumbnail");
+        this.videoPreview && this.player.root.removeChild(this.videoPreview);
+        this.thumbnail && tRoot.removeChild(this.thumbnail);
+        this.videothumbnail = null;
+        this.thumbnail = null;
+        this._hasThumnail = false;
+      } else {
+        util.removeClass(this.root, "short-line no-thumbnail");
+        this._hasThumnail = true;
+        var _tRoot = this.find(".xg-spot-thumbnail");
+        this.videoPreview && this.player.root.removeChild(this.videoPreview);
+        this.thumbnail && _tRoot.removeChild(this.thumbnail);
+        this.thumbnail = thumbnail.createThumbnail(_tRoot, "progress-thumbnail");
+        if (config.isShowCoverPreview) {
+          this.videoPreview = util.createDom("xg-video-preview", "", {}, "xgvideo-preview");
+          player.root.appendChild(this.videoPreview);
+          this.videothumbnail = thumbnail.createThumbnail(this.videoPreview, "xgvideo-thumbnail");
+        }
+      }
+    }
   }, {
     key: "registerThumbnail",
     value: function registerThumbnail() {
-      var thumbnailConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-      if (Sniffer.device === 'mobile') {
+      var thumbnailConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      if (sniffer.device === "mobile") {
         return;
       }
-
-      var player = this.player,
-          config = this.config;
-      var thumbnail = player.getPlugin('thumbnail');
-
+      var player = this.player, config = this.config;
+      var thumbnail = player.getPlugin("thumbnail");
       if (thumbnail) {
-        Object.keys(thumbnailConfig).map(function (key) {
-          thumbnail.config[key] = thumbnailConfig[key];
-        });
+        thumbnail.setConfig(thumbnailConfig);
       }
-
       if (!thumbnail || !thumbnail.usable || !config.isShowThumbnail) {
-        Util.addClass(this.root, 'short-line no-thumbnail');
+        util.addClass(this.root, "short-line no-thumbnail");
         return;
       } else {
-        Util.removeClass(this.root, 'short-line no-thumbnail');
+        util.removeClass(this.root, "short-line no-thumbnail");
       }
-
       this._hasThumnail = true;
-      var tRoot = this.find('.xg-spot-thumbnail');
-      this.thumbnail = thumbnail.createThumbnail(tRoot, 'progress-thumbnail');
-
+      var tRoot = this.find(".xg-spot-thumbnail");
+      this.thumbnail = thumbnail.createThumbnail(tRoot, "progress-thumbnail");
       if (config.isShowCoverPreview) {
-        this.videoPreview = Util.createDom('xg-video-preview', '', {}, 'xgvideo-preview');
+        this.videoPreview = util.createDom("xg-video-preview", "", {}, "xgvideo-preview");
         player.root.appendChild(this.videoPreview);
-        this.videothumbnail = thumbnail.createThumbnail(this.videoPreview, 'xgvideo-thumbnail');
+        this.videothumbnail = thumbnail.createThumbnail(this.videoPreview, "xgvideo-thumbnail");
       }
     }
   }, {
@@ -283,11 +347,9 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
       var player = this.player;
       var totalWidth = progress.root.getBoundingClientRect().width;
       var widthPerSeconds = player.duration / totalWidth * 6;
-
       if (time + duration > player.duration) {
         duration = player.duration - time;
       }
-
       time / player.duration * 100;
       duration / player.duration;
       return {
@@ -300,7 +362,6 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
     key: "showDot",
     value: function showDot(id) {
       var dot = this.findDot(id);
-
       if (dot) {
         var rect = this.root.getBoundingClientRect();
         var width = rect.width;
@@ -308,92 +369,127 @@ var ProgressPreview = /*#__PURE__*/function (_Plugin) {
         this.updatePosition(offset, width, dot.time);
       }
     }
+  }, {
+    key: "focusDot",
+    value: function focusDot(target, id) {
+      if (!target) {
+        return;
+      }
+      if (!id) {
+        id = target.getAttribute("data-id");
+      }
+      util.addClass(target, "active");
+      this._activeDotId = id;
+    }
+  }, {
+    key: "blurDot",
+    value: function blurDot(target) {
+      if (!target) {
+        var id = this._activeDotId;
+        target = this.getDotDom(id);
+      }
+      if (!target) {
+        return;
+      }
+      util.removeClass(target, "active");
+      this._activeDotId = null;
+    }
   }, {
     key: "showTips",
     value: function showTips(text, isDefault) {
-      var timeStr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
+      var timeStr = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "";
+      util.addClass(this.root, "no-timepoint");
       if (!text) {
         return;
       }
-
-      Util.addClass(this.root, 'no-timepoint');
-      Util.addClass(this.find('.xg-spot-content'), 'show-text');
-
-      if (isDefault && this.config.mode === 'production') {
-        Util.addClass(this.root, 'product');
+      util.addClass(this.find(".xg-spot-content"), "show-text");
+      if (isDefault && this.config.mode === "production") {
+        util.addClass(this.root, "product");
         this.tipText.textContent = text;
       } else {
-        Util.removeClass(this.root, 'product');
+        util.removeClass(this.root, "product");
         this.tipText.textContent = this._hasThumnail ? text : "".concat(timeStr, " ").concat(text);
       }
     }
   }, {
     key: "hideTips",
     value: function hideTips() {
-      Util.removeClass(this.root, 'no-timepoint');
-      this.tipText.textContent = '';
-      Util.removeClass(this.find('.xg-spot-content'), 'show-text');
-      Util.removeClass(this.root, 'product');
+      util.removeClass(this.root, "no-timepoint");
+      this.tipText.textContent = "";
+      util.removeClass(this.find(".xg-spot-content"), "show-text");
+      util.removeClass(this.root, "product");
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      util.addClass(this.root, "hide");
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      util.removeClass(this.root, "hide");
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      var config = this.config, playerConfig = this.playerConfig;
+      this.config.disable = false;
+      this.show();
+      if (!this.thumbnail && config.isShowThumbnail) {
+        this.registerThumbnail(playerConfig.thumbnail || {});
+      }
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.config.disable = true;
+      this.hide();
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this3 = this;
-
+      var _this5 = this;
       var progress = this.player.plugins.progress;
-      progress && Object.keys(CALLBACK_MAP).map(function (key) {
-        progress.removeCallBack(key, _this3[CALLBACK_MAP[key]]);
+      progress && Object.keys(CALLBACK_MAP).map(function(key) {
+        progress.removeCallBack(key, _this5[CALLBACK_MAP[key]]);
       });
       this.videothumbnail = null;
       this.thumbnail = null;
       this.videoPreview && this.player.root.removeChild(this.videoPreview);
-      this.unbind('.xg-spot-info', 'mousemove', this.onMousemove);
-      this.unbind('.xg-spot-info', 'mousedown', this.onMousedown);
-      this.unbind('.xg-spot-content', 'mouseup', this.handlerPreviewClick);
+      this.unbind(".xg-spot-info", "mousemove", this.onMousemove);
+      this.unbind(".xg-spot-info", "mousedown", this.onMousedown);
+      this.unbind(".xg-spot-info", "mouseup", this.onMouseup);
+      this.unbind(".xg-spot-content", "mouseup", this.handlerPreviewClick);
     }
   }, {
     key: "render",
     value: function render() {
-      if (Sniffer.device === 'mobile' || this.playerConfig.isMobileSimulateMode) {
-        return '';
+      if (sniffer.device === "mobile" || this.playerConfig.isMobileSimulateMode === "mobile") {
+        return "";
       }
-
-      return "<div class=\"xg-spot-info ".concat(this.config.mode === 'short' ? 'short-line' : '', "\">\n      <div class=\"xg-spot-content\">\n        <div class=\"xg-spot-thumbnail\">\n          <span class=\"xg-spot-time\"></span>\n        </div>\n        <div class=\"xg-spot-text\"><span class=\"spot-inner-text\"></span></div>\n      </div>\n      <div class=\"xgplayer-progress-point\">00:00</div>\n      <div class=\"xg-spot-line\"></div>\n    </div>");
+      return '<div class="xg-spot-info '.concat(this.config.mode === "short" ? "short-line" : "", '">\n      <div class="xg-spot-content">\n        <div class="xg-spot-thumbnail">\n          <span class="xg-spot-time"></span>\n        </div>\n        <div class="xg-spot-text"><span class="spot-inner-text"></span></div>\n      </div>\n      <div class="xgplayer-progress-point">00:00</div>\n      <div class="xg-spot-line"></div>\n    </div>');
     }
   }], [{
     key: "pluginName",
     get: function get() {
-      return 'progresspreview';
+      return "progresspreview";
     }
-    /**
-     * @type IProgressPreviewConfig
-     */
-
   }, {
     key: "defaultConfig",
     get: function get() {
       return {
         index: 1,
         miniWidth: 6,
-        // 故事点显示最小宽度
         ispots: [],
-        // 故事点列表
-        defaultText: '',
-        // 故事点hover默认文案
+        defaultText: "",
         isFocusDots: true,
-        //
         isShowThumbnail: true,
-        // 是否显示预览图
         isShowCoverPreview: false,
-        // 进度条拖动时是否显示播放区域预览图
-        mode: '' // short // production
-
+        mode: "",
+        disable: false
       };
     }
   }]);
-
-  return ProgressPreview;
+  return ProgressPreview2;
 }(Plugin);
-
 export { ProgressPreview as default };