diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index f45b9bfbdacd..c885ec7b0dce 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -135,7 +135,6 @@ &__videos-filmstripOnly { margin-top: auto; margin-bottom: auto; - padding-right: $defaultFilmStripOnlyToolbarSize; } .remote-videos-container { diff --git a/css/_toolbars.scss b/css/_toolbars.scss index abf1dc215aed..e73e1d77452e 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -195,11 +195,8 @@ */ &_filmstrip-only { border-radius: 3px; - bottom: 0; display: inline-block; height: auto; - position: absolute; - right: 0; width: $defaultFilmStripOnlyToolbarSize; .button { @@ -228,6 +225,14 @@ } } +.filmstrip-only { + .toolbox, + .toolbox-toolbars { + align-items: center; + display: flex; + } +} + .subject { background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35)); border-bottom-left-radius: 12px; diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss index 49c8a683f9ad..96a28493f89f 100644 --- a/css/_vertical_filmstrip_overrides.scss +++ b/css/_vertical_filmstrip_overrides.scss @@ -87,6 +87,29 @@ } } + &.filmstrip-only { + .filmstrip { + flex-direction: row-reverse; + } + .filmstrip__videos-filmstripOnly { + height: 100%; + } + + /** + * In filmstrip only mode, the toolbar is normally displayed in the + * vertical center of the filmstrip strip. In vertical filmstrip mode, + * that alignment makes the toolbar appear floating and detached from + * the filmstrip. So, instead anchor the toolbar next to the local + * video. + */ + .toolbar_filmstrip-only { + bottom: 0; + top: auto; + transform: none; + } + + } + /** * These styles are for the video labels that display on the top right. The * styles adjust the labels' positioning as the filmstrip itself or diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index c4e9825be49b..bc558d6c7e4c 100644 --- a/react/features/conference/components/Conference.web.js +++ b/react/features/conference/components/Conference.web.js @@ -13,6 +13,7 @@ import { HideNotificationBarStyle } from '../../unsupported-browser'; declare var $: Function; declare var APP: Object; +declare var interfaceConfig: Object; /** * The conference page of the Web application. @@ -65,14 +66,16 @@ class Conference extends Component { * @returns {ReactElement} */ render() { + const { filmStripOnly } = interfaceConfig; + return (