react-native-unified-player 0.2.2 β†’ 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +167 -58
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,77 +1,186 @@
1
- # react-native-unified-player
1
+ # React Native Your Unified Player
2
2
 
3
- Unified Player
3
+ 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.
4
+
5
+ ## Features
6
+
7
+ - πŸŽ₯ Support for MP4 video playback
8
+ - 🌐 WebRTC streaming capabilities
9
+ - πŸ”„ Unified interface for both video types
10
+ - πŸ“± Native performance with Fabric architecture
11
+ - πŸŽ›οΈ Comprehensive playback controls
12
+ - πŸ“Š Event handling for player states
13
+ - πŸ” Support for different resize modes
14
+ - 🎚️ Volume and mute controls
15
+ - ⏯️ Play/pause functionality
4
16
 
5
17
  ## Installation
6
18
 
7
19
  ```bash
8
- yarn add react-native-unified-player
9
- # or
10
- npm install react-native-unified-player
20
+ yarn add react-native-your-unified-player
21
+ ```
22
+
23
+ or
24
+
25
+ ```bash
26
+ npm install react-native-your-unified-player
11
27
  ```
12
28
 
13
29
  ## Usage
14
30
 
31
+ ### Basic Usage
32
+
33
+ ```jsx
34
+ import { YourUnifiedPlayerView } from 'react-native-your-unified-player';
35
+
36
+ // For MP4 video
37
+ <YourUnifiedPlayerView
38
+ source={{
39
+ type: 'url',
40
+ uri: 'https://example.com/video.mp4'
41
+ }}
42
+ style={{ width: '100%', height: 300 }}
43
+ paused={false}
44
+ muted={false}
45
+ volume={1.0}
46
+ resizeMode="contain"
47
+ onUrlLoad={({ duration, naturalSize }) => {
48
+ console.log('Video loaded:', duration, naturalSize);
49
+ }}
50
+ onError={({ error, code }) => {
51
+ console.error('Player error:', error, code);
52
+ }}
53
+ />
54
+
55
+ // For WebRTC stream
56
+ <YourUnifiedPlayerView
57
+ source={{
58
+ type: 'webrtc',
59
+ signalingUrl: 'wss://example.com/signaling',
60
+ iceServers: [
61
+ { urls: 'stun:stun.l.google.com:19302' }
62
+ ]
63
+ }}
64
+ style={{ width: '100%', height: 300 }}
65
+ onWebRTCConnected={({ connectionInfo }) => {
66
+ console.log('WebRTC connected:', connectionInfo);
67
+ }}
68
+ onWebRTCDisconnected={({ code, reason }) => {
69
+ console.log('WebRTC disconnected:', code, reason);
70
+ }}
71
+ />
72
+ ```
73
+
74
+ ### Props
75
+
76
+ #### Common Props
77
+
78
+ | Prop | Type | Default | Description |
79
+ |------|------|---------|-------------|
80
+ | `paused` | `boolean` | `false` | Controls playback state |
81
+ | `muted` | `boolean` | `false` | Controls audio mute state |
82
+ | `volume` | `number` | `1.0` | Controls audio volume (0.0 to 1.0) |
83
+ | `resizeMode` | `'contain' \| 'cover' \| 'stretch'` | `'contain'` | Controls how the video fits in the view |
84
+
85
+ #### Source Props
86
+
87
+ For MP4 videos:
88
+ ```typescript
89
+ {
90
+ type: 'url';
91
+ uri: string;
92
+ }
93
+ ```
94
+
95
+ For WebRTC streams:
15
96
  ```typescript
16
- import { UnifiedPlayerView, UnifiedPlayer, UnifiedPlayerEventTypes, UnifiedPlayerEvents } from 'react-native-unified-player';
17
- import React, { useRef, useEffect } from 'react';
18
- import { View } from 'react-native';
19
-
20
- const MyPlayerComponent = () => {
21
- const playerRef = useRef(null);
22
-
23
- useEffect(() => {
24
- const readyListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.READY, () => {
25
- console.log('Player is ready to play');
26
- // You can call UnifiedPlayer methods here, e.g., UnifiedPlayer.play(playerRef.current.getNativeTag());
27
- });
28
-
29
- const errorListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.ERROR, (error) => {
30
- console.error('Player error:', error);
31
- });
32
-
33
- const progressListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.PROGRESS, (data) => {
34
- console.log(`Progress: ${data.currentTime}/${data.duration}`);
35
- });
36
-
37
- const completeListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.COMPLETE, () => {
38
- console.log('Playback complete');
39
- });
40
-
41
- return () => {
42
- readyListener.remove();
43
- errorListener.remove();
44
- progressListener.remove();
45
- completeListener.remove();
46
- };
47
- }, []);
48
-
49
- return (
50
- <View style={{ flex: 1 }}>
51
- <UnifiedPlayerView
52
- ref={playerRef}
53
- style={{ flex: 1 }}
54
- videoUrl="YOUR_VIDEO_URL_HERE"
55
- autoplay={false}
56
- loop={false}
57
- onReadyToPlay={() => console.log('View prop: Ready to play')}
58
- onError={(e) => console.log('View prop: Error', e)}
59
- onPlaybackComplete={() => console.log('View prop: Playback complete')}
60
- onProgress={(data) => console.log('View prop: Progress', data)}
61
- />
62
- </View>
63
- );
64
- };
65
-
66
- export default MyPlayerComponent;
97
+ {
98
+ type: 'webrtc';
99
+ signalingUrl: string;
100
+ streamConfig?: object;
101
+ iceServers?: ReadonlyArray<{ urls: string | ReadonlyArray<string> }>;
102
+ }
103
+ }
67
104
  ```
68
105
 
106
+ ### Events
107
+
108
+ #### URL Events
109
+ - `onUrlLoad`: Fired when the video is loaded
110
+ - `onUrlProgress`: Fired during video playback
111
+ - `onUrlEnd`: Fired when video playback ends
112
+ - `onUrlReadyForDisplay`: Fired when the video is ready to display
113
+
114
+ #### WebRTC Events
115
+ - `onWebRTCConnected`: Fired when WebRTC connection is established
116
+ - `onWebRTCDisconnected`: Fired when WebRTC connection is lost
117
+ - `onWebRTCStats`: Fired with WebRTC connection statistics
118
+
119
+ #### Common Events
120
+ - `onError`: Fired when an error occurs
121
+
122
+ ### Commands
123
+
124
+ The component supports the following commands:
125
+
126
+ ```typescript
127
+ // Seek to a specific time in the video
128
+ seekUrl(viewRef: React.RefObject<YourUnifiedPlayerView>, timeSeconds: number): void;
129
+
130
+ // Send a message through WebRTC data channel
131
+ sendWebRTCMessage(viewRef: React.RefObject<YourUnifiedPlayerView>, message: string): void;
132
+ ```
133
+
134
+ ## Development
135
+
136
+ ### Prerequisites
137
+
138
+ - Node.js >= 16
139
+ - Yarn >= 1.22
140
+ - React Native >= 0.79.0
141
+ - iOS: Xcode >= 14.0
142
+ - Android: Android Studio >= 2022.3
143
+
144
+ ### Setup
145
+
146
+ 1. Clone the repository
147
+ 2. Install dependencies:
148
+ ```bash
149
+ yarn install
150
+ ```
151
+ 3. Build the project:
152
+ ```bash
153
+ yarn prepare
154
+ ```
155
+
156
+ ### Running the Example App
157
+
158
+ 1. Navigate to the example directory:
159
+ ```bash
160
+ cd example
161
+ ```
162
+ 2. Install dependencies:
163
+ ```bash
164
+ yarn install
165
+ ```
166
+ 3. Run the app:
167
+ ```bash
168
+ yarn ios # for iOS
169
+ yarn android # for Android
170
+ ```
171
+
69
172
  ## Contributing
70
173
 
71
- See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
174
+ Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
72
175
 
73
176
  ## License
74
177
 
75
- MIT
178
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
179
+
180
+ ## Author
181
+
182
+ Yaşar Γ–zyurt ([@blueromans](https://github.com/blueromans))
183
+
184
+ ---
76
185
 
77
186
  Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-unified-player",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "Unified Player",
5
5
  "source": "./src/index.tsx",
6
6
  "main": "./lib/module/index.js",