Optimize and rewrite backdrop rendering

Author: Dariusz Niemczyk

res/css/structures/_BackdropPanel.scss

@@ -21,16 +21,6 @@ limitations under the License.
     height: 100vh;
     width: 100%;
     overflow: hidden;
-
-    &::before {
-        content: " ";
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100vh;
-        width: 100%;
-        background-color: var(--lp-background-overlay);
-    }
 }
 
 .mx_BackdropPanel--canvas {

res/css/structures/_LeftPanel.scss

@@ -27,8 +27,37 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel_wrapper {
     display: flex;
     max-width: 50%;
+
+    .mx_LeftPanel_background {
+
+        &::before {
+            content: " ";
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100vh;
+            width: 100%;
+            background-color: var(--lp-background-overlay);
+        }
+
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $roomlist-bg-color;
+        opacity: 0.5;
+    }
+
+    .mx_LeftPanel_wrapper--user {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+    }
 }
 
+
+
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel

res/themes/dark/css/_dark.scss

@@ -240,7 +240,6 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 160px;
     --lp-background-blur: 90px;
     --lp-background-overlay: rgba(255, 255, 255, 0.055);
 }

res/themes/light/css/_light.scss

@@ -363,7 +363,6 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 120px;
     --lp-background-blur: 60px;
     --lp-background-overlay: rgba(0, 0, 0, 0.055);
 }

src/components/structures/BackdropPanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React from "react";
 import "context-filter-polyfill";
 
 import UIStore from "../../stores/UIStore";
@@ -31,24 +31,15 @@ interface IState {
 }
 
 export default class BackdropPanel extends React.PureComponent<IProps, IState> {
-    private sizes = {
-        leftLeftPanelWidth: 0,
-        leftPanelWidth: 0,
-        height: 0,
-    };
     private style = getComputedStyle(document.documentElement);
 
     public state: IState = {};
 
     public componentDidMount() {
-        UIStore.instance.on("SpacePanel", this.onResize);
-        UIStore.instance.on("GroupFilterPanelContainer", this.onResize);
         this.onResize();
     }
 
     public componentWillUnmount() {
-        UIStore.instance.off("SpacePanel", this.onResize);
-        UIStore.instance.on("GroupFilterPanelContainer", this.onResize);
     }
 
     public componentDidUpdate(prevProps: IProps) {
@@ -73,76 +64,37 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     };
 
     private refreshBackdropImage = (): void => {
-        const leftLeftPanelCanvas = document.createElement('canvas');
         const leftPanelCanvas = document.createElement('canvas');
-        const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d");
         const leftPanelContext = leftPanelCanvas.getContext("2d");
         const { backgroundImage } = this.props;
-        const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
-        const width = leftLeftPanelWidth + leftPanelWidth;
 
         const imageWidth = (backgroundImage as ImageBitmap).width;
         const imageHeight = (backgroundImage as ImageBitmap).height;
 
-        const contentRatio = imageWidth / imageHeight;
-        const containerRatio = width / height;
-        let resultHeight;
-        let resultWidth;
-        if (contentRatio > containerRatio) {
-            resultHeight = height;
-            resultWidth = height * contentRatio;
-        } else {
-            resultWidth = width;
-            resultHeight = width / contentRatio;
-        }
-
-        // This value has been chosen to be as close with rendering as the css-only
-        // backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
-        const x = width * 0.1;
-        const y = (height - resultHeight) / 2;
-
-        leftLeftPanelCanvas.width = leftLeftPanelWidth;
-        leftLeftPanelCanvas.height = height;
         leftPanelCanvas.width = window.screen.width * 0.5;
-        leftPanelCanvas.height = height;
+        leftPanelCanvas.height = window.screen.height;
 
-        const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
         const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
 
-        leftLeftPanelContext.filter = `blur(${spacesBlur})`;
         leftPanelContext.filter = `blur(${roomListBlur})`;
-        leftLeftPanelContext.drawImage(
-            backgroundImage,
-            0, 0,
-            imageWidth, imageHeight,
-            x,
-            y,
-            resultWidth,
-            resultHeight,
-        );
         leftPanelContext.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
-            x - leftLeftPanelWidth,
-            y,
-            resultWidth,
-            resultHeight,
+            0,
+            0,
+            window.screen.width * 0.5,
+            window.screen.height,
         );
         this.setState({
             lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),
-            llpImage: leftLeftPanelCanvas.toDataURL('image/jpeg', 1),
 
         });
     };
 
     public render() {
         if (!this.props.backgroundImage) return null;
         return <div className="mx_BackdropPanel">
-            { this.state?.llpImage !== 'data:,' && <img
-                className="mx_BackdropPanel--canvas"
-                src={this.state.llpImage} /> }
-
             { this.state?.lpImage !== 'data:,' && <img
                 className="mx_BackdropPanel--canvas"
                 src={this.state.lpImage} /> }

src/components/structures/LoggedInView.tsx

@@ -645,16 +645,21 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div className={bodyClasses}>
-                        <div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
+                        <div className='mx_LeftPanel_wrapper'>
                             <BackdropPanel
                                 backgroundImage={this.state.backgroundImage}
                             />
                             { SpaceStore.spacesEnabled ? <SpacePanel /> : null }
-                            <LeftPanel
-                                isMinimized={this.props.collapseLhs || false}
-                                resizeNotifier={this.props.resizeNotifier}
-                            />
+                            <div
+                                ref={this._resizeContainer}
+                                className="mx_LeftPanel_wrapper--user">
+                                <div className="mx_LeftPanel_background" />
+                                <LeftPanel
+                                    isMinimized={this.props.collapseLhs || false}
+                                    resizeNotifier={this.props.resizeNotifier}
+                                />
                                 <ResizeHandle id="lp-resizer" />
+                            </div>
                         </div>
                         <div className="mx_RoomView_wrapper">
                             { pageElement }