Make PiP motion smoother and react to window resizes correctly (#8747)

* Make PiP motion smoother and react to window resizes correctly

* Remove debugging logs

* Apply code review suggestions

src/components/views/elements/AppTile.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 */
 
 import url from 'url';
-import React, { ContextType, createRef } from 'react';
+import React, { ContextType, createRef, MutableRefObject } from 'react';
 import classNames from 'classnames';
 import { MatrixCapabilities } from "matrix-widget-api";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
@@ -84,6 +84,8 @@ interface IProps {
     pointerEvents?: string;
     widgetPageTitle?: string;
     showLayoutButtons?: boolean;
+    // Handle to manually notify the PersistedElement that it needs to move
+    movePersistedElement?: MutableRefObject<() => void>;
 }
 
 interface IState {
@@ -623,7 +625,11 @@ export default class AppTile extends React.Component<IProps, IState> {
                     const zIndexAboveOtherPersistentElements = 101;
 
                     appTileBody = <div className="mx_AppTile_persistedWrapper">
-                        <PersistedElement zIndex={this.props.miniMode ? zIndexAboveOtherPersistentElements : 9} persistKey={this.persistKey}>
+                        <PersistedElement
+                            zIndex={this.props.miniMode ? zIndexAboveOtherPersistentElements : 9}
+                            persistKey={this.persistKey}
+                            moveRef={this.props.movePersistedElement}
+                        >
                             { appTileBody }
                         </PersistedElement>
                     </div>;

src/components/views/elements/PersistedElement.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import ReactDOM from 'react-dom';
 import { throttle } from "lodash";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
@@ -56,6 +56,9 @@ interface IProps {
     zIndex?: number;
 
     style?: React.StyleHTMLAttributes<HTMLDivElement>;
+
+    // Handle to manually notify this PersistedElement that it needs to move
+    moveRef?: MutableRefObject<() => void>;
 }
 
 /**
@@ -86,6 +89,8 @@ export default class PersistedElement extends React.Component<IProps> {
         // the timeline_resize action.
         window.addEventListener('resize', this.repositionChild);
         this.dispatcherRef = dis.register(this.onAction);
+
+        if (this.props.moveRef) this.props.moveRef.current = this.repositionChild;
     }
 
     /**
@@ -177,8 +182,9 @@ export default class PersistedElement extends React.Component<IProps> {
         Object.assign(child.style, {
             zIndex: isNullOrUndefined(this.props.zIndex) ? 9 : this.props.zIndex,
             position: 'absolute',
-            top: parentRect.top + 'px',
-            left: parentRect.left + 'px',
+            top: '0',
+            left: '0',
+            transform: `translateX(${parentRect.left}px) translateY(${parentRect.top}px)`,
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
         });

src/components/views/elements/PersistentApp.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ContextType } from 'react';
+import React, { ContextType, MutableRefObject } from 'react';
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import WidgetUtils from '../../../utils/WidgetUtils';
@@ -27,6 +27,7 @@ interface IProps {
     persistentWidgetId: string;
     persistentRoomId: string;
     pointerEvents?: string;
+    movePersistedElement: MutableRefObject<() => void>;
 }
 
 export default class PersistentApp extends React.Component<IProps> {
@@ -70,6 +71,7 @@ export default class PersistentApp extends React.Component<IProps> {
                 miniMode={true}
                 showMenubar={false}
                 pointerEvents={this.props.pointerEvents}
+                movePersistedElement={this.props.movePersistedElement}
             />;
         }
         return null;