From f34dde3376e849859420aeabe41549db0915c613 Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Tue, 3 May 2022 16:55:33 -0500 Subject: [PATCH] feat(tile-view): expand tiles from last row. If we have enough space on the last row we expand the width of the tiles up to 16:9 ratio. --- .../filmstrip/components/web/Thumbnail.js | 10 ++++ .../components/web/ThumbnailWrapper.js | 53 +++++++++++++++---- 2 files changed, 52 insertions(+), 11 deletions(-) diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js index 9f3740e37..ec6b3df2c 100644 --- a/react/features/filmstrip/components/web/Thumbnail.js +++ b/react/features/filmstrip/components/web/Thumbnail.js @@ -249,6 +249,12 @@ export type Props = {| */ style?: ?Object, + /** + * The width of the thumbnail. Used for expanding the width of the thumbnails on last row in case + * there is empty space. + */ + width?: number, + /** * Whether source name signaling is enabled. */ @@ -1256,6 +1262,10 @@ function _mapStateToProps(state, ownProps): Object { } } + if (ownProps.width) { + size._width = ownProps.width; + } + const { gifUrl: gifSrc } = getGifForParticipant(state, id); const mode = getGifDisplayMode(state); const participantId = isLocal ? getLocalParticipant(state).id : participantID; diff --git a/react/features/filmstrip/components/web/ThumbnailWrapper.js b/react/features/filmstrip/components/web/ThumbnailWrapper.js index d0ade1f73..a471dd760 100644 --- a/react/features/filmstrip/components/web/ThumbnailWrapper.js +++ b/react/features/filmstrip/components/web/ThumbnailWrapper.js @@ -7,6 +7,7 @@ import { getLocalParticipant } from '../../../base/participants'; import { connect } from '../../../base/redux'; import { shouldHideSelfView } from '../../../base/settings/functions.any'; import { getCurrentLayout, LAYOUTS } from '../../../video-layout'; +import { TILE_ASPECT_RATIO, TILE_HORIZONTAL_MARGIN } from '../../constants'; import { showGridInVerticalView, getActiveParticipantsIds } from '../../functions'; import Thumbnail from './Thumbnail'; @@ -41,6 +42,12 @@ type Props = { */ _stageFilmstrip: boolean, + /** + * The width of the thumbnail. Used for expanding the width of the thumbnails on last row in case + * there is empty space. + */ + _thumbnailWidth: number, + /** * The index of the column in tile view. */ @@ -94,6 +101,7 @@ class ThumbnailWrapper extends Component { _horizontalOffset = 0, _participantID, _stageFilmstrip, + _thumbnailWidth, style } = this.props; @@ -107,7 +115,8 @@ class ThumbnailWrapper extends Component { horizontalOffset = { _horizontalOffset } key = 'local' stageFilmstrip = { _stageFilmstrip } - style = { style } />); + style = { style } + width = { _thumbnailWidth } />); } if (_isLocalScreenShare) { @@ -117,7 +126,8 @@ class ThumbnailWrapper extends Component { key = 'localScreenShare' participantID = { _participantID } stageFilmstrip = { _stageFilmstrip } - style = { style } />); + style = { style } + width = { _thumbnailWidth } />); } return ( @@ -126,7 +136,8 @@ class ThumbnailWrapper extends Component { key = { `remote_${_participantID}` } participantID = { _participantID } stageFilmstrip = { _stageFilmstrip } - style = { style } />); + style = { style } + width = { _thumbnailWidth } />); } } @@ -169,8 +180,8 @@ function _mapStateToProps(state, ownProps) { } const { columns, rows } = gridDimensions; const index = (rowIndex * columns) + columnIndex; - let horizontalOffset; - const { iAmRecorder } = state['features/base/config']; + let horizontalOffset, thumbnailWidth; + const { iAmRecorder, disableTileEnlargement } = state['features/base/config']; const { localScreenShare } = state['features/base/participants']; const localParticipantsLength = localScreenShare ? 2 : 1; @@ -193,11 +204,27 @@ function _mapStateToProps(state, ownProps) { } if (rowIndex === rows - 1) { // center the last row - const { width: thumbnailWidth } = thumbnailSize; const partialLastRowParticipantsNumber = participantsLength % columns; if (partialLastRowParticipantsNumber > 0) { - horizontalOffset = Math.floor((columns - partialLastRowParticipantsNumber) * (thumbnailWidth + 4) / 2); + const { width, height } = thumbnailSize; + const availableWidth = columns * (width + TILE_HORIZONTAL_MARGIN); + let widthDifference = 0; + let widthToUse = width; + + if (!disableTileEnlargement) { + thumbnailWidth = Math.min( + (availableWidth / partialLastRowParticipantsNumber) - TILE_HORIZONTAL_MARGIN, + height * TILE_ASPECT_RATIO); + widthDifference = thumbnailWidth - width; + widthToUse = thumbnailWidth; + } + + horizontalOffset + = Math.floor((availableWidth + - (partialLastRowParticipantsNumber * (widthToUse + TILE_HORIZONTAL_MARGIN))) / 2 + ) + + (columnIndex * widthDifference); } } @@ -210,7 +237,8 @@ function _mapStateToProps(state, ownProps) { _disableSelfView: disableSelfView, _participantID: remoteParticipants[index] === localId ? 'local' : remoteParticipants[index], _horizontalOffset: horizontalOffset, - _stageFilmstrip: stageFilmstrip + _stageFilmstrip: stageFilmstrip, + _thumbnailWidth: thumbnailWidth }; } @@ -233,7 +261,8 @@ function _mapStateToProps(state, ownProps) { return { _disableSelfView: disableSelfView, _participantID: 'local', - _horizontalOffset: horizontalOffset + _horizontalOffset: horizontalOffset, + _thumbnailWidth: thumbnailWidth }; } @@ -242,13 +271,15 @@ function _mapStateToProps(state, ownProps) { _disableSelfView: disableSelfView, _isLocalScreenShare: true, _participantID: localScreenShare?.id, - _horizontalOffset: horizontalOffset + _horizontalOffset: horizontalOffset, + _thumbnailWidth: thumbnailWidth }; } return { _participantID: remoteParticipants[remoteIndex], - _horizontalOffset: horizontalOffset + _horizontalOffset: horizontalOffset, + _thumbnailWidth: thumbnailWidth }; }