video-layout: fix calculating tile size for recorder

When the reccorder joins, they have a local participant, which is not rendered,
so don't count it towards the partcipant count used for computing the tile
sizes.

react/features/filmstrip/subscriber.web.js

@@ -15,7 +15,7 @@ StateListenerRegistry.register(
         const state = store.getState();
 
         if (shouldDisplayTileView(state)) {
-            const gridDimensions = getTileViewGridDimensions(state['features/base/participants'].length);
+            const gridDimensions = getTileViewGridDimensions(state);
             const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions;
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
 
@@ -41,7 +41,7 @@ StateListenerRegistry.register(
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
 
             store.dispatch(setTileViewDimensions(
-                getTileViewGridDimensions(state['features/base/participants'].length), {
+                getTileViewGridDimensions(state), {
                     clientHeight,
                     clientWidth
                 }));

react/features/video-layout/functions.js

@@ -39,13 +39,18 @@ export function getMaxColumnCount() {
  * equal count of tiles for height and width, until maxColumn is reached in
  * which rows will be added but no more columns.
  *
- * @param {number} numberOfParticipants - The number of participants including the fake participants.
+ * @param {Object} state - The redux store 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(numberOfParticipants: number, maxColumns: number = getMaxColumnCount()) {
+export function getTileViewGridDimensions(state: Object, maxColumns: number = getMaxColumnCount()) {
+    // When in tile view mode, we must discount ourselves (the local participant) because our
+    // tile is not visible.
+    const { iAmRecorder } = state['features/base/config'];
+    const numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
+
     const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
     const columns = Math.min(columnsToMaintainASquare, maxColumns);
     const rows = Math.ceil(numberOfParticipants / columns);