bitmovin-player-react-native 0.1.0 → 0.2.1

package/lib/index.mjs

@@ -5,15 +5,253 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// src/player.ts
-import { NativeModules, Platform } from "react-native";
-var PlayerModule = NativeModules.PlayerModule;
-var Player = class {
+// src/components/PlayerView/index.tsx
+import React, { useRef, useEffect } from "react";
+import {
+  Platform,
+  UIManager,
+  StyleSheet,
+  findNodeHandle as findNodeHandle2
+} from "react-native";
+
+// src/components/PlayerView/native.ts
+import { requireNativeComponent } from "react-native";
+var NativePlayerView = requireNativeComponent("NativePlayerView");
+
+// src/hooks/useProxy.ts
+import omit from "lodash.omit";
+import { useCallback } from "react";
+import { findNodeHandle } from "react-native";
+function unwrapNativeEvent(event) {
+  return omit(event.nativeEvent, ["target"]);
+}
+function useProxy(viewRef) {
+  return useCallback((callback) => (event) => {
+    const node = event.target._nativeTag;
+    if (node === findNodeHandle(viewRef.current)) {
+      callback?.(unwrapNativeEvent(event));
+    }
+  }, [viewRef]);
+}
+
+// src/components/PlayerView/index.tsx
+var styles = StyleSheet.create({
+  baseStyle: {
+    alignSelf: "stretch"
+  }
+});
+function dispatch(command, node, playerId) {
+  const commandId = Platform.OS === "android" ? UIManager.NativePlayerView.Commands[command].toString() : UIManager.getViewManagerConfig("NativePlayerView").Commands[command];
+  UIManager.dispatchViewManagerCommand(node, commandId, Platform.select({
+    ios: [playerId],
+    android: [node, playerId]
+  }));
+}
+function PlayerView(props) {
+  const nativeView = useRef(null);
+  const proxy = useProxy(nativeView);
+  const style = StyleSheet.flatten([styles.baseStyle, props.style]);
+  useEffect(() => {
+    props.player.initialize();
+    const node = findNodeHandle2(nativeView.current);
+    dispatch("attachPlayer", node, props.player.nativeId);
+  }, [props.player]);
+  return /* @__PURE__ */ React.createElement(NativePlayerView, {
+    ref: nativeView,
+    style,
+    onDestroy: proxy(props.onDestroy),
+    onEvent: proxy(props.onEvent),
+    onMuted: proxy(props.onMuted),
+    onPaused: proxy(props.onPaused),
+    onPlay: proxy(props.onPlay),
+    onPlaybackFinished: proxy(props.onPlaybackFinished),
+    onPlayerActive: proxy(props.onPlayerActive),
+    onPlayerError: proxy(props.onPlayerError),
+    onPlayerWarning: proxy(props.onPlayerWarning),
+    onPlaying: proxy(props.onPlaying),
+    onReady: proxy(props.onReady),
+    onSeek: proxy(props.onSeek),
+    onSeeked: proxy(props.onSeeked),
+    onSourceError: proxy(props.onSourceError),
+    onSourceLoad: proxy(props.onSourceLoad),
+    onSourceLoaded: proxy(props.onSourceLoaded),
+    onSourceUnloaded: proxy(props.onSourceUnloaded),
+    onSourceWarning: proxy(props.onSourceWarning),
+    onSubtitleAdded: proxy(props.onSubtitleAdded),
+    onSubtitleChanged: proxy(props.onSubtitleChanged),
+    onSubtitleRemoved: proxy(props.onSubtitleRemoved),
+    onTimeChanged: proxy(props.onTimeChanged),
+    onUnmuted: proxy(props.onUnmuted)
+  });
+}
+
+// src/drm/index.ts
+import { NativeModules as NativeModules2, Platform as Platform2 } from "react-native";
+import BatchedBridge from "react-native/Libraries/BatchedBridge/BatchedBridge";
+
+// src/nativeInstance.ts
+import { NativeModules } from "react-native";
+var Uuid = NativeModules.UuidModule;
+var NativeInstance = class {
   constructor(config) {
     __publicField(this, "nativeId");
     __publicField(this, "config");
-    __publicField(this, "load", (source) => {
-      PlayerModule.loadSource(this.nativeId, source);
+    this.config = config;
+    this.nativeId = config?.nativeId ?? Uuid.generate();
+  }
+};
+
+// src/drm/index.ts
+var DrmModule = NativeModules2.DrmModule;
+var Drm = class extends NativeInstance {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isInitialized", false);
+    __publicField(this, "isDestroyed", false);
+    __publicField(this, "initialize", () => {
+      if (!this.isInitialized) {
+        BatchedBridge.registerCallableModule(`DRM-${this.nativeId}`, this);
+        DrmModule.initWithConfig(this.nativeId, this.config);
+        this.isInitialized = true;
+      }
+    });
+    __publicField(this, "destroy", () => {
+      if (!this.isDestroyed) {
+        DrmModule.destroy(this.nativeId);
+        this.isDestroyed = true;
+      }
+    });
+    __publicField(this, "onPrepareCertificate", (certificate) => {
+      if (this.config?.fairplay?.prepareCertificate) {
+        DrmModule.setPreparedCertificate(this.nativeId, this.config?.fairplay?.prepareCertificate?.(certificate));
+      }
+    });
+    __publicField(this, "onPrepareMessage", (message, assetId) => {
+      const config = Platform2.OS === "ios" ? this.config?.fairplay : this.config?.widevine;
+      if (config && config.prepareMessage) {
+        DrmModule.setPreparedMessage(this.nativeId, Platform2.OS === "ios" ? config.prepareMessage?.(message, assetId) : config.prepareMessage?.(message));
+      }
+    });
+    __publicField(this, "onPrepareSyncMessage", (syncMessage, assetId) => {
+      if (this.config?.fairplay?.prepareSyncMessage) {
+        DrmModule.setPreparedSyncMessage(this.nativeId, this.config?.fairplay?.prepareSyncMessage?.(syncMessage, assetId));
+      }
+    });
+    __publicField(this, "onPrepareLicense", (license) => {
+      const prepareLicense = Platform2.OS === "ios" ? this.config?.fairplay?.prepareLicense : this.config?.widevine?.prepareLicense;
+      if (prepareLicense) {
+        DrmModule.setPreparedLicense(this.nativeId, prepareLicense(license));
+      }
+    });
+    __publicField(this, "onPrepareLicenseServerUrl", (licenseServerUrl) => {
+      if (this.config?.fairplay?.prepareLicenseServerUrl) {
+        DrmModule.setPreparedLicenseServerUrl(this.nativeId, this.config?.fairplay?.prepareLicenseServerUrl?.(licenseServerUrl));
+      }
+    });
+    __publicField(this, "onPrepareContentId", (contentId) => {
+      if (this.config?.fairplay?.prepareContentId) {
+        DrmModule.setPreparedContentId(this.nativeId, this.config?.fairplay?.prepareContentId?.(contentId));
+      }
+    });
+  }
+};
+
+// src/hooks/usePlayer.ts
+import { useRef as useRef2 } from "react";
+
+// src/player.ts
+import { NativeModules as NativeModules4, Platform as Platform3 } from "react-native";
+
+// src/source.ts
+import { NativeModules as NativeModules3 } from "react-native";
+var SourceModule = NativeModules3.SourceModule;
+var SourceType = /* @__PURE__ */ ((SourceType2) => {
+  SourceType2["NONE"] = "none";
+  SourceType2["HLS"] = "hls";
+  SourceType2["DASH"] = "dash";
+  SourceType2["PROGRESSIVE"] = "progressive";
+  return SourceType2;
+})(SourceType || {});
+var LoadingState = /* @__PURE__ */ ((LoadingState2) => {
+  LoadingState2[LoadingState2["UNLOADED"] = 0] = "UNLOADED";
+  LoadingState2[LoadingState2["LOADING"] = 1] = "LOADING";
+  LoadingState2[LoadingState2["LOADED"] = 2] = "LOADED";
+  return LoadingState2;
+})(LoadingState || {});
+var Source = class extends NativeInstance {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "drm");
+    __publicField(this, "isInitialized", false);
+    __publicField(this, "isDestroyed", false);
+    __publicField(this, "initialize", () => {
+      if (!this.isInitialized) {
+        if (this.config?.drmConfig) {
+          this.drm = new Drm(this.config.drmConfig);
+          this.drm.initialize();
+          SourceModule.initWithDrmConfig(this.nativeId, this.drm.nativeId, this.config);
+        } else {
+          SourceModule.initWithConfig(this.nativeId, this.config);
+        }
+        this.isInitialized = true;
+      }
+    });
+    __publicField(this, "destroy", () => {
+      if (!this.isDestroyed) {
+        SourceModule.destroy(this.nativeId);
+        this.drm?.destroy();
+        this.isDestroyed = true;
+      }
+    });
+    __publicField(this, "duration", async () => {
+      return SourceModule.duration(this.nativeId);
+    });
+    __publicField(this, "isActive", async () => {
+      return SourceModule.isActive(this.nativeId);
+    });
+    __publicField(this, "isAttachedToPlayer", async () => {
+      return SourceModule.isAttachedToPlayer(this.nativeId);
+    });
+    __publicField(this, "metadata", async () => {
+      return SourceModule.getMetadata(this.nativeId);
+    });
+    __publicField(this, "setMetadata", (metadata) => {
+      SourceModule.setMetadata(this.nativeId, metadata);
+    });
+    __publicField(this, "loadingState", async () => {
+      return SourceModule.loadingState(this.nativeId);
+    });
+  }
+};
+
+// src/player.ts
+var PlayerModule = NativeModules4.PlayerModule;
+var Player = class extends NativeInstance {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "source");
+    __publicField(this, "isInitialized", false);
+    __publicField(this, "isDestroyed", false);
+    __publicField(this, "initialize", () => {
+      if (!this.isInitialized) {
+        PlayerModule.initWithConfig(this.nativeId, this.config);
+        this.isInitialized = true;
+      }
+    });
+    __publicField(this, "destroy", () => {
+      if (!this.isDestroyed) {
+        PlayerModule.destroy(this.nativeId);
+        this.source?.destroy();
+        this.isDestroyed = true;
+      }
+    });
+    __publicField(this, "load", (sourceConfig) => {
+      this.loadSource(new Source(sourceConfig));
+    });
+    __publicField(this, "loadSource", (source) => {
+      source.initialize();
+      this.source = source;
+      PlayerModule.loadSource(this.nativeId, source.nativeId);
     });
     __publicField(this, "unload", () => {
       PlayerModule.unload(this.nativeId);
@@ -33,15 +271,9 @@ var Player = class {
     __publicField(this, "unmute", () => {
       PlayerModule.unmute(this.nativeId);
     });
-    __publicField(this, "destroy", () => {
-      PlayerModule.destroy(this.nativeId);
-    });
     __publicField(this, "setVolume", (volume) => {
       PlayerModule.setVolume(this.nativeId, volume);
     });
-    __publicField(this, "getSource", async () => {
-      return PlayerModule.source(this.nativeId);
-    });
     __publicField(this, "getVolume", async () => {
       return PlayerModule.getVolume(this.nativeId);
     });
@@ -64,128 +296,44 @@ var Player = class {
       return PlayerModule.isLive(this.nativeId);
     });
     __publicField(this, "isAirPlayActive", async () => {
-      if (Platform.OS === "android") {
+      if (Platform3.OS === "android") {
         console.warn(`[Player ${this.nativeId}] Method isAirPlayActive is not available for Android. Only iOS devices.`);
         return false;
       }
       return PlayerModule.isAirPlayActive(this.nativeId);
     });
     __publicField(this, "isAirPlayAvailable", async () => {
-      if (Platform.OS === "android") {
+      if (Platform3.OS === "android") {
         console.warn(`[Player ${this.nativeId}] Method isAirPlayAvailable is not available for Android. Only iOS devices.`);
         return false;
       }
       return PlayerModule.isAirPlayAvailable(this.nativeId);
     });
-    this.config = config ?? null;
-    this.nativeId = config?.nativeId ?? PlayerModule.generateUUIDv4();
-    PlayerModule.initWithConfig(this.nativeId, this.config);
+    __publicField(this, "getAvailableSubtitles", async () => {
+      return PlayerModule.getAvailableSubtitles(this.nativeId);
+    });
   }
 };
 
-// src/source.ts
-var SourceType = /* @__PURE__ */ ((SourceType2) => {
-  SourceType2["NONE"] = "none";
-  SourceType2["HLS"] = "hls";
-  SourceType2["DASH"] = "dash";
-  SourceType2["PROGRESSIVE"] = "progressive";
-  return SourceType2;
-})(SourceType || {});
-var LoadingState = /* @__PURE__ */ ((LoadingState2) => {
-  LoadingState2[LoadingState2["UNLOADED"] = 0] = "UNLOADED";
-  LoadingState2[LoadingState2["LOADING"] = 1] = "LOADING";
-  LoadingState2[LoadingState2["LOADED"] = 2] = "LOADED";
-  return LoadingState2;
-})(LoadingState || {});
-
 // src/hooks/usePlayer.ts
-import { useRef } from "react";
 function usePlayer(config) {
-  return useRef(new Player(config)).current;
-}
-
-// src/components/PlayerView/index.tsx
-import React, { useRef as useRef3, useEffect } from "react";
-import {
-  Platform as Platform2,
-  UIManager,
-  StyleSheet,
-  findNodeHandle as findNodeHandle2
-} from "react-native";
-
-// src/components/PlayerView/native.ts
-import { requireNativeComponent } from "react-native";
-var NativePlayerView = requireNativeComponent("NativePlayerView");
-
-// src/hooks/useProxy.ts
-import omit from "lodash.omit";
-import { useCallback, useRef as useRef2 } from "react";
-import { findNodeHandle } from "react-native";
-function unwrapNativeEvent(event) {
-  return omit(event.nativeEvent, ["target"]);
-}
-function useProxy(viewRef, proxy) {
-  const proxyRef = useRef2(proxy);
-  return useCallback((event) => {
-    const node = event.target._nativeTag;
-    if (node === findNodeHandle(viewRef.current)) {
-      proxyRef.current?.(unwrapNativeEvent(event));
-    }
-  }, [viewRef]);
+  return useRef2(new Player(config)).current;
 }
 
-// src/components/PlayerView/index.tsx
-var styles = StyleSheet.create({
-  baseStyle: {
-    alignSelf: "stretch"
-  }
-});
-function dispatch(command, node, playerId) {
-  const commandId = Platform2.OS === "android" ? UIManager.NativePlayerView.Commands[command].toString() : UIManager.getViewManagerConfig("NativePlayerView").Commands[command];
-  UIManager.dispatchViewManagerCommand(node, commandId, Platform2.select({
-    ios: [playerId],
-    android: [node, playerId]
-  }));
-}
-function PlayerView(props) {
-  const nativeView = useRef3(null);
-  const style = StyleSheet.flatten([styles.baseStyle, props.style]);
-  useEffect(() => {
-    const node = findNodeHandle2(nativeView.current);
-    dispatch("attachPlayer", node, props.player.nativeId);
-    return () => {
-      dispatch("detachPlayer", node, props.player.nativeId);
-    };
-  }, [props.player.nativeId]);
-  return /* @__PURE__ */ React.createElement(NativePlayerView, {
-    ref: nativeView,
-    style,
-    onEvent: useProxy(nativeView, props.onEvent),
-    onPlayerActive: useProxy(nativeView, props.onPlayerActive),
-    onPlayerError: useProxy(nativeView, props.onPlayerError),
-    onPlayerWarning: useProxy(nativeView, props.onPlayerWarning),
-    onDestroy: useProxy(nativeView, props.onDestroy),
-    onMuted: useProxy(nativeView, props.onMuted),
-    onUnmuted: useProxy(nativeView, props.onUnmuted),
-    onReady: useProxy(nativeView, props.onReady),
-    onPaused: useProxy(nativeView, props.onPaused),
-    onPlay: useProxy(nativeView, props.onPlay),
-    onPlaying: useProxy(nativeView, props.onPlaying),
-    onPlaybackFinished: useProxy(nativeView, props.onPlaybackFinished),
-    onSeek: useProxy(nativeView, props.onSeek),
-    onSeeked: useProxy(nativeView, props.onSeeked),
-    onTimeChanged: useProxy(nativeView, props.onTimeChanged),
-    onSourceLoad: useProxy(nativeView, props.onSourceLoad),
-    onSourceLoaded: useProxy(nativeView, props.onSourceLoaded),
-    onSourceUnloaded: useProxy(nativeView, props.onSourceUnloaded),
-    onSourceError: useProxy(nativeView, props.onSourceError),
-    onSourceWarning: useProxy(nativeView, props.onSourceWarning)
-  });
-}
+// src/subtitleTrack.ts
+var SubtitleFormat = /* @__PURE__ */ ((SubtitleFormat2) => {
+  SubtitleFormat2["CEA"] = "cea";
+  SubtitleFormat2["TTML"] = "ttml";
+  SubtitleFormat2["VTT"] = "vtt";
+  return SubtitleFormat2;
+})(SubtitleFormat || {});
 export {
+  Drm,
   LoadingState,
   Player,
   PlayerView,
+  Source,
   SourceType,
+  SubtitleFormat,
   usePlayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitmovin-player-react-native",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Official React Native bindings for Bitmovin's mobile Player SDKs.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -29,7 +29,8 @@
     "build": "tsup ./src/index.ts --dts --target es2020 --format cjs,esm -d lib",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
-    "bootstrap": "yarn && yarn example && yarn pods"
+    "bootstrap": "yarn && yarn example && yarn pods",
+    "prepare": "husky install"
   },
   "keywords": [
     "react-native",
@@ -48,8 +49,8 @@
     "@react-native-community/eslint-config": "3.0.2",
     "@types/jest": "26.0.24",
     "@types/lodash.omit": "4.5.0",
-    "@types/react": "17.0.39",
-    "@types/react-native": "0.67.7",
+    "@types/react": "18.0.15",
+    "@types/react-native": "0.69.2",
     "commitlint": "11.0.0",
     "eslint": "8.18.0",
     "eslint-config-prettier": "8.5.0",

package/src/components/PlayerView/events.ts

@@ -1,25 +1,28 @@
 import { NativeSyntheticEvent } from 'react-native';
 import {
-  Event,
-  PlayerActiveEvent,
-  PlayerErrorEvent,
-  PlayerWarningEvent,
   DestroyEvent,
+  Event,
   MutedEvent,
-  UnmutedEvent,
-  ReadyEvent,
   PausedEvent,
   PlayEvent,
-  PlayingEvent,
   PlaybackFinishedEvent,
+  PlayerActiveEvent,
+  PlayerErrorEvent,
+  PlayerWarningEvent,
+  PlayingEvent,
+  ReadyEvent,
   SeekEvent,
   SeekedEvent,
-  TimeChangedEvent,
+  SourceErrorEvent,
   SourceLoadEvent,
   SourceLoadedEvent,
   SourceUnloadedEvent,
-  SourceErrorEvent,
   SourceWarningEvent,
+  SubtitleAddedEvent,
+  SubtitleChangedEvent,
+  SubtitleRemovedEvent,
+  TimeChangedEvent,
+  UnmutedEvent,
 } from '../../events';
 
 /**
@@ -27,26 +30,29 @@ import {
  * Used to generate the specific events interface for each component.
  */
 interface EventProps {
-  onEvent: Event;
-  onPlayerActive: PlayerActiveEvent;
-  onPlayerError: PlayerErrorEvent;
-  onPlayerWarning: PlayerWarningEvent;
   onDestroy: DestroyEvent;
+  onEvent: Event;
   onMuted: MutedEvent;
-  onUnmuted: UnmutedEvent;
-  onReady: ReadyEvent;
   onPaused: PausedEvent;
   onPlay: PlayEvent;
-  onPlaying: PlayingEvent;
   onPlaybackFinished: PlaybackFinishedEvent;
+  onPlayerActive: PlayerActiveEvent;
+  onPlayerError: PlayerErrorEvent;
+  onPlayerWarning: PlayerWarningEvent;
+  onPlaying: PlayingEvent;
+  onReady: ReadyEvent;
   onSeek: SeekEvent;
   onSeeked: SeekedEvent;
-  onTimeChanged: TimeChangedEvent;
+  onSourceError: SourceErrorEvent;
   onSourceLoad: SourceLoadEvent;
   onSourceLoaded: SourceLoadedEvent;
   onSourceUnloaded: SourceUnloadedEvent;
-  onSourceError: SourceErrorEvent;
   onSourceWarning: SourceWarningEvent;
+  onSubtitleAdded: SubtitleAddedEvent;
+  onSubtitleChanged: SubtitleChangedEvent;
+  onSubtitleRemoved: SubtitleRemovedEvent;
+  onTimeChanged: TimeChangedEvent;
+  onUnmuted: UnmutedEvent;
 }
 
 /**

package/src/components/PlayerView/index.tsx

@@ -66,41 +66,44 @@ function dispatch(command: string, node: number | null, playerId: string) {
 export function PlayerView(props: PlayerViewProps) {
   // Native view reference.
   const nativeView = useRef(null);
+  // Native events proxy helper.
+  const proxy = useProxy(nativeView);
   // Style resulting from merging `baseStyle` and `props.style`.
   const style = StyleSheet.flatten([styles.baseStyle, props.style]);
   useEffect(() => {
-    // Attach `props.player` to native `PlayerView`.
+    // Initialize native player instance if needed.
+    props.player.initialize();
+    // Attach native player to native `PlayerView`.
     const node = findNodeHandle(nativeView.current);
     dispatch('attachPlayer', node, props.player.nativeId);
-    return () => {
-      // Detach `props.player` from native `PlayerView`.
-      dispatch('detachPlayer', node, props.player.nativeId);
-    };
-  }, [props.player.nativeId]);
+  }, [props.player]);
   return (
     <NativePlayerView
       ref={nativeView}
       style={style}
-      onEvent={useProxy(nativeView, props.onEvent)}
-      onPlayerActive={useProxy(nativeView, props.onPlayerActive)}
-      onPlayerError={useProxy(nativeView, props.onPlayerError)}
-      onPlayerWarning={useProxy(nativeView, props.onPlayerWarning)}
-      onDestroy={useProxy(nativeView, props.onDestroy)}
-      onMuted={useProxy(nativeView, props.onMuted)}
-      onUnmuted={useProxy(nativeView, props.onUnmuted)}
-      onReady={useProxy(nativeView, props.onReady)}
-      onPaused={useProxy(nativeView, props.onPaused)}
-      onPlay={useProxy(nativeView, props.onPlay)}
-      onPlaying={useProxy(nativeView, props.onPlaying)}
-      onPlaybackFinished={useProxy(nativeView, props.onPlaybackFinished)}
-      onSeek={useProxy(nativeView, props.onSeek)}
-      onSeeked={useProxy(nativeView, props.onSeeked)}
-      onTimeChanged={useProxy(nativeView, props.onTimeChanged)}
-      onSourceLoad={useProxy(nativeView, props.onSourceLoad)}
-      onSourceLoaded={useProxy(nativeView, props.onSourceLoaded)}
-      onSourceUnloaded={useProxy(nativeView, props.onSourceUnloaded)}
-      onSourceError={useProxy(nativeView, props.onSourceError)}
-      onSourceWarning={useProxy(nativeView, props.onSourceWarning)}
+      onDestroy={proxy(props.onDestroy)}
+      onEvent={proxy(props.onEvent)}
+      onMuted={proxy(props.onMuted)}
+      onPaused={proxy(props.onPaused)}
+      onPlay={proxy(props.onPlay)}
+      onPlaybackFinished={proxy(props.onPlaybackFinished)}
+      onPlayerActive={proxy(props.onPlayerActive)}
+      onPlayerError={proxy(props.onPlayerError)}
+      onPlayerWarning={proxy(props.onPlayerWarning)}
+      onPlaying={proxy(props.onPlaying)}
+      onReady={proxy(props.onReady)}
+      onSeek={proxy(props.onSeek)}
+      onSeeked={proxy(props.onSeeked)}
+      onSourceError={proxy(props.onSourceError)}
+      onSourceLoad={proxy(props.onSourceLoad)}
+      onSourceLoaded={proxy(props.onSourceLoaded)}
+      onSourceUnloaded={proxy(props.onSourceUnloaded)}
+      onSourceWarning={proxy(props.onSourceWarning)}
+      onSubtitleAdded={proxy(props.onSubtitleAdded)}
+      onSubtitleChanged={proxy(props.onSubtitleChanged)}
+      onSubtitleRemoved={proxy(props.onSubtitleRemoved)}
+      onTimeChanged={proxy(props.onTimeChanged)}
+      onUnmuted={proxy(props.onUnmuted)}
     />
   );
 }

package/src/drm/fairplayConfig.ts

@@ -0,0 +1,90 @@
+/**
+ * Represents a FairPlay Streaming DRM config.
+ */
+export interface FairplayConfig {
+  /**
+   * The DRM license acquisition URL.
+   */
+  licenseUrl: string;
+  /**
+   * The URL to the FairPlay Streaming certificate of the license server.
+   */
+  certificateUrl?: string;
+  /**
+   * A dictionary to specify custom HTTP headers for the license request.
+   */
+  licenseRequestHeaders?: Record<string, string>;
+  /**
+   * A dictionary to specify custom HTTP headers for the certificate request.
+   */
+  certificateRequestHeaders?: Record<string, string>;
+  /**
+   * A block to prepare the loaded certificate before building SPC data and passing it into the
+   * system. This is needed if the server responds with anything else than the certificate, e.g. if
+   * the certificate is wrapped into a JSON object. The server response for the certificate request
+   * is passed as parameter “as is”.
+   *
+   * Note that both the passed `certificate` data and this block return value should be a Base64
+   * string. So use whatever solution suits you best to handle Base64 in React Native.
+   *
+   * @param certificate - Base64 encoded certificate data.
+   * @returns The processed Base64 encoded certificate.
+   */
+  prepareCertificate?: (certificate: string) => string;
+  /**
+   * A block to prepare the data which is sent as the body of the POST license request.
+   * As many DRM providers expect different, vendor-specific messages, this can be done using
+   * this user-defined block.
+   *
+   * Note that both the passed `message` data and this block return value should be a Base64 string.
+   * So use whatever solution suits you best to handle Base64 in React Native.
+   *
+   * @param message - Base64 encoded message data.
+   * @param assetId - Stream asset ID.
+   * @returns The processed Base64 encoded message.
+   */
+  prepareMessage?: (message: string, assetId: string) => string;
+  /**
+   * A block to prepare the data which is sent as the body of the POST request for syncing the DRM
+   * license information.
+   *
+   * Note that both the passed `syncMessage` data and this block return value should be a Base64
+   * string. So use whatever solution suits you best to handle Base64 in React Native.
+   *
+   * @param message - Base64 encoded message data.
+   * @param assetId - Asset ID.
+   * @returns The processed Base64 encoded sync message.
+   */
+  prepareSyncMessage?: (syncMessage: string, assetId: string) => string;
+  /**
+   * A block to prepare the loaded CKC Data before passing it to the system. This is needed if the
+   * server responds with anything else than the license, e.g. if the license is wrapped into a JSON
+   * object.
+   *
+   * Note that both the passed `license` data and this block return value should be a Base64 string.
+   * So use whatever solution suits you best to handle Base64 in React Native.
+   *
+   * @param license - Base64 encoded license data.
+   * @returns The processed Base64 encoded license.
+   */
+  prepareLicense?: (license: string) => string;
+  /**
+   * A block to prepare the URI (without the skd://) from the HLS manifest before passing it to the
+   * system.
+   *
+   * @param licenseServerUrl - License server URL string.
+   * @returns The processed license server URL string.
+   */
+  prepareLicenseServerUrl?: (licenseServerUrl: string) => string;
+  /**
+   * A block to prepare the `contentId`, which is sent to the FairPlay Streaming license server as
+   * request body, and which is used to build the SPC data. As many DRM providers expect different,
+   * vendor-specific messages, this can be done using this user-defined block. The parameter is the
+   * skd:// URI extracted from the HLS manifest (m3u8) and the return value should be the contentID
+   * as string.
+   *
+   * @param contentId - Extracted content id string.
+   * @returns The processed contentId.
+   */
+  prepareContentId?: (contentId: string) => string;
+}