rx-player 3.29.0-dev.2022103100 → 3.29.0-dev.2022110200

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rx-player",
   "author": "Canal+",
-  "version": "3.29.0-dev.2022103100",
+  "version": "3.29.0-dev.2022110200",
   "description": "Canal+ HTML5 Video Player",
   "main": "./dist/rx-player.js",
   "keywords": [

package/sonar-project.properties

@@ -1,7 +1,7 @@
 sonar.projectKey=rx-player
 sonar.organization=rx-player
 sonar.projectName=rx-player
-sonar.projectVersion=3.29.0-dev.2022103100
+sonar.projectVersion=3.29.0-dev.2022110200
 sonar.sources=./src,./demo,./tests
 sonar.exclusions=demo/full/bundle.js,demo/standalone/lib.js,demo/bundle.js
 sonar.host.url=https://sonarcloud.io

package/src/core/api/playback_observer.ts

@@ -171,6 +171,14 @@ export default class PlaybackObserver {
     this._mediaElement.currentTime = time;
   }
 
+  /**
+   * Update the playback rate of the `HTMLMediaElement`.
+   * @param {number} playbackRate
+   */
+  public setPlaybackRate(playbackRate: number) : void {
+    this._mediaElement.playbackRate = playbackRate;
+  }
+
   /**
    * Returns the current `readyState` advertised by the `HTMLMediaElement`.
    * @returns {number}

package/src/core/api/public_api.ts

@@ -460,7 +460,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1194624
     videoElement.preload = "auto";
 
-    this.version = /* PLAYER_VERSION */"3.29.0-dev.2022103100";
+    this.version = /* PLAYER_VERSION */"3.29.0-dev.2022110200";
     this.log = log;
     this.state = "STOPPED";
     this.videoElement = videoElement;
@@ -3002,7 +3002,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     return activeRepresentations[currentPeriod.id];
   }
 }
-Player.version = /* PLAYER_VERSION */"3.29.0-dev.2022103100";
+Player.version = /* PLAYER_VERSION */"3.29.0-dev.2022110200";
 
 /** Every events sent by the RxPlayer's public API. */
 interface IPublicAPIEvent {

package/src/core/init/initialize_directfile.ts

@@ -44,10 +44,9 @@ import emitLoadedEvent from "./emit_loaded_event";
 import { IInitialTimeOptions } from "./get_initial_time";
 import initialSeekAndPlay from "./initial_seek_and_play";
 import linkDrmAndContent from "./link_drm_and_content";
-import StallAvoider from "./stall_avoider";
+import RebufferingController from "./rebuffering_controller";
 import throwOnMediaError from "./throw_on_media_error";
 import { IDirectfileEvent } from "./types";
-import updatePlaybackRate from "./update_playback_rate";
 
 // NOTE As of now (RxJS 7.4.0), RxJS defines `ignoreElements` default
 // first type parameter as `any` instead of the perfectly fine `unknown`,
@@ -160,17 +159,11 @@ export default function initializeDirectfileContent({
 
   const observation$ = playbackObserver.getReference().asObservable();
 
-  // Set the speed set by the user on the media element while pausing a
-  // little longer while the buffer is empty.
-  const playbackRate$ =
-    updatePlaybackRate(mediaElement, speed, observation$)
-      .pipe(ignoreElements());
-
   /**
    * Observable trying to avoid various stalling situations, emitting "stalled"
    * events when it cannot, as well as "unstalled" events when it get out of one.
    */
-  const stallAvoider$ = StallAvoider(playbackObserver, null, speed, EMPTY, EMPTY);
+  const rebuffer$ = RebufferingController(playbackObserver, null, speed, EMPTY, EMPTY);
 
   /**
    * Emit a "loaded" events once the initial play has been performed and the
@@ -192,8 +185,7 @@ export default function initializeDirectfileContent({
   return observableMerge(loadingEvts$,
                          drmEvents$.pipe(ignoreElements()),
                          mediaError$,
-                         playbackRate$,
-                         stallAvoider$);
+                         rebuffer$);
 }
 
 export { IDirectfileEvent };

package/src/core/init/load_on_media_source.ts

@@ -46,13 +46,12 @@ import emitLoadedEvent from "./emit_loaded_event";
 import { maintainEndOfStream } from "./end_of_stream";
 import initialSeekAndPlay from "./initial_seek_and_play";
 import MediaDurationUpdater from "./media_duration_updater";
-import StallAvoider, {
+import RebufferingController, {
   IDiscontinuityEvent,
   ILockedStreamEvent,
-} from "./stall_avoider";
+} from "./rebuffering_controller";
 import streamEventsEmitter from "./stream_events_emitter";
 import { IMediaSourceLoaderEvent } from "./types";
-import updatePlaybackRate from "./update_playback_rate";
 
 // NOTE As of now (RxJS 7.4.0), RxJS defines `ignoreElements` default
 // first type parameter as `any` instead of the perfectly fine `unknown`,
@@ -206,24 +205,15 @@ export default function createMediaSourceLoader(
           }
         }));
 
-    /**
-     * On subscription, keep the playback speed synchronized to the speed set by
-     * the user on the media element and force a speed of `0` when the buffer is
-     * empty, so it can build back buffer.
-     */
-    const playbackRate$ =
-      updatePlaybackRate(mediaElement, speed, observation$)
-        .pipe(ignoreElements());
-
-    /**
-     * Observable trying to avoid various stalling situations, emitting "stalled"
-     * events when it cannot, as well as "unstalled" events when it get out of one.
-     */
-    const stallAvoider$ = StallAvoider(playbackObserver,
-                                       manifest,
-                                       speed,
-                                       lockedStream$,
-                                       discontinuityUpdate$);
+   /**
+    * Observable trying to avoid various stalling situations, emitting "stalled"
+    * events when it cannot, as well as "unstalled" events when it get out of one.
+    */
+    const rebuffer$ = RebufferingController(playbackObserver,
+                                            manifest,
+                                            speed,
+                                            lockedStream$,
+                                            discontinuityUpdate$);
 
     /**
      * Emit a "loaded" events once the initial play has been performed and the
@@ -236,8 +226,7 @@ export default function createMediaSourceLoader(
         emitLoadedEvent(observation$, mediaElement, segmentBuffersStore, false)));
 
     return observableMerge(loadingEvts$,
-                           playbackRate$,
-                           stallAvoider$,
+                           rebuffer$,
                            streams$,
                            contentTimeObserver,
                            streamEvents$

package/src/core/init/{stall_avoider.ts → rebuffering_controller.ts}

@@ -15,6 +15,7 @@
  */
 
 import {
+  finalize,
   ignoreElements,
   map,
   merge as observableMerge,
@@ -32,6 +33,7 @@ import Manifest, {
 } from "../../manifest";
 import { getNextRangeGap } from "../../utils/ranges";
 import { IReadOnlySharedReference } from "../../utils/reference";
+import TaskCanceller from "../../utils/task_canceller";
 import {
   IPlaybackObservation,
   PlaybackObserver,
@@ -117,7 +119,10 @@ interface IDiscontinuityStoredInfo {
 }
 
 /**
- * Monitor situations where playback is stalled and try to get out of those.
+ * Monitor playback, trying to avoid stalling situation.
+ * If stopping the player to build buffer is needed, temporarily set the
+ * playback rate (i.e. speed) at `0` until enough buffer is available again.
+ *
  * Emit "stalled" then "unstalled" respectively when an unavoidable stall is
  * encountered and exited.
  * @param {object} playbackObserver - emit the current playback conditions.
@@ -129,7 +134,7 @@ interface IDiscontinuityStoredInfo {
  * discontinuities for loaded Period and buffer types.
  * @returns {Observable}
  */
-export default function StallAvoider(
+export default function RebufferingController(
   playbackObserver : PlaybackObserver,
   manifest: Manifest | null,
   speed : IReadOnlySharedReference<number>,
@@ -214,6 +219,8 @@ export default function StallAvoider(
     ignoreElements()
   );
 
+  const playbackRateUpdater = new PlaybackRateUpdater(playbackObserver, speed);
+
   const stall$ = playbackObserver.getReference().asObservable().pipe(
     withLatestFrom(discontinuitiesStore$),
     map(([observation, discontinuitiesStore]) => {
@@ -260,6 +267,11 @@ export default function StallAvoider(
         }
 
         if (now - freezing.timestamp > FREEZING_STALLED_DELAY) {
+          if (rebuffering === null || ignoredStallTimeStamp !== null) {
+            playbackRateUpdater.stopRebuffering();
+          } else {
+            playbackRateUpdater.startRebuffering();
+          }
           return { type: "stalled" as const,
                    value: "freezing" as const };
         }
@@ -268,6 +280,7 @@ export default function StallAvoider(
       }
 
       if (rebuffering === null) {
+        playbackRateUpdater.stopRebuffering();
         if (readyState === 1) {
           // With a readyState set to 1, we should still not be able to play:
           // Return that we're stalled
@@ -295,6 +308,7 @@ export default function StallAvoider(
       if (ignoredStallTimeStamp !== null) {
         const now = performance.now();
         if (now - ignoredStallTimeStamp < FORCE_DISCONTINUITY_SEEK_DELAY) {
+          playbackRateUpdater.stopRebuffering();
           log.debug("Init: letting the device get out of a stall by itself");
           return { type: "stalled" as const,
                    value: stalledReason };
@@ -305,6 +319,7 @@ export default function StallAvoider(
       }
 
       ignoredStallTimeStamp = null;
+      playbackRateUpdater.startRebuffering();
 
       if (manifest === null) {
         return { type: "stalled" as const,
@@ -380,7 +395,11 @@ export default function StallAvoider(
       return { type: "stalled" as const,
                value: stalledReason };
     }));
-  return observableMerge(unlock$, stall$);
+
+  return observableMerge(unlock$, stall$)
+    .pipe(finalize(() =>  {
+      playbackRateUpdater.dispose();
+    }));
 }
 
 /**
@@ -516,3 +535,87 @@ function generateDiscontinuityError(
                         String(stalledPosition) + ", seeked at position " +
                         String(seekTo));
 }
+
+/**
+ * Manage playback speed, allowing to force a playback rate of `0` when
+ * rebuffering is wanted.
+ *
+ * Only one `PlaybackRateUpdater` should be created per HTMLMediaElement.
+ * Note that the `PlaybackRateUpdater` reacts to playback event and wanted
+ * speed change. You should call its `dispose` method once you don't need it
+ * anymore.
+ * @class PlaybackRateUpdater
+ */
+class PlaybackRateUpdater {
+  private _playbackObserver : PlaybackObserver;
+  private _speed : IReadOnlySharedReference<number>;
+  private _speedUpdateCanceller : TaskCanceller;
+  private _isRebuffering : boolean;
+  private _isDisposed : boolean;
+
+  /**
+   * Create a new `PlaybackRateUpdater`.
+   * @param {Object} playbackObserver
+   * @param {Object} speed
+   */
+  constructor(
+    playbackObserver : PlaybackObserver,
+    speed : IReadOnlySharedReference<number>
+  ) {
+    this._speedUpdateCanceller = new TaskCanceller();
+    this._isRebuffering = false;
+    this._playbackObserver = playbackObserver;
+    this._isDisposed = false;
+    this._speed = speed;
+    this._updateSpeed();
+  }
+
+  /**
+   * Force the playback rate to `0`, to start a rebuffering phase.
+   *
+   * You can call `stopRebuffering` when you want the rebuffering phase to end.
+   */
+  public startRebuffering() : void {
+    if (this._isRebuffering || this._isDisposed) {
+      return;
+    }
+    this._isRebuffering = true;
+    this._speedUpdateCanceller.cancel();
+    log.info("Init: Pause playback to build buffer");
+    this._playbackObserver.setPlaybackRate(0);
+  }
+
+  /**
+   * If in a rebuffering phase (during which the playback rate is forced to
+   * `0`), exit that phase to apply the wanted playback rate instead.
+   *
+   * Do nothing if not in a rebuffering phase.
+   */
+  public stopRebuffering() {
+    if (!this._isRebuffering || this._isDisposed) {
+      return;
+    }
+    this._isRebuffering = false;
+    this._speedUpdateCanceller = new TaskCanceller();
+    this._updateSpeed();
+  }
+
+  /**
+   * The `PlaybackRateUpdater` allocate resources to for example listen to
+   * wanted speed changes and react to it.
+   *
+   * Consequently, you should call the `dispose` method, when you don't want the
+   * `PlaybackRateUpdater` to have an effect anymore.
+   */
+  public dispose() {
+    this._speedUpdateCanceller.cancel();
+    this._isDisposed = true;
+  }
+
+  private _updateSpeed() {
+    this._speed.onUpdate((lastSpeed) => {
+      log.info("Init: Resume playback speed", lastSpeed);
+      this._playbackObserver.setPlaybackRate(lastSpeed);
+    }, { clearSignal: this._speedUpdateCanceller.signal, emitCurrentValue: true });
+  }
+}

package/src/core/init/update_playback_rate.ts

@@ -1,70 +0,0 @@
-/**
- * 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 {
-  defer as observableDefer,
-  distinctUntilChanged,
-  map,
-  Observable,
-  of as observableOf,
-  startWith,
-  switchMap,
-  tap,
-} from "rxjs";
-import log from "../../log";
-import { IReadOnlySharedReference } from "../../utils/reference";
-import { IPlaybackObservation } from "../api";
-
-export interface IPlaybackRateOptions { pauseWhenRebuffering? : boolean }
-
-/**
- * Manage playback speed.
- * Set playback rate set by the user, pause playback when the player appear to
- * rebuffering and restore the speed once it appears to exit rebuffering status.
- *
- * @param {HTMLMediaElement} mediaElement
- * @param {Observable} speed - last speed set by the user
- * @param {Observable} observation$ - Current playback conditions
- * @returns {Observable}
- */
-export default function updatePlaybackRate(
-  mediaElement : HTMLMediaElement,
-  speed : IReadOnlySharedReference<number>,
-  observation$ : Observable<IPlaybackObservation>
-) : Observable<number> {
-  const forcePause$ = observation$
-    .pipe(
-      map((observation) => observation.rebuffering !== null),
-      startWith(false),
-      distinctUntilChanged()
-    );
-
-  return forcePause$
-    .pipe(switchMap(shouldForcePause => {
-      if (shouldForcePause) {
-        return observableDefer(() => {
-          log.info("Init: Pause playback to build buffer");
-          mediaElement.playbackRate = 0;
-          return observableOf(0);
-        });
-      }
-      return speed.asObservable()
-        .pipe(tap((lastSpeed) => {
-          log.info("Init: Resume playback speed", lastSpeed);
-          mediaElement.playbackRate = lastSpeed;
-        }));
-    }));
-}

package/src/default_config.ts

@@ -342,7 +342,7 @@ const DEFAULT_CONFIG = {
      * small enough so this (arguably rare) situation won't lead to too much
      * waiting time.
      */
-  FORCE_DISCONTINUITY_SEEK_DELAY: 3000,
+  FORCE_DISCONTINUITY_SEEK_DELAY: 5000,
 
     /**
      * Ratio used to know if an already loaded segment should be re-buffered.

package/src/parsers/texttracks/ttml/html/apply_extent.ts

@@ -54,14 +54,7 @@ export default function applyExtent(
         secondExtent[2] === "%" ||
         secondExtent[2] === "em")
     {
-      const toNum = Number(secondExtent[1]);
-      if (secondExtent[2] === "%" && !isNaN(toNum) &&
-          (toNum < 0 || toNum > 100))
-      {
-        element.style.width = "80%";
-      } else {
-        element.style.height = secondExtent[1] + secondExtent[2];
-      }
+      element.style.height = secondExtent[1] + secondExtent[2];
     } else if (secondExtent[2] === "c") {
       addClassName(element, "proportional-style");
       element.setAttribute("data-proportional-height", secondExtent[1]);

package/src/parsers/texttracks/ttml/html/apply_origin.ts

@@ -53,15 +53,7 @@ export default function applyOrigin(
         secondOrigin[2] === "%" ||
         secondOrigin[2] === "em")
     {
-      const toNum = Number(secondOrigin[1]);
-      if (secondOrigin[2] === "%" && !isNaN(toNum) &&
-          (toNum < 0 || toNum > 100))
-      {
-        element.style.bottom = "5%";
-        element.style.left = "10%";
-      } else {
-        element.style.top = secondOrigin[1] + secondOrigin[2];
-      }
+      element.style.top = secondOrigin[1] + secondOrigin[2];
     } else if (secondOrigin[2] === "c") {
       addClassName(element, "proportional-style");
       element.setAttribute("data-proportional-top", secondOrigin[1]);