From 81787211b8b4f309df42f8cee26315fc59a9a7f5 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Tue, 13 Apr 2021 14:36:21 +0100
Subject: [PATCH] fix: custom background settings

---
 .../sections/background/Background.jsx        | 15 +++++++++----
 .../widgets/background/Background.jsx         | 21 +++++++------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index b6c914d5..5ef722fd 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -30,10 +30,17 @@ export default class BackgroundSettings extends React.PureComponent {
     toast(this.language.toasts.reset);
   }
 
-  customBackground(e) {
-    localStorage.setItem('customBackground', e.target.result);
+  customBackground(e, text) {
+    let result;
+    if (text === true) {
+      result = e.target.value;
+    } else {
+      result = e.target.result;
+    }
+  
+    localStorage.setItem('customBackground', result);
     this.setState({
-      customBackground: e.target.result
+      customBackground: result
     });
   }
 
@@ -102,7 +109,7 @@ export default class BackgroundSettings extends React.PureComponent {
       <>
         <ul>
           <p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
-          <input type='text' value={this.state.customBackground} onChange={(e) => this.customBackground(e)}></input>
+          <input type='text' value={this.state.customBackground} onChange={(e) => this.customBackground(e, true)}></input>
           <span className='modalLink' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</span>
           <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e)} />
         </ul>
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index e3766665..f4dcfe15 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -36,6 +36,10 @@ export default class Background extends React.PureComponent {
     });
   }
 
+  videoCheck(url) {
+    return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg')
+  }
+
   offlineBackground() {
     const offlineImages = require('./offline_images.json');
 
@@ -189,26 +193,15 @@ export default class Background extends React.PureComponent {
           return this.offlineBackground();
         }
 
-        if (customBackground !== '') {
-          // video background
-          if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
-            return this.setState({
-              url: customBackground,
-              video: true,
-              photoInfo: {
-                hidden: true
-              }
-          });
-        // normal background
-        } else {
-          return this.setState({
+        if (customBackground !== '' && customBackground !== 'undefined') {
+          this.setState({
             url: customBackground,
+            video: this.videoCheck(customBackground),
             photoInfo: {
               hidden: true
             }
           });
         }
-      }
       break;
 
       case 'photo_pack':