react-native-theoplayer 1.6.1 → 1.7.1

package/src/api/utils/TypeUtils.ts

@@ -0,0 +1,39 @@
+import { Buffer } from 'buffer';
+
+// from object
+export function fromObjectToString(obj: { [key: string]: any }): string {
+  return JSON.stringify(obj);
+}
+export function fromObjectToBase64String(obj: { [key: string]: any }): string {
+  return fromStringToBase64String(fromObjectToString(obj));
+}
+export function fromObjectToUint8Array(obj: { [key: string]: any }): Uint8Array {
+  return fromStringToUint8Array(fromObjectToString(obj));
+}
+
+// from string
+export function fromStringToBase64String(str: string): string {
+  return Buffer.from(str, 'utf8').toString('base64');
+}
+export function fromStringToUint8Array(str: string): Uint8Array {
+  return Buffer.from(str, 'utf8');
+}
+export function fromStringToObject(str: string): { [key: string]: any } {
+  return JSON.parse(str);
+}
+
+// from base64 string
+export function fromBase64StringToUint8Array(str: string): Uint8Array {
+  return Buffer.from(str, 'base64');
+}
+
+// from uint8Array
+export function fromUint8ArrayToBase64String(array: Uint8Array): string {
+  return Buffer.from(array).toString('base64');
+}
+export function fromUint8ArrayToString(array: Uint8Array): string {
+  return Buffer.from(array).toString('utf8');
+}
+export function fromUint8ArrayToObject(array: Uint8Array): { [key: string]: any } {
+  return fromStringToObject(fromUint8ArrayToString(array));
+}

package/src/api/utils/barrel.ts

@@ -0,0 +1 @@
+export * from './TypeUtils';

package/src/index.tsx

@@ -1,2 +1,3 @@
 export * from './api/barrel';
 export { THEOplayerView } from './internal/THEOplayerView';
+export { ContentProtectionRegistry } from './internal/drm/ContentProtectionRegistry';

package/src/internal/THEOplayerView.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { findNodeHandle, StyleSheet, requireNativeComponent, View, UIManager, Platform, NativeSyntheticEvent } from 'react-native';
+import { findNodeHandle, StyleSheet, requireNativeComponent, View, UIManager, Platform, NativeSyntheticEvent, HostComponent } from 'react-native';
 import type {
   DurationChangeEvent,
   ErrorEvent,
@@ -13,10 +13,14 @@ import type {
   SegmentNotFoundEvent,
   TextTrackListEvent,
   TextTrackEvent,
+  AdEvent,
+  AdsAPI,
 } from 'react-native-theoplayer';
 
 import styles from './THEOplayerView.style';
 import type { SourceDescription } from 'react-native-theoplayer';
+import { THEOplayerNativeAdsAPI } from './ads/THEOplayerNativeAdsAPI';
+import { decodeNanInf } from './utils/TypeUtils';
 
 interface THEOplayerRCTViewProps extends THEOplayerViewProps {
   ref: React.RefObject<THEOplayerViewNativeComponent>;
@@ -41,6 +45,7 @@ interface THEOplayerRCTViewProps extends THEOplayerViewProps {
   onNativeSegmentNotFound: (event: NativeSyntheticEvent<SegmentNotFoundEvent>) => void;
   onNativeTextTrackListEvent: (event: NativeSyntheticEvent<TextTrackListEvent>) => void;
   onNativeTextTrackEvent: (event: NativeSyntheticEvent<TextTrackEvent>) => void;
+  onNativeAdEvent: (event: NativeSyntheticEvent<AdEvent>) => void;
   onNativeFullscreenPlayerWillPresent?: () => void;
   onNativeFullscreenPlayerDidPresent?: () => void;
   onNativeFullscreenPlayerWillDismiss?: () => void;
@@ -52,12 +57,13 @@ interface THEOplayerRCTViewState {
   error?: PlayerError;
 }
 
-interface THEOplayerViewNativeComponent extends THEOplayerViewComponent {
+interface THEOplayerViewNativeComponent extends THEOplayerViewComponent, HostComponent<THEOplayerViewProps> {
   setNativeProps: (props: Partial<THEOplayerRCTViewProps>) => void;
 }
 
-export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> {
+export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> implements THEOplayerViewComponent {
   private readonly _root: React.RefObject<THEOplayerViewNativeComponent>;
+  private readonly _adsApi: THEOplayerNativeAdsAPI;
 
   private static initialState: THEOplayerRCTViewState = {
     isBuffering: false,
@@ -68,6 +74,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     super(props);
     this._root = React.createRef();
     this.state = THEOplayerView.initialState;
+    this._adsApi = new THEOplayerNativeAdsAPI(this);
   }
 
   componentWillUnmount() {
@@ -79,7 +86,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
 
   private destroyTheoPlayer() {
     const node = findNodeHandle(this._root.current);
-    const command = (UIManager as {[index: string]: any})['THEOplayerRCTView'].Commands.destroy;
+    const command = (UIManager as { [index: string]: any })['THEOplayerRCTView'].Commands.destroy;
     const params: any[] = [];
     UIManager.dispatchViewManagerCommand(node, command, params);
   }
@@ -91,6 +98,14 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     this.setNativeProps({ seek: time });
   }
 
+  public get nativeHandle(): number | null {
+    return findNodeHandle(this._root.current);
+  }
+
+  public get ads(): AdsAPI {
+    return this._adsApi;
+  }
+
   private reset() {
     this.setState(THEOplayerView.initialState);
   }
@@ -140,7 +155,10 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
 
   private _onLoadedMetadata = (event: NativeSyntheticEvent<LoadedMetadataEvent>) => {
     if (this.props.onLoadedMetadata) {
-      this.props.onLoadedMetadata(event.nativeEvent);
+      this.props.onLoadedMetadata({
+        ...event.nativeEvent,
+        duration: decodeNanInf(event.nativeEvent.duration),
+      });
     }
   };
 
@@ -169,6 +187,9 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
   };
 
   private _onPlaying = () => {
+    // potentially notify change in buffering state
+    this.maybeChangeBufferingState(false);
+
     if (this.props.onPlaying) {
       this.props.onPlaying();
     }
@@ -215,7 +236,9 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
 
   private _onDurationChange = (event: NativeSyntheticEvent<DurationChangeEvent>) => {
     if (this.props.onDurationChange) {
-      this.props.onDurationChange(event.nativeEvent);
+      this.props.onDurationChange({
+        duration: decodeNanInf(event.nativeEvent.duration),
+      });
     }
   };
 
@@ -237,6 +260,12 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     }
   };
 
+  private _onAdEvent = (event: NativeSyntheticEvent<AdEvent>) => {
+    if (this.props.onAdEvent) {
+      this.props.onAdEvent(event.nativeEvent);
+    }
+  };
+
   private _onFullscreenPlayerWillPresent = () => {
     if (this.props.onFullscreenPlayerWillPresent) {
       this.props.onFullscreenPlayerWillPresent();
@@ -261,9 +290,20 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     }
   };
 
-  public render(): JSX.Element {
-    const wrapperProps = Object.assign({}, this.props);
+  private buildWrapperProps(): THEOplayerViewProps {
+    const { targetVideoQuality } = this.props;
+    return Object.assign(
+      {},
+      {
+        ...this.props,
+        // Always pass an array for targetVideoQuality.
+        targetVideoQuality: !targetVideoQuality ? [] : Array.isArray(targetVideoQuality) ? targetVideoQuality : [targetVideoQuality],
+      },
+    );
+  }
 
+  public render(): JSX.Element {
+    const wrapperProps = this.buildWrapperProps();
     return (
       <View style={[styles.base, wrapperProps.style]}>
         <THEOplayerRCTView
@@ -287,6 +327,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
           onNativeSegmentNotFound={this._onSegmentNotFound}
           onNativeTextTrackListEvent={this._onTextTrackListEvent}
           onNativeTextTrackEvent={this._onTextTrackEvent}
+          onNativeAdEvent={this._onAdEvent}
           onNativeFullscreenPlayerWillPresent={this._onFullscreenPlayerWillPresent}
           onNativeFullscreenPlayerDidPresent={this._onFullscreenPlayerDidPresent}
           onNativeFullscreenPlayerWillDismiss={this._onFullscreenPlayerWillDismiss}

package/src/internal/THEOplayerView.web.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import type { PlayerError, TextTrack, THEOplayerViewProps, TimeRange } from 'react-native-theoplayer';
-import { TextTrackEventType, TrackListEventType } from 'react-native-theoplayer';
+import type { AdEvent, AdsAPI, PlayerError, TextTrack, THEOplayerViewProps, TimeRange } from 'react-native-theoplayer';
+import { AdEventNames, TextTrackEventType, THEOplayerViewComponent, TrackListEventType } from 'react-native-theoplayer';
 import type { Event, TextTrackCue as NativeTextTrackCue } from 'theoplayer';
 
 import type {
@@ -13,15 +13,17 @@ import type {
   TextTrack as NativeTextTrack,
 } from 'theoplayer';
 import * as THEOplayer from 'theoplayer';
-import { fromNativeCue, fromNativeMediaTrack, fromNativeTextTrack } from './web/TrackUtils';
+import { findNativeQualitiesByUid, fromNativeCue, fromNativeMediaTrack, fromNativeTextTrack } from './web/TrackUtils';
+import { THEOplayerWebAdsAPI } from './ads/THEOplayerWebAdsAPI';
 
 interface THEOplayerRCTViewState {
   isBuffering: boolean;
   error?: PlayerError;
 }
 
-export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> {
+export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> implements THEOplayerViewComponent {
   private _player: THEOplayer.ChromelessPlayer | null = null;
+  private _adsApi: THEOplayerWebAdsAPI;
 
   private static initialState: THEOplayerRCTViewState = {
     isBuffering: false,
@@ -31,10 +33,11 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
   constructor(props: THEOplayerViewProps) {
     super(props);
     this.state = THEOplayerView.initialState;
+    this._adsApi = new THEOplayerWebAdsAPI(this);
   }
 
   componentDidMount() {
-    const { config, source } = this.props;
+    const { config, source, abrConfig } = this.props;
     const element = document.querySelector('.theoplayer-container') as HTMLElement;
     if (config?.chromeless === true || config?.chromeless === undefined) {
       this._player = new THEOplayer.ChromelessPlayer(element, {
@@ -50,6 +53,8 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
         },
       });
     }
+
+    Object.assign(this._player.abr, abrConfig);
     this._player.prepareWithUserAction();
     this._player.source = source;
     this.addEventListeners();
@@ -70,6 +75,14 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     }
   }
 
+  public get ads(): AdsAPI {
+    return this._adsApi;
+  }
+
+  public get nativePlayer(): THEOplayer.ChromelessPlayer | null {
+    return this._player;
+  }
+
   private reset() {
     this.setState(THEOplayerView.initialState);
   }
@@ -79,12 +92,14 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
       return;
     }
     // track property changes
-    const { paused, volume, selectedTextTrack, selectedAudioTrack, selectedVideoTrack, source, muted, playbackRate, fullscreen } = this.props;
+    const { paused, volume, selectedTextTrack, selectedAudioTrack, selectedVideoTrack, targetVideoQuality, source, muted, playbackRate, fullscreen } =
+      this.props;
     const {
       paused: wasPaused,
       selectedTextTrack: prevSelectedTextTrack,
       selectedAudioTrack: prevSelectedAudioTrack,
       selectedVideoTrack: prevSelectedVideoTrack,
+      targetVideoQuality: prevTargetVideoQuality,
       source: prevSource,
       muted: wasMuted,
       playbackRate: prevPlaybackRate,
@@ -141,6 +156,12 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
         videoTrack.enabled = videoTrack.uid === selectedVideoTrack;
       });
     }
+    if (targetVideoQuality != prevTargetVideoQuality) {
+      const videoTrack = this._player.videoTracks.find((videoTrack: NativeMediaTrack) => videoTrack.uid === selectedVideoTrack);
+      if (videoTrack) {
+        videoTrack.targetQuality = findNativeQualitiesByUid(videoTrack, targetVideoQuality);
+      }
+    }
   }
 
   private maybeChangeBufferingState(isBuffering: boolean) {
@@ -227,7 +248,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
           textTracks: player.textTracks.map((textTrack: NativeTextTrack) => fromNativeTextTrack(textTrack)),
           audioTracks: player.audioTracks.map((audioTrack: NativeMediaTrack) => fromNativeMediaTrack(audioTrack)),
           videoTracks: player.videoTracks.map((videoTrack: NativeMediaTrack) => fromNativeMediaTrack(videoTrack)),
-          duration: 1e03 * player.duration,
+          duration: 1e3 * player.duration,
           selectedTextTrack: player.textTracks.find((track: NativeTextTrack) => track.mode === 'showing')?.uid,
           selectedVideoTrack: player.videoTracks.find((track: NativeMediaTrack) => track.enabled)?.uid,
           selectedAudioTrack: player.audioTracks.find((track: NativeMediaTrack) => track.enabled)?.uid,
@@ -274,6 +295,9 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     });
 
     player.addEventListener('playing', () => {
+      // potentially notify change in buffering state
+      this.maybeChangeBufferingState(false);
+
       const { onPlaying } = this.props;
       if (onPlaying) {
         onPlaying();
@@ -384,6 +408,12 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
         });
       }
     });
+    player.ads?.addEventListener(AdEventNames, (event) => {
+      const { onAdEvent } = this.props;
+      if (onAdEvent) {
+        onAdEvent(event as AdEvent);
+      }
+    });
   }
 
   public render(): JSX.Element {

package/src/internal/ads/THEOplayerNativeAdsAPI.ts

@@ -0,0 +1,44 @@
+import type { AdBreak, AdsAPI } from "react-native-theoplayer";
+import { NativeModules } from "react-native";
+import type { AdDescription } from "react-native-theoplayer";
+import type { Ad } from "react-native-theoplayer";
+import type { THEOplayerView } from "react-native-theoplayer";
+import type { GoogleDAI } from "react-native-theoplayer";
+import { THEOplayerNativeGoogleDAI } from "./THEOplayerNativeGoogleDAI";
+
+export class THEOplayerNativeAdsAPI implements AdsAPI {
+
+  private readonly _dai: GoogleDAI;
+
+  constructor(private _player: THEOplayerView) {
+    this._dai = new THEOplayerNativeGoogleDAI(this._player);
+  }
+
+  playing(): Promise<boolean> {
+    return NativeModules.AdsModule.playing(this._player.nativeHandle);
+  }
+
+  skip(): void {
+    NativeModules.AdsModule.skip(this._player.nativeHandle);
+  }
+
+  currentAdBreak(): Promise<AdBreak> {
+    return NativeModules.AdsModule.currentAdBreak(this._player.nativeHandle);
+  }
+
+  currentAds(): Promise<Ad[]> {
+    return NativeModules.AdsModule.currentAds(this._player.nativeHandle);
+  }
+
+  scheduledAdBreaks(): Promise<AdBreak[]> {
+    return NativeModules.AdsModule.scheduledAdBreaks(this._player.nativeHandle);
+  }
+
+  schedule(ad: AdDescription): void {
+    NativeModules.AdsModule.schedule(this._player.nativeHandle, ad);
+  }
+
+  get dai(): GoogleDAI | undefined {
+    return this._dai;
+  }
+}

package/src/internal/ads/THEOplayerNativeGoogleDAI.ts

@@ -0,0 +1,23 @@
+import type { GoogleDAI } from 'react-native-theoplayer';
+import { NativeModules } from 'react-native';
+import type { THEOplayerView } from 'react-native-theoplayer';
+
+export class THEOplayerNativeGoogleDAI implements GoogleDAI {
+  public constructor(private readonly _player: THEOplayerView) {}
+
+  get snapback(): Promise<boolean> {
+    return NativeModules.AdsModule.daiSnapback(this._player.nativeHandle);
+  }
+
+  setSnapback(enabled: boolean): void {
+    NativeModules.AdsModule.daiSetSnapback(this._player.nativeHandle, enabled);
+  }
+
+  contentTimeForStreamTime(time: number): Promise<number> {
+    return NativeModules.AdsModule.daiContentTimeForStreamTime(this._player.nativeHandle, time);
+  }
+
+  streamTimeForContentTime(time: number): Promise<number> {
+    return NativeModules.AdsModule.daiStreamTimeForContentTime(this._player.nativeHandle, time);
+  }
+}

package/src/internal/ads/THEOplayerWebAdsAPI.ts

@@ -0,0 +1,51 @@
+import type { Ad, AdDescription, AdBreak, AdsAPI } from "react-native-theoplayer";
+import type { THEOplayerView } from "../THEOplayerView.web";
+import type { GoogleDAI } from "react-native-theoplayer";
+import { THEOplayerWebGoogleDAI } from "./THEOplayerWebGoogleDAI";
+
+export class THEOplayerWebAdsAPI implements AdsAPI {
+
+  private _dai: GoogleDAI | undefined;
+
+  constructor(private readonly _player: THEOplayerView) {
+  }
+
+  currentAdBreak(): Promise<AdBreak> {
+    const adBreak = this._player.nativePlayer?.ads?.currentAdBreak;
+    return adBreak ? Promise.resolve(adBreak) : Promise.reject<AdBreak>();
+  }
+
+  currentAds(): Promise<Ad[]> {
+    const ads = this._player.nativePlayer?.ads?.currentAds;
+    return ads ? Promise.resolve(ads) : Promise.reject<Ad[]>();
+  }
+
+  playing(): Promise<boolean> {
+    return Promise.resolve<boolean>(this._player.nativePlayer?.ads?.playing || false);
+  }
+
+  schedule(ad: AdDescription): void {
+    this._player.nativePlayer?.ads?.schedule(ad);
+  }
+
+  scheduledAdBreaks(): Promise<AdBreak[]> {
+    const adBreaks = this._player.nativePlayer?.ads?.scheduledAdBreaks;
+    return adBreaks ? Promise.resolve(adBreaks) : Promise.reject<AdBreak[]>();
+  }
+
+  skip(): void {
+    this._player.nativePlayer?.ads?.skip();
+  }
+
+  get dai(): GoogleDAI | undefined {
+    if (!this._dai) {
+      const nativeDai = this._player.nativePlayer?.ads?.dai;
+      if (!nativeDai) {
+        // Not native DAI available
+        return undefined;
+      }
+      this._dai = new THEOplayerWebGoogleDAI(nativeDai);
+    }
+    return this._dai;
+  }
+}

package/src/internal/ads/THEOplayerWebGoogleDAI.ts

@@ -0,0 +1,22 @@
+import type { GoogleDAI } from 'react-native-theoplayer';
+import type { GoogleDAI as NativeGoogleDAI } from 'theoplayer';
+
+export class THEOplayerWebGoogleDAI implements GoogleDAI {
+  public constructor(private readonly _googleDAI: NativeGoogleDAI) {}
+
+  get snapback(): Promise<boolean> {
+    return Promise.resolve(this._googleDAI.snapback);
+  }
+
+  setSnapback(enabled: boolean): void {
+    this._googleDAI.snapback = enabled;
+  }
+
+  contentTimeForStreamTime(time: number): Promise<number> {
+    return Promise.resolve(this._googleDAI.contentTimeForStreamTime(time));
+  }
+
+  streamTimeForContentTime(time: number): Promise<number> {
+    return Promise.resolve(this._googleDAI.streamTimeForContentTime(time));
+  }
+}

package/src/internal/drm/ContentProtectionRegistry.ts

@@ -0,0 +1,173 @@
+import type { CertificateRequest, ContentProtectionAPI, DRMConfiguration, LicenseRequest } from 'react-native-theoplayer';
+import type { KeySystemId } from 'react-native-theoplayer';
+import type { ContentProtectionIntegrationFactory } from 'react-native-theoplayer';
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import type { ContentProtectionIntegration } from 'react-native-theoplayer';
+import type { NativeContentProtectionEvent } from './NativeContentProtectionEvent';
+import { fromNativeLicenseRequest, NativeLicenseRequest, toNativeLicenseRequest } from './NativeLicenseRequest';
+import { fromNativeLicenseResponse, NativeLicenseResponse, toNativeLicenseResponseResult } from './NativeLicenseResponse';
+import { fromNativeCertificateRequest, NativeCertificateRequest, toNativeCertificateRequest } from './NativeCertificateRequest';
+import { fromNativeCertificateResponse, NativeCertificateResponse, toNativeCertificateResponseResult } from './NativeCertificateResponse';
+import { isBufferSource } from '../utils/TypeUtils';
+
+interface WrappedContentProtectionIntegrationFactory {
+  integrationId: string;
+  keySystemId: string;
+  integrationFactory: ContentProtectionIntegrationFactory;
+}
+
+interface WrappedContentProtectionIntegration {
+  integrationId: string;
+  keySystemId: string;
+  integration: ContentProtectionIntegration;
+}
+
+interface BuildEvent extends NativeContentProtectionEvent {
+  drmConfig: DRMConfiguration;
+}
+
+interface ExtractFaiplayContentIdEvent extends NativeContentProtectionEvent {
+  fairplaySkdUrl: string;
+}
+
+export class NativeContentProtectionRegistry implements ContentProtectionAPI {
+  private emitter: NativeEventEmitter;
+  private registeredFactories: WrappedContentProtectionIntegrationFactory[] = [];
+  private currentIntegration: WrappedContentProtectionIntegration | undefined = undefined;
+
+  constructor() {
+    this.emitter = new NativeEventEmitter(NativeModules.ContentProtectionModule);
+    this.emitter.addListener('onBuildIntegration', this.onBuildIntegrationRequest);
+    this.emitter.addListener('onCertificateRequest', this.onCertificateRequest);
+    this.emitter.addListener('onCertificateResponse', this.onCertificateResponse);
+    this.emitter.addListener('onLicenseRequest', this.onLicenseRequest);
+    this.emitter.addListener('onLicenseResponse', this.onLicenseResponse);
+    this.emitter.addListener('onExtractFairplayContentId', this.onExtractFairplayContentId);
+  }
+
+  registerContentProtectionIntegration(integrationId: string, keySystemId: KeySystemId, integrationFactory: ContentProtectionIntegrationFactory) {
+    this.registeredFactories.push({
+      integrationId,
+      keySystemId,
+      integrationFactory,
+    });
+    NativeModules.ContentProtectionModule.registerContentProtectionIntegration(integrationId, keySystemId);
+  }
+
+  private getFactory(integrationId: string, keySystemId: string): ContentProtectionIntegrationFactory | undefined {
+    return this.registeredFactories.find((init) => init.integrationId === integrationId && init.keySystemId === keySystemId)?.integrationFactory;
+  }
+
+  private getIntegration(integrationId: string, keySystemId: string): ContentProtectionIntegration | undefined {
+    return this.currentIntegration?.integrationId === integrationId && this.currentIntegration?.keySystemId === keySystemId
+      ? this.currentIntegration?.integration
+      : undefined;
+  }
+
+  private onBuildIntegrationRequest = (event: BuildEvent) => {
+    const { requestId, integrationId, keySystemId, drmConfig } = event;
+    console.log('ContentProtectionModule', `onBuildIntegrationRequest ${integrationId} ${keySystemId}`);
+    const factory = this.getFactory(integrationId, keySystemId);
+    if (factory) {
+      this.currentIntegration = {
+        integrationId,
+        keySystemId,
+        integration: factory.build(drmConfig),
+      };
+      NativeModules.ContentProtectionModule.onBuildProcessed({ requestId, resultString: 'success' });
+    } else {
+      NativeModules.ContentProtectionModule.onBuildProcessed({
+        requestId,
+        resultString: 'failed',
+      });
+    }
+  };
+
+  private onCertificateRequest = async (request: NativeCertificateRequest) => {
+    const { requestId, integrationId, keySystemId } = request;
+    console.log('ContentProtectionModule', `onCertificateRequest ${integrationId} ${keySystemId}`);
+    const integration = this.getIntegration(integrationId, keySystemId);
+    if (integration?.onCertificateRequest) {
+      const result = await integration.onCertificateRequest(fromNativeCertificateRequest(request));
+      // TODO: we also want to support ArrayBufferView results
+      if (isBufferSource(result)) {
+        const nativeResponse = toNativeCertificateResponseResult(requestId, integrationId, keySystemId, result as ArrayBuffer);
+        NativeModules.ContentProtectionModule.onCertificateRequestProcessedAsCertificate(nativeResponse);
+      } else if (result as CertificateRequest) {
+        const modifiedNativeRequest = toNativeCertificateRequest(requestId, integrationId, keySystemId, result as CertificateRequest);
+        NativeModules.ContentProtectionModule.onCertificateRequestProcessedAsRequest(modifiedNativeRequest);
+      }
+    } else {
+      NativeModules.ContentProtectionModule.onCertificateRequestProcessedAsRequest(request);
+    }
+  };
+
+  private onCertificateResponse = async (response: NativeCertificateResponse) => {
+    const { requestId, integrationId, keySystemId } = response;
+    console.log('ContentProtectionModule', `onCertificateResponse ${integrationId} ${keySystemId}`);
+    const integration = this.getIntegration(integrationId, keySystemId);
+    if (integration?.onCertificateResponse) {
+      const responseResult = await integration.onCertificateResponse(fromNativeCertificateResponse(response));
+      // TODO: we also want to support ArrayBufferView results
+      const modifiedNativeResponse = toNativeCertificateResponseResult(requestId, integrationId, keySystemId, responseResult as ArrayBuffer);
+      NativeModules.ContentProtectionModule.onCertificateResponseProcessed(modifiedNativeResponse);
+    } else {
+      NativeModules.ContentProtectionModule.onCertificateResponseProcessed(response);
+    }
+  };
+
+  private onLicenseRequest = async (request: NativeLicenseRequest) => {
+    const { requestId, integrationId, keySystemId } = request;
+    console.log('ContentProtectionModule', `onLicenseRequest ${integrationId} ${keySystemId}`);
+    const integration = this.getIntegration(integrationId, keySystemId);
+    // Optionally let the custom integration modify the request.
+    if (integration?.onLicenseRequest) {
+      const result = await integration.onLicenseRequest(fromNativeLicenseRequest(request));
+      // TODO: we also want to support ArrayBufferView results
+      if (isBufferSource(result)) {
+        const nativeResponse = toNativeLicenseResponseResult(requestId, integrationId, keySystemId, result as ArrayBuffer);
+        NativeModules.ContentProtectionModule.onLicenseRequestProcessedAsLicense(nativeResponse);
+      } else if (result as LicenseRequest) {
+        const modifiedNativeRequest = toNativeLicenseRequest(requestId, integrationId, keySystemId, result as LicenseRequest);
+        NativeModules.ContentProtectionModule.onLicenseRequestProcessedAsRequest(modifiedNativeRequest);
+      }
+    } else {
+      NativeModules.ContentProtectionModule.onLicenseRequestProcessedAsRequest(request);
+    }
+  };
+
+  private onLicenseResponse = async (response: NativeLicenseResponse) => {
+    const { requestId, integrationId, keySystemId } = response;
+    console.log('ContentProtectionModule', `onLicenseResponse ${integrationId} ${keySystemId}`);
+    const integration = this.getIntegration(integrationId, keySystemId);
+    if (integration?.onLicenseResponse) {
+      const responseResult = await integration.onLicenseResponse(fromNativeLicenseResponse(response));
+      // TODO: we also want to support ArrayBufferView results
+      const modifiedNativeResponse = toNativeLicenseResponseResult(requestId, integrationId, keySystemId, responseResult as ArrayBuffer);
+      NativeModules.ContentProtectionModule.onLicenseResponseProcessed(modifiedNativeResponse);
+    } else {
+      NativeModules.ContentProtectionModule.onLicenseResponseProcessed(response);
+    }
+  };
+
+  private onExtractFairplayContentId = async (event: ExtractFaiplayContentIdEvent) => {
+    const { integrationId, keySystemId, fairplaySkdUrl, requestId } = event;
+    console.log('ContentProtectionModule', `onExtractFairplayContentId ${integrationId} ${keySystemId}`);
+    const integration = this.getIntegration(integrationId, keySystemId);
+    if (integration?.extractFairplayContentId) {
+      const contentId = await integration.extractFairplayContentId(fairplaySkdUrl);
+      NativeModules.ContentProtectionModule.onExtractFairplayContentIdProcessed({
+        requestId,
+        contentId,
+      });
+    } else {
+      const contentId = fairplaySkdUrl;
+      NativeModules.ContentProtectionModule.onExtractFairplayContentIdProcessed({
+        requestId,
+        contentId,
+      });
+    }
+  };
+}
+
+export const ContentProtectionRegistry = new NativeContentProtectionRegistry();

package/src/internal/drm/ContentProtectionRegistry.web.ts

@@ -0,0 +1,10 @@
+import type { ContentProtectionAPI, ContentProtectionIntegrationFactory, KeySystemId } from 'react-native-theoplayer';
+import { registerContentProtectionIntegration } from 'theoplayer';
+
+export class WebContentProtectionRegistry implements ContentProtectionAPI {
+  registerContentProtectionIntegration(integrationId: string, keySystem: KeySystemId, integrationFactory: ContentProtectionIntegrationFactory): void {
+    registerContentProtectionIntegration(integrationId, keySystem, integrationFactory);
+  }
+}
+
+export const ContentProtectionRegistry = new WebContentProtectionRegistry();