content: // @flow
  
  import React, { Component } from 'react';
  
  declare var interfaceConfig: Object;
  
  /**
   * The type of the React {@code Component} props of {@link OverlayFrame}.
   */
  type Props = {
  
      /**
       * The children components to be displayed into the overlay frame.
       */
      children: React$Node,
  
      /**
       * Indicates the css style of the overlay. If true, then lighter; darker,
       * otherwise.
       */
      isLightOverlay?: boolean
  };
  
  /**
   * The type of the React {@code Component} state of {@link OverlayFrame}.
   */
  type State = {
  
      /**
       * Whether or not the application is currently displaying in filmstrip only
       * mode.
       */
      filmstripOnly: boolean
  };
  
  /**
   * Implements a React {@link Component} for the frame of the overlays.
   */
  export default class OverlayFrame extends Component<Props, State> {
      /**
       * Initializes a new AbstractOverlay instance.
       *
       * @param {Object} props - The read-only properties with which the new
       * instance is to be initialized.
       * @public
       */
      constructor(props: 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>
          );
      }
  }
  