From 50fea44ce22897de0e2668f2dcf6d2cfe9ecfea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@gmail.com>
Date: Fri, 7 Apr 2017 17:26:51 +0200
Subject: [PATCH] [RN] Use rounded avatars in the film strip

Also move (native) avatar style to film-strip styles, since  that's where it
applies. This is analogous to how the large-view avatar is styled.
---
 .../base/participants/components/Avatar.native.js     |  4 +---
 react/features/base/participants/components/styles.js | 11 ++---------
 react/features/filmstrip/components/Thumbnail.js      |  1 +
 react/features/filmstrip/components/styles.js         | 11 +++++++++++
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/react/features/base/participants/components/Avatar.native.js b/react/features/base/participants/components/Avatar.native.js
index 9daa4f136..dd1a77f08 100644
--- a/react/features/base/participants/components/Avatar.native.js
+++ b/react/features/base/participants/components/Avatar.native.js
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { Image } from 'react-native';
 
-import { styles } from './styles';
-
 /**
  * Display a participant avatar.
  */
@@ -33,7 +31,7 @@ export default class Avatar extends Component {
                 // XXX Avatar is expected to display the whole image.
                 resizeMode = 'contain'
                 source = {{ uri: this.props.uri }}
-                style = { [ styles.avatar, this.props.style ] } />
+                style = { this.props.style } />
         );
     }
 }
diff --git a/react/features/base/participants/components/styles.js b/react/features/base/participants/components/styles.js
index c2179955b..23df688f3 100644
--- a/react/features/base/participants/components/styles.js
+++ b/react/features/base/participants/components/styles.js
@@ -4,19 +4,12 @@ import { createStyleSheet } from '../../styles';
  * The style of the avatar and participant view UI (components).
  */
 export const styles = createStyleSheet({
-    /**
-     * Avatar style.
-     */
-    avatar: {
-        flex: 1,
-        width: '100%'
-    },
-
     /**
      * ParticipantView style.
      */
     participantView: {
         alignItems: 'stretch',
-        flex: 1
+        flex: 1,
+        justifyContent: 'center'
     }
 });
diff --git a/react/features/filmstrip/components/Thumbnail.js b/react/features/filmstrip/components/Thumbnail.js
index 686a3a376..d0a32e82c 100644
--- a/react/features/filmstrip/components/Thumbnail.js
+++ b/react/features/filmstrip/components/Thumbnail.js
@@ -95,6 +95,7 @@ class Thumbnail extends Component {
                             = { audioTrack.jitsiTrack.getOriginalStream() } /> }
 
                 <ParticipantView
+                    avatarStyle = { styles.avatar }
                     participantId = { participantId }
                     showAvatar = { participantNotInLargeVideo }
                     showVideo = { participantNotInLargeVideo }
diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js
index 325e1caea..d7951cba8 100644
--- a/react/features/filmstrip/components/styles.js
+++ b/react/features/filmstrip/components/styles.js
@@ -4,6 +4,17 @@ import { BoxModel, ColorPalette } from '../../base/styles';
  * Filmstrip related styles common to both Web and native.
  */
 export const styles = {
+    /**
+     * Avatar style.
+     */
+    avatar: {
+        alignSelf: 'center',
+        borderRadius: 25,
+        flex: 0,
+        height: 50,
+        width: 50
+    },
+
     /**
      * Dominant speaker indicator style.
      */