react-native-theoplayer 8.13.1 → 8.15.0

package/src/api/theolive/TheoLiveConfiguration.ts

@@ -0,0 +1,40 @@
+/**
+ * The configuration THEOlive playback.
+ *
+ * @public
+ */
+export interface TheoLiveConfiguration {
+  /**
+   * An id used to report usage analytics, if not explicitly given a random UUID is used.
+   *
+   * @remarks
+   * <br/> - Available on Web and Android only.
+   */
+  readonly externalSessionId?: string;
+
+  /**
+   * Whether this player should fallback or not when it has a fallback configured.
+   *
+   * @remarks
+   * <br/> - Available on Web only.
+   */
+  readonly fallbackEnabled?: boolean;
+
+  /**
+   * An optional header that can be passed during discovery.
+   *
+   * @remarks
+   * <br/> - Available on Web only.
+   */
+  readonly discoveryHeader?: string;
+
+  /**
+   * Whether THEOlive analytics should be disabled or not.
+   *
+   * @remarks
+   * <br/> - Available on Android only.
+   *
+   * @defaultValue `false`
+   */
+  readonly analyticsDisabled?: boolean;
+}

package/src/api/theolive/barrel.ts

@@ -1 +1,2 @@
 export * from './TheoLiveSource';
+export * from './TheoLiveConfiguration';

package/src/internal/THEOplayerView.web.tsx

@@ -66,14 +66,17 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
 
   const chromeless = config?.chromeless === undefined || config?.chromeless;
   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
         ref={container}
         style={styles.container}
         className={chromeless ? 'theoplayer-container' : 'theoplayer-container video-js theoplayer-skin'}
       />
       {children}
-    </>
+    </div>
   );
 }
 

package/src/internal/adapter/WebEventForwarder.ts

@@ -88,7 +88,6 @@ export class WebEventForwarder {
     this._player.addEventListener('segmentnotfound', this.onSegmentNotFound);
     this._player.addEventListener('volumechange', this.onVolumeChangeEvent);
     this._player.addEventListener('dimensionchange', this.onDimensionChange);
-    this._player.presentation.addEventListener('presentationmodechange', this.onPresentationModeChange);
 
     this._player.textTracks.addEventListener('addtrack', this.onAddTextTrack);
     this._player.textTracks.addEventListener('removetrack', this.onRemoveTextTrack);

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

@@ -9,13 +9,13 @@ import { noOp } from '../../utils/CommonUtils';
 export class WebPresentationModeManager {
   private readonly _player: ChromelessPlayer;
   private _presentationMode: PresentationMode = PresentationMode.inline;
-  private _element: HTMLVideoElement | undefined = undefined;
   private _eventForwarder: DefaultEventDispatcher<PlayerEventMap>;
 
   constructor(player: ChromelessPlayer, eventForwarder: DefaultEventDispatcher<PlayerEventMap>) {
     this._player = player;
     this._eventForwarder = eventForwarder;
     this._player.presentation.addEventListener('presentationmodechange', this.updatePresentationMode);
+    this.maybePrepareForPresentationModeChanges();
   }
 
   get presentationMode(): PresentationMode {
@@ -24,57 +24,40 @@ export class WebPresentationModeManager {
 
   set presentationMode(presentationMode: PresentationMode) {
     if (presentationMode === this._presentationMode) {
+      // Ignore if presentationMode did not change.
       return;
     }
 
-    this.prepareForPresentationModeChanges();
-
     if (fullscreenAPI !== undefined) {
-      // All other browsers
+      // If the browser supports the fullscreenAPI, put the element that encloses the player & UI in fullscreen.
       if (presentationMode === PresentationMode.fullscreen) {
-        const appElement = document.getElementById('app') ?? document.getElementById('root');
+        const appElement = document.getElementById('theoplayer-root-container');
         if (appElement !== null) {
-          const promise = appElement[fullscreenAPI.requestFullscreen_]();
-          if (promise && promise.then) {
-            promise.then(noOp, noOp);
-          }
+          appElement[fullscreenAPI.requestFullscreen_]()?.then?.(noOp, noOp);
         }
       } else if (presentationMode === PresentationMode.pip) {
         this._player.presentation.requestMode('native-picture-in-picture');
       } else {
         if (this._presentationMode === PresentationMode.fullscreen) {
-          const promise = document[fullscreenAPI.exitFullscreen_]();
-          if (promise && promise.then) {
-            promise.then(noOp, noOp);
-          }
+          document[fullscreenAPI.exitFullscreen_]()?.then?.(noOp, noOp);
         }
         if (this._presentationMode === PresentationMode.pip) {
-          void document.exitPictureInPicture();
+          this._player.presentation.requestMode(PresentationMode.inline);
         }
       }
     } else {
-      // iOS Safari doesn't properly support fullscreen, use native fullscreen instead
+      // Some browsers, like iOS Safari, can only put a videoElement in fullscreen; let the player decide which one.
       if (presentationMode === PresentationMode.fullscreen) {
-        this._element?.webkitEnterFullscreen?.();
+        this._player.presentation.requestMode(PresentationMode.fullscreen);
       } else if (presentationMode === PresentationMode.pip) {
         this._player.presentation.requestMode('native-picture-in-picture');
       } else {
-        this._element?.webkitSetPresentationMode?.(PresentationMode.inline);
+        this._player.presentation.requestMode(PresentationMode.inline);
       }
     }
   }
 
-  private prepareForPresentationModeChanges() {
-    const elements = this._player.element.children;
-    for (const element of Array.from(elements)) {
-      if (element.tagName === 'VIDEO') {
-        const videoElement = element as HTMLVideoElement;
-        if ((videoElement.src !== null && videoElement.src !== '') || videoElement.srcObject !== null) {
-          this._element = videoElement;
-          break;
-        }
-      }
-    }
+  private maybePrepareForPresentationModeChanges() {
     // listen for fullscreen updates on document
     if (fullscreenAPI !== undefined) {
       document.addEventListener(fullscreenAPI.fullscreenchange_, this.updatePresentationMode);

package/src/manifest.json

@@ -1 +1 @@
-{"version":"8.13.1","buildDate":"2025-01-27T12:46:49.795Z"}
+{"version":"8.15.0","buildDate":"2025-02-12T15:09:50.188Z"}