From 6bcc2531450e09f83c8fbd476435d3d47560c32a Mon Sep 17 00:00:00 2001 From: Horatiu Muresan Date: Thu, 26 Jan 2023 21:51:20 +0200 Subject: [PATCH] some improvements --- modules/UI/videolayout/LargeVideoManager.js | 11 +++++- modules/UI/videolayout/VideoContainer.js | 38 +------------------ .../large-video/components/LargeVideo.web.js | 18 +++------ 3 files changed, 18 insertions(+), 49 deletions(-) diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 490330154..14996607f 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -14,11 +14,13 @@ import { i18next } from '../../../react/features/base/i18n'; import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet'; import { VIDEO_TYPE } from '../../../react/features/base/media'; import { + getLocalParticipant, getParticipantById, getParticipantDisplayName, isLocalScreenshareParticipant, isScreenShareParticipant } from '../../../react/features/base/participants'; +import { getHideSelfView } from '../../../react/features/base/settings/functions.any'; import { getVideoTrackByParticipant, trackStreamingStatusChanged @@ -232,6 +234,10 @@ export default class LargeVideoManager { preUpdate.then(() => { const { id, stream, videoType, resolve } = this.newStreamData; + const state = APP.store.getState(); + const shouldHideSelfView = getHideSelfView(state); + const localId = getLocalParticipant(state)?.id; + // FIXME this does not really make sense, because the videoType // (camera or desktop) is a completely different thing than @@ -245,13 +251,16 @@ export default class LargeVideoManager { // eslint-disable-next-line no-shadow const container = this.getCurrentContainer(); + if (shouldHideSelfView && localId === id) { + return container.hide(); + } + container.setStream(id, stream, videoType); // change the avatar url on large this.updateAvatar(); const isVideoMuted = !stream || stream.isMuted(); - const state = APP.store.getState(); const participant = getParticipantById(state, id); const videoTrack = getVideoTrackByParticipant(state, participant); diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index da83fccdc..6b79dfee8 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/modules/UI/videolayout/VideoContainer.js @@ -6,10 +6,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { browser } from '../../../react/features/base/lib-jitsi-meet'; -import { getParticipantCount } from '../../../react/features/base/participants'; -import { getHideSelfView } from '../../../react/features/base/settings/functions.any'; import { isTestModeEnabled } from '../../../react/features/base/testing'; -import { isLocalCameraTrackMuted } from '../../../react/features/base/tracks'; import { FILMSTRIP_BREAKPOINT } from '../../../react/features/filmstrip'; import { LargeVideoBackground, ORIENTATION, updateLastLargeVideoMediaEvent } from '../../../react/features/large-video'; import { setLargeVideoDimensions } from '../../../react/features/large-video/actions.any'; @@ -561,37 +558,12 @@ export class VideoContainer extends LargeContainer { * @param {boolean} show */ showAvatar(show) { - const state = APP.store.getState(); - const aloneInTheMeeting = getParticipantCount(state) === 1; - - const visibility = aloneInTheMeeting - ? this.setAvatarVisibility(state) - : show ? 'visible' : 'hidden'; - - this.$avatar.css('visibility', visibility); + this.$avatar.css('visibility', show ? 'visible' : 'hidden'); this.avatarDisplayed = show; APP.API.notifyLargeVideoVisibilityChanged(show); } - /** - * Set Avatar Visibility. - * @param {object} state - App state. - */ - setAvatarVisibility(state) { - const hideSelfView = getHideSelfView(state); - let visibility = 'hidden'; - - if (!hideSelfView) { - const tracks = state['features/base/tracks']; - const isVideoMuted = isLocalCameraTrackMuted(tracks); - - visibility = isVideoMuted ? 'visible' : 'hidden'; - } - - return visibility; - } - /** * We are doing fadeOut/fadeIn animations on parent div which wraps * largeVideo, because when Temasys plugin is in use it replaces @@ -603,13 +575,7 @@ export class VideoContainer extends LargeContainer { */ show() { return new Promise(resolve => { - const state = APP.store.getState(); - const aloneInTheMeeting = getParticipantCount(state) === 1; - const hideSelfView = getHideSelfView(state); - - const visibility = aloneInTheMeeting && hideSelfView ? 'hidden' : 'visible'; - - this.$wrapperParent.css('visibility', visibility).fadeTo( + this.$wrapperParent.css('visibility', 'visible').fadeTo( FADE_DURATION_MS, 1, () => { diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index 65f6221df..339844104 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout'; import { VIDEO_TYPE } from '../../base/media'; -import { getLocalParticipant, getParticipantCount } from '../../base/participants'; +import { getLocalParticipant } from '../../base/participants'; import { Watermarks } from '../../base/react'; import { connect } from '../../base/redux'; import { getHideSelfView } from '../../base/settings/functions.any'; @@ -111,11 +111,6 @@ type Props = { */ _hideSelfView: boolean; - /** - * Whether or not is only 1 participant in the meeting. - */ - _aloneInTheMeeting: boolean; - /** * Local Participant id. */ @@ -168,8 +163,7 @@ class LargeVideo extends Component { _seeWhatIsBeingShared, _largeVideoParticipantId, _hideSelfView, - _localParticipantId, - _aloneInTheMeeting } = this.props; + _localParticipantId } = this.props; if (prevProps._visibleFilmstrip !== _visibleFilmstrip) { this._updateLayout(); @@ -183,8 +177,9 @@ class LargeVideo extends Component { VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, true); } - if (_aloneInTheMeeting && prevProps._hideSelfView !== _hideSelfView) { - VideoLayout.updateLargeVideo(_localParticipantId, true, false); + if (_largeVideoParticipantId === _localParticipantId + && prevProps._hideSelfView !== _hideSelfView) { + VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, false); } } @@ -390,8 +385,7 @@ function _mapStateToProps(state) { _visibleFilmstrip: visible, _whiteboardEnabled: isWhiteboardEnabled(state), _hideSelfView: getHideSelfView(state), - _localParticipantId: localParticipantId, - _aloneInTheMeeting: getParticipantCount(state) === 1 + _localParticipantId: localParticipantId }; }