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

Don't animate when resizing and move when the PiP changes size

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-27 15:31:54 +02:00
parent 001490f70d
commit f532c302b6
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
1 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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