haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(responsive-ui): Shrink self view when in portrait mode on mobile web

This commit is contained in:
Vlad Piersec 2021-09-21 10:40:46 +03:00 committed by vp8x8
parent 5ad98d193a
commit 0a9b9bb41d
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/filmstrip/_vertical_filmstrip_overrides.scss
View File

@ -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;
}

11
react/features/filmstrip/components/web/Thumbnail.js
View File

@ -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

8
react/features/filmstrip/constants.js
View File

@ -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.