react-native-unified-player 0.2.2 โ†’ 0.2.4

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 +112 -20
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -2,16 +2,32 @@
2
2
 
3
3
  Unified Player
4
4
 
5
+ A React Native component for playing videos via URL, built with Fabric.
6
+
7
+ ## Features
8
+
9
+ - ๐ŸŽฅ Play videos from a URL source
10
+ - ๐Ÿ“ฑ Native performance with Fabric architecture
11
+ - ๐Ÿ“Š Event handling for player states (Ready, Error, Progress, Complete, Stalled, Resumed)
12
+ - ๐ŸŽ›๏ธ Control playback with methods (Play, Pause, Seek, Get Current Time, Get Duration)
13
+ - ๐Ÿ”„ Optional autoplay and loop
14
+
5
15
  ## Installation
6
16
 
7
17
  ```bash
8
18
  yarn add react-native-unified-player
9
- # or
19
+ ```
20
+
21
+ or
22
+
23
+ ```bash
10
24
  npm install react-native-unified-player
11
25
  ```
12
26
 
13
27
  ## Usage
14
28
 
29
+ ### Basic Usage
30
+
15
31
  ```typescript
16
32
  import { UnifiedPlayerView, UnifiedPlayer, UnifiedPlayerEventTypes, UnifiedPlayerEvents } from 'react-native-unified-player';
17
33
  import React, { useRef, useEffect } from 'react';
@@ -20,6 +36,7 @@ import { View } from 'react-native';
20
36
  const MyPlayerComponent = () => {
21
37
  const playerRef = useRef(null);
22
38
 
39
+ // Example of using event listeners (optional)
23
40
  useEffect(() => {
24
41
  const readyListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.READY, () => {
25
42
  console.log('Player is ready to play');
@@ -30,19 +47,13 @@ const MyPlayerComponent = () => {
30
47
  console.error('Player error:', error);
31
48
  });
32
49
 
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
- });
50
+ // Add other listeners as needed (PROGRESS, COMPLETE, STALLED, RESUMED)
40
51
 
41
52
  return () => {
53
+ // Clean up listeners on unmount
42
54
  readyListener.remove();
43
55
  errorListener.remove();
44
- progressListener.remove();
45
- completeListener.remove();
56
+ // Remove other listeners
46
57
  };
47
58
  }, []);
48
59
 
@@ -50,14 +61,16 @@ const MyPlayerComponent = () => {
50
61
  <View style={{ flex: 1 }}>
51
62
  <UnifiedPlayerView
52
63
  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)}
64
+ style={{ width: '100%', height: 300 }} // Example style
65
+ videoUrl="YOUR_VIDEO_URL_HERE" // Replace with your video URL
66
+ autoplay={false} // Optional: set to true to autoplay
67
+ loop={false} // Optional: set to true to loop
68
+ // authToken="YOUR_AUTH_TOKEN" // Optional: for protected streams
69
+ // You can also use direct view props instead of or in addition to event listeners:
70
+ // onReadyToPlay={() => console.log('View prop: Ready to play')}
71
+ // onError={(e) => console.log('View prop: Error', e)}
72
+ // onPlaybackComplete={() => console.log('View prop: Playback complete')}
73
+ // onProgress={(data) => console.log('View prop: Progress', data)}
61
74
  />
62
75
  </View>
63
76
  );
@@ -66,12 +79,91 @@ const MyPlayerComponent = () => {
66
79
  export default MyPlayerComponent;
67
80
  ```
68
81
 
82
+ ## Props
83
+
84
+ | Prop | Type | Required | Description |
85
+ |------|------|----------|-------------|
86
+ | `videoUrl` | `string` | Yes | Video source URL |
87
+ | `style` | `ViewStyle` | Yes | Apply custom styling |
88
+ | `autoplay` | `boolean` | No | Autoplay video when loaded |
89
+ | `loop` | `boolean` | No | Should video loop when finished |
90
+ | `authToken` | `string` | No | Optional auth token for protected streams |
91
+ | `onReadyToPlay` | `() => void` | No | Callback when video is ready to play |
92
+ | `onError` | `(error: any) => void` | No | Callback when an error occurs |
93
+ | `onPlaybackComplete` | `() => void` | No | Callback when video playback finishes |
94
+ | `onProgress` | `(data: { currentTime: number; duration: number }) => void` | No | Callback for playback progress |
95
+
96
+ ## Events
97
+
98
+ Events can be listened to using `UnifiedPlayerEvents.addListener(eventType, listener)`. The available event types are defined in `UnifiedPlayerEventTypes`.
99
+
100
+ - `UnifiedPlayerEventTypes.READY` ('onReadyToPlay'): Fired when the player is ready to play.
101
+ - `UnifiedPlayerEventTypes.ERROR` ('onError'): Fired when an error occurs.
102
+ - `UnifiedPlayerEventTypes.PROGRESS` ('onProgress'): Fired during playback with current time and duration (`{ currentTime: number; duration: number }`).
103
+ - `UnifiedPlayerEventTypes.COMPLETE` ('onPlaybackComplete'): Fired when video playback finishes.
104
+ - `UnifiedPlayerEventTypes.STALLED` ('onPlaybackStalled'): Fired when playback stalls.
105
+ - `UnifiedPlayerEventTypes.RESUMED` ('onPlaybackResumed'): Fired when playback resumes after stalling.
106
+
107
+ ## Methods
108
+
109
+ Control playback using the `UnifiedPlayer` object and the native tag of the `UnifiedPlayerView` instance (obtained via `ref.current.getNativeTag()`).
110
+
111
+ - `UnifiedPlayer.play(viewTag: number)`: Starts video playback.
112
+ - `UnifiedPlayer.pause(viewTag: number)`: Pauses video playback.
113
+ - `UnifiedPlayer.seekTo(viewTag: number, time: number)`: Seeks to a specific time in seconds.
114
+ - `UnifiedPlayer.getCurrentTime(viewTag: number): Promise<number>`: Gets the current playback time in seconds.
115
+ - `UnifiedPlayer.getDuration(viewTag: number): Promise<number>`: Gets the duration of the video in seconds.
116
+
117
+ ## Development
118
+
119
+ ### Prerequisites
120
+
121
+ - Node.js >= 16
122
+ - Yarn >= 1.22
123
+ - React Native >= 0.79.0
124
+ - iOS: Xcode >= 14.0
125
+ - Android: Android Studio >= 2022.3
126
+
127
+ ### Setup
128
+
129
+ 1. Clone the repository
130
+ 2. Install dependencies:
131
+ ```bash
132
+ yarn install
133
+ ```
134
+ 3. Build the project:
135
+ ```bash
136
+ yarn prepare
137
+ ```
138
+
139
+ ### Running the Example App
140
+
141
+ 1. Navigate to the example directory:
142
+ ```bash
143
+ cd example
144
+ ```
145
+ 2. Install dependencies:
146
+ ```bash
147
+ yarn install
148
+ ```
149
+ 3. Run the app:
150
+ ```bash
151
+ yarn ios # for iOS
152
+ yarn android # for Android
153
+ ```
154
+
69
155
  ## Contributing
70
156
 
71
- See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
157
+ 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
158
 
73
159
  ## License
74
160
 
75
- MIT
161
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
162
+
163
+ ## Author
164
+
165
+ YaลŸar ร–zyurt ([@blueromans](https://github.com/blueromans))
166
+
167
+ ---
76
168
 
77
169
  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.4",
4
4
  "description": "Unified Player",
5
5
  "source": "./src/index.tsx",
6
6
  "main": "./lib/module/index.js",