Move backdrop filter to a canvas based solution

src/components/structures/BackdropPanel.tsx

@@ -0,0 +1,50 @@
+import React, { createRef } from "react";
+
+interface IProps {
+    width?: number;
+    height?: number;
+    backgroundImage?: ImageBitmap;
+    blur?: string;
+}
+
+
+export default class BackdropPanel extends React.PureComponent<IProps> {
+    private canvasRef: React.RefObject<HTMLCanvasElement> = createRef();
+    private ctx: CanvasRenderingContext2D;
+
+    static defaultProps = {
+        blur: "60px",
+    }
+
+    public componentDidMount() {
+        this.ctx = this.canvasRef.current.getContext("2d");
+    }
+
+    public componentDidUpdate() {
+        if (this.props.backgroundImage) {
+            requestAnimationFrame(this.refreshBackdropImage);
+        }
+    }
+
+    private refreshBackdropImage = (): void => {
+        const { width, height, backgroundImage } = this.props;
+        this.canvasRef.current.width = width;
+        this.canvasRef.current.height = height;
+
+        const destinationX = width - backgroundImage.width;
+        const destinationY = height - backgroundImage.height;
+
+        this.ctx.filter = `blur(${this.props.blur})`;
+        this.ctx.drawImage(
+            backgroundImage,
+            Math.min(destinationX, 0),
+            Math.min(destinationY, 0),
+            Math.max(width, backgroundImage.width),
+            Math.max(height, backgroundImage.height),
+        );
+    }
+
+    public render() {
+        return <canvas ref={this.canvasRef} className="mx_BackdropPanel" />;
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -36,18 +36,18 @@ import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
+import BackdropPanel from "./BackdropPanel";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    backgroundImage?: ImageBitmap;
 }
 
 interface IState {
@@ -85,16 +85,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        this.bgImageWatcherRef = SettingsStore.watchSetting(
-            "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
     }
 
     public componentDidMount() {
+        UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
@@ -104,10 +102,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
-        SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
         UIStore.instance.stopTrackingElementDimensions("ListContainer");
         UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
@@ -144,23 +140,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     };
 
-    private onBackgroundImageUpdate = () => {
-        // Note: we do this in the LeftPanel as it uses this variable most prominently.
-        const avatarSize = 32; // arbitrary
-        let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
-        const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
-        if (settingBgMxc) {
-            avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
-        }
-
-        const avatarUrlProp = `url(${avatarUrl})`;
-        if (!avatarUrl) {
-            document.body.style.removeProperty("--avatar-url");
-        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
-            document.body.style.setProperty("--avatar-url", avatarUrlProp);
-        }
-    };
-
     private handleStickyHeaders(list: HTMLDivElement) {
         if (this.isDoingStickyHeaders) return;
         this.isDoingStickyHeaders = true;
@@ -453,8 +432,15 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             "mx_AutoHideScrollbar",
         );
 
+        const panelDimensions = UIStore.instance.getElementDimensions("LeftPanel");
+
         return (
             <div className={containerClasses} ref={this.ref}>
+                <BackdropPanel
+                    backgroundImage={this.props.backgroundImage}
+                    width={panelDimensions?.width}
+                    height={panelDimensions?.height}
+                />
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}

src/components/structures/LoggedInView.tsx

@@ -59,6 +59,10 @@ import {replaceableComponent} from "../../utils/replaceableComponent";
 import CallHandler, { CallHandlerEvent } from '../../CallHandler';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
+import { OwnProfileStore } from '../../stores/OwnProfileStore';
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import { mediaFromMxc } from "../../customisations/Media";
+
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -120,6 +124,7 @@ interface IState {
     usageLimitEventTs?: number;
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
+    backgroundImage?: ImageBitmap;
 }
 
 /**
@@ -198,6 +203,8 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.resizer = this._createResizer();
         this.resizer.attach();
         this._loadResizerPreferences();
+
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
     }
 
     componentWillUnmount() {
@@ -206,10 +213,17 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         this.resizer.detach();
     }
 
+    private refreshBackgroundImage = async (): Promise<void> => {
+        this.setState({
+            backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(),
+        });
+    }
+
     private onCallsChanged = () => {
         this.setState({
             activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
@@ -633,10 +647,13 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div ref={this._resizeContainer} className={bodyClasses}>
-                        { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                        { SettingsStore.getValue("feature_spaces")
+                            ? <SpacePanel backgroundImage={this.state.backgroundImage} />
+                            : null }
                         <LeftPanel
                             isMinimized={this.props.collapseLhs || false}
                             resizeNotifier={this.props.resizeNotifier}
+                            backgroundImage={this.state.backgroundImage}
                         />
                         <ResizeHandle />
                         { pageElement }