mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 12:34:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add setting to adjust background brightness

Browse Source
This commit is contained in:
edenbun
2020-08-29 15:03:31 +01:00
parent d7e0091136
commit 088008165d
5 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/modals/Settings.jsx
View File

@@ -19,6 +19,11 @@ export default class Settings extends React.PureComponent {
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
break;
case 'brightness':
localStorage.setItem('brightness', 100);
document.getElementById('brightnessRange').value = 100;
document.getElementById('brightnessAmount').innerText = '100';
break;
case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
default: console.log('[ERROR] resetItem requires a key!');
}
@@ -41,6 +46,11 @@ export default class Settings extends React.PureComponent {
document.getElementById('blurRange').value = value;
}
if (key === 'brightness') {
document.getElementById('brightnessAmount').innerText = value;
document.getElementById('brightnessRange').value = value;
}
const tag = document.getElementById(`${key}Status`);
if (tag) {
@@ -182,6 +192,10 @@ export default class Settings extends React.PureComponent {
<p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
</ul>
<ul>
<p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<input className='range' type='range' min='0' max='100' id='brightnessRange' onInput={() => document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} />
</ul>
<ul>
<p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<input type='text' id='customBackground'></input>

27
src/components/widgets/Background.jsx
View File

@@ -12,7 +12,10 @@ export default class Background extends React.PureComponent {
] // Select a random image
document.querySelector('#backgroundImage').setAttribute(
'style', `background-image: url(../offline-images/${randomImage}.jpeg); -webkit-filter:blur(${localStorage.getItem('blur')}px);`
'style',
`background-image: url(../offline-images/${randomImage}.jpeg);
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
); // Set background and blur
const creditElem = document.querySelector('#photographer');
@@ -27,9 +30,13 @@ export default class Background extends React.PureComponent {
const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
if (photoPack) {
let background = photoPack[Math.floor(Math.random() * photoPack.length)];
document.getElementById('credits').style.display = 'none'; // Hide the credit
return document.getElementById('backgroundImage').setAttribute(
'style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${background.url.default})`
'style',
`background-image: url(${background.url.default});
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
); // Set background and blur etc
}
@@ -37,15 +44,22 @@ export default class Background extends React.PureComponent {
if (colour) {
document.getElementById('credits').style.display = 'none'; // Hide the credit
return document.getElementById('backgroundImage').setAttribute(
'style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`
'style',
`background-color: ${colour};
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
); // Set background and blur etc
}
const custom = localStorage.getItem('customBackground');
if (custom !== '') {
document.getElementById('credits').style.display = 'none'; // Hide the credit
return document.getElementById('backgroundImage').setAttribute(
'style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`
'style',
`background-image: url(${custom});
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
); // Set background and blur etc
} else {
try { // First we try and get an image from the API...
@@ -73,7 +87,10 @@ export default class Background extends React.PureComponent {
if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local images
document.getElementById('backgroundImage').setAttribute(
'style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`
'style',
`background-image: url(${data.file});
-webkit-filter: blur(${localStorage.getItem('blur')}px);
-webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
); // Set background and blur etc
const creditElem = document.querySelector('#photographer');
creditElem.append(` ${data.photographer}`); // Set the credit