fix(self-view) Hide self view when alone in meet as well (#12831)

This commit is contained in:
Horatiu Muresan 2023-01-27 16:30:47 +02:00 committed by GitHub
parent e6eba3536a
commit 42838e756c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 53 additions and 31 deletions

View File

@ -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);

View File

@ -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.
*

View File

@ -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;

View File

@ -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<Props> {
*/
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'];

View File

@ -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<Props> {
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;

View File

@ -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<IProps>) {
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

View File

@ -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;

View File

@ -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

View File

@ -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)

View File

@ -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
};
},

View File

@ -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<Props> {
* @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<Props> {
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,