Add possibility to render an overlay component on video

This change adds a new `renderOverlayComponent` prop that allows to render something on top of the video, but under controls / play button.

README.md

@@ -85,6 +85,7 @@ react-native link react-native-vector-icons
 | onHideControls          | Callback for when the controls are being hide.                                              |
 | onShowControls          | Callback for when the controls are being shown.                                             |
 | customStyles            | The player can be customized in this object, see customStyles for the options.              |
+| renderOverlayComponent  | Render an overlay component on top of the video, but under controls / play button.          |
 
 All other props are passed to the react-native-video component.
 

index.js

@@ -91,6 +91,7 @@ const styles = StyleSheet.create({
   overlayButton: {
     flex: 1,
   },
+  overlayComponentWrapper: StyleSheet.absoluteFill,
 });
 
 export default class VideoPlayer extends Component {
@@ -378,6 +379,7 @@ export default class VideoPlayer extends Component {
         ]}
         source={thumbnail}
       >
+        {this.renderOverlay()}
         {this.renderStartButton()}
       </BackgroundImage>
     );
@@ -465,6 +467,14 @@ export default class VideoPlayer extends Component {
     );
   }
 
+  renderOverlay() {
+    return this.props.renderOverlayComponent ? (
+      <View style={styles.overlayComponentWrapper}>
+        {this.props.renderOverlayComponent()}
+      </View>
+    ) : null;
+  }
+
   renderVideo() {
     const {
       video,
@@ -502,6 +512,7 @@ export default class VideoPlayer extends Component {
             { marginTop: -this.getSizeStyles().height },
           ]}
         >
+          {this.renderOverlay()}
           <TouchableOpacity
             style={styles.overlayButton}
             onPress={() => {
@@ -533,6 +544,7 @@ export default class VideoPlayer extends Component {
     } else if (!isStarted) {
       return (
         <View style={[styles.preloadingPlaceholder, this.getSizeStyles(), style]}>
+          {this.renderOverlay()}
           {this.renderStartButton()}
         </View>
       );