Redone part of the seekBar layout

TheWidlarzGroup · Feb 14, 2017 · d77814c · eduludi · May 30, 2017 · d77814c
1 parent c6193cf
commit d77814c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 0.6.1
+ - Added a hitSlop to the seek bar knob.
+ - Fixed the seek bar on android.
+ - Changed the way the seek bar is build up. There are new customStyles called `seekBarFullWidth`
+   and `seekBarBackground`. A part of the script needs the width of the seek bar. The padding is
+   added to this width by by reading paddingHorizontal or paddingLeft and paddingRight from the
+   custom `seekBar` styles.
+
 ## 0.6.0
  - The seekBar is now seek-able.
  - Added `seekBarKnob` to `customStyles` to style the seek bar knob.

diff --git a/README.md b/README.md
@@ -45,8 +45,10 @@ All other props are passed to the react-native-video component.
  - controlIcon
  - playIcon
  - seekBar
+ - seekBarFullWidth
  - seekBarProgress
  - seekBarKnob
+ - seekBarBackground
  - thumbnail
  - playButton
  - playArrow

diff --git a/index.js b/index.js
@@ -44,22 +44,38 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   seekBar: {
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    height: 3,
+    alignItems: 'center',
+    height: 30,
     flexGrow: 1,
     flexDirection: 'row',
+    paddingHorizontal: 10,
+    marginLeft: -10,
+    marginRight: -5,
+  },
+  seekBarFullWidth: {
+    marginLeft: 0,
+    marginRight: 0,
+    paddingHorizontal: 0,
+    marginTop: -3,
+    height: 3,
   },
   seekBarProgress: {
+    height: 3,
     backgroundColor: '#F00',
   },
   seekBarKnob: {
     width: 20,
     height: 20,
+    marginHorizontal: -8,
+    marginVertical: -10,
     borderRadius: 10,
-    marginHorizontal: -10,
-    marginVertical: -8.5,
     backgroundColor: '#F00',
     transform: [{ scale: 0.8 }],
+    zIndex: 1,
+  },
+  seekBarBackground: {
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    height: 3,
   },
   overlayButton: {
     flex: 1,
@@ -180,7 +196,18 @@ export default class VideoPlayer extends Component {
   }
 
   onSeekBarLayout({ nativeEvent }) {
-    this.seekBarWidth = nativeEvent.layout.width;
+    const customStyle = this.props.customStyles.seekBar;
+    let padding = 0;
+    if (customStyle && customStyle.paddingHorizontal) {
+      padding = customStyle.paddingHorizontal * 2;
+    } else if (customStyle) {
+      padding = customStyle.paddingLeft || 0;
+      padding += customStyle.paddingRight ? customStyle.paddingRight : 0;
+    } else {
+      padding = 20;
+    }
+
+    this.seekBarWidth = nativeEvent.layout.width - padding;
   }
 
   onSeekStartResponder() {
@@ -214,7 +241,6 @@ export default class VideoPlayer extends Component {
     const ratio = 100 / this.seekBarWidth;
     const progress = this.seekProgressStart + ((ratio * diff) / 100);
 
-
     this.setState({
       progress,
     });
@@ -284,11 +310,10 @@ export default class VideoPlayer extends Component {
     return (
       <View
         style={[
-          styles.seekBar, {
-            marginHorizontal: fullWidth ? 0 : 10,
-            marginTop: fullWidth ? -3 : 0,
-          },
+          styles.seekBar,
+          fullWidth ? styles.seekBarFullWidth : {},
           customStyles.seekBar,
+          fullWidth ? customStyles.seekBarFullWidth : {},
         ]}
         onLayout={this.onSeekBarLayout}
       >
@@ -316,7 +341,7 @@ export default class VideoPlayer extends Component {
             onResponderTerminate={this.onSeekRelease}
           />
         ) : null }
-        <View style={{ flexGrow: 1 - this.state.progress }} />
+        <View style={[styles.seekBarBackground, { flexGrow: 1 - this.state.progress }]} />
       </View>
     );
   }
@@ -448,9 +473,11 @@ VideoPlayer.propTypes = {
     controlIcon: Icon.propTypes.style,
     playIcon: Icon.propTypes.style,
     seekBar: View.propTypes.style,
+    seekBarFullWidth: View.propTypes.style,
     seekBarProgress: View.propTypes.style,
     seekBarKnob: View.propTypes.style,
     seekBarKnobSeeking: View.propTypes.style,
+    seekBarBackground: View.propTypes.style,
     thumbnail: Image.propTypes.style,
     playButton: TouchableOpacity.propTypes.style,
     playArrow: Icon.propTypes.style,