feat(responsive-ui): Keep aspect ratio for filmstrip self view on mob…

…ile web (jitsi#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
shahidtumbi · Jan 6, 2022 · c79074f · c79074f
1 parent 611ead7
commit c79074f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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.