react-native-media3-player 0.0.1 → 2.0.0

package/README.md

@@ -5,14 +5,16 @@
 ---
 
 ## Table of Contents
-- [Installation](#installation)  
-- [Usage](#usage)  
-- [Props](#props)  
-- [Events](#events)  
-- [TypeScript Support](#typescript-support)  
-- [Examples](#examples)  
-- [Screenshots](#screenshots)  
-- [Contributing](#contributing)  
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [DRM Support (Widevine)](#drm-support-widevine)
+- [Events](#events)
+- [TypeScript Support](#typescript-support)
+- [Examples](#examples)
+- [Screenshots](#screenshots)
+- [Contributing](#contributing)
 - [License](#license)
 
 ---
@@ -20,38 +22,85 @@
 ## Installation
 
 **Install via npm:**
+
 ```bash
 npm install react-native-media3-player
 ```
 
 **Or yarn:**
+
 ```bash
 yarn add react-native-media3-player
 ```
 
-> Requires **React Native >= 0.70** 
+> Requires **React Native >= 0.70**
+
+---
+
+**Note:** To use a specific Media3 version, add or update the following in your **android/build.gradle** (Project-level) file:
+
+```groovy
+buildscript {
+    ext {
+        media3Version = "1.4.1" // Set your desired Media3 version
+    }
+}
+```
+
+Be sure to sync your project after making this change.
 
 ---
 
 ## Usage
 
+**Basic (non-DRM):**
+
 ```jsx
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import Media3Player from 'react-native-media3-player';
 
 export default function App() {
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{flex: 1}}>
       <Media3Player
-        style={{ width: '100%', height: 250 }}
-        source={{ uri: 'https://example.com/video.mp4' }}
+        style={{width: '100%', height: 250}}
+        source={{uri: 'https://example.com/video.mp4'}}
         autoplay={true}
         play={true}
         mute={false}
         onReady={() => console.log('Player is ready')}
         onEnd={() => console.log('Video ended')}
-        onError={(error) => console.log('Player error:', error.message)}
+        onError={error => console.log('Player error:', error.message)}
+      />
+    </View>
+  );
+}
+```
+
+**DRM-protected content (Widevine):**
+
+```jsx
+import React from 'react';
+import {View} from 'react-native';
+import Media3Player from 'react-native-media3-player';
+
+export default function App() {
+  return (
+    <View style={{flex: 1}}>
+      <Media3Player
+        style={{width: '100%', height: 250}}
+        source={{
+          uri: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd',
+          drm: {
+            licenseUrl: 'https://cwip-shaka-proxy.appspot.com/no_auth',
+          },
+        }}
+        autoplay={true}
+        play={true}
+        onReady={() => console.log('Player is ready')}
+        onEnd={() => console.log('Video ended')}
+        onError={error => console.log('Player error:', error.message)}
       />
     </View>
   );
@@ -62,23 +111,87 @@ export default function App() {
 
 ## Props
 
-| Prop       | Type                        | Default  | Description |
-|------------|-----------------------------|----------|-------------|
-| `source`   | `{ uri: string }`           | required | Video source object. Must include a valid URI. |
-| `autoplay` | `boolean`                   | `false`  | Automatically start playback when the video is ready. |
-| `play`     | `boolean`                   | `false`  | Controls whether the player is playing. Overrides autoplay. |
-| `mute`     | `boolean`                   | `false`  | Mutes or unmutes the video. |
-| `style`    | `ViewStyle` or `ViewStyle[]` | `{ width: '100%', height: 250 }` | Styling for the player container. |
+| Prop       | Type                         | Default                          | Description                                                              |
+| ---------- | ---------------------------- | -------------------------------- | ------------------------------------------------------------------------ |
+| `source`   | `Source`                     | required                         | Video source object. Must include a valid `uri`. Supports optional `drm` config. |
+| `autoplay` | `boolean`                    | `false`                          | Automatically start playback when the video is ready.                    |
+| `play`     | `boolean`                    | `false`                          | Controls whether the player is playing. Overrides autoplay.              |
+| `mute`     | `boolean`                    | `false`                          | Mutes or unmutes the video.                                              |
+| `style`    | `ViewStyle` or `ViewStyle[]` | `{ width: '100%', height: 250 }` | Styling for the player container.                                        |
+
+### `Source` Object
+
+| Property | Type        | Required | Description                                          |
+| -------- | ----------- | -------- | ---------------------------------------------------- |
+| `uri`    | `string`    | Yes      | The URI of the media to play (MP4, DASH, HLS, etc.). |
+| `drm`    | `DRMConfig` | No       | DRM configuration for protected content.             |
+
+### `DRMConfig` Object
+
+| Property     | Type                              | Required | Description                                           |
+| ------------ | --------------------------------- | -------- | ----------------------------------------------------- |
+| `licenseUrl` | `string`                          | Yes      | The Widevine license server URL.                      |
+| `headers`    | `Array<{ key: string, value: string }>` | No       | Custom headers to include in the DRM license request. |
+
+---
+
+## DRM Support (Widevine)
+
+This library supports **Widevine DRM** for playing protected DASH streams on Android. To enable DRM, pass a `drm` object inside the `source` prop.
+
+### Basic DRM Playback
+
+```jsx
+<Media3Player
+  source={{
+    uri: 'https://storage.googleapis.com/wvmedia/cenc/h264/tears/tears.mpd',
+    drm: {
+      licenseUrl: 'https://proxy.uat.widevine.com/proxy?provider=widevine_test',
+    },
+  }}
+  autoplay
+  play
+/>
+```
+
+### DRM with Custom License Headers
+
+Some license servers require authentication tokens or custom headers. Pass them as an array of `{ key, value }` objects:
+
+```jsx
+<Media3Player
+  source={{
+    uri: 'https://example.com/protected-stream/manifest.mpd',
+    drm: {
+      licenseUrl: 'https://license.example.com/widevine',
+      headers: [
+        {key: 'Authorization', value: 'Bearer <your-token>'},
+        {key: 'X-Custom-Header', value: 'custom-value'},
+      ],
+    },
+  }}
+  autoplay
+  play
+  onError={e => console.error('DRM error:', e.message)}
+/>
+```
+
+### Notes
+
+- DRM is currently supported on **Android only** (Widevine L1/L3 depending on device).
+- The `source.uri` should point to a DASH (`.mpd`) stream encrypted with Widevine.
+- Multi-session DRM is enabled by default for streams that require it.
+- If the license request fails, the `onError` callback will fire with the error details.
 
 ---
 
 ## Events
 
-| Event      | Callback Signature                | Description |
-|------------|----------------------------------|-------------|
-| `onReady`  | `() => void`                     | Fired when the player is ready to play. |
-| `onEnd`    | `() => void`                     | Fired when the video reaches the end. |
-| `onError`  | `(error: { message: string }) => void` | Fired when the player encounters an error. Error object includes a `message` property. |
+| Event     | Callback Signature                     | Description                                                                            |
+| --------- | -------------------------------------- | -------------------------------------------------------------------------------------- |
+| `onReady` | `() => void`                           | Fired when the player is ready to play.                                                |
+| `onEnd`   | `() => void`                           | Fired when the video reaches the end.                                                  |
+| `onError` | `(error: { message: string }) => void` | Fired when the player encounters an error. Error object includes a `message` property. |
 
 ---
 
@@ -88,18 +201,38 @@ This library includes TypeScript definitions. Example:
 
 ```ts
 import React from 'react';
-import { ViewStyle } from 'react-native';
-import Media3Player, { Media3PlayerProps } from 'react-native-media3-player';
+import {ViewStyle} from 'react-native';
+import Media3Player, {Media3PlayerProps} from 'react-native-media3-player';
 
 const props: Media3PlayerProps = {
-  source: { uri: 'https://example.com/video.mp4' },
+  source: {uri: 'https://example.com/video.mp4'},
   autoplay: true,
   play: true,
   mute: false,
-  style: { width: '100%', height: 250 },
+  style: {width: '100%', height: 250},
   onReady: () => console.log('Ready'),
   onEnd: () => console.log('End'),
-  onError: (err) => console.log(err.message),
+  onError: err => console.log(err.message),
+};
+```
+
+**With DRM:**
+
+```ts
+const drmProps: Media3PlayerProps = {
+  source: {
+    uri: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd',
+    drm: {
+      licenseUrl: 'https://cwip-shaka-proxy.appspot.com/no_auth',
+      headers: [
+        {key: 'Authorization', value: 'Bearer my-token'},
+      ],
+    },
+  },
+  autoplay: true,
+  play: true,
+  style: {width: '100%', height: 250},
+  onError: err => console.log('DRM Error:', err.message),
 };
 ```
 
@@ -108,26 +241,59 @@ const props: Media3PlayerProps = {
 ## Examples
 
 **Basic Player:**
+
 ```jsx
-<Media3Player source={{ uri: 'https://example.com/video.mp4' }} />
+<Media3Player source={{uri: 'https://example.com/video.mp4'}} />
 ```
 
 **Autoplay & Mute:**
+
 ```jsx
-<Media3Player
-  source={{ uri: 'https://example.com/video.mp4' }}
-  autoplay
-  mute
-/>
+<Media3Player source={{uri: 'https://example.com/video.mp4'}} autoplay mute />
 ```
 
 **Event Handling:**
+
 ```jsx
 <Media3Player
-  source={{ uri: 'https://example.com/video.mp4' }}
+  source={{uri: 'https://example.com/video.mp4'}}
   onReady={() => console.log('Ready')}
   onEnd={() => console.log('End')}
-  onError={(err) => console.error(err.message)}
+  onError={err => console.error(err.message)}
+/>
+```
+
+**Widevine DRM Stream:**
+
+```jsx
+<Media3Player
+  source={{
+    uri: 'https://storage.googleapis.com/wvmedia/cenc/h264/tears/tears.mpd',
+    drm: {
+      licenseUrl: 'https://proxy.uat.widevine.com/proxy?provider=widevine_test',
+    },
+  }}
+  autoplay
+  play
+/>
+```
+
+**DRM with License Headers:**
+
+```jsx
+<Media3Player
+  source={{
+    uri: 'https://example.com/protected/manifest.mpd',
+    drm: {
+      licenseUrl: 'https://license.example.com/widevine',
+      headers: [
+        {key: 'Authorization', value: 'Bearer my-token'},
+      ],
+    },
+  }}
+  autoplay
+  play
+  onError={err => console.error('DRM Error:', err.message)}
 />
 ```
 
@@ -135,13 +301,13 @@ const props: Media3PlayerProps = {
 
 ## Contributing
 
-We welcome contributions!  
+We welcome contributions!
 
-1. Fork the repo  
-2. Create a branch (`git checkout -b feature/new-feature`)  
-3. Commit your changes (`git commit -m 'Add feature'`)  
-4. Push to the branch (`git push origin feature/new-feature`)  
-5. Open a Pull Request  
+1. Fork the repo
+2. Create a branch (`git checkout -b feature/new-feature`)
+3. Commit your changes (`git commit -m 'Add feature'`)
+4. Push to the branch (`git push origin feature/new-feature`)
+5. Open a Pull Request
 
 > Please follow [Semantic Versioning](https://semver.org/) for commits.
 
@@ -150,4 +316,3 @@ We welcome contributions!
 ## License
 
 MIT © [Mohammad Rehan](https://github.com/mdRehan991)
-

package/android/build.gradle

@@ -1,37 +1,68 @@
+// Apply the Android library plugin
 apply plugin: "com.android.library"
+// Apply the Kotlin Android plugin for Kotlin language support
 apply plugin: "org.jetbrains.kotlin.android"
+// Apply the React Native plugin to enable React Native integration
+apply plugin: "com.facebook.react"
+
+// Use app-defined version if available, otherwise fallback
+def media3Version = rootProject.ext.has("media3Version")
+        ? rootProject.ext.media3Version
+        : "1.4.1"
 
 android {
+    // Set the namespace for the generated R class and manifest
     namespace "com.rnmedia3playerdemo"
+
+    // Compile SDK version to build against
     compileSdkVersion 35
 
     defaultConfig {
+        // Minimum SDK version supported by the library
         minSdkVersion 24
+        // Target SDK version for compatibility and behaviors
         targetSdkVersion 34
     }
 
     compileOptions {
+        // Specify Java source and target compatibility
         sourceCompatibility JavaVersion.VERSION_17
         targetCompatibility JavaVersion.VERSION_17
     }
 
     kotlinOptions {
+        // Set the Kotlin JVM target version
         jvmTarget = "17"
     }
+
+    sourceSets {
+        main {
+            // Include codegen outputs (for TurboModules, Fabric, etc.) in the main sources
+            java.srcDirs += "${buildDir}/generated/source/codegen/java"
+        }
+    }
 }
 
 dependencies {
-    // Required for React Native bridge
-    implementation "com.facebook.react:react-native:+"
+    // Dependency for React Native bridge (provided by the app, NOT bundled in aar)
+    compileOnly "com.facebook.react:react-android"
+
+    // Kotlin standard library dependency
+    implementation "org.jetbrains.kotlin:kotlin-stdlib"
+
+    // AndroidX Media3 ExoPlayer, UI components, and Common classes
+    implementation "androidx.media3:media3-exoplayer:$media3Version"
+    implementation "androidx.media3:media3-ui:$media3Version"
+    implementation "androidx.media3:media3-common:$media3Version"
 
-    // Kotlin standard lib
-    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.0"
+    // streaming formats
+    implementation "androidx.media3:media3-exoplayer-dash:$media3Version"
+    implementation "androidx.media3:media3-exoplayer-hls:$media3Version"
+    implementation "androidx.media3:media3-exoplayer-smoothstreaming:$media3Version"
 
-    // ✅ Media3 dependencies
-    implementation "androidx.media3:media3-exoplayer:1.4.1"
-    implementation "androidx.media3:media3-ui:1.4.1"
-    implementation "androidx.media3:media3-common:1.4.1"
+    // OkHttp data source for Media3 (DRM/auth/advanced networking)
+    implementation "androidx.media3:media3-datasource-okhttp:$media3Version"
 
-    // Useful Android extensions
+    // Android core utilities and extensions (KTX)
     implementation "androidx.core:core-ktx:1.13.1"
 }

package/android/src/main/java/com/rnmedia3playerdemo/Media3Package.kt

@@ -2,13 +2,25 @@ package com.rnmedia3playerdemo
 
 import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
-import com.facebook.react.uimanager.ViewManager
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
 
+/**
+ * Media3Package integrates the custom Media3PlayerViewManager with React Native.
+ *
+ * This package does not register any NativeModules. It only provides the
+ * Media3PlayerViewManager for use as a native UI component from JavaScript.
+ */
 class Media3Package : ReactPackage {
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+    /**
+     * No native modules are exported by this package.
+     */
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> =
+        emptyList()
 
-    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(Media3PlayerViewManager(reactContext))
-    }
+    /**
+     * Registers Media3PlayerViewManager as the only custom ViewManager for this package.
+     */
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+        listOf(Media3PlayerViewManager())
 }

package/android/src/main/java/com/rnmedia3playerdemo/Media3PlayerView.kt

@@ -9,26 +9,33 @@ import androidx.media3.common.Player
 import androidx.media3.common.PlaybackException
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.PlayerView
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import androidx.media3.common.C
 
 /**
- * Media3PlayerView
- *
- * Handles ExoPlayer playback and exposes events to React Native:
- * - onReady
- * - onEnd
- * - onError
+ * Custom view that wraps ExoPlayer and PlayerView, integrating with React Native.
  */
 class Media3PlayerView(context: Context) : FrameLayout(context) {
+    // ExoPlayer instance to handle media playback
     private var exoPlayer: ExoPlayer? = null
+    // PlayerView to display video content
     private var playerView: PlayerView
+    // Currently loaded media source URI
     private var sourceUri: String? = null
+    // Should video autoplay when ready
     private var autoplay: Boolean = false
+    // Play state controlled by the JS prop
     private var play: Boolean = false
+    // Mute state controlled by the JS prop
     private var mute: Boolean = false
 
+    /**
+     * Constructor: initialize the PlayerView and attach it to the layout.
+     */
     init {
         playerView = PlayerView(context)
         playerView.layoutParams = LayoutParams(
@@ -38,16 +45,23 @@ class Media3PlayerView(context: Context) : FrameLayout(context) {
         addView(playerView)
     }
 
+    /**
+     * Initializes ExoPlayer and attaches a listener for player events.
+     * Ensures only one instance exists.
+     */
     private fun initializePlayer() {
         if (exoPlayer == null) {
             exoPlayer = ExoPlayer.Builder(context).build()
             playerView.player = exoPlayer
 
+            // Listen for playback state changes and errors
             exoPlayer?.addListener(object : Player.Listener {
                 override fun onPlaybackStateChanged(state: Int) {
                     when (state) {
                         Player.STATE_READY -> {
-                            sendEvent("onReady")
+                            // Notify React Native that player is ready
+                            sendEvent("topReady")
+                            // If autoplay is enabled, start playback when ready
                             if (autoplay) {
                                 exoPlayer?.playWhenReady = true
                                 exoPlayer?.play()
@@ -55,62 +69,133 @@ class Media3PlayerView(context: Context) : FrameLayout(context) {
                             }
                         }
                         Player.STATE_ENDED -> {
-                            sendEvent("onEnd")
+                            // Notify React Native that playback has ended
+                            sendEvent("topEnd")
                         }
                     }
                 }
 
                 override fun onPlayerError(error: PlaybackException) {
-                    sendEvent("onError", error.message ?: "Unknown error")
+                    // Report playback errors to React Native
+                    sendEvent("topError", error.message ?: "Unknown error")
                 }
             })
         }
     }
 
-    fun setSource(uriString: String?) {
+    /**
+     * Sets the video source (with optional DRM support) and prepares the player.
+     * Called from the ViewManager when the JS "source" prop changes.
+     *
+     * @param uriString The URI of the media source to play.
+     * @param licenseUrl If provided, enables DRM playback with this license URL.
+     * @param headers Optional headers to add to DRM license requests.
+     */
+    fun setSource(
+        uriString: String?,
+        licenseUrl: String?,
+        headers: Map<String, String>?
+    ) {
+        // Return early if no valid URI is provided
         if (uriString.isNullOrEmpty()) return
         sourceUri = uriString
 
+        // Ensure the ExoPlayer instance is initialized before use
         initializePlayer()
 
-        val item = MediaItem.fromUri(Uri.parse(uriString))
-        exoPlayer?.setMediaItem(item)
+        val uri = Uri.parse(uriString)
+        // Build the MediaItem, adding DRM configuration if a license URL is given
+        val mediaItem =
+            if (!licenseUrl.isNullOrEmpty()) {
+                val drmBuilder = MediaItem.DrmConfiguration.Builder(C.WIDEVINE_UUID)
+                    .setLicenseUri(licenseUrl) // set the license URL
+                    .setMultiSession(true) // allow multiple DRM sessions if the stream requires them
+
+                headers?.let {
+                    drmBuilder.setLicenseRequestHeaders(it)
+                }
+
+                MediaItem.Builder()
+                    .setUri(uri)
+                    .setDrmConfiguration(drmBuilder.build())
+                    .build()
+            } else {
+                // No DRM: simple MediaItem from URI
+                MediaItem.fromUri(uri)
+            }
+        // Set the media item on the player and prepare for playback
+        exoPlayer?.setMediaItem(mediaItem)
         exoPlayer?.prepare()
     }
 
+    /**
+     * Sets the autoplay flag to control whether playback starts when player is ready.
+     * @param value Boolean value from JS prop
+     */
     fun setAutoplay(value: Boolean) {
         autoplay = value
     }
 
+    /**
+     * Set the play state of the player.
+     * If true, the player will start/resume playback; otherwise, pause.
+     * @param value Boolean value from JS prop
+     */
     fun setPlay(value: Boolean) {
         play = value
-        // if you want to disable autoplay with play (prop) -
-        // if (exoPlayer?.playbackState == Player.STATE_READY)
-            if (play) {
-                exoPlayer?.play()
-            } else {
-                exoPlayer?.pause()
-            }
-        // }
+        // Optionally: Disabling autoplay if play is used directly
+        // Only play or pause if player is ready
+        if (play) {
+            exoPlayer?.play()
+        } else {
+            exoPlayer?.pause()
+        }
     }
 
+    /**
+     * Sets the mute state of the player.
+     * @param value Boolean indicating if the audio should be muted
+     */
     fun setMute(value: Boolean) {
         mute = value
         exoPlayer?.volume = if (mute) 0f else 1f
     }
 
+    /**
+     * Releases the player and cleans up resources.
+     * This should be called when the view is destroyed.
+     */
     fun releasePlayer() {
         exoPlayer?.release()
         exoPlayer = null
     }
 
-    // 👇 helper function to send events to React Native
+    /**
+     * Helper function to send events and optional data payloads to React Native JS side.
+     * @param eventName Name of the event (e.g., "topReady", "topError")
+     * @param message Optional message string to pass in the event payload
+     */
     private fun sendEvent(eventName: String, message: String? = null) {
         val reactContext = context as? ReactContext ?: return
-        val event = Arguments.createMap()
-        message?.let { event.putString("message", it) }
-        reactContext
-            .getJSModule(RCTEventEmitter::class.java)
-            .receiveEvent(id, eventName, event)
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+        val payload = Arguments.createMap()
+        message?.let { payload.putString("message", it) }
+        eventDispatcher?.dispatchEvent(
+            Media3Event(surfaceId, id, eventName, payload)
+        )
+    }
+
+    /**
+     * Custom event class to bridge native events to React Native UIManager system.
+     */
+    private class Media3Event(
+        surfaceId: Int,
+        viewId: Int,
+        private val name: String,
+        private val payload: WritableMap
+    ) : Event<Media3Event>(surfaceId, viewId) {
+        override fun getEventName(): String = name
+        override fun getEventData(): WritableMap = payload
     }
 }

package/android/src/main/java/com/rnmedia3playerdemo/Media3PlayerViewManager.kt

@@ -1,61 +1,127 @@
 package com.rnmedia3playerdemo
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.Media3PlayerViewManagerDelegate
+import com.facebook.react.viewmanagers.Media3PlayerViewManagerInterface
 
 /**
- * Media3PlayerViewManager
- *
- * Exposes the native view to React Native.
- * Props: source { uri: string }, autoplay, play, mute
- * Events: onReady, onEnd, onError
+ * ViewManager for the custom Media3PlayerView.
+ * Responsible for creating the view, handling props from JS, and managing events.
  */
-class Media3PlayerViewManager(private val reactContext: ReactApplicationContext) :
-    SimpleViewManager<Media3PlayerView>() {
+@ReactModule(name = Media3PlayerViewManager.NAME)
+class Media3PlayerViewManager :
+    SimpleViewManager<Media3PlayerView>(),
+    Media3PlayerViewManagerInterface<Media3PlayerView> {
 
-    override fun getName(): String = "Media3PlayerView"
+    companion object {
+        // The name used to reference this view manager from JS
+        const val NAME = "Media3PlayerView"
+    }
+
+    // Delegate handles communication and prop mapping automatically when generated by Codegen
+    private val delegate = Media3PlayerViewManagerDelegate(this)
+
+    /**
+     * Returns the delegate instance for prop/event mapping.
+     */
+    override fun getDelegate(): ViewManagerDelegate<Media3PlayerView> = delegate
 
+    /**
+     * Returns the unique name for this ViewManager, used by React Native.
+     */
+    override fun getName(): String = NAME
+
+    /**
+     * Creates and returns a new Media3PlayerView instance for this ViewManager.
+     * @param reactContext ThemedReactContext provided by React Native
+     */
     override fun createViewInstance(reactContext: ThemedReactContext): Media3PlayerView {
         return Media3PlayerView(reactContext)
     }
 
+    /**
+     * Handles the "source" prop for Media3PlayerView.
+     * Extracts the "uri", optional DRM license URL, and headers from the ReadableMap and forwards
+     * them to the view for loading the media source and DRM configuration.
+     */
     @ReactProp(name = "source")
-    fun setSource(view: Media3PlayerView, source: ReadableMap?) {
-        val uri: String? = source?.getString("uri")
+    override fun setSource(view: Media3PlayerView, source: ReadableMap?) {
+        val uri = source?.getString("uri")
+        var licenseUrl: String? = null
+        var headers: Map<String, String>? = null
+        val drmMap = source?.getMap("drm")
+
+        if (drmMap != null) {
+            licenseUrl = drmMap.getString("licenseUrl")
+            val headersArray = drmMap.getArray("headers")
+            if (headersArray != null) {
+                val map = mutableMapOf<String, String>()
+                for (i in 0 until headersArray.size()) {
+                    val entry = headersArray.getMap(i)
+                    val key = entry?.getString("key")
+                    val value = entry?.getString("value")
+                    if (key != null && value != null) {
+                        map[key] = value
+                    }
+                }
+                headers = map
+            }
+        }
         if (!uri.isNullOrEmpty()) {
-            view.setSource(uri)
+            view.setSource(uri, licenseUrl, headers)
         }
     }
 
+    /**
+     * Sets the "autoplay" property on the Media3PlayerView.
+     * Controls whether playback should start automatically when ready.
+     */
     @ReactProp(name = "autoplay", defaultBoolean = false)
-    fun setAutoplay(view: Media3PlayerView, autoplay: Boolean) {
-        view.setAutoplay(autoplay)
+    override fun setAutoplay(view: Media3PlayerView, value: Boolean) {
+        view.setAutoplay(value)
     }
 
+    /**
+     * Sets the "play" property on the Media3PlayerView.
+     * Controls whether the player should be playing or paused.
+     */
     @ReactProp(name = "play", defaultBoolean = false)
-    fun setPlay(view: Media3PlayerView, play: Boolean) {
-        view.setPlay(play)
+    override fun setPlay(view: Media3PlayerView, value: Boolean) {
+        view.setPlay(value)
     }
 
+    /**
+     * Sets the "mute" property on the Media3PlayerView.
+     * Controls whether the audio should be muted.
+     */
     @ReactProp(name = "mute", defaultBoolean = false)
-    fun setMute(view: Media3PlayerView, mute: Boolean) {
-        view.setMute(mute)
+    override fun setMute(view: Media3PlayerView, value: Boolean) {
+        view.setMute(value)
     }
 
+    /**
+     * Called when the React Native view instance is about to be dropped/remounted.
+     * Ensures resources are released to avoid leaks.
+     */
     override fun onDropViewInstance(view: Media3PlayerView) {
         super.onDropViewInstance(view)
         view.releasePlayer()
     }
 
-    // 👇 Expose custom events to JS
+    /**
+     * Exports native direct event types to React Native for event binding in JS.
+     * Maps native event names to the registration name expected by React.
+     */
     override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
         return mutableMapOf(
-            "onReady" to mapOf("registrationName" to "onReady"),
-            "onEnd" to mapOf("registrationName" to "onEnd"),
-            "onError" to mapOf("registrationName" to "onError")
+            "topReady" to mapOf("registrationName" to "onReady"),
+            "topEnd" to mapOf("registrationName" to "onEnd"),
+            "topError" to mapOf("registrationName" to "onError")
         )
     }
 }

package/index.d.ts

@@ -1,15 +1,16 @@
-import { ViewStyle } from 'react-native';
 import * as React from 'react';
+import {ViewStyle} from 'react-native';
 
 export interface Media3PlayerProps {
   style?: ViewStyle | ViewStyle[];
-  source: { uri: string };
+  source: {uri: string};
   autoplay?: boolean;
   play?: boolean;
   mute?: boolean;
   onReady?: () => void;
   onEnd?: () => void;
-  onError?: (error: any) => void;
+  onError?: (event: {nativeEvent: {message: string}}) => void;
 }
 
-export default class Media3Player extends React.Component<Media3PlayerProps> {}
+declare const Media3Player: React.FC<Media3PlayerProps>;
+export default Media3Player;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-native-media3-player",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "React Native Media3 Player component for Android (ExoPlayer 3 integration).",
   "main": "index.js",
+  "react-native": "index.js",
   "types": "index.d.ts",
   "keywords": [
     "react-native",
@@ -31,5 +32,13 @@
     "src",
     "index.js",
     "index.d.ts"
-  ]
+  ],
+  "codegenConfig": {
+    "name": "RNMedia3PlayerSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.rnmedia3playerdemo"
+    }
+  }
 }

package/src/Media3Player.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import {requireNativeComponent, StyleSheet} from 'react-native';
-
-// Link to native view
-const NativeMedia3Player = requireNativeComponent('Media3PlayerView');
+import {StyleSheet} from 'react-native';
+// Import the native codegen-wrapped player view component
+import NativeMedia3PlayerView from './Media3PlayerNativeComponent';
 
 /**
- * Media3Player
+ * Media3Player React component
  *
  * Props:
- * - source: { uri: string } ✅ required
- * - autoplay: boolean
- * - play: boolean
- * - mute: boolean
- * - onReady: function
- * - onEnd: function
- * - onError: function
+ * - style: (optional) additional style overrides
+ * - source: { uri: string } – required, the media URI to load
+ * - autoplay: (optional, default false) – whether playback should start automatically when ready
+ * - play: (optional, default false) – whether playback should currently be running (true = play, false = pause)
+ * - mute: (optional, default false) – whether audio should be muted
+ * - onReady: callback when player is ready
+ * - onEnd: callback when playback has ended
+ * - onError: callback when an error occurs during playback or loading
  */
 export default function Media3Player({
   style,
@@ -26,14 +26,16 @@ export default function Media3Player({
   onEnd,
   onError,
 }) {
+  // Validate that source.uri is provided; warn and render nothing if missing
   if (!source || !source.uri) {
-    console.warn('Media3Player: "source" prop with a valid "uri" is required.');
+    console.warn('Media3Player: "source.uri" is required.');
     return null;
   }
 
+  // Render the native player view, passing all relevant props and composing the style
   return (
-    <NativeMedia3Player
-      style={[styles.default, style]} // ensure style is never undefined
+    <NativeMedia3PlayerView
+      style={[styles.default, style]}
       source={source}
       autoplay={autoplay}
       play={play}
@@ -45,10 +47,11 @@ export default function Media3Player({
   );
 }
 
+// Default styling applied to the player view unless overridden via 'style' prop
 const styles = StyleSheet.create({
   default: {
-    width: '100%',
-    height: 250,
-    backgroundColor: 'black',
+    width: '100%', // Occupy full width of parent
+    height: 250, // Fixed height for the player
+    backgroundColor: 'black', // Default background color
   },
 });

package/src/Media3PlayerNativeComponent.ts

@@ -0,0 +1,53 @@
+// Import the base ViewProps type from React Native to extend the native component's props
+import type {ViewProps} from 'react-native';
+// Import the DirectEventHandler type used for native-to-JS event callback typings
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
+// Import codegenNativeComponent to register the native UI component for use in React Native
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type HeaderEntry = Readonly<{
+  key: string;
+  value: string;
+}>;
+
+type DRMConfig = Readonly<{
+  licenseUrl: string;
+  headers?: ReadonlyArray<HeaderEntry>;
+}>;
+// Source defines the media source for the player component.
+// - uri: The URI of the media to be played (required).
+// - drm: (Optional) DRM configuration for protected content.
+type Source = Readonly<{
+  uri: string;
+  drm?: DRMConfig;
+}>;
+// Event type emitted when the player is ready
+type OnReadyEvent = Readonly<{}>;
+// Event type emitted when playback reaches the end
+type OnEndEvent = Readonly<{}>;
+// Event type emitted when an error occurs during playback
+type OnErrorEvent = Readonly<{
+  message: string; // Error message describing what went wrong
+}>;
+
+// Props supported by the native Media3PlayerView component
+export interface NativeProps extends ViewProps {
+  // Source URI for the media to play
+  source?: Source;
+  // Whether playback should start automatically when ready
+  autoplay?: boolean;
+  // Whether playback should currently be running (true = play, false = pause)
+  play?: boolean;
+  // Whether audio should be muted
+  mute?: boolean;
+
+  // Callback invoked when the player is ready to play
+  onReady?: DirectEventHandler<OnReadyEvent>;
+  // Callback invoked when playback reaches the end of the media
+  onEnd?: DirectEventHandler<OnEndEvent>;
+  // Callback invoked when an error occurs in playback or loading
+  onError?: DirectEventHandler<OnErrorEvent>;
+}
+
+// Create and export the code-generated native component using the props interface
+export default codegenNativeComponent<NativeProps>('Media3PlayerView');