Skip to content

Commit

Permalink
Add possibility to render an overlay component on video
Browse files Browse the repository at this point in the history
This change adds a new `renderOverlayComponent` prop that allows to render something on top of the video, but under controls / play button.
  • Loading branch information
mlazari committed Dec 22, 2020
1 parent 65ee27d commit 82e871f
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
12 changes: 12 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ const styles = StyleSheet.create({
overlayButton: {
flex: 1,
},
overlayComponentWrapper: StyleSheet.absoluteFill,
});

export default class VideoPlayer extends Component {
Expand Down Expand Up @@ -378,6 +379,7 @@ export default class VideoPlayer extends Component {
]}
source={thumbnail}
>
{this.renderOverlay()}
{this.renderStartButton()}
</BackgroundImage>
);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -502,6 +512,7 @@ export default class VideoPlayer extends Component {
{ marginTop: -this.getSizeStyles().height },
]}
>
{this.renderOverlay()}
<TouchableOpacity
style={styles.overlayButton}
onPress={() => {
Expand Down Expand Up @@ -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>
);
Expand Down

0 comments on commit 82e871f

Please sign in to comment.