Separate local thumbnail in filmstrip (#2848)

* Separate local thumbnail in filmstrip

* style(Filmstrip.native): utilize full line length

react/features/filmstrip/components/Filmstrip.native.js

@@ -10,6 +10,7 @@ import {
     makeAspectRatioAware
 } from '../../base/responsive-ui';
 
+import LocalThumbnail from './LocalThumbnail';
 import styles from './styles';
 import Thumbnail from './Thumbnail';
 
@@ -68,10 +69,14 @@ class Filmstrip extends Component<Props> {
             <Container
                 style = { filmstripStyle }
                 visible = { this.props._visible }>
+                {
+                    !isNarrowAspectRatio_ && <LocalThumbnail />
+                }
                 <ScrollView
                     horizontal = { isNarrowAspectRatio_ }
                     showsHorizontalScrollIndicator = { false }
-                    showsVerticalScrollIndicator = { false }>
+                    showsVerticalScrollIndicator = { false }
+                    style = { styles.scrollView } >
                     {
                         /* eslint-disable react/jsx-wrap-multilines */
 
@@ -86,6 +91,9 @@ class Filmstrip extends Component<Props> {
                         /* eslint-enable react/jsx-wrap-multilines */
                     }
                 </ScrollView>
+                {
+                    isNarrowAspectRatio_ && <LocalThumbnail />
+                }
             </Container>
         );
     }
@@ -106,12 +114,7 @@ class Filmstrip extends Component<Props> {
         // in place and (2) it is not necessarily stable.
 
         const sortedParticipants = [
-
+            ...participants
-            // First put the local participant.
-            ...participants.filter(p => p.local),
-
-            // Then the remote participants, which are sorted by join order.
-            ...participants.filter(p => !p.local)
         ];
 
         if (isNarrowAspectRatio_) {
@@ -149,12 +152,12 @@ function _mapStateToProps(state) {
         _enabled: enabled,
 
         /**
-         * The participants in the conference.
+         * The remote participants in the conference.
          *
          * @private
          * @type {Participant[]}
          */
-        _participants: participants,
+        _participants: participants.filter(p => !p.local),
 
         /**
          * The indicator which determines whether the filmstrip is visible. The

react/features/filmstrip/components/LocalThumbnail.js

@@ -0,0 +1,63 @@
+// @flow
+
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { connect } from 'react-redux';
+
+import { getLocalParticipant } from '../../base/participants';
+
+import styles from './styles';
+import Thumbnail from './Thumbnail';
+
+type Props = {
+
+    /**
+     * The local participant.
+     */
+    _localParticipant: Object
+};
+
+/**
+ * Component to render a local thumbnail that can be separated from the
+ * remote thumbnails later.
+ */
+class LocalThumbnail extends Component<Props> {
+    /**
+     * Implements React Component's render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { _localParticipant } = this.props;
+
+        return (
+            <View style = { styles.localThumbnail }>
+                <Thumbnail participant = { _localParticipant } />
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated {@code LocalThumbnail}'s
+ * props.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     _localParticipant: Participant
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        /**
+         * The local participant.
+         *
+         * @private
+         * @type {Participant}
+         */
+        _localParticipant: getLocalParticipant(state)
+    };
+}
+
+export default connect(_mapStateToProps)(LocalThumbnail);

react/features/filmstrip/components/styles.js

@@ -9,7 +9,6 @@ export const AVATAR_SIZE = 50;
  * The base style of {@link Filmstrip} shared between narrow and wide versions.
  */
 const filmstrip = {
-    flexDirection: 'column',
     flexGrow: 0
 };
 
@@ -43,7 +42,8 @@ export default {
      */
     filmstripNarrow: {
         ...filmstrip,
-        alignItems: 'flex-end',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
         height: 90
     },
 
@@ -54,11 +54,23 @@ export default {
     filmstripWide: {
         ...filmstrip,
         bottom: 0,
+        flexDirection: 'column',
         left: 0,
         position: 'absolute',
         top: 0
     },
 
+    /**
+     * Container of the {@link LocalThumbnail}.
+     */
+    localThumbnail: {
+        alignContent: 'stretch',
+        alignSelf: 'stretch',
+        aspectRatio: 1,
+        flexShrink: 0,
+        flexDirection: 'row'
+    },
+
     /**
      * Moderator indicator style.
      */
@@ -70,6 +82,13 @@ export default {
         right: 4
     },
 
+    /**
+     * The style of the scrollview containing the remote thumbnails.
+     */
+    scrollView: {
+        flexGrow: 0
+    },
+
     /**
      * The style of a participant's Thumbnail which renders either the video or
      * the avatar of the associated participant.