add ability to customize controller timeout length

ivcandela · Nov 21, 2016 · eadded3 · eadded3
1 parent 4aa46eb
commit eadded3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 0.9.7 (21-11-2016)
+
+  - Aesthetic changes made with regards to spacing in the bottom control group
+  - Tightened up space in the upper group as well.
+  - Changed control timeout to 15s by default. Allow the ability to overwrite. See API.
+
 ## 0.9.6 (15-11-2016)
 
 ### Bug fixes

diff --git a/README.md b/README.md
@@ -50,15 +50,18 @@ The `<VideoPlayer>` component can take a number of inputs to customize it as nee
     rate={ 1 }                   // 0 is paused, 1 is normal.
     title={}                     // Video title, if null title area is hidden
 
-    // events callbacks
-    onLoadStart={}   // Fired when loading of the source starts
-    onProgress={}    // Fired every ~250ms when the video progresses
-    onError={}       // Fired when an error is encountered on load
-    onLoad={}        // Fired when loading is complete
-    onEnd={}         // Fired when the video is complete.
+    // settings
+    controlTimeout={ 15000 }     // hide controls after ms of inactivity.
+
+    // event callbacks
+    onLoadStart={}               // Fired when loading of the source starts
+    onProgress={}                // Fired every ~250ms when the video progresses
+    onError={}                   // Fired when an error is encountered on load
+    onLoad={}                    // Fired when loading is complete
+    onEnd={}                     // Fired when the video is complete.
 
     // actions
-    goBack={}   // Function fired when back button is pressed.
+    goBack={}                    // Function fired when back button is pressed.
 
 />
 ```
diff --git a/VideoPlayer.js b/VideoPlayer.js
@@ -89,9 +89,9 @@ export default class VideoPlayer extends Component {
          * Player information
          */
         this.player = {
+            controlTimeoutDelay: this.props.controlTimeout || 15000,
             volumePanResponder: PanResponder,
             seekPanResponder: PanResponder,
-            controlTimeoutDelay: 10000,
             controlTimeout: null,
             volumeWidth: 150,
             iconOffset: 7,
@@ -895,7 +895,10 @@ export default class VideoPlayer extends Component {
                     styles.controls.control,
                     styles.controls.title,
                 ]}>
-                    <Text style={ styles.controls.text }>
+                    <Text style={[
+                        styles.controls.text,
+                        styles.controls.titleText
+                    ]}>
                         { this.opts.title || '' }
                     </Text>
                 </View>
@@ -910,7 +913,7 @@ export default class VideoPlayer extends Component {
      */
     renderTimer() {
         return this.renderControl(
-            <Text style={ styles.controls.text }>
+            <Text style={ styles.controls.timerText }>
                 { this.calculateTime() }
             </Text>,
             this.methods.toggleTimer,
@@ -1066,7 +1069,7 @@ const styles = {
             resizeMode: 'stretch',
         },
         control: {
-            padding: 24,
+            padding: 16,
         },
         text: {
             backgroundColor: 'transparent',
@@ -1098,36 +1101,48 @@ const styles = {
             zIndex: 100,
             marginTop: 24,
             marginBottom: 0,
-            marginLeft: 12,
-            marginRight: 12,
         },
         topControlGroup: {
             alignSelf: 'stretch',
             alignItems: 'center',
             justifyContent: 'space-between',
             flexDirection: 'row',
             width: null,
-            marginLeft: 16,
-            marginRight: 16,
+            marginLeft: 12,
+            marginRight: 12,
+            marginTop: 12,
         },
         bottomControlGroup: {
             alignSelf: 'stretch',
             alignItems: 'center',
             justifyContent: 'space-between',
             flexDirection: 'row',
+            marginLeft: 12,
+            marginRight: 12,
             marginBottom: 0,
-            marginLeft: 18,
-            marginRight: 18,
         },
         volume: {
             flexDirection: 'row',
         },
         fullscreen: {
             flexDirection: 'row',
         },
-        playPause: {},
-        timer: {},
+        playPause: {
+            width: 80,
+        },
+        title: {
+            alignItems: 'center',
+            padding: 0,
+        },
+        titleText: {
+            textAlign: 'center',
+        },
+        timer: {
+            width: 80,
+        },
         timerText: {
+            backgroundColor: 'transparent',
+            color: '#FFF',
             fontSize: 11,
             textAlign: 'right',
         },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-controls",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "A set of GUI controls for the react-native-video component",
   "license": "MIT",
   "main": "VideoPlayer.js",