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

Fix thumbnail reordering 

Don't use Array.prototype.sort() because (1) it operates in place and,
thus, mutes the Redux state and (2) it is not necessarily stable and,
thus, unnecessarily shuffles the thumbnails.
This commit is contained in:
Lyubomir Marinov 2016-11-04 13:13:26 -05:00
parent 101c413a3c
commit 3fa62c3757
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
react/features/filmStrip/components/FilmStrip.js
View File

@ -33,18 +33,7 @@ class FilmStrip extends Component {
showsHorizontalScrollIndicator = { false }
showsVerticalScrollIndicator = { false }>
{
this.props.participants
// Group the remote participants so that the local
// participant does not appear in between remote
// participants.
.sort((a, b) => b.local - a.local)
// Have the local participant at the rightmost side.
// Then have the remote participants from right to
// left with the newest added/joined to the leftmost
// side.
.reverse()
this._sort(this.props.participants)
.map(p =>
<Thumbnail
key = { p.id }
@ -54,6 +43,40 @@ class FilmStrip extends Component {
</Container>
);
}
/**
* Sorts a specific array of <tt>Participant</tt>s in display order.
*
* @param {Participant[]} participants - The array of <tt>Participant</tt>s
* to sort in display order.
* @private
* @returns {Participant[]} A new array containing the elements of the
* specified <tt>participants</tt> array sorted in display order.
*/
_sort(participants) {
// XXX Array.prototype.sort() is not appropriate because (1) it operates
// in place and (2) it is not necessarily stable.
const sortedParticipants = [];
// Group the remote participants so that the local participant does not
// appear in between remote participants. Have the remote participants
// from right to left with the newest added/joined to the leftmost side.
for (let i = participants.length - 1; i >= 0; --i) {
const p = participants[i];
p.local || sortedParticipants.push(p);
}
// Have the local participant at the rightmost side.
for (let i = participants.length - 1; i >= 0; --i) {
const p = participants[i];
p.local && sortedParticipants.push(p);
}
return sortedParticipants;
}
}
/**