rx-player 3.25.2 → 3.26.3-dev.2022021400

package/src/core/init/duration_updater.ts

@@ -15,28 +15,25 @@
  */
 
 import {
+  catchError,
   combineLatest as observableCombineLatest,
   defer as observableDefer,
+  distinctUntilChanged,
   EMPTY,
+  filter,
   fromEvent as observableFromEvent,
+  ignoreElements,
   interval as observableInterval,
+  map,
   merge as observableMerge,
+  mergeMap,
   Observable,
   of as observableOf,
-} from "rxjs";
-import {
-  catchError,
-  distinctUntilChanged,
-  filter,
-  ignoreElements,
-  map,
-  mapTo,
-  mergeMap,
   startWith,
   switchMap,
   take,
   tap,
-} from "rxjs/operators";
+} from "rxjs";
 import {
   onSourceOpen$,
   onSourceClose$,
@@ -64,7 +61,7 @@ export default function DurationUpdater(
 ) : Observable<never> {
   return observableDefer(() => {
     let lastDurationUpdate: number | undefined;
-    return setMediaSourceDuration(mediaSource, manifest, undefined).pipe(
+    return setMediaSourceDuration(mediaSource, manifest).pipe(
       mergeMap((initialDurationUpdate) => {
         // only update `lastDurationUpdate` if the MediaSource's duration has
         // been updated.
@@ -83,6 +80,11 @@ export default function DurationUpdater(
           })
         );
       }),
+      // NOTE As of now (RxJS 7.4.0), RxJS defines `ignoreElements` default
+      // first type parameter as `any` instead of the perfectly fine `unknown`,
+      // leading to linter issues, as it forbids the usage of `any`.
+      // This is why we're disabling the eslint rule.
+      /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */
       ignoreElements()
     );
   });
@@ -170,9 +172,9 @@ function whenSourceBuffersEndedUpdates$(
     const sourceBuffer = sourceBuffers[i];
     sourceBufferUpdatingStatuses.push(
       observableMerge(
-        observableFromEvent(sourceBuffer, "updatestart").pipe(mapTo(true)),
-        observableFromEvent(sourceBuffer, "update").pipe(mapTo(false)),
-        observableInterval(500).pipe(mapTo(sourceBuffer.updating))
+        observableFromEvent(sourceBuffer, "updatestart").pipe(map(() => true)),
+        observableFromEvent(sourceBuffer, "update").pipe(map(() => false)),
+        observableInterval(500).pipe(map(() => sourceBuffer.updating))
       ).pipe(
         startWith(sourceBuffer.updating),
         distinctUntilChanged()
@@ -183,7 +185,7 @@ function whenSourceBuffersEndedUpdates$(
     filter((areUpdating) => {
       return areUpdating.every((isUpdating) => !isUpdating);
     }),
-    mapTo(undefined)
+    map(() => undefined)
   );
 }
 
@@ -193,11 +195,12 @@ function whenSourceBuffersEndedUpdates$(
  * @returns {Object}
  */
 function isMediaSourceOpened$(mediaSource: MediaSource): Observable<boolean> {
-  return observableMerge(onSourceOpen$(mediaSource).pipe(mapTo(true)),
-                         onSourceEnded$(mediaSource).pipe(mapTo(false)),
-                         onSourceClose$(mediaSource).pipe(mapTo(false))
+  return observableMerge(onSourceOpen$(mediaSource).pipe(map(() => true)),
+                         onSourceEnded$(mediaSource).pipe(map(() => false)),
+                         onSourceClose$(mediaSource).pipe(map(() => false))
   ).pipe(
     startWith(mediaSource.readyState === "open"),
     distinctUntilChanged()
   );
 }
+/* eslint-enable @typescript-eslint/no-unsafe-argument */

package/src/core/init/emit_loaded_event.ts

@@ -0,0 +1,71 @@
+
+/**
+ * Copyright 2015 CANAL+ Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Observable,
+  take,
+} from "rxjs";
+import {
+  shouldValidateMetadata,
+  shouldWaitForDataBeforeLoaded,
+} from "../../compat";
+import filterMap from "../../utils/filter_map";
+import { IPlaybackObservation } from "../api";
+import SegmentBuffersStore from "../segment_buffers";
+import EVENTS from "./events_generators";
+import { ILoadedEvent } from "./types";
+
+/**
+ * Emit a `ILoadedEvent` once the content can be considered as loaded.
+ * @param {Observable} observation$
+ * @param {HTMLMediaElement} mediaElement
+ * @param {Object|null} segmentBuffersStore
+ * @param {boolean} isDirectfile - `true` if this is a directfile content
+ * @returns {Observable}
+ */
+export default function emitLoadedEvent(
+  observation$ : Observable<IPlaybackObservation>,
+  mediaElement : HTMLMediaElement,
+  segmentBuffersStore : SegmentBuffersStore | null,
+  isDirectfile : boolean
+) : Observable<ILoadedEvent> {
+  return observation$.pipe(
+    filterMap<IPlaybackObservation, ILoadedEvent, null>((observation) => {
+      if (observation.rebuffering !== null ||
+          observation.freezing !== null ||
+          observation.readyState === 0)
+      {
+        return null;
+      }
+
+      if (!shouldWaitForDataBeforeLoaded(isDirectfile,
+                                         mediaElement.hasAttribute("playsinline")))
+      {
+        return mediaElement.duration > 0 ? EVENTS.loaded(segmentBuffersStore) :
+                                           null;
+      }
+
+      if (observation.readyState >= 3 && observation.currentRange !== null) {
+        if (!shouldValidateMetadata() || mediaElement.duration > 0) {
+          return EVENTS.loaded(segmentBuffersStore);
+        }
+        return null;
+      }
+      return null;
+    }, null),
+    take(1));
+}

package/src/core/init/end_of_stream.ts

@@ -17,17 +17,15 @@
 import {
   defer as observableDefer,
   merge as observableMerge,
+  mergeMap,
   Observable,
   of as observableOf,
   race as observableRace,
-} from "rxjs";
-import {
-  mergeMap,
   startWith,
   switchMap,
   take,
   takeLast,
-} from "rxjs/operators";
+} from "rxjs";
 import { events } from "../../compat";
 import log from "../../log";
 

package/src/core/init/events_generators.ts

@@ -20,7 +20,6 @@ import Manifest, {
   Period,
   Representation,
 } from "../../manifest";
-import { IStalledStatus } from "../api";
 import SegmentBuffersStore, {
   IBufferType,
 } from "../segment_buffers";
@@ -32,6 +31,7 @@ import {
   IManifestUpdateEvent,
   IReloadingMediaSourceEvent,
   IStalledEvent,
+  IStallingSituation,
   IUnstalledEvent,
   IWarningEvent,
 } from "./types";
@@ -46,16 +46,15 @@ function loaded(segmentBuffersStore : SegmentBuffersStore | null) : ILoadedEvent
 
 /**
  * Construct a "stalled" event.
- * @param {Object|null} stalling
+ * @param {Object|null} rebuffering
  * @returns {Object}
  */
-function stalled(stalling : IStalledStatus) : IStalledEvent {
-  return { type: "stalled", value: stalling };
+function stalled(rebuffering : IStallingSituation) : IStalledEvent {
+  return { type: "stalled", value: rebuffering };
 }
 
 /**
  * Construct a "stalled" event.
- * @param {Object|null} stalling
  * @returns {Object}
  */
 function unstalled() : IUnstalledEvent {

package/src/core/init/get_initial_time.ts

@@ -44,7 +44,6 @@ export default function getInitialTime(
   lowLatencyMode : boolean,
   startAt? : IInitialTimeOptions
 ) : number {
-  log.debug("Init: calculating initial time");
   if (startAt != null) {
     const min = manifest.getMinimumPosition();
     const max = manifest.getMaximumPosition();

package/src/core/init/initial_seek_and_play.ts

@@ -14,78 +14,71 @@
  * limitations under the License.
  */
 
-import {
-  concat as observableConcat,
-  Observable,
-  of as observableOf,
-} from "rxjs";
 import {
   catchError,
+  concat as observableConcat,
   filter,
-  mapTo,
+  map,
   mergeMap,
+  Observable,
+  of as observableOf,
   shareReplay,
+  startWith,
   take,
   tap,
-} from "rxjs/operators";
+} from "rxjs";
 import {
-  play$,
+  play,
   shouldValidateMetadata,
-  shouldWaitForDataBeforeLoaded,
   whenLoadedMetadata$,
 } from "../../compat";
+import { MediaError } from "../../errors";
 import log from "../../log";
-import { IInitClockTick } from "./types";
+import {
+  createSharedReference,
+  IReadOnlySharedReference,
+} from "../../utils/reference";
+import {
+  IPlaybackObservation,
+  PlaybackObserver,
+} from "../api";
+import EVENTS from "./events_generators";
+import { IWarningEvent } from "./types";
 
-export type ILoadEvents =
-  "not-loaded-metadata" | // metadata are not loaded. Manual action required
-  "autoplay-blocked" | // loaded but autoplay is blocked by the browser
-  "autoplay" | // loaded and autoplayed succesfully
-  "loaded"; // loaded without autoplay enabled
+/** Event emitted when trying to perform the initial `play`. */
+export type IInitialPlayEvent =
+  /** Autoplay is not enabled, but all required steps to do so are there. */
+  { type: "skipped" } |
+  /**
+   * Tried to play, but autoplay is blocked by the browser.
+   * A corresponding warning should have already been sent.
+   */
+  { type: "autoplay-blocked" } |
+  /** Autoplay was done with success. */
+  { type: "autoplay" } |
+  /** Warnings preventing the initial play from happening normally. */
+  IWarningEvent;
 
 /**
- * Emit once a "can-play" message as soon as the clock$ announce that the content
- * can begin to be played.
+ * Emit once as soon as the playback observation announces that the content can
+ * begin to be played by calling the `play` method.
  *
- * Warn you if the metadata is not yet loaded metadata by emitting a
- * "not-loaded-metadata" message first.
- * @param {Observable} clock$
- * @returns {Observable}
+ * This depends on browser-defined criteria (e.g. the readyState status) as well
+ * as RxPlayer-defined ones (e.g.) not rebuffering.
+ *
+ * @param {Observable} observation$
+ * @returns {Observable.<undefined>}
  */
-function canPlay(
-  clock$ : Observable<IInitClockTick>,
-  mediaElement : HTMLMediaElement,
-  isDirectfile : boolean
-) : Observable<"can-play"|"not-loaded-metadata"> {
-  const isLoaded$ = clock$.pipe(
-    filter((tick) => {
-      const { seeking, stalled, readyState, currentRange } = tick;
-      if (seeking || stalled !== null) {
-        return false;
-      }
-      if (!shouldWaitForDataBeforeLoaded(
-        isDirectfile,
-        mediaElement.hasAttribute("playsinline"))) {
-        return readyState >= 1 && mediaElement.duration > 0;
-      }
-      if (readyState >= 4 || (readyState === 3 && currentRange !== null)) {
-        return shouldValidateMetadata() ? mediaElement.duration > 0 :
-                                          true;
-      }
-      return false;
-    }),
+export function waitUntilPlayable(
+  observation$ : Observable<IPlaybackObservation>
+) : Observable<undefined> {
+  return observation$.pipe(
+    filter(({ seeking, rebuffering, readyState }) => !seeking &&
+                                                     rebuffering === null &&
+                                                     readyState >= 1),
     take(1),
-    mapTo("can-play" as const)
+    map(() => undefined)
   );
-
-  if (shouldValidateMetadata() && mediaElement.duration === 0) {
-    return observableConcat(
-      observableOf("not-loaded-metadata" as const),
-      isLoaded$
-    );
-  }
-
-  return isLoaded$;
 }
 
 /**
@@ -93,11 +86,11 @@ function canPlay(
  * @param {HTMLMediaElement} - mediaElement
  * @returns {Observable}
  */
-function autoPlay$(
+function autoPlay(
   mediaElement: HTMLMediaElement
 ): Observable<"autoplay"|"autoplay-blocked"> {
-  return play$(mediaElement).pipe(
-    mapTo("autoplay" as const),
+  return play(mediaElement).pipe(
+    map(() => "autoplay" as const),
     catchError((error : unknown) => {
       if (error instanceof Error && error.name === "NotAllowedError") {
         // auto-play was probably prevented.
@@ -111,66 +104,105 @@ function autoPlay$(
   );
 }
 
+/** Object returned by `initialSeekAndPlay`. */
+export interface IInitialSeekAndPlayObject {
+  /**
+   * Observable which, when subscribed, will try to seek at the initial position
+   * then play if needed as soon as the HTMLMediaElement's properties are right.
+   *
+   * Emits various events relative to the status of this operation.
+   */
+  seekAndPlay$ : Observable<IInitialPlayEvent>;
+
+  /**
+   * Shared reference whose value becomes `true` once the initial seek has
+   * been considered / has been done by `seekAndPlay$`.
+   */
+  initialSeekPerformed : IReadOnlySharedReference<boolean>;
+
+  /**
+   * Shared reference whose value becomes `true` once the initial play has
+   * been considered / has been done by `seekAndPlay$`.
+   */
+  initialPlayPerformed: IReadOnlySharedReference<boolean>;
+}
+
 /**
- * Returns two Observables:
- *
- *   - seek$: when subscribed, will seek to the wanted started time as soon as
- *     it can. Emit and complete when done.
- *
- *   - load$: when subscribed, will play if and only if the `mustAutoPlay`
- *     option is set as soon as it can. Emit and complete when done.
- *     When this observable emits, it also means that the content is `loaded`
- *     and can begin to play the current content.
- *
+ * Creates an Observable allowing to seek at the initially wanted position and
+ * to play if autoPlay is wanted.
  * @param {Object} args
  * @returns {Object}
  */
-export default function seekAndLoadOnMediaEvents(
-  { clock$,
-    mediaElement,
+export default function initialSeekAndPlay(
+  { mediaElement,
+    playbackObserver,
     startTime,
-    mustAutoPlay,
-    setCurrentTime,
-    isDirectfile } : { clock$ : Observable<IInitClockTick>;
-                       isDirectfile : boolean;
+    mustAutoPlay } : { playbackObserver : PlaybackObserver;
                        mediaElement : HTMLMediaElement;
                        mustAutoPlay : boolean;
-                       /** Perform an internal seek. */
-                       setCurrentTime: (nb: number) => void;
                        startTime : number|(() => number); }
-) : { seek$ : Observable<unknown>; load$ : Observable<ILoadEvents> } {
+) : IInitialSeekAndPlayObject {
+  const initialSeekPerformed = createSharedReference(false);
+  const initialPlayPerformed = createSharedReference(false);
+
   const seek$ = whenLoadedMetadata$(mediaElement).pipe(
     take(1),
     tap(() => {
       log.info("Init: Set initial time", startTime);
       const initialTime = typeof startTime === "function" ? startTime() :
                                                             startTime;
-      setCurrentTime(initialTime);
+      playbackObserver.setCurrentTime(initialTime);
+      initialSeekPerformed.setValue(true);
+      initialSeekPerformed.finish();
     }),
     shareReplay({ refCount: true })
   );
 
-  const load$ : Observable<ILoadEvents> = seek$.pipe(
-    mergeMap(() => {
-      return canPlay(clock$, mediaElement, isDirectfile).pipe(
-        tap(() => log.info("Init: Can begin to play content")),
-        mergeMap((evt) => {
-          if (evt === "can-play") {
-            if (!mustAutoPlay) {
-              if (mediaElement.autoplay) {
-                log.warn("Init: autoplay is enabled on HTML media element. " +
-                         "Media will play as soon as possible.");
-              }
-              return observableOf("loaded" as const);
-            }
-            return autoPlay$(mediaElement);
-          }
-          return observableOf(evt);
-        })
-      );
+  const seekAndPlay$ = seek$.pipe(
+    mergeMap(() : Observable<IWarningEvent | undefined> => {
+      if (!shouldValidateMetadata() || mediaElement.duration > 0) {
+        return waitUntilPlayable(playbackObserver.observe(true));
+      } else {
+        const error = new MediaError("MEDIA_ERR_NOT_LOADED_METADATA",
+                                     "Cannot load automatically: your browser " +
+                                     "falsely announced having loaded the content.");
+        return waitUntilPlayable(playbackObserver.observe(true))
+          .pipe(startWith(EVENTS.warning(error)));
+      }
+    }),
+
+    mergeMap((evt) : Observable<IInitialPlayEvent> => {
+      if (evt !== undefined) {
+        return observableOf(evt);
+      }
+      log.info("Init: Can begin to play content");
+      if (!mustAutoPlay) {
+        if (mediaElement.autoplay) {
+          log.warn("Init: autoplay is enabled on HTML media element. " +
+                   "Media will play as soon as possible.");
+        }
+        initialPlayPerformed.setValue(true);
+        initialPlayPerformed.finish();
+        return observableOf({ type: "skipped" as const });
+      }
+      return autoPlay(mediaElement).pipe(mergeMap((autoplayEvt) => {
+        initialPlayPerformed.setValue(true);
+        initialPlayPerformed.finish();
+        if (autoplayEvt === "autoplay") {
+          return observableOf({ type: "autoplay" as const });
+        } else {
+          const error = new MediaError("MEDIA_ERR_BLOCKED_AUTOPLAY",
+                                       "Cannot trigger auto-play automatically: " +
+                                       "your browser does not allow it.");
+          return observableConcat(
+            observableOf(EVENTS.warning(error)),
+            observableOf({ type: "autoplay-blocked" as const })
+          );
+        }
+      }));
     }),
     shareReplay({ refCount: true })
   );
 
-  return { seek$, load$ };
+  return { seekAndPlay$, initialPlayPerformed, initialSeekPerformed };
 }