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

 /**
  * 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

         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

     '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}.
  */
      */
     _iAmRecorder: boolean,
 
+    /**
+     * The CSS class to apply to the root of {@link Conference} to modify the
+     * application layout.
+     */
+    _layoutModeClassName: string,
+
     /**
      * Conference room name.
      */
 
         return (
             <div
+                className = { this.props._layoutModeClassName }
                 id = 'videoconference_page'
                 onMouseMove = { this._onShowToolbar }>
                 <Notice />
          */
         _iAmRecorder: iAmRecorder,
 
+        _layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP
+            ? LAYOUT_CLASSES.VERTICAL_FILMSTRIP
+            : LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP,
+
         /**
          * Conference room name.
          */