Skip to content

Commit

Permalink
ref(filmstrip): apply filmstrip class to Conference root (#3294)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
virtuacoplenny authored Jul 25, 2018
1 parent 0b12244 commit 39f1958
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 6 deletions.
2 changes: 1 addition & 1 deletion css/filmstrip/_vertical_filmstrip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 0 additions & 5 deletions modules/UI/UI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down
23 changes: 23 additions & 0 deletions react/features/conference/components/Conference.web.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}.
*/
Expand All @@ -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.
*/
Expand Down Expand Up @@ -162,6 +180,7 @@ class Conference extends Component<Props> {

return (
<div
className = { this.props._layoutModeClassName }
id = 'videoconference_page'
onMouseMove = { this._onShowToolbar }>
<Notice />
Expand Down Expand Up @@ -253,6 +272,10 @@ function _mapStateToProps(state) {
*/
_iAmRecorder: iAmRecorder,

_layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP
? LAYOUT_CLASSES.VERTICAL_FILMSTRIP
: LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP,

/**
* Conference room name.
*/
Expand Down

0 comments on commit 39f1958

Please sign in to comment.