PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix vertical scrolling in videoview

Browse source 
Fixes https://github.com/vector-im/element-web/issues/15886
This commit is contained in:
David Baker 2020-12-10 15:18:22 +00:00
parent 5282c6bbe8
commit 80be46bc32
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,6 +94,8 @@ 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;
const BOTTOM_PADDING = 10;
const BOTTOM_MARGIN_TOP_BOTTOM = 10; // top margin plus bottom margin
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> {
@ -453,8 +455,15 @@ 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 : (
contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}> this.props.maxVideoHeight - (HEADER_HEIGHT + BOTTOM_PADDING + BOTTOM_MARGIN_TOP_BOTTOM)
);
contentView = <div className={containerClasses}
ref={this.contentRef} onMouseMove={this.onMouseMove}
// Put the max height on here too because this div is ended up 4px larger than the content
// and is causing it to scroll, and I am genuinely baffled as to why.
style={{maxHeight: maxVideoHeight}}
>
{onHoldBackground} {onHoldBackground}
<VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize} <VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize}
maxHeight={maxVideoHeight} maxHeight={maxVideoHeight}