matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-04 11:51:45 +03:00
Code Activity

Make the blur as-close to the css one as possible

Browse Source
This commit is contained in:
Dariusz Niemczyk
2021-08-17 17:47:40 +02:00
parent a999cad49d
commit 2ee26d0681
4 changed files with 22 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/structures/BackdropPanel.tsx
View File

@@ -78,16 +78,14 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
};
private refreshBackdropImage = (): void => {
const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
const roomListCtx = this.leftPanelRef.current.getContext("2d");
const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d");
const leftPanelContext = 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
|| (backgroundImage as HTMLImageElement).naturalWidth;
const imageHeight = (backgroundImage as ImageBitmap).height
|| (backgroundImage as HTMLImageElement).naturalHeight;
const imageWidth = (backgroundImage as ImageBitmap).width;
const imageHeight = (backgroundImage as ImageBitmap).height;
const contentRatio = imageWidth / imageHeight;
const containerRatio = width / height;
@@ -101,7 +99,9 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
resultHeight = width / contentRatio;
}
const x = (width - resultWidth) / 2;
// 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;
this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
@@ -110,12 +110,12 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
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');
const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
spacesCtx.filter = `blur(${spacesBlur})`;
roomListCtx.filter = `blur(${roomListBlur})`;
spacesCtx.drawImage(
leftLeftPanelContext.filter = `blur(${spacesBlur})`;
leftPanelContext.filter = `blur(${roomListBlur})`;
leftLeftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
@@ -124,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
resultWidth,
resultHeight,
);
roomListCtx.drawImage(
leftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
@@ -146,13 +146,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
<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
@@ -161,14 +159,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
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.leftPanelRef}
className="mx_BackdropPanel--canvas"