Display Video Overlay Proposal

DisplayVideoOverlay.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames';
import { mergeAndSortChildren } from '../utils/others';


import 'video-react/dist/video-react.css';
import "../styles/display-video-overlay.css"

const propTypes = {
  children: PropTypes.any,
  autoHide: PropTypes.bool,
  disableCompletely: PropTypes.bool,
  className: PropTypes.string,
};


const defaultProps = {
  autoHide: false,
  disableCompletely: false,
};


export default class DisplayVideoOverlay extends Component {
 

  getChildren() {
    const children = React.Children.toArray(this.props.children);
    return mergeAndSortChildren([], children, this.props);
  }

  render() {
    const { autoHide, className, disableCompletely } = this.props;
    const children = this.getChildren();

    return (disableCompletely ?
      null
      :
      <div 
        className={classNames('video-react-display-video-overlay', {
          'video-react-display-video-overlay-auto-hide': autoHide,
        }, className)}
      >
        {children}
      </div>
    );
  }
}

DisplayVideoOverlay.propTypes = propTypes;
DisplayVideoOverlay.defaultProps = defaultProps;
DisplayVideoOverlay.displayName = 'DisplayVideoOverlay';

DisplayVideoOverlay.scss

@import 'variables';
@import 'mixins';

.video-react .video-react-display-video-overlay {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15.0em;
  align-items: center;
  @include background-color-with-alpha($video-react-primary-background-color, $video-react-primary-background-transparency);
}

// Video has started playing
.video-react-has-started .video-react-display-video-overlay {
  @include display-flex;
  visibility: visible;
  opacity: 1;

  $trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
  @include transition($trans);
}

// Video has started playing AND user is inactive
.video-react-has-started.video-react-user-inactive.video-react-playing {
  .video-react-display-video-overlay.video-react-display-video-overlay-auto-hide {
    // Remain visible for screen reader and keyboard users
    visibility: visible;
    opacity: 0;

    $trans: visibility 1.0s, opacity 1.0s;
    @include transition($trans);
  }
}

.video-react-controls-disabled .video-react-display-video-overlay,
.video-react-using-native-controls .video-react-display-video-overlay,
.video-react-error .video-react-display-video-overlay {
  // !important is ok in this context.
  display: none !important;
}

// Don't hide the control bar if it's audio
.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-display-video-overlay {
  opacity: 1;
  visibility: visible;
}

// IE 8 + 9 Support
.video-react-has-started.video-react-no-flex .video-react-display-video-overlay {
  display: table;
}

index.js

...

    render(){
       render(
         <Player ref="player" videoId="video-1" 
            autoPlay loop fluid={false} muted 
            width={this.props.width} height={this.props.height}>
            {this.props.children}
            <DisplayVideoOverlay  
                key="overlay"
                ref="overlay"
                order={2}
                autoHide
                >
                <p>Um texto Qualquer</p>
                <img src="favicon.ico" alt="Favicon for test" />
            </DisplayVideoOverlay>
          <ControlBar  disableCompletely={true} >
          </ControlBar>
     </Player> 
    );
 ...