xgplayer 3.0.8 → 3.0.9

package/es/plugins/keyboard/index.js

@@ -25,38 +25,62 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "onBodyKeyDown", function(event) {
-      var e = event || window.event;
-      if (!_this.player || !_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
+      if (!_this.player) {
         return;
       }
-      if (_this.config.disable || _this.config.disableBodyTrigger || !_this.checkIsVisible() || e.metaKey || e.altKey || e.ctrlKey) {
+      var e = event || window.event;
+      var keyCode = e.keyCode;
+      var _assertThisInitialize = _assertThisInitialized(_this), _keyState = _assertThisInitialize._keyState;
+      if (!event.repeat) {
+        if (_keyState.isKeyDown || _this.config.disable || _this.config.disableBodyTrigger || !_this.player.isUserActive && !_this.config.isIgnoreUserActive || !_this.checkIsVisible() || e.metaKey || e.altKey || e.ctrlKey) {
+          return;
+        }
+        if ((e.target === document.body || _this.config.isGlobalTrigger && !isDisableTag(e.target)) && _this.checkCode(keyCode, true)) {
+          _keyState.isBodyKeyDown = true;
+        }
+        document.addEventListener("keyup", _this.onBodyKeyUp);
+      }
+      if (!_keyState.isBodyKeyDown) {
         return;
       }
-      var keyCode = e.keyCode;
-      if ((e.target === document.body || _this.config.isGlobalTrigger && !isDisableTag(e.target)) && _this.checkCode(keyCode, true)) {
-        preventDefault(e);
-        _this.handleKeyCode(keyCode, event);
-        return false;
+      _this.handleKeyDown(e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBodyKeyUp", function(event) {
+      if (!_this.player) {
+        return;
       }
-      return false;
+      document.removeEventListener("keyup", _this.onBodyKeyUp);
+      _this.handleKeyUp(event);
     });
     _defineProperty(_assertThisInitialized(_this), "onKeydown", function(event) {
-      var e = event || window.event;
-      if (_this.config.disable || _this.config.disableRootTrigger || e.metaKey || e.altKey || e.ctrlKey) {
+      if (!_this.player) {
         return;
       }
-      if (!_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
-        return;
+      var e = event || window.event;
+      var _assertThisInitialize2 = _assertThisInitialized(_this), _keyState = _assertThisInitialize2._keyState;
+      if (!e.repeat) {
+        if (_this.config.disable || _this.config.disableRootTrigger || e.metaKey || e.altKey || e.ctrlKey) {
+          return;
+        }
+        if (!_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
+          return;
+        }
+        if (e && (e.keyCode === 37 || _this.checkCode(e.keyCode)) && (e.target === _this.player.root || e.target === _this.player.video || e.target === _this.player.controls.el)) {
+          _keyState.isKeyDown = true;
+        }
+        _this.player.root.addEventListener("keyup", _this.onKeyup);
       }
-      if (!_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
+      if (!_keyState.isKeyDown) {
         return;
       }
-      if (e && (e.keyCode === 37 || _this.checkCode(e.keyCode)) && (e.target === _this.player.root || e.target === _this.player.video || e.target === _this.player.controls.el)) {
-        preventDefault(e);
-      } else {
-        return true;
+      _this.handleKeyDown(e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onKeyup", function(event) {
+      if (!_this.player) {
+        return;
       }
-      _this.handleKeyCode(e.keyCode, event);
+      _this.player.root.removeEventListener("keyup", _this.onKeyup);
+      _this.handleKeyUp(event);
     });
     return _this;
   }
@@ -70,7 +94,7 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
           if (!_this2.keyCodeMap[key]) {
             _this2.keyCodeMap[key] = extendkeyCodeMap[key];
           } else {
-            ["keyCode", "action", "disable", "isBodyTarget"].map(function(key1) {
+            ["keyCode", "action", "disable", "pressAction", "disablePress", "isBodyTarget"].map(function(key1) {
               extendkeyCodeMap[key][key1] && (_this2.keyCodeMap[key][key1] = extendkeyCodeMap[key][key1]);
             });
           }
@@ -90,37 +114,51 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
           keyCode: 32,
           action: "playPause",
           disable: false,
+          disablePress: false,
           noBodyTarget: false
         },
         up: {
           keyCode: 38,
           action: "upVolume",
           disable: false,
+          disablePress: false,
           noBodyTarget: true
         },
         down: {
           keyCode: 40,
           action: "downVolume",
           disable: false,
+          disablePress: false,
           noBodyTarget: true
         },
         left: {
           keyCode: 37,
           action: "seekBack",
+          disablePress: false,
           disable: false
         },
         right: {
           keyCode: 39,
           action: "seek",
+          pressAction: "changePlaybackRate",
+          disablePress: false,
           disable: false
         },
         esc: {
           keyCode: 27,
           action: "exitFullscreen",
+          disablePress: true,
           disable: false
         }
       };
       this.mergekeyCodeMap();
+      this._keyState = {
+        isKeyDown: false,
+        isBodyKeyDown: false,
+        isPress: false,
+        tt: 0,
+        playbackRate: 0
+      };
       this.player.root.addEventListener("keydown", this.onKeydown);
       document.addEventListener("keydown", this.onBodyKeyDown);
     }
@@ -154,6 +192,9 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     key: "downVolume",
     value: function downVolume(event) {
       var player = this.player;
+      if (player.volume <= 0) {
+        return;
+      }
       var val = parseFloat((player.volume - 0.1).toFixed(1));
       var props = {
         volume: {
@@ -174,6 +215,9 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     key: "upVolume",
     value: function upVolume(event) {
       var player = this.player;
+      if (player.volume >= 1) {
+        return;
+      }
       var val = parseFloat((player.volume + 0.1).toFixed(1));
       var props = {
         volume: {
@@ -195,8 +239,9 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     value: function seek(event) {
       var _this$player = this.player, currentTime = _this$player.currentTime, duration = _this$player.duration;
       var _time = currentTime;
-      if (currentTime + this.seekStep <= duration) {
-        _time = currentTime + this.seekStep;
+      var _step = event.repeat && this.seekStep >= 4 ? parseInt(this.seekStep / 2, 10) : this.seekStep;
+      if (currentTime + _step <= duration) {
+        _time = currentTime + _step;
       } else {
         _time = duration;
       }
@@ -215,9 +260,10 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     key: "seekBack",
     value: function seekBack(event) {
       var currentTime = this.player.currentTime;
+      var _step = event.repeat ? parseInt(this.seekStep / 2, 10) : this.seekStep;
       var _time = 0;
-      if (currentTime - this.seekStep >= 0) {
-        _time = currentTime - this.seekStep;
+      if (currentTime - _step >= 0) {
+        _time = currentTime - _step;
       }
       var props = {
         currentTime: {
@@ -230,6 +276,15 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
       });
       this.player.currentTime = _time;
     }
+  }, {
+    key: "changePlaybackRate",
+    value: function changePlaybackRate(event) {
+      var _keyState = this._keyState, config = this.config, player = this.player;
+      if (_keyState.playbackRate === 0) {
+        _keyState.playbackRate = player.playbackRate;
+        player.playbackRate = config.playbackRate;
+      }
+    }
   }, {
     key: "playPause",
     value: function playPause(event) {
@@ -266,32 +321,66 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
         player.exitCssFullscreen();
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      var _keyState = this._keyState;
+      if (e.repeat) {
+        _keyState.isPress = true;
+        var _t = Date.now();
+        if (_t - _keyState.tt < 200) {
+          return;
+        }
+        _keyState.tt = _t;
+      }
+      preventDefault(e);
+      this.handleKeyCode(e.keyCode, e, _keyState.isPress);
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      var _keyState = this._keyState;
+      if (_keyState.playbackRate > 0) {
+        this.player.playbackRate = _keyState.playbackRate;
+        _keyState.playbackRate = 0;
+      }
+      _keyState.isKeyDown = false;
+      _keyState.isPress = false;
+      _keyState.tt = 0;
+    }
   }, {
     key: "handleKeyCode",
-    value: function handleKeyCode(curKeyCode, event) {
-      var _this4 = this;
-      Object.keys(this.keyCodeMap).map(function(key) {
-        var _this4$keyCodeMap$key = _this4.keyCodeMap[key], action = _this4$keyCodeMap$key.action, keyCode = _this4$keyCodeMap$key.keyCode, disable = _this4$keyCodeMap$key.disable;
-        if (keyCode === curKeyCode && !disable) {
-          if (typeof action === "function") {
-            action(event, _this4.player);
-          } else if (typeof action === "string") {
-            if (typeof _this4[action] === "function") {
-              _this4[action](event, _this4.player);
+    value: function handleKeyCode(curKeyCode, event, isPress) {
+      var arr = Object.keys(this.keyCodeMap);
+      for (var i = 0; i < arr.length; i++) {
+        var _this$keyCodeMap$arr$ = this.keyCodeMap[arr[i]], action = _this$keyCodeMap$arr$.action, keyCode = _this$keyCodeMap$arr$.keyCode, disable = _this$keyCodeMap$arr$.disable, pressAction = _this$keyCodeMap$arr$.pressAction, disablePress = _this$keyCodeMap$arr$.disablePress;
+        if (keyCode === curKeyCode) {
+          if (!disable && !(isPress && disablePress)) {
+            var _action = !isPress ? action : pressAction || action;
+            if (typeof _action === "function") {
+              action(event, this.player, isPress);
+            } else if (typeof _action === "string") {
+              if (typeof this[_action] === "function") {
+                this[_action](event, this.player, isPress);
+              }
             }
+            this.emit(SHORTCUT, _objectSpread2({
+              key: arr[i],
+              target: event.target,
+              isPress
+            }, this.keyCodeMap[arr[i]]));
           }
-          _this4.emit(SHORTCUT, _objectSpread2({
-            key,
-            target: event.target
-          }, _this4.keyCodeMap[key]));
+          break;
         }
-      });
+      }
     }
   }, {
     key: "destroy",
     value: function destroy() {
       this.player.root.removeEventListener("keydown", this.onKeydown);
       document.removeEventListener("keydown", this.onBodyKeyDown);
+      this.player.root.removeEventListener("keyup", this.onKeyup);
+      document.removeEventListener("keyup", this.onBodyKeyUp);
     }
   }, {
     key: "disable",
@@ -313,12 +402,13 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
     get: function get() {
       return {
         seekStep: 10,
-        checkVisible: true,
+        checkVisible: false,
         disableBodyTrigger: false,
         disableRootTrigger: false,
         isGlobalTrigger: false,
         keyCodeMap: {},
         disable: false,
+        playbackRate: 2,
         isIgnoreUserActive: false
       };
     }

package/es/plugins/progressPreview/dotsApi.js

@@ -1,5 +1,5 @@
 import util from "../../utils/util.js";
-import { DURATION_CHANGE } from "../../events.js";
+import { DURATION_CHANGE, VIDEO_RESIZE } from "../../events.js";
 import "../../utils/debug.js";
 import "delegate";
 var ISPOT = {
@@ -65,7 +65,8 @@ var APIS = {
     style.width = "".concat(ret.width, "%");
     var className = "xgspot_".concat(iSpot.id, " xgplayer-spot");
     ret.isMini && (className += " mini");
-    var dotDom = util.createDom("xg-spot", iSpot.template || "", {
+    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
@@ -74,6 +75,7 @@ var APIS = {
       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) {
@@ -175,8 +177,43 @@ var APIS = {
       }
     });
   },
-  updateDuration: function updateDuration() {
+  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;
@@ -184,7 +221,7 @@ var APIS = {
     var _ispots = this._ispots;
     _ispots.forEach(function(item) {
       var dotDom = progress.find('xg-spot[data-id="'.concat(item.id, '"]'));
-      _this3._updateDotDom(item, dotDom);
+      _this4._updateDotDom(item, dotDom);
     });
   },
   getAllDotsDom: function getAllDotsDom() {
@@ -214,6 +251,10 @@ function initDotsAPI(plugin) {
     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();
@@ -221,5 +262,8 @@ function initDotsAPI(plugin) {
       plugin.updateDuration();
     }
   });
+  plugin.on(VIDEO_RESIZE, function() {
+    plugin.positionDots();
+  });
 }
 export { initDotsAPI as default };

package/es/plugins/progressPreview/index.css

@@ -16,6 +16,21 @@
   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;

package/es/plugins/progressPreview/index.scss

@@ -14,6 +14,23 @@ $shortBottom: -4px;
       min-width: 6px;
       transform: translate(-50%, 0);
     }
+    &.active {
+      .xgplayer-spot-pop {
+        display: block;
+        opacity: 1;
+        pointer-events: initial;
+      }
+    }
+  }
+  .xgplayer-spot-pop {
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    bottom: 5px;
+    padding-bottom: 5px;
+    transform: translateX(-50%);
   }
 
   @at-root.xgplayer-mobile {

package/es/plugins/time/index.css

@@ -12,6 +12,16 @@
   line-height: 40px;
   height: 40px;
 }
+.xgplayer .xgplayer-time span .time-min-width {
+  text-align: center;
+  min-width: 2ch;
+}
+.xgplayer .xgplayer-time span .time-min-width:first-child {
+  text-align: right;
+}
+.xgplayer .xgplayer-time span .time-min-width:last-child {
+  text-align: left;
+}
 .xgplayer .xgplayer-time .time-duration {
   color: rgba(255, 255, 255, 0.5);
 }

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

@@ -21,6 +21,7 @@ declare class Time extends Plugin {
     centerDurDom: HTMLElement;
     changeLiveState(isLive: any): void;
     updateTime(time: any): void;
+    minWidthTime(timeStr: any): any;
     resetActive(): void;
     render(): string;
 }

package/es/plugins/time/index.js

@@ -86,12 +86,12 @@ var Time = /* @__PURE__ */ function(_Plugin) {
       var current = player.currentTime + this.timeOffset;
       current = util.adjustTimeByDuration(current, duration, isEnded);
       if (this.mode === "flex") {
-        this.centerCurDom.innerHTML = util.format(current);
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(current));
         if (duration !== Infinity && duration > 0) {
           this.centerDurDom.innerHTML = util.format(duration);
         }
       } else {
-        this.timeDom.innerHTML = util.format(current);
+        this.timeDom.innerHTML = this.minWidthTime(util.format(current));
         if (duration !== Infinity && duration > 0) {
           this.durationDom.innerHTML = util.format(duration);
         }
@@ -101,10 +101,10 @@ var Time = /* @__PURE__ */ function(_Plugin) {
     key: "onReset",
     value: function onReset() {
       if (this.mode === "flex") {
-        this.centerCurDom.innerHTML = util.format(0);
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(0));
         this.centerDurDom.innerHTML = util.format(0);
       } else {
-        this.timeDom.innerHTML = util.format(0);
+        this.timeDom.innerHTML = this.minWidthTime(util.format(0));
         this.durationDom.innerHTML = util.format(0);
       }
     }
@@ -162,10 +162,17 @@ var Time = /* @__PURE__ */ function(_Plugin) {
         return;
       }
       if (this.mode === "flex") {
-        this.centerCurDom.innerHTML = util.format(time);
+        this.centerCurDom.innerHTML = this.minWidthTime(util.format(time));
         return;
       }
-      this.timeDom.innerHTML = util.format(time);
+      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",

package/es/plugins/time/index.scss

@@ -16,6 +16,16 @@ $timeDurationColor: rgba(255, 255, 255, 0.50);
       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;

package/es/style/common.scss

@@ -143,6 +143,12 @@
     outline: none;
   }
 
+  &[data-xgfill='contain'] {
+    video {
+      object-fit: contain;
+    }
+  }
+
   &[data-xgfill='cover'] {
     video {
       object-fit: cover;

package/es/version.js

@@ -1,2 +1,2 @@
-var version = "3.0.8";
+var version = "3.0.9";
 export { version as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xgplayer",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "video player",
   "main": "dist/index.min.js",
   "module": "es/index.js",
@@ -43,7 +43,7 @@
     "delegate": "^3.2.0",
     "downloadjs": "1.4.7",
     "eventemitter3": "^4.0.7",
-    "xgplayer-subtitles": "3.0.8"
+    "xgplayer-subtitles": "3.0.9"
   },
   "peerDependencies": {
     "core-js": ">=3.12.1"