diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 4903301547..14996607f2 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/react/features/base/settings/functions.any.ts b/react/features/base/settings/functions.any.ts index b7ba4dd2f9..18322c7287 100644 --- a/react/features/base/settings/functions.any.ts +++ b/react/features/base/settings/functions.any.ts @@ -3,7 +3,6 @@ import { IStateful } from '../app/types'; import CONFIG_WHITELIST from '../config/configWhitelist'; import { IConfigState } from '../config/reducer'; import { IJwtState } from '../jwt/reducer'; -import { getParticipantCount } from '../participants/functions'; import { toState } from '../redux/functions'; import { parseURLParams } from '../util/parseURLParams'; @@ -114,16 +113,6 @@ export function shouldHideShareAudioHelper(state: IReduxState): boolean | undefi return state['features/base/settings'].hideShareAudioHelper; } -/** - * Whether we should hide self view. - * - * @param {Object} state - Redux state. - * @returns {boolean} - */ -export function shouldHideSelfView(state: IReduxState) { - return getParticipantCount(state) === 1 ? false : getHideSelfView(state); -} - /** * Gets the disable self view setting. * diff --git a/react/features/filmstrip/actions.web.ts b/react/features/filmstrip/actions.web.ts index 85024b3ffa..15f59311cb 100644 --- a/react/features/filmstrip/actions.web.ts +++ b/react/features/filmstrip/actions.web.ts @@ -5,7 +5,7 @@ import { getParticipantById, getRemoteParticipantCountWithFake } from '../base/participants/functions'; -import { shouldHideSelfView } from '../base/settings/functions.web'; +import { getHideSelfView } from '../base/settings/functions.any'; import { getMaxColumnCount } from '../video-layout/functions.web'; import { @@ -146,7 +146,7 @@ export function setVerticalViewDimensions() { const state = getState(); const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui']; const { width: filmstripWidth } = state['features/filmstrip']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const resizableFilmstrip = isFilmstripResizable(state); const _verticalViewGrid = showGridInVerticalView(state); const numberOfRemoteParticipants = getRemoteParticipantCountWithFake(state); @@ -255,7 +255,7 @@ export function setHorizontalViewDimensions() { return (dispatch: IStore['dispatch'], getState: IStore['getState']) => { const state = getState(); const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const thumbnails = calculateThumbnailSizeForHorizontalView(clientHeight); const remoteVideosContainerWidth = clientWidth - (disableSelfView ? 0 : thumbnails?.local?.width) - HORIZONTAL_FILMSTRIP_MARGIN; diff --git a/react/features/filmstrip/components/native/Filmstrip.js b/react/features/filmstrip/components/native/Filmstrip.js index 23a3b7d328..d13f48a826 100644 --- a/react/features/filmstrip/components/native/Filmstrip.js +++ b/react/features/filmstrip/components/native/Filmstrip.js @@ -8,7 +8,7 @@ import { getLocalParticipant } from '../../../base/participants'; import { Platform } from '../../../base/react'; import { connect } from '../../../base/redux'; import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants'; -import { shouldHideSelfView } from '../../../base/settings/functions.any'; +import { getHideSelfView } from '../../../base/settings/functions.any'; import { isToolboxVisible } from '../../../toolbox/functions'; import { setVisibleRemoteParticipants } from '../../actions'; import { @@ -320,7 +320,7 @@ class Filmstrip extends PureComponent { */ function _mapStateToProps(state) { const { enabled, remoteParticipants } = state['features/filmstrip']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const showRemoteVideos = shouldRemoteVideosBeVisible(state); const responsiveUI = state['features/base/responsive-ui']; diff --git a/react/features/filmstrip/components/native/TileView.js b/react/features/filmstrip/components/native/TileView.js index ad7004f539..55ac35a1a3 100644 --- a/react/features/filmstrip/components/native/TileView.js +++ b/react/features/filmstrip/components/native/TileView.js @@ -11,7 +11,7 @@ import type { Dispatch } from 'redux'; import { getLocalParticipant, getParticipantCountWithFake } from '../../../base/participants'; import { connect } from '../../../base/redux'; -import { shouldHideSelfView } from '../../../base/settings/functions.any'; +import { getHideSelfView } from '../../../base/settings/functions.any'; import { setVisibleRemoteParticipants } from '../../actions.web'; import Thumbnail from './Thumbnail'; @@ -283,7 +283,7 @@ class TileView extends PureComponent { function _mapStateToProps(state, ownProps) { const responsiveUi = state['features/base/responsive-ui']; const { remoteParticipants, tileViewDimensions } = state['features/filmstrip']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const { height } = tileViewDimensions.thumbnailSize; const { columns } = tileViewDimensions; diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx index fa387ce8b6..7d17253611 100644 --- a/react/features/filmstrip/components/web/Filmstrip.tsx +++ b/react/features/filmstrip/components/web/Filmstrip.tsx @@ -16,7 +16,7 @@ import Icon from '../../../base/icons/components/Icon'; import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg'; import { IParticipant } from '../../../base/participants/types'; import { connect } from '../../../base/redux/functions'; -import { shouldHideSelfView } from '../../../base/settings/functions.web'; +import { getHideSelfView } from '../../../base/settings/functions.any'; import { showToolbox } from '../../../toolbox/actions.web'; import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web'; import { LAYOUTS } from '../../../video-layout/constants'; @@ -877,7 +877,7 @@ function _mapStateToProps(state: IReduxState, ownProps: Partial) { const reduceHeight = state['features/toolbox'].visible && toolbarButtons.length; const remoteVideosVisible = shouldRemoteVideosBeVisible(state); const { isOpen: shiftRight } = state['features/chat']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const { clientWidth, clientHeight } = state['features/base/responsive-ui']; const collapseTileView = reduceHeight diff --git a/react/features/filmstrip/components/web/ThumbnailWrapper.js b/react/features/filmstrip/components/web/ThumbnailWrapper.js index 272b121d90..40a7fb0446 100644 --- a/react/features/filmstrip/components/web/ThumbnailWrapper.js +++ b/react/features/filmstrip/components/web/ThumbnailWrapper.js @@ -4,7 +4,7 @@ import { shouldComponentUpdate } from 'react-window'; import { getLocalParticipant } from '../../../base/participants'; import { connect } from '../../../base/redux'; -import { shouldHideSelfView } from '../../../base/settings/functions.any'; +import { getHideSelfView } from '../../../base/settings/functions.any'; import { LAYOUTS, getCurrentLayout } from '../../../video-layout'; import { FILMSTRIP_TYPE, TILE_ASPECT_RATIO, TILE_HORIZONTAL_MARGIN } from '../../constants'; import { getActiveParticipantsIds, showGridInVerticalView } from '../../functions'; @@ -152,7 +152,7 @@ function _mapStateToProps(state, ownProps) { const _currentLayout = getCurrentLayout(state); const { remoteParticipants: remote } = state['features/filmstrip']; const activeParticipants = getActiveParticipantsIds(state); - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const _verticalViewGrid = showGridInVerticalView(state); const filmstripType = ownProps.data?.filmstripType; const stageFilmstrip = filmstripType === FILMSTRIP_TYPE.STAGE; diff --git a/react/features/filmstrip/functions.native.ts b/react/features/filmstrip/functions.native.ts index 634d1adc6b..fdeba98890 100644 --- a/react/features/filmstrip/functions.native.ts +++ b/react/features/filmstrip/functions.native.ts @@ -10,7 +10,7 @@ import { import Platform from '../base/react/Platform.native'; import { toState } from '../base/redux/functions'; import { ASPECT_RATIO_NARROW } from '../base/responsive-ui/constants'; -import { shouldHideSelfView } from '../base/settings/functions.native'; +import { getHideSelfView } from '../base/settings/functions.any'; // eslint-disable-next-line lines-around-comment // @ts-ignore import conferenceStyles from '../conference/components/native/styles'; @@ -104,7 +104,7 @@ export function getPinnedActiveParticipants(_state: any) { */ export function getTileViewParticipantCount(stateful: IStateful) { const state = toState(stateful); - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const localParticipant = getLocalParticipant(state); const participantCount = getParticipantCountWithFake(state) - (disableSelfView && localParticipant ? 1 : 0); @@ -152,7 +152,7 @@ export function isFilmstripScrollVisible(state: IReduxState) { const { aspectRatio, clientWidth, clientHeight, safeAreaInsets = {} } = state['features/base/responsive-ui']; const isNarrowAspectRatio = aspectRatio === ASPECT_RATIO_NARROW; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const localParticipant = Boolean(getLocalParticipant(state)); const localParticipantVisible = localParticipant && !disableSelfView; const participantCount diff --git a/react/features/filmstrip/functions.web.ts b/react/features/filmstrip/functions.web.ts index b25f7c3a63..963d4caa67 100644 --- a/react/features/filmstrip/functions.web.ts +++ b/react/features/filmstrip/functions.web.ts @@ -11,7 +11,7 @@ import { isScreenShareParticipant } from '../base/participants/functions'; import { toState } from '../base/redux/functions'; -import { shouldHideSelfView } from '../base/settings/functions.web'; +import { getHideSelfView } from '../base/settings/functions.any'; import { getVideoTrackByParticipant, isLocalTrackMuted, @@ -218,7 +218,7 @@ export function getTileDefaultAspectRatio(disableResponsiveTiles: boolean, */ export function getNumberOfPartipantsForTileView(state: IReduxState) { const { iAmRecorder } = state['features/base/config']; - const disableSelfView = shouldHideSelfView(state); + const disableSelfView = getHideSelfView(state); const { localScreenShare } = state['features/base/participants']; const localParticipantsCount = localScreenShare ? 2 : 1; const numberOfParticipants = getParticipantCountWithFake(state) diff --git a/react/features/filmstrip/subscriber.web.ts b/react/features/filmstrip/subscriber.web.ts index bfc262b1b0..34ccfded27 100644 --- a/react/features/filmstrip/subscriber.web.ts +++ b/react/features/filmstrip/subscriber.web.ts @@ -2,7 +2,7 @@ import { pinParticipant } from '../base/participants/actions'; import { getParticipantCountWithFake } from '../base/participants/functions'; import StateListenerRegistry from '../base/redux/StateListenerRegistry'; import { clientResized, setNarrowLayout } from '../base/responsive-ui/actions'; -import { shouldHideSelfView } from '../base/settings/functions.web'; +import { getHideSelfView } from '../base/settings/functions.any'; import { selectParticipantInLargeVideo } from '../large-video/actions.any'; import { getParticipantsPaneOpen } from '../participants-pane/functions'; import { setOverflowDrawer } from '../toolbox/actions.web'; @@ -37,7 +37,7 @@ StateListenerRegistry.register( /* selector */ state => { return { numberOfParticipants: getParticipantCountWithFake(state), - disableSelfView: shouldHideSelfView(state), + disableSelfView: getHideSelfView(state), localScreenShare: state['features/base/participants'].localScreenShare }; }, diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index d4eb33b249..4e4f9ef46c 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -7,6 +7,7 @@ import { VIDEO_TYPE } from '../../base/media'; import { getLocalParticipant } from '../../base/participants'; import { Watermarks } from '../../base/react'; import { connect } from '../../base/redux'; +import { getHideSelfView } from '../../base/settings/functions.any'; import { getVideoTrackByParticipant } from '../../base/tracks'; import { setColorAlpha } from '../../base/util'; import { StageParticipantNameLabel } from '../../display-name'; @@ -105,6 +106,16 @@ type Props = { */ _whiteboardEnabled: boolean; + /** + * Whether or not the hideSelfView is enabled. + */ + _hideSelfView: boolean; + + /** + * Local Participant id. + */ + _localParticipantId: string; + /** * The Redux dispatch function. */ @@ -146,7 +157,13 @@ class LargeVideo extends Component { * @inheritdoc */ componentDidUpdate(prevProps: Props) { - const { _visibleFilmstrip, _isScreenSharing, _seeWhatIsBeingShared, _largeVideoParticipantId } = this.props; + const { + _visibleFilmstrip, + _isScreenSharing, + _seeWhatIsBeingShared, + _largeVideoParticipantId, + _hideSelfView, + _localParticipantId } = this.props; if (prevProps._visibleFilmstrip !== _visibleFilmstrip) { this._updateLayout(); @@ -159,6 +176,11 @@ class LargeVideo extends Component { if (_isScreenSharing && _seeWhatIsBeingShared) { VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, true); } + + if (_largeVideoParticipantId === _localParticipantId + && prevProps._hideSelfView !== _hideSelfView) { + VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, false); + } } /** @@ -351,9 +373,11 @@ function _mapStateToProps(state) { _customBackgroundColor: backgroundColor, _customBackgroundImageUrl: backgroundImageUrl, _displayScreenSharingPlaceholder: isLocalScreenshareOnLargeVideo && !seeWhatIsBeingShared && !isOnSpot, + _hideSelfView: getHideSelfView(state), _isChatOpen: isChatOpen, _isScreenSharing: isLocalScreenshareOnLargeVideo, _largeVideoParticipantId: largeVideoParticipant?.id, + _localParticipantId: localParticipantId, _noAutoPlayVideo: testingConfig?.noAutoPlayVideo, _resizableFilmstrip: isFilmstripResizable(state), _seeWhatIsBeingShared: seeWhatIsBeingShared,