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

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

src/components/modals/main/marketplace/Item.jsx

@@ -190,7 +190,7 @@ export default class Item extends PureComponent {
                   </div>
                 </div>
               ) : null}
-              {!this.props.data.data.photos ? (
+              {!this.props.data.data.photos && this.props.data.data.language !== "" ? (
                 <div className="infoItem">
                   <MdTranslate />
                   <div className="text">

src/components/modals/main/scss/marketplace/_main.scss

@@ -28,6 +28,9 @@
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
       &:hover {
         background: t($modal-sidebarActive);
+        img {
+          background: t($modal-sidebarActive);
+        }
       }
     }
 
@@ -39,6 +42,7 @@
       height: 80% !important;
       width: auto !important;
       border-radius: 12px;
+      transition: 0.5s;
 
       @include themed() {
         background: t($modal-sidebar);

src/components/modals/main/scss/settings/modules/tabs/_changelog.scss

@@ -1,5 +1,6 @@
 .updateChangelog {
   max-width: 75%;
+  white-space: pre-wrap;
 
   li {
     cursor: initial;

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 })}