rx-player 4.1.0 → 4.2.0-dev.2024080600

package/src/compat/__tests__/add_text_track.test.ts

@@ -1,4 +1,5 @@
 import { describe, beforeEach, it, expect, vi } from "vitest";
+import type { IMediaElement } from "../../compat/browser_compatibility_types";
 
 // Needed for calling require (which itself is needed to mock properly) because
 // it is not type-checked:
@@ -23,7 +24,7 @@ describe("compat - addTextTrack", () => {
     const fakeMediaElement = {
       textTracks: [fakeTextTrack],
       addTextTrack: mockAddTextTrack,
-    } as unknown as HTMLMediaElement;
+    } as unknown as IMediaElement;
 
     vi.doMock("../browser_detection", () => ({
       isIEOrEdge: true,
@@ -51,7 +52,7 @@ describe("compat - addTextTrack", () => {
     const fakeMediaElement = {
       textTracks: fakeTextTracks,
       addTextTrack: mockAddTextTrack,
-    } as unknown as HTMLMediaElement;
+    } as unknown as IMediaElement;
 
     vi.doMock("../browser_detection", () => ({
       isIEOrEdge: true,
@@ -95,7 +96,7 @@ describe("compat - addTextTrack", () => {
       textTracks: fakeTextTracks,
       appendChild: mockAppendChild,
       childNodes: fakeChildNodes,
-    } as unknown as HTMLMediaElement;
+    } as unknown as IMediaElement;
 
     const spyOnCreateElement = vi
       .spyOn(document, "createElement")

package/src/compat/__tests__/change_source_buffer_type.test.ts

@@ -1,11 +1,12 @@
 import { describe, it, expect, vi } from "vitest";
 import log from "../../log";
+import type { ISourceBuffer } from "../browser_compatibility_types";
 import tryToChangeSourceBufferType from "../change_source_buffer_type";
 
 describe("Compat - tryToChangeSourceBufferType", () => {
   it("should just return false if the SourceBuffer provided does not have a changeType method", () => {
     const spy = vi.spyOn(log, "warn");
-    const fakeSourceBuffer: SourceBuffer = {} as unknown as SourceBuffer;
+    const fakeSourceBuffer: ISourceBuffer = {} as unknown as ISourceBuffer;
     expect(tryToChangeSourceBufferType(fakeSourceBuffer, "toto")).toBe(false);
     expect(spy).not.toHaveBeenCalled();
   });
@@ -15,7 +16,7 @@ describe("Compat - tryToChangeSourceBufferType", () => {
     const changeTypeFn = vi.fn();
     const fakeSourceBuffer = {
       changeType: changeTypeFn,
-    } as unknown as SourceBuffer;
+    } as unknown as ISourceBuffer;
     expect(tryToChangeSourceBufferType(fakeSourceBuffer, "toto")).toBe(true);
     expect(spy).not.toHaveBeenCalled();
   });
@@ -28,7 +29,7 @@ describe("Compat - tryToChangeSourceBufferType", () => {
     });
     const fakeSourceBuffer = {
       changeType: changeTypeFn,
-    } as unknown as SourceBuffer;
+    } as unknown as ISourceBuffer;
     expect(tryToChangeSourceBufferType(fakeSourceBuffer, "toto")).toBe(false);
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(

package/src/compat/add_text_track.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { ICompatTextTrack } from "./browser_compatibility_types";
+import type { ICompatTextTrack, IMediaElement } from "./browser_compatibility_types";
 import { isIEOrEdge } from "./browser_detection";
 
 /**
@@ -28,7 +28,7 @@ import { isIEOrEdge } from "./browser_detection";
  * @param {HTMLMediaElement} mediaElement
  * @returns {Object}
  */
-export default function addTextTrack(mediaElement: HTMLMediaElement): {
+export default function addTextTrack(mediaElement: IMediaElement): {
   track: ICompatTextTrack;
   trackElement: HTMLTrackElement | undefined;
 } {

package/src/compat/browser_compatibility_types.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import type { IListener } from "../utils/event_emitter";
 import globalScope from "../utils/global_scope";
 import isNullOrUndefined from "../utils/is_null_or_undefined";
 
@@ -70,17 +71,218 @@ interface ICompatDocument extends Document {
 }
 
 /**
- * HTMLMediaElement with added optional vendored functions used by "old"
- * browsers.
- * And TypeScript forgot to add assiociated AudioTrackList and VideoTrackList
- * (and yes apparently a HTMLAudioElement can have an assiociated
- * VideoTrackList).
+ * Simpler re-definition of an `EventTarget`, allowing more straightforward
+ * TypeScript exploitation in the RxPlayer.
+ */
+export interface IEventTarget<TEventMap> {
+  addEventListener<TEventName extends keyof TEventMap>(
+    evt: TEventName,
+    fn: IListener<TEventMap, TEventName>,
+  ): void;
+  removeEventListener<TEventName extends keyof TEventMap>(
+    evt?: TEventName,
+    fn?: IListener<TEventMap, TEventName>,
+  ): void;
+}
+
+/** Events potentially dispatched by an `ISourceBufferList` */
+export interface ISourceBufferListEventMap {
+  addsourcebuffer: Event;
+  removesourcebuffer: Event;
+}
+
+/**
+ * Type-compatible with the `SourceBufferList` type (i.e. a `SourceBufferList`
+ * is a valid `ISourceBufferList`), the `ISourceBufferList` type allows to:
+ *
+ *   - re-define some attributes or methods in cases where we detected that some
+ *     platforms have a different implementation.
+ *
+ *   - list all `SourceBufferList` attributes, methods and events that are
+ *     relied on by the RxPlayer.
+ *
+ *   - Allow an easier re-definition of that API for tests or for platforms
+ *     which do not implement it.
+ */
+export interface ISourceBufferList extends IEventTarget<ISourceBufferListEventMap> {
+  readonly length: number;
+  onaddsourcebuffer: ((evt: Event) => void) | null;
+  onremovesourcebuffer: ((evt: Event) => void) | null;
+  [index: number]: ISourceBuffer;
+}
+
+/** Events potentially dispatched by an `IMediaSource` */
+export interface IMediaSourceEventMap {
+  sourceopen: Event;
+  sourceended: Event;
+  sourceclose: Event;
+}
+
+/**
+ * Type-compatible with the `MediaSource` type (i.e. a `MediaSource` is a valid
+ * `IMediaSource`), the `IMediaSource` type allows to:
+ *
+ *   - re-define some attributes or methods in cases where we detected that some
+ *     platforms have a different implementation.
+ *
+ *   - list all `MediaSource` attributes, methods and events that are relied on
+ *     by the RxPlayer.
+ *
+ *   - Allow an easier re-definition of that API for tests or for platforms
+ *     which do not implement it.
+ */
+export interface IMediaSource extends IEventTarget<IMediaSourceEventMap> {
+  duration: number;
+  handle?: MediaProvider | IMediaSource | undefined;
+  readyState: "closed" | "open" | "ended";
+  sourceBuffers: ISourceBufferList;
+
+  addSourceBuffer(type: string): ISourceBuffer;
+  clearLiveSeekableRange(): void;
+  endOfStream(): void;
+  removeSourceBuffer(sb: ISourceBuffer): void;
+  setLiveSeekableRange(start: number, end: number): void;
+
+  onsourceopen: ((evt: Event) => void) | null;
+  onsourceended: ((evt: Event) => void) | null;
+  onsourceclose: ((evt: Event) => void) | null;
+}
+
+/** Events potentially dispatched by an `ISourceBuffer` */
+export interface ISourceBufferEventMap {
+  abort: Event;
+  error: Event;
+  update: Event;
+  updateend: Event;
+  updatestart: Event;
+}
+
+/**
+ * Type-compatible with the `SourceBuffer` type (i.e. a `SourceBuffer` is a valid
+ * `ISourceBuffer`), the `ISourceBuffer` type allows to:
+ *
+ *   - re-define some attributes or methods in cases where we detected that some
+ *     platforms have a different implementation.
+ *
+ *   - list all `SourceBuffer` attributes, methods and events that are relied on
+ *     by the RxPlayer.
+ *
+ *   - Allow an easier re-definition of that API for tests or for platforms
+ *     which do not implement it.
+ */
+export interface ISourceBuffer extends IEventTarget<ISourceBufferEventMap> {
+  appendWindowEnd: number;
+  appendWindowStart: number;
+  buffered: TimeRanges;
+  timestampOffset: number;
+  updating: boolean;
+
+  abort(): void;
+  appendBuffer(data: BufferSource): void;
+  changeType(type: string): void;
+  remove(start: number, end: number): void;
+
+  onabort: ((evt: Event) => void) | null;
+  onerror: ((evt: Event) => void) | null;
+  onupdate: ((evt: Event) => void) | null;
+  onupdateend: ((evt: Event) => void) | null;
+  onupdatestart: ((evt: Event) => void) | null;
+}
+
+/** Events potentially dispatched by an `IMediaElement` */
+export interface IMediaElementEventMap {
+  canplay: Event;
+  canplaythrough: Event;
+  encrypted: MediaEncryptedEvent;
+  ended: Event;
+  enterpictureinpicture: Event;
+  error: Event;
+  leavepictureinpicture: Event;
+  loadeddata: Event;
+  loadedmetadata: Event;
+  needkey: MediaEncryptedEvent;
+  pause: Event;
+  play: Event;
+  playing: Event;
+  ratechange: Event;
+  seeked: Event;
+  seeking: Event;
+  stalled: Event;
+  timeupdate: Event;
+  visibilitychange: Event;
+  volumechange: Event;
+  waiting: Event;
+  webkitneedkey: MediaEncryptedEvent;
+}
+
+/**
+ * Type-compatible with the `HTMLMediaElement` type (i.e. a `HTMLMediaElement` is
+ * a valid `IMediaElement`), the `IMediaElement` type allows to:
+ *
+ *   - re-define some attributes or methods in cases where we detected that some
+ *     platforms have a different implementation.
  *
- * Note: I prefer to define my own `ICompatHTMLMediaElement` rather to extend
- * the original definition to better detect which types have been extended and
- * are not actually valid TypeScript types.
+ *   - list all `HTMLMediaElement` attributes, methods and events that are
+ *     relied on by the RxPlayer.
+ *
+ *   - Allow a re-definition of that API for tests or for platforms which do not
+ *     implement it.
  */
-interface ICompatHTMLMediaElement extends HTMLMediaElement {
+export interface IMediaElement extends IEventTarget<IMediaElementEventMap> {
+  /* From `HTMLMediaElement`: */
+  autoplay: boolean;
+  buffered: TimeRanges;
+  childNodes: NodeList | never[];
+  clientHeight: number | undefined;
+  clientWidth: number | undefined;
+  currentTime: number;
+  duration: number;
+  ended: boolean;
+  error: MediaError | null;
+  mediaKeys: null | MediaKeys;
+  muted: boolean;
+  nodeName: string;
+  paused: boolean;
+  playbackRate: number;
+  preload: "none" | "metadata" | "auto" | "";
+  readyState: number;
+  seekable: TimeRanges;
+  seeking: boolean;
+  src: string;
+  srcObject?: undefined | null | MediaProvider;
+  textTracks: TextTrackList | never[];
+  volume: number;
+
+  addTextTrack: (kind: TextTrackKind) => TextTrack;
+  appendChild<T extends Node>(x: T): void;
+  hasAttribute(attr: string): boolean;
+  hasChildNodes(): boolean;
+  pause(): void;
+  play(): Promise<void>;
+  removeAttribute(attr: string): void;
+  removeChild(x: unknown): void;
+  setMediaKeys(x: MediaKeys | null): Promise<void>;
+
+  onencrypted: ((evt: MediaEncryptedEvent) => void) | null;
+  oncanplay: ((evt: Event) => void) | null;
+  oncanplaythrough: ((evt: Event) => void) | null;
+  onended: ((evt: Event) => void) | null;
+  onenterpictureinpicture?: ((evt: Event) => void) | null;
+  onleavepictureinpicture?: ((evt: Event) => void) | null;
+  onerror: ((evt: Event) => void) | null;
+  onloadeddata: ((evt: Event) => void) | null;
+  onloadedmetadata: ((evt: Event) => void) | null;
+  onpause: ((evt: Event) => void) | null;
+  onplay: ((evt: Event) => void) | null;
+  onplaying: ((evt: Event) => void) | null;
+  onratechange: ((evt: Event) => void) | null;
+  onseeked: ((evt: Event) => void) | null;
+  onseeking: ((evt: Event) => void) | null;
+  onstalled: ((evt: Event) => void) | null;
+  ontimeupdate: ((evt: Event) => void) | null;
+  onvolumechange: ((evt: Event) => void) | null;
+  onwaiting: ((evt: Event) => void) | null;
+
   mozRequestFullScreen?: () => void;
   msRequestFullscreen?: () => void;
   webkitRequestFullscreen?: () => void;
@@ -93,9 +295,40 @@ interface ICompatHTMLMediaElement extends HTMLMediaElement {
   webkitKeys?: {
     createSession?: (mimeType: string, initData: BufferSource) => MediaKeySession;
   };
-  readonly audioTracks?: ICompatAudioTrackList;
-  readonly videoTracks?: ICompatVideoTrackList;
+  audioTracks?: ICompatAudioTrackList;
+  videoTracks?: ICompatVideoTrackList;
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-restricted-types */
+// @ts-expect-error unused function, just used for compile-time typechecking
+function testMediaElement(x: HTMLMediaElement) {
+  assertCompatibleIMediaElement(x);
+}
+function assertCompatibleIMediaElement(_x: IMediaElement) {
+  // Noop
+}
+// @ts-expect-error unused function, just used for compile-time typechecking
+function testMediaSource(x: MediaSource) {
+  assertCompatibleIMediaSource(x);
+}
+function assertCompatibleIMediaSource(_x: IMediaSource) {
+  // Noop
+}
+// @ts-expect-error unused function, just used for compile-time typechecking
+function testSourceBuffer(x: SourceBuffer) {
+  assertCompatibleISourceBuffer(x);
+}
+function assertCompatibleISourceBuffer(_x: ISourceBuffer) {
+  // Noop
+}
+// @ts-expect-error unused function, just used for compile-time typechecking
+function testSourceBufferList(x: SourceBufferList) {
+  assertCompatibleISourceBufferList(x);
+}
+function assertCompatibleISourceBufferList(_x: ISourceBufferList) {
+  // Noop
 }
+/* eslint-enable @typescript-eslint/no-unused-vars, @typescript-eslint/no-restricted-types */
 
 /**
  * AudioTrackList implementation (that TS forgot).
@@ -169,7 +402,9 @@ export interface ICompatPictureInPictureWindow extends EventTarget {
 /* eslint-disable */
 /** MediaSource implementation, including vendored implementations. */
 const gs = globalScope as any;
-const MediaSource_: typeof MediaSource | undefined =
+const MediaSource_:
+  | { new (): IMediaSource; isTypeSupported(type: string): boolean }
+  | undefined =
   gs === undefined
     ? undefined
     : !isNullOrUndefined(gs.MediaSource)
@@ -202,7 +437,6 @@ export interface ICompatTextTrackList extends TextTrackList {
 
 export type {
   ICompatDocument,
-  ICompatHTMLMediaElement,
   ICompatAudioTrackList,
   ICompatVideoTrackList,
   ICompatAudioTrack,

package/src/compat/clear_element_src.ts

@@ -16,12 +16,13 @@
 
 import log from "../log";
 import isNullOrUndefined from "../utils/is_null_or_undefined";
+import type { IMediaElement } from "./browser_compatibility_types";
 
 /**
  * Clear element's src attribute.
  * @param {HTMLMediaElement} element
  */
-export default function clearElementSrc(element: HTMLMediaElement): void {
+export default function clearElementSrc(element: IMediaElement): void {
   // On some browsers, we first have to make sure the textTracks elements are
   // both disabled and removed from the DOM.
   // If we do not do that, we may be left with displayed text tracks on the

package/src/compat/eme/custom_media_keys/ie11_media_keys.ts

@@ -18,7 +18,7 @@ import EventEmitter from "../../../utils/event_emitter";
 import isNullOrUndefined from "../../../utils/is_null_or_undefined";
 import TaskCanceller from "../../../utils/task_canceller";
 import wrapInPromise from "../../../utils/wrapInPromise";
-import type { ICompatHTMLMediaElement } from "../../browser_compatibility_types";
+import type { IMediaElement } from "../../browser_compatibility_types";
 import * as events from "../../event_listeners";
 import type { MSMediaKeys, MSMediaKeySession } from "./ms_media_keys_constructor";
 import { MSMediaKeysConstructor } from "./ms_media_keys_constructor";
@@ -124,7 +124,7 @@ class IE11MediaKeySession
 }
 
 class IE11CustomMediaKeys implements ICustomMediaKeys {
-  private _videoElement?: ICompatHTMLMediaElement;
+  private _videoElement?: IMediaElement;
   private _mediaKeys?: MSMediaKeys;
 
   constructor(keyType: string) {
@@ -134,9 +134,9 @@ class IE11CustomMediaKeys implements ICustomMediaKeys {
     this._mediaKeys = new MSMediaKeysConstructor(keyType);
   }
 
-  _setVideo(videoElement: HTMLMediaElement): Promise<unknown> {
+  _setVideo(videoElement: IMediaElement): Promise<unknown> {
     return wrapInPromise(() => {
-      this._videoElement = videoElement as ICompatHTMLMediaElement;
+      this._videoElement = videoElement;
       if (this._videoElement.msSetMediaKeys !== undefined) {
         this._videoElement.msSetMediaKeys(this._mediaKeys);
       }
@@ -159,7 +159,7 @@ export default function getIE11MediaKeysCallbacks(): {
   isTypeSupported: (keyType: string) => boolean;
   createCustomMediaKeys: (keyType: string) => IE11CustomMediaKeys;
   setMediaKeys: (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ) => Promise<unknown>;
 } {
@@ -174,7 +174,7 @@ export default function getIE11MediaKeysCallbacks(): {
   };
   const createCustomMediaKeys = (keyType: string) => new IE11CustomMediaKeys(keyType);
   const setMediaKeys = (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ): Promise<unknown> => {
     if (mediaKeys === null) {

package/src/compat/eme/custom_media_keys/moz_media_keys_constructor.ts

@@ -16,7 +16,7 @@
 
 import globalScope from "../../../utils/global_scope";
 import wrapInPromise from "../../../utils/wrapInPromise";
-import type { ICompatHTMLMediaElement } from "../../browser_compatibility_types";
+import type { IMediaElement } from "../../browser_compatibility_types";
 import type { ICustomMediaKeys } from "./types";
 
 interface IMozMediaKeysConstructor {
@@ -44,7 +44,7 @@ export default function getMozMediaKeysCallbacks(): {
   isTypeSupported: (keyType: string) => boolean;
   createCustomMediaKeys: (keyType: string) => ICustomMediaKeys;
   setMediaKeys: (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ) => Promise<unknown>;
 } {
@@ -64,11 +64,10 @@ export default function getMozMediaKeysCallbacks(): {
     return new MozMediaKeysConstructor(keyType);
   };
   const setMediaKeys = (
-    mediaElement: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ): Promise<unknown> => {
     return wrapInPromise(() => {
-      const elt: ICompatHTMLMediaElement = mediaElement;
       if (
         elt.mozSetMediaKeys === undefined ||
         typeof elt.mozSetMediaKeys !== "function"

package/src/compat/eme/custom_media_keys/old_webkit_media_keys.ts

@@ -20,6 +20,7 @@ import isNullOrUndefined from "../../../utils/is_null_or_undefined";
 import noop from "../../../utils/noop";
 import { utf8ToStr } from "../../../utils/string_parsing";
 import wrapInPromise from "../../../utils/wrapInPromise";
+import type { IMediaElement } from "../../browser_compatibility_types";
 import type {
   ICustomMediaKeys,
   ICustomMediaKeySession,
@@ -165,9 +166,7 @@ class OldWebKitCustomMediaKeys implements ICustomMediaKeys {
     this._keySystem = keySystem;
   }
 
-  _setVideo(
-    videoElement: IOldWebkitHTMLMediaElement | HTMLMediaElement,
-  ): Promise<unknown> {
+  _setVideo(videoElement: IOldWebkitHTMLMediaElement | IMediaElement): Promise<unknown> {
     return wrapInPromise(() => {
       if (!isOldWebkitMediaElement(videoElement)) {
         throw new Error("Video not attached to the MediaKeys");
@@ -192,7 +191,7 @@ export default function getOldWebKitMediaKeysCallbacks(): {
   isTypeSupported: (keyType: string) => boolean;
   createCustomMediaKeys: (keyType: string) => OldWebKitCustomMediaKeys;
   setMediaKeys: (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ) => Promise<unknown>;
 } {
@@ -220,7 +219,7 @@ export default function getOldWebKitMediaKeysCallbacks(): {
   const createCustomMediaKeys = (keyType: string) =>
     new OldWebKitCustomMediaKeys(keyType);
   const setMediaKeys = (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ): Promise<unknown> => {
     if (mediaKeys === null) {

package/src/compat/eme/custom_media_keys/types.ts

@@ -15,6 +15,7 @@
  */
 
 import type { IEventEmitter } from "../../../utils/event_emitter";
+import type { IMediaElement } from "../../browser_compatibility_types";
 
 export interface ICustomMediaKeySession extends IEventEmitter<IMediaKeySessionEvents> {
   // Attributes
@@ -38,7 +39,7 @@ export interface ICustomMediaKeySession extends IEventEmitter<IMediaKeySessionEv
 }
 
 export interface ICustomMediaKeys {
-  _setVideo: (vid: HTMLMediaElement) => Promise<unknown>;
+  _setVideo: (vid: IMediaElement) => Promise<unknown>;
   createSession(sessionType?: MediaKeySessionType): ICustomMediaKeySession;
   setServerCertificate(setServerCertificate: BufferSource): Promise<void>;
 }
@@ -59,3 +60,7 @@ export interface IMediaKeySessionEvents {
   // "keyerror"
   /* "error" */
 }
+
+export interface ICustomMediaEncryptedEvent extends MediaEncryptedEvent {
+  forceSessionRecreation?: boolean | undefined;
+}

package/src/compat/eme/custom_media_keys/webkit_media_keys.ts

@@ -18,7 +18,7 @@ import EventEmitter from "../../../utils/event_emitter";
 import noop from "../../../utils/noop";
 import startsWith from "../../../utils/starts_with";
 import wrapInPromise from "../../../utils/wrapInPromise";
-import type { ICompatHTMLMediaElement } from "../../browser_compatibility_types";
+import type { IMediaElement } from "../../browser_compatibility_types";
 import getWebKitFairplayInitData from "../get_webkit_fairplay_initdata";
 import type {
   ICustomMediaKeys,
@@ -30,7 +30,7 @@ import type { IWebKitMediaKeys } from "./webkit_media_keys_constructor";
 import { WebKitMediaKeysConstructor } from "./webkit_media_keys_constructor";
 
 export interface ICustomWebKitMediaKeys {
-  _setVideo: (videoElement: HTMLMediaElement) => void;
+  _setVideo: (videoElement: IMediaElement) => void;
   createSession(mimeType: string, initData: Uint8Array): ICustomMediaKeySession;
   setServerCertificate(setServerCertificate: BufferSource): Promise<void>;
 }
@@ -47,15 +47,11 @@ function isFairplayKeyType(keyType: string): boolean {
 /**
  * Set media keys on video element using native HTMLMediaElement
  * setMediaKeys from WebKit.
- * @param {HTMLMediaElement} videoElement
+ * @param {HTMLMediaElement} elt
  * @param {Object|null} mediaKeys
  * @returns {Promise}
  */
-function setWebKitMediaKeys(
-  videoElement: HTMLMediaElement,
-  mediaKeys: unknown,
-): Promise<unknown> {
-  const elt: ICompatHTMLMediaElement = videoElement;
+function setWebKitMediaKeys(elt: IMediaElement, mediaKeys: unknown): Promise<unknown> {
   return wrapInPromise(() => {
     if (elt.webkitSetMediaKeys === undefined) {
       throw new Error("No webKitMediaKeys API.");
@@ -80,7 +76,7 @@ class WebkitMediaKeySession
   public expiration: number;
   public keyStatuses: ICustomMediaKeyStatusMap;
 
-  private readonly _videoElement: HTMLMediaElement;
+  private readonly _videoElement: IMediaElement;
   private readonly _keyType: string;
   private _nativeSession: undefined | MediaKeySession;
   private _serverCertificate: Uint8Array | undefined;
@@ -94,7 +90,7 @@ class WebkitMediaKeySession
    * @param {Uint8Array | undefined} serverCertificate
    */
   constructor(
-    mediaElement: HTMLMediaElement,
+    mediaElement: IMediaElement,
     keyType: string,
     serverCertificate?: Uint8Array,
   ) {
@@ -144,7 +140,7 @@ class WebkitMediaKeySession
 
   public generateRequest(_initDataType: string, initData: ArrayBuffer): Promise<void> {
     return new Promise((resolve) => {
-      const elt = this._videoElement as ICompatHTMLMediaElement;
+      const elt = this._videoElement;
       if (elt.webkitKeys?.createSession === undefined) {
         throw new Error("No WebKitMediaKeys API.");
       }
@@ -233,7 +229,7 @@ class WebkitMediaKeySession
 }
 
 class WebKitCustomMediaKeys implements ICustomWebKitMediaKeys {
-  private _videoElement?: HTMLMediaElement;
+  private _videoElement?: IMediaElement;
   private _mediaKeys?: IWebKitMediaKeys;
   private _serverCertificate?: Uint8Array;
   private _keyType: string;
@@ -246,7 +242,7 @@ class WebKitCustomMediaKeys implements ICustomWebKitMediaKeys {
     this._mediaKeys = new WebKitMediaKeysConstructor(keyType);
   }
 
-  _setVideo(videoElement: HTMLMediaElement): Promise<unknown> {
+  _setVideo(videoElement: IMediaElement): Promise<unknown> {
     this._videoElement = videoElement;
     if (this._videoElement === undefined) {
       throw new Error("Video not attached to the MediaKeys");
@@ -275,7 +271,7 @@ export default function getWebKitMediaKeysCallbacks(): {
   isTypeSupported: (keyType: string) => boolean;
   createCustomMediaKeys: (keyType: string) => WebKitCustomMediaKeys;
   setMediaKeys: (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ) => Promise<unknown>;
 } {
@@ -285,7 +281,7 @@ export default function getWebKitMediaKeysCallbacks(): {
   const isTypeSupported = WebKitMediaKeysConstructor.isTypeSupported;
   const createCustomMediaKeys = (keyType: string) => new WebKitCustomMediaKeys(keyType);
   const setMediaKeys = (
-    elt: HTMLMediaElement,
+    elt: IMediaElement,
     mediaKeys: MediaKeys | ICustomMediaKeys | null,
   ): Promise<unknown> => {
     if (mediaKeys === null) {

package/src/compat/eme/custom_media_keys/webkit_media_keys_constructor.ts

@@ -15,7 +15,7 @@
  */
 
 import globalScope from "../../../utils/global_scope";
-import type { ICompatHTMLMediaElement } from "../../browser_compatibility_types";
+import type { IMediaElement } from "../../browser_compatibility_types";
 
 type IWebKitMediaKeys = unknown;
 
@@ -36,8 +36,7 @@ if (
   WebKitMediaKeys !== undefined &&
   typeof WebKitMediaKeys.isTypeSupported === "function" &&
   typeof WebKitMediaKeys.prototype.createSession === "function" &&
-  typeof (HTMLMediaElement.prototype as ICompatHTMLMediaElement).webkitSetMediaKeys ===
-    "function"
+  typeof (HTMLMediaElement.prototype as IMediaElement).webkitSetMediaKeys === "function"
 ) {
   WebKitMediaKeysConstructor = WebKitMediaKeys;
 }