From 4807badac83dc07446f19e2322ec28ba1872ad7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Thu, 16 Jul 2020 17:03:15 +0200
Subject: [PATCH] rn,thumbnail: introduce screen-sharing indicator

---
 .../features/base/avatar/components/Avatar.js | 10 +---------
 .../components/native/ScreenShareIndicator.js | 19 +++++++++++++++++++
 .../filmstrip/components/native/Thumbnail.js  |  4 +++-
 3 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 react/features/filmstrip/components/native/ScreenShareIndicator.js

diff --git a/react/features/base/avatar/components/Avatar.js b/react/features/base/avatar/components/Avatar.js
index bc4cca4a4..f3cfc7b01 100644
--- a/react/features/base/avatar/components/Avatar.js
+++ b/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
     };
 }
diff --git a/react/features/filmstrip/components/native/ScreenShareIndicator.js b/react/features/filmstrip/components/native/ScreenShareIndicator.js
new file mode 100644
index 000000000..a56c3980c
--- /dev/null
+++ b/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 } />
+    );
+}
diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js
index 4765bf58a..c03f91073 100644
--- a/react/features/filmstrip/components/native/Thumbnail.js
+++ b/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>