From a999cad49db7dec102717b93e6a780bb8ed53bef Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 16:07:17 +0200
Subject: [PATCH] Properly cache blur effect

---
 res/css/structures/_BackdropPanel.scss      |  1 +
 res/themes/dark/css/dark.scss               |  4 --
 src/components/structures/BackdropPanel.tsx | 78 ++++++++++++++-------
 src/components/structures/LeftPanel.tsx     |  6 +-
 4 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 3bcceb1d55..1ed2e4330e 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -20,6 +20,7 @@ limitations under the License.
   top: 0;
   height: 100vh;
   width: 100%;
+  overflow: hidden;
 
   &:before {
     content: ' ';
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index 600cfd528a..df83d6db88 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -2,10 +2,6 @@
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
-// important this goes before _mods,
-// as $groupFilterPanel-background-blur-amount and
-// $roomlist-background-blur-amount
-// are overridden in _dark.scss
 @import "_dark.scss";
 @import "../../light/css/_mods.scss";
 @import "../../../../res/css/_components.scss";
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index c1c1e784aa..e61f783323 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -23,48 +23,54 @@ interface IProps {
     backgroundImage?: CanvasImageSource;
 }
 
-export default class BackdropPanel extends React.PureComponent<IProps> {
-    private spacesCanvasRef = createRef<HTMLCanvasElement>();
-    private roomListCanvasRef = createRef<HTMLCanvasElement>();
+interface IState {
+    // Left Panel image
+    lpImage?: string;
+    // Left-left panel image
+    llpImage?: string;
+}
+
+export default class BackdropPanel extends React.PureComponent<IProps, IState> {
+    private leftLeftPanelRef = createRef<HTMLCanvasElement>();
+    private leftPanelRef = createRef<HTMLCanvasElement>();
 
     private sizes = {
-        spacePanelWidth: 0,
-        roomListWidth: 0,
+        leftLeftPanelWidth: 0,
+        leftPanelWidth: 0,
         height: 0,
     };
     private style = getComputedStyle(document.documentElement);
 
     constructor(props: IProps) {
         super(props);
+        this.state = {};
     }
 
     public componentDidMount() {
         UIStore.instance.on("SpacePanel", this.onResize);
-        UIStore.instance.on("LeftPanel", this.onResize);
+        UIStore.instance.on("GroupFilterPanelContainer", this.onResize);
         this.onResize();
     }
 
     public componentWillUnmount() {
         UIStore.instance.off("SpacePanel", this.onResize);
-        UIStore.instance.off("LeftPanel", this.onResize);
     }
 
     public componentDidUpdate(prevProps: IProps) {
-        if (this.props.backgroundImage) {
+        if (prevProps.backgroundImage !== this.props.backgroundImage) {
+            this.setState({});
             this.onResize();
         }
-        if (prevProps.backgroundImage && !this.props.backgroundImage) {
-            this.forceUpdate();
-        }
     }
 
     private onResize = () => {
         if (this.props.backgroundImage) {
+            const groupFilterPanelDimensions = UIStore.instance.getElementDimensions("GroupFilterPanelContainer");
             const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
             const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
             this.sizes = {
-                spacePanelWidth: spacePanelDimensions?.width ?? 0,
-                roomListWidth: roomListDimensions?.width ?? 0,
+                leftLeftPanelWidth: spacePanelDimensions?.width ?? groupFilterPanelDimensions?.width ?? 0,
+                leftPanelWidth: roomListDimensions?.width ?? 0,
                 height: UIStore.instance.windowHeight,
             };
             this.refreshBackdropImage();
@@ -72,10 +78,10 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
     };
 
     private refreshBackdropImage = (): void => {
-        const spacesCtx = this.spacesCanvasRef.current.getContext("2d");
-        const roomListCtx = this.roomListCanvasRef.current.getContext("2d");
-        const { spacePanelWidth, roomListWidth, height } = this.sizes;
-        const width = spacePanelWidth + roomListWidth;
+        const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
+        const roomListCtx = this.leftPanelRef.current.getContext("2d");
+        const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
+        const width = leftLeftPanelWidth + leftPanelWidth;
         const { backgroundImage } = this.props;
 
         const imageWidth = (backgroundImage as ImageBitmap).width
@@ -98,11 +104,11 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const x = (width - resultWidth) / 2;
         const y = (height - resultHeight) / 2;
 
-        this.spacesCanvasRef.current.width = spacePanelWidth;
-        this.spacesCanvasRef.current.height = height;
-        this.roomListCanvasRef.current.width = roomListWidth;
-        this.roomListCanvasRef.current.height = height;
-        this.roomListCanvasRef.current.style.transform = `translateX(${spacePanelWidth}px)`;
+        this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
+        this.leftLeftPanelRef.current.height = height;
+        this.leftPanelRef.current.width = (window.screen.width * 0.5) - leftLeftPanelWidth;
+        this.leftPanelRef.current.height = height;
+        this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
 
         const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
         const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
@@ -122,29 +128,49 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
-            x - spacePanelWidth,
+            x - leftLeftPanelWidth,
             y,
             resultWidth,
             resultHeight,
         );
+        this.setState({
+            lpImage: this.leftPanelRef.current.toDataURL('image/jpeg', 1),
+            llpImage: this.leftLeftPanelRef.current.toDataURL('image/jpeg', 1),
+
+        });
     };
 
     public render() {
         if (!this.props.backgroundImage) return null;
         return <div className="mx_BackdropPanel">
-            <canvas
-                ref={this.spacesCanvasRef}
+            <img
                 className="mx_BackdropPanel--canvas"
                 style={{
                     opacity: .19,
                 }}
+                src={this.state.llpImage} />
+            <img
+                className="mx_BackdropPanel--canvas"
+                style={{
+                    opacity: .12,
+                }}
+                src={this.state.lpImage} />
+            <canvas
+                ref={this.leftLeftPanelRef
+                }
+                className="mx_BackdropPanel--canvas"
+                style={{
+                    display: this.state.lpImage ? 'none' : 'block',
+                    opacity: .19,
+                }}
             />
             <canvas
                 style={{
+                    display: this.state.lpImage ? 'none' : 'block',
                     transform: `translateX(0)`,
                     opacity: .12,
                 }}
-                ref={this.roomListCanvasRef}
+                ref={this.leftPanelRef}
                 className="mx_BackdropPanel--canvas"
             />
         </div>;
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 82db9a2e2e..0d8f9d8725 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -69,6 +69,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private groupFilterPanelWatcherRef: string;
+    private groupFilterPanelContainer = createRef<HTMLDivElement>();
     private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
@@ -93,6 +94,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     public componentDidMount() {
         UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
+        if (this.groupFilterPanelContainer.current) {
+            UIStore.instance.trackElementDimensions("GroupFilterPanelContainer", this.groupFilterPanelContainer.current);
+        }
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
         // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
@@ -420,7 +424,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         let leftLeftPanel;
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
-                <div className="mx_LeftPanel_GroupFilterPanelContainer">
+                <div className="mx_LeftPanel_GroupFilterPanelContainer" ref={this.groupFilterPanelContainer}>
                     <GroupFilterPanel />
                     { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                 </div>