feat: upload image compression, todo drag and drop, fixes

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/FileUpload.jsx

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
+import { compressAccurately, filetoDataURL } from 'image-conversion';
 
 export default class FileUpload extends PureComponent {
   getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -14,16 +15,27 @@ export default class FileUpload extends PureComponent {
         reader.readAsText(file, 'UTF-8');
       } else {
         // background upload
-        if (file.size > 2000000) {
-          return toast(this.getMessage('modals.main.file_upload_error'));
-        }
+        const settings = {};
 
-        reader.readAsDataURL(file);
+        Object.keys(localStorage).forEach((key) => {
+          settings[key] = localStorage.getItem(key);
+        });
+
+        // todo: check for video and ignore (very easy)
+        // also look into changing the number
+        const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
+        compressAccurately(file, 200).then(async (res) => {
+          if (settingsSize + res.size > 4850000) {
+            return toast('Not enough storage!');
+          }
+
+          this.props.loadFunction({
+            target: {
+              result: await filetoDataURL(res),
+            },
+          });
+        });
       }
-
-      reader.addEventListener('load', (e) => {
-        this.props.loadFunction(e);
-      });
     };
   }
 

src/components/modals/main/settings/Header.jsx

@@ -17,7 +17,11 @@ export default class Header extends PureComponent {
       <>
         <span className="mainTitle">{this.props.title}</span>
         <div className="headerExtras">
-          <span className="link">
+          <span className="link"  onClick={() =>
+              window.open(
+                variables.constants.KNOWLEDGEBASE + '/' + this.props.setting.toLowerCase().replace('enabled', ''),
+                '_blank',
+              )}>
             <MdHelpOutline /> More Info
           </span>
           <span
@@ -66,25 +70,3 @@ export default class Header extends PureComponent {
     );
   }
 }
-
-{
-  /*<div className="settingsRow">
-            <div className="content">
-              <span className="title">
-                {getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')}
-              </span>
-              <span className="subtitle">eeeh course</span>
-            </div>
-            <div className="action">
-              <Slider
-                name={this.props.zoomSetting}
-                min="10"
-                max="400"
-                default="100"
-                display="%"
-                marks={values('zoom')}
-                category={this.props.zoomCategory || this.props.category}
-              />
-            </div>
-        </div>*/
-}

src/components/modals/main/settings/sections/Changelog.jsx

@@ -47,7 +47,7 @@ export default class Changelog extends PureComponent {
           author: data.authors.join(', '),
         },
       ),
-      html: data.html,
+      content: data.markdown,
     });
 
     // lightbox etc
@@ -128,7 +128,9 @@ export default class Changelog extends PureComponent {
             className="updateImage"
           />
         ) : null}
-        <div className="updateChangelog" dangerouslySetInnerHTML={{ __html: this.state.html }} />
+        <div className="updateChangelog">
+          {this.state.content}
+        </div>
         <Modal
           closeTimeoutMS={100}
           onRequestClose={() => this.setState({ showLightbox: false })}