rx-player 3.25.2 → 3.26.3-dev.2022021400

package/src/compat/eme/load_session.ts

@@ -16,16 +16,14 @@
 
 import {
   defer as observableDefer,
+  map,
+  mergeMap,
   Observable,
   of as observableOf,
   race as observableRace,
+  take,
   timer as observableTimer,
 } from "rxjs";
-import {
-  mapTo,
-  mergeMap,
-  take,
-} from "rxjs/operators";
 import log from "../../log";
 import castToObservable from "../../utils/cast_to_observable";
 import tryCatch from "../../utils/rx-try_catch";
@@ -68,6 +66,6 @@ export default function loadSession(
     return observableRace(
       observableTimer(EME_WAITING_DELAY_LOADED_SESSION_EMPTY_KEYSTATUSES),
       onKeyStatusesChange$(session)
-    ).pipe(take(1), mapTo(isLoaded));
+    ).pipe(take(1), map(() => isLoaded));
   }));
 }

package/src/compat/event_listeners.ts

@@ -20,31 +20,28 @@
  */
 
 import {
+  NEVER,
+  Observable,
   combineLatest as observableCombineLatest,
   defer as observableDefer,
+  delay,
+  distinctUntilChanged,
   fromEvent as observableFromEvent,
   interval as observableInterval,
+  map,
   merge as observableMerge,
-  NEVER,
-  Observable,
   of as observableOf,
-} from "rxjs";
-import {
-  delay,
-  distinctUntilChanged,
-  map,
-  mapTo,
   startWith,
   switchMap,
   throttleTime,
-} from "rxjs/operators";
+} from "rxjs";
 import config from "../config";
 import log from "../log";
 import { IEventEmitter } from "../utils/event_emitter";
 import isNonEmptyString from "../utils/is_non_empty_string";
 import {
-  HTMLElement_,
   ICompatDocument,
+  ICompatHTMLMediaElement,
   ICompatPictureInPictureWindow,
 } from "./browser_compatibility_types";
 import isNode from "./is_node";
@@ -74,8 +71,9 @@ function isEventSupported(
     return true;
   } else {
     clone.setAttribute(eventName, "return;");
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    return typeof (clone as any)[eventName] === "function";
+    return typeof (
+      clone as HTMLElement & Partial<Record<string, unknown>>
+    )[eventName] === "function";
   }
 }
 
@@ -112,7 +110,7 @@ export interface IEventEmitterLike {
 
 export type IEventTargetLike = HTMLElement |
                                IEventEmitterLike |
-                               IEventEmitter<any>;
+                               IEventEmitter<unknown>;
 
 /**
  * @param {Array.<string>} eventNames
@@ -128,7 +126,7 @@ function compatibleListener<T extends Event>(
   return (element : IEventTargetLike) => {
     // if the element is a HTMLElement we can detect
     // the supported event, and memoize it in `mem`
-    if (element instanceof HTMLElement_) {
+    if (element instanceof HTMLElement) {
       if (typeof mem === "undefined") {
         mem = findSupportedEvent(element, prefixedEvents);
       }
@@ -136,7 +134,7 @@ function compatibleListener<T extends Event>(
       if (isNonEmptyString(mem)) {
         return observableFromEvent(element, mem) as Observable<T>;
       } else {
-        if (__DEV__) {
+        if (__ENVIRONMENT__.CURRENT_ENV === __ENVIRONMENT__.DEV as number) {
           log.warn(`compat: element ${element.tagName}` +
                    " does not support any of these events: " +
                    prefixedEvents.join(", "));
@@ -187,20 +185,13 @@ function visibilityChange() : Observable<boolean> {
   });
 }
 
-/**
- * @returns {Observable}
- */
-function videoSizeChange() : Observable<unknown> {
-  return observableFromEvent(window, "resize");
-}
-
 /**
  * Emit `true` if the page is considered active.
  * `false` when considered inactive.
  * Emit the original value on subscription.
  * @returns {Observable}
  */
-function isActive() : Observable<boolean> {
+function isPageActive() : Observable<boolean> {
   return visibilityChange().pipe(
     switchMap((x) => {
       if (!x) {
@@ -240,44 +231,38 @@ export interface IPictureInPictureEvent {
  * @returns {Observable}
  */
 function onPictureInPictureEvent$(
-  mediaElement: HTMLMediaElement
+  elt: HTMLMediaElement
 ): Observable<IPictureInPictureEvent> {
   return observableDefer(() => {
-    /* eslint-disable @typescript-eslint/strict-boolean-expressions */
-    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-    if ((mediaElement as any).webkitSupportsPresentationMode &&
-        typeof (mediaElement as any).webkitSetPresentationMode === "function")
+    const mediaElement = elt as ICompatHTMLMediaElement;
+    if (mediaElement.webkitSupportsPresentationMode === true &&
+        typeof mediaElement.webkitSetPresentationMode === "function")
     {
       const isWebKitPIPEnabled =
-        (mediaElement as any).webkitPresentationMode === "picture-in-picture";
+        mediaElement.webkitPresentationMode === "picture-in-picture";
       return observableFromEvent(mediaElement, "webkitpresentationmodechanged").pipe(
         map(() => ({
-          isEnabled: (mediaElement as any)
-            .webkitPresentationMode === "picture-in-picture",
+          isEnabled: mediaElement.webkitPresentationMode === "picture-in-picture",
           pipWindow: null,
         })),
         startWith({ isEnabled: isWebKitPIPEnabled, pipWindow: null }));
     }
 
-    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
     const isPIPEnabled = (
-      (document as any).pictureInPictureElement &&
-      (document as any).pictureInPictureElement === mediaElement
+      (document as ICompatDocument).pictureInPictureElement === mediaElement
     );
     const initialState = { isEnabled: isPIPEnabled, pipWindow: null };
-    /* eslint-enable @typescript-eslint/no-unsafe-assignment */
     return observableMerge(
       observableFromEvent(mediaElement, "enterpictureinpicture")
-        .pipe(map((evt: any) => ({
+        .pipe(map((evt) => ({
           isEnabled: true,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          pipWindow: evt.pictureInPictureWindow,
+          pipWindow: (evt as Event & {
+            pictureInPictureWindow? : ICompatPictureInPictureWindow;
+          }).pictureInPictureWindow ?? null,
         }))),
       observableFromEvent(mediaElement, "leavepictureinpicture")
-        .pipe(mapTo({ isEnabled: false, pipWindow: null }))
+        .pipe(map(() => ({ isEnabled: false, pipWindow: null })))
     ).pipe(startWith(initialState));
-    /* eslint-enable @typescript-eslint/strict-boolean-expressions */
-    /* eslint-enable @typescript-eslint/no-unsafe-member-access */
   });
 }
 
@@ -306,6 +291,7 @@ function isVideoVisible(
  * Get video width from HTML video element, or video estimated dimensions
  * when Picture-in-Picture is activated.
  * @param {HTMLMediaElement} mediaElement
+ * @param {Observable} pip$
  * @returns {Observable}
  */
 function videoWidth$(
@@ -315,7 +301,7 @@ function videoWidth$(
   return observableCombineLatest([
     pip$,
     observableInterval(20000).pipe(startWith(null)),
-    videoSizeChange().pipe(throttleTime(500), startWith(null)),
+    observableFromEvent(window, "resize").pipe(throttleTime(500), startWith(null)),
   ]).pipe(
     switchMap(([ pip ]) : Observable<number> => {
       if (!pip.isEnabled) {
@@ -323,9 +309,7 @@ function videoWidth$(
       } else if (pip.pipWindow != null) {
         const { pipWindow } = pip;
         const firstWidth = getVideoWidthFromPIPWindow(mediaElement, pipWindow);
-
-        // RxJS typing issue (for the "as any")
-        return observableFromEvent(pipWindow as any, "resize").pipe(
+        return observableFromEvent(pipWindow, "resize").pipe(
           startWith(firstWidth * pixelRatio),
           map(() => getVideoWidthFromPIPWindow(mediaElement, pipWindow) * pixelRatio)
         );
@@ -458,7 +442,7 @@ const onKeyError$ = compatibleListener(["keyerror", "error"]);
 const onKeyStatusesChange$ = compatibleListener(["keystatuseschange"]);
 
 export {
-  isActive,
+  isPageActive,
   isVideoVisible,
   videoWidth$,
   onPlayPause$,

package/src/compat/fullscreen.ts

@@ -38,10 +38,8 @@ function requestFullscreen(element : HTMLMediaElement) : void {
       elt.mozRequestFullScreen();
     } else if (typeof elt.webkitRequestFullscreen === "function") {
       (
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        elt.webkitRequestFullscreen as any
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      )((Element as any).ALLOW_KEYBOARD_INPUT);
+        elt.webkitRequestFullscreen as (allowKeybordInput? : boolean) => void
+      )((Element as { ALLOW_KEYBOARD_INPUT? : boolean }).ALLOW_KEYBOARD_INPUT);
     }
   }
 }

package/src/compat/index.ts

@@ -20,7 +20,6 @@ import {
   ICompatTextTrack,
   ICompatVTTCue,
   MediaSource_,
-  VTTCue_,
 } from "./browser_compatibility_types";
 import canPatchISOBMFFSegment from "./can_patch_isobmff";
 import tryToChangeSourceBufferType, {
@@ -49,12 +48,11 @@ import hasEMEAPIs from "./has_eme_apis";
 import isCodecSupported from "./is_codec_supported";
 import isNode from "./is_node";
 import isOffline from "./is_offline";
-import isPlaybackStuck from "./is_playback_stuck";
 import isVTTCue from "./is_vtt_cue";
 import makeVTTCue from "./make_vtt_cue";
 import onHeightWidthChange from "./on_height_width_change";
 import patchWebkitSourceBuffer from "./patch_webkit_source_buffer";
-import play$ from "./play";
+import play from "./play";
 import setElementSrc$ from "./set_element_src";
 // eslint-disable-next-line max-len
 import shouldReloadMediaSourceOnDecipherabilityUpdate from "./should_reload_media_source_on_decipherability_update";
@@ -92,13 +90,12 @@ export {
   isFullscreen,
   isNode,
   isOffline,
-  isPlaybackStuck,
   isVTTCue,
   loadSession,
   makeVTTCue,
   MediaSource_,
   onHeightWidthChange,
-  play$,
+  play,
   requestFullscreen,
   requestMediaKeySystemAccess,
   setElementSrc$,
@@ -109,7 +106,6 @@ export {
   shouldValidateMetadata,
   shouldWaitForDataBeforeLoaded,
   tryToChangeSourceBufferType,
-  VTTCue_,
   whenLoadedMetadata$,
   whenMediaSourceOpen$,
 };

package/src/compat/is_vtt_cue.ts

@@ -25,7 +25,6 @@ export default function isVTTCue(
   cue : ICompatVTTCue|TextTrackCue
 ) : cue is ICompatVTTCue {
   /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-  return typeof (window as any).VTTCue === "function" &&
-         cue instanceof (window as any).VTTCue;
+  return typeof window.VTTCue === "function" && cue instanceof window.VTTCue;
   /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 }

package/src/compat/make_vtt_cue.ts

@@ -15,10 +15,8 @@
  */
 
 import log from "../log";
-import {
-  ICompatVTTCue,
-  VTTCue_,
-} from "./browser_compatibility_types";
+import isNullOrUndefined from "../utils/is_null_or_undefined";
+import { ICompatVTTCue } from "./browser_compatibility_types";
 
 /**
  * Creates a cue using the best platform-specific interface available.
@@ -34,9 +32,6 @@ export default function makeCue(
   endTime : number,
   payload : string
 ) : ICompatVTTCue|TextTrackCue|null {
-  if (VTTCue_ == null) {
-    throw new Error("VTT cues not supported in your target");
-  }
   if (startTime >= endTime) {
 
     // IE/Edge will throw in this case.
@@ -45,5 +40,12 @@ export default function makeCue(
     return null;
   }
 
-  return new VTTCue_(startTime, endTime, payload);
+  if (isNullOrUndefined(window.VTTCue)) {
+    if (isNullOrUndefined(window.TextTrackCue)) {
+      throw new Error("VTT cues not supported in your target");
+    }
+    return new (TextTrackCue as unknown as typeof VTTCue)(startTime, endTime, payload);
+  } else {
+    return new VTTCue(startTime, endTime, payload);
+  }
 }

package/src/compat/on_height_width_change.ts

@@ -16,15 +16,13 @@
 
 import {
   defer as observableDefer,
+  distinctUntilChanged,
   interval as observableInterval,
+  map,
   Observable,
   Observer,
-} from "rxjs";
-import {
-  distinctUntilChanged,
-  map,
   startWith,
-} from "rxjs/operators";
+} from "rxjs";
 import log from "../log";
 import isNode from "./is_node";
 
@@ -60,7 +58,7 @@ interface IDOMRectReadOnly { readonly x: number;
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 const _ResizeObserver : IResizeObserverConstructor |
                         undefined = isNode ? undefined :
-                                            (window as any).ResizeObserver;
+                                             window.ResizeObserver;
 /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 /* eslint-enable @typescript-eslint/no-unsafe-assignment */
 

package/src/compat/patch_webkit_source_buffer.ts

@@ -28,19 +28,25 @@ interface IWebKitSourceBuffer { append(data : ArrayBuffer) : void;
 export default function patchWebkitSourceBuffer() : void {
   /* eslint-disable @typescript-eslint/no-unsafe-member-access */
   /* eslint-disable @typescript-eslint/no-unsafe-call */
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   // old WebKit SourceBuffer implementation,
   // where a synchronous append is used instead of appendBuffer
-  if (!isNode && (window as any).WebKitSourceBuffer != null &&
-      (window as any).WebKitSourceBuffer.prototype.addEventListener === undefined)
+  if (
+    !isNode && (window as any).WebKitSourceBuffer != null &&
+    (window as any).WebKitSourceBuffer.prototype.addEventListener === undefined)
   {
+  /* eslint-enable @typescript-eslint/no-explicit-any */
 
     /* eslint-disable @typescript-eslint/no-unsafe-assignment */
     const sourceBufferWebkitRef : IWebKitSourceBufferConstructor =
-      (window as any).WebKitSourceBuffer;
+      (window as unknown as {
+        WebKitSourceBuffer : IWebKitSourceBufferConstructor;
+      }).WebKitSourceBuffer;
     const sourceBufferWebkitProto = sourceBufferWebkitRef.prototype;
 
     for (const fnName in EventEmitter.prototype) {
       if (EventEmitter.prototype.hasOwnProperty(fnName)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         sourceBufferWebkitProto[fnName] = (EventEmitter.prototype as any)[fnName];
       }
     }
@@ -49,7 +55,7 @@ export default function patchWebkitSourceBuffer() : void {
     sourceBufferWebkitProto._listeners = [];
 
     sourceBufferWebkitProto._emitUpdate =
-      function(eventName : string, val : any) {
+      function(eventName : string, val : unknown) {
         nextTick(() => {
           /* eslint-disable no-invalid-this */
           this.trigger(eventName, val);
@@ -60,7 +66,7 @@ export default function patchWebkitSourceBuffer() : void {
       };
 
     sourceBufferWebkitProto.appendBuffer =
-      function(data : any) {
+      function(data : unknown) {
         /* eslint-disable no-invalid-this */
         // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         if (this.updating) {

package/src/compat/play.ts

@@ -27,7 +27,7 @@ import tryCatch from "../utils/rx-try_catch";
  * @param {HTMLMediaElement} mediaElement
  * @returns {Observable}
  */
-export default function play$(mediaElement : HTMLMediaElement) : Observable<unknown> {
+export default function play(mediaElement : HTMLMediaElement) : Observable<unknown> {
   return observableDefer(() =>
     // mediaElement.play is not always a Promise. In the improbable case it
     // throws, I prefer still to catch to return the error wrapped in an

package/src/compat/set_element_src.ts

@@ -35,7 +35,7 @@ export default function setElementSrc$(
   url : string
 ) : Observable<void> {
   return new Observable((observer : Observer<void>) => {
-    log.info("Setting URL to Element", url, mediaElement);
+    log.info("Setting URL to HTMLMediaElement", url);
 
     mediaElement.src = url;
 

package/src/compat/when_loaded_metadata.ts

@@ -17,8 +17,8 @@
 import {
   Observable,
   of as observableOf,
+  take,
 } from "rxjs";
-import { take } from "rxjs/operators";
 import { READY_STATES } from "./browser_compatibility_types";
 import { onLoadedMetadata$ } from "./event_listeners";
 

package/src/compat/when_media_source_open.ts

@@ -17,8 +17,8 @@
 import {
   Observable,
   of as observableOf,
+  take,
 } from "rxjs";
-import { take } from "rxjs/operators";
 import { onSourceOpen$ } from "./event_listeners";
 
 /**

package/src/config.ts

@@ -323,7 +323,7 @@ export default {
    */
   DEFAULT_LIVE_GAP: {
     DEFAULT: 10,
-    LOW_LATENCY: 3,
+    LOW_LATENCY: 3.5,
   },
 
   /**
@@ -457,17 +457,12 @@ export default {
   },
 
   /**
-   * Minimum interval at which timeupdate events will be "constructed". This
+   * Minimum interval at which playback information samples will be taken. This
    * variable is for the "regular" mediasource strategy (that is, not for the
    * directfile API.
    *
-   * Those events are the base of various important mechanisms in the player:
-   *   - set the clock used to regularly check which segments should be loaded
-   *   - set the clock for the ABR strategy.
-   *   - used to trigger positionUpdate events.
-   *
-   * This common logic is for performance reasons, as we call multiple browser's
-   * APIs which are useful for most of these.
+   * At each of these interval, various different modules in the RxPlayer will
+   * run based on the information communicated.
    *
    * Keep in mind this is the minimum interval. This logic will also be
    * triggered when various events of the media element are received.
@@ -600,7 +595,7 @@ export default {
 
   /**
    * Number of seconds ahead in the buffer after which playback will resume when
-   * the player was stalled due to a low readyState.
+   * the player was rebuffering due to a low readyState.
    * @type {Number}
    */
   RESUME_GAP_AFTER_NOT_ENOUGH_DATA: {
@@ -619,18 +614,66 @@ export default {
   },
 
   /**
-   * Maximum number of seconds in the buffer based on which a "stalling"
+   * Maximum number of seconds in the buffer based on which a "rebuffering"
    * strategy will be considered:
    * The player will pause playback to get enough time building a sufficient
-   * buffer. This mostly happen when seeking in an unbuffered part or when
-   * buffering.
+   * buffer. This mostly happen when seeking in an unbuffered part or when not
+   * enough buffer is ahead of the current position.
    * @type {Number}
    */
-  STALL_GAP: {
+  REBUFFERING_GAP: {
     DEFAULT: 0.5,
     LOW_LATENCY: 0.2,
   },
 
+  /**
+   * Amount of time (in seconds) with data ahead of the current position, at
+   * which we always consider the browser to be able to play.
+   *
+   * If the media element has this amount of data in advance or more but
+   * playback cannot begin, the player will consider it "freezing".
+   */
+  MINIMUM_BUFFER_AMOUNT_BEFORE_FREEZING: 2,
+
+  /**
+   * A media whose position inexplicably does not increment despite playing is
+   * called as "freezing" in the RxPlayer.
+   *
+   * If the media is still "freezing" after waiting for `UNFREEZING_SEEK_DELAY`
+   * milliseconds, the RxPlayer will try to un-freeze the situation by interacting
+   * with the media element.
+   *
+   * Those interactions can be costly in time before playback continue, so it
+   * should be set at a sufficiently high value to avoid false positives.
+   */
+  UNFREEZING_SEEK_DELAY: 6000,
+
+  /**
+   * A media whose position inexplicably does not increment despite playing is
+   * called as "freezing" in the RxPlayer.
+   *
+   * A small freezing interval may be normal as the browser may take time before
+   * playing, e.g. after a seek.
+   *
+   * If the media is still "freezing" after waiting for `FREEZING_STALLED_DELAY`
+   * milliseconds, the RxPlayer will emit a BUFFERING state through its API to
+   * notify that the player cannot currently advance.
+   */
+  FREEZING_STALLED_DELAY: 600,
+
+  /**
+   * A media whose position inexplicably does not increment despite playing is
+   * called as "freezing" in the RxPlayer.
+   *
+   * If the media is frozen for a sufficiently large time
+   * (@see UNFREEZING_SEEK_DELAY), the RxPlayer will perform a seek corresponding
+   * to its current position plus `UNFREEZING_DELTA_POSITION` seconds.
+   *
+   * This should be kept short enough as the goal is just to un-freeze lower-level
+   * buffers.
+   */
+  UNFREEZING_DELTA_POSITION: 0.001,
+
   /**
    * Maximum authorized difference between what we calculated to be the
    * beginning or end of the segment in a media buffer and what we
@@ -1157,4 +1200,26 @@ export default {
    * and not significant from the media loss perspective.
    */
   DEFAULT_MAXIMUM_TIME_ROUNDING_ERROR: 1 / 1000,
+
+  /**
+   * RxPlayer's media buffers have a linked history registering recent events
+   * that happened on those.
+   * The reason is to implement various heuristics in case of weird browser
+   * behavior.
+   *
+   * The `BUFFERED_HISTORY_RETENTION_TIME` is the minimum age an entry of
+   * that history can have before being removed from the history.
+   */
+  BUFFERED_HISTORY_RETENTION_TIME: 60000,
+
+  /**
+   * RxPlayer's media buffers have a linked history registering recent events
+   * that happened on those.
+   * The reason is to implement various heuristics in case of weird browser
+   * behavior.
+   *
+   * The `BUFFERED_HISTORY_RETENTION_TIME` is the maximum number of entries
+   * there can be in that history.
+   */
+  BUFFERED_HISTORY_MAXIMUM_ENTRIES: 200,
 };

package/src/core/abr/README.md

@@ -20,13 +20,13 @@ be the most adapted, that is the quality which:
     be not as pleasant to watch)
 
 In order to estimate the quality that maximizes the playback experience, the ABR
-relies on two "estimators":
-  1. The bandwidth estimator picks a quality from network conditions.
-  2. The buffer based chooser relies on buffering conditions to make its
-     choices.
+relies on multiple algorithms:
+  1. One which picks a quality from network conditions.
+  2. Another relies on buffering conditions to make its choices.
+  3. A third, only used in very rare conditions, "guess" the right quality by
+     progressively raising the quality until an un-maintainable one is found.
 
-
-## Bandwidth estimator #########################################################
+## Bandwidth-based algorithm ###################################################
 
 ```
                  Long
@@ -85,7 +85,7 @@ The quality's bitrate ceiling relies on it to return the chosen quality.
 
 
 
-## Buffer based estimator ######################################################
+## Buffer-based algorithm ######################################################
 
 ```
                               Qualities