ref(StatusIndicators): isScreenSharing -> redux.

modules/UI/videolayout/SmallVideo.js

@@ -19,7 +19,11 @@ import {
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
-import { isLocalTrackMuted, isRemoteTrackMuted } from '../../../react/features/base/tracks';
+import {
+    getTrackByMediaTypeAndParticipant,
+    isLocalTrackMuted,
+    isRemoteTrackMuted
+} from '../../../react/features/base/tracks';
 import { ConnectionIndicator } from '../../../react/features/connection-indicator';
 import { DisplayName } from '../../../react/features/display-name';
 import {
@@ -85,7 +89,6 @@ export default class SmallVideo {
      * Constructor.
      */
     constructor(VideoLayout) {
-        this.isScreenSharing = false;
         this.videoStream = null;
         this.audioStream = null;
         this.VideoLayout = VideoLayout;
@@ -217,22 +220,6 @@ export default class SmallVideo {
         this.updateIndicators();
     }
 
-    /**
-     * 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) {
-        if (isScreenSharing === this.isScreenSharing) {
-            return;
-        }
-
-        this.isScreenSharing = isScreenSharing;
-        this.updateView();
-        this.updateStatusBar();
-    }
-
     /**
      * Create or updates the ReactElement for displaying status indicators about
      * audio mute, video mute, and moderator status.
@@ -250,7 +237,6 @@ export default class SmallVideo {
             <Provider store = { APP.store }>
                 <I18nextProvider i18n = { i18next }>
                     <StatusIndicators
-                        showScreenShareIndicator = { this.isScreenSharing }
                         participantID = { this.id } />
                 </I18nextProvider>
             </Provider>,
@@ -466,18 +452,29 @@ export default class SmallVideo {
      * @returns {Object}
      */
     computeDisplayModeInput() {
+        let isScreenSharing = false;
+        const state = APP.store.getState();
+        const participant = getParticipantById(state, this.id);
+
+        if (typeof participant !== 'undefined' && !participant.isFakeParticipant && !participant.local) {
+            const tracks = state['features/base/tracks'];
+            const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, this.id);
+
+            isScreenSharing = typeof track !== 'undefined' && track.videoType === 'desktop';
+        }
+
         return {
             isCurrentlyOnLargeVideo: this.isCurrentlyOnLargeVideo(),
             isHovered: this._isHovered(),
             isAudioOnly: APP.conference.isAudioOnly(),
-            tileViewActive: shouldDisplayTileView(APP.store.getState()),
+            tileViewActive: shouldDisplayTileView(state),
             isVideoPlayable: this.isVideoPlayable(),
             hasVideo: Boolean(this.selectVideoElement().length),
             connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
             mutedWhileDisconnected: this.mutedWhileDisconnected,
             canPlayEventReceived: this._canPlayEventReceived,
             videoStream: Boolean(this.videoStream),
-            isScreenSharing: this.isScreenSharing,
+            isScreenSharing,
             videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
         };
     }

modules/UI/videolayout/VideoLayout.js

@@ -175,7 +175,7 @@ const VideoLayout = {
         // Make sure track's muted state is reflected
         if (stream.getType() !== 'audio') {
             this.onVideoMute(id);
-            remoteVideo.setScreenSharing(stream.videoType === 'desktop');
+            remoteVideo.updateView();
         }
     },
 
@@ -187,7 +187,7 @@ const VideoLayout = {
 
         if (remoteVideo) {
             remoteVideo.removeRemoteStreamElement(stream);
-            remoteVideo.setScreenSharing(false);
+            remoteVideo.updateView();
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
@@ -474,7 +474,7 @@ const VideoLayout = {
         }
 
         logger.info('Peer video type changed: ', id, newVideoType);
-        remoteVideo.setScreenSharing(newVideoType === 'desktop');
+        remoteVideo.updateView();
     },
 
     /**

react/features/filmstrip/components/web/StatusIndicators.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, getParticipantById, PARTICIPANT_ROLE } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
+import { getTrackByMediaTypeAndParticipant, isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
 import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
@@ -35,16 +35,16 @@ type Props = {
      */
     _showModeratorIndicator: 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.
      */
     _showVideoMutedIndicator: Boolean,
 
-    /**
-     * Indicates if the screen share indicator should be visible or not.
-     */
-    showScreenShareIndicator: Boolean,
-
     /**
      * The ID of the participant for which the status bar is rendered.
      */
@@ -68,7 +68,7 @@ class StatusIndicators extends Component<Props> {
             _currentLayout,
             _showAudioMutedIndicator,
             _showModeratorIndicator,
-            showScreenShareIndicator,
+            _showScreenShareIndicator,
             _showVideoMutedIndicator
         } = this.props;
         let tooltipPosition;
@@ -87,7 +87,7 @@ class StatusIndicators extends Component<Props> {
         return (
             <div>
                 { _showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
-                { showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
+                { _showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
                 { _showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
                 { _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
             </div>
@@ -116,11 +116,15 @@ function _mapStateToProps(state, ownProps) {
     const tracks = state['features/base/tracks'];
     let isVideoMuted = true;
     let isAudioMuted = true;
+    let isScreenSharing = false;
 
     if (participant?.local) {
         isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
         isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
     } else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
+        const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participantID);
+
+        isScreenSharing = typeof track !== 'undefined' && track.videoType === 'desktop';
         isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, participantID);
         isAudioMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID);
     }
@@ -130,6 +134,7 @@ function _mapStateToProps(state, ownProps) {
         _showAudioMutedIndicator: isAudioMuted,
         _showModeratorIndicator:
             !interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR,
+        _showScreenShareIndicator: isScreenSharing,
         _showVideoMutedIndicator: isVideoMuted
     };
 }