[WIP] Third attempt for a preload API

demo/scripts/controllers/ContentList.tsx

@@ -247,10 +247,12 @@ function getKeySystemsOption(
 
 function ContentList({
   loadVideo,
+  preloadVideo,
   showOptions,
   onOptionToggle,
 }: {
   loadVideo: (opts: ILoadVideoOptions) => void;
+  preloadVideo: (opts: ILoadVideoOptions) => void;
   showOptions: boolean;
   onOptionToggle: () => void;
 }): JSX.Element {
@@ -314,6 +316,43 @@ function ContentList({
     [loadVideo],
   );
 
+  /**
+   * Load the given displayed content through the player.
+   * @param {Object|null} content
+   */
+  const preloadContent = React.useCallback(
+    (content: IDisplayedContent) => {
+      const {
+        url,
+        transport,
+        fallbackKeyError,
+        fallbackLicenseRequest,
+        isLowLatency,
+        drmInfos,
+      } = content;
+
+      getKeySystemsOption(drmInfos ?? [], {
+        fallbackKeyError: !!fallbackKeyError,
+        fallbackLicenseRequest: !!fallbackLicenseRequest,
+      }).then(
+        (keySystems) => {
+          preloadVideo({
+            url: url ?? "",
+            transport: transport ?? "",
+            textTrackMode: "html",
+            lowLatencyMode: isLowLatency,
+            keySystems,
+          });
+        },
+        () => {
+          /* eslint-disable-next-line no-console */
+          console.error("Could not construct key systems option");
+        },
+      );
+    },
+    [loadVideo],
+  );
+
   /**
    * Load a custom content entered in a custom link.
    * @param {string} url
@@ -349,6 +388,41 @@ function ContentList({
     ],
   );
 
+  /**
+   * Load a custom content entered in a custom link.
+   * @param {string} url
+   * @param {Array.<Object>} drmInfos
+   */
+  const preloadUrl = React.useCallback(
+    (url: string, drmInfos: IDrmInfo[]) => {
+      getKeySystemsOption(drmInfos, {
+        fallbackKeyError: !!shouldFallbackOnKeyError,
+        fallbackLicenseRequest: !!shouldFallbackOnLicenseReqError,
+      }).then(
+        (keySystems) => {
+          preloadVideo({
+            url: url,
+            transport: transportType.toLowerCase(),
+            textTrackMode: "html",
+            lowLatencyMode: isLowLatencyChecked,
+            keySystems,
+          });
+        },
+        () => {
+          /* eslint-disable-next-line no-console */
+          console.error("Could not construct key systems option");
+        },
+      );
+    },
+    [
+      loadVideo,
+      shouldFallbackOnKeyError,
+      shouldFallbackOnLicenseReqError,
+      transportType,
+      isLowLatencyChecked,
+    ],
+  );
+
   /**
    * Change the content chosen in the list.
    * @param {number} index - index in the lsit
@@ -515,6 +589,22 @@ function ContentList({
     }
   };
 
+  const onClickPreload = () => {
+    if (contentChoiceIndex === 0) {
+      const drmInfos = [
+        {
+          licenseServerUrl,
+          serverCertificateUrl,
+          drm: chosenDRMType,
+          customKeySystem,
+        },
+      ];
+      preloadUrl(currentManifestURL, drmInfos);
+    } else {
+      preloadContent(contentsToSelect[contentChoiceIndex]);
+    }
+  };
+
   const saveCurrentContent = () => {
     const contentToSave: IContentInfo = {
       name: contentNameField,
@@ -751,6 +841,13 @@ function ContentList({
             value={String.fromCharCode(0xf144)}
             disabled={false}
           />
+          <Button
+            className="choice-input-button load-button"
+            ariaLabel="Preload the selected content now"
+            onClick={onClickPreload}
+            value={String.fromCharCode(0x2b07)}
+            disabled={false}
+          />
         </div>
       </div>
       {isCustomContent || (isLocalContent && isSavingOrUpdating) ? (

demo/scripts/controllers/Player.tsx

@@ -190,7 +190,33 @@ function Player(): JSX.Element {
     }
   }, [playerModule]);
 
-  const startContent = useCallback(
+  const preloadContentCallback = useCallback(
+    (contentInfo: ILoadVideoOptions) => {
+      let playerMod = playerModule;
+
+      // TODO this risks stopping the previous content if instance options
+      // have been updated
+      if (playerMod === null || hasUpdatedPlayerOptions) {
+        setHasUpdatedPlayerOptions(false);
+        const created = createNewPlayerModule();
+        if (created === undefined) {
+          return;
+        }
+        created.actions.updateWorkerMode(relyOnWorker);
+        playerMod = created;
+      }
+      preloadContent(playerMod, contentInfo, loadVideoOpts);
+    },
+    [
+      playerModule,
+      relyOnWorker,
+      hasUpdatedPlayerOptions,
+      createNewPlayerModule,
+      loadVideoOpts,
+    ],
+  );
+
+  const startContentCallback = useCallback(
     (contentInfo: ILoadVideoOptions) => {
       let playerMod = playerModule;
       if (playerMod === null || hasUpdatedPlayerOptions) {
@@ -261,7 +287,8 @@ function Player(): JSX.Element {
     <section className="video-player-section">
       <div className="video-player-content">
         <ContentList
-          loadVideo={startContent}
+          loadVideo={startContentCallback}
+          preloadVideo={preloadContentCallback}
           showOptions={showOptions}
           onOptionToggle={onOptionToggle}
         />
@@ -352,4 +379,12 @@ function loadContent(
   playerModule.actions.load(Object.assign({}, contentInfo, loadVideoOpts));
 }
 
+function preloadContent(
+  playerModule: IPlayerModule,
+  contentInfo: ILoadVideoOptions,
+  loadVideoOpts: ILoadVideoSettings,
+) {
+  playerModule.actions.preload(Object.assign({}, contentInfo, loadVideoOpts));
+}
+
 export default Player;

demo/scripts/modules/player/index.ts

@@ -138,6 +138,10 @@ export interface IPlayerModuleState {
   maximumPosition: null | undefined | number;
   minimumPosition: null | undefined | number;
   playbackRate: number;
+  preloads: Array<{
+    url: string | undefined;
+    id: string;
+  }>;
   /** Try to play contents in "multithread" mode when possible. */
   relyOnWorker: boolean;
   /** Currently playing a content in "multithread" mode. */
@@ -196,6 +200,7 @@ const PlayerModule = declareModule(
     maximumPosition: undefined,
     minimumPosition: undefined,
     playbackRate: 1,
+    preloads: [],
     relyOnWorker: false,
     useWorker: false,
     subtitle: undefined,
@@ -274,6 +279,35 @@ const PlayerModule = declareModule(
         state.update("relyOnWorker", enabled);
       },
 
+      preload(arg: ILoadVideoOptions) {
+        const contentInfo = player.preloadVideo(
+          Object.assign(
+            {
+              mode: state.get("relyOnWorker") ? "auto" : "main",
+              textTrackElement,
+              transportOptions: { checkMediaSegmentIntegrity: true },
+            },
+            arg,
+          ) as ILoadVideoOptions,
+        );
+        const preloads = state.get("preloads");
+        preloads.push({
+          id: contentInfo.id,
+          url: arg.url,
+        });
+        state.update("preloads", preloads);
+      },
+
+      loadPreload(preloadId: string) {
+        player.startPreload(preloadId);
+        const preloads = state.get("preloads");
+        const index = preloads.findIndex((p) => p.id === preloadId);
+        if (index >= 0) {
+          preloads.splice(index, 1);
+        }
+        state.update("preloads", preloads);
+      },
+
       load(arg: ILoadVideoOptions) {
         dettachVideoThumbnailLoader();
         player.loadVideo(

src/compat/__tests__/add_text_track.test.ts

@@ -1,5 +1,5 @@
 import { describe, beforeEach, it, expect, vi } from "vitest";
-import type { IMediaElement } from "../../compat/browser_compatibility_types";
+import type { IMediaElement } from "../browser_compatibility_types";
 
 // Needed for calling require (which itself is needed to mock properly) because
 // it is not type-checked:

src/compat/browser_compatibility_types.ts

@@ -135,7 +135,7 @@ export interface IMediaSource extends IEventTarget<IMediaSourceEventMap> {
   duration: number;
   handle?: MediaProvider | IMediaSource | undefined;
   readyState: "closed" | "open" | "ended";
-  sourceBuffers: ISourceBufferList;
+  sourceBuffers: ISourceBufferList | ISourceBuffer[];
 
   addSourceBuffer(type: string): ISourceBuffer;
   clearLiveSeekableRange(): void;
@@ -229,6 +229,8 @@ export interface IMediaElementEventMap {
  *     implement it.
  */
 export interface IMediaElement extends IEventTarget<IMediaElementEventMap> {
+  FORCED_MEDIA_SOURCE?: (new () => IMediaSource) | undefined;
+
   /* From `HTMLMediaElement`: */
   autoplay: boolean;
   buffered: TimeRanges;