react-native-media3-player 0.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mohammad Rehan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# 📽️ Media3Player
+
+> A lightweight, high-performance React Native video player powered by Android Media3 (ExoPlayer). Fully customizable and supports autoplay, mute, and event handling. This is **Android** only package.
+
+---
+
+## Table of Contents
+- [Installation](#installation)  
+- [Usage](#usage)  
+- [Props](#props)  
+- [Events](#events)  
+- [TypeScript Support](#typescript-support)  
+- [Examples](#examples)  
+- [Screenshots](#screenshots)  
+- [Contributing](#contributing)  
+- [License](#license)
+
+---
+
+## 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** 
+
+---
+
+## Usage
+
+```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://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)}
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## 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. |
+
+---
+
+## 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. |
+
+---
+
+## TypeScript Support
+
+This library includes TypeScript definitions. Example:
+
+```ts
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import Media3Player, { Media3PlayerProps } from 'react-native-media3-player';
+
+const props: Media3PlayerProps = {
+  source: { uri: 'https://example.com/video.mp4' },
+  autoplay: true,
+  play: true,
+  mute: false,
+  style: { width: '100%', height: 250 },
+  onReady: () => console.log('Ready'),
+  onEnd: () => console.log('End'),
+  onError: (err) => console.log(err.message),
+};
+```
+
+---
+
+## Examples
+
+**Basic Player:**
+```jsx
+<Media3Player source={{ uri: 'https://example.com/video.mp4' }} />
+```
+
+**Autoplay & Mute:**
+```jsx
+<Media3Player
+  source={{ uri: 'https://example.com/video.mp4' }}
+  autoplay
+  mute
+/>
+```
+
+**Event Handling:**
+```jsx
+<Media3Player
+  source={{ uri: 'https://example.com/video.mp4' }}
+  onReady={() => console.log('Ready')}
+  onEnd={() => console.log('End')}
+  onError={(err) => console.error(err.message)}
+/>
+```
+
+---
+
+## Contributing
+
+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  
+
+> Please follow [Semantic Versioning](https://semver.org/) for commits.
+
+---
+
+## License
+
+MIT © [Mohammad Rehan](https://github.com/mdRehan991)
+

package/android/build.gradle

@@ -0,0 +1,37 @@
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+
+android {
+    namespace "com.rnmedia3playerdemo"
+    compileSdkVersion 35
+
+    defaultConfig {
+        minSdkVersion 24
+        targetSdkVersion 34
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+}
+
+dependencies {
+    // Required for React Native bridge
+    implementation "com.facebook.react:react-native:+"
+
+    // Kotlin standard lib
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.0"
+
+    // ✅ 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"
+
+    // Useful Android extensions
+    implementation "androidx.core:core-ktx:1.13.1"
+}

package/android/gradle.properties

@@ -0,0 +1,39 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true

package/android/settings.gradle

@@ -0,0 +1,2 @@
+rootProject.name = 'react-native-media3-player'
+include ':react-native-media3-player'

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.rnmedia3playerdemo">
+</manifest>

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

@@ -0,0 +1,14 @@
+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
+
+class Media3Package : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(Media3PlayerViewManager(reactContext))
+    }
+}

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

@@ -0,0 +1,116 @@
+package com.rnmedia3playerdemo
+
+import android.content.Context
+import android.net.Uri
+import android.util.Log
+import android.widget.FrameLayout
+import androidx.media3.common.MediaItem
+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
+
+/**
+ * Media3PlayerView
+ *
+ * Handles ExoPlayer playback and exposes events to React Native:
+ * - onReady
+ * - onEnd
+ * - onError
+ */
+class Media3PlayerView(context: Context) : FrameLayout(context) {
+    private var exoPlayer: ExoPlayer? = null
+    private var playerView: PlayerView
+    private var sourceUri: String? = null
+    private var autoplay: Boolean = false
+    private var play: Boolean = false
+    private var mute: Boolean = false
+
+    init {
+        playerView = PlayerView(context)
+        playerView.layoutParams = LayoutParams(
+            LayoutParams.MATCH_PARENT,
+            LayoutParams.MATCH_PARENT
+        )
+        addView(playerView)
+    }
+
+    private fun initializePlayer() {
+        if (exoPlayer == null) {
+            exoPlayer = ExoPlayer.Builder(context).build()
+            playerView.player = exoPlayer
+
+            exoPlayer?.addListener(object : Player.Listener {
+                override fun onPlaybackStateChanged(state: Int) {
+                    when (state) {
+                        Player.STATE_READY -> {
+                            sendEvent("onReady")
+                            if (autoplay) {
+                                exoPlayer?.playWhenReady = true
+                                exoPlayer?.play()
+                                Log.d("Media3Player", "Autoplay triggered when player became ready")
+                            }
+                        }
+                        Player.STATE_ENDED -> {
+                            sendEvent("onEnd")
+                        }
+                    }
+                }
+
+                override fun onPlayerError(error: PlaybackException) {
+                    sendEvent("onError", error.message ?: "Unknown error")
+                }
+            })
+        }
+    }
+
+    fun setSource(uriString: String?) {
+        if (uriString.isNullOrEmpty()) return
+        sourceUri = uriString
+
+        initializePlayer()
+
+        val item = MediaItem.fromUri(Uri.parse(uriString))
+        exoPlayer?.setMediaItem(item)
+        exoPlayer?.prepare()
+    }
+
+    fun setAutoplay(value: Boolean) {
+        autoplay = value
+    }
+
+    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()
+            }
+        // }
+    }
+
+    fun setMute(value: Boolean) {
+        mute = value
+        exoPlayer?.volume = if (mute) 0f else 1f
+    }
+
+    fun releasePlayer() {
+        exoPlayer?.release()
+        exoPlayer = null
+    }
+
+    // 👇 helper function to send events to React Native
+    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)
+    }
+}

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

@@ -0,0 +1,61 @@
+package com.rnmedia3playerdemo
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+/**
+ * Media3PlayerViewManager
+ *
+ * Exposes the native view to React Native.
+ * Props: source { uri: string }, autoplay, play, mute
+ * Events: onReady, onEnd, onError
+ */
+class Media3PlayerViewManager(private val reactContext: ReactApplicationContext) :
+    SimpleViewManager<Media3PlayerView>() {
+
+    override fun getName(): String = "Media3PlayerView"
+
+    override fun createViewInstance(reactContext: ThemedReactContext): Media3PlayerView {
+        return Media3PlayerView(reactContext)
+    }
+
+    @ReactProp(name = "source")
+    fun setSource(view: Media3PlayerView, source: ReadableMap?) {
+        val uri: String? = source?.getString("uri")
+        if (!uri.isNullOrEmpty()) {
+            view.setSource(uri)
+        }
+    }
+
+    @ReactProp(name = "autoplay", defaultBoolean = false)
+    fun setAutoplay(view: Media3PlayerView, autoplay: Boolean) {
+        view.setAutoplay(autoplay)
+    }
+
+    @ReactProp(name = "play", defaultBoolean = false)
+    fun setPlay(view: Media3PlayerView, play: Boolean) {
+        view.setPlay(play)
+    }
+
+    @ReactProp(name = "mute", defaultBoolean = false)
+    fun setMute(view: Media3PlayerView, mute: Boolean) {
+        view.setMute(mute)
+    }
+
+    override fun onDropViewInstance(view: Media3PlayerView) {
+        super.onDropViewInstance(view)
+        view.releasePlayer()
+    }
+
+    // 👇 Expose custom events to JS
+    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")
+        )
+    }
+}

package/android/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

package/android/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">RNMedia3PlayerDemo</string>
+</resources>

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,9 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+
+</resources>

package/index.d.ts

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

package/index.js

@@ -0,0 +1,3 @@
+import Media3Player from './src/Media3Player';
+
+export default Media3Player;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-native-media3-player",
+  "version": "0.0.1",
+  "description": "React Native Media3 Player component for Android (ExoPlayer 3 integration).",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "keywords": [
+    "react-native",
+    "android",
+    "video",
+    "player",
+    "media3",
+    "exoplayer"
+  ],
+  "author": "Mohammad Rehan <mohdrehan29nov@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mdRehan991/react-native-media3-player.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mdRehan991/react-native-media3-player/issues"
+  },
+  "homepage": "https://github.com/mdRehan991/react-native-media3-player#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "files": [
+    "android",
+    "src",
+    "index.js",
+    "index.d.ts"
+  ]
+}

package/src/Media3Player.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {requireNativeComponent, StyleSheet} from 'react-native';
+
+// Link to native view
+const NativeMedia3Player = requireNativeComponent('Media3PlayerView');
+
+/**
+ * Media3Player
+ *
+ * Props:
+ * - source: { uri: string } ✅ required
+ * - autoplay: boolean
+ * - play: boolean
+ * - mute: boolean
+ * - onReady: function
+ * - onEnd: function
+ * - onError: function
+ */
+export default function Media3Player({
+  style,
+  source,
+  autoplay = false,
+  play = false,
+  mute = false,
+  onReady,
+  onEnd,
+  onError,
+}) {
+  if (!source || !source.uri) {
+    console.warn('Media3Player: "source" prop with a valid "uri" is required.');
+    return null;
+  }
+
+  return (
+    <NativeMedia3Player
+      style={[styles.default, style]} // ensure style is never undefined
+      source={source}
+      autoplay={autoplay}
+      play={play}
+      mute={mute}
+      onReady={onReady}
+      onEnd={onEnd}
+      onError={onError}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    width: '100%',
+    height: 250,
+    backgroundColor: 'black',
+  },
+});