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

[RN] Adjust filmstrip ordering based on aspect ratio 

When in wide aspect ratio,, show it with the local participant on top, and the
remote ones after, sorted by join order.
This commit is contained in:
Saúl Ibarra Corretgé 2017-12-14 11:38:27 +01:00 committed by Paweł Domas
parent 4a0e55b1f4
commit 7001208d87
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
react/features/filmstrip/components/Filmstrip.native.js
View File

@ -56,11 +56,14 @@ class Filmstrip extends Component<*> {
= isNarrowAspectRatio_
? styles.filmstripNarrow
: styles.filmstripWide;
const {
_participants: participants,
_visible: visible } = this.props;
return (
<Container
style = { filmstripStyle }
visible = { this.props._visible }>
visible = { visible }>
<ScrollView
horizontal = { isNarrowAspectRatio_ }
showsHorizontalScrollIndicator = { false }
@ -68,7 +71,7 @@ class Filmstrip extends Component<*> {
{
/* eslint-disable react/jsx-wrap-multilines */
this._sort(this.props._participants)
this._sort(participants, isNarrowAspectRatio_)
.map(p =>
<Thumbnail
key = { p.id }
@ -86,30 +89,30 @@ class Filmstrip extends Component<*> {
*
* @param {Participant[]} participants - The array of {@code Participant}s
* to sort in display order.
* @param {boolean} isNarrowAspectRatio_ - Indicates if the aspect ratio is
* wide or narrow.
* @private
* @returns {Participant[]} A new array containing the elements of the
* specified {@code participants} array sorted in display order.
*/
_sort(participants) {
_sort(participants, isNarrowAspectRatio_) {
// XXX Array.prototype.sort() is not appropriate because (1) it operates
// in place and (2) it is not necessarily stable.
const sortedParticipants = [];
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];
// First put the local participant.
...participants.filter(p => p.local),
p.local || sortedParticipants.push(p);
}
// Then the remote participants, which are sorted by join order.
...participants.filter(p => !p.local)
];
// 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);
if (isNarrowAspectRatio_) {
// When the narrow aspect ratio is used, we want to have the remote
// participants from right to left with the newest added/joined to
// the leftmost side. The local participant is the leftmost item.
sortedParticipants.reverse();
}
return sortedParticipants;