From f532c302b6792e7ab1a6fda45db1b6690163d8c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 27 Jul 2021 15:31:54 +0200
Subject: [PATCH] Don't animate when resizing and move when the PiP changes
 size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/voip/CallPreview.tsx | 28 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 895d9773e4..6261b9965f 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -146,7 +146,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         document.addEventListener("mousemove", this.onMoving);
         document.addEventListener("mouseup", this.onEndMoving);
-        window.addEventListener("resize", this.snap);
+        window.addEventListener("resize", this.onResize);
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
     }
@@ -156,7 +156,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
         MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
         document.removeEventListener("mousemove", this.onMoving);
         document.removeEventListener("mouseup", this.onEndMoving);
-        window.removeEventListener("resize", this.snap);
+        window.removeEventListener("resize", this.onResize);
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
         }
@@ -164,6 +164,10 @@ export default class CallPreview extends React.Component<IProps, IState> {
         SettingsStore.unwatchSetting(this.settingsWatcherRef);
     }
 
+    private onResize = (): void => {
+        this.snap(false);
+    };
+
     private animationCallback = () => {
         // If the PiP isn't being dragged and there is only a tiny difference in
         // the desiredTranslation and translation, quit the animationCallback
@@ -207,7 +211,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
         }
     }
 
-    private snap = () => {
+    private snap(animate?: boolean): void {
         const translationX = this.desiredTranslationX;
         const translationY = this.desiredTranslationY;
         // We subtract the PiP size from the window size in order to calculate
@@ -236,10 +240,17 @@ export default class CallPreview extends React.Component<IProps, IState> {
             this.desiredTranslationY = PADDING.top;
         }
 
-        // We start animating here because we want the PiP to move when we're
-        // resizing the window
-        this.scheduledUpdate.mark();
-    };
+        if (animate) {
+            // We start animating here because we want the PiP to move when we're
+            // resizing the window
+            this.scheduledUpdate.mark();
+        } else {
+            this.setState({
+                translationX: this.desiredTranslationX,
+                translationY: this.desiredTranslationY,
+            });
+        }
+    }
 
     private onRoomViewStoreUpdate = () => {
         if (RoomViewStore.getRoomId() === this.state.roomId) return;
@@ -310,7 +321,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
 
     private onEndMoving = () => {
         this.moving = false;
-        this.snap();
+        this.snap(true);
     };
 
     public render() {
@@ -333,6 +344,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
                         secondaryCall={this.state.secondaryCall}
                         pipMode={true}
                         onMouseDownOnHeader={this.onStartMoving}
+                        onResize={this.onResize}
                     />
                 </div>
             );