react-native-theoplayer 9.10.0 → 10.1.0

package/src/api/barrel.ts

@@ -19,7 +19,6 @@ export * from './track/barrel';
 export * from './ui/barrel';
 export * from './utils/barrel';
 export * from './THEOplayerView';
-export * from './playback/barrel';
 export * from './player/barrel';
 export * from './presentation/barrel';
 export * from './version/barrel';

package/src/api/cache/CachingTaskParameters.ts

@@ -1,33 +1,5 @@
 import type { CachingPreferredTrackSelection } from "./CachingPreferredTrackSelection";
 
-/**
- * The types of cache storage supported by THEOplayer.
- *
- * @platform android
- * @category Caching
- * @public
- */
-export enum StorageType {
-  /**
-   * Write to the legacy cache.
-   *
-   * @remarks
-   * <br/> - This was the default for all caching tasks created in THEOplayer version 8.x and earlier.
-   * <br/> - Sources cached with this storage type can be played in both the default playback pipeline and the Media3 playback pipeline.
-   * <br/> - This cache storage will be removed in THEOplayer version 10.
-   */
-  LEGACY = 'legacy',
-
-  /**
-   * Write to the Media3 cache.
-   *
-   * @remarks
-   * <br/> - This is the default starting with THEOplayer version 9.0.
-   * <br/> - Sources cached with this storage type can only be played in the [Media3 playback pipeline][PlaybackPipeline.MEDIA3].
-   */
-  MEDIA3 = 'media3'
-}
-
 /**
  * Describes the configuration of a caching task.
  *
@@ -91,13 +63,4 @@ export interface CachingTaskParameters {
    * <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;
-
-  /**
-   * The storage type to use for caching.
-   *
-   * @defaultValue [StorageType.MEDIA3]
-   *
-   * @platform android
-   */
-  readonly storageType?: StorageType;
 }

package/src/api/event/PlayerEvent.ts

@@ -50,12 +50,33 @@ export interface TimeUpdateEvent extends Event<PlayerEventType.TIME_UPDATE> {
   readonly currentProgramDateTime?: number;
 }
 
+/**
+ * Dispatched when the player dimensions are updated.
+ *
+ * @category Events
+ * @category Player
+ * @public
+ */
+export interface DimensionChangeEvent extends Event<PlayerEventType.DIMENSION_CHANGE> {
+  /**
+   * The player's current width.
+   */
+  readonly width: number;
+
+  /**
+   * The player's current height.
+   */
+  readonly height: number;
+}
+
 /**
  * Dispatched when player is resized.
  *
  * @category Events
  * @category Player
  * @public
+ *
+ * @deprecated use {@link DimensionChangeEvent} instead. This event is set for removal in version 11.
  */
 export interface ResizeEvent extends Event<PlayerEventType.RESIZE> {
   /**
@@ -69,6 +90,25 @@ export interface ResizeEvent extends Event<PlayerEventType.RESIZE> {
   readonly height: number;
 }
 
+/**
+ * Dispatched when video is resized.
+ *
+ * @category Events
+ * @category Player
+ * @public
+ */
+export interface VideoResizeEvent extends Event<PlayerEventType.VIDEO_RESIZE> {
+  /**
+   * The video's current width.
+   */
+  readonly videoWidth: number;
+
+  /**
+   * The video's current height.
+   */
+  readonly videoHeight: number;
+}
+
 /**
  * Dispatched when the player's duration changes.
  *

package/src/api/event/TheoAdsEvent.ts

@@ -20,6 +20,20 @@ export interface TheoAdsEvent extends Event<PlayerEventType.THEOADS_EVENT> {
   interstitial: Interstitial;
 }
 
+/**
+ * Fired when an interstitial has errored.
+ *
+ * @category Events
+ * @category THEOads
+ * @public
+ */
+export interface TheoAdsErrorEvent extends TheoAdsEvent {
+  /**
+   * Type of THEOads event.
+   */
+  message: string | undefined;
+}
+
 /**
  * The THEOads event types dispatched by the {@link AdsAPI | Ads API}.
  *

package/src/api/player/PlayerEventMap.ts

@@ -1,5 +1,6 @@
 import type { Event } from '../event/Event';
 import type {
+  DimensionChangeEvent,
   DurationChangeEvent,
   ErrorEvent,
   LoadedMetadataEvent,
@@ -13,6 +14,7 @@ import type {
   ResizeEvent,
   SeekedEvent,
   SeekingEvent,
+  VideoResizeEvent,
 } from '../event/PlayerEvent';
 import type { MediaTrackEvent, MediaTrackListEvent, TextTrackEvent, TextTrackListEvent } from '../event/TrackEvent';
 import type { AdEvent } from '../event/AdEvent';
@@ -58,7 +60,12 @@ export enum PlayerEventType {
   WAITING = 'waiting',
   PRESENTATIONMODE_CHANGE = 'presentationmodechange',
   DESTROY = 'destroy',
+  /**
+   * @deprecated Use {@link PlayerEventType.DIMENSION_CHANGE} instead. This event is set for removal in version 11.
+   */
   RESIZE = 'resize',
+  DIMENSION_CHANGE = 'dimensionchange',
+  VIDEO_RESIZE = 'videoresize',
 }
 
 /**
@@ -226,6 +233,18 @@ export interface PlayerEventMap {
 
   /**
    * Dispatched when the player size changes.
+   *
+   * @deprecated Use {@link dimensionchange} instead. This event is set for removal in version 11.
    */
   [PlayerEventType.RESIZE]: ResizeEvent;
+
+  /**
+   * Dispatched when the player size changes.
+   */
+  [PlayerEventType.DIMENSION_CHANGE]: DimensionChangeEvent;
+
+  /**
+   * Dispatched when the video size changes.
+   */
+  [PlayerEventType.VIDEO_RESIZE]: VideoResizeEvent;
 }

package/src/api/player/THEOplayer.ts

@@ -273,6 +273,16 @@ export interface THEOplayer extends EventDispatcher<PlayerEventMap> {
    */
   readonly height: number | undefined;
 
+  /**
+   * The width of the active video rendition, in pixels.
+   */
+  readonly videoWidth: number | undefined;
+
+  /**
+   * The height of the active video rendition, in pixels.
+   */
+  readonly videoHeight: number | undefined;
+
   /**
    * The API for theolive.
    */

package/src/api/source/SourceDescription.ts

@@ -61,18 +61,6 @@ export enum SourceIntegrationId {
   THEO_LIVE = 'theolive'
 }
 
-/**
- * The playback pipeline to use to play a stream.
- *
- * @category Source
- * @platform android
- * @public
- */
-export enum PlaybackPipeline {
-  LEGACY = 'legacy',
-  MEDIA3 = 'media3'
-}
-
 /**
  * Describes the configuration of a player's source.
  *
@@ -364,16 +352,6 @@ export interface BaseSource {
    * <br/> - Ignored for non-HLS streams.
    */
   hls?: HlsPlaybackConfiguration;
-
-  /**
-   * The playback pipeline to use for this stream.
-   *
-   * @defaultValue [PlaybackPipeline.MEDIA3]
-   * @since React Native THEOplayer SDK v9.0.0.
-   * @since Native THEOplayer SDK v9.0.0.
-   * @platform android
-   */
-  playbackPipeline?: PlaybackPipeline;
 }
 
 /**

package/src/api/source/ads/{THEOplayerAdDescription.ts → CsaiAdDescription.ts}

@@ -6,7 +6,7 @@ import type { AdDescription, AdSource } from "./Ads";
  * @category Ads
  * @public
  */
-export interface THEOplayerAdDescription extends AdDescription {
+export interface CsaiAdDescription extends AdDescription {
   /**
    * The source of the ad
    *

package/src/api/source/ads/barrel.ts

@@ -1,5 +1,5 @@
 export * from './Ads';
 export * from './IMAAdDescription';
-export * from './THEOplayerAdDescription';
+export * from './CsaiAdDescription';
 export * from './TheoAdDescription';
 export * from './ssai/barrel';

package/src/api/track/Quality.ts

@@ -1,3 +1,5 @@
+import { isArray } from '../../internal/utils/TypeUtils';
+
 /**
  * Represents a quality of a media track.
  *
@@ -80,6 +82,19 @@ export interface VideoQuality extends Quality {
   readonly firstFrame: number;
 }
 
+export function isVideoQuality(qualities: Quality | Quality[] | undefined): qualities is VideoQuality {
+    if (!qualities) {
+      return false;
+    }
+
+    let quality = qualities;
+    if (isArray(qualities) && qualities.length > 0) {
+      quality = qualities[0];
+    }
+
+    return (quality as VideoQuality).height !== undefined;
+}
+
 /**
  * Represents a quality of an audio track.
  *

package/src/api/track/TextTrackStyle.ts

@@ -28,6 +28,14 @@ export interface TextTrackStyle {
    */
   fontSize: string | undefined;
 
+  /**
+   * The path to a font in the Android `app/src/main/assets/` folder.
+   * 
+   * @remarks
+   * Only supported on Android.
+   */
+  fontPath: string | undefined;
+
   /**
    * The background color for the text track.
    *

package/src/index.tsx

@@ -2,5 +2,4 @@ export * from './api/barrel';
 export { THEOplayerView } from './internal/THEOplayerView';
 export { ContentProtectionRegistry } from './internal/drm/ContentProtectionRegistry';
 export { MediaCache } from './internal/cache/MediaCache';
-export { PlaybackSettings } from './internal/playback/PlaybackSettings';
 export { sdkVersions } from './internal/version/Version';

package/src/internal/THEOplayerView.tsx

@@ -24,6 +24,7 @@ import {
   DefaultAirplayStateChangeEvent,
   DefaultChromecastChangeEvent,
   DefaultChromecastErrorEvent,
+  DefaultDimensionChangeEvent,
   DefaultDurationChangeEvent,
   DefaultErrorEvent,
   DefaultLoadedMetadataEvent,
@@ -41,6 +42,7 @@ import {
   DefaultResizeEvent,
   DefaultSeekingEvent,
   DefaultSeekedEvent,
+  DefaultVideoResizeEvent,
 } from './adapter/event/PlayerEvents';
 import type { NativeCastEvent } from './adapter/event/native/NativeCastEvent';
 import type {
@@ -62,12 +64,14 @@ import {
   NativeSegmentNotFoundEvent,
   NativeTimeUpdateEvent,
   NativeVolumeChangeEvent,
-  NativeResizeEvent,
+  NativeDimensionChangeEvent,
   NativeSeekingEvent,
   NativeSeekedEvent,
+  NativeVideoResizeEvent,
 } from './adapter/event/native/NativePlayerEvent';
 import type { NativeAdEvent } from './adapter/event/native/NativeAdEvent';
 import { fromNativeTheoLiveEvent, NativeTheoLiveEvent } from './adapter/event/native/NativeTheoLiveEvent';
+import { fromNativeTheoAdsEvent, NativeTheoAdsEvent } from './adapter/event/native/NativeTheoAdsEvent';
 import { THEOplayerAdapter } from './adapter/THEOplayerAdapter';
 import { getFullscreenSize } from './utils/Dimensions';
 import { Poster } from './poster/Poster';
@@ -105,10 +109,12 @@ interface THEOplayerRCTViewProps {
   onNativeMediaTrackEvent: (event: NativeSyntheticEvent<NativeMediaTrackEvent>) => void;
   onNativeAdEvent: (event: NativeSyntheticEvent<NativeAdEvent>) => void;
   onNativeTHEOliveEvent: (event: NativeSyntheticEvent<NativeTheoLiveEvent>) => void;
+  onNativeTHEOadsEvent: (event: NativeSyntheticEvent<NativeTheoAdsEvent>) => void;
   onNativeCastEvent: (event: NativeSyntheticEvent<NativeCastEvent>) => void;
   onNativePresentationModeChange: (event: NativeSyntheticEvent<NativePresentationModeChangeEvent>) => void;
   onNativeDeviceOrientationChanged: () => void;
-  onNativeResize: (event: NativeSyntheticEvent<NativeResizeEvent>) => void;
+  onNativeDimensionChange: (event: NativeSyntheticEvent<NativeDimensionChangeEvent>) => void;
+  onNativeVideoResize: (event: NativeSyntheticEvent<NativeVideoResizeEvent>) => void;
 }
 
 interface THEOplayerRCTViewState {
@@ -350,6 +356,10 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
     this._facade.dispatchEvent(fromNativeTheoLiveEvent(event));
   };
 
+  private _onTHEOadsEvent = (event: NativeSyntheticEvent<NativeTheoAdsEvent>) => {
+    this._facade.dispatchEvent(fromNativeTheoAdsEvent(event));
+  };
+
   private _onCastEvent = (event: NativeSyntheticEvent<NativeCastEvent>) => {
     switch (event.nativeEvent.type) {
       case CastEventType.CHROMECAST_STATE_CHANGE:
@@ -381,8 +391,15 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
     );
   };
 
-  private _onResize = (event: NativeSyntheticEvent<NativeResizeEvent>) => {
-    this._facade.dispatchEvent(new DefaultResizeEvent(event.nativeEvent.width, event.nativeEvent.height));
+  private _onDimensionChange = (event: NativeSyntheticEvent<NativeDimensionChangeEvent>) => {
+    const width = event.nativeEvent.width;
+    const height = event.nativeEvent.height;
+    this._facade.dispatchEvent(new DefaultResizeEvent(width, height));
+    this._facade.dispatchEvent(new DefaultDimensionChangeEvent(width, height));
+  };
+
+  private _onVideoResize = (event: NativeSyntheticEvent<NativeVideoResizeEvent>) => {
+    this._facade.dispatchEvent(new DefaultVideoResizeEvent(event.nativeEvent.videoWidth, event.nativeEvent.videoHeight));
   };
 
   private _updatePoster = () => {
@@ -442,10 +459,12 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
           onNativeMediaTrackEvent={this._onMediaTrackEvent}
           onNativeAdEvent={this._onAdEvent}
           onNativeTHEOliveEvent={this._onTHEOliveEvent}
+          onNativeTHEOadsEvent={this._onTHEOadsEvent}
           onNativeCastEvent={this._onCastEvent}
           onNativePresentationModeChange={this._onPresentationModeChange}
           onNativeDeviceOrientationChanged={this._onDeviceOrientationChanged}
-          onNativeResize={this._onResize}
+          onNativeDimensionChange={this._onDimensionChange}
+          onNativeVideoResize={this._onVideoResize}
         />
         {posterActive && <Poster uri={poster} style={posterStyle} />}
         {children}

package/src/internal/THEOplayerView.web.tsx

@@ -56,7 +56,7 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
     // Note: `display: contents` causes an element's children to appear as if they were direct children of the element's parent,
     // ignoring the element itself.
     // It's necessary to make sure we do not interfere with the IMA container
-    <div id={'theoplayer-root-container'} style={{ display: 'contents' }}>
+    <div id={'theoplayer-root-container'} style={{ display: CSS.supports('display', 'contents') ? 'contents' : 'flex' }}>
       {!CSS.supports('aspect-ratio', '16/9') ? (
         // Handle aspect-ratio 16/9 with padding-top: 56.25% to support older versions.
         // {@link https://www.w3schools.com/howto/howto_css_aspect_ratio.asp}

package/src/internal/adapter/DefaultNativePlayerState.ts

@@ -39,6 +39,8 @@ export class DefaultNativePlayerState extends DefaultTextTrackState implements N
   selectedVideoTrack: number | undefined = undefined;
   width: number | undefined = undefined;
   height: number | undefined = undefined;
+  videoWidth: number | undefined = undefined;
+  videoHeight: number | undefined = undefined;
 
   apply(state: Partial<NativePlayerState>): void {
     Object.assign(this, state);

package/src/internal/adapter/NativePlayerState.ts

@@ -33,6 +33,8 @@ export interface MediaTrackState {
   targetVideoQuality: number | number[] | undefined;
   selectedVideoTrack: number | undefined;
   selectedAudioTrack: number | undefined;
+  videoWidth: number | undefined;
+  videoHeight: number | undefined;
 }
 
 export interface TextTrackState {

package/src/internal/adapter/THEOplayerAdapter.ts

@@ -1,46 +1,46 @@
 import { DefaultEventDispatcher } from './event/DefaultEventDispatcher';
 import {
   ABRConfiguration,
+  addTrack,
   AdsAPI,
+  AspectRatio,
+  BackgroundAudioConfiguration,
   CastAPI,
+  DimensionChangeEvent,
   DurationChangeEvent,
   EventBroadcastAPI,
+  findMediaTrackByUid,
+  isVideoQuality,
   LoadedMetadataEvent,
   MediaTrack,
   MediaTrackEvent,
+  MediaTrackEventType,
   MediaTrackListEvent,
+  MediaTrackType,
   NativeHandleType,
   PiPConfiguration,
   PlayerEventMap,
+  PlayerEventType,
+  PlayerVersion,
+  PreloadType,
+  PresentationMode,
   PresentationModeChangeEvent,
   ProgressEvent,
   RateChangeEvent,
+  removeTrack,
   RenderingTarget,
-  ResizeEvent,
   SeekedEvent,
   SeekingEvent,
   SourceDescription,
   TextTrack,
+  TextTrackStyle,
   TheoAdsAPI,
   TheoLiveAPI,
   THEOplayer,
   THEOplayerView,
   TimeUpdateEvent,
-} from 'react-native-theoplayer';
-import {
-  addTrack,
-  AspectRatio,
-  BackgroundAudioConfiguration,
-  findMediaTrackByUid,
-  MediaTrackEventType,
-  MediaTrackType,
-  PlayerEventType,
-  PlayerVersion,
-  PreloadType,
-  PresentationMode,
-  removeTrack,
-  TextTrackStyle,
   TrackListEventType,
+  VideoResizeEvent,
 } from 'react-native-theoplayer';
 import { THEOplayerNativeAdsAdapter } from './ads/THEOplayerNativeAdsAdapter';
 import { THEOplayerNativeCastAdapter } from './cast/THEOplayerNativeCastAdapter';
@@ -90,7 +90,8 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     this.addEventListener(PlayerEventType.MEDIA_TRACK, this.onMediaTrack);
     this.addEventListener(PlayerEventType.MEDIA_TRACK_LIST, this.onMediaTrackList);
     this.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
-    this.addEventListener(PlayerEventType.RESIZE, this.onResize);
+    this.addEventListener(PlayerEventType.DIMENSION_CHANGE, this.onDimensionChange);
+    this.addEventListener(PlayerEventType.VIDEO_RESIZE, this.onVideoResize);
   }
 
   private hasValidSource(): boolean {
@@ -117,11 +118,16 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     this._state.currentProgramDateTime = event.currentProgramDateTime;
   };
 
-  private onResize = (event: ResizeEvent) => {
+  private onDimensionChange = (event: DimensionChangeEvent) => {
     this._state.width = event.width;
     this._state.height = event.height;
   };
 
+  private onVideoResize = (event: VideoResizeEvent) => {
+    this._state.videoWidth = event.videoWidth;
+    this._state.videoHeight = event.videoHeight;
+  };
+
   private onLoadedMetadata = (event: LoadedMetadataEvent) => {
     this._state.duration = event.duration;
     this._state.audioTracks = event.audioTracks;
@@ -157,16 +163,24 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
   };
 
   private onMediaTrack = (event: MediaTrackEvent) => {
-    const { subType, trackType, trackUid } = event;
+    const { subType, trackType, trackUid, qualities } = event;
     const tracks = trackType === MediaTrackType.VIDEO ? this._state.videoTracks : this._state.audioTracks;
     const track = findMediaTrackByUid(tracks, trackUid);
     switch (subType) {
       case MediaTrackEventType.ACTIVE_QUALITY_CHANGED:
+        if (!track) {
+          break;
+        }
+
         // Update local state
-        if (track) {
-          Object.assign(track, { ...track, activeQuality: event.qualities });
+        Object.assign(track, { ...track, activeQuality: qualities });
+
+        if (!isVideoQuality(qualities)) {
+          break;
         }
-        break;
+
+        this._state.videoWidth = qualities.width;
+        this._state.videoHeight = qualities.height;
     }
   };
 
@@ -524,4 +538,12 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
   get height(): number | undefined {
     return this._state.height;
   }
+
+  get videoWidth(): number | undefined {
+    return this._state.videoWidth;
+  }
+
+  get videoHeight(): number | undefined {
+    return this._state.videoHeight;
+  }
 }

package/src/internal/adapter/THEOplayerWebAdapter.ts

@@ -23,7 +23,7 @@ import {
 } from 'react-native-theoplayer';
 import { THEOplayerWebAdsAdapter } from './ads/THEOplayerWebAdsAdapter';
 import { THEOplayerWebCastAdapter } from './cast/THEOplayerWebCastAdapter';
-import type { MediaTrack as NativeMediaTrack, TextTrack as NativeTextTrack } from 'theoplayer';
+import type { DimensionChangeEvent, MediaTrack as NativeMediaTrack, TextTrack as NativeTextTrack } from 'theoplayer';
 import { ChromelessPlayer as NativeChromelessPlayer, SourceDescription as NativeSourceDescription, version as nativeVersion } from 'theoplayer';
 import { findNativeQualitiesByUid, fromNativeMediaTrackList } from './web/TrackUtils';
 import type { ABRConfiguration, SourceDescription } from 'src/api/barrel';
@@ -62,6 +62,8 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
   private _pipConfiguration: PiPConfiguration = defaultPipConfiguration;
   private _externalEventRouter: EventBroadcastAPI | undefined = undefined;
   private _cmcdConnector: CMCDConnector | undefined = undefined;
+  private _width: number | undefined = undefined;
+  private _height: number | undefined = undefined;
 
   constructor(player: NativeChromelessPlayer, config?: PlayerConfiguration) {
     super();
@@ -74,6 +76,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     this._eventForwarder = new WebEventForwarder(this._player, this);
     this._presentationModeManager = new WebPresentationModeManager(this._player, this);
     document.addEventListener('visibilitychange', this.onVisibilityChange);
+    this._player.addEventListener('dimensionchange', this.onPlayerDimensionChange);
 
     // Optionally create a media session connector
     if (config?.mediaControl?.mediaSessionEnabled !== false) {
@@ -387,6 +390,7 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     this._mediaSession = undefined;
     this._cmcdConnector?.destroy();
     this._cmcdConnector = undefined;
+    this._player?.removeEventListener('dimensionchange', this.onPlayerDimensionChange);
     this._player?.destroy();
     this._player = undefined;
   }
@@ -405,6 +409,14 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     this._mediaSession?.updateMediaSession();
   };
 
+  private readonly onPlayerDimensionChange = (event: DimensionChangeEvent) => {
+    if (!this._player) {
+      return;
+    }
+    this._width = event.width;
+    this._height = event.height;
+  };
+
   get nativeHandle(): NativeHandleType {
     return this._player;
   }
@@ -414,10 +426,18 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
   }
 
   get width(): number | undefined {
-    return this._player?.videoWidth;
+    return this._width;
   }
 
   get height(): number | undefined {
+    return this._height;
+  }
+
+  get videoWidth(): number | undefined {
+    return this._player?.videoWidth;
+  }
+
+  get videoHeight(): number | undefined {
     return this._player?.videoHeight;
   }
 }