From a8d27746b4de5a938fc44f94e19d0f8f81afefdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 25 Jul 2021 17:07:18 +0200 Subject: [PATCH 1/5] Show dialpad only when PSTN supported MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index a98c42526e..966d8e4a09 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -537,8 +537,6 @@ export default class CallView extends React.Component { } // 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; if (this.state.callState === CallState.Connected) { contextMenuButton = ( @@ -549,6 +547,9 @@ export default class CallView extends React.Component { isExpanded={this.state.showMoreMenu} /> ); + } + let dialpadButton; + if (this.state.callState === CallState.Connected && CallHandler.sharedInstance().getSupportsPstnProtocol()) { dialpadButton = ( Date: Sun, 25 Jul 2021 17:24:18 +0200 Subject: [PATCH 2/5] Fix call type icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 11 +++++++++-- src/components/views/voip/CallView.tsx | 7 ++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 59298ef8e6..2bb5b8ec3f 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -279,7 +279,7 @@ limitations under the License. max-width: 240px; } -.mx_CallView_header_phoneIcon { +.mx_CallView_header_callTypeIcon { display: inline-block; margin-right: 6px; height: 16px; @@ -293,12 +293,19 @@ limitations under the License. height: 16px; width: 16px; - background-color: $warning-color; + background-color: $secondary-fg-color; mask-repeat: no-repeat; mask-size: contain; mask-position: center; + } + + &.mx_CallView_header_callTypeIcon_voice::before { 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 { diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 966d8e4a09..039f5f2dcf 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -822,10 +822,15 @@ export default class CallView extends React.Component { { expandButton } ; + const callTypeIconClassName = classNames("mx_CallView_header_callTypeIcon", { + "mx_CallView_header_callTypeIcon_voice": !isVideoCall, + "mx_CallView_header_callTypeIcon_video": isVideoCall, + }); + let header: React.ReactNode; if (!this.props.pipMode) { header =
-
+
{ callTypeText } { headerControls }
; From 17546026133259874c60fd29c02c65f2d415e9fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 25 Jul 2021 17:30:59 +0200 Subject: [PATCH 3/5] Increase CONTROLS_HIDE_DELAY MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 039f5f2dcf..80db71d31f 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -102,7 +102,7 @@ function exitFullscreen() { 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 to get the max height of the video const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px) From 3ef20174f30933f4333e0229a106f40a57dac6ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 25 Jul 2021 18:11:29 +0200 Subject: [PATCH 4/5] Fix issues with the controls disappearing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 1 - src/components/views/voip/CallView.tsx | 59 +++++++++++--------------- 2 files changed, 24 insertions(+), 36 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 2bb5b8ec3f..104e2993d8 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -313,7 +313,6 @@ limitations under the License. display: flex; justify-content: center; bottom: 5px; - width: 100%; opacity: 1; transition: opacity 0.5s; z-index: 200; // To be above _all_ feeds diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 80db71d31f..14025ce3f0 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -67,6 +67,7 @@ interface IState { screensharing: boolean; callState: CallState; controlsVisible: boolean; + hoveringControls: boolean; showMoreMenu: boolean; showDialpad: boolean; primaryFeed: CallFeed; @@ -128,6 +129,7 @@ export default class CallView extends React.Component { screensharing: this.props.call.isScreensharing(), callState: this.props.call.state, controlsVisible: true, + hoveringControls: false, showMoreMenu: false, showDialpad: false, primaryFeed: primary, @@ -244,6 +246,7 @@ export default class CallView extends React.Component { }; private onControlsHideTimer = () => { + if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return; this.controlsHideTimer = null; this.setState({ controlsVisible: false, @@ -293,24 +296,10 @@ export default class CallView extends React.Component { private onDialpadClick = (): void => { if (!this.state.showDialpad) { - if (this.controlsHideTimer) { - clearTimeout(this.controlsHideTimer); - this.controlsHideTimer = null; - } - - this.setState({ - showDialpad: true, - controlsVisible: true, - }); + this.setState({ showDialpad: true }); + this.showControls(); } else { - if (this.controlsHideTimer !== null) { - clearTimeout(this.controlsHideTimer); - } - this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY); - - this.setState({ - showDialpad: false, - }); + this.setState({ showDialpad: false }); } }; @@ -345,29 +334,16 @@ export default class CallView extends React.Component { }; private onMoreClick = (): void => { - if (this.controlsHideTimer) { - clearTimeout(this.controlsHideTimer); - this.controlsHideTimer = null; - } - - this.setState({ - showMoreMenu: true, - controlsVisible: true, - }); + this.setState({ showMoreMenu: true }); + this.showControls(); }; private closeDialpad = (): void => { - this.setState({ - showDialpad: false, - }); - this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY); + this.setState({ showDialpad: false }); }; private closeContextMenu = (): void => { - this.setState({ - showMoreMenu: false, - }); - this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY); + this.setState({ showMoreMenu: false }); }; // 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 { } }; + private onCallControlsMouseEnter = (): void => { + this.setState({ hoveringControls: true }); + this.showControls(); + }; + + private onCallControlsMouseLeave = (): void => { + this.setState({ hoveringControls: false }); + }; + private onRoomAvatarClick = (): void => { const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call); dis.dispatch({ @@ -561,7 +546,11 @@ export default class CallView extends React.Component { } return ( -
+
{ dialpadButton } Date: Tue, 27 Jul 2021 17:52:13 +0200 Subject: [PATCH 5/5] Correctly hide the dialpad MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 14025ce3f0..481d7b303c 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -534,7 +534,7 @@ export default class CallView extends React.Component { ); } let dialpadButton; - if (this.state.callState === CallState.Connected && CallHandler.sharedInstance().getSupportsPstnProtocol()) { + if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) { dialpadButton = (