react-native-theoplayer 10.13.0 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-theoplayer",
-  "version": "10.13.0",
+  "version": "11.0.0",
   "description": "A THEOplayer video component for react-native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -58,8 +58,8 @@
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@expo/config-plugins": "^10.0.2",
-    "@react-native/eslint-config": "^0.83.1",
-    "@types/react": "^19.2.0",
+    "@react-native/eslint-config": "^0.84.1",
+    "@types/react": "^19.2.14",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^7.0.0",
@@ -67,10 +67,10 @@
     "lint-staged": "^15.5.1",
     "pod-install": "^0.1.39",
     "prettier": "^3.5.3",
-    "react": "^19.2.0",
-    "react-native": "^0.83.1",
+    "react": "^19.2.3",
+    "react-native": "^0.84.1",
     "react-native-builder-bob": "^0.39.1",
-    "theoplayer": "^10.10.0",
+    "theoplayer": "^11.0.0",
     "typedoc": "^0.25.13",
     "typedoc-plugin-external-resolver": "^1.0.3",
     "typedoc-plugin-mdn-links": "^3.3.4",
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "theoplayer": "^9.12.0 || ^10"
+    "theoplayer": "^11"
   },
   "peerDependenciesMeta": {
     "theoplayer": {
@@ -88,7 +88,7 @@
     }
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -109,7 +109,7 @@
     ]
   },
   "dependencies": {
-    "@theoplayer/cmcd-connector-web": "^1.4.0",
+    "@theoplayer/cmcd-connector-web": "^1.5.0",
     "buffer": "^6.0.3"
   }
 }

package/react-native-theoplayer.podspec

@@ -32,7 +32,7 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "13.4", :tvos => "13.4" }
+  s.platforms    = { :ios => "15.0", :tvos => "15.0" }
   s.source       = { :git => "https://www.theoplayer.com/.git", :tag => "#{s.version}" }
 
   s.source_files = 'ios/*.{h,m,swift}', 'ios/ads/*.swift', 'ios/casting/*.swift', 'ios/contentprotection/*.swift', 'ios/pip/*.swift', 'ios/backgroundAudio/*.swift', 'ios/cache/*.swift', 'ios/sideloadedMetadata/*.swift', 'ios/eventBroadcasting/*.swift' , 'ios/ui/*.swift', 'ios/presentationMode/*.swift', 'ios/viewController/*.swift', 'ios/THEOlive/*.swift', 'ios/THEOads/*.swift', 'ios/millicast/*.swift'
@@ -43,37 +43,37 @@ Pod::Spec.new do |s|
 
   # THEOplayer Dependency
   puts "Adding THEOplayerSDK-core"
-  s.dependency "THEOplayerSDK-core", "~> 10.10"
+  s.dependency "THEOplayerSDK-core", "~> 11.0"
 
   # THEOlive Dependency
   puts "Adding THEOplayer-Integration-THEOlive"
-  s.dependency "THEOplayer-Integration-THEOlive", "~> 10.12"
+  s.dependency "THEOplayer-Integration-THEOlive", "~> 11.0"
 
   # Feature based integration dependencies
   if theofeatures.include?("GOOGLE_IMA")
 	puts "Adding THEOplayer-Integration-GoogleIMA"
-    s.dependency "THEOplayer-Integration-GoogleIMA", "~> 10.12"
+    s.dependency "THEOplayer-Integration-GoogleIMA", "~> 11.0"
   end
 
   if theofeatures.include?("CHROMECAST")
 	puts "Adding THEOplayer-Integration-GoogleCast"
-    s.ios.dependency "THEOplayer-Integration-GoogleCast", "~> 10.12"
+    s.ios.dependency "THEOplayer-Integration-GoogleCast", "~> 11.0"
   end
 
   if theofeatures.include?("THEO_ADS")
 	puts "Adding THEOplayer-Integration-THEOads"
-    s.dependency "THEOplayer-Integration-THEOads", "~> 10.12"
+    s.dependency "THEOplayer-Integration-THEOads", "~> 11.0"
   end
 
   if theofeatures.include?("MILLICAST")
   puts "Adding THEOplayer-Integration-Millicast"
-    s.dependency "THEOplayer-Integration-Millicast", "~> 10.12"
+    s.dependency "THEOplayer-Integration-Millicast", "~> 11.0"
   end
 
   # Feature based connector dependencies
   if theofeatures.include?("SIDELOADED_TEXTTRACKS")
 	puts "Adding THEOplayer-Connector-SideloadedSubtitle"
-    s.dependency "THEOplayer-Connector-SideloadedSubtitle", "~> 10.12"
+    s.dependency "THEOplayer-Connector-SideloadedSubtitle", "~> 11.0"
   end
 
 end

package/src/api/event/PlayerEvent.ts

@@ -69,27 +69,6 @@ export interface DimensionChangeEvent extends Event<PlayerEventType.DIMENSION_CH
   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> {
-  /**
-   * The player's current width.
-   */
-  readonly width: number;
-
-  /**
-   * The player's current height.
-   */
-  readonly height: number;
-}
-
 /**
  * Dispatched when video is resized.
  *

package/src/api/player/PlayerEventMap.ts

@@ -12,7 +12,6 @@ import type {
   TimeUpdateEvent,
   PresentationModeChangeEvent,
   VolumeChangeEvent,
-  ResizeEvent,
   SeekedEvent,
   SeekingEvent,
   VideoResizeEvent,
@@ -62,10 +61,6 @@ 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',
 }
@@ -238,13 +233,6 @@ export interface PlayerEventMap {
    */
   [PlayerEventType.DESTROY]: Event<PlayerEventType.DESTROY>;
 
-  /**
-   * 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.
    */

package/src/api/player/THEOplayer.ts

@@ -287,11 +287,4 @@ export interface THEOplayer extends EventDispatcher<PlayerEventMap> {
    * The API for THEOlive.
    */
   readonly theoLive: TheoLiveAPI;
-
-  /**
-   * The API for THEOlive.
-   *
-   * @deprecated use {@link THEOplayer.theoLive} instead.
-   */
-  readonly theolive: TheoLiveAPI;
 }

package/src/api/source/SourceDescription.ts

@@ -50,18 +50,6 @@ export type Sources = Source | Source[];
  */
 export type CrossOriginSetting = '' | 'anonymous' | 'use-credentials';
 
-/**
- * The integration identifier of a source specific to a pre-integration, represented by a value from the following list:
- * <br/> - `'theolive'`: The source contains the THEOlive initialization url.
- *
- * @category Source
- * @public
- * @deprecated use {@link TypedSource.type} instead.
- */
-export enum SourceIntegrationId {
-  THEO_LIVE = 'theolive'
-}
-
 /**
  * Describes the configuration of a player's source.
  *
@@ -284,16 +272,6 @@ export interface TextTrackDescription {
  * @public
  */
 export interface BaseSource {
-  /**
-   * The integration ID of the source.
-   *
-   * @remarks
-   * <br/> - This can be used to signal that a source is specific to an integration.
-   *
-   * @deprecated use {@link TypedSource.type} instead.
-   */
-  integration?: SourceIntegrationId;
-
   /**
    * The cross-origin setting of the source.
    *

package/src/api/theolive/TheoLiveSource.ts

@@ -1,4 +1,4 @@
-import { SourceIntegrationId, TypedSource } from 'react-native-theoplayer';
+import { TypedSource } from 'react-native-theoplayer';
 import { WebrtcOptions } from './WebrtcOptions';
 
 /**
@@ -9,9 +9,9 @@ import { WebrtcOptions } from './WebrtcOptions';
  */
 export interface TheoLiveSource extends TypedSource {
     /**
-     * @deprecated use {@link TypedSource.type} instead.
+     * The source URL of the media resource.
      */
-    integration: SourceIntegrationId.THEO_LIVE;
+    src: string;
 
     /**
      * The content type.

package/src/api/track/TextTrack.ts

@@ -149,6 +149,18 @@ export interface TextTrack extends Track {
    * <br/> - For HLS: the corresponding #EXT-X-MEDIA tag contains the attributes TYPE=SUBTITLES and FORCED=YES (not supported yet)
    */
   readonly forced: boolean;
+
+  /**
+   * The closed caption service number of the text track.
+   *
+   * @platform web,android
+   *
+   * @remarks
+   * <br/> - For CEA-608 caption tracks, this holds the channel number.
+   * <br/> - For CEA-708 caption tracks, this holds the service number.
+   * <br/> - Otherwise, this is `undefined`.
+   */
+  readonly captionChannel?: number;
 }
 
 /**

package/src/internal/THEOplayerView.tsx

@@ -39,7 +39,6 @@ import {
   DefaultTextTrackListEvent,
   DefaultVolumeChangeEvent,
   DefaultTimeupdateEvent,
-  DefaultResizeEvent,
   DefaultSeekingEvent,
   DefaultSeekedEvent,
   DefaultVideoResizeEvent,
@@ -420,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));
   };
 

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.13.0","buildDate":"2026-03-27T13:55:41.539Z"}
+{"version":"11.0.0","buildDate":"2026-04-16T14:36:11.831Z"}