Reorg overlay feature files

react/features/overlay/components/web/OverlayFrame.js

@@ -0,0 +1,90 @@
+// @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>
+        );
+    }
+}