diff --git a/react/features/base/responsive-ui/actions.js b/react/features/base/responsive-ui/actions.js index 884d8007f0be5..1d1d56d96a99e 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 025b50f2d2a9c..3f7c281cd5155 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 { const { _defaultLocalDisplayName, _disableLocalVideoFlip, + _height, _isMobile, + _isMobilePortrait, _isScreenSharing, _localFlipX, _disableProfile, @@ -778,6 +787,9 @@ class Thumbnail extends Component { const videoTrackClassName = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : ''; + styles.thumbnail.height = _isMobilePortrait + ? `${Math.floor(_height * MOBILE_FILMSTRIP_PORTRAIT_RATIO)}px` + : styles.thumbnail.height; return (