xgplayer 2.32.5 → 2.32.6

package/es/plugins/progressPreview/dotsApi.js

@@ -0,0 +1,269 @@
+import util from "../../utils/util.js";
+import { DURATION_CHANGE, VIDEO_RESIZE } from "../../events.js";
+import "../../utils/debug.js";
+import "delegate";
+var ISPOT = {
+  time: 0,
+  text: "",
+  id: 1,
+  duration: 1,
+  color: "#fff",
+  style: {},
+  width: 6,
+  height: 6
+};
+function mergeISPOT(iSpot) {
+  Object.keys(ISPOT).map(function(key) {
+    if (iSpot[key] === void 0) {
+      iSpot[key] = ISPOT[key];
+    }
+  });
+}
+var APIS = {
+  _updateDotDom: function _updateDotDom(iSpot, dotDom) {
+    if (!dotDom) {
+      return;
+    }
+    var ret = this.calcuPosition(iSpot.time, iSpot.duration);
+    var style = iSpot.style || {};
+    style.left = "".concat(ret.left, "%");
+    style.width = "".concat(ret.width, "%");
+    dotDom.setAttribute("data-text", iSpot.text);
+    dotDom.setAttribute("data-time", iSpot.time);
+    if (ret.isMini) {
+      util.addClass(dotDom, "mini");
+    } else {
+      util.removeClass(dotDom, "mini");
+    }
+    Object.keys(style).map(function(key) {
+      dotDom.style[key] = style[key];
+    });
+  },
+  initDots: function initDots() {
+    var _this = this;
+    this._ispots.map(function(item) {
+      _this.createDot(item, false);
+    });
+    this.ispotsInit = true;
+  },
+  createDot: function createDot(iSpot) {
+    var isNew = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    if (isNew) {
+      mergeISPOT(iSpot);
+      this._ispots.push(iSpot);
+    }
+    if (!this.ispotsInit && isNew) {
+      return;
+    }
+    var ret = this.calcuPosition(iSpot.time, iSpot.duration);
+    var style = iSpot.style || {};
+    style.left = "".concat(ret.left, "%");
+    style.width = "".concat(ret.width, "%");
+    var className = "xgspot_".concat(iSpot.id, " xgplayer-spot");
+    ret.isMini && (className += " mini");
+    var _t = iSpot.template ? '<div class="xgplayer-spot-pop">'.concat(iSpot.template, "</div>") : "";
+    var dotDom = util.createDom("xg-spot", _t, {
+      "data-text": iSpot.text,
+      "data-time": iSpot.time,
+      "data-id": iSpot.id
+    }, className);
+    Object.keys(style).map(function(key) {
+      dotDom.style[key] = style[key];
+    });
+    progress.outer && progress.outer.appendChild(dotDom);
+    this.positionDot(dotDom, iSpot.id);
+  },
+  findDot: function findDot(id) {
+    if (!this.player.plugins.progress) {
+      return;
+    }
+    var ret = this._ispots.filter(function(cur, index) {
+      return cur.id === id;
+    });
+    return ret.length > 0 ? ret[0] : null;
+  },
+  updateDot: function updateDot(iSpot) {
+    var needShow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    var dot = this.findDot(iSpot.id);
+    if (dot) {
+      Object.keys(iSpot).map(function(key) {
+        dot[key] = iSpot[key];
+      });
+    }
+    if (!this.ispotsInit) {
+      return;
+    }
+    var dotDom = progress.find('xg-spot[data-id="'.concat(iSpot.id, '"]'));
+    if (!dotDom) {
+      return;
+    }
+    this._updateDotDom(iSpot, dotDom);
+    if (needShow) {
+      this.showDot(iSpot.id);
+    }
+  },
+  deleteDot: function deleteDot(id) {
+    var _ispots = this._ispots;
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    var del = [];
+    for (var i = 0; i < _ispots.length; i++) {
+      if (_ispots[i].id === id) {
+        del.push(i);
+      }
+    }
+    var len = del.length;
+    for (var _i = len - 1; _i >= 0; _i--) {
+      _ispots.splice(del[_i], 1);
+      if (this.ispotsInit) {
+        var dotDom = progress.find('xg-spot[data-id="'.concat(id, '"]'));
+        if (dotDom) {
+          dotDom.parentElement.removeChild(dotDom);
+        }
+      }
+    }
+  },
+  deleteAllDots: function deleteAllDots() {
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    if (!this.ispotsInit) {
+      this._ispots = [];
+      return;
+    }
+    var dotDoms = progress.root.getElementsByTagName("xg-spot");
+    for (var i = dotDoms.length - 1; i >= 0; i--) {
+      progress.outer.removeChild(dotDoms[i]);
+    }
+    this._ispots = [];
+  },
+  updateAllDots: function updateAllDots() {
+    var _this2 = this;
+    var iSpots = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    if (!this.ispotsInit) {
+      this._ispots = iSpots;
+      return;
+    }
+    this._ispots = [];
+    var dotDoms = progress.root.getElementsByTagName("xg-spot");
+    var len = dotDoms.length;
+    if (len > iSpots.length) {
+      for (var i = len - 1; i > iSpots.length - 1; i--) {
+        progress.outer.removeChild(dotDoms[i]);
+      }
+    }
+    iSpots.forEach(function(ispot, index) {
+      if (index < len) {
+        dotDoms[index].setAttribute("data-id", "".concat(ispot.id));
+        _this2._ispots.push(ispot);
+        _this2.updateDot(ispot);
+      } else {
+        _this2.createDot(ispot);
+      }
+    });
+  },
+  positionDots: function positionDots() {
+    var _this3 = this;
+    var _ispots = this._ispots, playerSize = this.playerSize;
+    var sizeInfo = this.player.sizeInfo;
+    var progress = this.player.plugins.progress;
+    if (!progress || sizeInfo.width === playerSize.width) {
+      return;
+    }
+    playerSize.width = sizeInfo.width;
+    playerSize.left = sizeInfo.left;
+    _ispots.forEach(function(item) {
+      var dotDom = progress.find('xg-spot[data-id="'.concat(item.id, '"]'));
+      dotDom && _this3.positionDot(dotDom, item.id);
+    });
+  },
+  positionDot: function positionDot(dotDom, id) {
+    var _pop = util.findDom(dotDom, ".xgplayer-spot-pop");
+    if (!_pop) {
+      return;
+    }
+    var pRect = this.playerSize;
+    var rect1 = dotDom.getBoundingClientRect();
+    var rect = _pop.getBoundingClientRect();
+    var _left = rect1.left - pRect.left;
+    var _diff = pRect.width - _left - rect1.width / 2;
+    if (_left < rect.width / 2 || pRect.width < rect.width) {
+      var t = rect.width / 2 - _left;
+      _pop.style.left = "".concat(t, "px");
+    } else if (_diff < rect.width / 2) {
+      var _t2 = _diff - rect.width / 2 + rect1.width / 2;
+      _pop.style.left = "".concat(_t2, "px");
+    } else {
+      _pop.style.left = "50%";
+    }
+  },
+  updateDuration: function updateDuration() {
+    var _this4 = this;
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    var _ispots = this._ispots;
+    _ispots.forEach(function(item) {
+      var dotDom = progress.find('xg-spot[data-id="'.concat(item.id, '"]'));
+      _this4._updateDotDom(item, dotDom);
+    });
+  },
+  getAllDotsDom: function getAllDotsDom() {
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return [];
+    }
+    var dotDoms = progress.root.getElementsByTagName("xg-spot");
+    return dotDoms;
+  },
+  getDotDom: function getDotDom(id) {
+    var progress = this.player.plugins.progress;
+    if (!progress) {
+      return;
+    }
+    return progress.find('xg-spot[data-id="'.concat(id, '"]'));
+  }
+};
+function initDotsAPI(plugin) {
+  var config = plugin.config, player = plugin.player;
+  Object.keys(APIS).map(function(item) {
+    plugin[item] = APIS[item].bind(plugin);
+  });
+  var ispots = player.config.progressDot || config.ispots || [];
+  plugin._ispots = ispots.map(function(item) {
+    mergeISPOT(item);
+    return item;
+  });
+  plugin.ispotsInit = false;
+  plugin.playerSize = {
+    left: player.sizeInfo.left,
+    width: player.sizeInfo.width
+  };
+  plugin.on(DURATION_CHANGE, function() {
+    if (!plugin.ispotsInit) {
+      plugin.initDots();
+    } else {
+      plugin.updateDuration();
+    }
+  });
+  plugin.on(VIDEO_RESIZE, function() {
+    plugin.positionDots();
+  });
+}
+export { initDotsAPI as default };

package/es/plugins/progressPreview/index.css

@@ -0,0 +1,190 @@
+@charset "UTF-8";
+.xgplayer {
+  /**  xg-spot-info start**/
+  /* 时间预览样式 */
+  /**  xg-spot-info end**/
+}
+.xgplayer .xgplayer-spot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #fff;
+  border-radius: 12px;
+}
+.xgplayer .xgplayer-spot.mini {
+  min-width: 6px;
+  transform: translate(-50%, 0);
+}
+.xgplayer .xgplayer-spot.active .xgplayer-spot-pop {
+  display: block;
+  opacity: 1;
+  pointer-events: initial;
+}
+.xgplayer .xgplayer-spot-pop {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  bottom: 5px;
+  padding-bottom: 5px;
+  transform: translateX(-50%);
+}
+.xgplayer-mobile .xgplayer-spot {
+  height: 3px;
+  min-width: 3px;
+  top: 50%;
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.xgplayer-mobile .xgplayer-spot.mini {
+  min-width: 3px;
+  transform: translate(-50%, -50%);
+}
+
+.xgplayer .xgplayer-progress.active .xgplayer-spot {
+  opacity: 1;
+  transition: opacity 0.3s;
+  visibility: visible;
+}
+.xgplayer .xg-spot-info {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  display: none;
+}
+.xgplayer .xg-spot-info.short-line .xg-spot-line {
+  height: 6px;
+}
+.xgplayer .xg-spot-info.short-line .xg-spot-content {
+  bottom: -4px;
+}
+.xgplayer .xg-spot-info.no-thumbnail .xg-spot-thumbnail {
+  display: none;
+}
+.xgplayer .xg-spot-info.no-thumbnail .xgplayer-progress-point {
+  display: block;
+}
+.xgplayer .xg-spot-info.no-timepoint .xgplayer-progress-point {
+  display: none;
+}
+.xgplayer .xg-spot-info.hide {
+  display: none;
+}
+.xgplayer .xgplayer-progress.active .xg-spot-info {
+  display: block;
+}
+.xgplayer .xgplayer-progress.active .xg-spot-info.hide {
+  display: none;
+}
+.xgplayer .xg-spot-line {
+  position: relative;
+  bottom: -7px;
+  margin-left: 50%;
+  display: block;
+  width: 1px;
+  height: 41px;
+  background-color: #FFF;
+  pointer-events: none;
+}
+.xgplayer .xgplayer-progress-point {
+  display: none;
+  position: relative;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.54);
+  font-size: 11px;
+  color: #fff;
+  padding: 4px 6px;
+  border-radius: 4px;
+  text-align: center;
+  opacity: 0.85;
+  white-space: nowrap;
+}
+.xgplayer .xg-spot-content {
+  position: relative;
+  bottom: -7px;
+  color: #fff;
+  border-radius: 2px 2px 0px 0px;
+}
+.xgplayer .xg-spot-ext-text {
+  position: relative;
+  bottom: -7px;
+}
+.xgplayer .xg-spot-thumbnail {
+  position: relative;
+  background-color: rgb(17, 16, 16);
+  pointer-events: none;
+  border-radius: 2px 2px 0 0;
+}
+.xgplayer .xg-spot-time {
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  font-size: 12px;
+  line-height: 16.8px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+.xgplayer .progress-thumbnail {
+  margin: 0 auto;
+  display: block;
+}
+.xgplayer .xg-spot-text {
+  display: none;
+  padding: 5px 8px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 0px 0px 2px 2px;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.xgplayer .spot-inner-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 20px;
+  font-size: 12px;
+  max-height: 40px;
+}
+.xgplayer .xg-spot-content.show-text .xg-spot-text {
+  display: block;
+}
+.xgplayer .product .xg-spot-text {
+  background: #3370FF;
+}
+.xgplayer .product .xg-spot-line {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 7px solid #3370FF;
+  width: 0;
+  height: 15px;
+  left: -10px;
+  background: none;
+}
+.xgplayer .xgvideo-preview {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0.3s, opacity 0.3s;
+  background-color: #000;
+}
+.xgplayer .xgvideo-preview .xgvideo-thumbnail {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 0;
+}
+.xgplayer .xgvideo-preview.show {
+  opacity: 1;
+  visibility: visible;
+}

package/es/plugins/progressPreview/index.d.ts

@@ -0,0 +1,87 @@
+/** */
+export default class ProgressPreview extends Plugin {
+    /**
+     * @type IProgressPreviewConfig
+     */
+    static get defaultConfig(): IProgressPreviewConfig;
+    constructor(args: any);
+    _ispots: any[];
+    videoPreview: HTMLElement;
+    videothumbnail: any;
+    thumbnail: any;
+    timeStr: string;
+    _state: {
+        now: number;
+        f: boolean;
+    };
+    beforeCreate(args: any): void;
+    _curDot: any;
+    handlerSpotClick: any;
+    transformTimeHook: any;
+    extTextRoot: HTMLElement;
+    setConfig(config: any): void;
+    previewLine: HTMLElement;
+    timePoint: HTMLElement;
+    timeText: HTMLElement;
+    tipText: HTMLElement;
+    _hasThumnail: boolean;
+    bindEvents(): void;
+    handlerPreviewClick: (e: any) => void;
+    onMousemove: (e: any) => void;
+    onMousedown: (e: any) => void;
+    onMouseup: (e: any) => void;
+    onDotMouseLeave: (e: any) => void;
+    onProgressMouseOver: (data: any, e: any) => void;
+    onProgressMove(data: any, e: any): void;
+    onProgressDragStart(data: any): void;
+    isDrag: boolean;
+    onProgressDragEnd(data: any): void;
+    onProgressClick(data: any, e: any): void;
+    updateLinePos(offset: any, cwidth: any): void;
+    updateTimeText(timeStr: any): void;
+    updatePosition(offset: any, cwidth: any, time: any, e: any): void;
+    /**
+     * @description 设置自定义时间显示字符串
+     * @param {number} time
+     */
+    setTimeContent(time: number): void;
+    updateThumbnails(time: any): void;
+    registerThumbnail(thumbnailConfig?: {}): void;
+    calcuPosition(time: any, duration: any): {
+        left: number;
+        width: number;
+        isMini: boolean;
+    };
+    showDot(id: any): void;
+    focusDot(target: any, id: any): void;
+    _activeDotId: any;
+    blurDot(target: any): void;
+    showTips(text: any, isDefault: any, timeStr?: string): void;
+    hideTips(): void;
+    show(): void;
+    enable(): void;
+    disable(): void;
+    render(): string;
+}
+export type IProgressPreviewConfig = {
+    [propName: string]: any;
+    miniWidth?: number;
+    ispots?: {
+        time?: number;
+        text?: string;
+        id?: number | string;
+        duration: number | null;
+        color?: string;
+        style?: {
+            [propName: string]: any;
+        };
+        width?: number;
+        height?: number;
+    }[];
+    defaultText?: '';
+    isFocusDots?: true;
+    isShowThumbnail?: true;
+    isShowCoverPreview?: false;
+    mode?: 'short' | 'production';
+};
+import Plugin from "../../plugin";