From fdffb688c1f19f7697daf917f7e66d75ea44fbab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Fri, 17 Jul 2020 11:41:49 +0200
Subject: [PATCH] web,small-video: introduce screen-sharing indicator

---
 modules/UI/videolayout/SmallVideo.js          | 13 ++++++++
 modules/UI/videolayout/VideoLayout.js         |  8 +++++
 .../components/web/ScreenShareIndicator.js    | 33 +++++++++++++++++++
 .../components/web/StatusIndicators.js        |  8 +++++
 4 files changed, 62 insertions(+)
 create mode 100644 react/features/filmstrip/components/web/ScreenShareIndicator.js

diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index fbeb8ae64..e7e1146ca 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/modules/UI/videolayout/SmallVideo.js
@@ -83,6 +83,7 @@ export default class SmallVideo {
     constructor(VideoLayout) {
         this.isAudioMuted = false;
         this.isVideoMuted = false;
+        this.isScreenSharing = false;
         this.videoStream = null;
         this.audioStream = null;
         this.VideoLayout = VideoLayout;
@@ -234,6 +235,17 @@ export default class SmallVideo {
         this.updateStatusBar();
     }
 
+    /**
+     * Shows / hides the screen-share indicator over small videos.
+     *
+     * @param {boolean} isScreenSharing indicates if the screen-share element should be shown
+     * or hidden
+     */
+    setScreenSharing(isScreenSharing) {
+        this.isScreenSharing = isScreenSharing;
+        this.updateStatusBar();
+    }
+
     /**
      * Shows video muted indicator over small videos and disables/enables avatar
      * if video muted.
@@ -265,6 +277,7 @@ export default class SmallVideo {
                 <I18nextProvider i18n = { i18next }>
                     <StatusIndicators
                         showAudioMutedIndicator = { this.isAudioMuted }
+                        showScreenShareIndicator = { this.isScreenSharing }
                         showVideoMutedIndicator = { this.isVideoMuted }
                         participantID = { this.id } />
                 </I18nextProvider>
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 7f4c3bb72..623a23963 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -177,6 +177,10 @@ const VideoLayout = {
             this.onAudioMute(id, stream.isMuted());
         } else {
             this.onVideoMute(id, stream.isMuted());
+
+            if (stream.videoType === 'desktop') {
+                remoteVideo.setScreenSharing(true);
+            }
         }
     },
 
@@ -188,6 +192,10 @@ const VideoLayout = {
 
         if (remoteVideo) {
             remoteVideo.removeRemoteStreamElement(stream);
+
+            if (stream.videoType === 'desktop') {
+                remoteVideo.setScreenSharing(false);
+            }
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
diff --git a/react/features/filmstrip/components/web/ScreenShareIndicator.js b/react/features/filmstrip/components/web/ScreenShareIndicator.js
new file mode 100644
index 000000000..e22538dc6
--- /dev/null
+++ b/react/features/filmstrip/components/web/ScreenShareIndicator.js
@@ -0,0 +1,33 @@
+// @flow
+
+import React from 'react';
+
+import { IconShareDesktop } from '../../../base/icons';
+import { BaseIndicator } from '../../../base/react';
+
+
+type Props = {
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: string
+};
+
+/**
+ * React {@code Component} for showing a screen-sharing icon with a tooltip.
+ *
+ * @param {Props} props - React props passed to this component.
+ * @returns {React$Element<any>}
+ */
+export default function ScreenShareIndicator(props: Props) {
+    return (
+        <BaseIndicator
+            className = 'screenShare toolbar-icon'
+            icon = { IconShareDesktop }
+            iconId = 'share-desktop'
+            iconSize = { 13 }
+            tooltipKey = 'videothumbnail.videomute'
+            tooltipPosition = { props.tooltipPosition } />
+    );
+}
diff --git a/react/features/filmstrip/components/web/StatusIndicators.js b/react/features/filmstrip/components/web/StatusIndicators.js
index 8df063af0..1efc523a5 100644
--- a/react/features/filmstrip/components/web/StatusIndicators.js
+++ b/react/features/filmstrip/components/web/StatusIndicators.js
@@ -8,6 +8,7 @@ import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
 import ModeratorIndicator from './ModeratorIndicator';
+import ScreenShareIndicator from './ScreenShareIndicator';
 import VideoMutedIndicator from './VideoMutedIndicator';
 
 declare var interfaceConfig: Object;
@@ -32,6 +33,11 @@ type Props = {
      */
     showAudioMutedIndicator: Boolean,
 
+    /**
+     * Indicates if the screen share indicator should be visible or not.
+     */
+    showScreenShareIndicator: Boolean,
+
     /**
      * Indicates if the video muted indicator should be visible or not.
      */
@@ -60,6 +66,7 @@ class StatusIndicators extends Component<Props> {
             _currentLayout,
             _showModeratorIndicator,
             showAudioMutedIndicator,
+            showScreenShareIndicator,
             showVideoMutedIndicator
         } = this.props;
         let tooltipPosition;
@@ -78,6 +85,7 @@ class StatusIndicators extends Component<Props> {
         return (
             <div>
                 { showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
+                { showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
                 { showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
                 { _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
             </div>