xgplayer 3.0.8 → 3.0.9

package/es/defaultConfig.d.ts

@@ -20,7 +20,7 @@
  *   height?: number | string,
  *   fluid?: boolean,
  *   fitVideoSize?: 'fixWidth'|'fixHeight'|'fixed',
- *   videoFillMode?: 'auto'|'fillHeight'|'fillWidth'|'fill'|'cover',
+ *   videoFillMode?: 'auto'|'fillHeight'|'fillWidth'|'fill'|'cover'|'contain',
  *   volume?: number | { [propName: string]: any },
  *   autoplay?: boolean,
  *   autoplayMuted?: boolean,
@@ -122,7 +122,7 @@ export type IPlayerOptions = {
     height?: number | string;
     fluid?: boolean;
     fitVideoSize?: 'fixWidth' | 'fixHeight' | 'fixed';
-    videoFillMode?: 'auto' | 'fillHeight' | 'fillWidth' | 'fill' | 'cover';
+    videoFillMode?: 'auto' | 'fillHeight' | 'fillWidth' | 'fill' | 'cover' | 'contain';
     volume?: number | {
         [propName: string]: any;
     };

package/es/events.d.ts

@@ -12,6 +12,7 @@ export const CANPLAY_THROUGH: "canplaythrough";
 export const DURATION_CHANGE: "durationchange";
 export const VOLUME_CHANGE: "volumechange";
 export const LOADED_DATA: "loadeddata";
+export const LOADED_METADATA: "loadedmetadata";
 export const RATE_CHANGE: "ratechange";
 export const PROGRESS: "progress";
 export const LOAD_START: "loadstart";

package/es/events.js

@@ -12,6 +12,7 @@ var CANPLAY_THROUGH = "canplaythrough";
 var DURATION_CHANGE = "durationchange";
 var VOLUME_CHANGE = "volumechange";
 var LOADED_DATA = "loadeddata";
+var LOADED_METADATA = "loadedmetadata";
 var RATE_CHANGE = "ratechange";
 var PROGRESS = "progress";
 var LOAD_START = "loadstart";
@@ -51,11 +52,11 @@ var RESET = "reset";
 var SOURCE_ERROR = "source_error";
 var SOURCE_SUCCESS = "source_success";
 var SWITCH_SUBTITLE = "switch_subtitle";
-var VIDEO_EVENTS = ["play", "playing", "ended", "pause", "error", "seeking", "seeked", "timeupdate", "waiting", "canplay", "canplaythrough", "durationchange", "volumechange", "loadeddata", "ratechange", "progress", "loadstart", "emptied", "stalled", "suspend", "abort", "lowdecode"];
+var VIDEO_EVENTS = ["play", "playing", "ended", "pause", "error", "seeking", "seeked", "timeupdate", "waiting", "canplay", "canplaythrough", "durationchange", "volumechange", "loadeddata", "loadedmetadata", "ratechange", "progress", "loadstart", "emptied", "stalled", "suspend", "abort", "lowdecode"];
 var STATS_EVENTS = {
   STATS_INFO: "stats_info",
   STATS_DOWNLOAD: "stats_download",
   STATS_RESET: "stats_reset"
 };
 var FPS_STUCK = "fps_stuck";
-export { ABORT, AFTER_DEFINITION_CHANGE, AUTOPLAY_PREVENTED, AUTOPLAY_STARTED, BEFORE_DEFINITION_CHANGE, BUFFER_CHANGE, CANPLAY, CANPLAY_THROUGH, COMPLETE, CSS_FULLSCREEN_CHANGE, DEFINITION_CHANGE, DESTROY, DOWNLOAD_SPEED_CHANGE, DURATION_CHANGE, EMPTIED, ENDED, ERROR, FPS_STUCK, FULLSCREEN_CHANGE, LOADED_DATA, LOAD_START, MINI_STATE_CHANGE, PAUSE, PIP_CHANGE, PLAY, PLAYER_BLUR, PLAYER_FOCUS, PLAYING, PLAYNEXT, PROGRESS, RATE_CHANGE, READY, REPLAY, RESET, RETRY, ROTATE, SCREEN_SHOT, SEEKED, SEEKING, SEI_PARSED, SHORTCUT, SOURCE_ERROR, SOURCE_SUCCESS, STALLED, STATS_EVENTS, SUSPEND, SWITCH_SUBTITLE, TIME_UPDATE, URL_CHANGE, URL_NULL, USER_ACTION, VIDEO_EVENTS, VIDEO_RESIZE, VOLUME_CHANGE, WAITING, XGLOG };
+export { ABORT, AFTER_DEFINITION_CHANGE, AUTOPLAY_PREVENTED, AUTOPLAY_STARTED, BEFORE_DEFINITION_CHANGE, BUFFER_CHANGE, CANPLAY, CANPLAY_THROUGH, COMPLETE, CSS_FULLSCREEN_CHANGE, DEFINITION_CHANGE, DESTROY, DOWNLOAD_SPEED_CHANGE, DURATION_CHANGE, EMPTIED, ENDED, ERROR, FPS_STUCK, FULLSCREEN_CHANGE, LOADED_DATA, LOADED_METADATA, LOAD_START, MINI_STATE_CHANGE, PAUSE, PIP_CHANGE, PLAY, PLAYER_BLUR, PLAYER_FOCUS, PLAYING, PLAYNEXT, PROGRESS, RATE_CHANGE, READY, REPLAY, RESET, RETRY, ROTATE, SCREEN_SHOT, SEEKED, SEEKING, SEI_PARSED, SHORTCUT, SOURCE_ERROR, SOURCE_SUCCESS, STALLED, STATS_EVENTS, SUSPEND, SWITCH_SUBTITLE, TIME_UPDATE, URL_CHANGE, URL_NULL, USER_ACTION, VIDEO_EVENTS, VIDEO_RESIZE, VOLUME_CHANGE, WAITING, XGLOG };

package/es/index.css

@@ -131,6 +131,10 @@
   height: 100%;
   outline: none;
 }
+.xgplayer[data-xgfill=contain] video {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .xgplayer[data-xgfill=cover] video {
   -o-object-fit: cover;
      object-fit: cover;

package/es/mediaProxy.d.ts

@@ -127,6 +127,7 @@ declare class MediaProxy {
      * @private
      */
     private _videoSourceCount;
+    _videoSourceIndex: number;
     _vLoadeddata: (e: any) => void;
     _sourceError: (e: any) => void;
     /**

package/es/mediaProxy.js

@@ -182,10 +182,11 @@ var MediaProxy = /* @__PURE__ */ function(_EventEmitter) {
       var _this6 = this;
       video.removeAttribute("src");
       video.load();
-      urls.forEach(function(item) {
+      urls.forEach(function(item, index) {
         _this6.media.appendChild(util.createDom("source", "", {
           src: "".concat(item.src),
-          type: "".concat(item.type || "")
+          type: "".concat(item.type || ""),
+          "data-index": index + 1
         }));
       });
       var _c = video.children;
@@ -193,6 +194,7 @@ var MediaProxy = /* @__PURE__ */ function(_EventEmitter) {
         return;
       }
       this._videoSourceCount = _c.length;
+      this._videoSourceIndex = _c.length;
       this._vLoadeddata = function(e) {
         _this6.emit(SOURCE_SUCCESS, {
           src: e.target.currentSrc,
@@ -207,8 +209,9 @@ var MediaProxy = /* @__PURE__ */ function(_EventEmitter) {
         }
       }
       !this._sourceError && (this._sourceError = function(e) {
-        _this6._videoSourceCount--;
-        if (_this6._videoSourceCount === 0) {
+        var _dIndex = parseInt(e.target.getAttribute("data-index"), 10);
+        _this6._videoSourceIndex--;
+        if (_this6._videoSourceIndex === 0 || _dIndex >= _this6._videoSourceCount) {
           var _err = {
             code: 4,
             message: "sources_load_error"

package/es/player.d.ts

@@ -167,6 +167,12 @@ declare class Player extends MediaProxy {
         vy: number;
         vx: number;
     };
+    sizeInfo: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    };
     /**
      * @private
      * @type { { t: number, acc:number, acc: number, loopAcc: number, [propName: string]: any;} }
@@ -482,12 +488,14 @@ declare class Player extends MediaProxy {
      * @description 播放器焦点状态，控制栏显示
      * @param { {
      *   autoHide?: boolean, // 是否可以自动隐藏
-     *   delay?: number // 自动隐藏的延迟时间, ms, 不传默认使用3000ms
+     *   delay?: number     // 自动隐藏的延迟时间, ms, 不传默认使用3000ms
+     *   isLock?: boolean   // 是否锁定, 锁定之后自动呼出和blur调用都不生效, 默认值false
      * } } [data]
      */
     focus(data?: {
         autoHide?: boolean;
         delay?: number;
+        isLock?: boolean;
     }): void;
     /**
      * @description 取消播放器当前焦点状态
@@ -498,12 +506,13 @@ declare class Player extends MediaProxy {
     }): void;
     /**
      * @protected
-     * @param { { autoHide?: boolean, delay?: number} } [data]
+     * @param { { autoHide?: boolean, delay?: number, isLock?: boolean } } [data]
      * @returns
      */
-    protected onFocus({ autoHide, delay }?: {
+    protected onFocus(data?: {
         autoHide?: boolean;
         delay?: number;
+        isLock?: boolean;
     }): void;
     /**
      * @protected

package/es/player.js

@@ -160,6 +160,12 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       vy: 0,
       vx: 0
     };
+    _this.sizeInfo = {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
     _this._accPlayed = {
       t: 0,
       acc: 0,
@@ -262,16 +268,16 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         this.addClass(STATE_CLASS.NO_START);
       }
       if (this.config.fluid) {
-        var _this$config3 = this.config, width = _this$config3.width, height = _this$config3.height;
-        if (typeof width !== "number" || typeof height !== "number") {
-          width = 600;
-          height = 337.5;
+        var _this$config3 = this.config, _width = _this$config3.width, _height = _this$config3.height;
+        if (typeof _width !== "number" || typeof _height !== "number") {
+          _width = 600;
+          _height = 337.5;
         }
         var style = {
           width: "100%",
           height: "0",
           "max-width": "100%",
-          "padding-top": "".concat(height * 100 / width, "%")
+          "padding-top": "".concat(_height * 100 / _width, "%")
         };
         Object.keys(style).forEach(function(key) {
           _this2.root.style[key] = style[key];
@@ -287,6 +293,11 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
           }
         });
       }
+      var _this$root$getBoundin = this.root.getBoundingClientRect(), width = _this$root$getBoundin.width, height = _this$root$getBoundin.height, left = _this$root$getBoundin.left, top = _this$root$getBoundin.top;
+      this.sizeInfo.width = width;
+      this.sizeInfo.height = height;
+      this.sizeInfo.left = left;
+      this.sizeInfo.top = top;
       return true;
     }
   }, {
@@ -1014,7 +1025,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       var fullEl = util.getFullScreenEl();
       if (fullEl === this._fullscreenEl) {
         this.onFullscreenChange();
-        return;
+        return Promise.resolve();
       }
       try {
         for (var i = 0; i < GET_FULLSCREEN_API.length; i++) {
@@ -1187,29 +1198,33 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     key: "onFocus",
     value: function onFocus() {
       var _this21 = this;
-      var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref$autoHide = _ref.autoHide, autoHide = _ref$autoHide === void 0 ? !this.config.closePlayerBlur : _ref$autoHide, _ref$delay = _ref.delay, delay = _ref$delay === void 0 ? this.config.inactive : _ref$delay;
+      var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        autoHide: true,
+        delay: 3e3
+      };
       this.isActive = true;
       this.removeClass(STATE_CLASS.INACTIVE);
       if (this.userTimer) {
         util.clearTimeout(this, this.userTimer);
         this.userTimer = null;
       }
-      if (!autoHide) {
+      if (data.autoHide === false || data.isLock === true) {
         if (this.userTimer) {
           util.clearTimeout(this, this.userTimer);
           this.userTimer = null;
         }
         return;
       }
+      var time = data.delay || this.config.inactive;
       this.userTimer = util.setTimeout(this, function() {
         _this21.userTimer = null;
         _this21.blur();
-      }, delay);
+      }, time);
     }
   }, {
     key: "onBlur",
     value: function onBlur() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref2$ignorePaused = _ref2.ignorePaused, ignorePaused = _ref2$ignorePaused === void 0 ? false : _ref2$ignorePaused;
+      var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref$ignorePaused = _ref.ignorePaused, ignorePaused = _ref$ignorePaused === void 0 ? false : _ref$ignorePaused;
       if (!this.isActive) {
         return;
       }
@@ -1333,7 +1348,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "onTimeupdate",
     value: function onTimeupdate() {
-      !this._videoHeight && this.resize();
+      !this._videoHeight && this.media.videoHeight && this.resize();
       if ((this.waitTimer || this.hasClass(STATE_CLASS.LOADING)) && this.media.readyState > 2) {
         this.removeClass(STATE_CLASS.LOADING);
         util.clearTimeout(this, this.waitTimer);
@@ -1408,8 +1423,11 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     key: "resizePosition",
     value: function resizePosition() {
       var _this$videoPos = this.videoPos, rotate = _this$videoPos.rotate, vy = _this$videoPos.vy, vx = _this$videoPos.vx, h = _this$videoPos.h, w = _this$videoPos.w;
+      if (!rotate && !vy && !vx) {
+        return;
+      }
       var _pi = this.videoPos._pi;
-      if (!_pi) {
+      if (!_pi && this.media.videoHeight) {
         _pi = this.media.videoWidth / this.media.videoHeight * 100;
       }
       if (!_pi) {
@@ -1509,9 +1527,14 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       if (!this.media) {
         return;
       }
+      var containerSize = this.root.getBoundingClientRect();
+      this.sizeInfo.width = containerSize.width;
+      this.sizeInfo.height = containerSize.height;
+      this.sizeInfo.left = containerSize.left;
+      this.sizeInfo.top = containerSize.top;
       var _this$media = this.media, videoWidth = _this$media.videoWidth, videoHeight = _this$media.videoHeight;
       var _this$config6 = this.config, fitVideoSize = _this$config6.fitVideoSize, videoFillMode = _this$config6.videoFillMode;
-      if (videoFillMode === "fill" || videoFillMode === "cover") {
+      if (videoFillMode === "fill" || videoFillMode === "cover" || videoFillMode === "contain") {
         this.setAttribute("data-xgfill", videoFillMode);
       }
       if (!videoHeight || !videoWidth) {
@@ -1519,7 +1542,6 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       this._videoHeight = videoHeight;
       this._videoWidth = videoWidth;
-      var containerSize = this.root.getBoundingClientRect();
       var controlsHeight = this.controls && this.innerContainer ? this.controls.root.getBoundingClientRect().height : 0;
       var width = containerSize.width;
       var height = containerSize.height - controlsHeight;

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

@@ -42,7 +42,7 @@ declare class Controls extends Plugin {
      */
     readonly innerRoot: HTMLElement;
     onMouseEnter: (e: any) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (e: any) => void;
     focus(): void;
     focusAwhile(): void;
     blur(): void;

package/es/plugins/controls/index.js

@@ -21,7 +21,7 @@ var Controls = /* @__PURE__ */ function(_Plugin) {
         autoHide: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function() {
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function(e) {
       var _assertThisInitialize2 = _assertThisInitialized(_this), player = _assertThisInitialize2.player;
       player.focus();
     });
@@ -99,12 +99,13 @@ var Controls = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "show",
     value: function show() {
-      util.addClass(this.root, "show");
+      this.root.style.display = "";
+      this.player.focus();
     }
   }, {
     key: "hide",
     value: function hide() {
-      util.removeClass(this.root, "show");
+      this.root.style.display = "none";
     }
   }, {
     key: "mode",

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

@@ -8,6 +8,7 @@ export type IKeyboardConfig = {
         [propName: string]: any;
     };
     disable: boolean;
+    playbackRate: number;
     isIgnoreUserActive: boolean;
 };
 declare class Keyboard extends BasePlugin {
@@ -22,47 +23,66 @@ declare class Keyboard extends BasePlugin {
             keyCode: number;
             action: string;
             disable: boolean;
+            disablePress: boolean;
             noBodyTarget: boolean;
         };
         up: {
             keyCode: number;
             action: string;
             disable: boolean;
+            disablePress: boolean;
             noBodyTarget: boolean;
         };
         down: {
             keyCode: number;
             action: string;
             disable: boolean;
+            disablePress: boolean;
             noBodyTarget: boolean;
         };
         left: {
             keyCode: number;
             action: string;
+            disablePress: boolean;
             disable: boolean;
         };
         right: {
             keyCode: number;
             action: string;
+            pressAction: string;
+            disablePress: boolean;
             disable: boolean;
         };
         esc: {
             keyCode: number;
             action: string;
+            disablePress: boolean;
             disable: boolean;
         };
     };
+    _keyState: {
+        isKeyDown: boolean;
+        isBodyKeyDown: boolean;
+        isPress: boolean;
+        tt: number;
+        playbackRate: number;
+    };
     checkIsVisible(): boolean;
     checkCode(code: any, isBodyTarget: any): boolean;
     downVolume(event: any): void;
     upVolume(event: any): void;
     seek(event: any): void;
     seekBack(event: any): void;
+    changePlaybackRate(event: any): void;
     playPause(event: any): void;
     exitFullscreen(event: any): void;
-    onBodyKeyDown: (event: any) => boolean;
-    onKeydown: (event: any) => boolean;
-    handleKeyCode(curKeyCode: any, event: any): void;
+    onBodyKeyDown: (event: any) => void;
+    onBodyKeyUp: (event: any) => void;
+    onKeydown: (event: any) => void;
+    onKeyup: (event: any) => void;
+    handleKeyDown(e: any): void;
+    handleKeyUp(e: any): void;
+    handleKeyCode(curKeyCode: any, event: any, isPress: any): void;
     disable(): void;
     enable(): void;
 }