react-native-theoplayer 2.3.0 → 2.5.0

package/lib/typescript/internal/adapter/THEOplayerWebAdapter.d.ts

@@ -1,10 +1,10 @@
 import { DefaultEventDispatcher } from './event/DefaultEventDispatcher';
-import type { AdsAPI, CastAPI, MediaTrack, NativeHandleType, PlayerEventMap, PreloadType, TextTrack, TextTrackStyle, THEOplayer, PlayerConfiguration } from 'react-native-theoplayer';
+import type { AdsAPI, CastAPI, MediaTrack, NativeHandleType, PlayerConfiguration, PlayerEventMap, PreloadType, TextTrack, TextTrackStyle, THEOplayer } from 'react-native-theoplayer';
+import { AspectRatio, PresentationMode } from 'react-native-theoplayer';
 import type * as THEOplayerWeb from 'theoplayer';
 import type { ABRConfiguration, SourceDescription } from 'src/api/barrel';
 import type { PiPConfiguration } from 'src/api/pip/PiPConfiguration';
 import type { BackgroundAudioConfiguration } from 'src/api/backgroundAudio/BackgroundAudioConfiguration';
-import { PresentationMode } from 'react-native-theoplayer';
 export declare class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap> implements THEOplayer {
     private readonly _player;
     private readonly _adsAdapter;
@@ -61,6 +61,8 @@ export declare class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerE
     set targetVideoQuality(targetVideoQuality: number | number[] | undefined);
     get currentTime(): number;
     set currentTime(currentTime: number);
+    get aspectRatio(): AspectRatio;
+    set aspectRatio(_ratio: AspectRatio);
     get duration(): number;
     get ads(): AdsAPI;
     get cast(): CastAPI;

package/lib/typescript/internal/adapter/web/WebMediaSession.d.ts

@@ -25,9 +25,10 @@ export declare class WebMediaSession {
     private onAdbreakBegin;
     private onAdbreakEnd;
     private isLive;
-    private isAd;
+    private isInAd;
     private isInBackground;
     private isTrickplayEnabled;
     private isPlayPauseEnabled;
+    private isBackgroundAudioEnabled;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-theoplayer",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "A THEOplayer video component for react-native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -25,7 +25,7 @@
   "scripts": {
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{ts,tsx}\"",
-    "prepare": "bob build",
+    "prepare": "bob build && husky install",
     "release": "release-it",
     "pods": "cd example && pod-install --quiet"
   },
@@ -67,7 +67,13 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "theoplayer": ">=5.0.1"
+  },
+  "peerDependenciesMeta": {
+    "theoplayer": {
+      "optional": true
+    }
   },
   "commitlint": {
     "extends": [
@@ -116,7 +122,6 @@
     "react-native-svg": "^13.8.0",
     "react-native-svg-web": "^1.0.0",
     "react-native-url-polyfill": "^1.3.0",
-    "theoplayer": ">=5.0.1",
     "url-polyfill": "^1.1.12"
   }
 }

package/src/api/player/THEOplayer.ts

@@ -14,6 +14,22 @@ import type { BackgroundAudioConfiguration } from '../backgroundAudio/Background
 
 export type PreloadType = 'none' | 'metadata' | 'auto' | '';
 
+/**
+ * Specifies an aspect ratio for the player.
+ *
+ * <br/> - `FIT` (default): Scales the player so that all content fits inside its bounding box, keeping the original aspect ratio of the content..
+ * <br/> - `FILL`: Scales the player so that all content fits inside the bounding box, which will be stretched to fill it entirely.
+ * <br/> - `ASPECT_FILL`: Scales the player so that the content fills up the entire bounding box, keeping the original aspect ratio of the content.
+ *
+ * @public
+ * @defaultValue `'FIT'`
+ */
+export enum AspectRatio {
+  FIT = 'fit',
+  FILL = 'fill',
+  ASPECT_FILL = 'aspectFill',
+}
+
 export type NativeHandleType = unknown;
 
 /**
@@ -153,6 +169,14 @@ export interface THEOplayer extends EventDispatcher<PlayerEventMap> {
    */
   currentTime: number;
 
+  /**
+   * Used to set the aspect ratio of the player.
+   *
+   * @remarks
+   * Only available for iOS and Android.
+   */
+  aspectRatio: AspectRatio;
+
   /**
    * The active configuration for PiP.
    */

package/src/api/source/SourceDescription.ts

@@ -223,6 +223,14 @@ export interface TextTrackDescription {
  * @public
  */
 export interface BaseSource {
+
+  /**
+   * The cross-origin setting of the source.
+   *
+   * @defaultValue `''`
+   */
+  crossOrigin?: CrossOriginSetting;
+
   /**
    * The URL of a time server used by the player to synchronise the time in DASH sources.
    *

package/src/internal/THEOplayerView.tsx

@@ -254,7 +254,12 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
 
   private _onTextTrackEvent = (event: NativeSyntheticEvent<NativeTextTrackEvent>) => {
     const nativeEvent = event.nativeEvent;
-    this._facade.dispatchEvent(new DefaultTextTrackEvent(toTextTrackEventType(nativeEvent.type), nativeEvent.trackUid, nativeEvent.cue));
+    const cue = nativeEvent.cue;
+    if (cue) {
+      cue.startTime = decodeNanInf(cue.startTime);
+      cue.endTime = decodeNanInf(cue.endTime);
+    }
+    this._facade.dispatchEvent(new DefaultTextTrackEvent(toTextTrackEventType(nativeEvent.type), nativeEvent.trackUid, cue));
   };
 
   private _onMediaTrackListEvent = (event: NativeSyntheticEvent<NativeMediaTrackListEvent>) => {

package/src/internal/THEOplayerView.web.tsx

@@ -15,21 +15,18 @@ export function THEOplayerView(props: React.PropsWithChildren<THEOplayerViewProp
     // Create player inside container.
     if (container.current) {
       const chromeless = config?.chromeless === true || config?.chromeless === undefined;
+      const updatedConfig = {...config, allowNativeFullscreen: true};
       if (chromeless) {
-        player.current = new THEOplayer.ChromelessPlayer(container.current, config);
+        player.current = new THEOplayer.ChromelessPlayer(container.current, updatedConfig);
       } else {
         player.current = new THEOplayer.Player(container.current, {
-          ...config,
+          ...updatedConfig,
           ui: {
             fluid: true,
-          },
-          allowNativeFullscreen: true,
+          }
         } as THEOplayer.PlayerConfiguration);
       }
 
-      // Prepare the player to ChromelessPlayer.autoplay on platforms where autoplay is restricted without user action.
-      player.current.prepareWithUserAction();
-
       // Adapt native player to react-native player.
       adapter.current = new THEOplayerWebAdapter(player.current, config);
 

package/src/internal/adapter/NativePlayerState.ts

@@ -1,6 +1,7 @@
 import type { MediaTrack, PreloadType, PresentationMode, SourceDescription, TextTrack, TimeRange } from 'react-native-theoplayer';
 import type { BackgroundAudioConfiguration } from '../../api/backgroundAudio/BackgroundAudioConfiguration';
 import type { PiPConfiguration } from 'react-native-theoplayer';
+import type { AspectRatio } from 'react-native-theoplayer';
 
 export interface NativePlayerState {
   source: SourceDescription | undefined;
@@ -18,6 +19,7 @@ export interface NativePlayerState {
   duration: number;
   playbackRate: number;
   preload: PreloadType;
+  aspectRatio: AspectRatio;
   audioTracks: MediaTrack[];
   videoTracks: MediaTrack[];
   textTracks: TextTrack[];

package/src/internal/adapter/THEOplayerAdapter.ts

@@ -23,6 +23,7 @@ import type {
 } from 'react-native-theoplayer';
 import {
   addTrack,
+  AspectRatio,
   findMediaTrackByUid,
   MediaTrackEventType,
   MediaTrackType,
@@ -58,6 +59,7 @@ const defaultPlayerState: NativePlayerState = {
   duration: NaN,
   playbackRate: 1,
   preload: 'none',
+  aspectRatio: AspectRatio.FIT,
   audioTracks: [],
   videoTracks: [],
   textTracks: [],
@@ -372,7 +374,7 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
   set selectedTextTrack(trackUid: number | undefined) {
     this._state.selectedTextTrack = trackUid;
     this.textTracks.forEach((track) => {
-      if (track.uid == trackUid) {
+      if (track.uid === trackUid) {
         track.mode = TextTrackMode.showing;
       } else if (track.mode === TextTrackMode.showing) {
         track.mode = TextTrackMode.disabled;
@@ -435,6 +437,15 @@ export class THEOplayerAdapter extends DefaultEventDispatcher<PlayerEventMap> im
     NativeModules.PlayerModule.setVolume(this._view.nativeHandle, volume);
   }
 
+  get aspectRatio(): AspectRatio {
+    return this._state.aspectRatio;
+  }
+
+  set aspectRatio(ratio: AspectRatio) {
+    this._state.aspectRatio = ratio;
+    NativeModules.PlayerModule.setAspectRatio(this._view.nativeHandle, ratio);
+  }
+
   pause(): void {
     this._state.paused = true;
     NativeModules.PlayerModule.setPaused(this._view.nativeHandle, true);

package/src/internal/adapter/THEOplayerWebAdapter.ts

@@ -4,13 +4,14 @@ import type {
   CastAPI,
   MediaTrack,
   NativeHandleType,
+  PlayerConfiguration,
   PlayerEventMap,
   PreloadType,
   TextTrack,
   TextTrackStyle,
   THEOplayer,
-  PlayerConfiguration,
 } from 'react-native-theoplayer';
+import { AspectRatio, PresentationMode } from 'react-native-theoplayer';
 import { THEOplayerWebAdsAdapter } from './ads/THEOplayerWebAdsAdapter';
 import { THEOplayerWebCastAdapter } from './cast/THEOplayerWebCastAdapter';
 import type * as THEOplayerWeb from 'theoplayer';
@@ -22,7 +23,6 @@ import type { PiPConfiguration } from 'src/api/pip/PiPConfiguration';
 import type { BackgroundAudioConfiguration } from 'src/api/backgroundAudio/BackgroundAudioConfiguration';
 import { WebPresentationModeManager } from './web/WebPresentationModeManager';
 import { WebMediaSession } from './web/WebMediaSession';
-import { PresentationMode } from 'react-native-theoplayer';
 
 const defaultBackgroundAudioConfiguration: BackgroundAudioConfiguration = {
   enabled: false,
@@ -240,6 +240,14 @@ export class THEOplayerWebAdapter extends DefaultEventDispatcher<PlayerEventMap>
     }
   }
 
+  get aspectRatio(): AspectRatio {
+    return AspectRatio.FIT;
+  }
+
+  set aspectRatio(_ratio: AspectRatio) {
+    // unused
+  }
+
   get duration(): number {
     return this._player.duration * 1e3;
   }

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

@@ -7,13 +7,14 @@ import type {
   TextTracksList as NativeTextTrackList,
 } from 'theoplayer';
 import type { MediaTrack, TextTrack, TextTrackCue } from 'react-native-theoplayer';
+import { decodeNanInf } from '../../utils/TypeUtils';
 
 export function fromNativeCue(cue: NativeTextTrackCue): TextTrackCue {
   return {
     id: cue.id,
     uid: cue.uid,
-    startTime: 1e3 * cue.startTime,
-    endTime: 1e3 * cue.endTime,
+    startTime: decodeNanInf(1e3 * cue.startTime),
+    endTime: decodeNanInf(1e3 * cue.endTime),
     content: cue.content,
   } as TextTrackCue;
 }

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

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import type { ChromelessPlayer } from 'theoplayer';
 import type { THEOplayerWebAdapter } from '../THEOplayerWebAdapter';
-import { PresentationMode } from 'react-native-theoplayer';
 
 interface WebMediaSessionConfig {
   skipTime: number;
@@ -151,43 +150,29 @@ export class WebMediaSession {
     return !isFinite(this._player.duration);
   }
 
-  private isAd(): boolean {
-    return this._player.ads?.playing == true;
+  private isInAd(): boolean {
+    return this._player.ads?.playing === true;
   }
 
   private isInBackground(): boolean {
     return document.visibilityState !== 'visible';
   }
 
+  // By default, only show trick-play buttons if:
+  // - backgroundAudio is enabled, or the player is in foreground;
+  // - and, the current asset is neither a live stream, nor an ad.
   private isTrickplayEnabled(): boolean {
-    // By default, no trickplay for live
-    if (this.isLive()) {
-      return false;
-    }
-
-    // In PiP mode, disable trick-play for ads.
-    if (this._webAdapter.presentationMode === PresentationMode.pip) {
-      return !this.isAd();
-    }
-    // During background playback
-    if (this.isInBackground()) {
-      // Disable trick-play for ads.
-      return !(this.isAd() || this.isLive());
-    }
-    return true;
+    return (this.isBackgroundAudioEnabled() || !this.isInBackground()) && !this.isLive() && !this.isInAd();
   }
 
+  // By default, only show a play/pause button if:
+  // - backgroundAudio is enabled, or the player is in foreground;
+  // - and, the current asset is not an ad.
   private isPlayPauseEnabled(): boolean {
-    // In PiP mode
-    if (this._webAdapter.presentationMode === PresentationMode.pip) {
-      // Disable play/pause for ads
-      return !this.isAd();
-    }
-    // During background playback
-    if (this.isInBackground()) {
-      // Disable play/pause for ads & live content.
-      return !(this.isAd() || this.isLive());
-    }
-    return true;
+    return (this.isBackgroundAudioEnabled() || !this.isInBackground()) && !this.isInAd();
+  }
+
+  private isBackgroundAudioEnabled(): boolean {
+    return this._webAdapter.backgroundAudioConfiguration.enabled === true;
   }
 }

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

@@ -63,7 +63,7 @@ export class WebPresentationModeManager {
       }
     }
     // listen for pip updates on element
-    if (this._element != null) {
+    if (this._element !== undefined) {
       this._element.onenterpictureinpicture = () => {
         this.updatePresentationMode();
       };