react-native-theoplayer 10.12.1 → 11.0.0

package/src/internal/THEOplayerView.tsx

@@ -39,7 +39,6 @@ import {
   DefaultTextTrackListEvent,
   DefaultVolumeChangeEvent,
   DefaultTimeupdateEvent,
-  DefaultResizeEvent,
   DefaultSeekingEvent,
   DefaultSeekedEvent,
   DefaultVideoResizeEvent,
@@ -124,7 +123,8 @@ interface THEOplayerRCTViewProps {
 interface THEOplayerRCTViewState {
   error?: PlayerError;
   presentationMode?: PresentationMode | undefined;
-  screenSize: ScaledSize;
+  previousPresentationMode?: PresentationMode | undefined;
+  fullscreenSizeOverride: ScaledSize;
   posterActive: boolean;
   poster: string | undefined;
 }
@@ -139,7 +139,8 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   private static initialState: THEOplayerRCTViewState = {
     error: undefined,
     presentationMode: PresentationMode.inline,
-    screenSize: getFullscreenSize(),
+    previousPresentationMode: undefined,
+    fullscreenSizeOverride: getFullscreenSize(),
     posterActive: false,
     poster: undefined,
   };
@@ -186,7 +187,7 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   }
 
   private _onDimensionsChanged = () => {
-    this.setState({ screenSize: getFullscreenSize() });
+    this.setState({ fullscreenSizeOverride: getFullscreenSize() });
   };
 
   private _onDeviceOrientationChanged = () => {
@@ -399,10 +400,11 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
 
   private _onPresentationModeChange = (event: NativeSyntheticEvent<NativePresentationModeChangeEvent>) => {
     const presentationMode = event.nativeEvent.presentationMode;
-    this.setState({ presentationMode }, () => {
+    const previousPresentationMode = event.nativeEvent.previousPresentationMode;
+    this.setState({ presentationMode, previousPresentationMode }, () => {
       // Re-measure screen size after transitioning to fullscreen.
       if (presentationMode === PresentationMode.fullscreen) {
-        this.setState({ screenSize: getFullscreenSize() });
+        this.setState({ fullscreenSizeOverride: getFullscreenSize() });
       }
     });
     this._facade?.dispatchEvent(
@@ -417,7 +419,6 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   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));
   };
 
@@ -438,11 +439,25 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   };
 
   private styleOverride() {
-    const { presentationMode, screenSize: fullscreenSize } = this.state;
-    return presentationMode === PresentationMode.fullscreen ||
-      (Platform.OS === 'android' && presentationMode === PresentationMode.pip && this._facade?.pipConfiguration?.reparentPip == true)
-      ? fullscreenSize
-      : {};
+    const { presentationMode, previousPresentationMode, fullscreenSizeOverride: fullscreenOverride } = this.state;
+
+    // When in fullscreen, we need to apply an override to make sure the player fills the entire screen
+    if (presentationMode === PresentationMode.fullscreen) {
+      return fullscreenOverride;
+    }
+
+    // When in PiP, we need to apply the same override if the PiP configuration specifies reparenting, or when coming from fullscreen.
+    if (presentationMode === PresentationMode.pip) {
+      if (
+        (Platform.OS === 'android' && this._facade?.pipConfiguration?.reparentPip === true) ||
+        previousPresentationMode === PresentationMode.fullscreen
+      ) {
+        return fullscreenOverride;
+      }
+    }
+
+    // otherwise, no override is needed
+    return {};
   }
 
   public render(): React.JSX.Element {

package/src/internal/THEOplayerView.web.tsx

@@ -2,16 +2,18 @@ import React, { useEffect, useRef } from 'react';
 import type { THEOplayerViewProps } from 'react-native-theoplayer';
 import { ChromelessPlayer } from 'theoplayer';
 import { THEOplayerWebAdapter } from './adapter/THEOplayerWebAdapter';
+import { useIsAttached } from './hooks/useIsAttached';
 
 export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProps>) {
   const { config, children, onPlayerReady, onPlayerDestroy } = props;
   const player = useRef<ChromelessPlayer | null>(null);
   const adapter = useRef<THEOplayerWebAdapter | null>(null);
-  const container = useRef<null | HTMLDivElement>(null);
+  const container = useRef<HTMLDivElement | null>(null);
+  const attachedToDocument = useIsAttached(container);
 
   useEffect(() => {
-    // Create player inside container.
-    if (container.current) {
+    // Create player inside container once it is attached to the document.
+    if (container.current && attachedToDocument) {
       const ads = {
         ...config?.ads,
         googleIma: {
@@ -51,7 +53,7 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
     };
     // TODO: Follow the rules of react hooks, to be fixed in next major because it's a breaking change for some customers.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [container]);
+  }, [container, attachedToDocument]);
 
   return (
     // Note: `display: contents` causes an element's children to appear as if they were direct children of the element's parent,

package/src/internal/adapter/THEOplayerAdapter.ts

@@ -243,10 +243,6 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     return this._theoliveAdapter;
   }
 
-  get theolive(): TheoLiveAPI {
-    return this._theoliveAdapter;
-  }
-
   set autoplay(autoplay: boolean) {
     this._state.autoplay = autoplay;
     NativePlayerModule.setAutoplay(this._view.nativeHandle, autoplay);

package/src/internal/adapter/THEOplayerWebAdapter.ts

@@ -374,10 +374,6 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     return this._theoliveAdapter;
   }
 
-  public get theolive(): TheoLiveAPI {
-    return this._theoliveAdapter;
-  }
-
   public get version(): PlayerVersion {
     return {
       version: nativeVersion,

package/src/internal/adapter/WebEventForwarder.ts

@@ -62,7 +62,6 @@ import {
   DefaultProgressEvent,
   DefaultRateChangeEvent,
   DefaultReadyStateChangeEvent,
-  DefaultResizeEvent,
   DefaultSeekedEvent,
   DefaultSeekingEvent,
   DefaultSegmentNotFoundEvent,
@@ -289,7 +288,6 @@ 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));
   };
 

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

@@ -30,7 +30,6 @@ import {
   Quality,
   RateChangeEvent,
   ReadyStateChangeEvent,
-  ResizeEvent,
   SeekedEvent,
   SeekingEvent,
   SegmentNotFoundEvent,
@@ -103,18 +102,6 @@ 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,
-    public height: number,
-  ) {
-    super(PlayerEventType.RESIZE);
-  }
-}
-
 export class DefaultDimensionChangeEvent extends BaseEvent<PlayerEventType.DIMENSION_CHANGE> implements DimensionChangeEvent {
   constructor(
     public width: number,

package/src/internal/adapter/track/TextTrackStyleAdapter.ts

@@ -77,14 +77,14 @@ export class TextTrackStyleAdapter implements TextTrackStyle {
   }
 
   get fontPath(): string | undefined {
-    return this._fontPath
+    return this._fontPath;
   }
 
   set fontPath(path: string) {
-    this._fontPath = path
+    this._fontPath = path;
     NativePlayerModule.setTextTrackStyle(this._view.nativeHandle, {
-      fontPath: path
-    })
+      fontPath: path,
+    });
   }
 
   get fontSize(): string | undefined {

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

@@ -41,7 +41,7 @@ export function fromNativeTextTrackList(tracks: NativeTextTrackList): TextTrack[
 }
 
 export function fromNativeTextTrack(track: NativeTextTrack): TextTrack {
-  const { id, uid, kind, label, language, mode, type, src, forced } = track;
+  const { id, uid, kind, label, language, mode, type, src, forced, captionChannel } = track;
 
   return {
     id,
@@ -53,6 +53,7 @@ export function fromNativeTextTrack(track: NativeTextTrack): TextTrack {
     type,
     src,
     forced,
+    captionChannel,
     cues: track.cues ? track.cues.map((cue) => fromNativeCue(cue)) : [],
   } as TextTrack;
 }

package/src/internal/hooks/useIsAttached.ts

@@ -0,0 +1,44 @@
+/**
+ * React hook to determine if a referenced HTMLDivElement is currently attached to the document.
+ *
+ * This hook checks if the provided ref's current element is attached to the DOM (document.body).
+ * Returns a boolean indicating the attachment state.
+ * Once attached, it will stop observing for changes to optimize performance.
+ *
+ * @param ref - React ref object pointing to an HTMLDivElement
+ * @returns boolean - true if the element is attached to the document, false otherwise
+ */
+import { RefObject, useEffect, useState } from 'react';
+
+/**
+ * @param ref
+ */
+export const useIsAttached = (ref: RefObject<HTMLDivElement | null>) => {
+  const [isAttached, setIsAttached] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const checkAttached = () => {
+      const connected = ref.current?.isConnected ?? false;
+      setIsAttached(connected);
+      return connected;
+    };
+
+    if (checkAttached()) return;
+
+    const observer: MutationObserver = new MutationObserver(() => {
+      const attached = checkAttached();
+      // Once attached, stop observing.
+      if (attached) {
+        observer.disconnect();
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+    return () => observer.disconnect();
+  }, [ref]);
+  return isAttached;
+};

package/src/manifest.json

@@ -1 +1 @@
-{"version":"10.12.1","buildDate":"2026-03-19T10:58:07.375Z"}
+{"version":"11.0.0","buildDate":"2026-04-16T14:36:11.831Z"}