react-native-theoplayer 10.0.0 → 10.2.0

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/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

@@ -274,7 +274,24 @@ export interface THEOplayer extends EventDispatcher<PlayerEventMap> {
   readonly height: number | undefined;
 
   /**
-   * The API for theolive.
+   * 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.
+   */
+  readonly theoLive: TheoLiveAPI;
+
+  /**
+   * The API for THEOlive.
+   *
+   * @deprecated use {@link THEOplayer.theoLive} instead.
    */
   readonly theolive: TheoLiveAPI;
 }

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

@@ -35,4 +35,11 @@ export interface Interstitial {
    *
    */
   duration: number | undefined;
+
+  /**
+   * The ad tag parameters that are used for this specific ad break.
+   * @remarks
+   * <br/> - The set values are combined and potentially override parameters set on the {@link TheoAdDescription.adTagParameters} or through {@link TheoAds.replaceAdTagParameters}.
+   */
+  adTagParameters: Record<string, string>;
 }

package/src/api/theolive/TheoLiveAPI.ts

@@ -22,7 +22,7 @@ export interface HespLatencies {
   playerLatency?: number;
 
   /**
-   * The total latency introduced by the theolive pipeline: from frame ingested till displayed on screen.
+   * The total latency introduced by the THEOlive pipeline: from frame ingested till displayed on screen.
    */
   theoliveLatency?: number
 }

package/src/api/theolive/TheoLiveConfiguration.ts

@@ -40,7 +40,7 @@ export interface TheoLiveConfiguration {
    *
    * @remarks
    * <br/> - Available on iOS only.
-   * <br/> - When enabled, theolive channels will be streamed using the legacy pipeline.
+   * <br/> - When enabled, THEOlive channels will be streamed using the legacy pipeline.
    *
    * @defaultValue `false`
    */

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/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,9 +64,10 @@ 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';
@@ -110,7 +113,8 @@ interface THEOplayerRCTViewProps {
   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 {
@@ -151,6 +155,9 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   }
 
   componentWillUnmount() {
+    // Allow proper cleanup on the native player before destruction
+    this._facade.willUnmount();
+
     // Notify the player will be destroyed.
     const { onPlayerDestroy } = this.props;
     if (onPlayerDestroy) {
@@ -353,7 +360,7 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   };
 
   private _onTHEOadsEvent = (event: NativeSyntheticEvent<NativeTheoAdsEvent>) => {
-    this._facade.dispatchEvent(fromNativeTheoAdsEvent(event));
+    this._facade.dispatchEvent(fromNativeTheoAdsEvent(this.nativeHandle, event));
   };
 
   private _onCastEvent = (event: NativeSyntheticEvent<NativeCastEvent>) => {
@@ -387,8 +394,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 = () => {
@@ -452,7 +466,8 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
           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

@@ -4,7 +4,7 @@ import { ChromelessPlayer } from 'theoplayer';
 import { THEOplayerWebAdapter } from './adapter/THEOplayerWebAdapter';
 
 export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProps>) {
-  const { config, children } = props;
+  const { config, children, onPlayerReady, onPlayerDestroy } = props;
   const player = useRef<ChromelessPlayer | null>(null);
   const adapter = useRef<THEOplayerWebAdapter | null>(null);
   const container = useRef<null | HTMLDivElement>(null);
@@ -38,25 +38,24 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
       window.nativePlayer = player;
 
       // Notify the player is ready
-      props.onPlayerReady?.(adapter.current);
+      onPlayerReady?.(adapter.current);
     }
 
     // Clean-up
     return () => {
       // Notify the player will be destroyed.
-      const { onPlayerDestroy } = props;
       if (adapter?.current && onPlayerDestroy) {
         onPlayerDestroy(adapter?.current);
       }
       adapter?.current?.destroy();
     };
-  }, [container]);
+  }, [config, container, onPlayerReady, onPlayerDestroy]);
 
   return (
     // 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;
     }
   };
 
@@ -218,6 +232,10 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     return this._theoAdsAdapter;
   }
 
+  get theoLive(): TheoLiveAPI {
+    return this._theoliveAdapter;
+  }
+
   get theolive(): TheoLiveAPI {
     return this._theoliveAdapter;
   }
@@ -524,4 +542,18 @@ 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;
+  }
+
+  willUnmount(): void {
+    if (Platform.OS === 'ios') {
+      NativePlayerModule.willUnmount(this._view.nativeHandle);
+    }
+  }
 }

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) {
@@ -367,6 +370,10 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     return this._castAdapter;
   }
 
+  public get theoLive(): TheoLiveAPI {
+    return this._theoliveAdapter;
+  }
+
   public get theolive(): TheoLiveAPI {
     return this._theoliveAdapter;
   }
@@ -387,6 +394,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 +413,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 +430,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;
   }
 }

package/src/internal/adapter/WebEventForwarder.ts

@@ -43,6 +43,7 @@ import {
   DefaultAirplayStateChangeEvent,
   DefaultChromecastChangeEvent,
   DefaultChromecastErrorEvent,
+  DefaultDimensionChangeEvent,
   DefaultDurationChangeEvent,
   DefaultErrorEvent,
   DefaultLoadedMetadataEvent,
@@ -64,6 +65,7 @@ import {
   DefaultTheoLiveEvent,
   DefaultTheoLiveIntentToFallbackEvent,
   DefaultTimeupdateEvent,
+  DefaultVideoResizeEvent,
   DefaultVolumeChangeEvent,
 } from './event/PlayerEvents';
 import { fromNativeCue, fromNativeMediaTrack, fromNativeTextTrack } from './web/TrackUtils';
@@ -100,6 +102,7 @@ export class WebEventForwarder {
     this._player.addEventListener('segmentnotfound', this.onSegmentNotFound);
     this._player.addEventListener('volumechange', this.onVolumeChangeEvent);
     this._player.addEventListener('dimensionchange', this.onDimensionChange);
+    this._player.addEventListener('resize', this.onVideoResize);
 
     this._player.textTracks.addEventListener('addtrack', this.onAddTextTrack);
     this._player.textTracks.addEventListener('removetrack', this.onRemoveTextTrack);
@@ -147,6 +150,8 @@ export class WebEventForwarder {
     this._player.removeEventListener('ratechange', this.onPlaybackRateChange);
     this._player.removeEventListener('segmentnotfound', this.onSegmentNotFound);
     this._player.removeEventListener('volumechange', this.onVolumeChangeEvent);
+    this._player.removeEventListener('dimensionchange', this.onDimensionChange);
+    this._player.removeEventListener('resize', this.onVideoResize);
 
     this._player.textTracks.removeEventListener('addtrack', this.onAddTextTrack);
     this._player.textTracks.removeEventListener('removetrack', this.onRemoveTextTrack);
@@ -266,6 +271,11 @@ export class WebEventForwarder {
 
   private readonly onDimensionChange = (event: NativeDimensionChangeEvent) => {
     this._facade.dispatchEvent(new DefaultResizeEvent(event.width, event.height));
+    this._facade.dispatchEvent(new DefaultDimensionChangeEvent(event.width, event.height));
+  };
+
+  private readonly onVideoResize = (_event: NativeEvent<'resize'>) => {
+    this._facade.dispatchEvent(new DefaultVideoResizeEvent(this._player.videoWidth, this._player.videoHeight));
   };
 
   private readonly onAddTextTrack = (event: AddTrackEvent) => {

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

@@ -50,6 +50,8 @@ import {
   TheoLiveEndpoint,
   TheoLiveEndpointLoadedEvent,
   TheoLiveIntentToFallbackEvent,
+  DimensionChangeEvent,
+  VideoResizeEvent,
 } from 'react-native-theoplayer';
 
 export class DefaultLoadedMetadataEvent extends BaseEvent<PlayerEventType.LOADED_METADATA> implements LoadedMetadataEvent {
@@ -91,6 +93,9 @@ export class DefaultVolumeChangeEvent extends BaseEvent<PlayerEventType.VOLUME_C
   }
 }
 
+/**
+ * @deprecated Use {@link DefaultDimensionChangeEvent} instead. This event is set for removal in version 11.
+ */
 export class DefaultResizeEvent extends BaseEvent<PlayerEventType.RESIZE> implements ResizeEvent {
   constructor(
     public width: number,
@@ -100,6 +105,24 @@ export class DefaultResizeEvent extends BaseEvent<PlayerEventType.RESIZE> implem
   }
 }
 
+export class DefaultDimensionChangeEvent extends BaseEvent<PlayerEventType.DIMENSION_CHANGE> implements DimensionChangeEvent {
+  constructor(
+    public width: number,
+    public height: number,
+  ) {
+    super(PlayerEventType.DIMENSION_CHANGE);
+  }
+}
+
+export class DefaultVideoResizeEvent extends BaseEvent<PlayerEventType.VIDEO_RESIZE> implements VideoResizeEvent {
+  constructor(
+    public videoWidth: number,
+    public videoHeight: number,
+  ) {
+    super(PlayerEventType.VIDEO_RESIZE);
+  }
+}
+
 export class DefaultErrorEvent extends BaseEvent<PlayerEventType.ERROR> implements ErrorEvent {
   constructor(public error: PlayerError) {
     super(PlayerEventType.ERROR);