From 9b5946038a05f1a684f63ac260fce7c35248dd17 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sun, 2 May 2021 13:40:11 +0100
Subject: [PATCH] feat: background filters

---
 .../main/settings/sections/background/Background.jsx  |  8 ++++++++
 src/components/widgets/background/Background.jsx      | 10 +++++++---
 src/translations/de_DE.json                           | 11 ++++++++++-
 src/translations/en_GB.json                           | 11 ++++++++++-
 src/translations/en_US.json                           | 11 ++++++++++-
 src/translations/es.json                              | 11 ++++++++++-
 src/translations/fr.json                              | 11 ++++++++++-
 src/translations/nl.json                              | 11 ++++++++++-
 src/translations/no.json                              | 11 ++++++++++-
 src/translations/ru.json                              | 11 ++++++++++-
 src/translations/zh_CN.json                           | 11 ++++++++++-
 11 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 4d93e375..56241849 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -170,6 +170,14 @@ export default class BackgroundSettings extends React.PureComponent {
         <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
         <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
         <br/><br/>
+        <Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background'>
+          <option value='grayscale'>{background.effects.filters.grayscale}</option>
+          <option value='sepia'>{background.effects.filters.sepia}</option>
+          <option value='invert'>{background.effects.filters.invert}</option>
+          <option value='saturate'>{background.effects.filters.saturate}</option>
+          <option value='contrast'>{background.effects.filters.contrast}</option>
+        </Dropdown>
+        <Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' />
       </>
     );
   }
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 008b4096..ce107b13 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -301,10 +301,12 @@ export default class Background extends React.PureComponent {
         }
 
         // background effects so we don't get another image again
+        const backgroundFilter = localStorage.getItem('backgroundFilter');
+
         if (this.state.video === true) {
-          document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
+          document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
         } else {
-          element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
+          element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
         }
       }
 
@@ -339,9 +341,11 @@ export default class Background extends React.PureComponent {
       );
     }
 
+    const backgroundFilter = localStorage.getItem('backgroundFilter');
+
     return (
       <>
-        <div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundImage'/>
+        <div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ? 
           <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
         : null}
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index bb0dbe65..aebabf2d 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effekte",
               "blur": "Unschärfe anpassen",
-              "brightness": "Helligkeit anpassen"
+              "brightness": "Helligkeit anpassen",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index c550fb61..896e729c 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "Adjust blur",
-              "brightness": "Adjust brightness"
+              "brightness": "Adjust brightness",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index 131b1e92..e4b8c52e 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "Adjust blur",
-              "brightness": "Adjust brightness"
+              "brightness": "Adjust brightness",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/es.json b/src/translations/es.json
index 3f430a19..c19a7a17 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Efectos",
               "blur": "Ajustar difuminado",
-              "brightness": "Ajustar brillo"
+              "brightness": "Ajustar brillo",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Tipo",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index da666f03..e8dac3b4 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effets",
               "blur": "Ajuster le flou",
-              "brightness": "Ajuster la luminosité"
+              "brightness": "Ajuster la luminosité",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 8e80d489..1276ef86 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "Vervaging instellen",
-              "brightness": "Adjust brightness"
+              "brightness": "Adjust brightness",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/no.json b/src/translations/no.json
index e8457aae..4fe7da3b 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "Juster Blur",
-              "brightness": "Adjust brightness"
+              "brightness": "Adjust brightness",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 5bcf8064..9aa191f0 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "Размытие",
-              "brightness": "Яркость"
+              "brightness": "Яркость",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index 3d57c0c1..4e1dd2b3 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -141,7 +141,16 @@
             "effects": {
               "title": "Effects",
               "blur": "调整模糊",
-              "brightness": "调整亮度"
+              "brightness": "调整亮度",
+              "filters": {
+                "title": "Background filter",
+                "amount": "Filter amount",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "constrast": "Contrast"
+              }
             },
             "type": {
               "title": "Type",