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 { 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 { 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"