Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@LunatiqueCoder
LunatiqueCoder authored May 31, 2024
1 parent 06a999a commit 3deda8f
Showing 1 changed file with 34 additions and 14 deletions.
48 changes: 34 additions & 14 deletions packages/media-console/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,20 @@
[![GitHub top language][9]][10]
[![Maintenance][11]][12]
[![npm][13]][14]

<!-- [![ci][1]][2] -->

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

[![demogif][16]][17]

### ⚠️ **Note:**
>
> 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/
## ⭐️ Features

This package contains a simple set of GUI controls that work with the [react-native-video][15] `<Video>` component.

- [x] `react-native-reanimated`
- [x] tvOS support (partially, PRs are welcome)
- [x] Back Button
- [x] Volume bar
- [x] Fullscreen button
Expand All @@ -29,7 +30,6 @@ This package contains a simple set of GUI controls that work with the [react-nat
- [x] Error handling
- [x] Timer
- [ ] Rate button
- [ ] Caption button

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

// in the component's render() function
<VideoPlayer
useAnimations={useAnimations}
source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
navigator={props.navigator}
useAnimations={useAnimations}
source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
navigator={props.navigator}
/>;
```

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

```js
<VideoPlayer source={require('path/to/file')} />
<VideoPlayer source={require('path/to/file')}/>
```

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

| Prop | Type | Default | Description |
| ---------------------------- | --------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
|------------------------------|-----------------------------------------------|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| alwaysShowControls | Boolean | false | Always show controls. |
| controlAnimationTiming | Integer | 500 | The amount of time (in milliseconds) to animate the controls in and out. |
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
| 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. |
| isFullscreen | Boolean | false | The VideoPlayer fullscreen state |
| 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 |
Expand All @@ -120,7 +120,7 @@ In addition, the `<VideoPlayer />` also takes these props:
These are various events that you can hook into and fire functions on in the component:

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

| Control | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|
| disableFullscreen | Hide the fullscreen button |
| disablePlayPause | Hide the play/pause toggle and the rewind/forward buttons |
| disableSeekButtons | Hide the rewind/forward buttons (but not play/pause) |
Expand All @@ -164,27 +164,47 @@ disable any controls
## 🏆 Sponsors

| | |
| ------------------------- | ------------------------------ |
|---------------------------|--------------------------------|
| [![jetbrains100][18]][19] | [![englishdislogo100][20]][21] |

[1]: https://github.com/LunatiqueCoder/react-native-media-console/workflows/ci/badge.svg

[2]: https://github.com/LunatiqueCoder/react-native-media-console/actions

[3]: https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20tvOS-brightgreen.svg?style=flat-square&colorB=191A17

[4]: https://github.com/react-native-tvos/react-native-tvos

[5]: https://img.shields.io/github/issues/LunatiqueCoder/react-native-media-console

[6]: https://github.com/LunatiqueCoder/react-native-media-console/issues

[7]: https://img.shields.io/github/license/LunatiqueCoder/react-native-media-console

[8]: https://github.com/LunatiqueCoder/react-native-media-console/blob/master/LICENSE

[9]: https://img.shields.io/github/languages/top/LunatiqueCoder/react-native-media-console

[10]: https://github.com/LunatiqueCoder/react-native-media-console/search?l=typescript

[11]: https://img.shields.io/maintenance/yes/2025

[12]: https://github.com/LunatiqueCoder/react-native-media-console/graphs/contributors

[13]: https://img.shields.io/npm/v/react-native-media-console

[14]: https://www.npmjs.com/package/react-native-media-console

[15]: https://github.com/react-native-video/react-native-video

[16]: https://user-images.githubusercontent.com/55203625/159137837-4e34a8be-1cbb-48ae-9d67-99ce4922e660.gif

[17]: https://user-images.githubusercontent.com/55203625/159138065-cf3554b6-3f8b-4cab-bf94-0f3fc0b57333.gif

[18]: https://user-images.githubusercontent.com/55203625/213786907-b95dfb4b-08bf-4449-a055-72edf401da23.png

[19]: https://www.jetbrains.com/

[20]: https://user-images.githubusercontent.com/55203625/213786736-1d0226de-f810-4ece-968f-08c81c769948.png

[21]: https://englishdiscoveries.page.link/fJc4

0 comments on commit 3deda8f

Please sign in to comment.