Skip to content

Commit

Permalink
react-native-video@6* (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
LunatiqueCoder authored May 30, 2024
1 parent f356da6 commit e6363aa
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 45 deletions.
54 changes: 19 additions & 35 deletions packages/media-console/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,19 @@
[![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 @@ -30,6 +29,7 @@ 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 All @@ -48,6 +48,10 @@ from [react-native-video][15].

If you are using `react-native-reanimated`, then you can use `yarn add @react-native-media-console/reanimated`

> **🚧 WARNING**
>
> You need react-native-video > 6.0.0 in order to use this library.
## 🛠 Usage

The `<VideoPlayer>` component follows the API of the `<Video>` component
Expand All @@ -61,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 @@ -90,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 @@ -116,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 @@ -133,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 @@ -160,47 +164,27 @@ 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/2023

[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
4 changes: 0 additions & 4 deletions packages/media-console/src/VideoPlayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -323,10 +323,6 @@ const AnimatedVideoPlayer = (

useEffect(() => {
setPaused(paused);
mounted.current = true;
return () => {
mounted.current = false;
};
}, [paused]);

useEffect(() => {
Expand Down
11 changes: 5 additions & 6 deletions packages/media-console/src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,15 @@
"dependencies": {},
"peerDependencies": {
"react-native": ">=0.46.0",
"react-native-video": ">=2.0.0",
"react-native-video": ">=6.0.0",
"react-native-reanimated": "^2.12.0"
},
"devDependencies": {
"@types/react-native-video": "^5.0.14",
"react": "^17.0.2",
"react-native": "npm:[email protected]",
"react": "18.3.1",
"react-native": "npm:[email protected]",
"react-native-builder-bob": "^0.18.2",
"react-native-video": "^5.2.0",
"react-native-reanimated": "^2.12.0",
"react-native-video": "6.1.2",
"react-native-reanimated": "3.11.0",
"release-it": "^15.6.0",
"typescript": "^4.6.2"
},
Expand Down

0 comments on commit e6363aa

Please sign in to comment.