From bebcb32e8fb4270632c4c2a2a85a2271a8b121b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 16:23:35 +0200 Subject: [PATCH 01/34] Add dragCallbacks 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 | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 6745713845..65547bb814 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -49,6 +49,13 @@ interface IProps { // This is sort of a proxy for a number of things but we currently have no // need to control those things separately, so this is simpler. pipMode?: boolean; + + // Callbacks for dragging the CallView in PIP mode + dragCallbacks?: { + onStartMoving: (event: React.MouseEvent) => void; + onMoving: (event: React.MouseEvent) => void; + onEndMoving: () => void; + } } interface IState { From 8948c7419cdbd587550e20720ea0bb6f11a44358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 16:24:47 +0200 Subject: [PATCH 02/34] Call dragCallbacks 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 | 30 ++++++++++++++++---------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 65547bb814..c35e62448e 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -623,19 +623,27 @@ export default class CallView extends React.Component { ; } - header =
- - - -
-
{callRoom.name}
-
- {callTypeText} - {secondaryCallInfo} + header = ( +
+ + + +
+
{callRoom.name}
+
+ {callTypeText} + {secondaryCallInfo} +
+ {headerControls}
- {headerControls} -
; + ); myClassName = 'mx_CallView_pip'; } From c97bbe11a93eb9c49ce45b4f1a4c2df280b344a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 16:26:03 +0200 Subject: [PATCH 03/34] Prep state and props for dragging MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index d31afddec9..8dca5314e5 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -50,6 +50,13 @@ interface IState { // Any other call we're displaying: only if the user is on two calls and not viewing either of the rooms // they belong to secondaryCall: MatrixCall; + + // Position of the CallPreview + translationX: number; + translationY: number; + + // True if the CallPreview is being dragged + moving: boolean; } // Splits a list of calls into one 'primary' one and a list @@ -106,9 +113,17 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], + translationX: 0, + translationY: 0, + moving: false, }; } + private initX = 0; + private initY = 0; + private lastX = 0; + private lastY = 0; + public componentDidMount() { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); this.dispatcherRef = dis.register(this.onAction); From f64a9501955e5506b09e35009003133edf268dc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 16:26:41 +0200 Subject: [PATCH 04/34] Prep basic methods for dragging MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 8dca5314e5..68fcef6747 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -184,6 +184,29 @@ export default class CallPreview extends React.Component { }); } + private onStartMoving = (event: React.MouseEvent) => { + this.setState({moving: true}); + + this.initX = event.pageX - this.lastX; + this.initY = event.pageY - this.lastY; + } + + private onMoving = (event: React.MouseEvent) => { + if (!this.state.moving) return; + + this.lastX = event.pageX - this.initX; + this.lastY = event.pageY - this.initY; + + this.setState({ + translationX: this.lastX, + translationY: this.lastY, + }); + } + + private onEndMoving = () => { + this.setState({moving: false}); + } + public render() { if (this.state.primaryCall) { return ( From 11222e7a467a6e58007ae14e539856a21251bd20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 16:26:54 +0200 Subject: [PATCH 05/34] Wire up dragging MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 68fcef6747..499cdfb526 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -209,8 +209,26 @@ export default class CallPreview extends React.Component { public render() { if (this.state.primaryCall) { + const translatePixelsX = this.state.translationX + "px"; + const translatePixelsY = this.state.translationY + "px"; + const style = { + transform: `translateX(${translatePixelsX}) + translateY(${translatePixelsY})`, + }; + return ( - +
+ +
); } From 241e626e96a85fcf48a028f3af418ccd14e5235f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 20:55:05 +0200 Subject: [PATCH 06/34] Don't listen for onMouseLeave MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This would cause problems because the moving element wouldn't catch up with the user Signed-off-by: Šimon Brandner --- src/components/views/voip/CallView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index c35e62448e..23a4fcca59 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -629,7 +629,6 @@ export default class CallView extends React.Component { onMouseDown={this.props.dragCallbacks?.onStartMoving} onMouseMove={this.props.dragCallbacks?.onMoving} onMouseUp={this.props.dragCallbacks?.onEndMoving} - onMouseLeave={this.props.dragCallbacks?.onEndMoving} > From 53b8fd3072f8dddcb4e5e8b44da6d77c3a1e6ac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 20:57:18 +0200 Subject: [PATCH 07/34] Listen for mousemove on document scale MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 499cdfb526..17e2e9cf1a 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -126,12 +126,14 @@ export default class CallPreview extends React.Component { public componentDidMount() { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + document.addEventListener("mousemove", this.onMoving); this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); } public componentWillUnmount() { MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); + document.removeEventListener("mousemove", this.onMoving); if (this.roomStoreToken) { this.roomStoreToken.remove(); } @@ -191,7 +193,7 @@ export default class CallPreview extends React.Component { this.initY = event.pageY - this.lastY; } - private onMoving = (event: React.MouseEvent) => { + private onMoving = (event: React.MouseEvent | MouseEvent) => { if (!this.state.moving) return; this.lastX = event.pageX - this.initX; From fca5347668465341ef0757c56de0adb78235741a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 2 May 2021 21:17:59 +0200 Subject: [PATCH 08/34] Add preventDefault() and stopPropagation() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This avoids text being selected while dragging Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 17e2e9cf1a..761458cb4c 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -187,6 +187,9 @@ export default class CallPreview extends React.Component { } private onStartMoving = (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + this.setState({moving: true}); this.initX = event.pageX - this.lastX; @@ -194,6 +197,9 @@ export default class CallPreview extends React.Component { } private onMoving = (event: React.MouseEvent | MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + if (!this.state.moving) return; this.lastX = event.pageX - this.initX; From 51e80dd17228f5645c0b7bbab42206a0bffa43fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 07:50:21 +0200 Subject: [PATCH 09/34] Remove onMoving listner from CallView MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is not necessary since we already listen for it in CallPreview Signed-off-by: Šimon Brandner --- src/components/views/voip/CallView.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 23a4fcca59..cbedfb3a3d 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -53,7 +53,6 @@ interface IProps { // Callbacks for dragging the CallView in PIP mode dragCallbacks?: { onStartMoving: (event: React.MouseEvent) => void; - onMoving: (event: React.MouseEvent) => void; onEndMoving: () => void; } } @@ -627,7 +626,6 @@ export default class CallView extends React.Component {
From 7042eb38ddb7f838b2fe8dc952aef7c02f45e3e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 08:12:54 +0200 Subject: [PATCH 10/34] Listen for mouseup on the document MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 2 ++ src/components/views/voip/CallView.tsx | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 761458cb4c..aa2e71339e 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -127,6 +127,7 @@ export default class CallPreview extends React.Component { public componentDidMount() { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); document.addEventListener("mousemove", this.onMoving); + document.addEventListener("mouseup", this.onEndMoving); this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); } @@ -134,6 +135,7 @@ export default class CallPreview extends React.Component { public componentWillUnmount() { MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); document.removeEventListener("mousemove", this.onMoving); + document.removeEventListener("mouseup", this.onEndMoving); if (this.roomStoreToken) { this.roomStoreToken.remove(); } diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index cbedfb3a3d..1f555e5227 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -626,7 +626,6 @@ export default class CallView extends React.Component {
From adcdd72a0838e1eddd736cbafb0cb1883cfdf1bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:07:25 +0200 Subject: [PATCH 11/34] preventDefault() and stopPropagation() only if moving MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index aa2e71339e..3b7a297841 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -199,11 +199,11 @@ export default class CallPreview extends React.Component { } private onMoving = (event: React.MouseEvent | MouseEvent) => { + if (!this.state.moving) return; + event.preventDefault(); event.stopPropagation(); - if (!this.state.moving) return; - this.lastX = event.pageX - this.initX; this.lastY = event.pageY - this.initY; From 0851cf4415f3dd04502326909cee1b6400ea73ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:16:08 +0200 Subject: [PATCH 12/34] Simplifie things MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 6 +----- src/components/views/voip/CallView.tsx | 9 +++------ 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 3b7a297841..153258d2c8 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -232,11 +232,7 @@ export default class CallPreview extends React.Component { call={this.state.primaryCall} secondaryCall={this.state.secondaryCall} pipMode={true} - dragCallbacks={{ - onStartMoving: this.onStartMoving, - onMoving: this.onMoving, - onEndMoving: this.onEndMoving, - }} + onMouseDownOnHeader={this.onStartMoving} />
); diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 1f555e5227..e8d3666c53 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -50,11 +50,8 @@ interface IProps { // need to control those things separately, so this is simpler. pipMode?: boolean; - // Callbacks for dragging the CallView in PIP mode - dragCallbacks?: { - onStartMoving: (event: React.MouseEvent) => void; - onEndMoving: () => void; - } + // Used for dragging the PiP CallView + onMouseDownOnHeader?: (event: React.MouseEvent) => void; } interface IState { @@ -625,7 +622,7 @@ export default class CallView extends React.Component { header = (
From b8cb72345ccbe115ba3bdb861467ee139ecff20d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:39:00 +0200 Subject: [PATCH 13/34] Remove unnecessary margin 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 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 7292e325df..18e7c215cb 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -39,7 +39,6 @@ limitations under the License. .mx_CallView_pip { width: 320px; padding-bottom: 8px; - margin-top: 10px; background-color: $voipcall-plinth-color; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20); border-radius: 8px; From fe5fb1885fc95243a9964942877268f7e6eef993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:39:24 +0200 Subject: [PATCH 14/34] Add styling for CallPreview and make it fixed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallPreview.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 res/css/views/voip/_CallPreview.scss diff --git a/res/css/views/voip/_CallPreview.scss b/res/css/views/voip/_CallPreview.scss new file mode 100644 index 0000000000..92348fb465 --- /dev/null +++ b/res/css/views/voip/_CallPreview.scss @@ -0,0 +1,21 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_CallPreview { + position: fixed; + left: 0; + top: 0; +} From 7faf9eb4ccd56dfe9ab308964471a5ff099c805b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:39:37 +0200 Subject: [PATCH 15/34] Use styling for CallPreview MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/_components.scss b/res/css/_components.scss index 0057f8a8fc..c476e577df 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -254,6 +254,7 @@ @import "./views/voip/_CallContainer.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_CallViewForRoom.scss"; +@import "./views/voip/_CallPreview.scss"; @import "./views/voip/_DialPad.scss"; @import "./views/voip/_DialPadContextMenu.scss"; @import "./views/voip/_DialPadModal.scss"; From 76f503666c5e7594751302a5a5fabc9babc8a64e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:40:12 +0200 Subject: [PATCH 16/34] Add default offset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 153258d2c8..74e1815631 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -29,6 +29,9 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import { Action } from '../../../dispatcher/actions'; +const DEFAULT_X_OFFSET = 64; +const DEFAULT_Y_OFFSET = 64; + const SHOW_CALL_IN_STATES = [ CallState.Connected, CallState.InviteSent, @@ -113,16 +116,16 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: 0, - translationY: 0, + translationX: DEFAULT_X_OFFSET, + translationY: DEFAULT_Y_OFFSET, moving: false, }; } private initX = 0; private initY = 0; - private lastX = 0; - private lastY = 0; + private lastX = DEFAULT_X_OFFSET; + private lastY = DEFAULT_Y_OFFSET; public componentDidMount() { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); From 2c9231641b57ea7d5fa577c9aa9445347360665f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 15:40:59 +0200 Subject: [PATCH 17/34] Add ref to callViewWrapper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 74e1815631..4a0ccc93b9 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import React, { createRef } from 'react'; import CallView from "./CallView"; import RoomViewStore from '../../../stores/RoomViewStore'; @@ -122,6 +122,8 @@ export default class CallPreview extends React.Component { }; } + private callViewWrapper = createRef(); + private initX = 0; private initY = 0; private lastX = DEFAULT_X_OFFSET; @@ -230,7 +232,11 @@ export default class CallPreview extends React.Component { }; return ( -
+
Date: Mon, 3 May 2021 15:43:13 +0200 Subject: [PATCH 18/34] Add semicolons to event listeners MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 4a0ccc93b9..366b0d30b3 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -191,7 +191,7 @@ export default class CallPreview extends React.Component { primaryCall: primaryCall, secondaryCall: secondaryCalls[0], }); - } + }; private onStartMoving = (event: React.MouseEvent) => { event.preventDefault(); @@ -201,7 +201,7 @@ export default class CallPreview extends React.Component { this.initX = event.pageX - this.lastX; this.initY = event.pageY - this.lastY; - } + }; private onMoving = (event: React.MouseEvent | MouseEvent) => { if (!this.state.moving) return; @@ -216,11 +216,11 @@ export default class CallPreview extends React.Component { translationX: this.lastX, translationY: this.lastY, }); - } + }; private onEndMoving = () => { this.setState({moving: false}); - } + }; public render() { if (this.state.primaryCall) { From d8d380c74de6ff27d9e0b6c764e1db35b583119e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 17:22:45 +0200 Subject: [PATCH 19/34] Always keep the PiP CallView on the screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 25 +++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 366b0d30b3..74d43dcb19 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -209,8 +209,29 @@ export default class CallPreview extends React.Component { event.preventDefault(); event.stopPropagation(); - this.lastX = event.pageX - this.initX; - this.lastY = event.pageY - this.initY; + const width = this.callViewWrapper.current.clientWidth; + const height = this.callViewWrapper.current.clientHeight; + + const precalculatedLastX = event.pageX - this.initX; + const precalculatedLastY = event.pageY - this.initY; + + // Avoid overflow on the x axis + if (precalculatedLastX + width >= window.innerWidth) { + this.lastX = window.innerWidth - width; + } else if (precalculatedLastX <= 0) { + this.lastX = 0; + } else { + this.lastX = precalculatedLastX; + } + + // Avoid overflow on the y axis + if (precalculatedLastY + height >= window.innerHeight) { + this.lastY = window.innerHeight - height; + } else if (precalculatedLastY <= 0) { + this.lastY = 0; + } else { + this.lastY = precalculatedLastY; + } this.setState({ translationX: this.lastX, From be2da6376e1c5b3a6be2c23a3bfbe89766e5bbc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 17:49:55 +0200 Subject: [PATCH 20/34] Simplifie translation code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 25 ++++++++++++----------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 74d43dcb19..9a9ebd5e92 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -126,8 +126,6 @@ export default class CallPreview extends React.Component { private initX = 0; private initY = 0; - private lastX = DEFAULT_X_OFFSET; - private lastY = DEFAULT_Y_OFFSET; public componentDidMount() { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); @@ -199,8 +197,8 @@ export default class CallPreview extends React.Component { this.setState({moving: true}); - this.initX = event.pageX - this.lastX; - this.initY = event.pageY - this.lastY; + this.initX = event.pageX - this.state.translationX; + this.initY = event.pageY - this.state.translationY; }; private onMoving = (event: React.MouseEvent | MouseEvent) => { @@ -215,27 +213,30 @@ export default class CallPreview extends React.Component { const precalculatedLastX = event.pageX - this.initX; const precalculatedLastY = event.pageY - this.initY; + let translationX; + let translationY; + // Avoid overflow on the x axis if (precalculatedLastX + width >= window.innerWidth) { - this.lastX = window.innerWidth - width; + translationX = window.innerWidth - width; } else if (precalculatedLastX <= 0) { - this.lastX = 0; + translationX = 0; } else { - this.lastX = precalculatedLastX; + translationX = precalculatedLastX; } // Avoid overflow on the y axis if (precalculatedLastY + height >= window.innerHeight) { - this.lastY = window.innerHeight - height; + translationY = window.innerHeight - height; } else if (precalculatedLastY <= 0) { - this.lastY = 0; + translationY = 0; } else { - this.lastY = precalculatedLastY; + translationY = precalculatedLastY; } this.setState({ - translationX: this.lastX, - translationY: this.lastY, + translationX: translationX, + translationY: translationY, }); }; From 0bf2b01f84ec490ca48b8d07172202dab7907dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 18:11:02 +0200 Subject: [PATCH 21/34] Keep PiP in the window when resizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 41 ++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 9a9ebd5e92..410b60dcb6 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -29,6 +29,9 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import { Action } from '../../../dispatcher/actions'; +const PIP_VIEW_WIDTH = 320; +const PIP_VIEW_HEIGHT = 180; + const DEFAULT_X_OFFSET = 64; const DEFAULT_Y_OFFSET = 64; @@ -116,7 +119,7 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: DEFAULT_X_OFFSET, + translationX: window.innerWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationY: DEFAULT_Y_OFFSET, moving: false, }; @@ -131,6 +134,7 @@ export default class CallPreview extends React.Component { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); document.addEventListener("mousemove", this.onMoving); document.addEventListener("mouseup", this.onEndMoving); + window.addEventListener("resize", this.onWindowSizeChanged); this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); } @@ -139,6 +143,7 @@ export default class CallPreview extends React.Component { MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); document.removeEventListener("mousemove", this.onMoving); document.removeEventListener("mouseup", this.onEndMoving); + window.removeEventListener("resize", this.onWindowSizeChanged); if (this.roomStoreToken) { this.roomStoreToken.remove(); } @@ -146,6 +151,40 @@ export default class CallPreview extends React.Component { SettingsStore.unwatchSetting(this.settingsWatcherRef); } + private onWindowSizeChanged = () => { + const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH; + const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT; + + const precalculatedLastX = this.state.translationX; + const precalculatedLastY = this.state.translationY; + + let translationX; + let translationY; + + // Avoid overflow on the x axis + if (precalculatedLastX + width >= window.innerWidth) { + translationX = window.innerWidth - width; + } else if (precalculatedLastX <= 0) { + translationX = 0; + } else { + translationX = precalculatedLastX; + } + + // Avoid overflow on the y axis + if (precalculatedLastY + height >= window.innerHeight) { + translationY = window.innerHeight - height; + } else if (precalculatedLastY <= 0) { + translationY = 0; + } else { + translationY = precalculatedLastY; + } + + this.setState({ + translationX: translationX, + translationY: translationY, + }); + } + private onRoomViewStoreUpdate = (payload) => { if (RoomViewStore.getRoomId() === this.state.roomId) return; From 941a6e1c1bb48f2214638768f17018f4f0b4e77f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 18:16:36 +0200 Subject: [PATCH 22/34] Don't duplicate code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 67 +++++++---------------- 1 file changed, 19 insertions(+), 48 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 410b60dcb6..9ab2b9441a 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -152,36 +152,37 @@ export default class CallPreview extends React.Component { } private onWindowSizeChanged = () => { + this.setTranslation(this.state.translationX, this.state.translationY); + } + + private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH; const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT; - const precalculatedLastX = this.state.translationX; - const precalculatedLastY = this.state.translationY; - - let translationX; - let translationY; + let outTranslationX; + let outTranslationY; // Avoid overflow on the x axis - if (precalculatedLastX + width >= window.innerWidth) { - translationX = window.innerWidth - width; - } else if (precalculatedLastX <= 0) { - translationX = 0; + if (inTranslationX + width >= window.innerWidth) { + outTranslationX = window.innerWidth - width; + } else if (inTranslationX <= 0) { + outTranslationX = 0; } else { - translationX = precalculatedLastX; + outTranslationX = inTranslationX; } // Avoid overflow on the y axis - if (precalculatedLastY + height >= window.innerHeight) { - translationY = window.innerHeight - height; - } else if (precalculatedLastY <= 0) { - translationY = 0; + if (inTranslationY + height >= window.innerHeight) { + outTranslationY = window.innerHeight - height; + } else if (inTranslationY <= 0) { + outTranslationY = 0; } else { - translationY = precalculatedLastY; + outTranslationY = inTranslationY; } this.setState({ - translationX: translationX, - translationY: translationY, + translationX: outTranslationX, + translationY: outTranslationY, }); } @@ -246,37 +247,7 @@ export default class CallPreview extends React.Component { event.preventDefault(); event.stopPropagation(); - const width = this.callViewWrapper.current.clientWidth; - const height = this.callViewWrapper.current.clientHeight; - - const precalculatedLastX = event.pageX - this.initX; - const precalculatedLastY = event.pageY - this.initY; - - let translationX; - let translationY; - - // Avoid overflow on the x axis - if (precalculatedLastX + width >= window.innerWidth) { - translationX = window.innerWidth - width; - } else if (precalculatedLastX <= 0) { - translationX = 0; - } else { - translationX = precalculatedLastX; - } - - // Avoid overflow on the y axis - if (precalculatedLastY + height >= window.innerHeight) { - translationY = window.innerHeight - height; - } else if (precalculatedLastY <= 0) { - translationY = 0; - } else { - translationY = precalculatedLastY; - } - - this.setState({ - translationX: translationX, - translationY: translationY, - }); + this.setTranslation(event.pageX - this.initX, event.pageY - this.initY); }; private onEndMoving = () => { From 889b90fbc3cd564f6c6717d365f37e5fc21c2f79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 18:33:24 +0200 Subject: [PATCH 23/34] Fix const values MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 9ab2b9441a..b3e66f09b3 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -29,11 +29,11 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import { Action } from '../../../dispatcher/actions'; -const PIP_VIEW_WIDTH = 320; -const PIP_VIEW_HEIGHT = 180; +const PIP_VIEW_WIDTH = 336; +const PIP_VIEW_HEIGHT = 232; -const DEFAULT_X_OFFSET = 64; -const DEFAULT_Y_OFFSET = 64; +const DEFAULT_X_OFFSET = 16; +const DEFAULT_Y_OFFSET = 48; const SHOW_CALL_IN_STATES = [ CallState.Connected, From f79339c2dadd86bac266c7f0eab7e3eb0317b479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 18:36:11 +0200 Subject: [PATCH 24/34] Add missing semicolon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index b3e66f09b3..60153732d8 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -153,7 +153,7 @@ export default class CallPreview extends React.Component { private onWindowSizeChanged = () => { this.setTranslation(this.state.translationX, this.state.translationY); - } + }; private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH; From 9755da6f0915c8a3dec9726c33f60f4468f88037 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 3 May 2021 19:59:51 +0200 Subject: [PATCH 25/34] Add ? MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 60153732d8..1b7c7f6e48 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -156,8 +156,8 @@ export default class CallPreview extends React.Component { }; private setTranslation(inTranslationX: number, inTranslationY: number) { - const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH; - const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT; + const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; + const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; let outTranslationX; let outTranslationY; From ab3ccecc967208f7847669d3ba1678ea9f42ed9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 15:52:55 +0200 Subject: [PATCH 26/34] Use UIStore MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 730910e0e2..13c272bebb 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -27,6 +27,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; +import UIStore from '../../../stores/UIStore'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; @@ -118,7 +119,7 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: window.innerWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, + translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationY: DEFAULT_Y_OFFSET, moving: false, }; @@ -164,8 +165,8 @@ export default class CallPreview extends React.Component { let outTranslationY; // Avoid overflow on the x axis - if (inTranslationX + width >= window.innerWidth) { - outTranslationX = window.innerWidth - width; + if (inTranslationX + width >= UIStore.instance.windowWidth) { + outTranslationX = UIStore.instance.windowWidth - width; } else if (inTranslationX <= 0) { outTranslationX = 0; } else { @@ -173,8 +174,8 @@ export default class CallPreview extends React.Component { } // Avoid overflow on the y axis - if (inTranslationY + height >= window.innerHeight) { - outTranslationY = window.innerHeight - height; + if (inTranslationY + height >= UIStore.instance.windowHeight) { + outTranslationY = UIStore.instance.windowHeight - height; } else if (inTranslationY <= 0) { outTranslationY = 0; } else { From 88ba24f36219a59e66efb85c187c1d615c54e120 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 18:34:58 +0200 Subject: [PATCH 27/34] Fix bugs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallContainer.scss | 4 ++-- res/css/views/voip/_VideoFeed.scss | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index 8262075559..e51f20ff99 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -30,8 +30,8 @@ limitations under the License. pointer-events: initial; // restore pointer events so the user can leave/interact cursor: pointer; - .mx_CallView_video { - width: 350px; + .mx_VideoFeed_remote.mx_VideoFeed_voice { + min-height: 150px; } .mx_VideoFeed_local { diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 7d85ac264e..4a3fbdf597 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_VideoFeed_voice { - // We don't want to collide with the call controls that have 52px of height - padding-bottom: 52px; background-color: $inverted-bg-color; } From 946317ddf87bdb0178a7bf92824204e00a27166f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 19:04:55 +0200 Subject: [PATCH 28/34] Move moving out of state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 13c272bebb..865a3f34af 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -60,9 +60,6 @@ interface IState { // Position of the CallPreview translationX: number; translationY: number; - - // True if the CallPreview is being dragged - moving: boolean; } // Splits a list of calls into one 'primary' one and a list @@ -121,7 +118,6 @@ export default class CallPreview extends React.Component { secondaryCall: secondaryCalls[0], translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationY: DEFAULT_Y_OFFSET, - moving: false, }; } @@ -129,6 +125,7 @@ export default class CallPreview extends React.Component { private initX = 0; private initY = 0; + private moving = false; public componentDidMount() { CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls); @@ -240,14 +237,14 @@ export default class CallPreview extends React.Component { event.preventDefault(); event.stopPropagation(); - this.setState({moving: true}); + this.moving = true; this.initX = event.pageX - this.state.translationX; this.initY = event.pageY - this.state.translationY; }; private onMoving = (event: React.MouseEvent | MouseEvent) => { - if (!this.state.moving) return; + if (!this.moving) return; event.preventDefault(); event.stopPropagation(); @@ -256,7 +253,7 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { - this.setState({moving: false}); + this.moving = false; }; public render() { From 61929e3fc2857140e12f7405cb5c3188d7327cf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 19:43:19 +0200 Subject: [PATCH 29/34] Implement snapping MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 60 +++++++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 865a3f34af..e5a0487a4a 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -32,8 +32,12 @@ import UIStore from '../../../stores/UIStore'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; -const DEFAULT_X_OFFSET = 16; -const DEFAULT_Y_OFFSET = 48; +const PADDING = { + top: 58, + bottom: 58, + left: 76, + right: 8, +} const SHOW_CALL_IN_STATES = [ CallState.Connected, @@ -44,6 +48,7 @@ const SHOW_CALL_IN_STATES = [ CallState.WaitLocalMedia, ]; + interface IProps { } @@ -116,8 +121,8 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, - translationY: DEFAULT_Y_OFFSET, + translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH, + translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH, }; } @@ -132,7 +137,7 @@ export default class CallPreview extends React.Component { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); document.addEventListener("mousemove", this.onMoving); document.addEventListener("mouseup", this.onEndMoving); - window.addEventListener("resize", this.onWindowSizeChanged); + window.addEventListener("resize", this.snap); this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); } @@ -142,7 +147,7 @@ export default class CallPreview extends React.Component { MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); document.removeEventListener("mousemove", this.onMoving); document.removeEventListener("mouseup", this.onEndMoving); - window.removeEventListener("resize", this.onWindowSizeChanged); + window.removeEventListener("resize", this.snap); if (this.roomStoreToken) { this.roomStoreToken.remove(); } @@ -150,10 +155,6 @@ export default class CallPreview extends React.Component { SettingsStore.unwatchSetting(this.settingsWatcherRef); } - private onWindowSizeChanged = () => { - this.setTranslation(this.state.translationX, this.state.translationY); - }; - private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; @@ -185,6 +186,44 @@ export default class CallPreview extends React.Component { }); } + private snap = () => { + const translationX = this.state.translationX; + const translationY = this.state.translationY; + // We subtract the PiP size from the window size in order to calculate + // the position to snap to from the PiP center and not its top-left + // corner + const windowWidth = ( + UIStore.instance.windowWidth - + (this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH) + ); + const windowHeight = ( + UIStore.instance.windowHeight - + (this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT) + ); + + if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) { + this.setState({ + translationX: windowWidth - PADDING.right, + translationY: windowHeight - PADDING.bottom, + }); + } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) { + this.setState({ + translationX: windowWidth - PADDING.right, + translationY: PADDING.top, + }); + } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) { + this.setState({ + translationX: PADDING.left, + translationY: windowHeight - PADDING.bottom, + }); + } else { + this.setState({ + translationX: PADDING.left, + translationY: PADDING.top, + }); + } + } + private onRoomViewStoreUpdate = (payload) => { if (RoomViewStore.getRoomId() === this.state.roomId) return; @@ -253,6 +292,7 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { + this.snap(); this.moving = false; }; From 39ca2844bde3ecfecd9d4e6956654b047331d552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 10:10:27 +0200 Subject: [PATCH 30/34] Add AnimationUtils MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/AnimationUtils.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/utils/AnimationUtils.ts diff --git a/src/utils/AnimationUtils.ts b/src/utils/AnimationUtils.ts new file mode 100644 index 0000000000..9654bdeb11 --- /dev/null +++ b/src/utils/AnimationUtils.ts @@ -0,0 +1,19 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +export function lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end; +} From c8cf23b87c1c649a4a03b89ea8dd61f26f20c7ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 12:21:24 +0200 Subject: [PATCH 31/34] Implement LERP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 96 +++++++++++++---------- 1 file changed, 54 insertions(+), 42 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index e5a0487a4a..210569ed05 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -28,10 +28,14 @@ import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call' import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import UIStore from '../../../stores/UIStore'; +import { lerp } from '../../../utils/AnimationUtils'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; +const MOVING_AMT = 0.2; +const SNAPPING_AMT = 0.05; + const PADDING = { top: 58, bottom: 58, @@ -107,6 +111,12 @@ export default class CallPreview extends React.Component { private roomStoreToken: any; private dispatcherRef: string; private settingsWatcherRef: string; + private callViewWrapper = createRef(); + private initX = 0; + private initY = 0; + private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH; + private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH; + private moving = false; constructor(props: IProps) { super(props); @@ -126,12 +136,6 @@ export default class CallPreview extends React.Component { }; } - private callViewWrapper = createRef(); - - private initX = 0; - private initY = 0; - private moving = false; - public componentDidMount() { CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls); this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); @@ -155,40 +159,52 @@ export default class CallPreview extends React.Component { SettingsStore.unwatchSetting(this.settingsWatcherRef); } + private animationCallback = () => { + // If the PiP isn't being dragged and there is only a tiny difference in + // the desiredTranslation and translation, quit the animationCallback + // loop. If that is the case, it means the PiP has snapped into its + // position and there is nothing to do. Not doing this would cause an + // infinite loop + if ( + !this.moving && + Math.abs(this.state.translationX - this.desiredTranslationX) <= 1 && + Math.abs(this.state.translationY - this.desiredTranslationY) <= 1 + ) return; + + const amt = this.moving ? MOVING_AMT : SNAPPING_AMT; + this.setState({ + translationX: lerp(this.state.translationX, this.desiredTranslationX, amt), + translationY: lerp(this.state.translationY, this.desiredTranslationY, amt), + }); + requestAnimationFrame(this.animationCallback); + } + private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; - let outTranslationX; - let outTranslationY; - // Avoid overflow on the x axis if (inTranslationX + width >= UIStore.instance.windowWidth) { - outTranslationX = UIStore.instance.windowWidth - width; + this.desiredTranslationX = UIStore.instance.windowWidth - width; } else if (inTranslationX <= 0) { - outTranslationX = 0; + this.desiredTranslationX = 0; } else { - outTranslationX = inTranslationX; + this.desiredTranslationX = inTranslationX; } // Avoid overflow on the y axis if (inTranslationY + height >= UIStore.instance.windowHeight) { - outTranslationY = UIStore.instance.windowHeight - height; + this.desiredTranslationY = UIStore.instance.windowHeight - height; } else if (inTranslationY <= 0) { - outTranslationY = 0; + this.desiredTranslationY = 0; } else { - outTranslationY = inTranslationY; + this.desiredTranslationY = inTranslationY; } - - this.setState({ - translationX: outTranslationX, - translationY: outTranslationY, - }); } private snap = () => { - const translationX = this.state.translationX; - const translationY = this.state.translationY; + const translationX = this.desiredTranslationX; + const translationY = this.desiredTranslationY; // We subtract the PiP size from the window size in order to calculate // the position to snap to from the PiP center and not its top-left // corner @@ -202,26 +218,22 @@ export default class CallPreview extends React.Component { ); if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) { - this.setState({ - translationX: windowWidth - PADDING.right, - translationY: windowHeight - PADDING.bottom, - }); + this.desiredTranslationX = windowWidth - PADDING.right; + this.desiredTranslationY = windowHeight - PADDING.bottom; } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) { - this.setState({ - translationX: windowWidth - PADDING.right, - translationY: PADDING.top, - }); + this.desiredTranslationX = windowWidth - PADDING.right; + this.desiredTranslationY = PADDING.top; } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) { - this.setState({ - translationX: PADDING.left, - translationY: windowHeight - PADDING.bottom, - }); + this.desiredTranslationX = PADDING.left; + this.desiredTranslationY = windowHeight - PADDING.bottom; } else { - this.setState({ - translationX: PADDING.left, - translationY: PADDING.top, - }); + this.desiredTranslationX = PADDING.left; + this.desiredTranslationY = PADDING.top; } + + // We start animating here because we want the PiP to move when we're + // resizing the window + requestAnimationFrame(this.animationCallback); } private onRoomViewStoreUpdate = (payload) => { @@ -277,9 +289,9 @@ export default class CallPreview extends React.Component { event.stopPropagation(); this.moving = true; - - this.initX = event.pageX - this.state.translationX; - this.initY = event.pageY - this.state.translationY; + this.initX = event.pageX - this.desiredTranslationX; + this.initY = event.pageY - this.desiredTranslationY; + requestAnimationFrame(this.animationCallback); }; private onMoving = (event: React.MouseEvent | MouseEvent) => { @@ -292,8 +304,8 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { - this.snap(); this.moving = false; + this.snap(); }; public render() { From ba3d7f9beeb1e0cdaf5a070a6a8b4d10c0641333 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 15:50:52 +0200 Subject: [PATCH 32/34] Use marked execution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 1257d6760a..ddcb9057ec 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -29,6 +29,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import UIStore from '../../../stores/UIStore'; import { lerp } from '../../../utils/AnimationUtils'; +import { MarkedExecution } from '../../../utils/MarkedExecution'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; @@ -116,6 +117,10 @@ export default class CallPreview extends React.Component { private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH; private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH; private moving = false; + private scheduledUpdate = new MarkedExecution( + () => this.animationCallback(), + () => requestAnimationFrame(() => this.scheduledUpdate.trigger()), + ); constructor(props: IProps) { super(props); @@ -175,7 +180,7 @@ export default class CallPreview extends React.Component { translationX: lerp(this.state.translationX, this.desiredTranslationX, amt), translationY: lerp(this.state.translationY, this.desiredTranslationY, amt), }); - requestAnimationFrame(this.animationCallback); + this.scheduledUpdate.mark(); }; private setTranslation(inTranslationX: number, inTranslationY: number) { @@ -232,7 +237,7 @@ export default class CallPreview extends React.Component { // We start animating here because we want the PiP to move when we're // resizing the window - requestAnimationFrame(this.animationCallback); + this.scheduledUpdate.mark(); }; private onRoomViewStoreUpdate = (payload) => { @@ -290,7 +295,7 @@ export default class CallPreview extends React.Component { this.moving = true; this.initX = event.pageX - this.desiredTranslationX; this.initY = event.pageY - this.desiredTranslationY; - requestAnimationFrame(this.animationCallback); + this.scheduledUpdate.mark(); }; private onMoving = (event: React.MouseEvent | MouseEvent) => { From d9b8f0d540d1506b1fc885b6e0b87adb8374cf8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 15:58:35 +0200 Subject: [PATCH 33/34] Add docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/AnimationUtils.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/utils/AnimationUtils.ts b/src/utils/AnimationUtils.ts index 9654bdeb11..0ade08df84 100644 --- a/src/utils/AnimationUtils.ts +++ b/src/utils/AnimationUtils.ts @@ -14,6 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ +/** + * This method linearly interpolates between two points (start, end). This is + * most commonly used to find a point some fraction of the way along a line + * between two endpoints (e.g. to move an object gradually between those + * points). + * @param {number} start the starting point + * @param {number} end the ending point + * @param {number} amt the interpolant + * @returns + */ export function lerp(start: number, end: number, amt: number) { return (1 - amt) * start + amt * end; } From a90b8f32f19eab28b9c0f7baa9b96712e77eeb91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 16:45:04 +0200 Subject: [PATCH 34/34] Add some tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/AnimationUtils.ts | 3 +++ test/utils/AnimationUtils-test.ts | 35 +++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 test/utils/AnimationUtils-test.ts diff --git a/src/utils/AnimationUtils.ts b/src/utils/AnimationUtils.ts index 0ade08df84..61df52826d 100644 --- a/src/utils/AnimationUtils.ts +++ b/src/utils/AnimationUtils.ts @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { clamp } from "lodash"; + /** * This method linearly interpolates between two points (start, end). This is * most commonly used to find a point some fraction of the way along a line @@ -25,5 +27,6 @@ limitations under the License. * @returns */ export function lerp(start: number, end: number, amt: number) { + amt = clamp(amt, 0, 1); return (1 - amt) * start + amt * end; } diff --git a/test/utils/AnimationUtils-test.ts b/test/utils/AnimationUtils-test.ts new file mode 100644 index 0000000000..b6d75a706f --- /dev/null +++ b/test/utils/AnimationUtils-test.ts @@ -0,0 +1,35 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { lerp } from "../../src/utils/AnimationUtils"; + +describe("lerp", () => { + it("correctly interpolates", () => { + expect(lerp(0, 100, 0.5)).toBe(50); + expect(lerp(50, 100, 0.5)).toBe(75); + expect(lerp(0, 1, 0.1)).toBe(0.1); + }); + + it("clamps the interpolant", () => { + expect(lerp(0, 100, 50)).toBe(100); + expect(lerp(0, 100, -50)).toBe(0); + }); + + it("handles negative numbers", () => { + expect(lerp(-100, 0, 0.5)).toBe(-50); + expect(lerp(100, -100, 0.5)).toBe(0); + }); +});