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

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

package.json

@@ -19,6 +19,7 @@
     "@fontsource/montserrat": "4.4.5",
     "@mui/material": "5.6.0",
     "@sentry/react": "^6.19.6",
+    "image-conversion": "^2.1.1",
     "react": "^18.0.0",
     "react-clock": "3.1.0",
     "react-color-gradient-picker": "0.1.2",

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

src/components/widgets/navbar/Navbar.jsx

@@ -90,7 +90,9 @@ export default class Navbar extends PureComponent {
           <Tooltip
             title={variables.language.getMessage(
               variables.languagecode,
-              'modals.main.navbar.settings',
+              'modals.main.navbar.settings', {
+                type: variables.language.getMessage(variables.languagecode, 'modals.main.navbar.tooltips.refresh_' + this.refreshValue),
+              }
             )}
           >
             <button onClick={() => this.props.openModal('mainModal')}>

src/components/widgets/navbar/Todo.jsx

@@ -1,11 +1,23 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdChecklist, MdPushPin, MdDelete, MdPlaylistAdd } from 'react-icons/md';
+import { MdChecklist, MdPushPin, MdDelete, MdPlaylistAdd,  MdOutlineDragIndicator} from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { shift, useFloating } from '@floating-ui/react-dom';
 //import Hotkeys from 'react-hot-keys';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+
+const SortableItem = sortableElement(({ value }) => (
+  <li>
+    {value}
+    <MdOutlineDragIndicator />
+  </li>
+));
+
+const SortableContainer = sortableContainer(({ children }) => (
+  <ul>{children}</ul>
+));
 
 class Todo extends PureComponent {
   constructor() {
@@ -23,6 +35,20 @@ class Todo extends PureComponent {
     };
   }
 
+  arrayMove(array, oldIndex, newIndex) {
+    const result = Array.from(array);
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
+
+    return result;
+  }
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    this.setState({
+      todo: this.arrayMove(this.state.todo, oldIndex, newIndex),
+    });
+  };
+
   showTodo() {
     this.setState({
       showTodo: true,
@@ -134,27 +160,42 @@ class Todo extends PureComponent {
                 </Tooltip>
               </div>
               <div className={'todoRows'}>
-                {this.state.todo.map((_value, index) => (
-                  <div
-                    className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
-                    key={index}
-                  >
-                    <Checkbox
-                      checked={this.state.todo[index].done}
-                      onClick={() => this.updateTodo('done', index)}
-                    />
-                    <TextareaAutosize
-                      placeholder={variables.language.getMessage(
-                        variables.languagecode,
-                        'widgets.navbar.notes.placeholder',
-                      )}
-                      value={this.state.todo[index].value}
-                      onChange={(data) => this.updateTodo('set', index, data)}
-                      readOnly={this.state.todo[index].done}
-                    />
-                    <MdDelete onClick={() => this.updateTodo('remove', index)} />
-                  </div>
-                ))}
+                <SortableContainer
+                  onSortEnd={this.onSortEnd}
+                  lockAxis="y"
+                  lockToContainerEdges
+                  disableAutoscroll
+                >
+                  {this.state.todo.map((_value, index) => (
+                    <div
+                      className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
+                      key={index}
+                    >
+                      <SortableItem
+                        key={`item-${index}`}
+                        index={index}
+                        value={
+                          <>
+                            <Checkbox
+                              checked={this.state.todo[index].done}
+                              onClick={() => this.updateTodo('done', index)}
+                            />
+                            <TextareaAutosize
+                              placeholder={variables.language.getMessage(
+                                variables.languagecode,
+                                'widgets.navbar.notes.placeholder',
+                              )}
+                              value={this.state.todo[index].value}
+                              onChange={(data) => this.updateTodo('set', index, data)}
+                              readOnly={this.state.todo[index].done}
+                            />
+                            <MdDelete onClick={() => this.updateTodo('remove', index)} />
+                          </>
+                        }
+                      />
+                    </div>
+                  ))}
+                </SortableContainer>
               </div>
             </div>
           </span>

src/modules/constants.js

@@ -11,7 +11,7 @@ export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
-export const BLOG_POST = 'https://blog.muetab.com/posts/version-7-0';
+export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
 export const REPORT_ITEM =
   'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
@@ -19,6 +19,7 @@ export const BUG_REPORT =
   'https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+';
 export const DONATE_LINK = 'https://muetab.com/donate';
 export const SENTRY_DSN = 'https://430352fd4b174d688ebd82fc85c22c58@o1217438.ingest.sentry.io/6359480';
+export const KNOWLEDGEBASE = 'https://knowledgebase.muetab.com';
 
 // Mue Info
 export const ORG_NAME = 'mue';