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

     &__videos-filmstripOnly {
         margin-top: auto;
         margin-bottom: auto;
-        padding-right: $defaultFilmStripOnlyToolbarSize;
     }
 
     .remote-videos-container {

css/_toolbars.scss

      */
     &_filmstrip-only {
         border-radius: 3px;
-        bottom: 0;
         display: inline-block;
         height: auto;
-        position: absolute;
-        right: 0;
         width: $defaultFilmStripOnlyToolbarSize;
 
         .button {
     }
 }
 
+.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

         }
     }
 
+    &.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

 
 declare var $: Function;
 declare var APP: Object;
+declare var interfaceConfig: Object;
 
 /**
  * The conference page of the Web application.
      * @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

 
 import React, { Component } from 'react';
 
+import { Toolbox } from '../../toolbox';
+
 /**
  * Implements a React {@link Component} which represents the filmstrip on
  * Web/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()}.
      *
     render() {
         return (
             <div className = 'filmstrip'>
+                { this.props.displayToolbox ? <Toolbox /> : null }
                 <div
                     className = 'filmstrip__videos'
                     id = 'remoteVideos'>

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

      */
     render(): ReactElement<*> {
         return (
-            <div>
+            <div className = 'toolbox'>
                 {
                     this._renderSubject()
                 }
         }
 
         return (
-            <div>
+            <div className = 'toolbox-toolbars'>
                 <Notice />
                 <PrimaryToolbar />
                 <SecondaryToolbar />