fix(rn,filmstrip) simplify code

viewableItems always comes in order and indexes are always ascending. In
addition, if the array comes empty (I saw it happen on Android at least, when
scrolling like a maniac) we'd calculate the right value, instead of Infinity.
This commit is contained in:
Saúl Ibarra Corretgé 2021-08-31 16:40:55 +02:00 committed by Saúl Ibarra Corretgé
parent 36f604aab8
commit 20a1833c6c
2 changed files with 29 additions and 13 deletions

View File

@ -170,14 +170,24 @@ class Filmstrip extends PureComponent<Props> {
* @returns {void} * @returns {void}
*/ */
_onViewableItemsChanged({ viewableItems = [] }) { _onViewableItemsChanged({ viewableItems = [] }) {
const indexArray: Array<number> = viewableItems.map(i => i.index); if (!this._separateLocalThumbnail && viewableItems[0]?.index === 0) {
// Skip the local thumbnail.
viewableItems.shift();
}
// If the local video placed at the beginning we need to shift the start index of the remoteParticipants array if (viewableItems.length === 0) {
// with 1 because and in the same time we don't need to adjust the end index because the end index will not be // User might be fast-scrolling, it will stabilize.
// included. return;
const startIndex }
= this._separateLocalThumbnail ? Math.min(...indexArray) : Math.max(Math.min(...indexArray) - 1, 0);
const endIndex = Math.max(...indexArray) + (this._separateLocalThumbnail ? 1 : 0); let startIndex = viewableItems[0].index;
let endIndex = viewableItems[viewableItems.length - 1].index;
if (!this._separateLocalThumbnail) {
// We are off by one in the remote participants array.
startIndex -= 1;
endIndex -= 1;
}
this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex)); this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
} }

View File

@ -146,13 +146,19 @@ class TileView extends PureComponent<Props> {
* @returns {void} * @returns {void}
*/ */
_onViewableItemsChanged({ viewableItems = [] }: { viewableItems: Array<Object> }) { _onViewableItemsChanged({ viewableItems = [] }: { viewableItems: Array<Object> }) {
const indexArray = viewableItems.map(i => i.index); if (viewableItems[0]?.index === 0) {
// Skip the local thumbnail.
viewableItems.shift();
}
// We need to shift the start index of the remoteParticipants array with 1 because of the local video placed if (viewableItems.length === 0) {
// at the beginning and in the same time we don't need to adjust the end index because the end index will not be // User might be fast-scrolling, it will stabilize.
// included. return;
const startIndex = Math.max(Math.min(...indexArray) - 1, 0); }
const endIndex = Math.max(...indexArray);
// We are off by one in the remote participants array.
const startIndex = viewableItems[0].index - 1;
const endIndex = viewableItems[viewableItems.length - 1].index - 1;
this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex)); this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
} }