From e791c4f70cae7efb25a1e9b9a7a961aaa7c9f2d0 Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Fri, 17 Sep 2021 17:50:57 -0500 Subject: [PATCH] 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. --- .../filmstrip/components/web/Filmstrip.js | 26 ++++++++++++++----- .../components/web/ThumbnailWrapper.js | 11 ++++---- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/react/features/filmstrip/components/web/Filmstrip.js b/react/features/filmstrip/components/web/Filmstrip.js index 96da47d21..99cd0c928 100644 --- a/react/features/filmstrip/components/web/Filmstrip.js +++ b/react/features/filmstrip/components/web/Filmstrip.js @@ -64,6 +64,11 @@ type Props = { */ _filmstripHeight: number, + /** + * Whether this is a recorder or not. + */ + _iAmRecorder: boolean, + /** * Whether the filmstrip button is enabled. */ @@ -235,14 +240,14 @@ class Filmstrip extends PureComponent { * @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; } @@ -294,18 +299,24 @@ class Filmstrip extends PureComponent { * @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'; } @@ -528,7 +539,7 @@ class Filmstrip extends PureComponent { */ 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; @@ -596,6 +607,7 @@ function _mapStateToProps(state) { _currentLayout, _filmstripHeight: remoteFilmstripHeight, _filmstripWidth: remoteFilmstripWidth, + _iAmRecorder: Boolean(iAmRecorder), _isFilmstripButtonEnabled: isButtonEnabled('filmstrip', state), _remoteParticipantsLength: remoteParticipants.length, _remoteParticipants: remoteParticipants, diff --git a/react/features/filmstrip/components/web/ThumbnailWrapper.js b/react/features/filmstrip/components/web/ThumbnailWrapper.js index dd3525a0c..1e4d2a7f2 100644 --- a/react/features/filmstrip/components/web/ThumbnailWrapper.js +++ b/react/features/filmstrip/components/web/ThumbnailWrapper.js @@ -113,26 +113,27 @@ function _mapStateToProps(state, ownProps) { 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