Fix(React): Modifies thumbnail icon positions and layout

react/features/filmStrip/components/Thumbnail.js

@@ -86,6 +86,8 @@ class Thumbnail extends Component {
             };
         }
 
+        const thumbToolbarStyle = styles.thumbnailIndicatorContainer;
+
         // We don't render audio in any of the following:
         // 1. The audio (source) is muted. There's no practical reason (that we
         //    know of, anyway) why we'd want to render it given that it's
@@ -121,11 +123,13 @@ class Thumbnail extends Component {
                 { participant.dominantSpeaker
                     && <DominantSpeakerIndicator /> }
 
-                { audioMuted
-                    && <AudioMutedIndicator /> }
+                <Container style = { thumbToolbarStyle }>
+                    { audioMuted
+                        && <AudioMutedIndicator /> }
 
-                { videoMuted
-                    && <VideoMutedIndicator /> }
+                    { videoMuted
+                        && <VideoMutedIndicator /> }
+                </Container>
 
             </Container>
         );

react/features/filmStrip/components/native/AudioMutedIndicator.js

@@ -16,7 +16,7 @@ export class AudioMutedIndicator extends Component {
         return (
             <Icon
                 name = 'microphone-slash'
-                style = { styles.audioMutedIndicator } />
+                style = { styles.thumbnailIndicator } />
         );
     }
 }

react/features/filmStrip/components/native/VideoMutedIndicator.js

@@ -18,7 +18,7 @@ export class VideoMutedIndicator extends Component {
         return (
             <Icon
                 name = 'eye-slash'
-                style = { styles.videoMutedIndicator } />
+                style = { styles.thumbnailIndicator } />
         );
     }
 }

react/features/filmStrip/components/native/styles.js

@@ -22,14 +22,18 @@ export const styles = createStyleSheet(platformIndependentStyles, {
     /**
      * Audio muted indicator style.
      */
-    audioMutedIndicator: indicator,
+    thumbnailIndicator: indicator,
+
+    dominantSpeakerIndicator: {
+        fontSize: 12
+    },
 
     /**
      * Dominant speaker indicator background style.
      */
     dominantSpeakerIndicatorBackground: {
-        borderRadius: 15,
-        padding: 5
+        borderRadius: 16,
+        padding: 4
     },
 
     /**
@@ -43,10 +47,5 @@ export const styles = createStyleSheet(platformIndependentStyles, {
     thumbnail: {
         height: 80,
         width: 80
-    },
-
-   /**
-     * Video muted indicator style.
-     */
-    videoMutedIndicator: indicator
+    }
 });

react/features/filmStrip/components/styles.js

@@ -4,17 +4,6 @@ import { BoxModel, ColorPalette } from '../../base/styles';
  * Film strip related styles common to both Web and native.
  */
 export const styles = {
-    /**
-     * Audio muted indicator style.
-     */
-    audioMutedIndicator: {
-        backgroundColor: 'transparent',
-        color: ColorPalette.white,
-        left: 20,
-        position: 'absolute',
-        top: 1
-    },
-
     /**
      * Dominant speaker indicator style.
      */
@@ -29,10 +18,10 @@ export const styles = {
     dominantSpeakerIndicatorBackground: {
         backgroundColor: ColorPalette.blue,
         borderRadius: 15,
-        bottom: 2,
-        left: 1,
+        left: 4,
         padding: 5,
-        position: 'absolute'
+        position: 'absolute',
+        top: 4
     },
 
     /**
@@ -63,10 +52,10 @@ export const styles = {
      */
     moderatorIndicator: {
         backgroundColor: 'transparent',
+        bottom: 4,
         color: ColorPalette.white,
-        left: 1,
         position: 'absolute',
-        top: 1
+        right: 4
     },
 
     /**
@@ -76,14 +65,40 @@ export const styles = {
         alignItems: 'stretch',
         backgroundColor: ColorPalette.appBackground,
         borderColor: '#424242',
+        borderRadius: 3,
         borderStyle: 'solid',
         borderWidth: 1,
         flex: 1,
         justifyContent: 'center',
+        marginLeft: 2,
+        marginRight: 2,
         overflow: 'hidden',
         position: 'relative'
     },
 
+    /**
+     * The thumbnail audio and video muted indicator style.
+     */
+    thumbnailIndicator: {
+        backgroundColor: 'transparent',
+        color: ColorPalette.white,
+        paddingLeft: 1,
+        paddingRight: 1,
+        position: 'relative'
+    },
+
+    /**
+     * The thumbnails indicator container.
+     */
+    thumbnailIndicatorContainer: {
+        alignSelf: 'stretch',
+        bottom: 4,
+        flex: 1,
+        flexDirection: 'row',
+        left: 4,
+        position: 'absolute'
+    },
+
     /**
      * Pinned video thumbnail style.
      */
@@ -95,16 +110,5 @@ export const styles = {
             width: 5
         },
         shadowRadius: 5
-    },
-
-    /**
-     * Video muted indicator style.
-     */
-    videoMutedIndicator: {
-        backgroundColor: 'transparent',
-        color: ColorPalette.white,
-        left: 35,
-        position: 'absolute',
-        top: 1
     }
 };