From 3fa62c37576e26e37061b5f38db09b8b8958e0af Mon Sep 17 00:00:00 2001
From: Lyubomir Marinov <lyubomir.marinov@jitsi.org>
Date: Fri, 4 Nov 2016 13:13:26 -0500
Subject: [PATCH] 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.
---
 .../filmStrip/components/FilmStrip.js         | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/react/features/filmStrip/components/FilmStrip.js b/react/features/filmStrip/components/FilmStrip.js
index a492f99e9..204708ee9 100644
--- a/react/features/filmStrip/components/FilmStrip.js
+++ b/react/features/filmStrip/components/FilmStrip.js
@@ -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;
+    }
 }
 
 /**