Move background-blur to fully css version

src/components/structures/BackdropPanel.tsx

@@ -14,74 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import "context-filter-polyfill";
+import React, { CSSProperties } from "react";
 
 interface IProps {
-    backgroundImage?: CanvasImageSource;
+    backgroundImage?: string;
+    blurMultiplier?: number;
 }
 
-interface IState {
-    // Left Panel image
-    lpImage?: string;
-}
+export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplier }) => {
+    if (!backgroundImage) return null;
 
-export default class BackdropPanel extends React.PureComponent<IProps, IState> {
-    private style = getComputedStyle(document.documentElement);
-
-    public state: IState = {};
-
-    public componentDidMount() {
-        this.onResize();
-    }
-
-    public componentDidUpdate(prevProps: IProps) {
-        if (prevProps.backgroundImage !== this.props.backgroundImage) {
-            this.onResize();
+    const styles: CSSProperties = {};
+    if (blurMultiplier) {
+        const rootStyle = getComputedStyle(document.documentElement);
+        const blurValue = rootStyle.getPropertyValue('--lp-background-blur');
+        const pixelsValue = blurValue.replace('px', '');
+        const parsed = parseInt(pixelsValue, 10);
+        if (!isNaN(parsed)) {
+            styles.filter = `blur(${parsed * blurMultiplier}px)`;
         }
     }
-
-    private onResize = () => {
-        if (this.props.backgroundImage) {
-            this.refreshBackdropImage();
-        }
-    };
-
-    private refreshBackdropImage = (): void => {
-        const leftPanelCanvas = document.createElement('canvas');
-        const leftPanelContext = leftPanelCanvas.getContext("2d");
-        const { backgroundImage } = this.props;
-
-        const imageWidth = (backgroundImage as ImageBitmap).width;
-        const imageHeight = (backgroundImage as ImageBitmap).height;
-
-        leftPanelCanvas.width = window.screen.width * 0.5;
-        leftPanelCanvas.height = window.screen.height;
-
-        const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
-
-        leftPanelContext.filter = `blur(${roomListBlur})`;
-        leftPanelContext.drawImage(
-            backgroundImage,
-            0, 0,
-            imageWidth, imageHeight,
-            0,
-            0,
-            window.screen.width * 0.5,
-            window.screen.height,
-        );
-        this.setState({
-            lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),
-
-        });
-    };
-
-    public render() {
-        if (!this.props.backgroundImage) return null;
-        return <div className="mx_BackdropPanel">
-            { this.state?.lpImage !== 'data:,' && <img
-                className="mx_BackdropPanel--canvas"
-                src={this.state.lpImage} /> }
-        </div>;
-    }
-}
+    return <div className="mx_BackdropPanel">
+        <img
+            style={styles}
+            className="mx_BackdropPanel--image"
+            src={backgroundImage} />
+    </div>;
+};
+export default BackdropPanel;

src/components/structures/LoggedInView.tsx

@@ -133,7 +133,7 @@ interface IState {
     usageLimitEventTs?: number;
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
-    backgroundImage?: CanvasImageSource;
+    backgroundImage?: string;
 }
 
 /**
@@ -219,7 +219,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     private refreshBackgroundImage = async (): Promise<void> => {
         this.setState({
-            backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(),
+            backgroundImage: OwnProfileStore.instance.getHttpAvatarUrl(),
         });
     };
 
@@ -648,20 +648,30 @@ class LoggedInView extends React.Component<IProps, IState> {
                     <ToastContainer />
                     <div className={bodyClasses}>
                         <div className='mx_LeftPanel_wrapper'>
-                            <BackdropPanel
-                                backgroundImage={this.state.backgroundImage}
-                            />
                             { SettingsStore.getValue('TagPanel.enableTagPanel') &&
                                 (<div className="mx_GroupFilterPanelContainer">
+                                    <BackdropPanel
+                                        blurMultiplier={0.5}
+                                        backgroundImage={this.state.backgroundImage}
+                                    />
                                     <GroupFilterPanel />
                                     { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                                 </div>)
                             }
-                            { SpaceStore.spacesEnabled ? <SpacePanel /> : null }
+                            { SpaceStore.spacesEnabled ? <>
+                                <BackdropPanel
+                                    blurMultiplier={0.5}
+                                    backgroundImage={this.state.backgroundImage}
+                                />
+                                <SpacePanel />
+                            </> : null }
+                            <BackdropPanel
+                                backgroundImage={this.state.backgroundImage}
+                            />
                             <div
                                 ref={this._resizeContainer}
-                                className="mx_LeftPanel_wrapper--user">
-                                <div className="mx_LeftPanel_background" />
+                                className="mx_LeftPanel_wrapper--user"
+                            >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}