react-native-theoplayer 2.16.1 → 3.0.0-pre1

package/src/api/cache/CachingTaskList.ts

@@ -0,0 +1,8 @@
+/**
+ * List of caching tasks.
+ *
+ * @public
+ */
+import type { CachingTask } from './CachingTask';
+
+export type CachingTaskList = CachingTask[];

package/src/api/cache/CachingTaskParameters.ts

@@ -0,0 +1,62 @@
+import type { CachingPreferredTrackSelection } from "./CachingPreferredTrackSelection";
+
+/**
+ * Describes the configuration of a caching task.
+ *
+ * @public
+ */
+export interface CachingTaskParameters {
+  /**
+   * The amount of data to cache for the given stream.
+   *
+   * @remarks
+   * <br/> - Available only on Web and Android. On iOS this value we always be '100%'.
+   *
+   * Possible formats:
+   * <br/> - A number in seconds.
+   * <br/> - A percentage string (XX%) for a proportion of the content duration.
+   *
+   */
+  readonly amount: number | string;
+
+  /**
+   * The expiration date of the cached data.
+   *
+   * @remarks
+   * <br/> - Must be a date in the future.
+   * <br/> - Data might be removed by the browser if it runs out of disk space.
+   *
+   * @defaultValue 30 minutes after starting the caching task.
+   */
+  readonly expirationDate?: Date;
+
+  /**
+   * Upper bandwidth limit of the quality to cache.
+   *
+   * @remarks
+   * <br/> - This will take the quality with the highest bandwidth that is lower than the specified bandwidth.
+   * <br/> - It should be a value between zero and infinity.
+   *
+   * @defaultValue Infinity
+   */
+  readonly bandwidth?: number;
+
+  /**
+   * The preferred audio/text tracks to cache.
+   *
+   * @remarks
+   * <br/> - Available only on iOS and Android.
+   * <br/> - By default, the first track will be picked.
+   */
+  readonly preferredTrackSelection?: CachingPreferredTrackSelection;
+
+  /**
+   * An indication of whether the data should be cached on a cellular network, or only on WIFI. Defaults to true.
+   *
+   * @remarks
+   * <br/> - Available only on iOS.
+   * <br/> - The value can not be changed on a scheduled asset.
+   * <br/> - If the download is scheduled/started on WIFI-only mode, and suddenly we would like allow Cellular Network download too, the `CachingTask` has to be removed and scheduled again with the new `CachingParamaters`.
+   */
+  readonly allowsCellularAccess?: boolean;
+}

package/src/api/cache/MediaCacheAPI.ts

@@ -0,0 +1,43 @@
+import type { EventDispatcher } from '../event/EventDispatcher';
+import type { SourceDescription } from 'react-native-theoplayer';
+import type { CachingTaskParameters } from './CachingTaskParameters';
+import type { CachingTask } from './CachingTask';
+import type { CacheEventMap } from './events/CacheEvent';
+import type { CachingTaskList } from './CachingTaskList';
+
+/**
+ * The cache status, represented by a value from the following list:
+ * <br/> - `'uninitialised'`: Previously stored caching tasks are unavailable.
+ * <br/> - `'initialised'`: Previously stored caching tasks are now available.
+ *
+ * @public
+ */
+export enum CacheStatus {
+  uninitialised = 'uninitialised',
+  initialised = 'initialised',
+}
+
+/**
+ * The media cache API.
+ *
+ * @public
+ */
+export interface MediaCacheAPI extends EventDispatcher<CacheEventMap> {
+  /**
+   * List of caching tasks which control the caching of media.
+   */
+  readonly tasks: CachingTaskList;
+
+  /**
+   * The current status of the cache.
+   */
+  readonly status: CacheStatus;
+
+  /**
+   * Create a caching task which controls the caching of media.
+   *
+   * @param source - Describes the media source to be cached.
+   * @param parameters - Contains caching task related options.
+   */
+  createTask(source: SourceDescription, parameters: CachingTaskParameters): Promise<CachingTask>;
+}

package/src/api/cache/barrel.ts

@@ -0,0 +1,7 @@
+export * from './CachingTask';
+export * from './CachingTaskLicense';
+export * from './CachingTaskList';
+export * from './CachingTaskParameters';
+export * from './MediaCacheAPI';
+export * from './events/barrel';
+export * from './hooks/barrel';

package/src/api/cache/events/CacheEvent.ts

@@ -0,0 +1,62 @@
+import type { Event } from '../../event/Event';
+import type { CacheStatus } from '../MediaCacheAPI';
+import type { CachingTask } from '../CachingTask';
+
+export enum CacheEventType {
+  statechange = 'statechange',
+  addtask = 'addtask',
+  removetask = 'removetask',
+}
+
+/**
+ * The events dispatched by the {@link Cache | cache API}.
+ *
+ * @public
+ */
+export interface CacheEventMap {
+  /**
+   * Dispatched when {@link Cache.status} changes.
+   */
+  [CacheEventType.statechange]: Event<CacheEventType.statechange>;
+
+  /**
+   * {@inheritDoc AddCachingTaskEvent}
+   */
+  [CacheEventType.addtask]: AddCachingTaskEvent;
+
+  /**
+   * {@inheritDoc AddCachingTaskEvent}
+   */
+  [CacheEventType.removetask]: RemoveCachingTaskEvent;
+}
+
+export interface CacheStatusChangeEvent extends Event<CacheEventType.statechange> {
+  /**
+   * The cache's new status.
+   */
+  readonly status: CacheStatus;
+}
+
+/**
+ * Dispatched when a caching task is added.
+ *
+ * @public
+ */
+export interface AddCachingTaskEvent extends Event<CacheEventType.addtask> {
+  /**
+   * The task which has been added.
+   */
+  readonly task: CachingTask;
+}
+
+/**
+ * Dispatched when a caching task is removed.
+ *
+ * @public
+ */
+export interface RemoveCachingTaskEvent extends Event<CacheEventType.removetask> {
+  /**
+   * The task which has been removed.
+   */
+  readonly task: CachingTask;
+}

package/src/api/cache/events/CachingTaskEvent.ts

@@ -0,0 +1,27 @@
+import type { Event } from '../../event/Event';
+
+export enum CachingTaskEventType {
+  progress = 'progress',
+  statechange = 'statechange',
+}
+
+/**
+ * The events dispatched by the {@link CachingTask}.
+ *
+ * @public
+ */
+export interface CachingTaskEventMap {
+  /**
+   * Dispatched when a segment is added to the cache.
+   */
+  [CachingTaskEventType.progress]: Event<CachingTaskEventType.progress>;
+
+  /**
+   * Dispatched when {@link CachingTask.status} changes.
+   */
+  [CachingTaskEventType.statechange]: Event<CachingTaskEventType.statechange>;
+}
+
+export type CachingTaskProgressEvent = Event<CachingTaskEventType.progress>;
+
+export type CachingTaskStatusChangeEvent = Event<CachingTaskEventType.statechange>;

package/src/api/cache/events/barrel.ts

@@ -0,0 +1,2 @@
+export * from './CacheEvent';
+export * from './CachingTaskEvent';

package/src/api/cache/hooks/barrel.ts

@@ -0,0 +1,3 @@
+export * from './useCachingTaskList';
+export * from './useCachingTaskProgress';
+export * from './useCachingTaskStatus';

package/src/api/cache/hooks/useCachingTaskList.ts

@@ -0,0 +1,23 @@
+import { CacheEventType, MediaCache } from 'react-native-theoplayer';
+import { useEffect, useState } from 'react';
+
+export const useCachingTaskList = (debug = false) => {
+  const [tasks, setTasks] = useState([...MediaCache.tasks]);
+  useEffect(() => {
+    const taskListChangeListener = () => {
+      if (debug) {
+        console.log('[MediaCache] task list changed: ', MediaCache.tasks);
+      }
+      setTasks([...MediaCache.tasks]);
+    };
+    MediaCache.addEventListener(CacheEventType.addtask, taskListChangeListener);
+    MediaCache.addEventListener(CacheEventType.removetask, taskListChangeListener);
+    MediaCache.addEventListener(CacheEventType.statechange, taskListChangeListener);
+    return () => {
+      MediaCache.removeEventListener(CacheEventType.addtask, taskListChangeListener);
+      MediaCache.removeEventListener(CacheEventType.removetask, taskListChangeListener);
+      MediaCache.addEventListener(CacheEventType.statechange, taskListChangeListener);
+    };
+  }, []);
+  return tasks;
+};

package/src/api/cache/hooks/useCachingTaskProgress.ts

@@ -0,0 +1,20 @@
+import { CachingTask, CachingTaskEventType } from 'react-native-theoplayer';
+import { useEffect, useState } from 'react';
+
+export const useCachingTaskProgress = (task: CachingTask, debug = true) => {
+  const [progress, setProgress] = useState<number | undefined>(task.percentageCached);
+  useEffect(() => {
+    const onProgress = () => {
+      const percentageCached = task.percentageCached;
+      if (debug) {
+        console.log('[MediaCache] progress change', percentageCached);
+      }
+      setProgress(percentageCached);
+    };
+    task.addEventListener(CachingTaskEventType.progress, onProgress);
+    return () => {
+      task.removeEventListener(CachingTaskEventType.progress, onProgress);
+    };
+  }, []);
+  return progress;
+};

package/src/api/cache/hooks/useCachingTaskStatus.ts

@@ -0,0 +1,20 @@
+import { CacheTaskStatus, CachingTask, CachingTaskEventType } from 'react-native-theoplayer';
+import { useEffect, useState } from 'react';
+
+export const useCachingTaskStatus = (task: CachingTask, debug = false) => {
+  const [status, setStatus] = useState<CacheTaskStatus | undefined>(task.status);
+  useEffect(() => {
+    const onStateChange = () => {
+      const status = task.status;
+      if (debug) {
+        console.log('[MediaCache] state change', status);
+      }
+      setStatus(status);
+    };
+    task.addEventListener(CachingTaskEventType.statechange, onStateChange);
+    return () => {
+      task.removeEventListener(CachingTaskEventType.statechange, onStateChange);
+    };
+  }, []);
+  return status;
+};

package/src/api/config/PlayerConfiguration.ts

@@ -53,6 +53,9 @@ export interface PlayerConfiguration {
 
   /**
    * Sets whether the native player is chromeless (without UI).
+   *
+   * @remarks
+   * <br/> - This parameter only applies to Web platforms.
    */
   readonly chromeless?: boolean;
 

package/src/index.tsx

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

package/src/internal/THEOplayerView.web.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 import type { THEOplayerViewProps } from 'react-native-theoplayer';
-import * as THEOplayer from 'theoplayer';
+import { Player, ChromelessPlayer, PlayerConfiguration } from 'theoplayer';
 import { THEOplayerWebAdapter } from './adapter/THEOplayerWebAdapter';
 
 export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProps>) {
   const { config, children } = props;
-  const player = useRef<THEOplayer.ChromelessPlayer | null>(null);
+  const player = useRef<ChromelessPlayer | null>(null);
   const adapter = useRef<THEOplayerWebAdapter | null>(null);
   const container = useRef<null | HTMLDivElement>(null);
 
@@ -15,14 +15,14 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
       const chromeless = config?.chromeless === true || config?.chromeless === undefined;
       const updatedConfig = { ...config, allowNativeFullscreen: true };
       if (chromeless) {
-        player.current = new THEOplayer.ChromelessPlayer(container.current, updatedConfig);
+        player.current = new ChromelessPlayer(container.current, updatedConfig);
       } else {
-        player.current = new THEOplayer.Player(container.current, {
+        player.current = new Player(container.current, {
           ...updatedConfig,
           ui: {
             fluid: true,
           },
-        } as THEOplayer.PlayerConfiguration);
+        } as PlayerConfiguration);
       }
 
       // Adapt native player to react-native player.

package/src/internal/adapter/THEOplayerWebAdapter.ts

@@ -15,7 +15,7 @@ import type {
 import { AspectRatio, PlayerEventType, PresentationMode } from 'react-native-theoplayer';
 import { THEOplayerWebAdsAdapter } from './ads/THEOplayerWebAdsAdapter';
 import { THEOplayerWebCastAdapter } from './cast/THEOplayerWebCastAdapter';
-import * as THEOplayerWeb from 'theoplayer';
+import { ChromelessPlayer as NativeChromelessPlayer, SourceDescription as NativeSourceDescription, version as nativeVersion } from 'theoplayer';
 import type { MediaTrack as NativeMediaTrack, TextTrack as NativeTextTrack } from 'theoplayer';
 import { findNativeQualitiesByUid, fromNativeMediaTrackList, fromNativeTextTrackList } from './web/TrackUtils';
 import type { ABRConfiguration, SourceDescription } from 'src/api/barrel';
@@ -38,14 +38,14 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
   private readonly _adsAdapter: THEOplayerWebAdsAdapter;
   private readonly _castAdapter: THEOplayerWebCastAdapter;
   private readonly _presentationModeManager: WebPresentationModeManager;
-  private _player: THEOplayerWeb.ChromelessPlayer | undefined;
+  private _player: NativeChromelessPlayer | undefined;
   private _eventForwarder: WebEventForwarder | undefined;
   private _mediaSession: WebMediaSession | undefined = undefined;
   private _targetVideoQuality: number | number[] | undefined = undefined;
   private _backgroundAudioConfiguration: BackgroundAudioConfiguration = defaultBackgroundAudioConfiguration;
   private _pipConfiguration: PiPConfiguration = defaultPipConfiguration;
 
-  constructor(player: THEOplayerWeb.ChromelessPlayer, config?: PlayerConfiguration) {
+  constructor(player: NativeChromelessPlayer, config?: PlayerConfiguration) {
     super();
     this._player = player;
     this._adsAdapter = new THEOplayerWebAdsAdapter(this._player);
@@ -71,7 +71,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
   set source(source: SourceDescription | undefined) {
     this._targetVideoQuality = undefined;
     if (this._player) {
-      this._player.source = source as THEOplayerWeb.SourceDescription;
+      this._player.source = source as NativeSourceDescription;
     }
   }
 
@@ -302,8 +302,8 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
 
   public get version(): PlayerVersion {
     return {
-      version: THEOplayerWeb.version,
-      playerSuiteVersion: THEOplayerWeb.playerSuiteVersion,
+      version: nativeVersion,
+      playerSuiteVersion: '', // deprecated
     };
   }
 

package/src/internal/adapter/WebEventForwarder.ts

@@ -1,4 +1,4 @@
-import type * as THEOplayer from 'theoplayer';
+import type { ChromelessPlayer } from 'theoplayer';
 import type {
   AddTrackEvent,
   CastStateChangeEvent,
@@ -53,10 +53,10 @@ import {
 import { fromNativeCue, fromNativeMediaTrack, fromNativeTextTrack } from './web/TrackUtils';
 
 export class WebEventForwarder {
-  private readonly _player: THEOplayer.ChromelessPlayer;
+  private readonly _player: ChromelessPlayer;
   private readonly _facade: THEOplayerWebAdapter;
 
-  constructor(player: THEOplayer.ChromelessPlayer, facade: THEOplayerWebAdapter) {
+  constructor(player: ChromelessPlayer, facade: THEOplayerWebAdapter) {
     this._player = player;
     this._facade = facade;
     this.addEventListeners();

package/src/internal/adapter/ads/THEOplayerWebAdsAdapter.ts

@@ -1,12 +1,12 @@
 import type { Ad, AdBreak, AdDescription, AdsAPI, GoogleDAI } from 'react-native-theoplayer';
 import { THEOplayerWebGoogleDAI } from './THEOplayerWebGoogleDAI';
-import type * as THEOplayer from 'theoplayer';
+import type { ChromelessPlayer } from 'theoplayer';
 
 export class THEOplayerWebAdsAdapter implements AdsAPI {
-  private readonly _player: THEOplayer.ChromelessPlayer;
+  private readonly _player: ChromelessPlayer;
   private _dai: GoogleDAI | undefined;
 
-  constructor(player: THEOplayer.ChromelessPlayer) {
+  constructor(player: ChromelessPlayer) {
     this._player = player;
   }
 

package/src/internal/adapter/cast/THEOplayerWebCastAdapter.ts

@@ -1,10 +1,10 @@
 import type { Airplay, CastAPI, Chromecast } from 'react-native-theoplayer';
-import type * as THEOplayer from 'theoplayer';
+import type { ChromelessPlayer } from 'theoplayer';
 
 export class THEOplayerWebCastAdapter implements CastAPI {
-  private readonly _player: THEOplayer.ChromelessPlayer;
+  private readonly _player: ChromelessPlayer;
 
-  constructor(player: THEOplayer.ChromelessPlayer) {
+  constructor(player: ChromelessPlayer) {
     this._player = player;
   }
 

package/src/internal/adapter/web/WebPresentationModeManager.ts

@@ -1,18 +1,18 @@
 import type { PlayerEventMap } from 'react-native-theoplayer';
 import { PresentationMode } from 'react-native-theoplayer';
-import type * as THEOplayerWeb from 'theoplayer';
+import type { ChromelessPlayer } from 'theoplayer';
 import { DefaultPresentationModeChangeEvent } from '../event/PlayerEvents';
 import type { DefaultEventDispatcher } from '../event/DefaultEventDispatcher';
 import { fullscreenAPI } from './FullscreenAPI';
 import { noOp } from '../../utils/CommonUtils';
 
 export class WebPresentationModeManager {
-  private readonly _player: THEOplayerWeb.ChromelessPlayer;
+  private readonly _player: ChromelessPlayer;
   private _presentationMode: PresentationMode = PresentationMode.inline;
   private _element: HTMLVideoElement | undefined = undefined;
   private _eventForwarder: DefaultEventDispatcher<PlayerEventMap>;
 
-  constructor(player: THEOplayerWeb.ChromelessPlayer, eventForwarder: DefaultEventDispatcher<PlayerEventMap>) {
+  constructor(player: ChromelessPlayer, eventForwarder: DefaultEventDispatcher<PlayerEventMap>) {
     this._player = player;
     this._eventForwarder = eventForwarder;
   }

package/src/internal/cache/MediaCache.ts

@@ -0,0 +1,151 @@
+import { CacheStatus, MediaCacheAPI } from '../../api/cache/MediaCacheAPI';
+import type { CachingTaskList } from '../../api/cache/CachingTaskList';
+import { DefaultEventDispatcher } from '../adapter/event/DefaultEventDispatcher';
+import type { CacheEventMap } from '../../api/cache/events/CacheEvent';
+import { CacheEventType } from '../../api/cache/events/CacheEvent';
+import type { CachingTaskProgressEvent, CachingTaskStatusChangeEvent, SourceDescription } from 'react-native-theoplayer';
+import { CacheTaskStatus, CachingTaskEventType, TimeRange } from 'react-native-theoplayer';
+import type { CachingTaskParameters } from '../../api/cache/CachingTaskParameters';
+import type { CachingTask } from '../../api/cache/CachingTask';
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import { NativeCachingTask, NativeCachingTaskAdapter } from './NativeCachingTaskAdapter';
+import { toNativeCachingTaskParameters } from "./NativeCachingTaskParametersAdapter";
+
+const TAG = "NativeMediaCache";
+
+interface NativeCachingStatusChangeEvent {
+  readonly id: string;
+  readonly status: CacheTaskStatus;
+}
+
+interface NativeCacheStatusChangeEvent {
+  readonly status: CacheStatus;
+}
+
+interface NativeAddCachingTaskEvent {
+  readonly task: NativeCachingTask;
+}
+
+interface NativeRemoveCachingTaskEvent {
+  readonly task: NativeCachingTask;
+}
+
+interface NativeCachingTaskProgressEvent {
+  id: string;
+  progress: {
+    readonly duration: number;
+    readonly cached: TimeRange[];
+    readonly secondsCached: number;
+    readonly percentageCached: number;
+    readonly bytes: number;
+    readonly bytesCached: number;
+  };
+}
+
+export class NativeMediaCache extends DefaultEventDispatcher<CacheEventMap> implements MediaCacheAPI {
+  private _emitter: NativeEventEmitter = new NativeEventEmitter(NativeModules.CacheModule);
+  private _status: CacheStatus = CacheStatus.uninitialised;
+  private _tasks: NativeCachingTaskAdapter[] = [];
+
+  constructor() {
+    super();
+    this._emitter.addListener('onCacheStatusChange', this.onCacheStatusChange);
+    this._emitter.addListener('onAddCachingTaskEvent', this.onAddCachingTaskEvent);
+    this._emitter.addListener('onRemoveCachingTaskEvent', this.onRemoveCachingTaskEvent);
+    this._emitter.addListener('onCachingTaskProgressEvent', this.onCachingTaskProgressEvent);
+    this._emitter.addListener('onCachingTaskStatusChangeEvent', this.onCachingTaskStatusChangeEvent);
+    void this.initialize();
+  }
+
+  async createTask(source: SourceDescription, parameters: CachingTaskParameters): Promise<CachingTask> {
+    return NativeModules.CacheModule.createTask(source, toNativeCachingTaskParameters(parameters));
+  }
+
+  get status(): CacheStatus {
+    return this._status;
+  }
+
+  get tasks(): CachingTaskList {
+    return this._tasks;
+  }
+
+  private async initialize(): Promise<void> {
+    await this.getInitialState();
+
+    // Dispatch status change event here
+    if (this._status === CacheStatus.initialised) {
+      await this.onCacheStatusChange({
+        status: this._status,
+      });
+    }
+  }
+
+  private async getInitialState(): Promise<void> {
+    const initialState = await NativeModules.CacheModule.getInitialState();
+    this._status = initialState.status;
+    this._tasks = initialState.tasks.map((task: NativeCachingTask) => new NativeCachingTaskAdapter(task));
+  }
+
+  private onCacheStatusChange = async (event: NativeCacheStatusChangeEvent) => {
+    if (this._status === CacheStatus.uninitialised) {
+      await this.getInitialState();
+    }
+    this._status = event.status;
+    this.dispatchEvent({
+      type: CacheEventType.statechange,
+      date: new Date()
+    });
+  };
+
+  private onAddCachingTaskEvent = (event: NativeAddCachingTaskEvent) => {
+    const task= new NativeCachingTaskAdapter(event.task);
+    this._tasks.push(task);
+    this.dispatchEvent({
+      type: CacheEventType.addtask,
+      task,
+      date: new Date(),
+    });
+  };
+
+  private onRemoveCachingTaskEvent = (event: NativeRemoveCachingTaskEvent) => {
+    const task = this.taskById(event.task.id);
+    if (task) {
+      this._tasks = this._tasks.filter((task) => task.id !== event.task.id);
+      this.dispatchEvent({
+        type: CacheEventType.removetask,
+        task,
+        date: new Date(),
+      });
+    } else {
+      console.warn(TAG, `onRemoveCachingTaskEvent: CachingTask with id ${event.task.id} not found.`)
+    }
+  };
+
+  private onCachingTaskProgressEvent = (event: NativeCachingTaskProgressEvent) => {
+    const task = this.taskById(event.id);
+    if (task) {
+      Object.assign(task, { ...event.progress });
+      task.dispatchEvent({
+        type: CachingTaskEventType.progress,
+        date: new Date(),
+      } as CachingTaskProgressEvent);
+    }
+  };
+
+  private onCachingTaskStatusChangeEvent = (event: NativeCachingStatusChangeEvent) => {
+    const task = this.taskById(event.id);
+    if (task) {
+      Object.assign(task, { ...event });
+      task.dispatchEvent({
+        type: CachingTaskEventType.statechange,
+        date: new Date(),
+      } as CachingTaskStatusChangeEvent);
+    }
+  };
+
+  private taskById(id: string): NativeCachingTaskAdapter | undefined {
+    return this._tasks.find((task) => task.id === id);
+  }
+}
+
+export const MediaCache = new NativeMediaCache();

package/src/internal/cache/MediaCache.web.ts

@@ -0,0 +1,54 @@
+import type { CacheStatus, MediaCacheAPI } from 'react-native-theoplayer';
+import type { CachingTaskList } from 'react-native-theoplayer';
+import { DefaultEventDispatcher } from '../adapter/event/DefaultEventDispatcher';
+import type { CacheEventMap } from 'react-native-theoplayer';
+import type { SourceDescription } from 'react-native-theoplayer';
+import type { CachingTaskParameters } from 'react-native-theoplayer';
+import type { CachingTask } from 'react-native-theoplayer';
+import * as THEOplayerWeb from 'theoplayer';
+import { WebCachingTaskAdapter } from './WebCachingTaskAdapter';
+import type { AddCachingTaskEvent, RemoveCachingTaskEvent, SourceDescription as NativeSourceDescription } from 'theoplayer';
+import { CacheEventType } from 'react-native-theoplayer';
+
+export class WebMediaCache extends DefaultEventDispatcher<CacheEventMap> implements MediaCacheAPI {
+  constructor() {
+    super();
+    THEOplayerWeb.cache.tasks.addEventListener('addtask', this.onAddTask);
+    THEOplayerWeb.cache.tasks.addEventListener('removetask', this.onRemoveTask);
+  }
+
+  private onAddTask = (event: AddCachingTaskEvent) => {
+    this.dispatchEvent({
+      type: CacheEventType.addtask,
+      task: new WebCachingTaskAdapter(event.task),
+      date: event.date,
+    });
+  };
+
+  private onRemoveTask = (event: RemoveCachingTaskEvent) => {
+    this.dispatchEvent({
+      type: CacheEventType.removetask,
+      task: new WebCachingTaskAdapter(event.task),
+      date: event.date,
+    });
+  };
+
+  createTask(source: SourceDescription, parameters: CachingTaskParameters): Promise<CachingTask> {
+    return Promise.resolve(new WebCachingTaskAdapter(THEOplayerWeb.cache.createTask(source as NativeSourceDescription, parameters)));
+  }
+
+  get status(): CacheStatus {
+    return THEOplayerWeb.cache.status as CacheStatus;
+  }
+
+  // @ts-ignore
+  get tasks(): CachingTaskList {
+    return THEOplayerWeb.cache.tasks.map((task) => new WebCachingTaskAdapter(task)) as CachingTaskList;
+  }
+}
+
+export const MediaCache = new WebMediaCache();
+
+// Expose cache for easy access
+// @ts-ignore
+window.MediaCache = MediaCache;