From 6793ef33ba71eba3c5cdee1dc0378d35ab53a8f7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Feb 2022 23:59:03 +0000
Subject: [PATCH] Use the resize observer polyfill consistently (#7796)

---
 src/components/views/elements/PersistedElement.tsx | 3 ++-
 src/components/views/messages/CallEvent.tsx        | 3 ++-
 src/stores/UIStore.ts                              | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx
index 97a197d2bf..b5fb8df34e 100644
--- a/src/components/views/elements/PersistedElement.tsx
+++ b/src/components/views/elements/PersistedElement.tsx
@@ -24,6 +24,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 export const getPersistKey = (appId: string) => 'widget_' + appId;
 
@@ -80,7 +81,7 @@ export default class PersistedElement extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);
 
-        this.resizeObserver = new ResizeObserver(this.repositionChild);
+        this.resizeObserver = new ResizeObserverPolyfill(this.repositionChild);
         // Annoyingly, a resize observer is insufficient, since we also care
         // about when the element moves on the screen without changing its
         // dimensions. Doesn't look like there's a ResizeObserver equivalent
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index a46f010617..8a919eee82 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -27,6 +27,7 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 import Clock from "../audio_messages/Clock";
+import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
@@ -63,7 +64,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
-        this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
+        this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
         this.wrapperElement.current && this.resizeObserver.observe(this.wrapperElement.current);
     }
 
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index 7b40ba44f7..a9747852a1 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -19,9 +19,9 @@ import ResizeObserverEntry from 'resize-observer-polyfill/src/ResizeObserverEntr
 
 // XXX: resize-observer-polyfill has types that now conflict with typescript's
 // own DOM types: https://github.com/que-etc/resize-observer-polyfill/issues/80
-// Using require here rather than import is a horrenous workaround. We should
+// Using require here rather than import is a horrendous workaround. We should
 // be able to remove the polyfill once Safari 14 is released.
-const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
+export const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
 
 export enum UI_EVENTS {
     Resize = "resize"