xgplayer 3.0.17-alpha.2 → 3.0.17-alpha.4

package/es/index.css

@@ -500,6 +500,9 @@
   .xgplayer-mobile .xg-options-list li:hover {
     color: rgb(255, 255, 255);
   }
+  .xgplayer-mobile .xg-options-list li.selected {
+    color: #FF0000;
+  }
 }
 .xgplayer xg-thumbnail {
   display: block;

package/es/plugins/common/optionsIcon.scss

@@ -154,9 +154,12 @@
       }
     }
     .xg-options-list li {
-      &:hover{
+      &:hover {
         color: $definitionLiColor;
       }
+      &.selected {
+        color: $definitionLiActiveColor;
+      }
     }
   }
 }

package/es/plugins/mobile/index.js

@@ -24,6 +24,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
     _this = _super.call(this, options);
     _defineProperty(_assertThisInitialized(_this), "onTouchStart", function(e) {
       var _assertThisInitialize = _assertThisInitialized(_this), player = _assertThisInitialize.player, config = _assertThisInitialize.config, pos = _assertThisInitialize.pos, playerConfig = _assertThisInitialize.playerConfig;
+      console.log(">>>onTouchStart Mobile");
       var touche = _this.getTouche(e);
       if (touche && !config.disableGesture && _this.duration > 0 && !player.ended) {
         pos.isStart = true;
@@ -88,8 +89,9 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
     });
     _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function(e) {
       var _assertThisInitialize3 = _assertThisInitialized(_this), player = _assertThisInitialize3.player, pos = _assertThisInitialize3.pos, playerConfig = _assertThisInitialize3.playerConfig;
+      console.log(">>>onTouchEnd Mobile");
       setTimeout(function() {
-        player.getPlugin("progress") && player.getPlugin("progress").resetSeekState();
+        player.getPlugin("progress") && player.getPlugin("progress").recoverSeekState();
       }, 10);
       if (!pos.isStart) {
         return;
@@ -230,6 +232,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
           });
           ["dragend", "click"].forEach(function(key) {
             progressPlugin.addCallBack(key, function() {
+              console.log(">>>>progressPlugin callback", key);
               _this2.changeAction(ACTIONS.AUTO);
             });
           });
@@ -303,6 +306,7 @@ var MobilePlugin = /* @__PURE__ */ function(_Plugin) {
     key: "changeAction",
     value: function changeAction(action) {
       var player = this.player, root = this.root;
+      console.log(">>>>changeAction", action);
       root.setAttribute("data-xg-action", action);
       var startPlugin = player.plugins.start;
       startPlugin && startPlugin.recover();

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

@@ -99,7 +99,7 @@ declare class Progress extends Plugin {
      */
     removeCallBack(type: string, event: Function): void;
     /**
-     * @description 解除进度条的所动状态
+     * @description 解除进度条的锁定状态
      * @returns
      */
     unlock(): void;
@@ -121,6 +121,8 @@ declare class Progress extends Plugin {
     _mouseDownHandler: (event: any, data: any) => void;
     _mouseUpHandler: (e: any, data: any) => void;
     _mouseMoveHandler: (e: any, data: any) => void;
+    onControlsMove: (e: any) => void;
+    onControlsEnd: (e: any) => void;
     onMouseDown: (e: any) => boolean;
     onMouseUp: (e: any) => void;
     onMouseMove: (e: any) => void;
@@ -155,7 +157,8 @@ declare class Progress extends Plugin {
     /**
      * @description 复位正在拖拽状态 ，拖拽的时候要避免timeupdate更新
      */
-    resetSeekState(): void;
+    recoverSeekState(): void;
+    setSeekState(): void;
     /**
      * @description 拖拽过程中更新UI
      * @param {number} percent 小于0的小数

package/es/plugins/progress/index.js

@@ -29,8 +29,8 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         pos.moving = true;
         pos.x = x;
         ret = _this.computeTime(e, x);
+        _this.triggerCallbacks("dragmove", ret, e);
       }
-      _this.triggerCallbacks("dragmove", ret, e);
       _this._updateInnerFocus(ret);
     });
     _defineProperty(_assertThisInitialized(_this), "onBodyClick", function(e) {
@@ -68,7 +68,16 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       _this.triggerCallbacks("dragmove", data, e);
       _this._updateInnerFocus(data);
     });
+    _defineProperty(_assertThisInitialized(_this), "onControlsMove", function(e) {
+      util.stopPropagation(e);
+      console.log("onControlsMove", e.type);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onControlsEnd", function(e) {
+      console.log("onControlsEnd", e.type);
+      util.stopPropagation(e);
+    });
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function(e) {
+      console.log(">>>onMouseDown");
       var _assertThisInitialize4 = _assertThisInitialized(_this), _state = _assertThisInitialize4._state, player = _assertThisInitialize4.player, pos = _assertThisInitialize4.pos, config = _assertThisInitialize4.config, playerConfig = _assertThisInitialize4.playerConfig;
       var _ePos = util.getEventPos(e, player.zoom);
       var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
@@ -110,6 +119,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function(e) {
       var _assertThisInitialize5 = _assertThisInitialized(_this), player = _assertThisInitialize5.player, config = _assertThisInitialize5.config, pos = _assertThisInitialize5.pos, playerConfig = _assertThisInitialize5.playerConfig, _state = _assertThisInitialize5._state;
+      console.log("onMouseUp", e.type);
       e.stopPropagation();
       e.preventDefault();
       util.checkIsFunction(playerConfig.enableSwipeHandler) && playerConfig.enableSwipeHandler();
@@ -119,13 +129,16 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       var ret = _this.computeTime(e, pos.x);
       ret.prePlayTime = _state.prePlayTime;
       if (pos.moving) {
+        console.log(">>>>triggerCallbacks dragend");
         _this.triggerCallbacks("dragend", ret, e);
         _this.emitUserAction("drag", "dragend", ret);
       } else {
+        console.log(">>>>triggerCallbacks click");
         _this.triggerCallbacks("click", ret, e);
         _this.emitUserAction("click", "click", ret);
       }
       _this._mouseUpHandlerHook(e, ret);
+      console.log(">>>>after _mouseUpHandlerHook");
       pos.moving = false;
       pos.isDown = false;
       pos.x = 0;
@@ -135,6 +148,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       _state.time = 0;
       var eventType = e.type;
       if (eventType === "touchend" || eventType === "touchcancel") {
+        console.log(">>>>removeEventListener");
         _this.root.removeEventListener("touchmove", _this.onMouseMove);
         _this.root.removeEventListener("touchend", _this.onMouseUp);
         _this.root.removeEventListener("touchcancel", _this.onMouseUp);
@@ -148,9 +162,14 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
           playerConfig.isMobileSimulateMode !== "mobile" && _this.bind("mousemove", _this.onMoveOnly);
         }
       }
+      console.log(">>>>setTimeout recoverSeekState");
+      if (eventType === "touchcancel") {
+        _this.recoverSeekState();
+      }
       util.setTimeout(_assertThisInitialized(_this), function() {
-        _this.resetSeekState();
-      }, 1);
+        console.log(">>>>recoverSeekState");
+        _this.recoverSeekState();
+      }, 10);
       player.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseMove", function(e) {
@@ -162,10 +181,15 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       var _ePos = util.getEventPos(e, player.zoom);
       var x = player.rotateDeg === 90 ? _ePos.clientY : _ePos.clientX;
       var diff = Math.abs(pos.x - x);
-      if (pos.moving && diff < config.miniMoveStep || !pos.moving && diff < config.miniStartStep) {
+      if (!pos.isDown || pos.moving && diff < config.miniMoveStep || !pos.moving && diff < config.miniStartStep) {
+        console.log(">>>onMouseMove11", "pos.isDown:".concat(pos.isDown, " isProgressMoving:").concat(_this.isProgressMoving));
         return;
       }
       pos.x = x;
+      if (config.disable) {
+        return;
+      }
+      _this.isProgressMoving = true;
       var ret = _this.computeTime(e, x);
       ret.prePlayTime = _state.prePlayTime;
       _this._mouseMoveHandlerHook(e, ret);
@@ -192,7 +216,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       _this.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function(e) {
-      _this.triggerCallbacks("mouseleave", null, e);
+      e && _this.triggerCallbacks("mouseleave", null, e);
       _this.unlock();
       _this._updateInnerFocus(null);
     });
@@ -424,16 +448,12 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "bindDomEvents",
     value: function bindDomEvents() {
-      var _this$player2 = this.player, controls = _this$player2.controls, config = _this$player2.config;
+      var config = this.player.config;
       this._mouseDownHandlerHook = this.hook("dragstart", this._mouseDownHandler);
       this._mouseUpHandlerHook = this.hook("dragend", this._mouseUpHandler);
       this._mouseMoveHandlerHook = this.hook("drag", this._mouseMoveHandler);
       if (this.domEventType === "touch" || this.domEventType === "compatible") {
         this.root.addEventListener("touchstart", this.onMouseDown);
-        if (controls) {
-          controls.root && controls.root.addEventListener("touchmove", util.stopPropagation);
-          controls.center && controls.center.addEventListener("touchend", util.stopPropagation);
-        }
       }
       if (this.domEventType === "mouse" || this.domEventType === "compatible") {
         this.bind("mousedown", this.onMouseDown);
@@ -530,16 +550,20 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       }
     }
   }, {
-    key: "resetSeekState",
-    value: function resetSeekState() {
+    key: "recoverSeekState",
+    value: function recoverSeekState() {
       this.isProgressMoving = false;
       var timeIcon = this.player.plugins.time;
       timeIcon && timeIcon.resetActive();
     }
+  }, {
+    key: "setSeekState",
+    value: function setSeekState() {
+      this.isProgressMoving = true;
+    }
   }, {
     key: "updatePercent",
     value: function updatePercent(percent, notSeek) {
-      this.isProgressMoving = true;
       if (this.config.disable) {
         return;
       }
@@ -558,6 +582,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     value: function onTimeupdate(isEnded) {
       var player = this.player, _state = this._state, offsetDuration = this.offsetDuration;
       if (player.isSeeking && player.media.seeking || this.isProgressMoving || !player.hasStart) {
+        console.log(">>>onTimeupdate", "isSeeking:".concat(player.isSeeking, " seeking:").concat(player.media.seeking, " isProgressMoving:").concat(this.isProgressMoving, " hasStart:").concat(player.hasStart));
         return;
       }
       if (_state.now > -1) {
@@ -602,7 +627,6 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
     key: "destroy",
     value: function destroy() {
       var player = this.player;
-      var controls = player.controls;
       this.thumbnailPlugin = null;
       this.innerList.destroy();
       this.innerList = null;
@@ -612,10 +636,6 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         this.root.removeEventListener("touchmove", this.onMouseMove);
         this.root.removeEventListener("touchend", this.onMouseUp);
         this.root.removeEventListener("touchcancel", this.onMouseUp);
-        if (controls) {
-          controls.root && controls.root.removeEventListener("touchmove", util.stopPropagation);
-          controls.center && controls.center.removeEventListener("touchend", util.stopPropagation);
-        }
       }
       if (domEventType === "mouse" || domEventType === "compatible") {
         this.unbind("mousedown", this.onMouseDown);

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

@@ -27,6 +27,8 @@ declare class Time extends Plugin {
     updateTime(time: any): void;
     minWidthTime(timeStr: any): any;
     resetActive(): void;
+    __updateState: () => void;
+    setActiveState(state: any): void;
     render(): string;
 }
 import Plugin from "../../plugin";

package/es/plugins/time/index.js

@@ -47,7 +47,7 @@ var Time = /* @__PURE__ */ function(_Plugin) {
       this.timeDom = this.find(".time-current");
       this.on([DURATION_CHANGE, SEEKED, TIME_UPDATE], function(e) {
         if (e.eventName === "durationchange") {
-          _this2.isActiving = false;
+          _this2.setActiveState(false);
         }
         _this2.onTimeUpdate();
       });
@@ -181,16 +181,23 @@ var Time = /* @__PURE__ */ function(_Plugin) {
     value: function resetActive() {
       var _this3 = this;
       var player = this.player;
-      var updateState = function updateState2() {
-        _this3.isActiving = false;
-      };
-      this.off(SEEKED, updateState);
+      if (!this.__updateState) {
+        this.__updateState = function() {
+          _this3.setActiveState(false);
+        };
+      }
+      this.off(SEEKED, this.__updateState);
       if (player.isSeeking && player.media.seeking) {
-        this.once(SEEKED, updateState);
+        this.once(SEEKED, this.__updateState);
       } else {
-        this.isActiving = false;
+        this.setActiveState(false);
       }
     }
+  }, {
+    key: "setActiveState",
+    value: function setActiveState(state) {
+      this.isActiving = state;
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/es/version.js

@@ -1,2 +1,2 @@
-var version = "3.0.17-alpha.2";
+var version = "3.0.17-alpha.4";
 export { version as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xgplayer",
-  "version": "3.0.17-alpha.2",
+  "version": "3.0.17-alpha.4",
   "description": "video player",
   "main": "dist/index.min.js",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
-    "tag": "al"
+    "tag": "alpha"
   },
   "files": [
     "dist",