From 39f1958300b1610856976196bd30006d4f97e0cc Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Wed, 25 Jul 2018 13:00:00 -0700 Subject: [PATCH] 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 | 2 +- modules/UI/UI.js | 5 ---- .../conference/components/Conference.web.js | 23 +++++++++++++++++++ 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/css/filmstrip/_vertical_filmstrip.scss b/css/filmstrip/_vertical_filmstrip.scss index 9861cb73e..bd64ee7c0 100644 --- a/css/filmstrip/_vertical_filmstrip.scss +++ b/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; } diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 01d236f1a..310d4acc2 100644 --- a/modules/UI/UI.js +++ b/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; }; diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 5a3cc838e..b78c15c62 100644 --- a/react/features/conference/components/Conference.web.js +++ b/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 { return (
@@ -253,6 +272,10 @@ function _mapStateToProps(state) { */ _iAmRecorder: iAmRecorder, + _layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP + ? LAYOUT_CLASSES.VERTICAL_FILMSTRIP + : LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP, + /** * Conference room name. */