PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Optimize backdrop blur

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-22 13:05:23 +02:00
parent 1c29505c83
commit 0ddb71a4fe
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
1 changed files with 19 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,9 +31,6 @@ interface IState {
} }
export default class BackdropPanel extends React.PureComponent<IProps, IState> { export default class BackdropPanel extends React.PureComponent<IProps, IState> {
private leftLeftPanelRef = createRef<HTMLCanvasElement>();
private leftPanelRef = createRef<HTMLCanvasElement>();
private sizes = { private sizes = {
leftLeftPanelWidth: 0, leftLeftPanelWidth: 0,
leftPanelWidth: 0, leftPanelWidth: 0,
@ -76,36 +73,22 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
}; };
private refreshBackdropImage = (): void => { private refreshBackdropImage = (): void => {
const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d"); const leftLeftPanelCanvas = document.createElement('canvas');
const leftPanelContext = this.leftPanelRef.current.getContext("2d"); const leftPanelCanvas = document.createElement('canvas');
const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes; const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d");
const width = leftLeftPanelWidth + leftPanelWidth; const leftPanelContext = leftPanelCanvas.getContext("2d");
const { leftLeftPanelWidth, height } = this.sizes;
const { backgroundImage } = this.props; const { backgroundImage } = this.props;
const imageWidth = (backgroundImage as ImageBitmap).width; const imageWidth = (backgroundImage as ImageBitmap).width;
const imageHeight = (backgroundImage as ImageBitmap).height; 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 // 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. // backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
const x = width * 0.1;
const y = (height - resultHeight) / 2;
this.leftLeftPanelRef.current.width = leftLeftPanelWidth; leftLeftPanelCanvas.width = leftLeftPanelWidth;
this.leftLeftPanelRef.current.height = height; leftLeftPanelCanvas.height = height;
this.leftPanelRef.current.width = (window.screen.width * 0.5); leftPanelCanvas.width = window.screen.width * 0.5;
this.leftPanelRef.current.height = height; leftPanelCanvas.height = height;
const spacesBlur = this.style.getPropertyValue('--llp-background-blur'); const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
const roomListBlur = this.style.getPropertyValue('--lp-background-blur'); const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
@ -116,23 +99,23 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
backgroundImage, backgroundImage,
0, 0, 0, 0,
imageWidth, imageHeight, imageWidth, imageHeight,
x, 0,
y, 0,
resultWidth, leftLeftPanelWidth,
resultHeight, window.screen.height,
); );
leftPanelContext.drawImage( leftPanelContext.drawImage(
backgroundImage, backgroundImage,
0, 0, 0, 0,
imageWidth, imageHeight, imageWidth, imageHeight,
x - leftLeftPanelWidth, 0,
y, 0,
resultWidth, window.screen.width * 0.5,
resultHeight, window.screen.height,
); );
this.setState({ this.setState({
lpImage: this.leftPanelRef.current.toDataURL('image/jpeg', 1), lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),
llpImage: this.leftLeftPanelRef.current.toDataURL('image/jpeg', 1), llpImage: leftLeftPanelCanvas.toDataURL('image/jpeg', 1),
}); });
}; };
@ -147,20 +130,6 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
{ this.state?.lpImage !== 'data:,' && <img { this.state?.lpImage !== 'data:,' && <img
className="mx_BackdropPanel--canvas" className="mx_BackdropPanel--canvas"
src={this.state.lpImage} /> } src={this.state.lpImage} /> }
<canvas
ref={this.leftLeftPanelRef}
className="mx_BackdropPanel--canvas"
style={{
display: this.state.lpImage ? 'none' : 'block',
}}
/>
<canvas
style={{
display: this.state.lpImage ? 'none' : 'block',
}}
ref={this.leftPanelRef}
className="mx_BackdropPanel--canvas"
/>
</div>; </div>;
} }
} }