soon

2026-07-15 04:53:48 +02:00 · 2021-01-16 22:43:46 +00:00
parent 0a735384df
commit 3ec5a2c199
32 changed files with 530 additions and 182 deletions
--- a/src/components/modals/Main.jsx
+++ b/src/components/modals/Main.jsx
@@ -9,23 +9,26 @@ import AddonsIcon from '@material-ui/icons/Widgets';
 import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';

 export default class MainModal extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            tab: '',
-            currentTab: ''
-        };
-        this.tabs = {
-          settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
-          addons: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
-          marketplace: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>
-        }
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      tab: '',
+      currentTab: ''
    }
+    this.tabs = {
+      settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
+      addons: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
+      marketplace: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>
+    }
+  }

  componentDidMount() {
    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
    document.getElementById('center').classList.toggle('backgroundEffects');
-    this.setState({ tab: this.tabs.settings, currentTab: 'settings' });
+
+    this.setState({ 
+      tab: this.tabs.settings, currentTab: 'settings' 
+    });
  }

  componentWillUnmount() {
@@ -36,7 +39,10 @@ export default class MainModal extends React.PureComponent {
  changeEnabled(input) {
    document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active');
    document.getElementById(input + 'TabLink').classList.toggle('active');
-    this.setState({ tab: this.tabs[input], currentTab: input });
+
+    this.setState({ 
+      tab: this.tabs[input], currentTab: input 
+    });
  }

  render() {
--- a/src/components/modals/Update.jsx
+++ b/src/components/modals/Update.jsx
@@ -22,6 +22,7 @@ export default class Update extends React.PureComponent {
  }

  const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+  
  if (data.statusCode === 500 || data.title === null) {
    const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
    return this.setState({
--- a/src/components/modals/marketplace/Item.jsx
+++ b/src/components/modals/marketplace/Item.jsx
@@ -15,7 +15,9 @@ export default class Item extends React.PureComponent {
          </div>
        );
      }
-    } catch (e) {}
+    } catch (e) {
+      // ignore
+    }

    return (
      <div id='item'>
--- a/src/components/modals/marketplace/Items.jsx
+++ b/src/components/modals/marketplace/Items.jsx
@@ -2,10 +2,14 @@ import React from 'react';

 export default class Items extends React.PureComponent {
  render() {
-    if (this.props.items.length === 0) return null; // if there are no items in category don't render it
+    if (this.props.items.length === 0) {
+        return null; // if there are no items in category don't render it
+    }

    let seeMoreHTML;
-    if (this.props.seeMoreFunction && this.props.items.length === 3) seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>; // only render see more button if there are enough addons
+    if (this.props.seeMoreFunction && this.props.items.length === 3) {
+        seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>; // only render see more button if there are enough addons
+    }

    return (
        <div>
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -13,13 +13,19 @@ export default class Checkbox extends React.PureComponent {

  handleChange(name) {
    SettingsFunctions.setItem(name);
-    this.setState({ checked: (this.state.checked === true) ? false : true });
+    this.setState({ 
+      checked: (this.state.checked === true) ? false : true 
+    });
  }

  render() {
    let text = this.props.text;
-    if (this.props.newFeature) text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
-    else if (this.props.betaFeature) text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+    
+    if (this.props.newFeature) {
+      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+    } else if (this.props.betaFeature) {
+      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+    }

    return (
      <React.Fragment>
--- a/src/components/modals/settings/FileUpload.jsx
+++ b/src/components/modals/settings/FileUpload.jsx
@@ -7,9 +7,12 @@ export default class FileUpload extends React.PureComponent {
        const reader = new FileReader();
        const file = e.target.files[0];

-        if (this.props.type === 'settings') reader.readAsText(file, 'UTF-8');
-        else { // background upload
-          if (file.size > 2000000) return toast('File is over 2MB');
+        if (this.props.type === 'settings') {
+          reader.readAsText(file, 'UTF-8');
+        } else { // background upload
+          if (file.size > 2000000) {
+            return toast('File is over 2MB');
+          }
          reader.readAsDataURL(file);
        }
        reader.addEventListener('load', (e) => this.props.loadFunction(e));
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -19,7 +19,9 @@ export default class Section extends React.PureComponent {
      transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)'
    });

-    if (this.props.onToggle) this.props.onToggle(display);
+    if (this.props.onToggle) {
+      this.props.onToggle(display);
+    }
  }

  render() {
@@ -31,6 +33,7 @@ export default class Section extends React.PureComponent {
            <li className='extraSettings'>{this.props.children}</li>
          </div>
        );
+
        expandMore = (
          <ExpandMore
            style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
@@ -38,8 +41,14 @@ export default class Section extends React.PureComponent {
            onClick={() => this.toggleSection()} />
        );
    }
-    if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
-    if (this.props.dropdown === false) noDropdown = 'nodropdown';
+
+    if (this.props.slider !== false) {
+      slider = <Slider name={this.props.name} />;
+    }
+    
+    if (this.props.dropdown === false){
+      noDropdown = 'nodropdown';
+    }

    return (
        <div className='section'>
--- a/src/components/modals/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -11,11 +11,14 @@ export default class Slider extends React.PureComponent {

  handleChange(name) {
    SettingsFunctions.setItem(name);
-    this.setState({ checked: (this.state.checked === true) ? false : true });
+    this.setState({ 
+      checked: (this.state.checked === true) ? false : true 
+    });
  }

  render() {
    let setText = (this.props.override) ? this.props.override : this.props.name;
+
    return (
        <label className='switch'>
          <input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange(setText)} />
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -34,19 +34,33 @@ export default class BackgroundSettings extends React.PureComponent {
    switch (key) {
      case 'customBackgroundColour':
        localStorage.setItem('customBackgroundColour', '');
-        this.setState({ gradientSettings: this.DefaultGradientSettings });
+        this.setState({ 
+          gradientSettings: this.DefaultGradientSettings 
+        });
        break;
-      case 'customBackground': document.getElementById('customBackground').value = ''; break;
+
+      case 'customBackground': 
+        document.getElementById('customBackground').value = ''; 
+        break;
+
      case 'blur':
        localStorage.setItem('blur', 0);
-        this.setState({ blur: 0 });
+        this.setState({ 
+          blur: 0 
+        });
        break;
+
      case 'brightness':
        localStorage.setItem('brightness', 100);
-        this.setState({ brightness: 100 });
+        this.setState({ 
+          brightness: 100 
+        });
        break;
-      default: toast('resetItem requires a key!');
+
+      default: 
+        toast('resetItem requires a key!');
    }
+
    toast(this.props.toastLanguage.reset);
  }

@@ -79,7 +93,9 @@ export default class BackgroundSettings extends React.PureComponent {
      }
    }

-    if (gradientSettings === undefined) gradientSettings = this.DefaultGradientSettings;
+    if (gradientSettings === undefined) {
+      gradientSettings = this.DefaultGradientSettings;
+    }

    this.setState({
      blur: localStorage.getItem('blur'),
@@ -129,9 +145,20 @@ export default class BackgroundSettings extends React.PureComponent {
  }

  onColorPickerChange = (attrs, name) => {
-    if (process.env.NODE_ENV === 'development') console.log(attrs, name);
+    if (process.env.NODE_ENV === 'development') {
+      console.log(attrs, name);
+    }
+
    this.setState({
-      gradientSettings: { 'angle': attrs.degree, 'gradient': attrs.points.map((p) => { return { 'colour': '#' + rgbToHex(p.red, p.green, p.blue), 'stop': p.left } }), 'type': attrs.type }
+      gradientSettings: { 
+        'angle': attrs.degree, 
+        'gradient': attrs.points.map((p) => { 
+          return { 
+            'colour': '#' + rgbToHex(p.red, p.green, p.blue), 
+            'stop': p.left 
+          } }), 
+        'type': attrs.type 
+      }
    });
  };

@@ -145,7 +172,9 @@ export default class BackgroundSettings extends React.PureComponent {

  fileUpload(e) {
    localStorage.setItem('customBackground', e.target.result);
-    this.setState({ customBackground: e.target.result });
+    this.setState({ 
+      customBackground: e.target.result
+     });
  }

  beforeUnload() {
--- a/src/components/modals/settings/sections/GreetingSettings.jsx
+++ b/src/components/modals/settings/sections/GreetingSettings.jsx
@@ -20,9 +20,14 @@ export default class GreetingSettings extends React.PureComponent {
  }

  changeDate(data) {
-      if (data === 'reset') return; //soon
+      if (data === 'reset') {
+        return; //soon
+      }
+
      localStorage.setItem('birthday', data);
-      this.setState({ birthday: data });
+      this.setState({ 
+        birthday: data 
+      });
  }

  beforeUnload() {
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -16,12 +16,17 @@ export default class SearchSettings extends React.PureComponent {

  componentDidMount() {
    const searchEngine = localStorage.getItem('searchEngine');
+
    if (searchEngine === 'custom') {
      const input = document.getElementById('searchEngineInput');
+
      input.style.display = 'block';
      input.enabled = 'true';
+      
      document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
-    } else localStorage.removeItem('customSearchEngine');
+    } else {
+      localStorage.removeItem('customSearchEngine');
+    }

    document.getElementById('searchEngine').value = searchEngine;
  }
--- a/src/components/modals/tabs/Addons.jsx
+++ b/src/components/modals/tabs/Addons.jsx
@@ -35,8 +35,13 @@ export default class Addons extends React.PureComponent {
        if (type === 'item') {
            const installed = JSON.parse(localStorage.getItem('installed'));
            const info = installed.find(i => i.name === data);
+
            this.setState({
-                current_data: { type: type2, name: data, content: info },
+                current_data: { 
+                    type: type2,
+                    name: data,
+                    content: info 
+                },
                item_data: {
                    name: info.name,
                    author: info.author,
@@ -53,23 +58,40 @@ export default class Addons extends React.PureComponent {
            document.getElementById('marketplace').style.display = 'block';
            document.getElementById('item').style.display = 'none';
        }
-        this.setState({ button: this.buttons.uninstall });
+        this.setState({ 
+            button: this.buttons.uninstall 
+        });
    }

  manage(type, input) {
    switch (type) {
-        case 'install': MarketplaceFunctions.install(input.type, input, true); break;
-        case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); break;
-        default: break;
+        case 'install': 
+          MarketplaceFunctions.install(input.type, input, true); 
+          break;
+        case 'uninstall': 
+          MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); 
+          break;
+        default: 
+          break;
    }
+
    toast(this.props.toastLanguage[type + 'ed']);
+
    let button = '';
-    if (type === 'install') button = this.buttons.uninstall;
-    this.setState({ button: button, installed: JSON.parse(localStorage.getItem('installed')) });
+    if (type === 'install'){
+        button = this.buttons.uninstall;
+    }
+
+    this.setState({ 
+        button: button, 
+        installed: JSON.parse(localStorage.getItem('installed')) 
+    });
  }

  componentDidMount() {
-    if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation');
+    if (localStorage.getItem('animations') === 'true') {
+        document.getElementById('marketplace').classList.add('marketplaceanimation');
+    }
  }

  render() {
--- a/src/components/modals/tabs/Marketplace.jsx
+++ b/src/components/modals/tabs/Marketplace.jsx
@@ -44,12 +44,20 @@ export default class Marketplace extends React.PureComponent {
        case 'seemore':
            document.getElementById('marketplace').style.display = 'none';
            document.getElementById('seemore').style.display = 'block';
-            this.setState({ see_more: this.state[type2], see_more_type: type2 });
+            
+            this.setState({ 
+              see_more: this.state[type2], 
+              see_more_type: type2 
+            });
            break;
+
        case 'item':
            let info;
-            try { info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); }
-            catch (e) { return toast(this.props.toastLanguage.error); }
+            try { 
+              info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); 
+            } catch (e) { 
+              return toast(this.props.toastLanguage.error);
+            }

            this.setState({
                current_data: { type: type2, name: data, content: info },
@@ -64,14 +72,22 @@ export default class Marketplace extends React.PureComponent {
            });

            let button = this.buttons.install;
+
            const installed = JSON.parse(localStorage.getItem('installed'));
-            if (installed.some(item => item.name === data)) button = this.buttons.uninstall;
-            this.setState({ button: button });
+
+            if (installed.some(item => item.name === data)) {
+              button = this.buttons.uninstall;
+            }
+
+            this.setState({
+               button: button 
+              });

            document.getElementById('marketplace').style.display = 'none';
            document.getElementById('seemore').style.display = 'none';
            document.getElementById('item').style.display = 'block';
            break;
+
        default:
            document.getElementById('marketplace').style.display = 'block';
            document.getElementById('item').style.display = 'none';
@@ -83,6 +99,7 @@ export default class Marketplace extends React.PureComponent {
  async getItems() {
    const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+
    this.setState({
        settings: data.data.settings,
        photo_packs: data.data.photo_packs,
@@ -95,10 +112,16 @@ export default class Marketplace extends React.PureComponent {

  manage(type) {
    switch (type) {
-        case 'install': MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); break;
-        case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); break;
-        default: break;
+        case 'install': 
+          MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); 
+          break;
+        case 'uninstall': 
+          MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); 
+          break;
+        default:
+          break;
    }
+
    toast(this.props.toastLanguage[type + 'ed']);
    this.setState({
      button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
@@ -106,8 +129,14 @@ export default class Marketplace extends React.PureComponent {
  }

  componentDidMount() {
-    if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation');
-    if (navigator.onLine === false) return;
+    if (localStorage.getItem('animations') === 'true') {
+      document.getElementById('marketplace').classList.add('marketplaceanimation');
+    }
+
+    if (navigator.onLine === false) {
+      return;
+    }
+
    this.getItems();
  }

--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -24,13 +24,19 @@ export default class Settings extends React.PureComponent {

    if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
      const choices = document.getElementsByClassName('choices');
-      for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
+      for (let i = 0; i < choices.length; i++) {
+        choices[i].style.backgroundColor = '#2f3542';
+      }
    }
  }

  settingsImport(e) {
    const content = JSON.parse(e.target.result);
-    for (const key of Object.keys(content)) localStorage.setItem(key, content[key]);
+
+    for (const key of Object.keys(content)) {
+      localStorage.setItem(key, content[key]);
+    }
+
    toast(this.props.toastLanguage.imported);
  }