Merge pull request from SimonBrandner/fix/call-view/18221

This commit is contained in:
Germain 2021-07-28 11:10:37 +01:00 committed by GitHub
commit 771dda0341
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 42 deletions
res/css/views/voip
src/components/views/voip

View file

@ -279,7 +279,7 @@ limitations under the License.
max-width: 240px; max-width: 240px;
} }
.mx_CallView_header_phoneIcon { .mx_CallView_header_callTypeIcon {
display: inline-block; display: inline-block;
margin-right: 6px; margin-right: 6px;
height: 16px; height: 16px;
@ -293,12 +293,19 @@ limitations under the License.
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $warning-color; background-color: $secondary-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
}
&.mx_CallView_header_callTypeIcon_voice::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
&.mx_CallView_header_callTypeIcon_video::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
} }
.mx_CallView_callControls { .mx_CallView_callControls {
@ -306,7 +313,6 @@ limitations under the License.
display: flex; display: flex;
justify-content: center; justify-content: center;
bottom: 5px; bottom: 5px;
width: 100%;
opacity: 1; opacity: 1;
transition: opacity 0.5s; transition: opacity 0.5s;
z-index: 200; // To be above _all_ feeds z-index: 200; // To be above _all_ feeds

View file

@ -67,6 +67,7 @@ interface IState {
screensharing: boolean; screensharing: boolean;
callState: CallState; callState: CallState;
controlsVisible: boolean; controlsVisible: boolean;
hoveringControls: boolean;
showMoreMenu: boolean; showMoreMenu: boolean;
showDialpad: boolean; showDialpad: boolean;
primaryFeed: CallFeed; primaryFeed: CallFeed;
@ -102,7 +103,7 @@ function exitFullscreen() {
if (exitMethod) exitMethod.call(document); if (exitMethod) exitMethod.call(document);
} }
const CONTROLS_HIDE_DELAY = 1000; const CONTROLS_HIDE_DELAY = 2000;
// 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 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)
@ -128,6 +129,7 @@ export default class CallView extends React.Component<IProps, IState> {
screensharing: this.props.call.isScreensharing(), screensharing: this.props.call.isScreensharing(),
callState: this.props.call.state, callState: this.props.call.state,
controlsVisible: true, controlsVisible: true,
hoveringControls: false,
showMoreMenu: false, showMoreMenu: false,
showDialpad: false, showDialpad: false,
primaryFeed: primary, primaryFeed: primary,
@ -244,6 +246,7 @@ export default class CallView extends React.Component<IProps, IState> {
}; };
private onControlsHideTimer = () => { private onControlsHideTimer = () => {
if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return;
this.controlsHideTimer = null; this.controlsHideTimer = null;
this.setState({ this.setState({
controlsVisible: false, controlsVisible: false,
@ -293,24 +296,10 @@ export default class CallView extends React.Component<IProps, IState> {
private onDialpadClick = (): void => { private onDialpadClick = (): void => {
if (!this.state.showDialpad) { if (!this.state.showDialpad) {
if (this.controlsHideTimer) { this.setState({ showDialpad: true });
clearTimeout(this.controlsHideTimer); this.showControls();
this.controlsHideTimer = null;
}
this.setState({
showDialpad: true,
controlsVisible: true,
});
} else { } else {
if (this.controlsHideTimer !== null) { this.setState({ showDialpad: false });
clearTimeout(this.controlsHideTimer);
}
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
this.setState({
showDialpad: false,
});
} }
}; };
@ -345,29 +334,16 @@ export default class CallView extends React.Component<IProps, IState> {
}; };
private onMoreClick = (): void => { private onMoreClick = (): void => {
if (this.controlsHideTimer) { this.setState({ showMoreMenu: true });
clearTimeout(this.controlsHideTimer); this.showControls();
this.controlsHideTimer = null;
}
this.setState({
showMoreMenu: true,
controlsVisible: true,
});
}; };
private closeDialpad = (): void => { private closeDialpad = (): void => {
this.setState({ this.setState({ showDialpad: false });
showDialpad: false,
});
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
}; };
private closeContextMenu = (): void => { private closeContextMenu = (): void => {
this.setState({ this.setState({ showMoreMenu: false });
showMoreMenu: false,
});
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
}; };
// we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
@ -403,6 +379,15 @@ export default class CallView extends React.Component<IProps, IState> {
} }
}; };
private onCallControlsMouseEnter = (): void => {
this.setState({ hoveringControls: true });
this.showControls();
};
private onCallControlsMouseLeave = (): void => {
this.setState({ hoveringControls: false });
};
private onRoomAvatarClick = (): void => { private onRoomAvatarClick = (): void => {
const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call); const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
dis.dispatch({ dis.dispatch({
@ -537,8 +522,6 @@ export default class CallView extends React.Component<IProps, IState> {
} }
// The dial pad & 'more' button actions are only relevant in a connected call // The dial pad & 'more' button actions are only relevant in a connected call
// When not connected, we have to put something there to make the flexbox alignment correct
let dialpadButton;
let contextMenuButton; let contextMenuButton;
if (this.state.callState === CallState.Connected) { if (this.state.callState === CallState.Connected) {
contextMenuButton = ( contextMenuButton = (
@ -549,6 +532,9 @@ export default class CallView extends React.Component<IProps, IState> {
isExpanded={this.state.showMoreMenu} isExpanded={this.state.showMoreMenu}
/> />
); );
}
let dialpadButton;
if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
dialpadButton = ( dialpadButton = (
<ContextMenuButton <ContextMenuButton
className="mx_CallView_callControls_button mx_CallView_callControls_dialpad" className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
@ -560,7 +546,11 @@ export default class CallView extends React.Component<IProps, IState> {
} }
return ( return (
<div className={callControlsClasses}> <div
className={callControlsClasses}
onMouseEnter={this.onCallControlsMouseEnter}
onMouseLeave={this.onCallControlsMouseLeave}
>
{ dialpadButton } { dialpadButton }
<AccessibleButton <AccessibleButton
className={micClasses} className={micClasses}
@ -821,10 +811,15 @@ export default class CallView extends React.Component<IProps, IState> {
{ expandButton } { expandButton }
</div>; </div>;
const callTypeIconClassName = classNames("mx_CallView_header_callTypeIcon", {
"mx_CallView_header_callTypeIcon_voice": !isVideoCall,
"mx_CallView_header_callTypeIcon_video": isVideoCall,
});
let header: React.ReactNode; let header: React.ReactNode;
if (!this.props.pipMode) { if (!this.props.pipMode) {
header = <div className="mx_CallView_header"> header = <div className="mx_CallView_header">
<div className="mx_CallView_header_phoneIcon" /> <div className={callTypeIconClassName} />
<span className="mx_CallView_header_callType">{ callTypeText }</span> <span className="mx_CallView_header_callType">{ callTypeText }</span>
{ headerControls } { headerControls }
</div>; </div>;