react-native-theoplayer 1.7.1 → 1.8.0

package/src/internal/THEOplayerView.tsx

@@ -15,11 +15,16 @@ import type {
   TextTrackEvent,
   AdEvent,
   AdsAPI,
+  MediaTrackEvent,
+  MediaTrackListEvent,
+  CastAPI,
+  CastEvent,
 } from 'react-native-theoplayer';
 
 import styles from './THEOplayerView.style';
 import type { SourceDescription } from 'react-native-theoplayer';
 import { THEOplayerNativeAdsAPI } from './ads/THEOplayerNativeAdsAPI';
+import { THEOplayerNativeCastAPI } from './cast/THEOplayerNativeCastApi';
 import { decodeNanInf } from './utils/TypeUtils';
 
 interface THEOplayerRCTViewProps extends THEOplayerViewProps {
@@ -45,7 +50,10 @@ interface THEOplayerRCTViewProps extends THEOplayerViewProps {
   onNativeSegmentNotFound: (event: NativeSyntheticEvent<SegmentNotFoundEvent>) => void;
   onNativeTextTrackListEvent: (event: NativeSyntheticEvent<TextTrackListEvent>) => void;
   onNativeTextTrackEvent: (event: NativeSyntheticEvent<TextTrackEvent>) => void;
+  onNativeMediaTrackListEvent: (event: NativeSyntheticEvent<MediaTrackListEvent>) => void;
+  onNativeMediaTrackEvent: (event: NativeSyntheticEvent<MediaTrackEvent>) => void;
   onNativeAdEvent: (event: NativeSyntheticEvent<AdEvent>) => void;
+  onNativeCastEvent: (event: NativeSyntheticEvent<CastEvent>) => void;
   onNativeFullscreenPlayerWillPresent?: () => void;
   onNativeFullscreenPlayerDidPresent?: () => void;
   onNativeFullscreenPlayerWillDismiss?: () => void;
@@ -64,6 +72,7 @@ interface THEOplayerViewNativeComponent extends THEOplayerViewComponent, HostCom
 export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> implements THEOplayerViewComponent {
   private readonly _root: React.RefObject<THEOplayerViewNativeComponent>;
   private readonly _adsApi: THEOplayerNativeAdsAPI;
+  private readonly _castApi: THEOplayerNativeCastAPI;
 
   private static initialState: THEOplayerRCTViewState = {
     isBuffering: false,
@@ -75,6 +84,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     this._root = React.createRef();
     this.state = THEOplayerView.initialState;
     this._adsApi = new THEOplayerNativeAdsAPI(this);
+    this._castApi = new THEOplayerNativeCastAPI(this);
   }
 
   componentWillUnmount() {
@@ -106,6 +116,10 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     return this._adsApi;
   }
 
+  public get cast(): CastAPI {
+    return this._castApi;
+  }
+
   private reset() {
     this.setState(THEOplayerView.initialState);
   }
@@ -260,12 +274,30 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     }
   };
 
+  private _onMediaTrackListEvent = (event: NativeSyntheticEvent<MediaTrackListEvent>) => {
+    if (this.props.onMediaTrackListEvent) {
+      this.props.onMediaTrackListEvent(event.nativeEvent);
+    }
+  };
+
+  private _onMediaTrackEvent = (event: NativeSyntheticEvent<MediaTrackEvent>) => {
+    if (this.props.onMediaTrackEvent) {
+      this.props.onMediaTrackEvent(event.nativeEvent);
+    }
+  };
+
   private _onAdEvent = (event: NativeSyntheticEvent<AdEvent>) => {
     if (this.props.onAdEvent) {
       this.props.onAdEvent(event.nativeEvent);
     }
   };
 
+  private _onCastEvent = (event: NativeSyntheticEvent<CastEvent>) => {
+    if (this.props.onCastEvent) {
+      this.props.onCastEvent(event.nativeEvent);
+    }
+  };
+
   private _onFullscreenPlayerWillPresent = () => {
     if (this.props.onFullscreenPlayerWillPresent) {
       this.props.onFullscreenPlayerWillPresent();
@@ -327,7 +359,10 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
           onNativeSegmentNotFound={this._onSegmentNotFound}
           onNativeTextTrackListEvent={this._onTextTrackListEvent}
           onNativeTextTrackEvent={this._onTextTrackEvent}
+          onNativeMediaTrackListEvent={this._onMediaTrackListEvent}
+          onNativeMediaTrackEvent={this._onMediaTrackEvent}
           onNativeAdEvent={this._onAdEvent}
+          onNativeCastEvent={this._onCastEvent}
           onNativeFullscreenPlayerWillPresent={this._onFullscreenPlayerWillPresent}
           onNativeFullscreenPlayerDidPresent={this._onFullscreenPlayerDidPresent}
           onNativeFullscreenPlayerWillDismiss={this._onFullscreenPlayerWillDismiss}

package/src/internal/THEOplayerView.web.tsx

@@ -1,8 +1,15 @@
 import React, { PureComponent } from 'react';
 
-import type { AdEvent, AdsAPI, PlayerError, TextTrack, THEOplayerViewProps, TimeRange } from 'react-native-theoplayer';
-import { AdEventNames, TextTrackEventType, THEOplayerViewComponent, TrackListEventType } from 'react-native-theoplayer';
-import type { Event, TextTrackCue as NativeTextTrackCue } from 'theoplayer';
+import type { AdEvent, AdsAPI, CastAPI, MediaTrack, PlayerError, TextTrack, THEOplayerViewProps, TimeRange } from 'react-native-theoplayer';
+import {
+  AdEventNames,
+  MediaTrackEventType,
+  MediaTrackType,
+  TextTrackEventType,
+  THEOplayerViewComponent,
+  TrackListEventType,
+} from 'react-native-theoplayer';
+import type { Event, TextTrackCue as NativeTextTrackCue, TrackChangeEvent } from 'theoplayer';
 
 import type {
   AddTrackEvent,
@@ -15,6 +22,7 @@ import type {
 import * as THEOplayer from 'theoplayer';
 import { findNativeQualitiesByUid, fromNativeCue, fromNativeMediaTrack, fromNativeTextTrack } from './web/TrackUtils';
 import { THEOplayerWebAdsAPI } from './ads/THEOplayerWebAdsAPI';
+import { THEOplayerWebCastAPI } from './cast/THEOplayerWebCastApi';
 
 interface THEOplayerRCTViewState {
   isBuffering: boolean;
@@ -23,7 +31,8 @@ interface THEOplayerRCTViewState {
 
 export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> implements THEOplayerViewComponent {
   private _player: THEOplayer.ChromelessPlayer | null = null;
-  private _adsApi: THEOplayerWebAdsAPI;
+  private readonly _adsApi: THEOplayerWebAdsAPI;
+  private readonly _castApi: THEOplayerWebCastAPI;
 
   private static initialState: THEOplayerRCTViewState = {
     isBuffering: false,
@@ -34,6 +43,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     super(props);
     this.state = THEOplayerView.initialState;
     this._adsApi = new THEOplayerWebAdsAPI(this);
+    this._castApi = new THEOplayerWebCastAPI(this);
   }
 
   componentDidMount() {
@@ -79,6 +89,10 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     return this._adsApi;
   }
 
+  public get cast(): CastAPI {
+    return this._castApi;
+  }
+
   public get nativePlayer(): THEOplayer.ChromelessPlayer | null {
     return this._player;
   }
@@ -206,6 +220,19 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     }
   };
 
+  private onActiveQualityChanged = (trackType: MediaTrackType, track: NativeMediaTrack) => () => {
+    const { onMediaTrackEvent } = this.props;
+    if (onMediaTrackEvent) {
+      const quality = track.activeQuality;
+      onMediaTrackEvent({
+        type: MediaTrackEventType.ActiveQualityChanged,
+        trackType,
+        trackUid: track.uid,
+        qualities: quality ? [quality] : undefined,
+      });
+    }
+  };
+
   private addEventListeners() {
     const player = this._player;
     if (!player) {
@@ -369,6 +396,7 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
         });
       }
     });
+
     player.presentation.addEventListener('presentationmodechange', (event: PresentationModeChangeEvent) => {
       const { presentationMode } = event;
       const { onFullscreenPlayerDidPresent, onFullscreenPlayerDidDismiss } = this.props;
@@ -382,32 +410,51 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
         }
       }
     });
+
     player.textTracks.addEventListener('addtrack', (event: AddTrackEvent) => {
-      const { onTextTrackListEvent } = this.props;
       const track = event.track as NativeTextTrack;
       track.addEventListener('addcue', this.onAddTextTrackCue(track));
       track.addEventListener('removecue', this.onRemoveTextTrackCue(track));
-
-      if (onTextTrackListEvent) {
-        onTextTrackListEvent({
-          type: TrackListEventType.AddTrack,
-          track: track as TextTrack,
-        });
-      }
+      this.dispatchTextTrackListEvent(TrackListEventType.AddTrack, track as TextTrack);
     });
+
     player.textTracks.addEventListener('removetrack', (event: RemoveTrackEvent) => {
-      const { onTextTrackListEvent } = this.props;
       const track = event.track as NativeTextTrack;
       track.removeEventListener('addcue', this.onAddTextTrackCue(track));
       track.removeEventListener('removecue', this.onRemoveTextTrackCue(track));
+      this.dispatchTextTrackListEvent(TrackListEventType.RemoveTrack, track as NativeTextTrack as TextTrack);
+    });
 
-      if (onTextTrackListEvent) {
-        onTextTrackListEvent({
-          type: TrackListEventType.RemoveTrack,
-          track: event.track as unknown as TextTrack,
-        });
-      }
+    player.textTracks.addEventListener('change', (event: TrackChangeEvent) => {
+      this.dispatchTextTrackListEvent(TrackListEventType.ChangeTrack, event.track as NativeTextTrack as TextTrack);
     });
+
+    [MediaTrackType.Audio, MediaTrackType.Video].forEach((trackType) => {
+      const mediaTracks = trackType === MediaTrackType.Audio ? player.audioTracks : player.videoTracks;
+      mediaTracks.addEventListener('addtrack', (event: AddTrackEvent) => {
+        const track = event.track as NativeMediaTrack;
+        track.addEventListener('activequalitychanged', this.onActiveQualityChanged(trackType, track));
+        this.dispatchMediaTrackListEvent(TrackListEventType.AddTrack, trackType, track as MediaTrack);
+      });
+    });
+
+    [MediaTrackType.Audio, MediaTrackType.Video].forEach((trackType) => {
+      const mediaTracks = trackType === MediaTrackType.Audio ? player.audioTracks : player.videoTracks;
+      mediaTracks.addEventListener('removetrack', (event: RemoveTrackEvent) => {
+        const track = event.track as NativeMediaTrack;
+        track.removeEventListener('activequalitychanged', this.onActiveQualityChanged(trackType, track));
+        this.dispatchMediaTrackListEvent(TrackListEventType.RemoveTrack, trackType, track as MediaTrack);
+      });
+    });
+
+    [MediaTrackType.Audio, MediaTrackType.Video].forEach((trackType) => {
+      const mediaTracks = trackType === MediaTrackType.Audio ? player.audioTracks : player.videoTracks;
+      mediaTracks.addEventListener('change', (event: TrackChangeEvent) => {
+        const track = event.track as NativeMediaTrack;
+        this.dispatchMediaTrackListEvent(TrackListEventType.ChangeTrack, trackType, track as MediaTrack);
+      });
+    });
+
     player.ads?.addEventListener(AdEventNames, (event) => {
       const { onAdEvent } = this.props;
       if (onAdEvent) {
@@ -416,6 +463,27 @@ export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplaye
     });
   }
 
+  private dispatchTextTrackListEvent = (type: TrackListEventType, track: TextTrack) => {
+    const { onTextTrackListEvent } = this.props;
+    if (onTextTrackListEvent) {
+      onTextTrackListEvent({
+        type,
+        track,
+      });
+    }
+  };
+
+  private dispatchMediaTrackListEvent = (type: TrackListEventType, trackType: MediaTrackType, track: MediaTrack) => {
+    const { onMediaTrackListEvent } = this.props;
+    if (onMediaTrackListEvent) {
+      onMediaTrackListEvent({
+        type,
+        trackType,
+        track: track as MediaTrack,
+      });
+    }
+  };
+
   public render(): JSX.Element {
     const { config } = this.props;
     const chromeless = config?.chromeless === undefined || config?.chromeless === true;

package/src/internal/cast/THEOplayerNativeAirplay.ts

@@ -0,0 +1,22 @@
+import type { Airplay, CastState, THEOplayerView } from 'react-native-theoplayer';
+import { NativeModules } from 'react-native';
+
+export class THEOplayerNativeAirplay implements Airplay {
+  public constructor(private readonly _player: THEOplayerView) {}
+
+  casting(): Promise<boolean> {
+    return NativeModules.CastModule.airplayCasting(this._player.nativeHandle);
+  }
+
+  state(): Promise<CastState> {
+    return NativeModules.CastModule.airplayState(this._player.nativeHandle);
+  }
+
+  start(): void {
+    NativeModules.CastModule.airplayStart(this._player.nativeHandle);
+  }
+
+  stop(): void {
+    NativeModules.CastModule.airplayStop(this._player.nativeHandle);
+  }
+}

package/src/internal/cast/THEOplayerNativeCastApi.ts

@@ -0,0 +1,28 @@
+import { NativeModules, Platform } from 'react-native';
+import { THEOplayerNativeChromecast } from './THEOplayerNativeChromecast';
+import { THEOplayerNativeAirplay } from './THEOplayerNativeAirplay';
+import type { Airplay, CastAPI, Chromecast, THEOplayerView } from 'react-native-theoplayer';
+
+export class THEOplayerNativeCastAPI implements CastAPI {
+  private readonly _chromecast: Chromecast;
+  private readonly _airplay: Airplay | undefined;
+
+  constructor(private readonly _player: THEOplayerView) {
+    this._chromecast = new THEOplayerNativeChromecast(this._player);
+    if (Platform.OS !== 'android') {
+      this._airplay = new THEOplayerNativeAirplay(this._player);
+    }
+  }
+
+  casting(): Promise<boolean> {
+    return NativeModules.CastModule.casting(this._player.nativeHandle);
+  }
+
+  get chromecast(): Chromecast | undefined {
+    return this._chromecast;
+  }
+
+  get airplay(): Airplay | undefined {
+    return this._airplay;
+  }
+}

package/src/internal/cast/THEOplayerNativeChromecast.ts

@@ -0,0 +1,30 @@
+import type { CastState, Chromecast, THEOplayerView } from 'react-native-theoplayer';
+import { NativeModules } from 'react-native';
+
+export class THEOplayerNativeChromecast implements Chromecast {
+  public constructor(private readonly _player: THEOplayerView) {}
+
+  casting(): Promise<boolean> {
+    return NativeModules.CastModule.chromecastCasting(this._player.nativeHandle);
+  }
+
+  state(): Promise<CastState> {
+    return NativeModules.CastModule.chromecastState(this._player.nativeHandle);
+  }
+
+  start(): void {
+    NativeModules.CastModule.chromecastStart(this._player.nativeHandle);
+  }
+
+  stop(): void {
+    NativeModules.CastModule.chromecastStop(this._player.nativeHandle);
+  }
+
+  join(): void {
+    NativeModules.CastModule.chromecastJoin(this._player.nativeHandle);
+  }
+
+  leave(): void {
+    NativeModules.CastModule.chromecastLeave(this._player.nativeHandle);
+  }
+}

package/src/internal/cast/THEOplayerWebCastApi.ts

@@ -0,0 +1,21 @@
+import type { Airplay, CastAPI, Chromecast } from 'react-native-theoplayer';
+import type { THEOplayerView } from '../THEOplayerView.web';
+
+export class THEOplayerWebCastAPI implements CastAPI {
+  // @ts-ignore
+  constructor(private readonly _player: THEOplayerView) {}
+
+  casting(): Promise<boolean> {
+    return Promise.resolve(false);
+  }
+
+  get chromecast(): Chromecast | undefined {
+    // TODO
+    return undefined;
+  }
+
+  get airplay(): Airplay | undefined {
+    // TODO
+    return undefined;
+  }
+}

package/src/internal/web/stub/CastButtonStub.tsx

@@ -0,0 +1,7 @@
+import type { ViewProps } from 'react-native';
+import React from 'react';
+
+// Provides a stub for react-native-google-cast on web.
+export function CastButton(_props: ViewProps): JSX.Element {
+  return <></>;
+}

package/android/src/main/java/com/theoplayer/PlayerConfigHelper.java

@@ -1,70 +0,0 @@
-package com.theoplayer;
-
-import android.text.TextUtils;
-
-import androidx.annotation.Nullable;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.theoplayer.android.api.THEOplayerConfig;
-import com.theoplayer.android.api.ads.AdPreloadType;
-import com.theoplayer.android.api.ads.AdsConfiguration;
-import com.theoplayer.android.api.ads.GoogleImaConfiguration;
-
-public class PlayerConfigHelper {
-  static final private String PROP_ADS_CONFIGURATION = "ads";
-  static final private String PROP_LICENSE = "license";
-  static final private String PROP_LICENSE_URL = "licenseUrl";
-  static final private String PROP_CHROMELESS = "chromeless";
-  static final private String PROP_PRELOAD = "preload";
-  static final private String PROP_UI_ENABLED = "uiEnabled";
-  static final private String PROP_GOOGLE_IMA_CONFIGURATION = "googleImaConfiguration";
-  static final private String PROP_USE_NATIVE_IMA = "useNativeIma";
-
-  static public THEOplayerConfig fromProps(@Nullable ReadableMap configProps) {
-    THEOplayerConfig.Builder configBuilder = new THEOplayerConfig.Builder();
-    if (configProps != null) {
-      AdsConfiguration adsConfig = adsConfigurationFromProps(configProps.getMap(PROP_ADS_CONFIGURATION));
-      if (adsConfig != null) {
-        configBuilder.ads(adsConfig);
-      }
-      String license = configProps.getString(PROP_LICENSE);
-      if (license != null) {
-        configBuilder.license(license);
-      }
-      String licenseUrl = configProps.getString(PROP_LICENSE_URL);
-      if (licenseUrl != null) {
-        configBuilder.licenseUrl(licenseUrl);
-      }
-      if (configProps.hasKey(PROP_CHROMELESS)) {
-        configBuilder.chromeless(configProps.getBoolean(PROP_CHROMELESS));
-      }
-    }
-    return configBuilder.build();
-  }
-
-  static private AdsConfiguration adsConfigurationFromProps(@Nullable ReadableMap configProps) {
-    if (configProps == null) {
-      return null;
-    }
-    AdsConfiguration.Builder builder = new AdsConfiguration.Builder();
-    String preloadTypeString = configProps.getString(PROP_PRELOAD);
-    if (!TextUtils.isEmpty(preloadTypeString)) {
-      builder.preload(AdPreloadType.from(preloadTypeString));
-    }
-    builder.showCountdown(!configProps.hasKey(PROP_UI_ENABLED) || configProps.getBoolean(PROP_UI_ENABLED));
-    GoogleImaConfiguration googleImaConfiguration = googleImaConfigurationFromProps(configProps.getMap(PROP_GOOGLE_IMA_CONFIGURATION));
-    if (googleImaConfiguration != null) {
-      builder.googleImaConfiguration(googleImaConfiguration);
-    }
-    return builder.build();
-  }
-
-  static private GoogleImaConfiguration googleImaConfigurationFromProps(@Nullable ReadableMap configProps) {
-    if (configProps == null) {
-      return null;
-    }
-    return new GoogleImaConfiguration.Builder()
-      .useNativeIma(configProps.hasKey(PROP_USE_NATIVE_IMA) && configProps.getBoolean(PROP_USE_NATIVE_IMA))
-      .build();
-  }
-}

package/android/src/main/java/com/theoplayer/ReactTHEOplayerPackage.java

@@ -1,32 +0,0 @@
-package com.theoplayer;
-
-import androidx.annotation.NonNull;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-import com.theoplayer.ads.AdsModule;
-import com.theoplayer.drm.ContentProtectionModule;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.List;
-
-public class ReactTHEOplayerPackage implements ReactPackage {
-
-    @NonNull
-    @Override
-    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
-      List<NativeModule> modules = new ArrayList<>();
-      modules.add(new AdsModule(reactContext));
-      modules.add(new ContentProtectionModule(reactContext));
-      return modules;
-    }
-
-    @NonNull
-    @Override
-    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return Arrays.<ViewManager>asList(new ReactTHEOplayerViewManager());
-    }
-}