From 0a9b9bb41dfc734376286bdd010816ca56b4dee7 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Tue, 21 Sep 2021 10:40:46 +0300
Subject: [PATCH] fix(responsive-ui): Shrink self view when in portrait mode on
 mobile web

---
 css/filmstrip/_vertical_filmstrip_overrides.scss     | 12 ++++++++++++
 react/features/filmstrip/components/web/Thumbnail.js | 11 +++++------
 react/features/filmstrip/constants.js                |  8 --------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/css/filmstrip/_vertical_filmstrip_overrides.scss b/css/filmstrip/_vertical_filmstrip_overrides.scss
index 5d6c58638..fc30fe641 100644
--- a/css/filmstrip/_vertical_filmstrip_overrides.scss
+++ b/css/filmstrip/_vertical_filmstrip_overrides.scss
@@ -84,6 +84,10 @@
         margin-bottom: 3px;
         margin-left: $remoteVideoMenuIconMargin;
     }
+
+    .self-view-mobile-portrait video {
+        object-fit: contain;
+    }
 }
 
 /**
@@ -112,3 +116,11 @@
         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;
+}
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 3f7c281cd..4f4794610 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -34,7 +34,6 @@ import {
     DISPLAY_MODE_TO_STRING,
     DISPLAY_VIDEO,
     DISPLAY_VIDEO_WITH_NAME,
-    MOBILE_FILMSTRIP_PORTRAIT_RATIO,
     VIDEO_TEST_EVENTS,
     SHOW_TOOLBAR_CONTEXT_MENU_AFTER
 } from '../../constants';
@@ -771,7 +770,6 @@ class Thumbnail extends Component<Props, State> {
         const {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
-            _height,
             _isMobile,
             _isMobilePortrait,
             _isScreenSharing,
@@ -783,13 +781,14 @@ class Thumbnail extends Component<Props, State> {
         const { id } = _participant || {};
         const { audioLevel } = this.state;
         const styles = this._getStyles();
-        const containerClassName = this._getContainerClassName();
+        let containerClassName = this._getContainerClassName();
         const videoTrackClassName
             = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
 
-        styles.thumbnail.height = _isMobilePortrait
-            ? `${Math.floor(_height * MOBILE_FILMSTRIP_PORTRAIT_RATIO)}px`
-            : styles.thumbnail.height;
+        if (_isMobilePortrait) {
+            styles.thumbnail.height = styles.thumbnail.width;
+            containerClassName = `${containerClassName} self-view-mobile-portrait`;
+        }
 
         return (
             <span
diff --git a/react/features/filmstrip/constants.js b/react/features/filmstrip/constants.js
index 8ba24d5ef..596e4167f 100644
--- a/react/features/filmstrip/constants.js
+++ b/react/features/filmstrip/constants.js
@@ -221,14 +221,6 @@ export const HORIZONTAL_FILMSTRIP_MARGIN = 39;
  */
 export const SHOW_TOOLBAR_CONTEXT_MENU_AFTER = 600;
 
-
-/**
- * The ratio for filmstrip self view on mobile portrait mode.
- *
- * @type {number}
- */
-export const MOBILE_FILMSTRIP_PORTRAIT_RATIO = 2.5;
-
 /**
  * The margin for each side of the tile view. Taken away from the available
  * height and width for the tile container to display in.