Skip to content

Commit 196d444

Browse files
snamstormsnamstorm
authored
Merge pull request #4 from ns-labs/merge-upstream
Merge upstream
2 parents e17f260 + fb7f567 commit 196d444

12 files changed

+3156
-1336
lines changed

‎.babelrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["react-native"]
3-
}
2+
"presets": ["react-native"]
3+
}

‎.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: "@react-native-community",
4+
};

‎.github/workflows/ci.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
name: ci
2+
on: [push, pull_request]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- uses: actions/checkout@v2
8+
- uses: actions/setup-node@v1
9+
- run: npm ci
10+
- run: npm run lint

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,7 @@
44
# node.js
55
node_modules/
66
npm-debug.log
7+
8+
*.iml
9+
.idea/
10+
.vscode/

‎.jshintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "esversion": 6}
1+
{ "esversion": 6 }

‎.prettierrc.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: "all",
6+
};

‎CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
1+
## 2.5.1 (17-05-2020)
2+
3+
[#177](https://github.com/itsnubix/react-native-video-controls/pull/177)
4+
5+
## 2.5.0 (16-05-2020)
6+
7+
Linting
8+
9+
Add show/hide callbacks [#164](https://github.com/itsnubix/react-native-video-controls/issues/164)
10+
11+
Add ability to set controlAnimationTiming [#172](https://github.com/itsnubix/react-native-video-controls/issues/172)
12+
13+
Fix for useNativeDriver animations [#178](https://github.com/itsnubix/react-native-video-controls/issues/178)
14+
15+
## 2.4.0 (??-??-2020)
16+
17+
At some point this got bumped to 2.4.0... ¯\\\_(ツ)\_/¯
18+
119
## 2.3.0 (07-11-2019)
220

321
Fix for notched phone [#144](https://github.com/itsnubix/react-native-video-controls/issues/144)
422

523
Fix initialized seekerWidth [#143](https://github.com/itsnubix/react-native-video-controls/pull/143)
24+
625
Increase lodash version [#157](https://github.com/itsnubix/react-native-video-controls/pull/157)
726

827
## 2.2.2 (22-03-2018)

‎README.md

Lines changed: 55 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
# react-native-video-controls
2+
3+
[![ci][1]][2]
4+
25
Controls for the React Native `<Video>` component at [react-native-video](https://github.com/react-native-community/react-native-video). For support with RN 0.45 or lower use version 1.3.1 or lower.
36

47
## Features
8+
59
This package contains a simple set of GUI controls that work with the [react-native-video](https://github.com/react-native-community/react-native-video) `<Video>` component. This includes a back button, volume bar, fullscreen toggle, play/pause toggle, seekbar, title, error handling and timer toggle that can switch between time remaining and current time when tapped.
610

711
![How it looks](https://s3-us-west-2.amazonaws.com/nubix.ca/github/example.gif)
@@ -11,13 +15,15 @@ By default the `<VideoPlayer>` accepts a navigator property from React's built-i
1115
By default, tapping the screen anywhere will show the player controls. After 10s the controls disappear. Double tapping will toggle fullscreen.
1216

1317
## Installation
18+
1419
Run `npm install --save react-native-video react-native-video-controls`
1520

1621
Then run `react-native link react-native-video`
1722

1823
If you're using RN < 39 run `npm install --save [email protected]`. Note this version includes `react-native-video` as a normal dependency instead of a peer-dependency.
1924

2025
## Usage
26+
2127
The `<VideoPlayer>` component follows the API of the `<Video>` component at [react-native-video](https://github.com/react-native-community/react-native-video). It also takes a number of additional props which are outlined in the [API](#api) section.
2228

2329
For basic operation the `<VideoPlayer>` component requires a video source and a navigator property. The default back button functionality in the component relies on using the built-in `<Navigator>` functionality in React Native and pops the current scene off the stack. This can be overridden if desired, see the [API](#api) for more details.
@@ -28,56 +34,75 @@ import VideoPlayer from 'react-native-video-controls';
2834

2935
// in the component's render() function
3036
<VideoPlayer
31-
source={{ uri: 'https://vjs.zencdn.net/v/oceans.mp4' }}
32-
navigator={ this.props.navigator }
33-
/>
37+
source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
38+
navigator={this.props.navigator}
39+
/>;
3440
```
3541

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

3844
```js
39-
<VideoPlayer source={ require('path/to/file') } />
45+
<VideoPlayer source={require('path/to/file')} />
4046
```
4147

4248
## API
49+
4350
The `<VideoPlayer>` component can take a number of inputs to customize it as needed. They are outlined below:
4451

4552
### Props
53+
4654
You can pass any of the props that the `<Video />` component at [react-native-video](https://github.com/react-native-community/react-native-video) takes. Simply add them onto the `<VideoPlayer />` and it will pass them through to the `<Video />` component.
4755

4856
In addition, the `<VideoPlayer />` also takes these props:
4957

50-
| Prop | Type | Default | Description |
51-
| ---------------------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
52-
| toggleResizeModeOnFullscreen | Boolean | true | If true, clicking the fullscreen button will toggle the `<Video />` component between cover/contain, set to false if you want to customize fullscreen behaviour |
53-
| controlTimeout | Integer | 15000 | Hide controls after X amount of time in milliseconds |
54-
| showOnStart | Boolean | true | Show or hide the controls on first render |
55-
| videoStyle | StyleSheet | null | React Native StyleSheet object that is appended to the `<Video>` component |
56-
| 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 |
57-
| seekColor | String(#HEX) | '#FFF' | Fill/handle colour of the seekbar |
58-
| style | StyleSheet | null | React Native StyleSheet object that is appended to the video's parent `<View>` |
58+
| Prop | Type | Default | Description |
59+
| ---------------------------- | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
60+
| toggleResizeModeOnFullscreen | Boolean | true | If true, clicking the fullscreen button will toggle the `<Video />` component between cover/contain, set to false if you want to customize fullscreen behaviour |
61+
| controlAnimationTiming | Integer | 500 | The amountof time (in milliseconds) to animate the controls in and out. |
62+
| 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. |
63+
| controlTimeout | Integer | 15000 | Hide controls after X amount of time in milliseconds |
64+
| scrubbing | Integer | 0 | If > 0, enable live scrubbing when moving the seek bar. The provided value is the minimum time step of the scrubbing in milliseconds. |
65+
| showOnStart | Boolean | true | Show or hide the controls on first render |
66+
| videoStyle | StyleSheet | null | React Native StyleSheet object that is appended to the `<Video>` component |
67+
| 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 |
68+
| seekColor | String(#HEX) | '#FFF' | Fill/handle colour of the seekbar |
69+
| style | StyleSheet | null | React Native StyleSheet object that is appended to the video's parent `<View>` |
70+
| tapAnywhereToPause | Boolean | false | If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. |
71+
72+
| showTimeRemaining | Boolean | true | If true, show the time remaing, else show the current time in the Player.
73+
`<View>`
74+
75+
| showHours | Boolean | false | If true, convert time to hours in the Player
76+
`<View>`
5977

6078
### Events
79+
6180
These are various events that you can hook into and fire functions on in the component:
6281

63-
| Callback | Description |
64-
| ------------------ | ---------------------------------------------------------------------------------- |
65-
| onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed |
66-
| onExitFullscreen | Fired when the video exits fullscreen after the fullscreen button is pressed |
67-
| onError | Fired when an error is encountered when loading the video |
68-
| onPause | Fired when the video is paused after the play/pause button is pressed |
69-
| onPlay | Fired when the video begins playing after the play/pause button is pressed |
70-
| onBack | Function fired when back button is pressed, override if using custom navigation |
71-
| onEnd | Fired when the video is complete |
82+
| Callback | Description |
83+
| ----------------- | ------------------------------------------------------------------------------- |
84+
| onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed |
85+
| onExitFullscreen | Fired when the video exits fullscreen after the fullscreen button is pressed |
86+
| onHideControls | Fired when the controls disappear |
87+
| onShowControls | Fired when the controls appear |
88+
| onError | Fired when an error is encountered when loading the video |
89+
| onPause | Fired when the video is paused after the play/pause button is pressed |
90+
| onPlay | Fired when the video begins playing after the play/pause button is pressed |
91+
| onBack | Function fired when back button is pressed, override if using custom navigation |
92+
| onEnd | Fired when the video is complete |
7293

7394
### Controls
95+
7496
These are the various controls that you can turn on/off as needed. All of these props default to false, override them to disable any controls
7597

76-
| Control | Description |
77-
| ------------------ | ------------------------------------------- |
78-
| disableFullscreen | Hide the fullscreen button |
79-
| disablePlayPause | Hide the play/pause toggle |
80-
| disableSeekbar | Hide the seekbar |
81-
| disableVolume | Hide the Volume control |
82-
| disableTimer | Hide the timer |
83-
| disableBack | Hide the back button |
98+
| Control | Description |
99+
| ----------------- | -------------------------- |
100+
| disableFullscreen | Hide the fullscreen button |
101+
| disablePlayPause | Hide the play/pause toggle |
102+
| disableSeekbar | Hide the seekbar |
103+
| disableVolume | Hide the Volume control |
104+
| disableTimer | Hide the timer |
105+
| disableBack | Hide the back button |
106+
107+
[1]: https://github.com/itsnubix/react-native-video-controls/workflows/ci/badge.svg
108+
[2]: https://github.com/itsnubix/react-native-video-controls/actions

0 commit comments

Comments
 (0)