web,small-video: introduce screen-sharing indicator

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>

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());

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 } />
+    );
+}

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>