feat: new welcome modal, refactor many things, various bug fixes, use material-ui v5 etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
2026-07-09 13:35:35 +02:00 · 2021-07-02 21:29:33 +01:00
parent c6b65f943a
commit cf36ced2a7
61 changed files with 782 additions and 324 deletions
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -6,7 +6,7 @@ export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const WEATHER_URL = 'https://weather.muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
-export const DDG_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
+export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';

 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
@@ -22,4 +22,4 @@ export const OFFLINE_IMAGES = 20;

 // Version
 export const BETA_VERSION = false;
-export const VERSION = '5.1.0'; 
+export const VERSION = '5.1.1'; 
--- a/src/modules/helpers/settings/index.js
+++ b/src/modules/helpers/settings/index.js
@@ -1,52 +1,9 @@
-import experimentalInit from './experimental';
+import experimentalInit from '../experimental';

-const defaultSettings = require('../default_settings.json');
-const languages = require('../languages.json');
-
-const saveFile = (data, filename = 'file') => {
-  if (typeof data === 'object') {
-    data = JSON.stringify(data, undefined, 4);
-  }
-
-  const blob = new Blob([data], { type: 'text/json' });
-  let e = document.createEvent('MouseEvents');
-  let a = document.createElement('a');
-
-  a.href = window.URL.createObjectURL(blob);
-  a.download = filename;
-  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
-
-  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-  a.dispatchEvent(e);
-};
+const defaultSettings = require('../../default_settings.json');
+const languages = require('../../languages.json');

 export default class SettingsFunctions {
-  static exportSettings() {
-    let settings = {};
-    Object.keys(localStorage).forEach((key) => {
-      settings[key] = localStorage.getItem(key);
-    });
-    saveFile(settings, 'mue-settings.json');
-    window.stats.postEvent('tab', 'Settings exported');
-  }
-
-  static setItem(key, value) {
-    const old = localStorage.getItem(key);
-    let val = true;
-
-    if (old !== null && !value) {
-      if (old === 'true') {
-        val = false;
-      }
-
-      if (old === 'false') {
-        val = true;
-      }
-    }
-
-    localStorage.setItem(key, val);
-  }
-
  static setDefaultSettings(reset) {
    localStorage.clear();
    defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
@@ -82,6 +39,8 @@ export default class SettingsFunctions {
      case 'auto':
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          document.body.classList.add('dark');
+        } else {
+          document.body.classList.remove('dark');
        }
        break;
      default:
@@ -96,7 +55,9 @@ export default class SettingsFunctions {
      custom.forEach((element) => {
        try {
          document.head.removeChild(document.getElementById(element));
-        } catch (e) {}
+        } catch (e) {
+           // Disregard exception
+        }
      });
    }

@@ -107,38 +68,24 @@ export default class SettingsFunctions {

    const font = localStorage.getItem('font');
    if (font) {
-      const google = localStorage.getItem('fontGoogle');
-
      let url = '';
-      let fontweight = '';
-      let fontstyle = '';
-
-      if (google === 'true') {
+      if (localStorage.getItem('fontGoogle') === 'true') {
        url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
      }

-      const fontWeight = localStorage.getItem('fontweight');
-      if (fontWeight) {
-        fontweight = `font-weight: ${fontWeight};`;
-      }
-
-      const fontStyle = localStorage.getItem('fontstyle');
-      if (fontStyle) {
-        fontstyle = `font-style: ${fontStyle};`;
-      }
-
      document.head.insertAdjacentHTML('beforeend', `
        <style id='customfont'>
          ${url}
          * {
-            font-family: '${font}', 'Lexend Deca', 'Montserrat' !important;
-            ${fontweight}
-            ${fontstyle}
+            font-family: '${font}', 'Lexend Deca', 'Montserrat', sans-serif !important;
+            font-weight: ${localStorage.getItem('fontweight')};
+            font-style: ${localStorage.getItem('fontstyle')};
          }
        </style>
      `);
    }

+    // everything below this either doesn't support hot reload (custom js) or shouldn't run on a hot reload event
    if (hotreload === true) {
      return;
    }
@@ -164,7 +111,7 @@ export default class SettingsFunctions {
 ██              ██      ██  ██████  ███████                ██ 
 ██                                                         ██ 
 ██                                                         ██                                                                                                 
- ██           Copyright 2018-2021 The Mue Authors           ██
+ ██           Copyright 2018-${new Date().getFullYear()} The Mue Authors           ██
 ██           GitHub: https://github.com/mue/mue            ██
 ██                                                         ██
 ██               Thank you for using Mue!                  ██
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -0,0 +1,40 @@
+import { toast } from 'react-toastify';
+
+const saveFile = (data, filename = 'file') => {
+  if (typeof data === 'object') {
+    data = JSON.stringify(data, undefined, 4);
+  }
+  
+  const blob = new Blob([data], { type: 'text/json' });
+  let e = document.createEvent('MouseEvents');
+  let a = document.createElement('a');
+  
+  a.href = window.URL.createObjectURL(blob);
+  a.download = filename;
+  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
+  
+  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  a.dispatchEvent(e);
+};
+
+export default class ModalSettingsFunctions {
+  static exportSettings() {
+    let settings = {};
+    Object.keys(localStorage).forEach((key) => {
+        settings[key] = localStorage.getItem(key);
+    });
+    saveFile(settings, 'mue-settings.json');
+    window.stats.postEvent('tab', 'Settings exported');
+  }
+
+  static importSettings(e) {
+    const content = JSON.parse(e.target.result);
+
+    Object.keys(content).forEach((key) => {
+      localStorage.setItem(key, content[key]);
+    });
+
+    toast(window.language.toasts.imported);
+    window.stats.postEvent('tab', 'Settings imported');
+  }
+}
--- a/src/modules/helpers/stats.js
+++ b/src/modules/helpers/stats.js
@@ -1,71 +1,73 @@
 export default class Stats {
-    constructor(id) {
-        this.id = id;
-        this.domain = window.constants.UMAMI_DOMAIN;
+  constructor(id) {
+    this.id = id;
+    this.url = window.constants.UMAMI_DOMAIN + '/api/collect';
+    this.offline = (localStorage.getItem('offlineMode') !== 'true');
+  }
+
+  async postEvent(type, name) {
+    const value = name.toLowerCase().replaceAll(' ', '-');
+
+    if (!this.offline) {
+      // umami
+      await fetch(this.url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          type: 'event',
+          payload: {
+            website: this.id,
+            url: '/',
+            event_type: type,
+            event_value: value
+          }
+        })
+      });
    }

-    async postEvent(type, name) {
-        const value = name.toLowerCase().replaceAll(' ', '-');
+    // local
+    let data = JSON.parse(localStorage.getItem('statsData'));
+    // tl;dr this creates the objects if they don't exist
+    // this really needs a cleanup at some point
+    if (!data[type] || !data[type][value]) {
+      if (!data[type]) {
+        data[type] = {};
+      }

-        await fetch(this.domain + '/api/collect', {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json',
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                type: 'event',
-                payload: {
-                    website: this.id,
-                    url: '/',
-                    event_type: type,
-                    event_value: value,
-                    hostname: 'localhost',
-                    language: localStorage.getItem('language').replace('_', '-'),
-                    screen: `${window.screen.width}x${window.screen.height}`
-                }
-            })
-        });
+      if (!data[type][value]) {
+        data[type][value] = 1;
+      }
+    } else {
+      data[type][value] = data[type][value] + 1;
+    }
+    localStorage.setItem('statsData', JSON.stringify(data));
+  }

-        let data = JSON.parse(localStorage.getItem('statsData'));
-        // tl;dr this creates the objects if they don't exist
-        // this really needs a cleanup at some point
-        if (!data[type] || !data[type][value]) {
-            if (!data[type]) {
-                data[type] = {};
-            }
-
-            if (!data[type][value]) {
-                data[type][value] = 1;
-            }
-        } else {
-            data[type][value] = data[type][value] + 1;
-        }
-        localStorage.setItem('statsData', JSON.stringify(data));
+  async tabLoad() {
+    if (!this.offline) {
+      // umami
+      await fetch(this.url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          type: 'pageview',
+          payload: {
+            website: this.id,
+            url: '/',
+            language: localStorage.getItem('language').replace('_', '-'),
+            screen: `${window.screen.width}x${window.screen.height}`
+          }
+        })
+      });
    }

-    async tabLoad() {
-        await fetch(this.domain + '/api/collect', {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json',
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                type: 'pageview',
-                payload: {
-                    website: this.id,
-                    url: '/',
-                    referrer: '',
-                    hostname: 'localhost',
-                    language: localStorage.getItem('language').replace('_', '-'),
-                    screen: `${window.screen.width}x${window.screen.height}`
-                }
-            })
-        });
-
-        let data = JSON.parse(localStorage.getItem('statsData'));
-        data['tabs-opened'] = data['tabs-opened'] + 1 || 1;        
-        localStorage.setItem('statsData', JSON.stringify(data));
-    }
+    // local
+    let data = JSON.parse(localStorage.getItem('statsData'));
+    data['tabs-opened'] = data['tabs-opened'] + 1 || 1;        
+    localStorage.setItem('statsData', JSON.stringify(data));
+  }
 }