rn,thumbnail: introduce screen-sharing indicator

react/features/base/avatar/components/Avatar.js

@@ -2,7 +2,6 @@
 
 import React, { PureComponent } from 'react';
 
-import { IconShareDesktop } from '../../icons';
 import { getParticipantById } from '../../participants';
 import { connect } from '../../redux';
 import { getAvatarColor, getInitials } from '../functions';
@@ -192,17 +191,10 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
     const { colorBase, displayName, participantId } = ownProps;
     const _participant: ?Object = participantId && getParticipantById(state, participantId);
     const _initialsBase = _participant?.name ?? displayName;
-    const screenShares = state['features/video-layout'].screenShares || [];
-
-    let _loadableAvatarUrl = _participant?.loadableAvatarUrl;
-
-    if (participantId && screenShares.includes(participantId)) {
-        _loadableAvatarUrl = IconShareDesktop;
-    }
 
     return {
         _initialsBase,
-        _loadableAvatarUrl,
+        _loadableAvatarUrl: _participant?.loadableAvatarUrl,
         colorBase: !colorBase && _participant ? _participant.id : colorBase
     };
 }

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

@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react';
+
+import { IconShareDesktop } from '../../../base/icons';
+import { BaseIndicator } from '../../../base/react';
+
+/**
+ * Thumbnail badge for displaying if a participant is sharing their screen.
+ *
+ * @returns {React$Element<any>}
+ */
+export default function ScreenShareIndicator() {
+    return (
+        <BaseIndicator
+            highlight = { false }
+            icon = { IconShareDesktop } />
+    );
+}

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

@@ -27,6 +27,7 @@ import AudioMutedIndicator from './AudioMutedIndicator';
 import DominantSpeakerIndicator from './DominantSpeakerIndicator';
 import ModeratorIndicator from './ModeratorIndicator';
 import RaisedHandIndicator from './RaisedHandIndicator';
+import ScreenShareIndicator from './ScreenShareIndicator';
 import VideoMutedIndicator from './VideoMutedIndicator';
 import styles, { AVATAR_SIZE } from './styles';
 
@@ -186,9 +187,10 @@ function Thumbnail(props: Props) {
             { !participant.isFakeParticipant && <Container style = { styles.thumbnailIndicatorContainer }>
                 { audioMuted
                     && <AudioMutedIndicator /> }
-
                 { videoMuted
                     && <VideoMutedIndicator /> }
+                { isScreenShare
+                    && <ScreenShareIndicator /> }
             </Container> }
 
         </Container>