feat: add custom changes to drag and drop, refactor search, comments, video upload check (untested)

src/components/helpers/tooltip/tooltip.scss

@@ -1,4 +1,3 @@
-// todo: possibly add tooltip placement option
 @import 'scss/variables';
 
 .tooltip {

src/components/modals/main/marketplace/sections/Create.jsx

@@ -1,3 +1,4 @@
+// todo: refactor all of this
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import {
@@ -177,7 +178,6 @@ export default class Create extends PureComponent {
       </>
     );
 
-    // todo: find a better way to do all this
     const nextDescriptionDisabled = !(
       this.state.addonMetadata.name !== undefined &&
       this.state.addonMetadata.description !== undefined &&

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

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
+import { videoCheck } from 'modules/helpers/background/widget';
 
 export default class FileUpload extends PureComponent {
   getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -21,9 +22,16 @@ export default class FileUpload extends PureComponent {
           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;
+        if (videoCheck(file) === true) {
+          if (settingsSize + file.size > 4850000) {
+            return toast('Not enough storage!');
+          }
+
+          return this.props.loadFunction(file);
+        }
+
+        // todo: change number
         compressAccurately(file, 200).then(async (res) => {
           if (settingsSize + res.size > 4850000) {
             return toast('Not enough storage!');

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -3,6 +3,8 @@ import { PureComponent, createRef } from 'react';
 import { toast } from 'react-toastify';
 import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
 import EventBus from 'modules/helpers/eventbus';
+import { compressAccurately, filetoDataURL } from 'image-conversion';
+import { videoCheck } from 'modules/helpers/background/widget';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
@@ -124,7 +126,6 @@ export default class CustomSettings extends PureComponent {
   }
 
   componentDidMount() {
-    // todo: make dnd use compression etc
     const dnd = this.customDnd.current;
     dnd.ondragover = dnd.ondragenter = (e) => {
       e.preventDefault();
@@ -133,14 +134,28 @@ export default class CustomSettings extends PureComponent {
     dnd.ondrop = (e) => {
       e.preventDefault();
       const file = e.dataTransfer.files[0];
-      const reader = new FileReader();
-      if (file.size > 2000000) {
-        return toast(this.getMessage('modals.main.file_upload_error'));
+      const settings = {};
+
+      Object.keys(localStorage).forEach((key) => {
+        settings[key] = localStorage.getItem(key);
+      });
+
+      const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
+      if (videoCheck(file) === true) {
+        if (settingsSize + file.size > 4850000) {
+          return toast('Not enough storage!');
+        }
+
+        return this.customBackground(file, false, this.state.currentBackgroundIndex);
       }
-      reader.onload = (e) => {
-        this.customBackground(e, false, this.state.customBackground.length);
-      };
-      reader.readAsDataURL(file);
+
+      compressAccurately(file, 200).then(async (res) => {
+        if (settingsSize + res.size > 4850000) {
+          return toast('Not enough storage!');
+        }
+
+        this.customBackground(await filetoDataURL(res), false, this.state.currentBackgroundIndex);
+      });
       e.preventDefault();
     };
   }

src/components/widgets/background/Background.jsx

@@ -398,7 +398,6 @@ export default class Background extends PureComponent {
         );
 
         try {
-          // todo: refactor this mess
           const current = JSON.parse(localStorage.getItem('currentBackground'));
           if (current.type !== type) {
             this.getBackground();

src/components/widgets/search/Search.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { MdSearch, MdMic, MdSettings } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 //import Hotkeys from 'react-hot-keys';
@@ -28,15 +28,14 @@ export default class Search extends PureComponent {
       classList:
         localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons',
     };
+    this.micIcon = createRef();
   }
 
   startSpeechRecognition = () => {
     const voiceSearch = new window.webkitSpeechRecognition();
     voiceSearch.start();
 
-    // todo: use ref, stop being lazy
-    const micIcon = document.getElementById('micBtn');
-    micIcon.classList.add('micActive');
+    this.micIcon.current.classList.add('micActive');
 
     const searchText = document.getElementById('searchtext');
 
@@ -45,7 +44,7 @@ export default class Search extends PureComponent {
     };
 
     voiceSearch.onend = () => {
-      micIcon.classList.remove('micActive');
+      this.micIcon.current.classList.remove('micActive');
       if (searchText.value === '') {
         return;
       }
@@ -106,7 +105,7 @@ export default class Search extends PureComponent {
 
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
-        <button onClick={this.startSpeechRecognition} id="micBtn">
+        <button onClick={this.startSpeechRecognition} ref={this.micIcon}>
           <MdMic className="micIcon" />
         </button>
       );