react-native-theoplayer 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -2,9 +2,41 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.1.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [2.12.0] - 23-09-04
+
+### Added
+
+- Added an `AnalyticsDescription` property to `SourceDescription` to configure additional source-specific properties for analytics connectors.
+- Added support for sideloaded webVTT and SRT texttracks on iOS.
+- Added Audio Focus for Android, pausing play-out on audio focus loss and resuming play-out once focus has been regained.
+- Added Audio Focus and Audio Becoming Noisy manager for Android.
+
+### Fixed
+
+- Fixed an issue on Android that would cause the player not to reset when setting an empty source.
+- Fixed an issue where a text track cue was not properly removed from the cue list on a TextTrackEventType.REMOVE_CUE event.
+- Fixed an issue on tvOS that allowed the user to pause a CSAI ad using the apple remote control.
+- Fixed an issue on iOS where the cue event listeners were not cleanup up when destroying the player instance, resulting in memory build-up.
+
+## [2.11.0] - 23-08-10
+
+### Added
+
+- Added DAI support through iOS Native pipeline, using new THEOplayerGoogleIMAIntegration functionality
+- Added `TextTrackStyle` API for iOS and Android.
+
+### Fixed
+
+- Fixed an issue on Android where the player would sometimes crash when requesting the current active video track.
+
+### Changed
+
+- Switched to 'displayIconUri' in sourceDescription.metadata as primary field for artwork selection in NowplayingInfo/MediaSession, 'poster' in sourceDescription is now the fallback.
+- Removed the play/pause icon in the PiP window on Android while playing an ad.
+
 ## [2.10.0] - 23-07-25
 
 ### Fixed

package/README.md

@@ -55,14 +55,15 @@ React Native works to speed up the way of working with THEOplayer React Native S
 The `react-native-theoplayer` package can be combined with any number of connectors to provide extra
 functionality. Currently, the following connectors are available:
 
-| Package name                                                                                                     | Purpose                             | Registry                                                                                                                                                      |
-|------------------------------------------------------------------------------------------------------------------|-------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| [`@theoplayer/react-native-analytics-adobe`](https://github.com/THEOplayer/react-native-theoplayer-analytics)    | Adobe analytics connector           | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-adobe)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-adobe)       |
-| [`@theoplayer/react-native-analytics-comscore`](https://github.com/THEOplayer/react-native-theoplayer-analytics) | Comscore analytics connector        | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-comscore)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-comscore) |
-| [`@theoplayer/react-native-analytics-conviva`](https://github.com/THEOplayer/react-native-theoplayer-analytics)  | Conviva analytics connector         | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-conviva)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-conviva)   |
-| [`@theoplayer/react-native-analytics-nielsen`](https://github.com/THEOplayer/react-native-theoplayer-analytics)  | Nielsen analytics connector         | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-nielsen)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-nielsen)   |
-| [`@theoplayer/react-native-drm`](https://github.com/THEOplayer/react-native-theoplayer-drm)                      | Content protection (DRM) connectors | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-drm)](https://www.npmjs.com/package/@theoplayer/react-native-drm)                               |
-| [`@theoplayer/react-native-ui`](https://github.com/THEOplayer/react-native-theoplayer-ui)                        | React Native user interface         | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-ui)](https://www.npmjs.com/package/@theoplayer/react-native-ui)                                 |
+| Package name                                                                                                              | Purpose                                              | Registry                                                                                                                                                      |
+|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [`@theoplayer/react-native-analytics-adobe`](https://github.com/THEOplayer/react-native-theoplayer-analytics)             | Adobe analytics connector                            | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-adobe)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-adobe)       |
+| [`@theoplayer/react-native-analytics-comscore`](https://github.com/THEOplayer/react-native-theoplayer-analytics)          | Comscore analytics connector                         | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-comscore)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-comscore) |
+| [`@theoplayer/react-native-analytics-conviva`](https://github.com/THEOplayer/react-native-theoplayer-analytics)           | Conviva analytics connector                          | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-conviva)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-conviva)   |
+| [`@theoplayer/react-native-analytics-nielsen`](https://github.com/THEOplayer/react-native-theoplayer-analytics)           | Nielsen analytics connector                          | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-nielsen)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-nielsen)   |
+| [`@theoplayer/react-native-drm`](https://github.com/THEOplayer/react-native-theoplayer-drm)                               | Content protection (DRM) connectors                  | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-drm)](https://www.npmjs.com/package/@theoplayer/react-native-drm)                               |
+| [`@theoplayer/react-native-ui`](https://github.com/THEOplayer/react-native-theoplayer-ui)                                 | React Native user interface                          | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-ui)](https://www.npmjs.com/package/@theoplayer/react-native-ui)                                 |
+| [`@theoplayer/react-native-connector-template`](https://github.com/THEOplayer/react-native-theoplayer-connector-template) | A template for `react-native-theoplayer` connectors. | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-connector-template)](https://www.npmjs.com/package/@theoplayer/react-native-connector-template) |
 
 ## Getting Started
 
@@ -82,10 +83,12 @@ and discussed in the next section. Finally, an overview of features, limitations
 - Knowledge Base
   - [Adaptive Bitrate (ABR)](./doc/abr.md)
   - [Advertisements](./doc/ads.md)
+  - [Audio Control Management](./doc/audio-control.md)
   - [Background playback and notifications](./doc/background.md)
   - [Casting with Chromecast and Airplay](./doc/cast.md)
   - [Custom iOS framework](./doc/custom-ios-framework.md)
   - [Digital Rights Management (DRM)](./doc/drm.md)
-  - [Picture-in-Picture (PiP)](./doc/pip.md)
   - [Migrating to `react-native-theoplayer` v2.x](./doc/migrating_v2.md)
+  - [Picture-in-Picture (PiP)](./doc/pip.md)
+  - [Styling subtitles and closed captions](./doc/texttrackstyles.md)
 - [Limitations and known issues](./doc/limitations.md)

package/android/src/main/java/com/theoplayer/PlayerEventEmitter.kt

@@ -494,7 +494,7 @@ class PlayerEventEmitter internal constructor(
   }
 
   private fun <T : Quality?> activeTrack(tracks: MediaTrackList<T>?): MediaTrack<T>? {
-    return tracks?.first { track ->
+    return tracks?.firstOrNull { track ->
       track.isEnabled
     }
   }

package/android/src/main/java/com/theoplayer/ReactTHEOplayerContext.kt

@@ -27,6 +27,8 @@ import com.theoplayer.android.api.event.EventListener
 import com.theoplayer.android.api.event.player.*
 import com.theoplayer.android.api.player.Player
 import com.theoplayer.android.connector.mediasession.MediaSessionConnector
+import com.theoplayer.audio.AudioBecomingNoisyManager
+import com.theoplayer.audio.AudioFocusManager
 import com.theoplayer.audio.BackgroundAudioConfig
 import com.theoplayer.media.MediaPlaybackService
 import java.util.concurrent.atomic.AtomicBoolean
@@ -49,6 +51,11 @@ class ReactTHEOplayerContext private constructor(
   private var isBound = AtomicBoolean()
   private var binder: MediaPlaybackService.MediaPlaybackBinder? = null
   private var mediaSessionConnector: MediaSessionConnector? = null
+  private var audioBecomingNoisyManager = AudioBecomingNoisyManager(reactContext) {
+    // Audio is about to become 'noisy' due to a change in audio outputs: pause the player
+    player.pause()
+  }
+  private var audioFocusManager: AudioFocusManager? = null
 
   var backgroundAudioConfig: BackgroundAudioConfig = BackgroundAudioConfig(enabled = false)
     set(value) {
@@ -207,6 +214,8 @@ class ReactTHEOplayerContext private constructor(
     addIntegrations(playerConfig)
     addListeners()
 
+    audioFocusManager = AudioFocusManager(reactContext, player)
+
     if (!BuildConfig.USE_PLAYBACK_SERVICE || !isBackgroundAudioEnabled) {
       initDefaultMediaSession()
     }
@@ -282,11 +291,14 @@ class ReactTHEOplayerContext private constructor(
     }
     binder?.updateNotification(PlaybackStateCompat.STATE_PLAYING)
     applyAllowedMediaControls()
+    audioBecomingNoisyManager.setEnabled(true)
+    audioFocusManager?.retrieveAudioFocus()
   }
 
   private val onPause = EventListener<PauseEvent> {
     binder?.updateNotification(PlaybackStateCompat.STATE_PAUSED)
     applyAllowedMediaControls()
+    audioBecomingNoisyManager.setEnabled(false)
   }
 
   private fun addListeners() {
@@ -334,6 +346,7 @@ class ReactTHEOplayerContext private constructor(
   fun onHostResume() {
     mediaSessionConnector?.setActive(true)
     playerView.onResume()
+    audioFocusManager?.retrieveAudioFocus()
   }
 
   fun destroy() {
@@ -346,6 +359,7 @@ class ReactTHEOplayerContext private constructor(
       // Unbind client from background service so it can stop
       unbindMediaPlaybackService()
     }
+    audioFocusManager?.abandonAudioFocus()
     mediaSessionConnector?.destroy()
     playerView.onDestroy()
   }

package/android/src/main/java/com/theoplayer/ReactTHEOplayerView.kt

@@ -130,9 +130,7 @@ class ReactTHEOplayerView(private val reactContext: ThemedReactContext) :
     try {
       val sourceDescription = SourceAdapter().parseSourceFromJS(source)
       adsApi.setSource(sourceDescription)
-      if (sourceDescription != null) {
-        player?.source = sourceDescription
-      }
+      player?.source = sourceDescription
     } catch (exception: THEOplayerException) {
       Log.e(TAG, exception.message ?: "")
       eventEmitter.emitError(exception)

package/android/src/main/java/com/theoplayer/audio/AudioFocusManager.kt

@@ -0,0 +1,145 @@
+package com.theoplayer.audio
+
+import android.app.UiModeManager
+import android.content.Context
+import android.content.res.Configuration
+import android.media.AudioManager
+import android.util.Log
+import androidx.media.AudioAttributesCompat
+import androidx.media.AudioFocusRequestCompat
+import androidx.media.AudioManagerCompat
+import com.theoplayer.BuildConfig
+import com.theoplayer.android.api.player.Player
+
+private const val TAG = "AudioFocusManager"
+
+/**
+ * Manages audio focus for the application, ensuring proper handling of audio focus changes
+ * to control media playback behavior.
+ *
+ * @param context The context used to access system services.
+ * @param player The media player instance associated with this audio focus manager. It can be
+ *               provided optionally to control playback behavior.
+ */
+class AudioFocusManager(
+  context: Context,
+  private val player: Player? = null
+) : AudioManager.OnAudioFocusChangeListener {
+
+  private val audioManager = context.getSystemService(Context.AUDIO_SERVICE) as? AudioManager
+  private val uiModeManager = context.getSystemService(Context.UI_MODE_SERVICE) as? UiModeManager
+  private var resumeOnFocusGain = false
+  private val focusLock = Any()
+
+  private val audioFocusRequest = AudioFocusRequestCompat.Builder(AudioManagerCompat.AUDIOFOCUS_GAIN)
+    .setAudioAttributes(
+      AudioAttributesCompat.Builder()
+        // Usage value to use when the usage is media, such as music, or movie soundtracks.
+        .setUsage(AudioAttributesCompat.USAGE_MEDIA)
+        // Content type value to use when the content type is a soundtrack, typically accompanying
+        // a movie or TV program.
+        .setContentType(AudioAttributesCompat.CONTENT_TYPE_MOVIE)
+        .build()
+    )
+    .setOnAudioFocusChangeListener(this)
+    .setWillPauseWhenDucked(true)
+    .build()
+
+  /**
+   * Called on the listener to notify it the audio focus for this listener has been changed.
+   */
+  override fun onAudioFocusChange(focusChange: Int) {
+    if (uiModeManager?.currentModeType == Configuration.UI_MODE_TYPE_TELEVISION) {
+      // Ignore changes in audioFocus for Connected TVs.
+      return
+    }
+    if (BuildConfig.DEBUG) {
+      Log.d(TAG, "onAudioFocusChange: ${fromAudioFocusChange(focusChange)}")
+    }
+    when (focusChange) {
+      // Used to indicate a gain of audio focus, or a request of audio focus, of unknown duration.
+      AudioManager.AUDIOFOCUS_GAIN -> {
+        if (resumeOnFocusGain) {
+          synchronized(focusLock) {
+            // Reset resume flag
+            resumeOnFocusGain = false
+          }
+          player?.play()
+        }
+      }
+
+      // Used to indicate a loss of audio focus of unknown duration.
+      AudioManager.AUDIOFOCUS_LOSS -> {
+        synchronized (focusLock) {
+          // This is not a transient loss, we shouldn't automatically resume for now
+          resumeOnFocusGain = false;
+        }
+      }
+
+      // Used to indicate a transient loss of audio focus.
+      AudioManager.AUDIOFOCUS_LOSS_TRANSIENT,
+
+      // Used to indicate a transient loss of audio focus where the loser of the audio focus can
+      // lower its output volume if it wants to continue playing (also referred to as "ducking"),
+      // as the new focus owner doesn't require others to be silent.
+      AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK -> {
+        synchronized (focusLock) {
+          // We should only resume if playback was interrupted
+          resumeOnFocusGain = !(player?.isPaused ?: true)
+        }
+        player?.pause()
+      }
+    }
+  }
+
+  private fun fromAudioFocusChange(focusChange: Int?): String {
+    return when (focusChange) {
+      AudioManager.AUDIOFOCUS_GAIN -> "AUDIOFOCUS_GAIN"
+      AudioManager.AUDIOFOCUS_GAIN_TRANSIENT -> "AUDIOFOCUS_GAIN_TRANSIENT"
+      AudioManager.AUDIOFOCUS_GAIN_TRANSIENT_EXCLUSIVE -> "AUDIOFOCUS_GAIN_TRANSIENT_EXCLUSIVE"
+      AudioManager.AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK -> "AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK"
+      AudioManager.AUDIOFOCUS_LOSS -> "AUDIOFOCUS_LOSS"
+      AudioManager.AUDIOFOCUS_LOSS_TRANSIENT -> "AUDIOFOCUS_LOSS_TRANSIENT"
+      AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK -> "AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK"
+      else -> "AUDIOFOCUS_NONE"
+    }
+  }
+
+  private fun fromAudioFocusRequest(focusRequest: Int?): String {
+    return when(focusRequest) {
+      AudioManager.AUDIOFOCUS_REQUEST_GRANTED -> "AUDIOFOCUS_REQUEST_GRANTED"
+      AudioManager.AUDIOFOCUS_REQUEST_DELAYED -> "AUDIOFOCUS_REQUEST_DELAYED"
+      else -> "AUDIOFOCUS_REQUEST_FAILED"
+    }
+  }
+
+  /**
+   * Send a request to obtain the audio focus
+   *
+   * @return True if audio focus is granted, false otherwise.
+   */
+  fun retrieveAudioFocus(): Boolean {
+    val result = audioManager?.let {
+      AudioManagerCompat.requestAudioFocus(it, audioFocusRequest)
+    }
+    if (BuildConfig.DEBUG) {
+      Log.d(TAG, "retrieveAudioFocus: ${fromAudioFocusRequest(result)}")
+    }
+    return result == AudioManager.AUDIOFOCUS_REQUEST_GRANTED
+  }
+
+  /**
+   * Abandon audio focus. Causes the previous focus owner, if any, to receive focus.
+   */
+  fun abandonAudioFocus() {
+    synchronized (focusLock) {
+      resumeOnFocusGain = false
+    }
+    val result = audioManager?.let {
+      AudioManagerCompat.abandonAudioFocusRequest(it, audioFocusRequest)
+    }
+    if (BuildConfig.DEBUG) {
+      Log.d(TAG, "abandonAudioFocus: ${fromAudioFocusRequest(result)}")
+    }
+  }
+}

package/android/src/main/java/com/theoplayer/drm/ContentProtectionModule.kt

@@ -111,7 +111,7 @@ class ContentProtectionModule(private val context: ReactApplicationContext) :
     }
     emit(
       EVENT_BUILD_INTEGRATION, payload,
-      onResult = hashMapOf(),
+      onResult = hashMapOf(EVENT_BUILD_PROCESSED to { /*NoOp*/ }),
       onError = {}
     )
   }

package/android/src/main/java/com/theoplayer/player/PlayerModule.kt

@@ -12,6 +12,7 @@ import com.theoplayer.android.api.player.track.texttrack.TextTrackMode
 import com.theoplayer.audio.BackgroundAudioConfigAdapter
 import com.theoplayer.presentation.PipConfigAdapter
 import com.theoplayer.track.QualityListFilter
+import com.theoplayer.track.TextTrackStyleAdapter
 import com.theoplayer.track.emptyQualityList
 import com.theoplayer.util.ViewResolver
 
@@ -188,4 +189,13 @@ class PlayerModule(context: ReactApplicationContext) : ReactContextBaseJavaModul
       })
     }
   }
+
+  @ReactMethod
+  fun setTextTrackStyle(tag: Int, style: ReadableMap?) {
+    viewResolver.resolveViewByTag(tag) { view: ReactTHEOplayerView? ->
+      view?.player?.let { player ->
+        TextTrackStyleAdapter.applyTextTrackStyle(player.textTrackStyle, style)
+      }
+    }
+  }
 }

package/android/src/main/java/com/theoplayer/presentation/PipUtils.kt

@@ -35,6 +35,7 @@ private const val ACTION_RWD = ACTION_PLAY + 2
 private const val ACTION_FFD = ACTION_PLAY + 3
 private const val ACTION_IGNORE = ACTION_PLAY + 999
 private const val SKIP_TIME = 15
+private const val NO_ICON = -1
 
 private val PIP_ASPECT_RATIO_DEFAULT = Rational(16, 9)
 private val PIP_ASPECT_RATIO_MIN = Rational(100, 239)
@@ -125,21 +126,24 @@ class PipUtils(
       }
 
       // Play/pause
-      // Always add this button, but send an ACTION_IGNORE if disabled.
+      // Always add this button, but send an ACTION_IGNORE and make invisible if disabled.
+      // If no RemoteActions are added, MediaSession takes over the UI.
       add(
         if (paused) {
           buildRemoteAction(
-            if (enablePlayPause) ACTION_PLAY else ACTION_IGNORE,
+            ACTION_PLAY,
             R.drawable.ic_play,
             R.string.play_pip,
-            R.string.play_desc_pip
+            R.string.play_desc_pip,
+            enablePlayPause
           )
         } else {
           buildRemoteAction(
-            if (enablePlayPause) ACTION_PAUSE else ACTION_IGNORE,
+            ACTION_PAUSE,
             R.drawable.ic_pause,
             R.string.pause_pip,
-            R.string.pause_desc_pip
+            R.string.pause_desc_pip,
+            enablePlayPause
           )
         }
       )
@@ -235,12 +239,15 @@ class PipUtils(
     requestId: Int,
     iconId: Int,
     titleId: Int,
-    descId: Int
+    descId: Int,
+    enabled: Boolean = true
   ): RemoteAction {
-    val intent = Intent(ACTION_MEDIA_CONTROL).putExtra(EXTRA_ACTION, requestId)
+    // Ignore the action if it is disabled
+    val requestCode = if (enabled) requestId else ACTION_IGNORE
+    val intent = Intent(ACTION_MEDIA_CONTROL).putExtra(EXTRA_ACTION, requestCode)
     val pendingIntent =
-      PendingIntent.getBroadcast(reactContext, requestId, intent, PendingIntent.FLAG_IMMUTABLE)
-    val icon: Icon = Icon.createWithResource(reactContext, iconId)
+      PendingIntent.getBroadcast(reactContext, requestCode, intent, PendingIntent.FLAG_IMMUTABLE)
+    val icon: Icon = Icon.createWithResource(reactContext, if (enabled) iconId else NO_ICON)
     val title = reactContext.getString(titleId)
     val desc = reactContext.getString(descId)
     return RemoteAction(icon, title, desc, pendingIntent)

package/android/src/main/java/com/theoplayer/track/TextTrackStyleAdapter.kt

@@ -0,0 +1,79 @@
+package com.theoplayer.track
+
+import android.graphics.Color
+import com.facebook.react.bridge.ReadableMap
+import com.theoplayer.android.api.player.track.texttrack.TextTrackStyle
+
+private val PROP_BACKGROUND_COLOR = "backgroundColor"
+private val PROP_EDGE_STYLE = "edgeStyle"
+private val PROP_FONT_COLOR = "fontColor"
+private val PROP_FONT_FAMILY = "fontFamily"
+private val PROP_FONT_SIZE = "fontSize"
+private val PROP_WINDOW_COLOR = "windowColor"
+private val PROP_MARGIN_LEFT = "marginLeft"
+private val PROP_MARGIN_TOP = "marginTop"
+private val PROP_COLOR_R = "r"
+private val PROP_COLOR_G = "g"
+private val PROP_COLOR_B = "b"
+private val PROP_COLOR_A = "a"
+
+object TextTrackStyleAdapter {
+
+  fun applyTextTrackStyle(style: TextTrackStyle, props: ReadableMap?) {
+    if (props == null) {
+      return
+    }
+    if (props.hasKey(PROP_BACKGROUND_COLOR)) {
+      style.backgroundColor =
+        colorFromBridgeColor(props.getMap(PROP_BACKGROUND_COLOR)) ?: Color.BLACK
+    }
+    if (props.hasKey(PROP_EDGE_STYLE)) {
+      style.edgeType = edgeStyleFromProps(props.getString(PROP_EDGE_STYLE))
+    }
+    if (props.hasKey(PROP_FONT_COLOR)) {
+      style.fontColor = colorFromBridgeColor(props.getMap(PROP_FONT_COLOR)) ?: Color.WHITE
+    }
+    if (props.hasKey(PROP_FONT_FAMILY)) {
+      val family = props.getString(PROP_FONT_FAMILY)
+      if (family != null) {
+        style.setFont(family, TextTrackStyle.FontStyle.NORMAL)
+      } else {
+        style.setFont(TextTrackStyle.FontFamily.DEFAULT, TextTrackStyle.FontStyle.NORMAL)
+      }
+    }
+    if (props.hasKey(PROP_FONT_SIZE)) {
+      style.fontSize = props.getInt(PROP_FONT_SIZE)
+    }
+    if (props.hasKey(PROP_WINDOW_COLOR)) {
+      style.windowColor = colorFromBridgeColor(props.getMap(PROP_WINDOW_COLOR)) ?: Color.TRANSPARENT
+    }
+    if (props.hasKey(PROP_MARGIN_TOP)) {
+      style.marginTop = props.getInt(PROP_MARGIN_TOP)
+    }
+    if (props.hasKey(PROP_MARGIN_LEFT)) {
+      style.marginLeft = props.getInt(PROP_MARGIN_LEFT)
+    }
+  }
+
+  private fun edgeStyleFromProps(style: String?): TextTrackStyle.EdgeType {
+    return when (style) {
+      "dropshadow" -> TextTrackStyle.EdgeType.EDGE_TYPE_DROP_SHADOW
+      "raised" -> TextTrackStyle.EdgeType.EDGE_TYPE_RAISED
+      "depressed" -> TextTrackStyle.EdgeType.EDGE_TYPE_DEPRESSED
+      "uniform" -> TextTrackStyle.EdgeType.EDGE_TYPE_OUTLINE
+      else -> TextTrackStyle.EdgeType.EDGE_TYPE_NONE
+    }
+  }
+
+  private fun colorFromBridgeColor(color: ReadableMap?): Int? {
+    if (color == null) {
+      return null
+    }
+    return Color.argb(
+      color.getInt(PROP_COLOR_A),
+      color.getInt(PROP_COLOR_R),
+      color.getInt(PROP_COLOR_G),
+      color.getInt(PROP_COLOR_B),
+    )
+  }
+}

package/android/src/main/java/com/theoplayer/util/ViewResolver.kt

@@ -6,11 +6,16 @@ import com.facebook.react.uimanager.UIManagerModule
 import com.theoplayer.ReactTHEOplayerView
 
 private const val TAG = "ViewResolver"
+private const val INVALID_TAG = -1
 
 class ViewResolver(private val reactContext: ReactApplicationContext) {
   private var uiManager: UIManagerModule? = null
 
   fun resolveViewByTag(tag: Int, onResolved: (view: ReactTHEOplayerView?) -> Unit) {
+    if (tag == INVALID_TAG) {
+      // Don't bother trying to resolve an invalid tag.
+      onResolved(null)
+    }
     if (uiManager == null) {
       uiManager = reactContext.getNativeModule(UIManagerModule::class.java)
     }
@@ -20,6 +25,7 @@ class ViewResolver(private val reactContext: ReactApplicationContext) {
       } catch (ignore: Exception) {
         // The ReactTHEOplayerView instance could not be resolved: log but do not forward exception.
         Log.w(TAG, "Failed to resolve ReactTHEOplayerView tag $tag")
+        onResolved(null)
       }
     }
   }

package/ios/THEOplayerRCTBridge.m

@@ -108,6 +108,9 @@ RCT_EXTERN_METHOD(setTargetVideoQuality:(nonnull NSNumber *)node
 RCT_EXTERN_METHOD(setPreload:(nonnull NSNumber *)node
                   type:(nonnull NSString *)type)
 
+RCT_EXTERN_METHOD(setTextTrackStyle:(nonnull NSNumber *)node
+                  textTrackStyle:(NSDictionary)textTrackStyle)
+
 @end
 
 // ----------------------------------------------------------------------------

package/ios/THEOplayerRCTPlayerAPI.swift

@@ -6,10 +6,26 @@ import Foundation
 import UIKit
 import THEOplayerSDK
 
+#if canImport(THEOplayerConnectorSideloadedSubtitle)
+import THEOplayerConnectorSideloadedSubtitle
+#endif
+
 let ERROR_MESSAGE_PLAYER_ABR_UNSUPPORTED_FEATURE: String = "Setting an ABRconfig is not supported on iOS/tvOS."
 let ERROR_MESSAGE_PLAYER_QUALITY_UNSUPPORTED_FEATURE: String = "Setting a target video quality is not supported on iOS/tvOS."
 let ERROR_MESSAGE_PLAYER_FULLSCREEN_UNSUPPORTED_FEATURE: String = "Fullscreen presentationmode should be implemented on the RN level for iOS/tvOS."
 
+let TTS_PROP_BACKGROUND_COLOR = "backgroundColor"
+let TTS_PROP_EDGE_STYLE = "edgeStyle"
+let TTS_PROP_FONT_COLOR = "fontColor"
+let TTS_PROP_FONT_FAMILY = "fontFamily"
+let TTS_PROP_FONT_SIZE = "fontSize"
+let TTS_PROP_MARGIN_LEFT = "marginLeft"
+let TTS_PROP_MARGIN_TOP = "marginTop"
+let TTS_PROP_COLOR_R = "r"
+let TTS_PROP_COLOR_G = "g"
+let TTS_PROP_COLOR_B = "b"
+let TTS_PROP_COLOR_A = "a"
+
 @objc(THEOplayerRCTPlayerAPI)
 class THEOplayerRCTPlayerAPI: NSObject, RCTBridgeModule {
     @objc var bridge: RCTBridge!
@@ -44,8 +60,7 @@ class THEOplayerRCTPlayerAPI: NSObject, RCTBridgeModule {
             if let theView = self.bridge.uiManager.view(forReactTag: node) as? THEOplayerRCTView,
                let srcDescription = THEOplayerRCTSourceDescriptionBuilder.buildSourceDescription(src) {
                 if let player = theView.player {
-                    if DEBUG_PLAYER_API { PrintUtils.printLog(logText: "[NATIVE] Setting new source on TheoPlayer") }
-                    player.source = srcDescription
+                    self.setNewSourceDescription(player: player, srcDescription: srcDescription)
                 }
             } else {
                 if DEBUG_PLAYER_API { PrintUtils.printLog(logText: "[NATIVE] Failed to update THEOplayer source.") }
@@ -53,6 +68,15 @@ class THEOplayerRCTPlayerAPI: NSObject, RCTBridgeModule {
         }
     }
     
+    private func setNewSourceDescription(player: THEOplayer, srcDescription: SourceDescription) {
+        if DEBUG_PLAYER_API { PrintUtils.printLog(logText: "[NATIVE] Setting new source on TheoPlayer") }
+#if canImport(THEOplayerConnectorSideloadedSubtitle)
+        player.setSourceWithSubtitles(source: srcDescription)
+#else
+        player.source = srcDescription
+#endif
+    }
+    
     @objc(setABRConfig:abrConfig:)
     func setABRConfig(_ node: NSNumber, setABRConfig: NSDictionary) -> Void {
         if DEBUG_PLAYER_API { print(ERROR_MESSAGE_PLAYER_ABR_UNSUPPORTED_FEATURE) }
@@ -251,4 +275,44 @@ class THEOplayerRCTPlayerAPI: NSObject, RCTBridgeModule {
         }
     }
     
+    @objc(setTextTrackStyle:textTrackStyle:)
+    func setTextTrackStyle(_ node: NSNumber, textTrackStyle: NSDictionary) -> Void {
+        DispatchQueue.main.async {
+            if let theView = self.bridge.uiManager.view(forReactTag: node) as? THEOplayerRCTView,
+               let player = theView.player {
+                if let bgColorMap = textTrackStyle[TTS_PROP_BACKGROUND_COLOR] as? [String:Any],
+                   let r = bgColorMap[TTS_PROP_COLOR_R] as? Int,
+                   let g = bgColorMap[TTS_PROP_COLOR_G] as? Int,
+                   let b = bgColorMap[TTS_PROP_COLOR_B] as? Int,
+                   let a = bgColorMap[TTS_PROP_COLOR_A] as? Int {
+                    let bgColor = UIColor(red: CGFloat(r)/255.0, green: CGFloat(g)/255.0, blue: CGFloat(b)/255.0, alpha: CGFloat(a)/255.0)
+                    player.textTrackStyle?.backgroundColor = [TextTrackStyleRuleColor(bgColor)]
+                }
+                if let fontColorMap = textTrackStyle[TTS_PROP_FONT_COLOR] as? [String:Any],
+                   let r = fontColorMap[TTS_PROP_COLOR_R] as? Int,
+                   let g = fontColorMap[TTS_PROP_COLOR_G] as? Int,
+                   let b = fontColorMap[TTS_PROP_COLOR_B] as? Int,
+                   let a = fontColorMap[TTS_PROP_COLOR_A] as? Int {
+                    let fontColor = UIColor(red: CGFloat(r)/255.0, green: CGFloat(g)/255.0, blue: CGFloat(b)/255.0, alpha: CGFloat(a)/255.0)
+                    player.textTrackStyle?.fontColor = [TextTrackStyleRuleColor(fontColor)]
+                }
+                if let edgeStyle = textTrackStyle[TTS_PROP_EDGE_STYLE] as? String {
+                    player.textTrackStyle?.edgeStyle = [TextTrackStyleRuleString(THEOplayerRCTTypeUtils.textTrackEdgeStyleStringFromString(edgeStyle))]
+                }
+                if let fontFamily = textTrackStyle[TTS_PROP_FONT_FAMILY] as? String {
+                    player.textTrackStyle?.fontFamily = [TextTrackStyleRuleString(fontFamily)]
+                }
+                if let fontSize = textTrackStyle[TTS_PROP_FONT_SIZE] as? Int {
+                    player.textTrackStyle?.fontSize = [TextTrackStyleRuleNumber(fontSize)]
+                }
+                if let marginTop = textTrackStyle[TTS_PROP_MARGIN_TOP] as? Int {
+                    player.textTrackStyle?.marginTop = [TextTrackStyleRuleNumber(marginTop)]
+                }
+                if let marginLeft = textTrackStyle[TTS_PROP_MARGIN_LEFT] as? Int {
+                    player.textTrackStyle?.marginLeft = [TextTrackStyleRuleNumber(marginLeft)]
+                }
+            }
+        }
+    }
+    
 }

package/ios/THEOplayerRCTSourceDescriptionBuilder.swift

@@ -375,6 +375,8 @@ class THEOplayerRCTSourceDescriptionBuilder {
 
         if format == "webvtt" {
             return THEOplayerSDK.TextTrackFormat.WebVTT
+        } else if format == "srt" {
+            return THEOplayerSDK.TextTrackFormat.SRT
         } else {
             return THEOplayerSDK.TextTrackFormat.none
         }