imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize and rewrite backdrop rendering

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-23 16:20:21 +02:00
parent 51b5b0145b
commit ca92101c72
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
6 changed files with 45 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/structures/BackdropPanel.tsx
View file

@ -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,65 +64,30 @@ 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),
});
};
@ -139,10 +95,6 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
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} /> }