Skip to content

Commit d941407

Browse files
LunatiqueCoderLunatiqueCoder
authored
Update README.md (#109)
1 parent 06a999a commit d941407

File tree

1 file changed

+34
-14
lines changed

1 file changed

+34
-14
lines changed

‎packages/media-console/README.md‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@
66
[![GitHub top language][9]][10]
77
[![Maintenance][11]][12]
88
[![npm][13]][14]
9-
109
<!-- [![ci][1]][2] -->
1110

1211
VideoPlayer for the React Native `<Video/>` component at [react-native-video][15].
1312

1413
[![demogif][16]][17]
1514

15+
### ⚠️ **Note:**
16+
>
17+
> We're only supporting the beta version of `react-native-video`. Since it looks stable enough except for the subtitles (which might still be a WIP at the time of writing), we're already using it in production at http://englishdiscoveries.net/
18+
1619
## ⭐️ Features
1720

1821
This package contains a simple set of GUI controls that work with the [react-native-video][15] `<Video>` component.
19-
2022
- [x] `react-native-reanimated`
21-
- [x] tvOS support (partially, PRs are welcome)
2223
- [x] Back Button
2324
- [x] Volume bar
2425
- [x] Fullscreen button
@@ -29,7 +30,6 @@ This package contains a simple set of GUI controls that work with the [react-nat
2930
- [x] Error handling
3031
- [x] Timer
3132
- [ ] Rate button
32-
- [ ] Caption button
3333

3434
By default the `<VideoPlayer>` accepts a navigator property from React's built-in `<Navigator>` which pops the current
3535
scene off the stack when tapped. Alternatively you can provide your own onBack prop to the component to override this
@@ -65,21 +65,21 @@ the current scene off the stack. This can be overridden if desired, see the [API
6565
```javascript
6666
// At the top where our imports are...
6767
import VideoPlayer from 'react-native-media-console';
68-
// 👇 if you use react-native-reanimated
68+
// 👇 if you use react-native-reanimated
6969
import {useAnimations} from '@react-native-media-console/reanimated';
7070

7171
// in the component's render() function
7272
<VideoPlayer
73-
useAnimations={useAnimations}
74-
source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
75-
navigator={props.navigator}
73+
useAnimations={useAnimations}
74+
source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
75+
navigator={props.navigator}
7676
/>;
7777
```
7878

7979
To play a local file, use require syntax like so:
8080

8181
```js
82-
<VideoPlayer source={require('path/to/file')} />
82+
<VideoPlayer source={require('path/to/file')}/>
8383
```
8484

8585
## 🧰 API
@@ -94,10 +94,10 @@ the `<VideoPlayer />` and it will pass them through to the `<Video />` component
9494
In addition, the `<VideoPlayer />` also takes these props:
9595

9696
| Prop | Type | Default | Description |
97-
| ---------------------------- | --------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
97+
|------------------------------|-----------------------------------------------|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
9898
| alwaysShowControls | Boolean | false | Always show controls. |
9999
| controlAnimationTiming | Integer | 500 | The amount of time (in milliseconds) to animate the controls in and out. |
100-
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
100+
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
101101
| doubleTapTime | Integer | 130 | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired. |
102102
| isFullscreen | Boolean | false | The VideoPlayer fullscreen state |
103103
| navigator | Navigator | null | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function |
@@ -120,7 +120,7 @@ In addition, the `<VideoPlayer />` also takes these props:
120120
These are various events that you can hook into and fire functions on in the component:
121121

122122
| Callback | Description |
123-
| ----------------- | ------------------------------------------------------------------------------- |
123+
|-------------------|---------------------------------------------------------------------------------|
124124
| onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed |
125125
| onExitFullscreen | Fired when the video exits fullscreen after the fullscreen button is pressed |
126126
| onHideControls | Fired when the controls disappear |
@@ -137,7 +137,7 @@ These are the various controls that you can turn on/off as needed. All of these
137137
disable any controls
138138

139139
| Control | Description |
140-
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
140+
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|
141141
| disableFullscreen | Hide the fullscreen button |
142142
| disablePlayPause | Hide the play/pause toggle and the rewind/forward buttons |
143143
| disableSeekButtons | Hide the rewind/forward buttons (but not play/pause) |
@@ -164,27 +164,47 @@ disable any controls
164164
## 🏆 Sponsors
165165

166166
| | |
167-
| ------------------------- | ------------------------------ |
167+
|---------------------------|--------------------------------|
168168
| [![jetbrains100][18]][19] | [![englishdislogo100][20]][21] |
169169

170170
[1]: https://github.com/LunatiqueCoder/react-native-media-console/workflows/ci/badge.svg
171+
171172
[2]: https://github.com/LunatiqueCoder/react-native-media-console/actions
173+
172174
[3]: https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20tvOS-brightgreen.svg?style=flat-square&colorB=191A17
175+
173176
[4]: https://github.com/react-native-tvos/react-native-tvos
177+
174178
[5]: https://img.shields.io/github/issues/LunatiqueCoder/react-native-media-console
179+
175180
[6]: https://github.com/LunatiqueCoder/react-native-media-console/issues
181+
176182
[7]: https://img.shields.io/github/license/LunatiqueCoder/react-native-media-console
183+
177184
[8]: https://github.com/LunatiqueCoder/react-native-media-console/blob/master/LICENSE
185+
178186
[9]: https://img.shields.io/github/languages/top/LunatiqueCoder/react-native-media-console
187+
179188
[10]: https://github.com/LunatiqueCoder/react-native-media-console/search?l=typescript
189+
180190
[11]: https://img.shields.io/maintenance/yes/2025
191+
181192
[12]: https://github.com/LunatiqueCoder/react-native-media-console/graphs/contributors
193+
182194
[13]: https://img.shields.io/npm/v/react-native-media-console
195+
183196
[14]: https://www.npmjs.com/package/react-native-media-console
197+
184198
[15]: https://github.com/react-native-video/react-native-video
199+
185200
[16]: https://user-images.githubusercontent.com/55203625/159137837-4e34a8be-1cbb-48ae-9d67-99ce4922e660.gif
201+
186202
[17]: https://user-images.githubusercontent.com/55203625/159138065-cf3554b6-3f8b-4cab-bf94-0f3fc0b57333.gif
203+
187204
[18]: https://user-images.githubusercontent.com/55203625/213786907-b95dfb4b-08bf-4449-a055-72edf401da23.png
205+
188206
[19]: https://www.jetbrains.com/
207+
189208
[20]: https://user-images.githubusercontent.com/55203625/213786736-1d0226de-f810-4ece-968f-08c81c769948.png
209+
190210
[21]: https://englishdiscoveries.page.link/fJc4

0 commit comments

Comments
 (0)