fix(multi-stream): fix virtual screenshare participant's thumbnail.

Add a screenshare status indicator at the bottom.
Fix the font and size of the resolution/fps stats so that it matches with that of the other thumbnails.

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -281,7 +281,7 @@ class ConnectionStatsTable extends Component<Props> {
      */
     _renderScreenShareStatus() {
         const { classes } = this.props;
-        const className = isMobileBrowser() ? 'connection-info connection-info__mobile' : 'connection-info';
+        const className = clsx(classes.connectionStatsTable, { [classes.mobile]: isMobileBrowser() });
 
         return (<ContextMenu
             className = { classes.contextMenu }
@@ -290,13 +290,10 @@ class ConnectionStatsTable extends Component<Props> {
             <div
                 className = { className }
                 onClick = { onClick }>
-                { <table className = 'connection-info__container'>
-                    <tbody>
-                        { this._renderResolution() }
-                        { this._renderFrameRate() }
-                    </tbody>
-                </table> }
-
+                <tbody>
+                    { this._renderResolution() }
+                    { this._renderFrameRate() }
+                </tbody>
             </div>
         </ContextMenu>);
     }

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

@@ -2,10 +2,16 @@
 
 import React, { Component } from 'react';
 
+import { getMultipleVideoSupportFeatureFlag } from '../../../base/config';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getParticipantByIdOrUndefined, PARTICIPANT_ROLE } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { getTrackByMediaTypeAndParticipant, isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
+import {
+    getTrackByMediaTypeAndParticipant,
+    getVirtualScreenshareParticipantTrack,
+    isLocalTrackMuted,
+    isRemoteTrackMuted
+} from '../../../base/tracks';
 import { getIndicatorsTooltipPosition } from '../../functions.web';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
@@ -83,9 +89,9 @@ class StatusIndicators extends Component<Props> {
  * @param {Object} ownProps - The own props of the component.
  * @private
  * @returns {{
- *     _currentLayout: string,
+ *     _showAudioMutedIndicator: boolean,
  *     _showModeratorIndicator: boolean,
- *     _showVideoMutedIndicator: boolean
+ *     _showScreenShareIndicator: boolean
  * }}
 */
 function _mapStateToProps(state, ownProps) {
@@ -93,15 +99,18 @@ function _mapStateToProps(state, ownProps) {
 
     // Only the local participant won't have id for the time when the conference is not yet joined.
     const participant = getParticipantByIdOrUndefined(state, participantID);
-
     const tracks = state['features/base/tracks'];
+    const isMultiStreamSupportEnabled = getMultipleVideoSupportFeatureFlag(state);
+
     let isAudioMuted = true;
     let isScreenSharing = false;
 
     if (participant?.local) {
         isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
     } else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
-        const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participantID);
+        const track = isMultiStreamSupportEnabled
+            ? getVirtualScreenshareParticipantTrack(tracks, participantID)
+            : getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participantID);
 
         isScreenSharing = track?.videoType === 'desktop';
         isAudioMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID);

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

@@ -137,10 +137,9 @@ export type Props = {|
     _isCurrentlyOnLargeVideo: boolean,
 
     /**
-     * Indicates whether the participant is a virtual screen share participant. This prop is behind the
-     * sourceNameSignaling feature flag.
+     * Disable/enable the dominant speaker indicator.
      */
-    _isVirtualScreenshareParticipant: boolean,
+    _isDominantSpeakerDisabled: boolean,
 
     /**
      * Whether we are currently running in a mobile browser.
@@ -158,19 +157,20 @@ export type Props = {|
     _isScreenSharing: boolean,
 
     /**
-     * Indicates whether the video associated with the thumbnail is playable.
+     * Indicates whether testing mode is enabled.
      */
-    _isVideoPlayable: boolean,
+    _isTestModeEnabled: boolean,
 
     /**
-     * Disable/enable the dominant speaker indicator.
+     * Indicates whether the video associated with the thumbnail is playable.
      */
-    _isDominantSpeakerDisabled: boolean,
+    _isVideoPlayable: boolean,
 
     /**
-     * Indicates whether testing mode is enabled.
+     * Indicates whether the participant is a virtual screen share participant. This prop is behind the
+     * sourceNameSignaling feature flag.
      */
-    _isTestModeEnabled: boolean,
+    _isVirtualScreenshareParticipant: boolean,
 
     /**
      * The current local video flip setting.
@@ -187,6 +187,11 @@ export type Props = {|
      */
     _raisedHand: boolean,
 
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean,
+
     /**
      * Whether or not the current layout is stage filmstrip layout.
      */
@@ -253,12 +258,7 @@ export type Props = {|
      * The width of the thumbnail. Used for expanding the width of the thumbnails on last row in case
      * there is empty space.
      */
-    width?: number,
-
-    /**
-     * Whether source name signaling is enabled.
-     */
-    _sourceNameSignalingEnabled: boolean
+    width?: number
 |};
 
 const defaultStyles = theme => {
@@ -1074,6 +1074,7 @@ class Thumbnail extends Component<Props, State> {
                     ) }>
                     <ThumbnailBottomIndicators
                         className = { classes.indicatorsBackground }
+                        isVirtualScreenshareParticipant = { false }
                         local = { local }
                         participantId = { id }
                         thumbnailType = { _thumbnailType } />
@@ -1138,6 +1139,7 @@ class Thumbnail extends Component<Props, State> {
                     classes = { classes }
                     containerClassName = { this._getContainerClassName() }
                     isHovered = { isHovered }
+                    isLocal = { local }
                     isMobile = { _isMobile }
                     onClick = { this._onClick }
                     onMouseEnter = { this._onMouseEnter }

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

@@ -4,7 +4,11 @@ import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { isDisplayNameVisible, isNameReadOnly } from '../../../base/config/functions.any';
+import {
+    getMultipleVideoSupportFeatureFlag,
+    isDisplayNameVisible,
+    isNameReadOnly
+} from '../../../base/config/functions.any';
 import DisplayName from '../../../display-name/components/web/DisplayName';
 import { THUMBNAIL_TYPE } from '../../constants';
 
@@ -19,6 +23,11 @@ type Props = {
      */
     className: string,
 
+    /**
+     * Whether it is a virtual screenshare participant thumbnail.
+     */
+    isVirtualScreenshareParticipant: boolean,
+
     /**
      * Whether or not the indicators are for the local participant.
      */
@@ -61,6 +70,7 @@ const useStyles = makeStyles(() => {
 
 const ThumbnailBottomIndicators = ({
     className,
+    isVirtualScreenshareParticipant,
     local,
     participantId,
     showStatusIndicators = true,
@@ -69,15 +79,18 @@ const ThumbnailBottomIndicators = ({
     const styles = useStyles();
     const _allowEditing = !useSelector(isNameReadOnly);
     const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
+    const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);
     const _showDisplayName = useSelector(isDisplayNameVisible);
 
     return (<div className = { className }>
         {
             showStatusIndicators && <StatusIndicators
-                audio = { true }
+                audio = { !isVirtualScreenshareParticipant }
                 moderator = { true }
                 participantID = { participantId }
-                screenshare = { thumbnailType === THUMBNAIL_TYPE.TILE }
+                screenshare = { _isMultiStreamEnabled
+                    ? isVirtualScreenshareParticipant
+                    : thumbnailType === THUMBNAIL_TYPE.TILE }
                 thumbnailType = { thumbnailType } />
         }
         {

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

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
+import { getMultipleVideoSupportFeatureFlag } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import ConnectionIndicator from '../../../connection-indicator/components/web/ConnectionIndicator';
 import { STATS_POPOVER_POSITION, THUMBNAIL_TYPE } from '../../constants';
@@ -98,10 +98,10 @@ const ThumbnailTopIndicators = ({
         useSelector(state => state['features/base/config'].connectionIndicators?.autoHide) ?? true);
     const _connectionIndicatorDisabled = _isMobile
         || Boolean(useSelector(state => state['features/base/config'].connectionIndicators?.disabled));
-    const sourceNameSignalingEnabled = useSelector(getSourceNameSignalingFeatureFlag);
+    const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);
     const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;
 
-    if (sourceNameSignalingEnabled && isVirtualScreenshareParticipant) {
+    if (_isMultiStreamEnabled && isVirtualScreenshareParticipant) {
         return (
             <div className = { styles.container }>
                 {!_connectionIndicatorDisabled
@@ -141,7 +141,7 @@ const ThumbnailTopIndicators = ({
                     <div className = { clsx(indicatorsClassName, 'top-indicators') }>
                         <StatusIndicators
                             participantID = { participantId }
-                            screenshare = { true } />
+                            screenshare = { !_isMultiStreamEnabled } />
                     </div>
                 )}
             </div>

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

@@ -27,6 +27,11 @@ type Props = {
      */
     isHovered: boolean,
 
+    /**
+     * Indicates whether the thumbnail is for local screenshare or not.
+     */
+    isLocal: boolean,
+
     /**
      * Indicates whether we are currently running in a mobile browser.
      */
@@ -92,6 +97,7 @@ const VirtualScreenshareParticipant = ({
     classes,
     containerClassName,
     isHovered,
+    isLocal,
     isMobile,
     onClick,
     onMouseEnter,
@@ -108,12 +114,11 @@ const VirtualScreenshareParticipant = ({
     const currentLayout = useSelector(getCurrentLayout);
     const videoTrackId = videoTrack?.jitsiTrack?.getId();
     const video = videoTrack && <VideoTrack
-        id = { `remoteVideo_${videoTrackId || ''}` }
+        id = { isLocal ? 'localScreenshare_container' : `remoteVideo_${videoTrackId || ''}` }
         muted = { true }
         style = { styles.video }
         videoTrack = { videoTrack } />;
 
-
     return (
         <span
             className = { containerClassName }
@@ -154,9 +159,10 @@ const VirtualScreenshareParticipant = ({
                 <ThumbnailBottomIndicators
                     className = { classes.indicatorsBackground }
                     currentLayout = { currentLayout }
+                    isVirtualScreenshareParticipant = { true }
                     local = { false }
                     participantId = { participantId }
-                    showStatusIndicators = { false } />
+                    showStatusIndicators = { true } />
             </div>
         </span>);
 };