From 088008165dea3f6d065d04a6c0b63d63571d7079 Mon Sep 17 00:00:00 2001
From: edenbun <contact@edenbun.com>
Date: Sat, 29 Aug 2020 15:03:31 +0100
Subject: [PATCH] Add setting to adjust background brightness

---
 src/components/modals/Settings.jsx    | 14 ++++++++++++++
 src/components/widgets/Background.jsx | 27 ++++++++++++++++++++++-----
 src/modules/defaultSettings.json      |  4 ++++
 src/modules/settingsFunctions.js      |  3 ++-
 src/translations/en.json              |  1 +
 5 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index f9c889ad..feef33e4 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -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>
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 75ee4180..1baa7794 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -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
diff --git a/src/modules/defaultSettings.json b/src/modules/defaultSettings.json
index 4f6f3909..8d8d75b6 100644
--- a/src/modules/defaultSettings.json
+++ b/src/modules/defaultSettings.json
@@ -23,6 +23,10 @@
         "name": "blur",
         "value": 0
     },
+    {
+        "name": "brightness",
+        "value": 100
+    },
     {
         "name": "events",
         "value": true
diff --git a/src/modules/settingsFunctions.js b/src/modules/settingsFunctions.js
index c87f0717..5c3c69f8 100644
--- a/src/modules/settingsFunctions.js
+++ b/src/modules/settingsFunctions.js
@@ -55,7 +55,8 @@ export default class SettingsFunctions {
     }
 
     static saveStuff() {
-        localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
+        localStorage.setItem('blur', document.getElementById('blurRange').value);
+        localStorage.setItem('brightness', document.getElementById('brightnessRange').value); // this is better than inline onChange for performance
         localStorage.setItem('greetingName', document.getElementById('greetingName').value);
         localStorage.setItem('customBackground', document.getElementById('customBackground').value);
         if (!document.getElementById('searchEngineInput').enabled === 'false') {
diff --git a/src/translations/en.json b/src/translations/en.json
index 4479b257..3b7423e7 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -38,6 +38,7 @@
             "title": "Background",
             "API": "Background API",
             "blur": "Adjust Blur",
+            "brightness": "Adjust Brightness",
             "customURL": "Custom Background URL",
             "custombackground": "Custom Background",
             "customcolour": "Custom Background Colour",