From 07d023968a6bf1c5ec3ef4d6df19aef4a57d9b08 Mon Sep 17 00:00:00 2001
From: vp8x8 <37841821+vp8x8@users.noreply.github.com>
Date: Thu, 9 Sep 2021 16:14:09 +0300
Subject: [PATCH] feat(responsive-ui): Keep aspect ratio for filmstrip self
 view on mobile web (#9848)

* feat(responsive-ui): Keep aspect ratio for filmstrip self view on mobile web

Right now filmstrip displays self view in landscape mode.
With these changes the aspect ratio of the self view will be maintained
so on portrait mode the thumbnail will be displayed vertically.
Of course this makes sense only on mobile web.

* Code review

* Fix height
---
 react/features/base/responsive-ui/actions.js    | 12 ++++++++----
 .../filmstrip/components/web/Thumbnail.js       | 17 +++++++++++++++++
 react/features/filmstrip/constants.js           |  8 ++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/react/features/base/responsive-ui/actions.js b/react/features/base/responsive-ui/actions.js
index 884d8007f..1d1d56d96 100644
--- a/react/features/base/responsive-ui/actions.js
+++ b/react/features/base/responsive-ui/actions.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { batch } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { CHAT_SIZE } from '../../chat/constants';
@@ -45,10 +46,13 @@ export function clientResized(clientWidth: number, clientHeight: number) {
             }
         }
 
-        return dispatch({
-            type: CLIENT_RESIZED,
-            clientHeight,
-            clientWidth: availableWidth
+        batch(() => {
+            dispatch({
+                type: CLIENT_RESIZED,
+                clientHeight,
+                clientWidth: availableWidth
+            });
+            dispatch(setAspectRatio(clientWidth, clientHeight));
         });
     };
 }
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 025b50f2d..3f7c281cd 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -14,6 +14,7 @@ import {
     pinParticipant
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 import { isTestModeEnabled } from '../../../base/testing';
 import {
     getLocalAudioTrack,
@@ -33,6 +34,7 @@ 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';
@@ -144,6 +146,11 @@ export type Props = {|
      */
     _isMobile: boolean,
 
+    /**
+     * Whether we are currently running in a mobile browser in portrait orientation.
+     */
+    _isMobilePortrait: boolean,
+
     /**
      * Indicates whether the participant is screen sharing.
      */
@@ -764,7 +771,9 @@ class Thumbnail extends Component<Props, State> {
         const {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
+            _height,
             _isMobile,
+            _isMobilePortrait,
             _isScreenSharing,
             _localFlipX,
             _disableProfile,
@@ -778,6 +787,9 @@ class Thumbnail extends Component<Props, State> {
         const videoTrackClassName
             = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
 
+        styles.thumbnail.height = _isMobilePortrait
+            ? `${Math.floor(_height * MOBILE_FILMSTRIP_PORTRAIT_RATIO)}px`
+            : styles.thumbnail.height;
 
         return (
             <span
@@ -1043,6 +1055,7 @@ function _mapStateToProps(state, ownProps): Object {
         ? getLocalAudioTrack(tracks) : getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, participantID);
     const _currentLayout = getCurrentLayout(state);
     let size = {};
+    let _isMobilePortrait = false;
     const {
         startSilent,
         disableLocalVideoFlip,
@@ -1078,9 +1091,12 @@ function _mapStateToProps(state, ownProps): Object {
             _height: height
         };
 
+        _isMobilePortrait = _isMobile && state['features/base/responsive-ui'].aspectRatio === ASPECT_RATIO_NARROW;
+
         break;
     }
     case LAYOUTS.TILE_VIEW: {
+
         const { width, height } = state['features/filmstrip'].tileViewDimensions.thumbnailSize;
 
         size = {
@@ -1106,6 +1122,7 @@ function _mapStateToProps(state, ownProps): Object {
         _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,
         _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
         _isMobile,
+        _isMobilePortrait,
         _isScreenSharing: _videoTrack?.videoType === 'desktop',
         _isTestModeEnabled: isTestModeEnabled(state),
         _isVideoPlayable: id && isVideoPlayable(state, id),
diff --git a/react/features/filmstrip/constants.js b/react/features/filmstrip/constants.js
index 596e4167f..8ba24d5ef 100644
--- a/react/features/filmstrip/constants.js
+++ b/react/features/filmstrip/constants.js
@@ -221,6 +221,14 @@ 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.