react-native-unified-player 0.2.1 → 0.2.3

package/README.md

@@ -1,94 +1,185 @@
-# react-native-unified-player
+# React Native Your Unified Player
 
-Unified Player with VLC integration for enhanced codec and streaming protocol support.
+A powerful React Native component that provides a unified interface for playing both MP4 videos and WebRTC streams. Built with Fabric and the new React Native architecture.
+
+## Features
+
+- 🎥 Support for MP4 video playback
+- 🌐 WebRTC streaming capabilities
+- 🔄 Unified interface for both video types
+- 📱 Native performance with Fabric architecture
+- 🎛️ Comprehensive playback controls
+- 📊 Event handling for player states
+- 🔍 Support for different resize modes
+- 🎚️ Volume and mute controls
+- ⏯️ Play/pause functionality
 
 ## Installation
 
-```sh
-npm install react-native-unified-player
+```bash
+yarn add react-native-your-unified-player
 ```
 
-### iOS Setup for VLC
+or
 
-The iOS version of this player uses MobileVLCKit for advanced video playback capabilities. It supports a wide range of formats including RTSP, RTMP, HLS, and other protocols supported by VLC.
+```bash
+npm install react-native-your-unified-player
+```
 
-The VLC dependencies are automatically installed via CocoaPods through the podspec file. After installing the package:
+## Usage
 
-1. Navigate to the iOS folder of your project:
-   ```sh
-   cd ios
-   ```
+### Basic Usage
+
+```jsx
+import { YourUnifiedPlayerView } from 'react-native-your-unified-player';
+
+// For MP4 video
+<YourUnifiedPlayerView
+  source={{
+    type: 'url',
+    uri: 'https://example.com/video.mp4'
+  }}
+  style={{ width: '100%', height: 300 }}
+  paused={false}
+  muted={false}
+  volume={1.0}
+  resizeMode="contain"
+  onUrlLoad={({ duration, naturalSize }) => {
+    console.log('Video loaded:', duration, naturalSize);
+  }}
+  onError={({ error, code }) => {
+    console.error('Player error:', error, code);
+  }}
+/>
 
-2. Install pods:
-   ```sh
-   pod install
-   ```
+// For WebRTC stream
+<YourUnifiedPlayerView
+  source={{
+    type: 'webrtc',
+    signalingUrl: 'wss://example.com/signaling',
+    iceServers: [
+      { urls: 'stun:stun.l.google.com:19302' }
+    ]
+  }}
+  style={{ width: '100%', height: 300 }}
+  onWebRTCConnected={({ connectionInfo }) => {
+    console.log('WebRTC connected:', connectionInfo);
+  }}
+  onWebRTCDisconnected={({ code, reason }) => {
+    console.log('WebRTC disconnected:', code, reason);
+  }}
+/>
+```
 
-3. VLC requires "Bitcode" to be disabled in your Xcode project. This is handled automatically in the podspec file, but if you experience issues, check that your project's Build Settings have "Enable Bitcode" set to "No".
+### Props
 
-4. Starting from iOS 14, you need to provide a message for the `NSLocalNetworkUsageDescription` key in your `Info.plist` if you're using external streaming sources. Add something like:
-   ```xml
-   <key>NSLocalNetworkUsageDescription</key>
-   <string>This app requires access to the local network to stream media content</string>
-   ```
+#### Common Props
 
-### Troubleshooting VLC Integration
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `paused` | `boolean` | `false` | Controls playback state |
+| `muted` | `boolean` | `false` | Controls audio mute state |
+| `volume` | `number` | `1.0` | Controls audio volume (0.0 to 1.0) |
+| `resizeMode` | `'contain' \| 'cover' \| 'stretch'` | `'contain'` | Controls how the video fits in the view |
 
-If you encounter build issues with VLC:
+#### Source Props
 
-1. **Compilation Errors**: If you see errors about missing properties or methods, it might be because the VLC API has changed. This package uses MobileVLCKit 3.3.17, which is compatible with the current implementation.
+For MP4 videos:
+```typescript
+{
+  type: 'url';
+  uri: string;
+}
+```
 
-2. **Playback Issues on iOS 14+**: VLC has known issues with certain RTSP streams on iOS 14. If you experience a black screen or playback failures specifically on newer iOS devices, try the following:
-   - Add additional media options in your code:
-     ```js
-     // Example: Adding network caching for better buffering
-     <UnifiedPlayerView 
-       videoUrl="rtsp://example.com/stream"
-       mediaOptions={["--network-caching=1500", "--live-caching=1500"]}
-     />
-     ```
+For WebRTC streams:
+```typescript
+{
+  type: 'webrtc';
+  signalingUrl: string;
+  streamConfig?: object;
+  iceServers?: ReadonlyArray<{ urls: string | ReadonlyArray<string> }>;
+}
+}
+```
 
-3. **Link Required Frameworks**: Make sure you have all required frameworks linked in your Xcode project:
-   - AudioToolbox.framework
-   - AVFoundation.framework
-   - CoreMedia.framework
-   - CoreVideo.framework
-   - libc++.tbd
-   - libiconv.tbd
-   - libz.tbd
+### Events
 
-## Usage
+#### URL Events
+- `onUrlLoad`: Fired when the video is loaded
+- `onUrlProgress`: Fired during video playback
+- `onUrlEnd`: Fired when video playback ends
+- `onUrlReadyForDisplay`: Fired when the video is ready to display
 
-```js
-import { UnifiedPlayerView } from "react-native-unified-player";
+#### WebRTC Events
+- `onWebRTCConnected`: Fired when WebRTC connection is established
+- `onWebRTCDisconnected`: Fired when WebRTC connection is lost
+- `onWebRTCStats`: Fired with WebRTC connection statistics
 
-// ...
+#### Common Events
+- `onError`: Fired when an error occurs
 
-<UnifiedPlayerView 
-  videoUrl="https://example.com/video.mp4" 
-  autoplay={true}
-  loop={false}
-  authToken="optional-auth-token"
-/>
+### Commands
+
+The component supports the following commands:
+
+```typescript
+// Seek to a specific time in the video
+seekUrl(viewRef: React.RefObject<YourUnifiedPlayerView>, timeSeconds: number): void;
+
+// Send a message through WebRTC data channel
+sendWebRTCMessage(viewRef: React.RefObject<YourUnifiedPlayerView>, message: string): void;
 ```
 
-### Supported Formats
+## 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
+   ```
 
-With VLC integration, the player supports a wide range of formats:
+### Running the Example App
 
-- Network streams: RTSP, RTP, RTMP, HLS, MMS
-- Container formats: MP4, MKV, AVI, FLV, MOV, TS, and many more
-- Codec support: H.264, H.265, VP8, VP9, and many others
-- Audio: Multiple audio tracks support including 5.1
-- Subtitles: Support for various subtitle formats including SSA
+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
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+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
 
-MIT
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Author
+
+Yaşar Özyurt ([@blueromans](https://github.com/blueromans))
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unified-player",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Unified Player",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",