From ba3d7f9beeb1e0cdaf5a070a6a8b4d10c0641333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 9 Jul 2021 15:50:52 +0200
Subject: [PATCH] Use marked execution
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 | 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<IProps, IState> {
     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<IProps, IState> {
             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<IProps, IState> {
 
         // 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<IProps, IState> {
         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) => {