fix(filmstrip-only): vertically align center the toolbar (#1700)

* fix(filmstrip-only): vertically align center the toolbar

Use top 50% to position the toolbar's top at the vertical center
of the iframe. Then use transform 50% to move the toolbar itself
up 50% so its middle matches the middle of the iframe.

* squash: toolbox should center with filmstrip

css/_filmstrip.scss

@@ -135,7 +135,6 @@
     &__videos-filmstripOnly {
         margin-top: auto;
         margin-bottom: auto;
-        padding-right: $defaultFilmStripOnlyToolbarSize;
     }
 
     .remote-videos-container {

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;

css/_vertical_filmstrip_overrides.scss

@@ -93,6 +93,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

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 (
             <div id = 'videoconference_page'>
                 <div id = 'videospace'>
                     <LargeVideo />
-                    <Filmstrip />
+                    <Filmstrip displayToolbox = { filmStripOnly } />
                 </div>
 
-                <Toolbox />
+                { filmStripOnly ? null : <Toolbox /> }
 
                 <DialogContainer />
                 <OverlayContainer />

react/features/filmstrip/components/Filmstrip.web.js

@@ -2,6 +2,8 @@
 
 import React, { Component } from 'react';
 
+import { Toolbox } from '../../toolbox';
+
 /**
  * Implements a React {@link Component} which represents the filmstrip on
  * Web/React.
@@ -9,6 +11,13 @@ import React, { Component } from 'react';
  * @extends Component
  */
 export default class Filmstrip extends Component {
+    static propTypes = {
+        /**
+         * Whether or not the toolbox should be displayed within the filmstrip.
+         */
+        displayToolbox: React.PropTypes.bool
+    };
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -18,6 +27,7 @@ export default class Filmstrip extends Component {
     render() {
         return (
             <div className = 'filmstrip'>
+                { this.props.displayToolbox ? <Toolbox /> : null }
                 <div
                     className = 'filmstrip__videos'
                     id = 'remoteVideos'>

react/features/toolbox/components/Toolbox.web.js

@@ -108,7 +108,7 @@ class Toolbox extends Component {
      */
     render(): ReactElement<*> {
         return (
-            <div>
+            <div className = 'toolbox'>
                 {
                     this._renderSubject()
                 }
@@ -171,7 +171,7 @@ class Toolbox extends Component {
         }
 
         return (
-            <div>
+            <div className = 'toolbox-toolbars'>
                 <Notice />
                 <PrimaryToolbar />
                 <SecondaryToolbar />