diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index e68e9fd148..f958a8d6f6 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -184,11 +184,12 @@ export default class CallPreview extends React.Component { className="mx_CallPreview" draggable={pipMode} > - { (onMouseDownOnHeader) => } diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 43bcfd348b..259cf065b6 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -55,7 +55,7 @@ interface IProps { // a callback which is called when the content in the CallView changes // in a way that is likely to cause a resize. - onResize?: any; + onResize?: () => void; // Whether this call view is for picture-in-picture mode // otherwise, it's the larger call view when viewing the room the call is in. diff --git a/src/components/views/voip/PictureInPictureDragger.tsx b/src/components/views/voip/PictureInPictureDragger.tsx index 244ecddee4..bf5a9ef61a 100644 --- a/src/components/views/voip/PictureInPictureDragger.tsx +++ b/src/components/views/voip/PictureInPictureDragger.tsx @@ -33,9 +33,14 @@ const PADDING = { right: 8, }; +interface IChildrenOptions { + onStartMoving: (event: React.MouseEvent) => void; + onResize: (event: React.MouseEvent) => void; +} + interface IProps { className?: string; - children: (startMovingEventHandler: (event: React.MouseEvent) => void) => React.ReactNode; + children: ({ onStartMoving, onResize }: IChildrenOptions) => React.ReactNode; draggable: boolean; } @@ -74,13 +79,13 @@ export class PictureInPictureDragger extends React.Component { public componentDidMount() { document.addEventListener("mousemove", this.onMoving); document.addEventListener("mouseup", this.onEndMoving); - window.addEventListener("resize", this.snap); + window.addEventListener("resize", this.onResize); } public componentWillUnmount() { document.removeEventListener("mousemove", this.onMoving); document.removeEventListener("mouseup", this.onEndMoving); - window.removeEventListener("resize", this.snap); + window.removeEventListener("resize", this.onResize); } private animationCallback = () => { @@ -126,7 +131,11 @@ export class PictureInPictureDragger extends React.Component { } } - private snap = () => { + private onResize = (): void => { + this.snap(false); + }; + + private snap = (animate = false) => { const translationX = this.desiredTranslationX; const translationY = this.desiredTranslationY; // We subtract the PiP size from the window size in order to calculate @@ -158,6 +167,17 @@ export class PictureInPictureDragger extends React.Component { // 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 onStartMoving = (event: React.MouseEvent | MouseEvent) => { @@ -181,7 +201,7 @@ export class PictureInPictureDragger extends React.Component { private onEndMoving = () => { this.moving = false; - this.snap(); + this.snap(true); }; public render() {