From 68a0bdce2c407bd82cf9798b8d656e48d2b440b6 Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Mon, 26 Oct 2020 14:51:51 -0500 Subject: [PATCH] ref(StatusIndicators): isScreenSharing -> redux. --- modules/UI/videolayout/SmallVideo.js | 39 +++++++++---------- modules/UI/videolayout/VideoLayout.js | 6 +-- .../components/web/StatusIndicators.js | 21 ++++++---- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 9f87cc283..76cc6a0bf 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/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 { , @@ -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' }; } diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 95fb3403a..ffd0d3c2c 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/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(); }, /** diff --git a/react/features/filmstrip/components/web/StatusIndicators.js b/react/features/filmstrip/components/web/StatusIndicators.js index 9ac206637..82a0a3ada 100644 --- a/react/features/filmstrip/components/web/StatusIndicators.js +++ b/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 { _currentLayout, _showAudioMutedIndicator, _showModeratorIndicator, - showScreenShareIndicator, + _showScreenShareIndicator, _showVideoMutedIndicator } = this.props; let tooltipPosition; @@ -87,7 +87,7 @@ class StatusIndicators extends Component { return (
{ _showAudioMutedIndicator ? : null } - { showScreenShareIndicator ? : null } + { _showScreenShareIndicator ? : null } { _showVideoMutedIndicator ? : null } { _showModeratorIndicator ? : null }
@@ -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 }; }