xgplayer 2.32.5 → 2.32.6

package/es/plugins/progress/index.scss

@@ -0,0 +1,288 @@
+@import "../../style/variable";
+
+.xgplayer {
+  .xgplayer-progress {
+    display: flex;
+    align-items: center;
+    position: relative;
+    min-width: 50px;
+    height: 12px;
+    left: 0;
+    right: 0;
+    top: 0;
+    outline: none;
+    flex: 1;
+    cursor: pointer;
+  }
+
+  .xgplayer-progress-outer {
+    position: relative;
+    width: 100%;
+    height: 2px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  .progress-list {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+  }
+
+  .xgplayer-progress-inner {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    background: $progressOuterBgColor;
+    transition: height 0.2s ease-in, opacity 0.2s ease-out;
+    border-radius: inherit;
+    margin-right: 2px;
+    pointer-events: none;
+    &:last-child, &:only-child{
+      margin-right: 0;
+    }
+  }
+
+  .inner-focus-point {
+    background: #fff;
+    position: relative;
+    &:before, &:after{
+      position: absolute;
+      top: 0;
+      content: ' ';
+      display: block;
+      width: 2px;
+      height: 300%;
+      top: 50%;
+      z-index: 1;
+      transform: translateY(-50%);
+      border-radius: 3px;
+      background: #fff;
+    }
+    &:before {
+      left: 0;
+    }
+    &:after {
+      right: 0;
+    }
+  }
+
+  .xgplayer-progress-cache,.xgplayer-progress-played {
+    display: block;
+    height: 100%;
+    width: 0;
+    position:absolute;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+  }
+  
+  .xgplayer-progress-played {
+    background: $progressPlayedBgImage
+  }
+
+  .xgplayer-progress-cache {
+    background: $progressCacheBgColor
+  }
+
+  /* 滑块样式 */
+  .xgplayer-progress-btn {
+    display: block;
+    background: rgba(255, 94, 94, 0.304093);
+    border: 0.5px solid rgba(255, 94, 94, 0.056545);
+    box-shadow: 0px 0px 1px rgba(255, 0, 0, 0.382897);
+    width: 20px;
+    height: 20px;
+    border-radius: 30px;
+    left: 0;
+    top: 50%;
+    position: absolute;
+    z-index: 1;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    pointer-events: none;
+    &:before {
+      content: ' ';
+      display: block;
+      position: relative;
+      width: 12px;
+      height: 12px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 30px;
+      background: #FFFFFF;
+    }
+    &.active {
+      border: 4px solid rgba(255, 94, 94, 0.064057);
+      &:before{
+        box-shadow: 0px 0px 3px rgba(248, 89, 89, 0.689);
+      }
+    }
+  }
+  
+  /* 进度条打点*/
+  .xgplayer-progress-dot {
+    display: inline-block;
+    position: absolute;
+    height: 100%;
+    width: 5px;
+    top: 0px;
+    background: white;
+    border-radius: 6px;
+    z-index: 16;
+    .xgplayer-progress-tip {
+      position: absolute;
+      left: 25%;
+      top: -40px;
+      height: auto;
+      line-height: 30px;
+      width: auto;
+      transform: scale(0.8) translateX(-50%);
+      background: rgba(0, 0, 0, .3);
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .8);
+      cursor: default;
+      white-space: nowrap;
+      display: none;
+    }
+    &:hover {
+      .xgplayer-progress-tip {
+        display: block;
+      }
+    }
+  }
+
+  .flex-controls {
+    .xgplayer-progress {
+      transform: translateY(0);
+    }
+  }
+
+  &.xgplayer-pc {
+    .xgplayer-progress-btn {
+      transform: translate(-50%, -50%) scale(0);
+    }
+    .xgplayer-progress-outer {
+      height: 3px;
+    }
+    .xgplayer-progress-inner {
+      margin-right: 4px;
+      &:last-child, &:only-child{
+        margin-right: 0;
+      }
+    }
+    .inner-focus-point {
+      &:before, &:after{
+        width: 3px;
+      }
+    }
+
+    .inner-focus-highlight {
+      background:rgba(255, 255, 255, 0.8);
+    }
+    
+    .xgplayer-progress {
+      &.active {
+        .xgplayer-progress-outer {
+          height: 6px;
+          margin-bottom: 3px;
+          transition: height .3s ease, margin-bottom .3s ease;
+          // .xgplayer-progress-point {
+          //   display: block;
+          // }
+        }
+        .xgplayer-progress-btn {
+          transform: translate(-50%, -50%) scale(1);
+        }
+        .inner-focus-point {
+          &:before, &:after{
+            width: 6px;
+          }
+        }
+      }
+    }
+  }
+  // 进度条位于底部的时候
+  .xgplayer-progress-bottom {
+    .xgplayer-progress-outer {
+      top: 9px;
+    }
+    .xgplayer-progress-btn {
+      &:before {
+        height: 6px;
+        width: 6px;
+      }
+    }
+  }
+
+  &.xgplayer-mobile  {
+    // 进度条位于底部的时候
+    .xgplayer-progress-bottom {
+      .xgplayer-progress-outer {
+        height: 4px;
+      }
+    }
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .xgplayer {
+    .xgplayer-progress {
+      .xgplayer-progress-inner {
+        background-color: $progressOuterBgColor;
+      }
+
+      .inner-focus-highlight {
+        background:rgba(255, 255, 255, 0.8);
+      }
+
+      .xgplayer-progress-btn {
+        background: rgba(255, 94, 94, 0.304093);
+        border: 0.5px solid rgba(255, 94, 94, 0.056545);
+        box-shadow: 0px 0px 1px rgba(255, 0, 0, 0.382897);
+        &:before {
+          background-color: #fff;
+        }
+      }
+      .xgplayer-progress-played {
+        background-color: $progressPlayedBgImage
+      }
+    
+      .xgplayer-progress-cache {
+        background-color: $progressCacheBgColor
+      }
+    }
+  }
+}
+
+.xg-mini-progress {
+  display: none;
+  position: absolute;
+  height: 2px;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  // background-color: red;
+  pointer-events: none;
+  xg-mini-progress-played,  xg-mini-progress-cache{
+    height: 100%;
+    width: 0;
+    position:absolute;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+  }
+  xg-mini-progress-played {
+    background: $progressPlayedBgImage
+  }
+  xg-mini-progress-cache {
+    background: $progressCacheBgColor
+  }
+}
+
+.xgplayer-inactive, .xgplayer-mini {
+  .xg-mini-progress {
+    display: block;
+  }
+}

package/es/plugins/progress/innerList.d.ts

@@ -0,0 +1,49 @@
+export default class InnerList {
+    constructor(args: any);
+    fragments: any;
+    _callBack: any;
+    fragConfig: {
+        fragFocusClass: any;
+        fragAutoFocus: boolean;
+        fragClass: any;
+    };
+    style: any;
+    duration: number;
+    cachedIndex: number;
+    playedIndex: number;
+    focusIndex: number;
+    updateDuration(duration: any): void;
+    updateProgress(type?: string, data?: {
+        newIndex: number;
+        curIndex: number;
+        millisecond: number;
+    }): void;
+    updateFocus(data: any): void;
+    update(data: {
+        cached: number;
+        played: number;
+    }, duration: any): void;
+    findIndex(time: any, curIndex: any): any;
+    findHightLight(): {
+        dom: Element;
+        pos: DOMRect;
+    };
+    findFragment(index: any): {
+        dom: Element;
+        pos: DOMRect;
+    };
+    unHightLight(): void;
+    setHightLight(index: any): {
+        dom: Element;
+        pos: DOMRect;
+    };
+    destroy(): void;
+    progressList: any;
+    /**
+     * 重置当前
+     * @param {*} newOptions
+     */
+    reset(newOptions: any): void;
+    render(): HTMLElement;
+    root: HTMLElement;
+}

package/es/plugins/progress/innerList.js

@@ -0,0 +1,285 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import util from "../../utils/util.js";
+import "../../utils/debug.js";
+import "delegate";
+var TPL = [{
+  tag: "xg-cache",
+  className: "xgplayer-progress-cache",
+  styleKey: "cachedColor"
+}, {
+  tag: "xg-played",
+  className: "xgplayer-progress-played",
+  styleKey: "playedColor"
+}];
+var InnerList = /* @__PURE__ */ function() {
+  function InnerList2(args) {
+    _classCallCheck(this, InnerList2);
+    this.fragments = args.fragments || [];
+    if (this.fragments.length === 0) {
+      this.fragments.push({
+        percent: 1
+      });
+    }
+    this._callBack = args.actionCallback;
+    this.fragConfig = {
+      fragFocusClass: args.fragFocusClass || "inner-focus-point",
+      fragAutoFocus: !!args.fragAutoFocus,
+      fragClass: args.fragClass || ""
+    };
+    this.style = args.style || {
+      playedColor: "",
+      cachedColor: "",
+      progressColor: ""
+    };
+    this.duration = 0;
+    this.cachedIndex = 0;
+    this.playedIndex = 0;
+    this.focusIndex = -1;
+  }
+  _createClass(InnerList2, [{
+    key: "updateDuration",
+    value: function updateDuration(duration) {
+      var _this = this;
+      this.duration = duration;
+      var start = 0;
+      var fragments = this.fragments;
+      this.fragments = fragments.map(function(item) {
+        item.start = parseInt(start, 10);
+        item.end = parseInt(start + item.percent * _this.duration, 10);
+        item.duration = parseInt(item.percent * _this.duration, 10);
+        start += item.percent * _this.duration;
+        return item;
+      });
+    }
+  }, {
+    key: "updateProgress",
+    value: function updateProgress() {
+      var type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "played";
+      var data = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+        newIndex: 0,
+        curIndex: 0,
+        millisecond: 0
+      };
+      var progressList = this.progressList, fragments = this.fragments;
+      if (progressList.length < 1) {
+        return;
+      }
+      var newIndex = data.newIndex, curIndex = data.curIndex, millisecond = data.millisecond;
+      if (newIndex !== curIndex) {
+        progressList.map(function(item, index) {
+          if (index < newIndex) {
+            item[type].style.width = "100%";
+          } else if (index > newIndex) {
+            item[type].style.width = 0;
+          }
+        });
+      }
+      var curPFrag = fragments[newIndex];
+      var per = millisecond === 0 ? 0 : (millisecond - curPFrag.start) / curPFrag.duration;
+      progressList[newIndex][type].style.width = per < 0 ? 0 : "".concat(per * 100, "%");
+    }
+  }, {
+    key: "updateFocus",
+    value: function updateFocus(data) {
+      if (!this.fragConfig.fragAutoFocus || this.fragments.length < 2) {
+        return;
+      }
+      if (!data) {
+        if (this.focusIndex > -1) {
+          this.unHightLight(this.focusIndex);
+          var _data = {
+            index: -1,
+            preIndex: this.focusIndex,
+            fragment: null
+          };
+          this._callBack && this._callBack(_data);
+          this.focusIndex = -1;
+        }
+        return;
+      }
+      var newPIndex = this.findIndex(data.currentTime * 1e3, this.focusIndex);
+      if (newPIndex >= 0 && newPIndex !== this.focusIndex) {
+        this.focusIndex > -1 && this.unHightLight(this.focusIndex);
+        this.setHightLight(newPIndex);
+        var _data2 = {
+          index: newPIndex,
+          preIndex: this.focusIndex,
+          fragment: this.fragments[this.focusIndex]
+        };
+        this.focusIndex = newPIndex;
+        this._callBack && this._callBack(_data2);
+      }
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        cached: 0,
+        played: 0
+      };
+      var duration = arguments.length > 1 ? arguments[1] : void 0;
+      if (!this.duration || parseInt(duration * 1e3, 10) !== this.duration) {
+        if (!duration && duration !== 0) {
+          return;
+        }
+        this.updateDuration(parseInt(duration * 1e3, 10));
+      }
+      var playedIndex = this.playedIndex, cachedIndex = this.cachedIndex;
+      if (util.typeOf(data.played) !== "Undefined") {
+        var newPIndex = this.findIndex(data.played * 1e3, playedIndex);
+        if (newPIndex < 0) {
+          return;
+        }
+        this.updateProgress("played", {
+          newIndex: newPIndex,
+          curIndex: playedIndex,
+          millisecond: parseInt(data.played * 1e3, 10)
+        });
+        this.playedIndex = newPIndex;
+      }
+      if (util.typeOf(data.cached) !== "Undefined") {
+        var newCIndex = this.findIndex(data.cached * 1e3, cachedIndex);
+        if (newCIndex < 0) {
+          return;
+        }
+        this.updateProgress("cached", {
+          newIndex: newCIndex,
+          curIndex: cachedIndex,
+          millisecond: parseInt(data.cached * 1e3, 10)
+        });
+        this.cachedIndex = newCIndex;
+      }
+    }
+  }, {
+    key: "findIndex",
+    value: function findIndex(time, curIndex) {
+      var fragments = this.fragments;
+      if (!fragments || fragments.length === 0) {
+        return -1;
+      }
+      if (fragments.length === 1) {
+        return 0;
+      }
+      if (curIndex > -1 && curIndex < fragments.length && time > fragments[curIndex].start && time < fragments[curIndex].end) {
+        return curIndex;
+      }
+      if (time > fragments[fragments.length - 1].start) {
+        return fragments.length - 1;
+      }
+      for (var i = 0; i < fragments.length; i++) {
+        if (time > fragments[i].start && time <= fragments[i].end) {
+          curIndex = i;
+          break;
+        }
+      }
+      return curIndex;
+    }
+  }, {
+    key: "findHightLight",
+    value: function findHightLight() {
+      var children = this.root.children;
+      for (var i = 0; i < children.length; i++) {
+        if (util.hasClass(children[i], this.fragConfig.fragFocusClass)) {
+          return {
+            dom: children[i],
+            pos: children[i].getBoundingClientRect()
+          };
+        }
+      }
+    }
+  }, {
+    key: "findFragment",
+    value: function findFragment(index) {
+      var children = this.root.children;
+      if (index < 0 || index >= children.length) {
+        return null;
+      }
+      return {
+        dom: children[index],
+        pos: children[index].getBoundingClientRect()
+      };
+    }
+  }, {
+    key: "unHightLight",
+    value: function unHightLight() {
+      var children = this.root.children;
+      for (var i = 0; i < children.length; i++) {
+        util.removeClass(children[i], this.fragConfig.fragFocusClass);
+      }
+    }
+  }, {
+    key: "setHightLight",
+    value: function setHightLight(index) {
+      var children = this.root.children;
+      if (index < children.length) {
+        util.addClass(children[index], this.fragConfig.fragFocusClass);
+        return {
+          dom: children[index],
+          pos: children[index].getBoundingClientRect()
+        };
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.progressList = null;
+      this.fragments = null;
+      this.root.innerHTML = "";
+    }
+  }, {
+    key: "reset",
+    value: function reset(newOptions) {
+      var _this2 = this;
+      Object.keys(this.fragConfig).forEach(function(key) {
+        if (newOptions[key] !== void 0) {
+          _this2.fragConfig[key] = newOptions[key];
+        }
+      });
+      if (newOptions.fragments) {
+        this.fragments = newOptions.fragments.length === 0 ? [{
+          percent: 1
+        }] : newOptions.fragments;
+        this.updateDuration(this.duration);
+        this.playedIndex = 0;
+        this.cachedIndex = 0;
+        if (this.root) {
+          var _c = this.root.children;
+          while (_c.length > 0) {
+            this.root.removeChild(_c[0]);
+          }
+        }
+        this.render();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var progressColor = this.style.progressColor;
+      if (!this.root) {
+        this.root = util.createDom("xg-inners", "", {}, "progress-list");
+      }
+      if (this.fragments) {
+        var _this$fragConfig = this.fragConfig, fragClass = _this$fragConfig.fragClass, fragFocusClass = _this$fragConfig.fragFocusClass;
+        this.progressList = this.fragments.map(function(item) {
+          var inner = util.createDom("xg-inner", "", {
+            style: progressColor ? "background:".concat(progressColor, "; flex: ").concat(item.percent) : "flex: ".concat(item.percent)
+          }, "".concat(item.isFocus ? fragFocusClass : "", " xgplayer-progress-inner ").concat(fragClass));
+          _this3.root.appendChild(inner);
+          TPL.forEach(function(item2) {
+            inner.appendChild(util.createDom(item2.tag, "", {
+              style: item2.styleKey ? "background: ".concat(_this3.style[item2.styleKey], "; width:0;") : "width:0;"
+            }, item2.className));
+          });
+          return {
+            cached: inner.children[0],
+            played: inner.children[1]
+          };
+        });
+      }
+      return this.root;
+    }
+  }]);
+  return InnerList2;
+}();
+export { InnerList as default };

package/es/plugins/progress/miniProgress.d.ts

@@ -0,0 +1,9 @@
+export default MiniProgress;
+declare class MiniProgress extends Plugin {
+    update(data: {
+        cached: number;
+        played: number;
+    }, duration: any): void;
+    render(): string;
+}
+import Plugin from "../../plugin";

package/es/plugins/progress/miniProgress.js

@@ -0,0 +1,55 @@
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass } from "../../_virtual/_rollupPluginBabelHelpers.js";
+import "../../utils/util.js";
+import "../../utils/debug.js";
+import Plugin from "../../plugin/plugin.js";
+var MiniProgress = /* @__PURE__ */ function(_Plugin) {
+  _inherits(MiniProgress2, _Plugin);
+  var _super = _createSuper(MiniProgress2);
+  function MiniProgress2() {
+    _classCallCheck(this, MiniProgress2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(MiniProgress2, [{
+    key: "afterCreate",
+    value: function afterCreate() {
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        cached: 0,
+        played: 0
+      };
+      var duration = arguments.length > 1 ? arguments[1] : void 0;
+      if (!duration || !this.root) {
+        return;
+      }
+      if (data.cached) {
+        this.find("xg-mini-progress-cache").style.width = "".concat(data.cached / duration * 100, "%");
+      }
+      if (data.played) {
+        this.find("xg-mini-progress-played").style.width = "".concat(data.played / duration * 100, "%");
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.playerConfig.progress || !this.playerConfig.miniprogress) {
+        return;
+      }
+      return '<xg-mini-progress class="xg-mini-progress">\n    <xg-mini-progress-cache class="xg-mini-progress-cache"></xg-mini-progress-cache>\n    <xg-mini-progress-played class="xg-mini-progress-played"></xg-mini-progress-played>\n    </xg-mini-progress>';
+    }
+  }], [{
+    key: "pluginName",
+    get: function get() {
+      return "MiniProgress";
+    }
+  }, {
+    key: "defaultConfig",
+    get: function get() {
+      return {};
+    }
+  }]);
+  return MiniProgress2;
+}(Plugin);
+export { MiniProgress as default };

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

@@ -0,0 +1 @@
+export default function initDotsAPI(plugin: any): void;