2024-02-18 23:05:15 +00:00
|
|
|
import variables from 'config/variables';
|
2023-03-21 19:59:16 +00:00
|
|
|
import { PureComponent } from 'react';
|
2023-03-16 11:11:18 +00:00
|
|
|
|
2022-04-07 09:25:01 +00:00
|
|
|
import { MdCropFree } from 'react-icons/md';
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2024-02-18 23:05:15 +00:00
|
|
|
import { Tooltip } from 'components/Elements';
|
2023-03-16 11:11:18 +00:00
|
|
|
class Maximise extends PureComponent {
|
2021-03-23 13:10:34 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
2021-03-17 13:01:53 +00:00
|
|
|
this.state = {
|
2022-04-08 13:48:36 +00:00
|
|
|
hidden: false,
|
2021-03-17 13:01:53 +00:00
|
|
|
};
|
|
|
|
}
|
2020-09-14 19:48:58 +00:00
|
|
|
|
2021-05-08 12:47:09 +00:00
|
|
|
setAttribute(blur, brightness, filter) {
|
2021-06-30 13:11:45 +00:00
|
|
|
// don't attempt to modify the background if it isn't an image
|
|
|
|
const backgroundType = localStorage.getItem('backgroundType');
|
2022-04-08 13:48:36 +00:00
|
|
|
if (
|
|
|
|
backgroundType === 'colour' ||
|
|
|
|
backgroundType === 'random_colour' ||
|
|
|
|
backgroundType === 'random_gradient'
|
|
|
|
) {
|
2021-06-30 13:11:45 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-04-21 18:35:33 +00:00
|
|
|
const element = document.getElementById('backgroundImage');
|
2021-05-08 12:47:09 +00:00
|
|
|
|
|
|
|
let backgroundFilter;
|
|
|
|
if (filter === true) {
|
2022-09-11 21:01:06 +00:00
|
|
|
const filterData = localStorage.getItem('backgroundFilter');
|
|
|
|
if (filterData !== 'none') {
|
|
|
|
backgroundFilter = filterData;
|
|
|
|
}
|
2021-05-08 12:47:09 +00:00
|
|
|
}
|
|
|
|
|
2021-04-21 18:35:33 +00:00
|
|
|
element.setAttribute(
|
2021-03-17 13:01:53 +00:00
|
|
|
'style',
|
2022-04-08 13:48:36 +00:00
|
|
|
`background-image: url(${element.style.backgroundImage
|
|
|
|
.replace('url("', '')
|
|
|
|
.replace('")', '')}); -webkit-filter: blur(${blur}px) brightness(${brightness}%) ${
|
|
|
|
backgroundFilter
|
|
|
|
? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)'
|
|
|
|
: ''
|
|
|
|
};`,
|
2021-03-17 13:01:53 +00:00
|
|
|
);
|
|
|
|
}
|
2020-09-14 19:48:58 +00:00
|
|
|
|
2021-04-11 14:53:11 +00:00
|
|
|
maximise = () => {
|
2021-06-30 13:11:45 +00:00
|
|
|
// hide widgets
|
|
|
|
const widgets = document.getElementById('widgets');
|
2022-04-08 13:48:36 +00:00
|
|
|
this.state.hidden === false
|
|
|
|
? (widgets.style.display = 'none')
|
|
|
|
: (widgets.style.display = 'flex');
|
2021-03-17 13:01:53 +00:00
|
|
|
|
|
|
|
if (this.state.hidden === false) {
|
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
hidden: true,
|
2021-03-17 13:01:53 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
this.setAttribute(0, 100);
|
2021-09-28 22:04:04 +00:00
|
|
|
variables.stats.postEvent('feature', 'Background maximise');
|
2021-03-17 13:01:53 +00:00
|
|
|
} else {
|
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
hidden: false,
|
2021-03-17 13:01:53 +00:00
|
|
|
});
|
|
|
|
|
2021-05-08 12:47:09 +00:00
|
|
|
this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'), true);
|
2021-09-28 22:04:04 +00:00
|
|
|
variables.stats.postEvent('feature', 'Background unmaximise');
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
};
|
2020-09-14 19:48:58 +00:00
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
render() {
|
2021-08-25 12:28:41 +00:00
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<Tooltip
|
2022-08-26 10:44:24 +00:00
|
|
|
title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
2023-09-17 11:16:57 +00:00
|
|
|
<button
|
2024-03-19 21:45:17 +00:00
|
|
|
className="navbarButton"
|
2023-09-17 11:16:57 +00:00
|
|
|
style={{ fontSize: this.props.fontSize }}
|
|
|
|
onClick={this.maximise}
|
|
|
|
aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
|
|
|
|
>
|
2022-09-07 15:04:06 +00:00
|
|
|
<MdCropFree className="topicons" />
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
2021-04-08 18:52:17 +00:00
|
|
|
</Tooltip>
|
|
|
|
);
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
|
|
|
}
|
2023-03-16 11:11:18 +00:00
|
|
|
|
2024-03-01 21:02:56 +00:00
|
|
|
export { Maximise as default, Maximise };
|