update readme

ivcandela · Mar 22, 2018 · 81663f4 · 81663f4
1 parent e483c41
commit 81663f4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.2.2 (22-03-2018)
+Update the readme
+
 ## 2.2.1 (22-03-2018)
 Fix for [#86](https://github.com/itsnubix/react-native-video-controls/issues/86)
   - Added `toggleResizeModeOnFullscreen` prop which defaults to `true`

diff --git a/README.md b/README.md
@@ -26,7 +26,6 @@ For basic operation the `<VideoPlayer>` component requires a video source and a
 // At the top where our imports are...
 import VideoPlayer from 'react-native-video-controls';
 
-
 // in the component's render() function
 <VideoPlayer
     source={{ uri: 'https://vjs.zencdn.net/v/oceans.mp4' }}
@@ -38,37 +37,41 @@ import VideoPlayer from 'react-native-video-controls';
 ## API
 The `<VideoPlayer>` component can take a number of inputs to customize it as needed. They are outlined below:
 
-```javascript
-<VideoPlayer
-
-    // react-native-video props
-    // Pass any prop that the <Video> element may accept
-
-    // settings
-    toggleResizeModeOnFullscreen={ true }  // Set to false if you want to override the fullscreen functionality
-    controlTimeout={ 15000 }               // hide controls after ms of inactivity.
-    navigator={ navigator }                // prop from React Native <Navigator> component
-    showOnStart={ true }                   // show or hide the controls on first render
-    seekColor={ '#FFF' }                   // fill/handle colour of the seekbar
-    videoStyle={ {} }                      // Style appended to <Video> component
-    style={ {} }                           // Style appended to <View> container
-
-    // event callbacks
-    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
-    onError={ () => {} }             // Fired when an error is encountered on load
-    onPause={ () => {} }             // Fired when the video is paused after the play/pause button is pressed
-    onPlay={ () => {} }              // Fire when the video begins playing after the play/pause button is pressed
-    onBack={ () => {} }              // Function fired when back button is pressed.
-    onEnd={ () => {} }               // Fired when the video is complete.
-
-    // disabling individual controls
-    disableFullscreen={ false }      // Used to hide the Fullscreen control.
-    disablePlayPause={ false }       // Used to hide the PlayPause control.
-    disableSeekbar={ false }         // Used to hide the Seekbar control.
-    disableVolume={ false }          // Used to hide the Volume control.
-    disableTimer={ false }           // Used to hide the Timer control.
-    disableBack={ false }            // Used to hide the Back control.
-
-/>
-```
+### Props
+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.  In addition, the `<VideoPlayer />` also takes these props:
+
+| Prop                         | Type          | Default | Description                                                                                                                                                             |
+| ---------------------------- | ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| toggleResizeModeOnFullscreen | Boolean       | true    | If true, clicking the fullscreen button will toggle the `<Video />` component between 'cover' and 'contain', set to false if you want to customize fullscreen behaviour |
+| controlTimeout               | Integer       | 15000   | Hide controls after X amount of time in milliseconds                                                                                                                    |
+| navigator                    | Navigator     | null    | If you're 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   |
+| showOnStart                  | Boolean       | true    | Show or hide the controls on first render                                                                                                                               |
+| seekColor                    | String(#HEX)  | '#FFF'  | Fill/handle colour of the seekbar                                                                                                                                       |
+| videoStyle                   | StyleSheet    | null    | React Native StyleSheet object that is appended to the `<Video>` component                                                                                              |
+| style                        | StyleSheet    | null    | React Native StyleSheet object that is appended to the video's parent `<View>`                                                                                          |
+
+### Events
+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       |
+| onError            | Fired when an error is encountered when loading the video                          |
+| onPause            | Fired when the video is paused after the play/pause button is pressed              |
+| onPlay             | Fired when the video begins playing after the play/pause button is pressed         |
+| onBack             | Function fired when back button is pressed, override if using custom navigation    |
+| onEnd              | Fired when the video is complete                                                   |
+
+### Controls
+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
+
+| Control            | Description                                 |
+| ------------------ | ------------------------------------------- |
+| disableFullscreen  | Hide the fullscreen button                  |
+| disablePlayPause   | Hide the play/pause toggle                  |
+| disableSeekbar     | Hide the seekbar                            |
+| disableVolume      | Hide the Volume control                     |
+| disableTimer       | Hide the timer                              |
+| disableBack        | Hide the back button                        |
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-controls",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A set of GUI controls for the react-native-video component",
   "license": "MIT",
   "main": "VideoPlayer.js",