ref(filmstrip): apply filmstrip class to Conference root (#3294)

* ref(filmstrip): apply filmstrip class to Conference root

Instead of apply the layout class to the body, it can be
applied to Conference. This will allow easier switching
between tile filmstrip and horizontal/vertical filmstrip.

* squash: fix typo filstrip

css/filmstrip/_vertical_filmstrip.scss

@@ -127,7 +127,7 @@
 /**
  * Override other styles to support vertical filmstrip mode.
  */
-.vertical-filmstrip.filmstrip-only {
+.filmstrip-only .vertical-filmstrip {
     .filmstrip {
         flex-direction: row-reverse;
     }

modules/UI/UI.js

@@ -320,11 +320,6 @@ UI.start = function() {
         SidePanels.init(eventEmitter);
     }
 
-    const filmstripTypeClassname = interfaceConfig.VERTICAL_FILMSTRIP
-        ? 'vertical-filmstrip' : 'horizontal-filmstrip';
-
-    $('body').addClass(filmstripTypeClassname);
-
     document.title = interfaceConfig.APP_NAME;
 };
 

react/features/conference/components/Conference.web.js

@@ -42,6 +42,18 @@ const FULL_SCREEN_EVENTS = [
     'fullscreenchange'
 ];
 
+/**
+ * The CSS class to apply to the root element of the conference so CSS can
+ * modify the app layout.
+ *
+ * @private
+ * @type {Object}
+ */
+const LAYOUT_CLASSES = {
+    HORIZONTAL_FILMSTRIP: 'horizontal-filmstrip',
+    VERTICAL_FILMSTRIP: 'vertical-filmstrip'
+};
+
 /**
  * The type of the React {@code Component} props of {@link Conference}.
  */
@@ -52,6 +64,12 @@ type Props = {
      */
     _iAmRecorder: boolean,
 
+    /**
+     * The CSS class to apply to the root of {@link Conference} to modify the
+     * application layout.
+     */
+    _layoutModeClassName: string,
+
     /**
      * Conference room name.
      */
@@ -162,6 +180,7 @@ class Conference extends Component<Props> {
 
         return (
             <div
+                className = { this.props._layoutModeClassName }
                 id = 'videoconference_page'
                 onMouseMove = { this._onShowToolbar }>
                 <Notice />
@@ -253,6 +272,10 @@ function _mapStateToProps(state) {
          */
         _iAmRecorder: iAmRecorder,
 
+        _layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP
+            ? LAYOUT_CLASSES.VERTICAL_FILMSTRIP
+            : LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP,
+
         /**
          * Conference room name.
          */