From 38f291477d08e7c74041e2015f56adb41d9fb0f8 Mon Sep 17 00:00:00 2001
From: Mihai Lazari <l3m3a3@gmail.com>
Date: Fri, 18 Dec 2020 16:14:19 +0200
Subject: [PATCH] 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 |  1 +
 index.js  | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/README.md b/README.md
index ce31247..dcf3dd1 100644
--- a/README.md
+++ b/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.
 
diff --git a/index.js b/index.js
index b16b485..17a4809 100644
--- a/index.js
+++ b/index.js
@@ -91,6 +91,7 @@ const styles = StyleSheet.create({
   overlayButton: {
     flex: 1,
   },
+  overlayComponentWrapper: StyleSheet.absoluteFill,
 });
 
 export default class VideoPlayer extends Component {
@@ -465,6 +466,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 +511,7 @@ export default class VideoPlayer extends Component {
             { marginTop: -this.getSizeStyles().height },
           ]}
         >
+          {this.renderOverlay()}
           <TouchableOpacity
             style={styles.overlayButton}
             onPress={() => {
@@ -533,6 +543,7 @@ export default class VideoPlayer extends Component {
     } else if (!isStarted) {
       return (
         <View style={[styles.preloadingPlaceholder, this.getSizeStyles(), style]}>
+          {this.renderOverlay()}
           {this.renderStartButton()}
         </View>
       );