https://github.com/blueromans/react-native-your-unified-player
A unified player for MP4 and WebRTC streams.
https://github.com/blueromans/react-native-your-unified-player
Last synced: 4 months ago
JSON representation
A unified player for MP4 and WebRTC streams.
- Host: GitHub
- URL: https://github.com/blueromans/react-native-your-unified-player
- Owner: blueromans
- License: mit
- Created: 2025-04-09T20:43:58.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-29T18:13:45.000Z (5 months ago)
- Last Synced: 2025-05-17T12:15:19.243Z (5 months ago)
- Language: Kotlin
- Size: 1.42 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-unified-player
Unified Player
A React Native component for playing videos via URL, built with Fabric.
## Features
- ๐ฅ Play videos from a URL source
- ๐ฑ Native performance with Fabric architecture
- ๐ Event handling for player states (Ready, Error, Progress, Complete, Stalled, Resumed)
- ๐๏ธ Control playback with methods (Play, Pause, Seek, Get Current Time, Get Duration)
- ๐ Optional autoplay and loop
## Installation
```bash
yarn add react-native-unified-player
```
or
```bash
npm install react-native-unified-player
```
## Usage
### Basic Usage
```typescript
import { UnifiedPlayerView, UnifiedPlayer, UnifiedPlayerEventTypes, UnifiedPlayerEvents } from 'react-native-unified-player';
import React, { useRef, useEffect } from 'react';
import { View } from 'react-native';
const MyPlayerComponent = () => {
const playerRef = useRef(null);
// Example of using event listeners (optional)
useEffect(() => {
const readyListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.READY, () => {
console.log('Player is ready to play');
// You can call UnifiedPlayer methods here, e.g., UnifiedPlayer.play(playerRef.current.getNativeTag());
});
const errorListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.ERROR, (error) => {
console.error('Player error:', error);
});
// Add other listeners as needed (PROGRESS, COMPLETE, STALLED, RESUMED)
return () => {
// Clean up listeners on unmount
readyListener.remove();
errorListener.remove();
// Remove other listeners
};
}, []);
return (
console.log('View prop: Ready to play')}
// onError={(e) => console.log('View prop: Error', e)}
// onPlaybackComplete={() => console.log('View prop: Playback complete')}
// onProgress={(data) => console.log('View prop: Progress', data)}
/>
);
};
export default MyPlayerComponent;
```
## Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `videoUrl` | `string` \| `string[]` | Yes | Video source URL or an array of URLs for a playlist. |
| `style` | `ViewStyle` | Yes | Apply custom styling |
| `autoplay` | `boolean` | No | Autoplay video when loaded |
| `loop` | `boolean` | No | Should the video/playlist loop when finished. **Note:** Playlist advancement and looping are handled in the JavaScript layer via the `onPlaybackComplete` callback. The native player only loops single videos based on this prop. |
| `onLoadStart` | `(event: { nativeEvent?: { index?: number } }) => void` | No | Callback when video begins loading. The `event.nativeEvent` may contain an `index` property on Android when playing a playlist. |
| `onReadyToPlay` | `() => void` | No | Callback when video is ready to play |
| `onError` | `(error: any) => void` | No | Callback when an error occurs |
| `onPlaybackComplete` | `() => void` | No | Callback when video playback finishes. Use this callback to implement playlist advancement logic in your JavaScript code. |
| `onProgress` | `(data: { currentTime: number; duration: number }) => void` | No | Callback for playback progress |
## Events
Events can be listened to using `UnifiedPlayerEvents.addListener(eventType, listener)`. The available event types are defined in `UnifiedPlayerEventTypes`.
- `UnifiedPlayerEventTypes.READY` ('onReadyToPlay'): Fired when the player is ready to play.
- `UnifiedPlayerEventTypes.ERROR` ('onError'): Fired when an error occurs.
- `UnifiedPlayerEventTypes.PROGRESS` ('onProgress'): Fired during playback with current time and duration (`{ currentTime: number; duration: number }`).
- `UnifiedPlayerEventTypes.COMPLETE` ('onPlaybackComplete'): Fired when video playback finishes.
- `UnifiedPlayerEventTypes.STALLED` ('onPlaybackStalled'): Fired when playback stalls.
- `UnifiedPlayerEventTypes.RESUMED` ('onPlaybackResumed'): Fired when playback resumes after stalling.
## Methods
Control playback using the `UnifiedPlayer` object and the native tag of the `UnifiedPlayerView` instance (obtained via `ref.current.getNativeTag()`).
- `UnifiedPlayer.play(viewTag: number)`: Starts video playback.
- `UnifiedPlayer.pause(viewTag: number)`: Pauses video playback.
- `UnifiedPlayer.seekTo(viewTag: number, time: number)`: Seeks to a specific time in seconds.
- `UnifiedPlayer.getCurrentTime(viewTag: number): Promise`: Gets the current playback time in seconds.
- `UnifiedPlayer.getDuration(viewTag: number): Promise`: Gets the duration of the video in seconds.
## Development
### Prerequisites
- Node.js >= 16
- Yarn >= 1.22
- React Native >= 0.79.0
- iOS: Xcode >= 14.0
- Android: Android Studio >= 2022.3
### Setup
1. Clone the repository
2. Install dependencies:
```bash
yarn install
```
3. Build the project:
```bash
yarn prepare
```
### Running the Example App
1. Navigate to the example directory:
```bash
cd example
```
2. Install dependencies:
```bash
yarn install
```
3. Run the app:
```bash
yarn ios # for iOS
yarn android # for Android
```
## Contributing
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Yaลar รzyurt ([@blueromans](https://github.com/blueromans))
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)