fix(reponsive-ui): Fix self view when remote videos disabled

Self view will be shown in portrait mode on mobile web but only when remote videos
are disabled.

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -84,10 +84,6 @@
         margin-bottom: 3px;
         margin-left: $remoteVideoMenuIconMargin;
     }
-
-    .self-view-mobile-portrait video {
-        object-fit: contain;
-    }
 }
 
 /**
@@ -116,11 +112,3 @@
         transition-delay: 0.1s;
     }
 }
-
-/**
- * Overrides for self view when in portrait mode on mobile.
- * This is done in order to keep the aspect ratio.
- */
-.vertical-filmstrip .self-view-mobile-portrait #localVideo_container {
-    object-fit: contain;
-}

react/features/filmstrip/components/web/Thumbnail.js

@@ -1,5 +1,4 @@
 // @flow
-
 import React, { Component } from 'react';
 
 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
@@ -145,9 +144,10 @@ export type Props = {|
     _isMobile: boolean,
 
     /**
-     * Whether we are currently running in a mobile browser in portrait orientation.
+     * Whether we are currently running in a mobile browser in portrait orientation
+     * and remote videos are not shown.
      */
-    _isMobilePortrait: boolean,
+    _isMobilePortraitNoRemoteVideos: boolean,
 
     /**
      * Indicates whether the participant is screen sharing.
@@ -757,6 +757,30 @@ class Thumbnail extends Component<Props, State> {
         return className;
     }
 
+    /**
+     * Returns styles needed for local participant.
+     *
+     * @returns {Object}
+     */
+    _getLocalParticipantStyles() {
+        const { _isMobilePortraitNoRemoteVideos, _width } = this.props;
+        const styles = this._getStyles();
+
+        if (_isMobilePortraitNoRemoteVideos) {
+            // shirik the width of the container with 80%
+            const shrinked = _width * 80 / 100;
+
+            styles.thumbnail.height = styles.thumbnail.minHeight = `${shrinked * (16 / 9)}px`;
+            styles.thumbnail.width = styles.thumbnail.minWidth = `${shrinked}px`;
+
+            // align container to the right now that is narrower.
+            styles.thumbnail.right = 0;
+            styles.thumbnail.position = 'absolute';
+        }
+
+        return styles;
+    }
+
     /**
      * Renders the local participant's thumbnail.
      *
@@ -768,7 +792,6 @@ class Thumbnail extends Component<Props, State> {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
             _isMobile,
-            _isMobilePortrait,
             _isScreenSharing,
             _localFlipX,
             _participant,
@@ -776,16 +799,11 @@ class Thumbnail extends Component<Props, State> {
         } = this.props;
         const { id } = _participant || {};
         const { audioLevel } = this.state;
-        const styles = this._getStyles();
-        let containerClassName = this._getContainerClassName();
+        const containerClassName = this._getContainerClassName();
+        const styles = this._getLocalParticipantStyles();
         const videoTrackClassName
             = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
 
-        if (_isMobilePortrait) {
-            styles.thumbnail.height = styles.thumbnail.width;
-            containerClassName = `${containerClassName} self-view-mobile-portrait`;
-        }
-
         return (
             <span
                 className = { containerClassName }
@@ -1050,7 +1068,7 @@ function _mapStateToProps(state, ownProps): Object {
         ? getLocalAudioTrack(tracks) : getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, participantID);
     const _currentLayout = getCurrentLayout(state);
     let size = {};
-    let _isMobilePortrait = false;
+    let _isMobilePortraitNoRemoteVideos = false;
     const {
         startSilent,
         disableLocalVideoFlip,
@@ -1061,7 +1079,6 @@ function _mapStateToProps(state, ownProps): Object {
     const { localFlipX } = state['features/base/settings'];
     const _isMobile = isMobileBrowser();
 
-
     switch (_currentLayout) {
     case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
     case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
@@ -1085,7 +1102,9 @@ function _mapStateToProps(state, ownProps): Object {
             _height: height
         };
 
-        _isMobilePortrait = _isMobile && state['features/base/responsive-ui'].aspectRatio === ASPECT_RATIO_NARROW;
+        _isMobilePortraitNoRemoteVideos = _isMobile
+            && state['features/base/responsive-ui'].aspectRatio === ASPECT_RATIO_NARROW
+            && state['features/base/config'].disable1On1Mode === null;
 
         break;
     }
@@ -1116,7 +1135,7 @@ function _mapStateToProps(state, ownProps): Object {
         _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,
         _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
         _isMobile,
-        _isMobilePortrait,
+        _isMobilePortraitNoRemoteVideos,
         _isScreenSharing: _videoTrack?.videoType === 'desktop',
         _isTestModeEnabled: isTestModeEnabled(state),
         _isVideoPlayable: id && isVideoPlayable(state, id),