react-native-theoplayer 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.1.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [2.14.0] - 23-09-25
+
+### Fixed
+
+- Fixed an issue on Android where the MediaButtonReceiver would crash the app when it did not find a registered MediaBrowserService instance.
+
+### Added
+
+- Added support for side-loaded metadata tracks on iOS.
+
 ## [2.13.0] - 23-09-15
 
 ### Fixed

package/README.md

@@ -9,9 +9,11 @@ This projects falls under the license as defined in https://github.com/THEOplaye
 ## Table of Contents
 
 1. [Overview](#overview)
-2. [How to use these guides](#how-to-use-these-guides)
-3. [Prerequisites](#prerequisites)
-4. [Getting Started](#getting-started)
+2. [Prerequisites](#prerequisites)
+3. [How to use these guides](#how-to-use-these-guides)
+4. [Features](#features)
+5. [Available connectors](#available-connectors)
+6. [Getting Started](#getting-started)
 
 ## Overview
 
@@ -50,22 +52,31 @@ These are guides on how to use the THEOplayer React Native SDK in your React Nat
 linearly or by searching the specific section. It is recommended that you have a basic understanding of how
 React Native works to speed up the way of working with THEOplayer React Native SDK.
 
+## Features
+
+Depending on the platform on which the application is deployed, a different set of features is available.
+
+If a feature missing, additional help is needed, or you need to extend the package,
+please reach out to us for support.
+
+<img src="./doc/features.svg">
+
 ## Available connectors
 
 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-agama`](https://github.com/THEOplayer/react-native-theoplayer-analytics)             | Agama analytics connector                            | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-agama)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-agama)       |
-| [`@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-analytics-youbora`](https://github.com/THEOplayer/react-native-theoplayer-analytics)           | Youbora analytics connector                          | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-youbora)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-youbora)   |
-| [`@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) |
+| 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-agama`](https://github.com/THEOplayer/react-native-theoplayer-analytics)             | Agama analytics connector                                | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-agama)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-agama)       |
+| [`@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-analytics-youbora`](https://github.com/THEOplayer/react-native-theoplayer-analytics)           | Youbora analytics connector                              | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-youbora)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-youbora)   |
+| [`@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<br/>`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
 
@@ -81,7 +92,6 @@ and discussed in the next section. Finally, an overview of features, limitations
     - [Getting started on Web](./doc/creating-minimal-app.md#getting-started-on-web)
 - [The THEOplayerView component](./doc/theoplayerview-component.md)
 - [The example application](./doc/example-app.md)
-- [Features](./doc/features.md)
 - Knowledge Base
   - [Adaptive Bitrate (ABR)](./doc/abr.md)
   - [Advertisements](./doc/ads.md)

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

@@ -115,8 +115,20 @@ class ReactTHEOplayerContext private constructor(
   }
 
   private fun setPlaybackServiceEnabled(enabled: Boolean) {
+    // Toggle the MediaPlaybackService.
+    toggleComponent(enabled, ComponentName(reactContext.applicationContext, MediaPlaybackService::class.java))
+
+    // Also toggle any registered MediaButtonReceiver broadcast receiver.
+    // It will crash the app if it remains active and tries to find our disabled MediaBrowserService instance.
+    toggleComponent(enabled, ComponentName(reactContext.applicationContext, androidx.media.session.MediaButtonReceiver::class.java))
+  }
+
+  /**
+   * Enable or disable a receiver component.
+   */
+  private fun toggleComponent(enabled: Boolean, componentName: ComponentName) {
     reactContext.applicationContext.packageManager.setComponentEnabledSetting(
-      ComponentName(reactContext.applicationContext, MediaPlaybackService::class.java),
+      componentName,
       if (enabled) PackageManager.COMPONENT_ENABLED_STATE_ENABLED
       else PackageManager.COMPONENT_ENABLED_STATE_DISABLED,
       PackageManager.DONT_KILL_APP

package/ios/THEOplayerRCTMainEventHandler.swift

@@ -7,6 +7,7 @@ public class THEOplayerRCTMainEventHandler {
     // MARK: Members
     private weak var player: THEOplayer?
     private weak var presentationModeContext: THEOplayerRCTPresentationModeContext?
+    private var metadataTracksInfo: [[String:Any]] = []
         
     // MARK: Events
     var onNativePlay: RCTDirectEventBlock?
@@ -67,6 +68,10 @@ public class THEOplayerRCTMainEventHandler {
         self.attachListeners()
     }
     
+    func setMetadataTracksInfo(metadataTracksInfo: [[String:Any]]) {
+        self.metadataTracksInfo = metadataTracksInfo
+    }
+    
     // MARK: - attach/dettach main player Listeners
     private func attachListeners() {
         guard let player = self.player else {
@@ -268,8 +273,9 @@ public class THEOplayerRCTMainEventHandler {
         self.loadedMetadataListener = player.addEventListener(type: PlayerEventTypes.LOADED_META_DATA) { [weak self, weak player] event in
             if DEBUG_THEOPLAYER_EVENTS { PrintUtils.printLog(logText: "[NATIVE] Received LOADED_META_DATA event from THEOplayer") }
             if let wplayer = player,
+               let welf = self,
                let forwardedLoadedMetadataEvent = self?.onNativeLoadedMetadata {
-                let metadata = THEOplayerRCTTrackMetadataAggregator.aggregateTrackMetadata(player: wplayer)
+                let metadata = THEOplayerRCTTrackMetadataAggregator.aggregateTrackMetadata(player: wplayer, metadataTracksInfo: welf.metadataTracksInfo)
                 print(metadata)
                 forwardedLoadedMetadataEvent(metadata)
             }

package/ios/THEOplayerRCTPlayerAPI.swift

@@ -57,10 +57,15 @@ class THEOplayerRCTPlayerAPI: NSObject, RCTBridgeModule {
     @objc(setSource:src:)
     func setSource(_ node: NSNumber, src: NSDictionary) -> Void {
         DispatchQueue.main.async {
-            if let theView = self.bridge.uiManager.view(forReactTag: node) as? THEOplayerRCTView,
-               let srcDescription = THEOplayerRCTSourceDescriptionBuilder.buildSourceDescription(src) {
-                if let player = theView.player {
-                    self.setNewSourceDescription(player: player, srcDescription: srcDescription)
+            if let theView = self.bridge.uiManager.view(forReactTag: node) as? THEOplayerRCTView {
+                let (sourceDescription, metadataTrackDescriptions) = THEOplayerRCTSourceDescriptionBuilder.buildSourceDescription(src)
+                if let srcDescription = sourceDescription {
+                    if let player = theView.player {
+                        self.setNewSourceDescription(player: player, srcDescription: srcDescription)
+                        theView.processMetadataTracks(metadataTrackDescriptions: metadataTrackDescriptions)
+                    }
+                } else {
+                    if DEBUG_PLAYER_API { PrintUtils.printLog(logText: "[NATIVE] Failed to update THEOplayer source.") }
                 }
             } else {
                 if DEBUG_PLAYER_API { PrintUtils.printLog(logText: "[NATIVE] Failed to update THEOplayer source.") }

package/ios/THEOplayerRCTSideloadedMetadataTrackHandler.swift

@@ -0,0 +1,113 @@
+// THEOplayerRCTMetadataAggregator.swift
+
+import Foundation
+import THEOplayerSDK
+
+struct Cue {
+    var startTime: Int64
+    var endTime: Int64
+    var cueContent: String
+}
+
+class THEOplayerRCTSideloadedMetadataTrackHandler {
+    
+    class func parseVtt(_ urlString: String, completion: @escaping ([Cue]?) -> Void) {
+            guard let url = URL(string: urlString) else {
+                completion(nil)
+                return
+            }
+            
+            let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
+                guard let data = data, error == nil else {
+                    completion(nil)
+                    return
+                }
+                
+                if let vttString = String(data: data, encoding: .utf8) {
+                    let cues = THEOplayerRCTSideloadedMetadataTrackHandler.parseVTTString(vttString)
+                    completion(cues)
+                } else {
+                    completion(nil)
+                }
+            }
+            
+            task.resume()
+        }
+
+    private class func parseVTTString(_ vttString: String) -> [Cue] {
+            var cues: [Cue] = []
+            var currentCue: Cue?
+            
+        let separator = THEOplayerRCTSideloadedMetadataTrackHandler.separatorSequence(vttString)
+        let lines = vttString.components(separatedBy: separator)
+        for line in lines {
+            if line.isEmpty {                                               // process unprocessed cue to list
+                if let cue = currentCue {
+                    cues.append(cue)
+                    currentCue = nil
+                }
+            } else if currentCue == nil {
+                let timeComponents = line.components(separatedBy: " --> ")  // start new cue with timestamps
+                if timeComponents.count == 2 {
+                    currentCue = Cue(startTime: Self.parseTimeToMsecs(timeComponents[0]) ?? 0,
+                                     endTime: Self.parseTimeToMsecs(timeComponents[1]) ?? 0,
+                                     cueContent: "")
+                }
+            } else {
+                // Append to the content
+                if currentCue!.cueContent.isEmpty {
+                    currentCue!.cueContent = "\(line)"                      // set cue content
+                } else {
+                    currentCue!.cueContent += "\(separator)\(line)"         // append cue content
+                }
+            }
+        }
+        
+        return cues
+    }
+    
+    private class func separatorSequence(_ dataString: String) -> String {
+        return dataString.contains("\r\n") ? "\r\n" : "\n"
+    }
+    
+    private class func parseTimeToMsecs(_ timeString: String) -> Int64? {
+        var tString = timeString
+        let formatter = DateFormatter()
+        formatter.dateFormat = "mm:ss.SSS"
+        if formatter.date(from: timeString) != nil {
+            tString = "00:\(tString)"
+        }
+        formatter.dateFormat = "HH:mm:ss.SSS"
+        if formatter.date(from: tString) != nil {
+            return Self.totalMilliSeconds(fromTimeIntervalString: tString)
+        }
+        return nil
+    }
+    
+    private class func totalMilliSeconds(fromTimeIntervalString timeIntervalString: String) -> Int64? {
+        let mainComponents = timeIntervalString.components(separatedBy: ".")
+        // Ensure we have msecs
+        guard mainComponents.count == 2 else {
+            return nil
+        }
+        
+        let components = mainComponents[0].components(separatedBy: ":")
+        
+        // Ensure we have at least minutes, seconds, and hours
+        guard components.count == 3 else {
+            return nil
+        }
+        
+        // Parse hours, minutes, and seconds
+        if let hours = Int64(components[0]), let minutes = Int64(components[1]), let seconds = Int64(components[2]) {
+            let totalSeconds = hours * 3600 + minutes * 60 + seconds
+            
+            // If there are milliseconds, add them
+            if let milliseconds = Int64(mainComponents[1]) {
+                return (totalSeconds * 1000) + milliseconds
+            }
+        }
+        
+        return nil
+    }
+}

package/ios/THEOplayerRCTSourceDescriptionBuilder.swift

@@ -59,12 +59,12 @@ class THEOplayerRCTSourceDescriptionBuilder {
 
     /**
      Builds a THEOplayer SourceDescription that can be passed as a source for the THEOplayer.
-     - returns: a THEOplayer TypedSource. In case of SSAI we  support GoogleDAITypedSource with GoogleDAIVodConfiguration or GoogleDAILiveConfiguration
+     - returns: a THEOplayer TypedSource and an array containing possible sideloaded metadataTracks. In case of SSAI we  support GoogleDAITypedSource with GoogleDAIVodConfiguration or GoogleDAILiveConfiguration
      */
-    static func buildSourceDescription(_ sourceData: NSDictionary) -> SourceDescription? {
+    static func buildSourceDescription(_ sourceData: NSDictionary) -> (SourceDescription?, [TextTrackDescription]?) {
         // 1. Extract "sources"
         guard let sourcesData = sourceData[SD_PROP_SOURCES] else {
-            return nil
+            return (nil, nil)
         }
 
         var typedSources: [TypedSource] = []
@@ -77,7 +77,7 @@ class THEOplayerRCTSourceDescriptionBuilder {
                     if DEBUG_SOURCE_DESCRIPTION_BUIDER {
                         PrintUtils.printLog(logText: "[NATIVE] Could not create THEOplayer TypedSource from sourceData array")
                     }
-                    return nil
+                    return (nil, nil)
                 }
             }
         }
@@ -89,7 +89,7 @@ class THEOplayerRCTSourceDescriptionBuilder {
                 if DEBUG_SOURCE_DESCRIPTION_BUIDER {
                     PrintUtils.printLog(logText: "[NATIVE] Could not create THEOplayer TypedSource from sourceData")
                 }
-                return nil
+                return (nil, nil)
             }
         }
 
@@ -98,16 +98,22 @@ class THEOplayerRCTSourceDescriptionBuilder {
 
         // 3. extract 'textTracks'
         var textTrackDescriptions: [TextTrackDescription]?
+        var metadataTrackDescriptions: [TextTrackDescription]?
         if let textTracksDataArray = sourceData[SD_PROP_TEXTTRACKS] as? [[String:Any]] {
             textTrackDescriptions = []
+            metadataTrackDescriptions = []
             for textTracksData in textTracksDataArray {
                 if let textTrackDescription = THEOplayerRCTSourceDescriptionBuilder.buildTextTrackDescriptions(textTracksData) {
-                    textTrackDescriptions?.append(textTrackDescription)
+                    if textTrackDescription.kind == .metadata {
+                        metadataTrackDescriptions?.append(textTrackDescription)
+                    } else {
+                        textTrackDescriptions?.append(textTrackDescription)
+                    }
                 } else {
                     if DEBUG_SOURCE_DESCRIPTION_BUIDER {
                         PrintUtils.printLog(logText: "[NATIVE] Could not create THEOplayer TextTrackDescription from textTrackData array")
                     }
-                    return nil
+                    return (nil, nil)
                 }
             }
 
@@ -122,12 +128,14 @@ class THEOplayerRCTSourceDescriptionBuilder {
             metadataDescription = THEOplayerRCTSourceDescriptionBuilder.buildMetaDataDescription(metadataData)
         }
 
-        // 6. construct and return SourceDescription
-        return SourceDescription(sources: typedSources,
+        // 6. construct the SourceDescription
+        let sourceDescription = SourceDescription(sources: typedSources,
                                  textTracks: textTrackDescriptions,
                                  ads: adsDescriptions,
                                  poster: poster,
                                  metadata: metadataDescription)
+        
+        return (sourceDescription, metadataTrackDescriptions)
     }
 
     // MARK: Private build methods

package/ios/THEOplayerRCTTextTrackEventHandler.swift

@@ -37,6 +37,15 @@ class THEOplayerRCTTextTrackEventHandler {
         self.attachListeners()
     }
     
+    func triggerAddMetadataTrackEvent(metadataTrackInfo: [String:Any]) {
+        if let addTrackEvent = self.onNativeTextTrackListEvent {
+            addTrackEvent([
+                "track" : metadataTrackInfo,
+                "type" : TrackListEventType.ADD_TRACK.rawValue
+            ])
+        }
+    }
+    
     // MARK: - attach/dettach textTrackList Listeners
     private func attachListeners() {
         guard let player = self.player else {

package/ios/THEOplayerRCTTrackMetadataAggregator.swift

@@ -28,12 +28,12 @@ let PROP_SRC: String = "src"
 
 class THEOplayerRCTTrackMetadataAggregator {
 
-    class func aggregateTrackMetadata(player: THEOplayer) -> [String:Any] {
+    class func aggregateTrackMetadata(player: THEOplayer, metadataTracksInfo: [[String:Any]]) -> [String:Any] {
         let textTracks: TextTrackList = player.textTracks
         let audioTracks: AudioTrackList = player.audioTracks
         let videoTracks: VideoTrackList = player.videoTracks
         return [
-            EVENT_PROP_TEXT_TRACKS : THEOplayerRCTTrackMetadataAggregator.aggregatedTextTrackListInfo(textTracks: textTracks),
+            EVENT_PROP_TEXT_TRACKS : THEOplayerRCTTrackMetadataAggregator.aggregatedTextTrackListInfo(textTracks: textTracks, metadataTracks: metadataTracksInfo),
             EVENT_PROP_AUDIO_TRACKS : THEOplayerRCTTrackMetadataAggregator.aggregatedAudioTrackListInfo(audioTracks: audioTracks),
             EVENT_PROP_VIDEO_TRACKS : THEOplayerRCTTrackMetadataAggregator.aggregatedVideoTrackListInfo(videoTracks: videoTracks),
             EVENT_PROP_SELECTED_TEXT_TRACK: THEOplayerRCTTrackMetadataAggregator.selectedTextTrack(textTracks: textTracks),
@@ -44,16 +44,16 @@ class THEOplayerRCTTrackMetadataAggregator {
     }
 
     // MARK: TEXTTRACKS
-    class func aggregatedTextTrackListInfo(textTracks: TextTrackList) -> [[String:Any]] {
-        var textTrackEntries:[[String:Any]] = []
+    class func aggregatedTextTrackListInfo(textTracks: TextTrackList, metadataTracks: [[String:Any]]) -> [[String:Any]] {
+        var trackEntries:[[String:Any]] = metadataTracks
         guard textTracks.count > 0 else {
-            return textTrackEntries
+            return trackEntries
         }
         for i in 0...textTracks.count-1 {
             let textTrack: TextTrack = textTracks.get(i)
-            textTrackEntries.append(THEOplayerRCTTrackMetadataAggregator.aggregatedTextTrackInfo(textTrack: textTrack))
+            trackEntries.append(THEOplayerRCTTrackMetadataAggregator.aggregatedTextTrackInfo(textTrack: textTrack))
         }
-        return textTrackEntries
+        return trackEntries
     }
     
     class func aggregatedTextTrackInfo(textTrack: TextTrack) -> [String:Any] {
@@ -183,4 +183,47 @@ class THEOplayerRCTTrackMetadataAggregator {
         }
         return 0
     }
+    
+    class func aggregatedMetadataTrackInfo(metadataTrackDescriptions: [TextTrackDescription], completed: (([[String:Any]]) -> Void)? ) {
+        var trackIndex = 0
+        var tracksInfo: [[String:Any]] = []
+        for trackDescription in metadataTrackDescriptions {
+            guard trackDescription.kind == .metadata, trackDescription.format == .WebVTT else { continue }
+            
+            let urlString = trackDescription.src.absoluteString
+            THEOplayerRCTSideloadedMetadataTrackHandler.parseVtt(urlString) { cueArray in
+                if let cues = cueArray {
+                    var track: [String:Any] = [:]
+                    let trackUid = 1000 + trackIndex
+                    track[PROP_ID] = UUID().uuidString
+                    track[PROP_UID] = trackUid
+                    track[PROP_KIND] = trackDescription.kind?._rawValue
+                    track[PROP_LANGUAGE] = trackDescription.srclang
+                    track[PROP_MODE] = "hidden"
+                    track[PROP_LABEL] = trackDescription.label ?? "no label"
+                    track[PROP_TYPE] = "webvtt"
+                    track[PROP_SRC] = trackDescription.src.absoluteString
+                    var cueList: [[String:Any]] = []
+                    var cueIndex = 0
+                    for c in cues {
+                        //print("[CUE] \(c.startTime) --> \(c.endTime): \(c.cueContent)")
+                        var cue: [String:Any] = [:]
+                        cue[PROP_ID] = cueIndex
+                        cue[PROP_UID] = (trackUid * 1000000) + cueIndex
+                        cue[PROP_STARTTIME] = c.startTime
+                        cue[PROP_ENDTIME] = c.endTime
+                        cue[PROP_CUE_CONTENT] = c.cueContent
+                        cueList.append(cue)
+                        cueIndex += 1
+                    }
+                    track[PROP_CUES] = cueList
+                    tracksInfo.append(track)
+                    if tracksInfo.count == metadataTrackDescriptions.count {
+                        completed?(tracksInfo)
+                    }
+                }
+            }
+            trackIndex += 1
+        }
+    }
 }

package/ios/THEOplayerRCTView.swift

@@ -150,6 +150,17 @@ public class THEOplayerRCTView: UIView {
         if DEBUG_THEOPLAYER_INTERACTION { PrintUtils.printLog(logText: "[NATIVE] THEOplayer instance destroyed.") }
     }
     
+    func processMetadataTracks(metadataTrackDescriptions: [TextTrackDescription]?) {
+        if let trackDescriptions = metadataTrackDescriptions {
+            THEOplayerRCTTrackMetadataAggregator.aggregatedMetadataTrackInfo(metadataTrackDescriptions: trackDescriptions) { tracksInfo in
+                self.mainEventHandler.setMetadataTracksInfo(metadataTracksInfo: tracksInfo)
+                for trackInfo in tracksInfo {
+                    self.textTrackEventHandler.triggerAddMetadataTrackEvent(metadataTrackInfo: trackInfo)
+                }
+            }
+        }
+    }
+    
     // MARK: - Property bridging (config)
     
     @objc(setConfig:)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-theoplayer",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "A THEOplayer video component for react-native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",