diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js index 13877372f..36577f6a8 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.js +++ b/react/features/connection-stats/components/ConnectionStatsTable.js @@ -281,7 +281,7 @@ class ConnectionStatsTable extends Component { */ _renderScreenShareStatus() { const { classes } = this.props; - const className = isMobileBrowser() ? 'connection-info connection-info__mobile' : 'connection-info'; + const className = clsx(classes.connectionStatsTable, { [classes.mobile]: isMobileBrowser() }); return ( {
- { - - { this._renderResolution() } - { this._renderFrameRate() } - -
} - + + { this._renderResolution() } + { this._renderFrameRate() } +
); } diff --git a/react/features/filmstrip/components/web/StatusIndicators.js b/react/features/filmstrip/components/web/StatusIndicators.js index aaddf2d59..91c27dee8 100644 --- a/react/features/filmstrip/components/web/StatusIndicators.js +++ b/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 { * @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); diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js index ec6b3df2c..a9df4397d 100644 --- a/react/features/filmstrip/components/web/Thumbnail.js +++ b/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. @@ -157,20 +156,21 @@ export type Props = {| */ _isScreenSharing: boolean, + /** + * Indicates whether testing mode is enabled. + */ + _isTestModeEnabled: boolean, + /** * Indicates whether the video associated with the thumbnail is playable. */ _isVideoPlayable: boolean, /** - * Disable/enable the dominant speaker indicator. + * Indicates whether the participant is a virtual screen share participant. This prop is behind the + * sourceNameSignaling feature flag. */ - _isDominantSpeakerDisabled: boolean, - - /** - * Indicates whether testing mode is enabled. - */ - _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 { ) }> @@ -1138,6 +1139,7 @@ class Thumbnail extends Component { classes = { classes } containerClassName = { this._getContainerClassName() } isHovered = { isHovered } + isLocal = { local } isMobile = { _isMobile } onClick = { this._onClick } onMouseEnter = { this._onMouseEnter } diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js index 78fab590d..23566d878 100644 --- a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js +++ b/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 (
{ showStatusIndicators && } { diff --git a/react/features/filmstrip/components/web/ThumbnailTopIndicators.js b/react/features/filmstrip/components/web/ThumbnailTopIndicators.js index effd5932e..97784a66c 100644 --- a/react/features/filmstrip/components/web/ThumbnailTopIndicators.js +++ b/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 (
{!_connectionIndicatorDisabled @@ -141,7 +141,7 @@ const ThumbnailTopIndicators = ({
+ screenshare = { !_isMultiStreamEnabled } />
)}
diff --git a/react/features/filmstrip/components/web/VirtualScreenshareParticipant.js b/react/features/filmstrip/components/web/VirtualScreenshareParticipant.js index 0280f7966..a956e2129 100644 --- a/react/features/filmstrip/components/web/VirtualScreenshareParticipant.js +++ b/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 && ; - return ( + showStatusIndicators = { true } />
); };