haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Hristo Terezov 2021-09-17 17:50:57 -05:00
parent fc75fd9644
commit e791c4f70c
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
react/features/filmstrip/components/web/Filmstrip.js
View File

@ -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 <Props> {
* @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 <Props> {
* @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 <Props> {
*/
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,

11
react/features/filmstrip/components/web/ThumbnailWrapper.js
View File

@ -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