Merge pull request #6483 from SimonBrandner/fix/dont-anim-resize/18261

Fix PiP resize issues

Author: dbkr

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,14 +156,18 @@ 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();
         }
         dis.unregister(this.dispatcherRef);
         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>
             );

src/components/views/voip/VideoFeed.tsx

@@ -59,6 +59,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
 
     componentDidMount() {
         this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.element.current?.addEventListener('resize', this.onResize);
         this.playMedia();
     }