diff --git a/.env b/.env new file mode 100644 index 00000000..7db6011f --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +GENERATE_SOURCEMAP=false +INLINE_RUNTIME_CHUNK=false \ No newline at end of file diff --git a/package.json b/package.json index 80fd3357..578cedca 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "homepage": "https://muetab.xyz", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "license": "BSD-3-Clause", - "version": "0.7.1", + "version": "3.0", "dependencies": { "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", @@ -31,7 +31,7 @@ }, "scripts": { "start": "react-scripts start", - "build": "env INLINE_RUNTIME_CHUNK=false && react-scripts build", + "build": "react-scripts build", "chrome": "cp manifest/chrome.json build/manifest.json", "firefox": "cp manifest/firefox.json build/manifest.json", "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/" diff --git a/public/index.html b/public/index.html index f00ffc6c..b615b75e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/App.jsx b/src/App.jsx index 6009e046..7e36876f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,12 +7,14 @@ import Quote from './components/Quote'; import Search from './components/Search'; import Credit from './components/Credit'; import Navbar from './components/Navbar'; -import Settings from './components/Settings'; -import Update from './components/Update'; import Toast from './components/Toast'; import Modal from 'react-modal'; import './scss/index.scss'; +const Settings = React.lazy(() => import('./components/Settings')); +const Update = React.lazy(() => import('./components/Update')); +const renderLoader = () =>
; + //* App export default class App extends React.Component { // Modal stuff @@ -25,15 +27,34 @@ export default class App extends React.Component { }; } + setDefaultSettings() { + localStorage.clear(); + + localStorage.setItem('time', true); + localStorage.setItem('greeting', true); + localStorage.setItem('background', true); + localStorage.setItem('quote', true); + localStorage.setItem('searchBar', true); + localStorage.setItem('blur', 0); + localStorage.setItem('copyButton', false); + localStorage.setItem('seconds', false); + localStorage.setItem('24hour', false); + localStorage.setItem('offlineMode', false); + localStorage.setItem('webp', false); + localStorage.setItem('events', true); + + // Set theme depending on user preferred + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true); + else localStorage.setItem('darkTheme', false); + + // Finally we set this to true so it doesn't run the function on every load + localStorage.setItem('firstRun', true); + window.location.reload(); + } + // Render all the components render() { - if (!localStorage.getItem('firstRun')) { - localStorage.setItem('time', true); - localStorage.setItem('greeting', true); - localStorage.setItem('background', true); - localStorage.setItem('quote', true); - localStorage.setItem('firstRun', true); - } + if (!localStorage.getItem('firstRun')) this.setDefaultSettings(); let modalClassList = 'Modal'; const darkTheme = localStorage.getItem('darkTheme'); @@ -43,20 +64,22 @@ export default class App extends React.Component {
-
+ this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> - - this.setState({ settingsModal: false })} /> - - - this.setState({ updateModal: false })} /> - + + + this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} /> + + + this.setState({ updateModal: false })} /> + +
); diff --git a/src/components/Background.jsx b/src/components/Background.jsx index fd7bcdc9..85aa56c8 100644 --- a/src/components/Background.jsx +++ b/src/components/Background.jsx @@ -27,6 +27,18 @@ export default class Background extends React.Component { const enabled = localStorage.getItem('offlineMode'); if (enabled === 'true') return this.doOffline(); + const colour = localStorage.getItem('customBackgroundColour'); + if (colour) { + document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon + return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`); // Set background and blur etc + } + + const custom = localStorage.getItem('customBackground'); + if (custom) { + document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon + return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc + } + try { // First we try and get an image from the API... let requestURL; const enabled = localStorage.getItem('webp'); diff --git a/src/components/Clock.jsx b/src/components/Clock.jsx index 6ee20308..babe806a 100644 --- a/src/components/Clock.jsx +++ b/src/components/Clock.jsx @@ -16,9 +16,7 @@ export default class Clock extends React.Component { const now = new Date(); let sec = ''; - if (localStorage.getItem('seconds') === 'true') { - sec = `:${('00' + now.getSeconds()).slice(-2)}`; - } + if (localStorage.getItem('seconds') === 'true') sec = `:${('00' + now.getSeconds()).slice(-2)}`; if (localStorage.getItem('24hour') === 'true') { this.setState({ diff --git a/src/components/Greeting.jsx b/src/components/Greeting.jsx index 592293db..ca0567b4 100644 --- a/src/components/Greeting.jsx +++ b/src/components/Greeting.jsx @@ -39,7 +39,7 @@ export default class Greeting extends React.Component { let data = localStorage.getItem('greetingName'); if (typeof data === 'string') { - data = data.replace(/\s/g, ''); + data = data.replace(/\s/g, ' '); if (data.length > 0) name = `, ${data}`; } diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx index 133ee180..af7cec4e 100644 --- a/src/components/Quote.jsx +++ b/src/components/Quote.jsx @@ -28,9 +28,7 @@ export default class Quote extends React.Component { try { // First we try and get a quote from the API... let data = await fetch('https://api.muetab.xyz/getQuote'); data = await data.json(); - if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes - this.doOffline(); - } + if (data.statusCode === 429) this.doOffline(); // If we hit the ratelimit, we fallback to local quotes this.setState({ quote: '"' + data.quote + '"', author: data.author @@ -42,9 +40,9 @@ export default class Quote extends React.Component { copyQuote() { copy(`${this.state.quote} - ${this.state.author}`); - var x = document.getElementById('toast'); - x.className = "show"; - setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); + let toast = document.getElementById('toast'); + toast.className = 'show'; + setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000); } componentDidMount() { @@ -54,18 +52,13 @@ export default class Quote extends React.Component { } render() { + let copy = this.copyQuote() }>; + const enabled = localStorage.getItem('copyButton'); + if (enabled === 'false') copy = ''; + return [

{`${this.state.quote}`}

, -

{this.state.author} this.copyQuote() }>

, +

{this.state.author} {copy}

, ]; } - - - - - - - - - } diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 99a0a3dc..07243db1 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -13,7 +13,7 @@ export default class Settings extends React.Component { localStorage.setItem(key, val); //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF'; - console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`); + // console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`); } toggleExtra(element, element2) { @@ -24,9 +24,43 @@ export default class Settings extends React.Component { saveStuff() { localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance localStorage.setItem('greetingName', document.getElementById('greetingName').value); + localStorage.setItem('customBackground', document.getElementById('customBackground').value); + if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value); window.location.reload(); } + resetItem(key) { + switch (key) { + case 'greetingName': + localStorage.setItem('greetingName', ''); + document.getElementById('greetingName').value = ''; + break; + case 'customBackgroundColour': + localStorage.setItem('customBackgroundColour', ''); + document.getElementById('customBackgroundColour').enabled = 'false'; + break; + case 'customBackground': + localStorage.setItem('customBackground', ''); + document.getElementById('customBackground').value = ''; + break; + case 'blur': + localStorage.setItem('blur', 0); + document.getElementById('blurRange').value = 0; + document.getElementById('blurAmount').innerText = '0'; + break; + default: + console.log('[ERROR] resetItem requires a key!'); + } + this.showToast(); + } + + showToast() { + let toast = document.getElementById('toast'); + toast.innerText = 'Reset successfully!'; + toast.className = 'show'; + setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000); + } + componentDidMount() { document.getElementById('greetingName').value = localStorage.getItem('greetingName'); @@ -50,6 +84,10 @@ export default class Settings extends React.Component { tag.checked = value; } } + + document.addEventListener('keyup', (event) => { + if (event.keyCode === 13) this.saveStuff(); + }); } render() { @@ -91,7 +129,7 @@ export default class Settings extends React.Component { @@ -102,7 +140,8 @@ export default class Settings extends React.Component {
  • + +