fix: custom quote, message, move sideload etc

2022-09-21 14:06:51 +01:00 · 2022-09-21 14:06:51 +01:00 · 75a15533d2
parent 2c760038e0
commit 75a15533d2
6 changed files with 158 additions and 48 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -2,7 +2,7 @@ lockfileVersion: 5.4

 specifiers:
  '@eartharoid/deep-merge': ^0.0.2
-  '@eartharoid/i18n': 1.0.4
+  '@eartharoid/i18n': 1.1.0
  '@emotion/react': ^11.10.0
  '@emotion/styled': ^11.10.0
  '@floating-ui/react-dom': ^1.0.0
@ -32,7 +32,7 @@ specifiers:
  vite: ^3.0.9

 dependencies:
-  '@eartharoid/i18n': 1.0.4
+  '@eartharoid/i18n': 1.1.0
  '@emotion/react': 11.10.0_react@18.2.0
  '@emotion/styled': 11.10.0_g566eayvhbit5eqxocdac5mhdm
  '@floating-ui/react-dom': 1.0.0_biqbaboplfbrettd7655fr4n2y
@ -1552,8 +1552,8 @@ packages:
    resolution: {integrity: sha512-t7kmNd6m7BOGxf25tE1YBhPZbgMEsXZT0tQyVV/Mlo+rcPEmiEEc6HV1DBnYm63MvMpgTk4o6yBkeAJYCMzvNg==}
    dev: true

-  /@eartharoid/i18n/1.0.4:
-    resolution: {integrity: sha512-jxILUazPjIpjiUN5h1Ql8m9eHpxaD0wijMUYQqIghrzT/KS8UBUHmxNUCZOUhXEVYnXtB99p3Xvav7sPFx8InQ==}
+  /@eartharoid/i18n/1.1.0:
+    resolution: {integrity: sha512-1bD92kOMaXbcUi0cHoB+NqVgBmNUjKErsPEi2lPHgv2nV7pnz3wJ1o3NyrcBVs2mmZ/6nEfrYztxAjlSffFZRQ==}
    dev: false

  /@emotion/babel-plugin/11.10.0:
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@ -2,20 +2,25 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdUpdate, MdOutlineExtensionOff } from 'react-icons/md';
 import { toast } from 'react-toastify';
+import Modal from 'react-modal';

+import SideloadFailedModal from '../SideloadFailedModal';
+import FileUpload from '../../settings/FileUpload';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';

-import { uninstall, urlParser } from 'modules/helpers/marketplace';
+import { install, uninstall, urlParser } from 'modules/helpers/marketplace';

 export default class Added extends PureComponent {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
    this.state = {
      installed: JSON.parse(localStorage.getItem('installed')),
      item: {},
      button: '',
+      showFailed: false,
+      failedReason: '',
    };
    this.buttons = {
      uninstall: (
@ -26,6 +31,45 @@ export default class Added extends PureComponent {
    };
  }

+  installAddon(input) {
+    let failedReason = '';
+    if (!input.name) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_name');
+    } else if (!input.author) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_author');
+    } else if (!input.type) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_type');
+    } else if (!input.version) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_version');
+    } else if (
+      input.type === 'photos' &&
+      (!input.photos ||
+        !input.photos.length ||
+        !input.photos[0].url ||
+        !input.photos[0].url.default ||
+        !input.photos[0].photographer ||
+        !input.photos[0].location)
+    ) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.invalid_photos');
+    } else if (
+      input.type === 'quotes' &&
+      (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)
+    ) {
+      failedReason = variables.getMessage('modals.main.addons.sideload.errors.invalid_quotes');
+    }
+
+    if (failedReason !== '') {
+      return this.setState({
+        failedReason,
+        showFailed: true,
+      });
+    }
+
+    install(input.type, input);
+    toast(variables.getMessage('toasts.installed'));
+    variables.stats.postEvent('marketplace', 'Sideload');
+  }
+
  toggle(type, data) {
    if (type === 'item') {
      const installed = JSON.parse(localStorage.getItem('installed'));
@ -122,17 +166,49 @@ export default class Added extends PureComponent {
  }

  render() {
+    const sideLoadBackendElements = () => (
+      <>
+        <Modal
+          closeTimeoutMS={100}
+          onRequestClose={() => this.setState({ showFailed: false })}
+          isOpen={this.state.showFailed}
+          className="Modal resetmodal mainModal sideloadModal"
+          overlayClassName="Overlay resetoverlay"
+          ariaHideApp={false}
+        >
+          <SideloadFailedModal
+            modalClose={() => this.setState({ showFailed: false })}
+            reason={this.state.failedReason}
+          />
+        </Modal>
+        <FileUpload
+          id="file-input"
+          type="settings"
+          accept="application/json"
+          loadFunction={(e) => this.installAddon(JSON.parse(e))}
+        />
+      </>
+    );
+
    if (this.state.installed.length === 0) {
      return (
-        <div className="emptyItems">
-          <div className="emptyNewMessage">
-            <MdOutlineExtensionOff />
-            <span className="title">{variables.getMessage('modals.main.addons.empty.title')}</span>
-            <span className="subtitle">
-              {variables.getMessage('modals.main.addons.empty.description')}
-            </span>
+        <>
+          {sideLoadBackendElements()}
+          <button onClick={() => document.getElementById('file-input').click()}>
+            {variables.getMessage('modals.main.addons.sideload.title')}
+          </button>
+          <div className="emptyItems">
+            <div className="emptyNewMessage">
+              <MdOutlineExtensionOff />
+              <span className="title">
+                {variables.getMessage('modals.main.addons.empty.title')}
+              </span>
+              <span className="subtitle">
+                {variables.getMessage('modals.main.addons.empty.description')}
+              </span>
+            </div>
          </div>
-        </div>
+        </>
      );
    }

@ -148,7 +224,11 @@ export default class Added extends PureComponent {

    return (
      <>
+        {sideLoadBackendElements()}
        <span className="mainTitle">{variables.getMessage('modals.main.addons.added')}</span>
+        <button onClick={() => document.getElementById('file-input').click()}>
+          {variables.getMessage('modals.main.addons.sideload.title')}
+        </button>
        <div className="filter">
          <Dropdown
            label={variables.getMessage('modals.main.addons.sort.title')}
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@ -104,33 +104,39 @@ export default class QuoteSettings extends PureComponent {
              {variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
            </button>
          </SettingsItem>
-          <table style={{ width: '100%' }}>
-            <tr>
-              <th>{variables.getMessage('modals.main.settings.sections.quote.title')}</th>
-              <th>{variables.getMessage('modals.main.settings.sections.quote.author')}</th>
-              <th>{variables.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
-            </tr>
-            {this.state.customQuote.map((_url, index) => (
-              <tr key={index}>
+          {this.state.customQuote.length > 1 ? (
+            <table style={{ width: '100%' }}>
+              <tr>
+                <th>{variables.getMessage('modals.main.settings.sections.quote.title')}</th>
+                <th>{variables.getMessage('modals.main.settings.sections.quote.author')}</th>
                <th>
-                  <TextareaAutosize
-                    value={this.state.customQuote[index].quote}
-                    placeholder={variables.getMessage('modals.main.settings.sections.quote.title')}
-                    onChange={(e) => this.customQuote(e, true, index, 'quote')}
-                    varient="outlined"
-                    style={{ marginRight: '10px' }}
-                  />
+                  {variables.getMessage('modals.main.settings.sections.quote.custom_buttons')}
                </th>
-                <th>
-                  <TextareaAutosize
-                    value={this.state.customQuote[index].author}
-                    placeholder={variables.getMessage('modals.main.settings.sections.quote.author')}
-                    onChange={(e) => this.customQuote(e, true, index, 'author')}
-                    varient="outlined"
-                  />
-                </th>
-                <th>
-                  {this.state.customQuote.length > 1 ? (
+              </tr>
+              {this.state.customQuote.map((_url, index) => (
+                <tr key={index}>
+                  <th>
+                    <TextareaAutosize
+                      value={this.state.customQuote[index].quote}
+                      placeholder={variables.getMessage(
+                        'modals.main.settings.sections.quote.title',
+                      )}
+                      onChange={(e) => this.customQuote(e, true, index, 'quote')}
+                      varient="outlined"
+                      style={{ marginRight: '10px' }}
+                    />
+                  </th>
+                  <th>
+                    <TextareaAutosize
+                      value={this.state.customQuote[index].author}
+                      placeholder={variables.getMessage(
+                        'modals.main.settings.sections.quote.author',
+                      )}
+                      onChange={(e) => this.customQuote(e, true, index, 'author')}
+                      varient="outlined"
+                    />
+                  </th>
+                  <th>
                    <button
                      className="deleteButton"
                      onClick={() => this.modifyCustomQuote('remove', index)}
@ -138,11 +144,25 @@ export default class QuoteSettings extends PureComponent {
                    >
                      <MdCancel />
                    </button>
-                  ) : null}
-                </th>
-              </tr>
-            ))}
-          </table>
+                  </th>
+                </tr>
+              ))}
+            </table>
+          ) : (
+            <div className="photosEmpty">
+              <div className="emptyNewMessage">
+                <span className="title">
+                  {variables.getMessage('modals.main.settings.sections.message.no_messages')}
+                </span>
+                <span className="subtitle">
+                  {variables.getMessage('modals.main.settings.sections.message.add_some')}
+                </span>
+                <button onClick={() => this.modifyCustomQuote('add')}>
+                  {variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
+                </button>
+              </div>
+            </div>
+          )}
        </>
      );
    } else {
--- a/src/components/widgets/message/Message.jsx
+++ b/src/components/widgets/message/Message.jsx
@ -22,7 +22,7 @@ export default class Message extends PureComponent {

        this.message.current.style.display = 'block';
        this.message.current.style.fontSize = `${
-          1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
+          1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
        }em`;
      }
    });
@ -30,7 +30,7 @@ export default class Message extends PureComponent {
    const messages = JSON.parse(localStorage.getItem('messages')) || [];

    this.message.current.style.fontSize = `${
-      1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
+      1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
    }em`;
    
    if (messages.length === 0) {
--- a/src/components/widgets/message/message.scss
+++ b/src/components/widgets/message/message.scss
@ -2,4 +2,5 @@
  cursor: default;
  margin: 0;
  user-select: none;
+  font-size: 1em;
 }
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@ -198,13 +198,19 @@ export default class Quote extends PureComponent {
        customQuote = customQuote
          ? customQuote[Math.floor(Math.random() * customQuote.length)]
          : null;
+          

-        if (customQuote && customQuote !== '' && customQuote !== 'undefined') {
+        if (customQuote !== undefined) {
          return this.setState({
            quote: '"' + customQuote.quote + '"',
            author: customQuote.author,
            authorlink: this.getAuthorLink(customQuote.author),
            authorimg: await this.getAuthorImg(customQuote.author),
+            noQuote: false
+          });
+        } else {
+          this.setState({
+            noQuote: true
          });
        }
        break;
@ -396,6 +402,9 @@ export default class Quote extends PureComponent {
  }

  render() {
+    if (this.state.noQuote === true) {
+      return <></>;
+    }
    return (
      <div className="quotediv" ref={this.quotediv}>
        <Modal