feat(overlays): for filmstrip only mode

react/features/overlay/components/OverlayFrame.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 
+declare var interfaceConfig: Object;
+
 /**
- * Implements an abstract React Component for overlay - the components which are
- * displayed on top of the application covering the whole screen.
- *
- * @abstract
+ * Implements a React Component for the frame of the overlays.
  */
 export default class OverlayFrame extends Component {
     /**
@@ -27,6 +26,26 @@ export default class OverlayFrame extends Component {
         isLightOverlay: React.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 film strip only mode is enabled or not.
+             *
+             * @type {boolean}
+             */
+            filmStripOnly: interfaceConfig.filmStripOnly
+        };
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -34,14 +53,20 @@ export default class OverlayFrame extends Component {
      * @returns {ReactElement|null}
      */
     render() {
-        const containerClass = this.props.isLightOverlay
+        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 = 'overlay__content'>
+                <div className = { contentClass }>
                     {
                         this.props.children
                     }