react-native-theoplayer 8.15.0 → 8.17.0

package/src/api/theoads/interstitial/Interstitial.ts

@@ -0,0 +1,36 @@
+/**
+ * The type of the interstitial.
+ *
+ * @category THEOads
+ * @public
+ */
+export type InterstitialType = 'adbreak' | 'overlay';
+
+/**
+ * The THEOads interstitial.
+ *
+ * @category THEOads
+ * @public
+ */
+export interface Interstitial {
+  /**
+   * The type of the interstitial.
+   */
+  type: InterstitialType;
+
+  /**
+   * The identifier of the interstitial.
+   */
+  id: string;
+
+  /**
+   * The start time at which the interstitial will start.
+   */
+  startTime: number;
+
+  /**
+   * The duration of the interstitial, in seconds.
+   *
+   */
+  duration: number | undefined;
+}

package/src/api/theoads/interstitial/OverlayInterstitial.ts

@@ -0,0 +1,55 @@
+import { Interstitial } from './Interstitial';
+
+/**
+ * The THEOads interstitial that corresponds with overlay playback.
+ *
+ * @category THEOads
+ * @public
+ */
+export interface OverlayInterstitial extends Interstitial {
+  type: 'overlay';
+
+  /**
+   * The url of the image of the overlay.
+   */
+  imageUrl: string | undefined;
+
+  /**
+   * The clickThrough url of the overlay.
+   */
+  clickThrough: string | undefined;
+
+  /**
+   * The position of the overlay.
+   */
+  position: OverlayPosition;
+
+  /**
+   * The size of the overlay.
+   */
+  size: OverlaySize;
+}
+
+/**
+ * The position information of the overlay.
+ *
+ * @category THEOads
+ * @public
+ */
+export interface OverlayPosition {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}
+
+/**
+ * The size information of the overlay.
+ *
+ * @category THEOads
+ * @public
+ */
+export interface OverlaySize {
+  width?: number;
+  height?: number;
+}

package/src/internal/adapter/THEOplayerAdapter.ts

@@ -68,7 +68,6 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     this._abrAdapter = new AbrAdapter(this._view);
     this._textTrackStyleAdapter = new TextTrackStyleAdapter(this._view);
 
-    this.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
     this.addEventListener(PlayerEventType.LOADED_METADATA, this.onLoadedMetadata);
     this.addEventListener(PlayerEventType.PAUSE, this.onPause);
     this.addEventListener(PlayerEventType.PLAYING, this.onPlaying);
@@ -84,10 +83,6 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     this.addEventListener(PlayerEventType.RESIZE, this.onResize);
   }
 
-  private onSourceChange = () => {
-    this.applyAutoplay();
-  };
-
   private hasValidSource(): boolean {
     return this._state.source !== undefined;
   }
@@ -206,21 +201,9 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     return this._adsAdapter;
   }
 
-  private applyAutoplay() {
-    if (!this.hasValidSource()) {
-      return;
-    }
-    if (this._state.autoplay) {
-      this.play();
-    }
-  }
-
   set autoplay(autoplay: boolean) {
     this._state.autoplay = autoplay;
-
-    // Apply autoplay in case a source was already set.
-    // If autoplay is changed before setting a source, `onSourceChange` applies autoplay.
-    this.applyAutoplay();
+    NativePlayerModule.setAutoplay(this._view.nativeHandle, autoplay);
   }
 
   get autoplay(): boolean {
@@ -463,10 +446,8 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
   }
 
   set keepScreenOn(value: boolean) {
-    if (Platform.OS === 'android') {
-      this._state.keepScreenOn = value;
-      NativePlayerModule.setKeepScreenOn(this._view.nativeHandle, value);
-    }
+    this._state.keepScreenOn = value;
+    NativePlayerModule.setKeepScreenOn(this._view.nativeHandle, value);
   }
 
   pause(): void {

package/src/internal/adapter/THEOplayerWebAdapter.ts

@@ -28,6 +28,8 @@ import { BaseEvent } from './event/BaseEvent';
 import { EventBroadcastAdapter } from './broadcast/EventBroadcastAdapter';
 import { TextTrackState } from './NativePlayerState';
 import { DefaultTextTrackState } from './DefaultTextTrackState';
+import { TheoAdsAPI } from '../../api/theoads/TheoAdsAPI';
+import { THEOAdsWebAdapter } from './theoads/THEOAdsWebAdapter';
 
 const defaultBackgroundAudioConfiguration: BackgroundAudioConfiguration = {
   enabled: false,
@@ -40,6 +42,7 @@ const defaultPipConfiguration: PiPConfiguration = {
 export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap> implements THEOplayer {
   private readonly _adsAdapter: THEOplayerWebAdsAdapter;
   private readonly _castAdapter: THEOplayerWebCastAdapter;
+  private readonly _theoAdsAdapter: THEOAdsWebAdapter;
   private readonly _textTrackState: TextTrackState;
   private readonly _presentationModeManager: WebPresentationModeManager;
   private _player: NativeChromelessPlayer | undefined;
@@ -55,6 +58,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     this._player = player;
     this._adsAdapter = new THEOplayerWebAdsAdapter(this._player);
     this._castAdapter = new THEOplayerWebCastAdapter(this._player);
+    this._theoAdsAdapter = new THEOAdsWebAdapter(this._player);
     this._textTrackState = new DefaultTextTrackState(this);
     this._eventForwarder = new WebEventForwarder(this._player, this);
     this._presentationModeManager = new WebPresentationModeManager(this._player, this);
@@ -155,7 +159,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     this._backgroundAudioConfiguration = config;
 
     // Notify media session
-    this._mediaSession?.updateActionHandlers();
+    this._mediaSession?.updateMediaSession();
   }
 
   get volume(): number {
@@ -312,6 +316,10 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     return this._adsAdapter;
   }
 
+  public get theoads(): TheoAdsAPI {
+    return this._theoAdsAdapter;
+  }
+
   public get cast(): CastAPI {
     return this._castAdapter;
   }
@@ -345,7 +353,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
       }
     }
     // Apply media session controls
-    this._mediaSession?.updateActionHandlers();
+    this._mediaSession?.updateMediaSession();
   };
 
   get nativeHandle(): NativeHandleType {

package/src/internal/adapter/WebEventForwarder.ts

@@ -7,7 +7,6 @@ import type {
   ErrorEvent as NativeErrorEvent,
   Event as NativeEvent,
   MediaTrack as NativeMediaTrack,
-  PresentationModeChangeEvent,
   RateChangeEvent as NativeRateChangeEvent,
   ReadyStateChangeEvent as NativeReadyStateChangeEvent,
   RemoveTrackEvent,
@@ -17,6 +16,8 @@ import type {
   TrackChangeEvent,
   VolumeChangeEvent as NativeVolumeChangeEvent,
   DimensionChangeEvent as NativeDimensionChangeEvent,
+  TheoAdsEventsMap as NativeTheoAdsEventMap,
+  InterstitialEvent,
 } from 'theoplayer';
 import type { AdEvent, MediaTrack, TimeRange } from 'react-native-theoplayer';
 import {
@@ -25,11 +26,11 @@ import {
   MediaTrackEventType,
   MediaTrackType,
   PlayerEventType,
-  PresentationMode,
   TextTrackEventType,
   TextTrackKind,
   TextTrackMode,
   TrackListEventType,
+  TheoAdsEventType,
 } from 'react-native-theoplayer';
 import type { THEOplayerWebAdapter } from './THEOplayerWebAdapter';
 import { BaseEvent } from './event/BaseEvent';
@@ -43,7 +44,6 @@ import {
   DefaultLoadedMetadataEvent,
   DefaultMediaTrackEvent,
   DefaultMediaTrackListEvent,
-  DefaultPresentationModeChangeEvent,
   DefaultProgressEvent,
   DefaultRateChangeEvent,
   DefaultReadyStateChangeEvent,
@@ -51,6 +51,7 @@ import {
   DefaultSegmentNotFoundEvent,
   DefaultTextTrackEvent,
   DefaultTextTrackListEvent,
+  DefaultTheoAdsEvent,
   DefaultTimeupdateEvent,
   DefaultVolumeChangeEvent,
 } from './event/PlayerEvents';
@@ -106,6 +107,7 @@ export class WebEventForwarder {
     this._player.cast?.airplay?.addEventListener('statechange', this.onAirplayStateChange);
 
     this._player.ads?.addEventListener(FORWARDED_AD_EVENTS, this.onAdEvent);
+    this._player.theoads?.addEventListener(FORWARDED_THEOADS_EVENTS, this.onTheoAdsEvent);
   }
 
   unload(): void {
@@ -133,7 +135,6 @@ export class WebEventForwarder {
     this._player.removeEventListener('ratechange', this.onPlaybackRateChange);
     this._player.removeEventListener('segmentnotfound', this.onSegmentNotFound);
     this._player.removeEventListener('volumechange', this.onVolumeChangeEvent);
-    this._player.presentation.removeEventListener('presentationmodechange', this.onPresentationModeChange);
 
     this._player.textTracks.removeEventListener('addtrack', this.onAddTextTrack);
     this._player.textTracks.removeEventListener('removetrack', this.onRemoveTextTrack);
@@ -152,6 +153,7 @@ export class WebEventForwarder {
     this._player.cast?.airplay?.removeEventListener('statechange', this.onAirplayStateChange);
 
     this._player.ads?.removeEventListener(FORWARDED_AD_EVENTS, this.onAdEvent);
+    this._player.theoads?.removeEventListener(FORWARDED_THEOADS_EVENTS, this.onTheoAdsEvent);
   }
 
   private readonly onSourceChange = () => {
@@ -249,10 +251,6 @@ export class WebEventForwarder {
     this._facade.dispatchEvent(new DefaultVolumeChangeEvent(event.volume, this._player.muted));
   };
 
-  private readonly onPresentationModeChange = (event: PresentationModeChangeEvent) => {
-    this._facade.dispatchEvent(new DefaultPresentationModeChangeEvent(event.presentationMode as PresentationMode, PresentationMode.inline)); // TODO: move to extended event
-  };
-
   private readonly onDimensionChange = (event: NativeDimensionChangeEvent) => {
     this._facade.dispatchEvent(new DefaultResizeEvent(event.width, event.height));
   };
@@ -340,6 +338,10 @@ export class WebEventForwarder {
     this._facade.dispatchEvent(new DefaultAdEvent(event.type as AdEventType, castedEvent.ad));
   };
 
+  private readonly onTheoAdsEvent = (event: InterstitialEvent<any>) => {
+    this._facade.dispatchEvent(new DefaultTheoAdsEvent(event.type as TheoAdsEventType, event.interstitial));
+  };
+
   private readonly onAddTextTrackCue = (track: NativeTextTrack) => (event: NativeEvent<'addcue'>) => {
     const { cue } = event as unknown as { cue: NativeTextTrackCue };
     if (cue) {
@@ -398,6 +400,14 @@ const FORWARDED_AD_EVENTS = [
   AdEventType.AD_BUFFERING,
 ] as (keyof NativeAdsEventMap)[];
 
+const FORWARDED_THEOADS_EVENTS = [
+  TheoAdsEventType.ADD_INTERSTITIAL,
+  TheoAdsEventType.INTERSTITIAL_BEGIN,
+  TheoAdsEventType.INTERSTITIAL_END,
+  TheoAdsEventType.INTERSTITIAL_UPDATE,
+  TheoAdsEventType.INTERSTITIAL_ERROR,
+] as (keyof NativeTheoAdsEventMap)[];
+
 function fromTimeRanges(timeRanges: TimeRanges): TimeRange[] {
   const result: TimeRange[] = [];
   for (let i = 0; i < timeRanges.length; i++) {

package/src/internal/adapter/event/PlayerEvents.ts

@@ -39,6 +39,8 @@ import {
   TrackListEventType,
   VolumeChangeEvent,
 } from 'react-native-theoplayer';
+import { TheoAdsEvent, TheoAdsEventType } from '../../../api/event/TheoAdsEvent';
+import { Interstitial } from '../../../api/theoads/interstitial/Interstitial';
 
 export class DefaultLoadedMetadataEvent extends BaseEvent<PlayerEventType.LOADED_METADATA> implements LoadedMetadataEvent {
   constructor(
@@ -183,6 +185,15 @@ export class DefaultAdEvent extends BaseEvent<PlayerEventType.AD_EVENT> implemen
   }
 }
 
+export class DefaultTheoAdsEvent extends BaseEvent<PlayerEventType.THEOADS_EVENT> implements TheoAdsEvent {
+  constructor(
+    public subType: TheoAdsEventType,
+    public interstitial: Interstitial,
+  ) {
+    super(PlayerEventType.THEOADS_EVENT);
+  }
+}
+
 export class DefaultChromecastChangeEvent extends BaseEvent<PlayerEventType.CAST_EVENT> implements ChromecastChangeEvent {
   readonly subType: CastEventType.CHROMECAST_STATE_CHANGE;
 

package/src/internal/adapter/theoads/THEOAdsWebAdapter.ts

@@ -0,0 +1,23 @@
+import type { ChromelessPlayer } from 'theoplayer';
+import { TheoAdsAPI } from '../../../api/theoads/TheoAdsAPI';
+import { Interstitial } from '../../../api/theoads/interstitial/Interstitial';
+
+export class THEOAdsWebAdapter implements TheoAdsAPI {
+  private readonly _player: ChromelessPlayer;
+
+  constructor(player: ChromelessPlayer) {
+    this._player = player;
+  }
+
+  get currentInterstitials(): readonly Interstitial[] {
+    return this._player.theoads?.currentInterstitials ?? [];
+  }
+
+  get scheduledInterstitials(): readonly Interstitial[] {
+    return this._player.theoads?.scheduledInterstitials ?? [];
+  }
+
+  replaceAdTagParameters(adTagParameters?: Record<string, string>): void {
+    this._player.theoads?.replaceAdTagParameters(adTagParameters);
+  }
+}

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

@@ -38,30 +38,36 @@ export class WebMediaSession {
     this._player = player;
     this._webAdapter = adapter;
     this._config = config;
-
     this._player.addEventListener('sourcechange', this.onSourceChange);
-    this._player.addEventListener('loadedmetadata', this.onLoadedMetadata);
-    this._player.addEventListener('durationchange', this.onDurationChange);
-    this._player.ads?.addEventListener('adbreakbegin', this.onAdbreakBegin);
-    this._player.ads?.addEventListener('adbreakend', this.onAdbreakEnd);
-    this.updateActionHandlers();
   }
 
-  updateActionHandlers() {
-    if (this.isTrickplayEnabled()) {
+  updateMediaSession() {
+    // update trickplay capabilities
+    if (this.isTrickPlayEnabled()) {
       mediaSession.setActionHandler('seekbackward', (event) => {
         const skipTime = event.seekOffset || this._config.skipBackwardInterval || DEFAULT_SKIP_BACKWARD_INTERVAL;
         this._player.currentTime = Math.max(this._player.currentTime - skipTime, 0);
+        this.updatePositionState();
       });
       mediaSession.setActionHandler('seekforward', (event) => {
         const skipTime = event.seekOffset || this._config.skipForwardInterval || DEFAULT_SKIP_FORWARD_INTERVAL;
         this._player.currentTime = Math.min(this._player.currentTime + skipTime, this._player.duration);
+        this.updatePositionState();
+      });
+      mediaSession.setActionHandler('seekto', (event) => {
+        const seekTime = event.seekTime;
+        if (seekTime !== undefined) {
+          this._player.currentTime = seekTime;
+        }
+        this.updatePositionState();
       });
     } else {
       mediaSession.setActionHandler('seekbackward', NoOp);
       mediaSession.setActionHandler('seekforward', NoOp);
+      mediaSession.setActionHandler('seekto', NoOp);
     }
 
+    // update play/pause capabilities
     if (this.isPlayPauseEnabled()) {
       mediaSession.setActionHandler('play', () => {
         this._player?.play();
@@ -73,32 +79,43 @@ export class WebMediaSession {
       mediaSession.setActionHandler('play', NoOp);
       mediaSession.setActionHandler('pause', NoOp);
     }
+
+    // update playbackState
+    mediaSession.playbackState = this._player.paused ? 'paused' : 'playing';
+
+    // update position
+    this.updatePositionState();
   }
 
   destroy() {
-    this._player.removeEventListener('sourcechange', this.onSourceChange);
-    this._player.removeEventListener('loadedmetadata', this.onLoadedMetadata);
-    this._player.removeEventListener('durationchange', this.onDurationChange);
-    this._player.ads?.removeEventListener('adbreakbegin', this.onAdbreakBegin);
-    this._player.ads?.removeEventListener('adbreakend', this.onAdbreakEnd);
+    this._player.removeEventListener(['play', 'playing'], this.onFirstPlaying);
+    this._player.removeEventListener(['play', 'pause', 'loadedmetadata', 'durationchange', 'ratechange'], this.update);
+    this._player.ads?.removeEventListener(['adbreakbegin', 'adbreakend'], this.update);
     mediaSession.setActionHandler('play', NoOp);
     mediaSession.setActionHandler('pause', NoOp);
     mediaSession.setActionHandler('seekbackward', NoOp);
     mediaSession.setActionHandler('seekforward', NoOp);
+    mediaSession.setActionHandler('seekto', NoOp);
   }
 
-  private onSourceChange = () => {
-    this.updateMetadata();
-    this.updatePositionState();
-    this.updateActionHandlers();
+  private update = () => {
+    this.updateMediaSession();
   };
 
-  private onLoadedMetadata = () => {
-    this.updateActionHandlers();
+  private onFirstPlaying = () => {
+    this._player.removeEventListener(['play', 'playing'], this.onFirstPlaying);
+    this.updateMetadata();
+    this._player.addEventListener(['play', 'pause', 'loadedmetadata', 'durationchange', 'ratechange'], this.update);
+    this._player.ads?.addEventListener(['adbreakbegin', 'adbreakend'], this.update);
   };
 
-  private onDurationChange = () => {
-    this.updateActionHandlers();
+  private onSourceChange = () => {
+    this._player.removeEventListener(['play', 'playing'], this.onFirstPlaying);
+    this._player.removeEventListener(['play', 'pause', 'loadedmetadata', 'durationchange', 'ratechange'], this.update);
+    this._player.ads?.removeEventListener(['adbreakbegin', 'adbreakend'], this.update);
+    mediaSession.metadata = null;
+    mediaSession.playbackState = 'none';
+    this._player.addEventListener(['play', 'playing'], this.onFirstPlaying);
   };
 
   private updateMetadata = () => {
@@ -140,14 +157,6 @@ export class WebMediaSession {
     }
   };
 
-  private onAdbreakBegin = () => {
-    this.updateActionHandlers();
-  };
-
-  private onAdbreakEnd = () => {
-    this.updateActionHandlers();
-  };
-
   private isLive(): boolean {
     return !isFinite(this._player.duration);
   }
@@ -163,7 +172,7 @@ export class WebMediaSession {
   // By default, only show trick-play buttons if:
   // - backgroundAudio is enabled, or the player is in foreground;
   // - and, the current asset is neither a live stream, nor an ad.
-  private isTrickplayEnabled(): boolean {
+  private isTrickPlayEnabled(): boolean {
     return (this.isBackgroundAudioEnabled() || !this.isInBackground()) && !this.isLive() && !this.isInAd();
   }
 

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

@@ -68,7 +68,12 @@ export class WebPresentationModeManager {
   private updatePresentationMode = () => {
     // detect new presentation mode
     let newPresentationMode: PresentationMode = PresentationMode.inline;
-    if (fullscreenAPI !== undefined && document[fullscreenAPI.fullscreenElement_] !== null) {
+    if (
+      // Check if we went into fullscreen using the fullscreen API.
+      (fullscreenAPI !== undefined && document[fullscreenAPI.fullscreenElement_] !== null) ||
+      // or otherwise using player APi
+      this._player.presentation.currentMode === PresentationMode.fullscreen
+    ) {
       newPresentationMode = PresentationMode.fullscreen;
     } else if (this._player.presentation.currentMode === 'native-picture-in-picture') {
       newPresentationMode = PresentationMode.pip;

package/src/manifest.json

@@ -1 +1 @@
-{"version":"8.15.0","buildDate":"2025-02-12T15:09:50.188Z"}
+{"version":"8.17.0","buildDate":"2025-03-20T22:23:49.173Z"}