xgplayer 2.32.5 → 2.32.6

package/es/plugins/time/index.js

@@ -0,0 +1,225 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { DURATION_CHANGE, SEEKED, TIME_UPDATE, ENDED, EMPTIED } from "../../events.js";
+import "../../utils/debug.js";
+import Plugin, { POSITIONS } from "../../plugin/plugin.js";
+var Time = /* @__PURE__ */ function(_Plugin) {
+  _inherits(Time2, _Plugin);
+  var _super = _createSuper(Time2);
+  function Time2(args) {
+    var _this;
+    _classCallCheck(this, Time2);
+    _this = _super.call(this, args);
+    _this.isActiving = false;
+    return _this;
+  }
+  _createClass(Time2, [{
+    key: "duration",
+    get: function get() {
+      var _this$player = this.player, offsetDuration = _this$player.offsetDuration, duration = _this$player.duration;
+      return this.playerConfig.customDuration || offsetDuration || duration;
+    }
+  }, {
+    key: "currentTime",
+    get: function get() {
+      var _this$player2 = this.player, offsetCurrentTime = _this$player2.offsetCurrentTime, currentTime = _this$player2.currentTime;
+      return offsetCurrentTime >= 0 ? offsetCurrentTime : currentTime;
+    }
+  }, {
+    key: "timeOffset",
+    get: function get() {
+      return this.playerConfig.timeOffset || 0;
+    }
+  }, {
+    key: "afterCreate",
+    value: function afterCreate() {
+      var _this2 = this;
+      var constrolsMode = this.player.controls.config.mode;
+      this.mode = constrolsMode === "flex" ? "flex" : "normal";
+      if (this.config.disable) {
+        return;
+      }
+      if (this.mode === "flex") {
+        this.createCenterTime();
+        this.root.style.display = "none";
+      }
+      this.durationDom = this.find(".time-duration");
+      this.timeDom = this.find(".time-current");
+      this.on([DURATION_CHANGE, SEEKED, TIME_UPDATE], function() {
+        _this2.onTimeUpdate();
+      });
+      this.on(ENDED, function() {
+        _this2.onTimeUpdate(true);
+      });
+      this.on(EMPTIED, function() {
+        _this2.onReset();
+      });
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.mode === "flex") {
+        this.centerCurDom && (this.centerCurDom.style.display = "block");
+        this.centerDurDom && (this.centerDurDom.style.display = "block");
+        return;
+      }
+      this.root.style.display = "block";
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.mode === "flex") {
+        this.centerCurDom && (this.centerCurDom.style.display = "none");
+        this.centerDurDom && (this.centerDurDom.style.display = "none");
+        return;
+      }
+      this.root.style.display = "none";
+    }
+  }, {
+    key: "onTimeUpdate",
+    value: function onTimeUpdate(isEnded) {
+      var player = this.player, config = this.config, duration = this.duration;
+      if (config.disable || this.isActiving || !player.hasStart) {
+        return;
+      }
+      var current = this.currentTime + this.timeOffset;
+      current = util.adjustTimeByDuration(current, duration, isEnded);
+      if (this.mode === "flex") {
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(current));
+        if (duration !== Infinity && duration > 0) {
+          this.centerDurDom.innerHTML = util.format(duration);
+        }
+      } else {
+        this.timeDom.innerHTML = this.minWidthTime(util.format(current));
+        if (duration !== Infinity && duration > 0) {
+          this.durationDom.innerHTML = util.format(duration);
+        }
+      }
+    }
+  }, {
+    key: "onReset",
+    value: function onReset() {
+      if (this.mode === "flex") {
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(0));
+        this.centerDurDom.innerHTML = util.format(0);
+      } else {
+        this.timeDom.innerHTML = this.minWidthTime(util.format(0));
+        this.durationDom.innerHTML = util.format(0);
+      }
+    }
+  }, {
+    key: "createCenterTime",
+    value: function createCenterTime() {
+      var player = this.player;
+      if (!player.controls || !player.controls.center) {
+        return;
+      }
+      var center = player.controls.center;
+      this.centerCurDom = util.createDom("xg-icon", "00:00", {}, "xgplayer-time xg-time-left");
+      this.centerDurDom = util.createDom("xg-icon", "00:00", {}, "xgplayer-time xg-time-right");
+      center.children.length > 0 ? center.insertBefore(this.centerCurDom, center.children[0]) : center.appendChild(this.centerCurDom);
+      center.appendChild(this.centerDurDom);
+    }
+  }, {
+    key: "afterPlayerInit",
+    value: function afterPlayerInit() {
+      var config = this.config;
+      if (this.duration === Infinity || this.playerConfig.isLive) {
+        util.hide(this.durationDom);
+        util.hide(this.timeDom);
+        util.hide(this.find(".time-separator"));
+        util.show(this.find(".time-live-tag"));
+      } else {
+        util.hide(this.find(".time-live-tag"));
+      }
+      if (config.hide) {
+        this.hide();
+        return;
+      }
+      this.show();
+    }
+  }, {
+    key: "changeLiveState",
+    value: function changeLiveState(isLive) {
+      if (isLive) {
+        util.hide(this.durationDom);
+        util.hide(this.timeDom);
+        util.hide(this.find(".time-separator"));
+        util.show(this.find(".time-live-tag"));
+      } else {
+        util.hide(this.find(".time-live-tag"));
+        util.show(this.find(".time-separator"));
+        util.show(this.durationDom);
+        util.show(this.timeDom);
+      }
+    }
+  }, {
+    key: "updateTime",
+    value: function updateTime(time) {
+      this.isActiving = true;
+      if (!time && time !== 0 || time > this.duration) {
+        return;
+      }
+      if (this.mode === "flex") {
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(time));
+        return;
+      }
+      this.timeDom.innerHTML = this.minWidthTime(util.format(time));
+    }
+  }, {
+    key: "minWidthTime",
+    value: function minWidthTime(timeStr) {
+      return timeStr.split(":").map(function(value) {
+        return '<span class="time-min-width">'.concat(value, "</span>");
+      }).join(":");
+    }
+  }, {
+    key: "resetActive",
+    value: function resetActive() {
+      var _this3 = this;
+      var player = this.player;
+      var updateState = function updateState2() {
+        _this3.isActiving = false;
+      };
+      this.off(SEEKED, updateState);
+      if (player.isSeeking) {
+        this.once(SEEKED, updateState);
+      } else {
+        this.isActiving = false;
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var center = this.player.controls.center;
+      this.centerCurDom && center.removeChild(this.centerCurDom);
+      this.centerCurDom = null;
+      this.centerDurDom && center.removeChild(this.centerDurDom);
+      this.centerDurDom = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.config.disable) {
+        return;
+      }
+      return '<xg-icon class="xgplayer-time">\n    <span class="time-current">00:00</span>\n    <span class="time-separator">/</span>\n    <span class="time-duration">00:00</span>\n    <span class="time-live-tag">'.concat(this.i18n.LIVE_TIP, "</span>\n    </xg-icon>");
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "time";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        position: POSITIONS.CONTROLS_LEFT,
+        index: 2,
+        disable: false
+      };
+    }
+  }]);
+  return Time2;
+}(Plugin);
+export { Time as default };

package/es/plugins/time/index.scss

@@ -0,0 +1,57 @@
+$timeColor: #fff;
+$timeDurationColor: rgba(255, 255, 255, 0.50);
+
+.xgplayer {
+  .xgplayer-time {
+    min-width: 40px;
+    font-size: 14px;
+    font-family: PingFangSC-Semibold;
+    color: $timeColor;
+    text-align: center;
+    display: inline-block;
+    line-height: 40px;
+    span {
+      display: inline-block;
+      line-height: 40px;
+      height: 40px;
+      // text-align: center;
+      // vertical-align: middle;
+      .time-min-width {
+        text-align: center;
+        min-width: 2ch;
+        &:first-child {
+          text-align: right;
+        }
+        &:last-child {
+          text-align: left;
+        }
+      }
+    }
+    .time-duration {
+      color: $timeDurationColor;
+    }
+
+    .time-live-tag {
+      display: none;
+    }
+
+    &.xg-time-left {
+      margin-left: 0;
+    }
+    &.xg-time-right {
+      margin-right: 0;
+    }
+  }
+  &.xgplayer-mobile {
+    .xgplayer-time {
+      min-width: 30px;
+      font-size: 12px;
+      &.xg-time-left {
+        margin-right: 8px;
+      }
+      &.xg-time-right {
+        margin-left: 8px;
+      }
+    }
+  }
+}

package/es/plugins/time/timesegments.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 进行事件分段控制
+ */
+export default class TimeSegmentsControls extends BasePlugin {
+    static get defaultConfig(): {
+        disable: boolean;
+        segments: any[];
+    };
+    curIndex: any;
+    curPos: any;
+    lastCurrentTime: any;
+    setConfig(newConfig: any): void;
+    updateSegments(): void;
+    formatTimeSegments(timeSegments: any, duration: any): any[];
+    _onDurationChange: () => void;
+    _onLoadedData: () => void;
+    _onTimeupdate: () => void;
+    _onSeeking: () => void;
+    _onPlay: () => void;
+    getSeekTime(currentTime: any, lastCurrentTime: any, index: any, timeSegments: any): number;
+    _checkIfEnabled(segments: any): boolean;
+    changeIndex(index: any, timeSegments: any): void;
+}
+import { BasePlugin } from "../../plugin";

package/es/plugins/time/timesegments.js

@@ -0,0 +1,216 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import { DURATION_CHANGE, LOADED_DATA, TIME_UPDATE, SEEKING, PLAY } from "../../events.js";
+import BasePlugin from "../../plugin/basePlugin.js";
+import "delegate";
+var TimeSegmentsControls = /* @__PURE__ */ function(_BasePlugin) {
+  _inherits(TimeSegmentsControls2, _BasePlugin);
+  var _super = _createSuper(TimeSegmentsControls2);
+  function TimeSegmentsControls2() {
+    var _this;
+    _classCallCheck(this, TimeSegmentsControls2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key = 0; _key < _len2; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_onDurationChange", function() {
+      _this.updateSegments();
+      var _this$player = _this.player, currentTime = _this$player.currentTime, timeSegments = _this$player.timeSegments;
+      if (!_this._checkIfEnabled(timeSegments)) {
+        return;
+      }
+      var index = util.getIndexByTime(currentTime, timeSegments);
+      var time = util.getOffsetCurrentTime(currentTime, timeSegments, index);
+      _this.player.offsetCurrentTime = time;
+      _this.changeIndex(index, timeSegments);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onLoadedData", function() {
+      var timeSegments = _this.player.timeSegments;
+      if (!_this._checkIfEnabled(timeSegments)) {
+        return;
+      }
+      var time = util.getOffsetCurrentTime(0, timeSegments);
+      _this.player.offsetCurrentTime = time;
+      _this.changeIndex(0, timeSegments);
+      if (_this.curPos.start > 0) {
+        _this.player.currentTime = _this.curPos.start;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onTimeupdate", function() {
+      var _this$player2 = _this.player, currentTime = _this$player2.currentTime, timeSegments = _this$player2.timeSegments;
+      if (!_this._checkIfEnabled(timeSegments)) {
+        return;
+      }
+      var _len = timeSegments.length;
+      _this.lastCurrentTime = currentTime;
+      var index = util.getIndexByTime(currentTime, timeSegments);
+      if (index !== _this.curIndex) {
+        _this.changeIndex(index, timeSegments);
+      }
+      var curTime = util.getOffsetCurrentTime(currentTime, timeSegments, index);
+      _this.player.offsetCurrentTime = curTime;
+      if (!_this.curPos) {
+        return;
+      }
+      var _this$curPos = _this.curPos, start = _this$curPos.start, end = _this$curPos.end;
+      if (currentTime < start) {
+        _this.player.currentTime = start;
+      } else if (currentTime > end && index >= _len - 1) {
+        _this.player.pause();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onSeeking", function() {
+      var _this$player3 = _this.player, currentTime = _this$player3.currentTime, timeSegments = _this$player3.timeSegments;
+      if (!_this._checkIfEnabled(timeSegments)) {
+        return;
+      }
+      if (currentTime < timeSegments[0].start) {
+        _this.player.currentTime = timeSegments[0].start;
+      } else if (currentTime > timeSegments[timeSegments.length - 1].end) {
+        _this.player.currentTime = timeSegments[timeSegments.length - 1].end;
+      } else {
+        var _index = util.getIndexByTime(currentTime, timeSegments);
+        if (_index >= 0) {
+          var _seekTime = _this.getSeekTime(currentTime, _this.lastCurrentTime, _index, timeSegments);
+          if (_seekTime >= 0) {
+            _this.player.currentTime = _seekTime;
+          }
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onPlay", function() {
+      var _this$player4 = _this.player, currentTime = _this$player4.currentTime, timeSegments = _this$player4.timeSegments;
+      if (_this._checkIfEnabled(timeSegments) && currentTime >= timeSegments[timeSegments.length - 1].end) {
+        _this.player.currentTime = timeSegments[0].start;
+      }
+    });
+    return _this;
+  }
+  _createClass(TimeSegmentsControls2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+      this.curIndex = -1;
+      this.curPos = null;
+      this.lastCurrentTime = 0;
+      this.updateSegments();
+      this.on(DURATION_CHANGE, this._onDurationChange);
+      this.on(LOADED_DATA, this._onLoadedData);
+      this.on(TIME_UPDATE, this._onTimeupdate);
+      this.on(SEEKING, this._onSeeking);
+      this.on(PLAY, this._onPlay);
+    }
+  }, {
+    key: "setConfig",
+    value: function setConfig(newConfig) {
+      var _this2 = this;
+      if (!newConfig) {
+        return;
+      }
+      var keys = Object.keys(newConfig);
+      if (keys.length < 1) {
+        return;
+      }
+      keys.forEach(function(key) {
+        _this2.config[key] = newConfig[key];
+      });
+      this.updateSegments();
+    }
+  }, {
+    key: "updateSegments",
+    value: function updateSegments() {
+      var _this$config = this.config, disable = _this$config.disable, segments = _this$config.segments;
+      var player = this.player;
+      if (disable || !segments || segments.length === 0) {
+        player.timeSegments = [];
+        player.offsetDuration = 0;
+        player.offsetCurrentTime = -1;
+      } else {
+        var _segs = this.formatTimeSegments(segments, player.duration);
+        player.timeSegments = _segs;
+        player.offsetDuration = _segs.length > 0 ? _segs[_segs.length - 1].duration : 0;
+      }
+    }
+  }, {
+    key: "formatTimeSegments",
+    value: function formatTimeSegments(timeSegments, duration) {
+      var ret = [];
+      if (!timeSegments) {
+        return [];
+      }
+      timeSegments.sort(function(a, b) {
+        return a.start - b.start;
+      });
+      timeSegments.forEach(function(item, index) {
+        var _item = {};
+        _item.start = item.start < 0 ? 0 : item.start;
+        _item.end = duration > 0 && item.end > duration ? duration : item.end;
+        if (duration > 0 && _item.start > duration) {
+          return;
+        }
+        ret.push(_item);
+        var _segDuration = _item.end - _item.start;
+        if (index === 0) {
+          _item.offset = item.start;
+          _item.cTime = 0;
+          _item.segDuration = _segDuration;
+          _item.duration = _segDuration;
+        } else {
+          var last = ret[index - 1];
+          _item.offset = last.offset + (_item.start - last.end);
+          _item.cTime = last.duration + last.cTime;
+          _item.segDuration = _segDuration;
+          _item.duration = last.duration + _segDuration;
+        }
+      });
+      return ret;
+    }
+  }, {
+    key: "getSeekTime",
+    value: function getSeekTime(currentTime, lastCurrentTime, index, timeSegments) {
+      var _time = -1;
+      var _timeSegments$index = timeSegments[index], start = _timeSegments$index.start, end = _timeSegments$index.end;
+      if (currentTime >= start && currentTime <= end) {
+        return _time;
+      }
+      var diff = currentTime - lastCurrentTime;
+      if (diff < 0) {
+        if (currentTime < start) {
+          var diff2 = lastCurrentTime > start ? lastCurrentTime - start : 0;
+          _time = index - 1 >= 0 ? timeSegments[index - 1].end + diff + diff2 : 0;
+          return _time;
+        }
+      }
+      return -1;
+    }
+  }, {
+    key: "_checkIfEnabled",
+    value: function _checkIfEnabled(segments) {
+      return !(!segments || segments.length < 1);
+    }
+  }, {
+    key: "changeIndex",
+    value: function changeIndex(index, timeSegments) {
+      this.curIndex = index;
+      if (index >= 0 && timeSegments.length > 0) {
+        this.curPos = timeSegments[index];
+      } else {
+        this.curPos = null;
+      }
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "TimeSegmentsControls";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {
+        disable: true,
+        segments: []
+      };
+    }
+  }]);
+  return TimeSegmentsControls2;
+}(BasePlugin);
+export { TimeSegmentsControls as default };

package/es/plugins/track/index.css

@@ -0,0 +1,91 @@
+.xgplayer-texttrack[data-state=open] .xg-texttrak-open {
+  display: block;
+}
+.xgplayer-texttrack[data-state=open] .xg-texttrak-close {
+  display: none;
+}
+
+.xgplayer-texttrack[data-state=close] .xg-texttrak-open {
+  display: none;
+}
+.xgplayer-texttrack[data-state=close] .xg-texttrak-close {
+  display: block;
+}
+
+.xgplayer-texttrack-active .xgplayer-texttrack ul {
+  display: block;
+}
+
+.xgplayer xg-text-track.follow-control {
+  transition: transform 0.2s ease;
+}
+
+.xgplayer-is-texttrack .xgplayer-texttrack {
+  display: block;
+}
+
+xg-text-track.xg-text-track {
+  font-family: "PingFang SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  position: absolute;
+  bottom: 0;
+  color: #fff;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+}
+xg-text-track.xg-text-track.text-track-no-fitvideo {
+  margin-bottom: 2%;
+}
+xg-text-track.xg-text-track.text-track-hide {
+  opacity: 0;
+  visibility: hidden;
+}
+xg-text-track.xg-text-track.text-track-show {
+  opacity: 1;
+  visibility: visible;
+}
+xg-text-track.xg-text-track xg-text-track-inner {
+  display: block;
+  max-width: 92%;
+  text-align: center;
+}
+xg-text-track.xg-text-track xg-text-track-span {
+  display: -webkit-box;
+  text-align: left;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  padding: 1px 4px;
+  -webkit-line-clamp: 1;
+  line-height: 120%;
+  word-break: break-word;
+}
+xg-text-track.xg-text-track xg-text-track-span.text-track-deputy {
+  font-size: 75%;
+}
+xg-text-track.xg-text-track xg-text-track-span.text-track-single {
+  -webkit-line-clamp: 1;
+}
+xg-text-track.xg-text-track xg-text-track-span.text-track-double {
+  -webkit-line-clamp: 2;
+}
+xg-text-track.xg-text-track xg-text-track-span.text-track-three {
+  -webkit-line-clamp: 3;
+}
+xg-text-track.xg-text-track xg-text-track-span.text-track-space {
+  opacity: 0;
+  height: 0;
+  line-height: 0;
+}
+xg-text-track.xg-text-track.text-track-bg xg-text-track-inner {
+  background-color: rgba(0, 0, 0, 0.54);
+  border-radius: 2px;
+}
+xg-text-track.xg-text-track.text-track-stroke xg-text-track-inner {
+  background-color: none;
+  border-radius: 0;
+  text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px -1px 0 rgba(0, 0, 0, 0.7);
+}