feat(tile-view): initial implementation for tile view (#3317)

* feat(tile-view): initial implementation for tile view

- Modify the classname on the app root so layout can adjust
  depending on the desired layout mode--vertical filmstrip,
  horizontal filmstrip, and tile view.
- Create a button for toggling tile view.
- Add a StateListenerRegistry to automatically update the
  selected participant and max receiver frame height on tile
  view toggle.
- Rezise thumbnails when switching in and out of tile view.
- Move the local video when switching in and out of tile view.
- Update reactified pieces of thumbnails when switching in and
  out of tile view.
- Cap the max receiver video quality in tile view based on tile
  size.
- Use CSS to hide UI components that should not display in tile
  view.
- Signal follow me changes.

* change local video id for tests

* change approach: leverage more css

* squash: fix some formatting

* squash: prevent pinning, hide pin border in tile view

* squash: change logic for maxReceiverQuality due to sidestepping resizing logic

* squash: fix typo, columns configurable, remove unused constants

* squash: resize with js again

* squash: use yana's math for calculating tile size

css/filmstrip/_small_video.scss

      * Focused video thumbnail.
      */
     &.videoContainerFocused {
-        transition-duration: 0.5s;
-        -webkit-transition-duration: 0.5s;
-        -webkit-animation-name: greyPulse;
-        -webkit-animation-duration: 2s;
-        -webkit-animation-iteration-count: 1;
-        border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+        border: $thumbnailVideoBorder solid $videoThumbnailSelected;
         box-shadow: inset 0 0 3px $videoThumbnailSelected,
-        0 0 3px $videoThumbnailSelected !important;
+        0 0 3px $videoThumbnailSelected;
     }
 
     .remotevideomenu > .icon-menu {
     /**
      * Hovered video thumbnail.
      */
-    &:hover {
+    &:hover:not(.videoContainerFocused):not(.active-speaker) {
         cursor: hand;
         border: $thumbnailVideoBorder solid $videoThumbnailHovered;
         box-shadow: inset 0 0 3px $videoThumbnailHovered,

css/filmstrip/_tile_view.scss

+/**
+ * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
+ */
+.tile-view {
+    /**
+     * Add a border around the active speaker to make the thumbnail easier to
+     * see.
+     */
+    .active-speaker {
+        border: $thumbnailVideoBorder solid $videoThumbnailSelected;
+        box-shadow: inset 0 0 3px $videoThumbnailSelected,
+        0 0 3px $videoThumbnailSelected;
+    }
+
+    #filmstripRemoteVideos {
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        width: 100vw;
+    }
+
+    .filmstrip__videos .videocontainer {
+        &:not(.active-speaker),
+        &:hover:not(.active-speaker) {
+            border: none;
+            box-shadow: none;
+        }
+    }
+
+    #remoteVideos {
+        /**
+         * Height is modified with an inline style in horizontal filmstrip mode
+         * so !important is used to override that.
+         */
+        height: 100% !important;
+        width: 100%;
+    }
+
+    .filmstrip {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: $filmstripVideosZ
+    }
+
+    /**
+     * Regardless of the user setting, do not let the filmstrip be in a hidden
+     * state.
+     */
+    .filmstrip__videos.hidden {
+        display: block;
+    }
+
+    #filmstripRemoteVideos {
+        box-sizing: border-box;
+
+        /**
+         * Allow scrolling of the thumbnails.
+         */
+        overflow: auto;
+    }
+
+    /**
+     * The size of the thumbnails should be set with javascript, based on
+     * desired column count and window width. The rows are created using flex
+     * and allowing the thumbnails to wrap.
+     */
+    #filmstripRemoteVideosContainer {
+        align-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        height: 100vh;
+        justify-content: center;
+        padding: 100px 0;
+
+        .videocontainer {
+            box-sizing: border-box;
+            display: block;
+            margin: 5px;
+        }
+
+        video {
+            object-fit: contain;
+        }
+    }
+
+    .has-overflow#filmstripRemoteVideosContainer {
+        align-content: baseline;
+    }
+
+    .has-overflow .videocontainer {
+        align-self: baseline;
+    }
+
+    /**
+     * Firefox flex acts a little differently. To make sure the bottom row of
+     * thumbnails is not overlapped by the horizontal toolbar, margin is added
+     * to the local thumbnail to keep it from the bottom of the screen. It is
+     * assumed the local thumbnail will always be on the bottom row.
+     */
+    .has-overflow #localVideoContainer {
+        margin-bottom: 100px !important;
+    }
+}

css/filmstrip/_tile_view_overrides.scss

+/**
+ * Various overrides outside of the filmstrip to style the app to support a
+ * tiled thumbnail experience.
+ */
+.tile-view {
+    /**
+     * Let the avatar grow with the tile.
+     */
+    .userAvatar {
+        max-height: initial;
+        max-width: initial;
+    }
+
+    /**
+     * Hide various features that should not be displayed while in tile view.
+     */
+    #dominantSpeaker,
+    #filmstripLocalVideoThumbnail,
+    #largeVideoElementsContainer,
+    #sharedVideo,
+    .filmstrip__toolbar {
+        display: none;
+    }
+
+    #localConnectionMessage,
+    #remoteConnectionMessage,
+    .watermark {
+        z-index: $filmstripVideosZ + 1;
+    }
+
+    /**
+     * The follow styling uses !important to override inline styles set with
+     * javascript.
+     *
+     * TODO: These overrides should be more easy to remove and should be removed
+     * when the components are in react so their rendering done declaratively,
+     * making conditional styling easier to apply.
+     */
+    #largeVideoElementsContainer,
+    #remoteConnectionMessage,
+    #remotePresenceMessage {
+        display: none !important;
+    }
+    #largeVideoContainer {
+        background-color: $defaultBackground !important;
+    }
+}

css/main.scss

 @import 'filmstrip/filmstrip_toolbar';
 @import 'filmstrip/horizontal_filmstrip';
 @import 'filmstrip/small_video';
+@import 'filmstrip/tile_view';
+@import 'filmstrip/tile_view_overrides';
 @import 'filmstrip/vertical_filmstrip';
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'unsupported-browser/main';

interface_config.js

         'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
         'fodeviceselection', 'hangup', 'profile', 'info', 'chat', 'recording',
         'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
-        'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts'
+        'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
+        'tileview'
     ],
 
     SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile' ],
      */
     RECENT_LIST_ENABLED: true
 
+    /**
+     * How many columns the tile view can expand to. The respected range is
+     * between 1 and 5.
+     */
+    // TILE_VIEW_MAX_COLUMNS: 5,
+
     /**
      * Specify custom URL for downloading android mobile app.
      */

lang/main.json

             "shortcuts": "Toggle shortcuts",
             "speakerStats": "Toggle speaker statistics",
             "toggleCamera": "Toggle camera",
+            "tileView": "Toggle tile view",
             "videomute": "Toggle mute video"
         },
         "addPeople": "Add people to your call",
         "raiseHand": "Raise / Lower your hand",
         "shortcuts": "View shortcuts",
         "speakerStats": "Speaker stats",
+        "tileViewToggle": "Toggle tile view",
         "invite": "Invite people"
     },
     "chat":{

modules/FollowMe.js

     getPinnedParticipant,
     pinParticipant
 } from '../react/features/base/participants';
+import { setTileView } from '../react/features/video-layout';
 import UIEvents from '../service/UI/UIEvents';
 import VideoLayout from './UI/videolayout/VideoLayout';
 
         }
     }
 
+    /**
+     * A getter for this object instance to know the state of tile view.
+     *
+     * @returns {boolean} True if tile view is enabled.
+     */
+    get tileViewEnabled() {
+        return this._tileViewEnabled;
+    }
+
+    /**
+     * A setter for {@link tileViewEnabled}. Fires a property change event for
+     * other participants to follow.
+     *
+     * @param {boolean} b - Whether or not tile view is enabled.
+     * @returns {void}
+     */
+    set tileViewEnabled(b) {
+        const oldValue = this._tileViewEnabled;
+
+        if (oldValue !== b) {
+            this._tileViewEnabled = b;
+            this._firePropertyChange('tileViewEnabled', oldValue, b);
+        }
+    }
+
     /**
      * Invokes {_propertyChangeCallback} to notify it that {property} had its
      * value changed from {oldValue} to {newValue}.
             this._sharedDocumentToggled
                 .bind(this, this._UI.getSharedDocumentManager().isVisible());
         }
+
+        this._tileViewToggled.bind(
+            this,
+            APP.store.getState()['features/video-layout'].tileViewEnabled);
     }
 
     /**
         this.sharedDocEventHandler = this._sharedDocumentToggled.bind(this);
         this._UI.addListener(UIEvents.TOGGLED_SHARED_DOCUMENT,
                             this.sharedDocEventHandler);
+
+        this.tileViewEventHandler = this._tileViewToggled.bind(this);
+        this._UI.addListener(UIEvents.TOGGLED_TILE_VIEW,
+              this.tileViewEventHandler);
     }
 
     /**
                                 this.sharedDocEventHandler);
         this._UI.removeListener(UIEvents.PINNED_ENDPOINT,
                                 this.pinnedEndpointEventHandler);
+        this._UI.removeListener(UIEvents.TOGGLED_TILE_VIEW,
+                                this.tileViewEventHandler);
     }
 
     /**
         this._local.sharedDocumentVisible = sharedDocumentVisible;
     }
 
+    /**
+     * Notifies this instance that the tile view mode has been enabled or
+     * disabled.
+     *
+     * @param {boolean} enabled - True if tile view has been enabled, false
+     * if has been disabled.
+     * @returns {void}
+     */
+    _tileViewToggled(enabled) {
+        this._local.tileViewEnabled = enabled;
+    }
+
     /**
      * Changes the nextOnStage property value.
      *
                     attributes: {
                         filmstripVisible: local.filmstripVisible,
                         nextOnStage: local.nextOnStage,
-                        sharedDocumentVisible: local.sharedDocumentVisible
+                        sharedDocumentVisible: local.sharedDocumentVisible,
+                        tileViewEnabled: local.tileViewEnabled
                     }
                 });
     }
         this._onFilmstripVisible(attributes.filmstripVisible);
         this._onNextOnStage(attributes.nextOnStage);
         this._onSharedDocumentVisible(attributes.sharedDocumentVisible);
+        this._onTileViewEnabled(attributes.tileViewEnabled);
     }
 
     /**
         }
     }
 
+    /**
+     * Process a tile view enabled / disabled event received from FOLLOW-ME.
+     *
+     * @param {boolean} enabled - Whether or not tile view should be shown.
+     * @private
+     * @returns {void}
+     */
+    _onTileViewEnabled(enabled) {
+        if (typeof enabled === 'undefined') {
+            return;
+        }
+
+        APP.store.dispatch(setTileView(enabled === 'true'));
+    }
+
     /**
      * Pins / unpins the video thumbnail given by clickId.
      *

modules/UI/shared_video/SharedVideoThumb.js

-/* global $ */
+/* global $, APP */
+import { shouldDisplayTileView } from '../../../react/features/video-layout';
+
 import SmallVideo from '../videolayout/SmallVideo';
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
  * The thumb click handler.
  */
 SharedVideoThumb.prototype.videoClick = function() {
-    this._togglePin();
+    if (!shouldDisplayTileView(APP.store.getState())) {
+        this._togglePin();
+    }
 };
 
 /**

modules/UI/videolayout/Filmstrip.js

 /* global $, APP, interfaceConfig */
 
 import { setFilmstripVisible } from '../../../react/features/filmstrip';
+import {
+    LAYOUTS,
+    getCurrentLayout,
+    getMaxColumnCount,
+    getTileViewGridDimensions,
+    shouldDisplayTileView
+} from '../../../react/features/video-layout';
 
 import UIEvents from '../../../service/UI/UIEvents';
 import UIUtil from '../util/UIUtil';
      * @returns {*|{localVideo, remoteVideo}}
      */
     calculateThumbnailSize() {
+        if (shouldDisplayTileView(APP.store.getState())) {
+            return this._calculateThumbnailSizeForTileView();
+        }
+
         const availableSizes = this.calculateAvailableSize();
         const width = availableSizes.availableWidth;
         const height = availableSizes.availableHeight;
      * @returns {{availableWidth: number, availableHeight: number}}
      */
     calculateAvailableSize() {
-        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
-        const thumbs = this.getThumbs(true);
-        const numvids = thumbs.remoteThumbs.length;
-
-        const localVideoContainer = $('#localVideoContainer');
+        const state = APP.store.getState();
+        const currentLayout = getCurrentLayout(state);
+        const isHorizontalFilmstripView
+            = currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
 
         /**
          * If the videoAreaAvailableWidth is set we use this one to calculate
             - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10)
             - 5;
 
+        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
         let availableWidth = videoAreaAvailableWidth;
 
+        const thumbs = this.getThumbs(true);
+
         // If local thumb is not hidden
         if (thumbs.localThumb) {
+            const localVideoContainer = $('#localVideoContainer');
+
             availableWidth = Math.floor(
                 videoAreaAvailableWidth - (
                     UIUtil.parseCssInt(
             );
         }
 
-        // If the number of videos is 0 or undefined or we're in vertical
+        // If the number of videos is 0 or undefined or we're not in horizontal
         // filmstrip mode we don't need to calculate further any adjustments
         // to width based on the number of videos present.
-        if (numvids && !interfaceConfig.VERTICAL_FILMSTRIP) {
+        const numvids = thumbs.remoteThumbs.length;
+
+        if (numvids && isHorizontalFilmstripView) {
             const remoteVideoContainer = thumbs.remoteThumbs.eq(0);
 
             availableWidth = Math.floor(
         availableHeight
             = Math.min(maxHeight, window.innerHeight - 18);
 
-        return { availableWidth,
-            availableHeight };
+        return {
+            availableHeight,
+            availableWidth
+        };
     },
 
     /**
         };
     },
 
+    /**
+     * Calculates the size for thumbnails when in tile view layout.
+     *
+     * @returns {{localVideo, remoteVideo}}
+     */
+    _calculateThumbnailSizeForTileView() {
+        const tileAspectRatio = 16 / 9;
+
+        // The distance from the top and bottom of the screen, as set by CSS, to
+        // avoid overlapping UI elements.
+        const topBottomPadding = 200;
+
+        // Minimum space to keep between the sides of the tiles and the sides
+        // of the window.
+        const sideMargins = 30 * 2;
+
+        const state = APP.store.getState();
+
+        const viewWidth = document.body.clientWidth - sideMargins;
+        const viewHeight = document.body.clientHeight - topBottomPadding;
+
+        const {
+            columns,
+            visibleRows
+        } = getTileViewGridDimensions(state, getMaxColumnCount());
+        const initialWidth = viewWidth / columns;
+        const aspectRatioHeight = initialWidth / tileAspectRatio;
+
+        const heightOfEach = Math.min(
+            aspectRatioHeight,
+            viewHeight / visibleRows);
+        const widthOfEach = tileAspectRatio * heightOfEach;
+
+        return {
+            localVideo: {
+                thumbWidth: widthOfEach,
+                thumbHeight: heightOfEach
+            },
+            remoteVideo: {
+                thumbWidth: widthOfEach,
+                thumbHeight: heightOfEach
+            }
+        };
+    },
+
     /**
      * Resizes thumbnails
      * @param local
      */
     // eslint-disable-next-line max-params
     resizeThumbnails(local, remote, forceUpdate = false) {
+        const state = APP.store.getState();
+
+        if (shouldDisplayTileView(state)) {
+            // The size of the side margins for each tile as set in CSS.
+            const sideMargins = 10 * 2;
+            const {
+                columns,
+                rows
+            } = getTileViewGridDimensions(state, getMaxColumnCount());
+            const hasOverflow = rows > columns;
+
+            // Width is set so that the flex layout can automatically wrap
+            // tiles onto new rows.
+            this.filmstripRemoteVideos.css({
+                width: (local.thumbWidth * columns) + (columns * sideMargins)
+            });
+
+            this.filmstripRemoteVideos.toggleClass('has-overflow', hasOverflow);
+        } else {
+            this.filmstripRemoteVideos.css('width', '');
+        }
+
         const thumbs = this.getThumbs(!forceUpdate);
 
         if (thumbs.localThumb) {
             });
         }
 
+        const currentLayout = getCurrentLayout(APP.store.getState());
+
         // Let CSS take care of height in vertical filmstrip mode.
-        if (interfaceConfig.VERTICAL_FILMSTRIP) {
+        if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
             $('#filmstripLocalVideo').css({
                 // adds 4 px because of small video 2px border
                 width: `${local.thumbWidth + 4}px`
             });
-        } else {
+        } else if (currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW) {
             this.filmstrip.css({
                 // adds 4 px because of small video 2px border
                 height: `${remote.thumbHeight + 4}px`

modules/UI/videolayout/LocalVideo.js

     getAvatarURLByParticipantId
 } from '../../../react/features/base/participants';
 import { updateSettings } from '../../../react/features/base/settings';
+import { shouldDisplayTileView } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
     this.streamEndedCallback = streamEndedCallback;
     this.container = this.createContainer();
     this.$container = $(this.container);
-    $('#filmstripLocalVideoThumbnail').append(this.container);
+    this.updateDOMLocation();
 
     this.localVideoId = null;
     this.bindHoverHandler();
 
     this.localVideoId = `localVideo_${stream.getId()}`;
 
-    const localVideoContainer = document.getElementById('localVideoWrapper');
-
-    ReactDOM.render(
-        <Provider store = { APP.store }>
-            <VideoTrack
-                id = { this.localVideoId }
-                videoTrack = {{ jitsiTrack: stream }} />
-        </Provider>,
-        localVideoContainer
-    );
+    this._updateVideoElement();
 
     // eslint-disable-next-line eqeqeq
     const isVideo = stream.videoType != 'desktop';
     this.setFlipX(isVideo ? settings.localFlipX : false);
 
     const endedHandler = () => {
+        const localVideoContainer
+            = document.getElementById('localVideoWrapper');
 
         // Only remove if there is no video and not a transition state.
         // Previous non-react logic created a new video element with each track
         // removal whereas react reuses the video component so it could be the
         // stream ended but a new one is being used.
-        if (this.videoStream.isEnded()) {
+        if (localVideoContainer && this.videoStream.isEnded()) {
             ReactDOM.unmountComponentAtNode(localVideoContainer);
         }
 
     }
 };
 
+/**
+ * Places the {@code LocalVideo} in the DOM based on the current video layout.
+ *
+ * @returns {void}
+ */
+LocalVideo.prototype.updateDOMLocation = function() {
+    if (!this.container) {
+        return;
+    }
+
+    if (this.container.parentElement) {
+        this.container.parentElement.removeChild(this.container);
+    }
+
+    const appendTarget = shouldDisplayTileView(APP.store.getState())
+        ? document.getElementById('localVideoTileViewContainer')
+        : document.getElementById('filmstripLocalVideoThumbnail');
+
+    appendTarget && appendTarget.appendChild(this.container);
+
+    this._updateVideoElement();
+};
+
 /**
  * Callback invoked when the thumbnail is clicked. Will directly call
  * VideoLayout to handle thumbnail click if certain elements have not been
         = $source.parents('.displayNameContainer').length > 0;
     const clickedOnPopover = $source.parents('.popover').length > 0
             || classList.contains('popover');
-    const ignoreClick = clickedOnDisplayName || clickedOnPopover;
+    const ignoreClick = clickedOnDisplayName
+        || clickedOnPopover
+        || shouldDisplayTileView(APP.store.getState());
 
     if (event.stopPropagation && !ignoreClick) {
         event.stopPropagation();
     }
 };
 
+/**
+ * Renders the React Element for displaying video in {@code LocalVideo}.
+ *
+ */
+LocalVideo.prototype._updateVideoElement = function() {
+    const localVideoContainer = document.getElementById('localVideoWrapper');
+
+    ReactDOM.render(
+        <Provider store = { APP.store }>
+            <VideoTrack
+                id = 'localVideo_container'
+                videoTrack = {{ jitsiTrack: this.videoStream }} />
+        </Provider>,
+        localVideoContainer
+    );
+
+    // Ensure the video gets play() called on it. This may be necessary in the
+    // case where the local video container was moved and re-attached, in which
+    // case video does not autoplay.
+    const video = this.container.querySelector('video');
+
+    video && video.play();
+};
+
 export default LocalVideo;

modules/UI/videolayout/RemoteVideo.js

     REMOTE_CONTROL_MENU_STATES,
     RemoteVideoMenuTriggerButton
 } from '../../../react/features/remote-video-menu';
+import {
+    LAYOUTS,
+    getCurrentLayout,
+    shouldDisplayTileView
+} from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
     const onVolumeChange = this._setAudioVolume;
     const { isModerator } = APP.conference;
     const participantID = this.id;
-    const menuPosition = interfaceConfig.VERTICAL_FILMSTRIP
-        ? 'left bottom' : 'top center';
+
+    const currentLayout = getCurrentLayout(APP.store.getState());
+    let remoteMenuPosition;
+
+    if (currentLayout === LAYOUTS.TILE_VIEW) {
+        remoteMenuPosition = 'left top';
+    } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+        remoteMenuPosition = 'left bottom';
+    } else {
+        remoteMenuPosition = 'top center';
+    }
 
     ReactDOM.render(
         <Provider store = { APP.store }>
                         initialVolumeValue = { initialVolumeValue }
                         isAudioMuted = { this.isAudioMuted }
                         isModerator = { isModerator }
-                        menuPosition = { menuPosition }
+                        menuPosition = { remoteMenuPosition }
                         onMenuDisplay
                             = {this._onRemoteVideoMenuDisplay.bind(this)}
                         onRemoteControlToggle = { onRemoteControlToggle }
     const { classList } = event.target;
 
     const ignoreClick = $source.parents('.popover').length > 0
-            || classList.contains('popover');
+            || classList.contains('popover')
+            || shouldDisplayTileView(APP.store.getState());
 
     if (!ignoreClick) {
         this._togglePin();

modules/UI/videolayout/SmallVideo.js

     RaisedHandIndicator,
     VideoMutedIndicator
 } from '../../../react/features/filmstrip';
+import {
+    LAYOUTS,
+    getCurrentLayout,
+    shouldDisplayTileView
+} from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 SmallVideo.prototype.updateStatusBar = function() {
     const statusBarContainer
         = this.container.querySelector('.videocontainer__toolbar');
-    const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
+
+    if (!statusBarContainer) {
+        return;
+    }
+
+    const currentLayout = getCurrentLayout(APP.store.getState());
+    let tooltipPosition;
+
+    if (currentLayout === LAYOUTS.TILE_VIEW) {
+        tooltipPosition = 'right';
+    } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+        tooltipPosition = 'left';
+    } else {
+        tooltipPosition = 'top';
+    }
 
     ReactDOM.render(
         <I18nextProvider i18n = { i18next }>
  */
 SmallVideo.prototype.selectDisplayMode = function() {
     // Display name is always and only displayed when user is on the stage
-    if (this.isCurrentlyOnLargeVideo()) {
+    if (this.isCurrentlyOnLargeVideo()
+        && !shouldDisplayTileView(APP.store.getState())) {
         return this.isVideoPlayable() && !APP.conference.isAudioOnly()
             ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
     } else if (this.isVideoPlayable()
 
     this._showDominantSpeaker = show;
 
+    this.$container.toggleClass('active-speaker', this._showDominantSpeaker);
+
     this.updateIndicators();
+    this.updateView();
 };
 
 /**
     }
 };
 
+/**
+ * Helper function for re-rendering multiple react components of the small
+ * video.
+ *
+ * @returns {void}
+ */
+SmallVideo.prototype.rerender = function() {
+    this.updateIndicators();
+    this.updateStatusBar();
+    this.updateView();
+};
+
 /**
  * Updates the React element responsible for showing connection status, dominant
  * speaker, and raised hand icons. Uses instance variables to get the necessary
     const iconSize = UIUtil.getIndicatorFontSize();
     const showConnectionIndicator = this.videoIsHovered
         || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
-    const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
+    const currentLayout = getCurrentLayout(APP.store.getState());
+    let statsPopoverPosition, tooltipPosition;
+
+    if (currentLayout === LAYOUTS.TILE_VIEW) {
+        statsPopoverPosition = 'right top';
+        tooltipPosition = 'right';
+    } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+        statsPopoverPosition = this.statsPopoverLocation;
+        tooltipPosition = 'left';
+    } else {
+        statsPopoverPosition = this.statsPopoverLocation;
+        tooltipPosition = 'top';
+    }
 
     ReactDOM.render(
             <I18nextProvider i18n = { i18next }>
                                 enableStatsDisplay
                                     = { !interfaceConfig.filmStripOnly }
                                 statsPopoverPosition
-                                    = { this.statsPopoverLocation }
+                                    = { statsPopoverPosition }
                                 userID = { this.id } />
                             : null }
                         { this._showRaisedHand

modules/UI/videolayout/VideoLayout.js

 /* global APP, $, interfaceConfig  */
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
+import {
+    getNearestReceiverVideoQualityLevel,
+    setMaxReceiverVideoQuality
+} from '../../../react/features/base/conference';
 import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
+import {
+    shouldDisplayTileView
+} from '../../../react/features/video-layout';
 import { SHARED_VIDEO_CONTAINER_TYPE } from '../shared_video/SharedVideo';
 import SharedVideoThumb from '../shared_video/SharedVideoThumb';
 
 
         Filmstrip.resizeThumbnails(localVideo, remoteVideo, forceUpdate);
 
+        if (shouldDisplayTileView(APP.store.getState())) {
+            const height
+                = (localVideo && localVideo.thumbHeight)
+                || (remoteVideo && remoteVideo.thumbnHeight)
+                || 0;
+            const qualityLevel = getNearestReceiverVideoQualityLevel(height);
+
+            APP.store.dispatch(setMaxReceiverVideoQuality(qualityLevel));
+        }
+
         if (onComplete && typeof onComplete === 'function') {
             onComplete();
         }
-
-        return { localVideo,
-            remoteVideo };
     },
 
     /**
         );
     },
 
+    /**
+     * Helper method to invoke when the video layout has changed and elements
+     * have to be re-arranged and resized.
+     *
+     * @returns {void}
+     */
+    refreshLayout() {
+        localVideoThumbnail && localVideoThumbnail.updateDOMLocation();
+        VideoLayout.resizeVideoArea();
+
+        localVideoThumbnail && localVideoThumbnail.rerender();
+        Object.values(remoteVideos).forEach(
+            remoteVideo => remoteVideo.rerender()
+        );
+    },
+
     /**
      * Triggers an update of large video if the passed in participant is
      * currently displayed on large video.

react/features/base/conference/functions.js

     AVATAR_ID_COMMAND,
     AVATAR_URL_COMMAND,
     EMAIL_COMMAND,
-    JITSI_CONFERENCE_URL_KEY
+    JITSI_CONFERENCE_URL_KEY,
+    VIDEO_QUALITY_LEVELS
 } from './constants';
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
             : joining);
 }
 
+/**
+ * Finds the nearest match for the passed in {@link availableHeight} to am
+ * enumerated value in {@code VIDEO_QUALITY_LEVELS}.
+ *
+ * @param {number} availableHeight - The height to which a matching video
+ * quality level should be found.
+ * @returns {number} The closest matching value from
+ * {@code VIDEO_QUALITY_LEVELS}.
+ */
+export function getNearestReceiverVideoQualityLevel(availableHeight: number) {
+    const qualityLevels = [
+        VIDEO_QUALITY_LEVELS.HIGH,
+        VIDEO_QUALITY_LEVELS.STANDARD,
+        VIDEO_QUALITY_LEVELS.LOW
+    ];
+
+    let selectedLevel = qualityLevels[0];
+
+    for (let i = 1; i < qualityLevels.length; i++) {
+        const previousValue = qualityLevels[i - 1];
+        const currentValue = qualityLevels[i];
+        const diffWithCurrent = Math.abs(availableHeight - currentValue);
+        const diffWithPrevious = Math.abs(availableHeight - previousValue);
+
+        if (diffWithCurrent < diffWithPrevious) {
+            selectedLevel = currentValue;
+        }
+    }
+
+    return selectedLevel;
+}
+
 /**
  * Handle an error thrown by the backend (i.e. lib-jitsi-meet) while
  * manipulating a conference participant (e.g. pin or select participant).

react/features/conference/components/Conference.web.js

 import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
 
+import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
+
 import { obtainConfig } from '../../base/config';
 import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { LargeVideo } from '../../large-video';
 import { NotificationsContainer } from '../../notifications';
 import { SidePanel } from '../../side-panel';
+import {
+    LAYOUTS,
+    getCurrentLayout,
+    shouldDisplayTileView
+} from '../../video-layout';
+
 import { default as Notice } from './Notice';
 import {
     Toolbox,
  * @private
  * @type {Object}
  */
-const LAYOUT_CLASSES = {
-    HORIZONTAL_FILMSTRIP: 'horizontal-filmstrip',
-    VERTICAL_FILMSTRIP: 'vertical-filmstrip'
+const LAYOUT_CLASSNAMES = {
+    [LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW]: 'horizontal-filmstrip',
+    [LAYOUTS.TILE_VIEW]: 'tile-view',
+    [LAYOUTS.VERTICAL_FILMSTRIP_VIEW]: 'vertical-filmstrip'
 };
 
 /**
      * The CSS class to apply to the root of {@link Conference} to modify the
      * application layout.
      */
-    _layoutModeClassName: string,
+    _layoutClassName: string,
 
     /**
      * Conference room name.
      */
     _room: string,
 
+    /**
+     * Whether or not the current UI layout should be in tile view.
+     */
+    _shouldDisplayTileView: boolean,
+
     dispatch: Function,
     t: Function
 }
         }
     }
 
+    /**
+     * Calls into legacy UI to update the application layout, if necessary.
+     *
+     * @inheritdoc
+     * returns {void}
+     */
+    componentDidUpdate(prevProps) {
+        if (this.props._shouldDisplayTileView
+            === prevProps._shouldDisplayTileView) {
+            return;
+        }
+
+        // TODO: For now VideoLayout is being called as LargeVideo and Filmstrip
+        // sizing logic is still handled outside of React. Once all components
+        // are in react they should calculate size on their own as much as
+        // possible and pass down sizings.
+        VideoLayout.refreshLayout();
+    }
+
     /**
      * Disconnect from the conference when component will be
      * unmounted.
 
         return (
             <div
-                className = { this.props._layoutModeClassName }
+                className = { this.props._layoutClassName }
                 id = 'videoconference_page'
                 onMouseMove = { this._onShowToolbar }>
                 <Notice />
  * @private
  * @returns {{
  *     _iAmRecorder: boolean,
- *     _room: ?string
+ *     _layoutClassName: string,
+ *     _room: ?string,
+ *     _shouldDisplayTileView: boolean
  * }}
  */
 function _mapStateToProps(state) {
-    const { room } = state['features/base/conference'];
-    const { iAmRecorder } = state['features/base/config'];
+    const currentLayout = getCurrentLayout(state);
 
     return {
-        /**
-         * Whether the local participant is recording the conference.
-         *
-         * @private
-         */
-        _iAmRecorder: iAmRecorder,
-
-        _layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP
-            ? LAYOUT_CLASSES.VERTICAL_FILMSTRIP
-            : LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP,
-
-        /**
-         * Conference room name.
-         */
-        _room: room
+        _iAmRecorder: state['features/base/config'].iAmRecorder,
+        _layoutClassName: LAYOUT_CLASSNAMES[currentLayout],
+        _room: state['features/base/conference'].room,
+        _shouldDisplayTileView: shouldDisplayTileView(state)
     };
 }
 

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

 
 import { setFilmstripHovered } from '../../actions';
 import { shouldRemoteVideosBeVisible } from '../../functions';
+
 import Toolbar from './Toolbar';
 
 declare var interfaceConfig: Object;
         && state['features/toolbox'].visible
         && interfaceConfig.TOOLBAR_BUTTONS.length;
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
-
     const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
-        reduceHeight ? 'reduce-height' : ''}`;
+        reduceHeight ? 'reduce-height' : ''}`.trim();
 
     return {
         _className: className,

react/features/large-video/actions.js

 } from '../analytics';
 import { _handleParticipantError } from '../base/conference';
 import { MEDIA_TYPE } from '../base/media';
+import { getParticipants } from '../base/participants';
 import { reportError } from '../base/util';
+import { shouldDisplayTileView } from '../video-layout';
 
 import {
     SELECT_LARGE_VIDEO_PARTICIPANT,
         const { conference } = state['features/base/conference'];
 
         if (conference) {
-            const largeVideo = state['features/large-video'];
-            const id = largeVideo.participantId;
+            const ids = shouldDisplayTileView(state)
+                ? getParticipants(state).map(participant => participant.id)
+                : [ state['features/large-video'].participantId ];
 
             try {
-                conference.selectParticipant(id);
+                conference.selectParticipants(ids);
             } catch (err) {
                 _handleParticipantError(err);
 
                 sendAnalytics(createSelectParticipantFailedEvent(err));
 
-                reportError(err, `Failed to select participant ${id}`);
+                reportError(
+                    err, `Failed to select participants ${ids.toString()}`);
             }
         }
     };

react/features/large-video/components/AbstractLabels.js

 
 import { isFilmstripVisible } from '../../filmstrip';
 import { RecordingLabel } from '../../recording';
+import { shouldDisplayTileView } from '../../video-layout';
 import { VideoQualityLabel } from '../../video-quality';
 import { TranscribingLabel } from '../../transcribing/';
 
     * determine display classes to set.
     */
     _filmstripVisible: boolean,
+
+    /**
+     * Whether or not the video quality label should be displayed.
+     */
+    _showVideoQualityLabel: boolean
 };
 
 /**
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _filmstripVisible: boolean
+ *     _filmstripVisible: boolean,
+ *     _showVideoQualityLabel: boolean
  * }}
  */
 export function _abstractMapStateToProps(state: Object) {
     return {
-        _filmstripVisible: isFilmstripVisible(state)
+        _filmstripVisible: isFilmstripVisible(state),
+        _showVideoQualityLabel: !shouldDisplayTileView(state)
     };
 }

react/features/large-video/components/Labels.web.js

                     this._renderTranscribingLabel()
                 }
                 {
-                    this._renderVideoQualityLabel()
+                    this.props._showVideoQualityLabel
+                        && this._renderVideoQualityLabel()
                 }
             </div>
         );

react/features/large-video/components/LargeVideo.web.js

                 </div>
                 <div id = 'remotePresenceMessage' />
                 <span id = 'remoteConnectionMessage' />
-                <div>
+                <div id = 'largeVideoElementsContainer'>
                     <div id = 'largeVideoBackgroundContainer' />
                     {
 

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

 import { toggleSharedVideo } from '../../../shared-video';
 import { toggleChat } from '../../../side-panel';
 import { SpeakerStats } from '../../../speaker-stats';
+import { TileViewButton } from '../../../video-layout';
 import {
     OverflowMenuVideoQualityItem,
     VideoQualityDialog
                         visible = { this._shouldShowButton('camera') } />
                 </div>
                 <div className = 'button-group-right'>
+                    { this._shouldShowButton('tileview')
+                        && <TileViewButton /> }
                     { this._shouldShowButton('invite')
                         && !_hideInviteButton
                         && <ToolbarButton

react/features/video-layout/actionTypes.js

+/**
+ * The type of the action which enables or disables the feature for showing
+ * video thumbnails in a two-axis tile view.
+ *
+ * @returns {{
+ *     type: SET_TILE_VIEW,
+ *     enabled: boolean
+ * }}
+ */
+export const SET_TILE_VIEW = Symbol('SET_TILE_VIEW');

react/features/video-layout/actions.js

+// @flow
+
+import { SET_TILE_VIEW } from './actionTypes';
+
+/**
+ * Creates a (redux) action which signals to set the UI layout to be tiled view
+ * or not.
+ *
+ * @param {boolean} enabled - Whether or not tile view should be shown.
+ * @returns {{
+ *     type: SET_TILE_VIEW,
+ *     enabled: boolean
+ * }}
+ */
+export function setTileView(enabled: boolean) {
+    return {
+        type: SET_TILE_VIEW,
+        enabled
+    };
+}

react/features/video-layout/components/TileViewButton.js

+// @flow
+
+import { connect } from 'react-redux';
+
+import {
+    createToolbarEvent,
+    sendAnalytics
+} from '../../analytics';
+import { translate } from '../../base/i18n';
+import {
+    AbstractButton,
+    type AbstractButtonProps
+} from '../../base/toolbox';
+
+import { setTileView } from '../actions';
+
+/**
+ * The type of the React {@code Component} props of {@link TileViewButton}.
+ */
+type Props = AbstractButtonProps & {
+
+    /**
+     * Whether or not tile view layout has been enabled as the user preference.
+     */
+    _tileViewEnabled: boolean,
+
+    /**
+     * Used to dispatch actions from the buttons.
+     */
+    dispatch: Dispatch<*>
+};
+
+/**
+ * Component that renders a toolbar button for toggling the tile layout view.
+ *
+ * @extends AbstractButton
+ */
+class TileViewButton<P: Props> extends AbstractButton<P, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.tileView';
+    iconName = 'icon-tiles-many';
+    toggledIconName = 'icon-tiles-many toggled';
+    tooltip = 'toolbar.tileViewToggle';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _handleClick() {
+        const { _tileViewEnabled, dispatch } = this.props;
+
+        sendAnalytics(createToolbarEvent(
+            'tileview.button',
+            {
+                'is_enabled': _tileViewEnabled
+            }));
+
+        dispatch(setTileView(!_tileViewEnabled));
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props._tileViewEnabled;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code TileViewButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _tileViewEnabled: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _tileViewEnabled: state['features/video-layout'].tileViewEnabled
+    };
+}
+
+export default translate(connect(_mapStateToProps)(TileViewButton));

react/features/video-layout/components/index.js

+export { default as TileViewButton } from './TileViewButton';

react/features/video-layout/constants.js

+/**
+ * An enumeration of the different display layouts supported by the application.
+ *
+ * @type {Object}
+ */
+export const LAYOUTS = {
+    HORIZONTAL_FILMSTRIP_VIEW: 'horizontal-filmstrip-view',
+    TILE_VIEW: 'tile-view',
+    VERTICAL_FILMSTRIP_VIEW: 'vertical-filmstrip-view'
+};

react/features/video-layout/functions.js

+// @flow
+
+import { LAYOUTS } from './constants';
+
+declare var interfaceConfig: Object;
+
+/**
+ * Returns the {@code LAYOUTS} constant associated with the layout
+ * the application should currently be in.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {string}
+ */
+export function getCurrentLayout(state: Object) {
+    if (shouldDisplayTileView(state)) {
+        return LAYOUTS.TILE_VIEW;
+    } else if (interfaceConfig.VERTICAL_FILMSTRIP) {
+        return LAYOUTS.VERTICAL_FILMSTRIP_VIEW;
+    }
+
+    return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
+}
+
+/**
+ * Returns how many columns should be displayed in tile view. The number
+ * returned will be between 1 and 5, inclusive.
+ *
+ * @returns {number}
+ */
+export function getMaxColumnCount() {
+    const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || 5;
+
+    return Math.max(Math.min(configuredMax, 1), 5);
+}
+
+/**
+ * Returns the cell count dimensions for tile view. Tile view tries to uphold
+ * equal count of tiles for height and width, until maxColumn is reached in
+ * which rows will be added but no more columns.
+ *
+ * @param {Object} state - The redux state.
+ * @param {number} maxColumns - The maximum number of columns that can be
+ * displayed.
+ * @returns {Object} An object is return with the desired number of columns,
+ * rows, and visible rows (the rest should overflow) for the tile view layout.
+ */
+export function getTileViewGridDimensions(state: Object, maxColumns: number) {
+    // Purposefully include all participants, which includes fake participants
+    // that should show a thumbnail.
+    const potentialThumbnails = state['features/base/participants'].length;
+
+    const columnsToMaintainASquare = Math.ceil(Math.sqrt(potentialThumbnails));
+    const columns = Math.min(columnsToMaintainASquare, maxColumns);
+    const rows = Math.ceil(potentialThumbnails / columns);
+    const visibleRows = Math.min(maxColumns, rows);
+
+    return {
+        columns,
+        rows,
+        visibleRows
+    };
+}
+
+/**
+ * Selector for determining if the UI layout should be in tile view. Tile view
+ * is determined by more than just having the tile view setting enabled, as
+ * one-on-one calls should not be in tile view, as well as etherpad editing.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean} True if tile view should be displayed.
+ */
+export function shouldDisplayTileView(state: Object = {}) {
+    return Boolean(
+        state['features/video-layout']
+            && state['features/video-layout'].tileViewEnabled
+            && !state['features/etherpad'].editing
+    );
+}

react/features/video-layout/index.js

+export * from './actions';
+export * from './actionTypes';
+export * from './components';
+export * from './constants';
+export * from './functions';
+
 import './middleware';
+import './reducer';
+import './subscriber';

react/features/video-layout/middleware.web.js

 import { MiddlewareRegistry } from '../base/redux';
 import { TRACK_ADDED } from '../base/tracks';
 
+import { SET_TILE_VIEW } from './actionTypes';
+
 declare var APP: Object;
 
 /**
             Boolean(action.participant.id));
         break;
 
+    case SET_TILE_VIEW:
+        APP.UI.emitEvent(UIEvents.TOGGLED_TILE_VIEW, action.enabled);
+        break;
+
     case TRACK_ADDED:
         if (!action.track.local) {
             VideoLayout.onRemoteStreamAdded(action.track.jitsiTrack);

react/features/video-layout/reducer.js

+// @flow
+
+import { ReducerRegistry } from '../base/redux';
+
+import { SET_TILE_VIEW } from './actionTypes';
+
+ReducerRegistry.register('features/video-layout', (state = {}, action) => {
+    switch (action.type) {
+    case SET_TILE_VIEW:
+        return {
+            ...state,
+            tileViewEnabled: action.enabled
+        };
+    }
+
+    return state;
+});

react/features/video-layout/subscriber.js

+// @flow
+
+import {
+    VIDEO_QUALITY_LEVELS,
+    setMaxReceiverVideoQuality
+} from '../base/conference';
+import { StateListenerRegistry } from '../base/redux';
+import { selectParticipant } from '../large-video';
+import { shouldDisplayTileView } from './functions';
+
+/**
+ * StateListenerRegistry provides a reliable way of detecting changes to
+ * preferred layout state and dispatching additional actions.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => shouldDisplayTileView(state),
+    /* listener */ (displayTileView, { dispatch }) => {
+        dispatch(selectParticipant());
+
+        if (!displayTileView) {
+            dispatch(setMaxReceiverVideoQuality(VIDEO_QUALITY_LEVELS.HIGH));
+        }
+    }
+);

service/UI/UIEvents.js

     TOGGLED_FILMSTRIP: 'UI.toggled_filmstrip',
     TOGGLE_SCREENSHARING: 'UI.toggle_screensharing',
     TOGGLED_SHARED_DOCUMENT: 'UI.toggled_shared_document',
+    TOGGLED_TILE_VIEW: 'UI.toggled_tile_view',
     HANGUP: 'UI.hangup',
     LOGOUT: 'UI.logout',
     VIDEO_DEVICE_CHANGED: 'UI.video_device_changed',