jiti-meet/react/features/overlay/components/OverlayFrame.web.js

81 lines
2.0 KiB
JavaScript

/* global interfaceConfig */
import PropTypes from 'prop-types';
import React, { Component } from 'react';
/**
* Implements a React {@link Component} for the frame of the overlays.
*/
export default class OverlayFrame extends Component {
/**
* OverlayFrame component's property types.
*
* @static
*/
static propTypes = {
/**
* The children components to be displayed into the overlay frame.
*/
children: PropTypes.node.isRequired,
/**
* Indicates the css style of the overlay. If true, then lighter;
* darker, otherwise.
*
* @type {boolean}
*/
isLightOverlay: PropTypes.bool
};
/**
* Initializes a new AbstractOverlay instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
* @public
*/
constructor(props) {
super(props);
this.state = {
/**
* Indicates whether the filmstrip only mode is enabled or not.
*
* @type {boolean}
*/
filmstripOnly:
typeof interfaceConfig !== 'undefined'
&& interfaceConfig.filmStripOnly
};
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement|null}
*/
render() {
let containerClass = this.props.isLightOverlay
? 'overlay__container-light' : 'overlay__container';
let contentClass = 'overlay__content';
if (this.state.filmstripOnly) {
containerClass += ' filmstrip-only';
contentClass += ' filmstrip-only';
}
return (
<div
className = { containerClass }
id = 'overlay'>
<div className = { contentClass }>
{
this.props.children
}
</div>
</div>
);
}
}