PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use marked execution

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-09 15:50:52 +02:00
parent 007548aa7f
commit ba3d7f9bee
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/views/voip/CallPreview.tsx
View file

@ -29,6 +29,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import UIStore from '../../../stores/UIStore'; import UIStore from '../../../stores/UIStore';
import { lerp } from '../../../utils/AnimationUtils'; import { lerp } from '../../../utils/AnimationUtils';
import { MarkedExecution } from '../../../utils/MarkedExecution';
const PIP_VIEW_WIDTH = 336; const PIP_VIEW_WIDTH = 336;
const PIP_VIEW_HEIGHT = 232; 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 desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH;
private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH; private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH;
private moving = false; private moving = false;
private scheduledUpdate = new MarkedExecution(
() => this.animationCallback(),
() => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
);
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
@ -175,7 +180,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
translationX: lerp(this.state.translationX, this.desiredTranslationX, amt), translationX: lerp(this.state.translationX, this.desiredTranslationX, amt),
translationY: lerp(this.state.translationY, this.desiredTranslationY, amt), translationY: lerp(this.state.translationY, this.desiredTranslationY, amt),
}); });
requestAnimationFrame(this.animationCallback); this.scheduledUpdate.mark();
}; };
private setTranslation(inTranslationX: number, inTranslationY: number) { 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 // We start animating here because we want the PiP to move when we're
// resizing the window // resizing the window
requestAnimationFrame(this.animationCallback); this.scheduledUpdate.mark();
}; };
private onRoomViewStoreUpdate = (payload) => { private onRoomViewStoreUpdate = (payload) => {
@ -290,7 +295,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
this.moving = true; this.moving = true;
this.initX = event.pageX - this.desiredTranslationX; this.initX = event.pageX - this.desiredTranslationX;
this.initY = event.pageY - this.desiredTranslationY; this.initY = event.pageY - this.desiredTranslationY;
requestAnimationFrame(this.animationCallback); this.scheduledUpdate.mark();
}; };
private onMoving = (event: React.MouseEvent | MouseEvent) => { private onMoving = (event: React.MouseEvent | MouseEvent) => {