fix(recorder): tile view

In the case of the recorder we were not taking into account that the
local thumbnail is not visible. This was braking the rendering  and
positioning of the thumbnails in tile view.

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

      */
     _filmstripHeight: number,
 
+    /**
+     * Whether this is a recorder or not.
+     */
+    _iAmRecorder: boolean,
+
     /**
      * Whether the filmstrip button is enabled.
      */
      * @returns {Object}
      */
     _calculateIndices(startIndex, stopIndex) {
-        const { _currentLayout, _thumbnailsReordered } = this.props;
+        const { _currentLayout, _iAmRecorder, _thumbnailsReordered } = this.props;
         let start = startIndex;
         let stop = stopIndex;
 
         if (_thumbnailsReordered) {
             // In tile view, the indices needs to be offset by 1 because the first thumbnail is that of the local
             // endpoint. The remote participants start from index 1.
-            if (_currentLayout === LAYOUTS.TILE_VIEW) {
+            if (!_iAmRecorder && _currentLayout === LAYOUTS.TILE_VIEW) {
                 start = Math.max(startIndex - 1, 0);
                 stop = stopIndex - 1;
             }
      * @returns {string} - The key.
      */
     _gridItemKey({ columnIndex, rowIndex }) {
-        const { _columns, _remoteParticipants, _remoteParticipantsLength, _thumbnailsReordered } = this.props;
+        const {
+            _columns,
+            _iAmRecorder,
+            _remoteParticipants,
+            _remoteParticipantsLength,
+            _thumbnailsReordered
+        } = this.props;
         const index = (rowIndex * _columns) + columnIndex;
 
         // When the thumbnails are reordered, local participant is inserted at index 0.
         const localIndex = _thumbnailsReordered ? 0 : _remoteParticipantsLength;
-        const remoteIndex = _thumbnailsReordered ? index - 1 : index;
+        const remoteIndex = _thumbnailsReordered && !_iAmRecorder ? index - 1 : index;
 
-        if (index > _remoteParticipantsLength) {
+        if (index > _remoteParticipantsLength - (_iAmRecorder ? 1 : 0)) {
             return `empty-${index}`;
         }
 
-        if (index === localIndex) {
+        if (!_iAmRecorder && index === localIndex) {
             return 'local';
         }
 
  */
 function _mapStateToProps(state) {
     const toolbarButtons = getToolbarButtons(state);
-    const { testing = {} } = state['features/base/config'];
+    const { testing = {}, iAmRecorder } = state['features/base/config'];
     const enableThumbnailReordering = testing.enableThumbnailReordering ?? true;
     const { visible, remoteParticipants } = state['features/filmstrip'];
     const reduceHeight = state['features/toolbox'].visible && toolbarButtons.length;
         _currentLayout,
         _filmstripHeight: remoteFilmstripHeight,
         _filmstripWidth: remoteFilmstripWidth,
+        _iAmRecorder: Boolean(iAmRecorder),
         _isFilmstripButtonEnabled: isButtonEnabled('filmstrip', state),
         _remoteParticipantsLength: remoteParticipants.length,
         _remoteParticipants: remoteParticipants,

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

         const { columns, rows } = gridDimensions;
         const index = (rowIndex * columns) + columnIndex;
         let horizontalOffset;
+        const { iAmRecorder } = state['features/base/config'];
+        const participantsLenght = remoteParticipantsLength + (iAmRecorder ? 0 : 1);
 
         if (rowIndex === rows - 1) { // center the last row
             const { width: thumbnailWidth } = thumbnailSize;
-            const { iAmRecorder } = state['features/base/config'];
-            const partialLastRowParticipantsNumber = (remoteParticipantsLength + (iAmRecorder ? 0 : 1)) % columns;
+            const partialLastRowParticipantsNumber = participantsLenght % columns;
 
             if (partialLastRowParticipantsNumber > 0) {
                 horizontalOffset = Math.floor((columns - partialLastRowParticipantsNumber) * (thumbnailWidth + 4) / 2);
             }
         }
 
-        if (index > remoteParticipantsLength) {
+        if (index > participantsLenght - 1) {
             return {};
         }
 
         // When the thumbnails are reordered, local participant is inserted at index 0.
         const localIndex = enableThumbnailReordering ? 0 : remoteParticipantsLength;
-        const remoteIndex = enableThumbnailReordering ? index - 1 : index;
+        const remoteIndex = enableThumbnailReordering && !iAmRecorder ? index - 1 : index;
 
-        if (index === localIndex) {
+        if (!iAmRecorder && index === localIndex) {
             return {
                 _participantID: 'local',
                 _horizontalOffset: horizontalOffset