mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5456 from matrix-org/dbkr/call_ui_height

Browse source 
Fix height of Remote Video in call
This commit is contained in:
David Baker 2020-12-10 13:49:47 +00:00 committed by GitHub
commit 8e66fea7ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
res/css/views/voip/_CallView.scss
View file

@ -26,7 +26,8 @@ limitations under the License.
} }
.mx_CallView_large { .mx_CallView_large {
padding-bottom: 10px; // XXX: This should be 10 but somehow it's gaining an extra 4px from somewhere...
padding-bottom: 6px;
.mx_CallView_voice { .mx_CallView_voice {
height: 360px; height: 360px;

8
src/components/views/voip/CallView.tsx
View file

@ -94,6 +94,10 @@ const CONTROLS_HIDE_DELAY = 1000;
// Height of the header duplicated from CSS because we need to subtract it from our max // Height of the header duplicated from CSS because we need to subtract it from our max
// height to get the max height of the video // height to get the max height of the video
const HEADER_HEIGHT = 44; const HEADER_HEIGHT = 44;
// Also duplicated from the CSS: the bottom padding on the call view
const CALL_PADDING_BOTTOM = 10;
const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px) const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
export default class CallView extends React.Component<IProps, IState> { export default class CallView extends React.Component<IProps, IState> {
@ -478,7 +482,9 @@ export default class CallView extends React.Component<IProps, IState> {
} }
// if we're fullscreen, we don't want to set a maxHeight on the video element. // if we're fullscreen, we don't want to set a maxHeight on the video element.
const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight - HEADER_HEIGHT; const maxVideoHeight = getFullScreenElement() ? null : (
this.props.maxVideoHeight - HEADER_HEIGHT - CALL_PADDING_BOTTOM
);
contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}> contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
{onHoldBackground} {onHoldBackground}
<VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize} <VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize}