some improvements

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

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();
+        this.$avatar.css('visibility', show ? 'visible' : 'hidden');
-        const aloneInTheMeeting = getParticipantCount(state) === 1;
-
-        const visibility = aloneInTheMeeting
-            ? this.setAvatarVisibility(state)
-            : show ? 'visible' : 'hidden';
-
-        this.$avatar.css('visibility', visibility);
         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();
+            this.$wrapperParent.css('visibility', 'visible').fadeTo(
-            const aloneInTheMeeting = getParticipantCount(state) === 1;
-            const hideSelfView = getHideSelfView(state);
-
-            const visibility = aloneInTheMeeting && hideSelfView ? 'hidden' : 'visible';
-
-            this.$wrapperParent.css('visibility', visibility).fadeTo(
                 FADE_DURATION_MS,
                 1,
                 () => {

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<Props> {
             _seeWhatIsBeingShared,
             _largeVideoParticipantId,
             _hideSelfView,
-            _localParticipantId,
+            _localParticipantId } = this.props;
-            _aloneInTheMeeting } = this.props;
 
         if (prevProps._visibleFilmstrip !== _visibleFilmstrip) {
             this._updateLayout();
@@ -183,8 +177,9 @@ class LargeVideo extends Component<Props> {
             VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, true);
         }
 
-        if (_aloneInTheMeeting && prevProps._hideSelfView !== _hideSelfView) {
+        if (_largeVideoParticipantId === _localParticipantId
-            VideoLayout.updateLargeVideo(_localParticipantId, true, false);
+            && 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,
+        _localParticipantId: localParticipantId
-        _aloneInTheMeeting: getParticipantCount(state) === 1
     };
 }