diff --git a/config.js b/config.js index 1c1dfe71d..d33151c8a 100644 --- a/config.js +++ b/config.js @@ -995,6 +995,9 @@ var config = { // If true, tile view will not be enabled automatically when the participants count threshold is reached. // disableTileView: true, + // If true, the tiles will be displayed contained within the available space rather than enlarged to cover it. + // disableTileEnlargement: true, + // Controls the visibility and behavior of the top header conference info labels. // If a label's id is not in any of the 2 arrays, it will not be visible at all on the header. // conferenceInfo: { diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js index 0992fd70b..3bb7e8d51 100644 --- a/react/features/base/config/configWhitelist.js +++ b/react/features/base/config/configWhitelist.js @@ -122,6 +122,7 @@ export default [ 'disableSimulcast', 'disableThirdPartyRequests', 'disableTileView', + 'disableTileEnlargement', 'displayJids', 'doNotStoreRoom', 'doNotFlipLocalVideo', diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js index 6104f071c..b266401df 100644 --- a/react/features/filmstrip/components/web/Thumbnail.js +++ b/react/features/filmstrip/components/web/Thumbnail.js @@ -114,6 +114,11 @@ export type Props = {| */ _disableLocalVideoFlip: boolean, + /** + * Indicates whether enlargement of tiles to fill the available space is disabled. + */ + _disableTileEnlargement: boolean, + /** * The display mode of the thumbnail. */ @@ -548,6 +553,7 @@ class Thumbnail extends Component { const { canPlayEventReceived } = this.state; const { _currentLayout, + _disableTileEnlargement, _height, _isHidden, _isScreenSharing, @@ -581,7 +587,7 @@ class Thumbnail extends Component { if (!_isScreenSharing) { if (canPlayEventReceived || _participant.local) { videoStyles = { - objectFit: _height < 320 && tileViewActive ? 'contain' : 'cover' + objectFit: (_height < 320 && tileViewActive) || _disableTileEnlargement ? 'contain' : 'cover' }; } else { videoStyles = { @@ -1124,6 +1130,7 @@ function _mapStateToProps(state, ownProps): Object { startSilent, defaultLocalDisplayName, disableLocalVideoFlip, + disableTileEnlargement, iAmRecorder, iAmSipGateway } = state['features/base/config']; @@ -1181,6 +1188,7 @@ function _mapStateToProps(state, ownProps): Object { _currentLayout, _defaultLocalDisplayName: defaultLocalDisplayName, _disableLocalVideoFlip: Boolean(disableLocalVideoFlip), + _disableTileEnlargement: Boolean(disableTileEnlargement), _isHidden: isLocal && iAmRecorder && !iAmSipGateway, _isAudioOnly: Boolean(state['features/base/audio-only'].enabled), _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,