From 7bb48ebc8e41a79e005c349bc8b2e7c51d42e6e8 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Mon, 11 Apr 2022 22:57:07 +0100 Subject: [PATCH] fix: author loading before quote - Make author div not load if quote is empty - photoinformation taking too much of the screen - more transitions and consistent transitions - running prettier across all files Co-authored-by: David Ralph --- .DS_Store | Bin 6148 -> 6148 bytes .eslintrc.js | 2 +- prettierrc => .prettierrc | 8 +- README.md | 73 +- babel.config.js | 18 +- manifest/background-chrome.js | 2 +- manifest/background-firefox.js | 2 +- manifest/chrome.json | 2 +- public/index.html | 23 +- scripts/updatetranslations.js | 5 +- src/App.jsx | 18 +- .../helpers/autocomplete/Autocomplete.jsx | 32 +- src/components/helpers/preview/Preview.jsx | 6 +- .../helpers/sharemodal/sharemodal.scss | 91 +- src/components/helpers/tooltip/Tooltip.jsx | 12 +- src/components/modals/Modals.jsx | 23 +- .../modals/main/marketplace/Collection.jsx | 30 +- .../modals/main/marketplace/Lightbox.jsx | 6 +- .../main/marketplace/sections/Create.jsx | 353 +++--- src/components/modals/main/scss/index.scss | 4 +- .../main/scss/marketplace/modules/_item.scss | 1 - .../main/scss/modules/_tab-content.scss | 2 +- .../scss/settings/modules/_resetmodal.scss | 2 +- .../modals/main/settings/Checkbox.jsx | 24 +- .../modals/main/settings/Dropdown.jsx | 32 +- .../modals/main/settings/FileUpload.jsx | 9 +- .../modals/main/settings/KeybindInput.jsx | 48 +- src/components/modals/main/settings/Radio.jsx | 55 +- .../modals/main/settings/Switch.jsx | 24 +- src/components/modals/main/settings/Text.jsx | 46 +- .../modals/main/settings/sections/About.jsx | 21 +- .../main/settings/sections/Advanced.jsx | 100 +- .../main/settings/sections/Appearance.jsx | 127 +- .../main/settings/sections/Changelog.jsx | 56 +- .../modals/main/settings/sections/Date.jsx | 63 +- .../main/settings/sections/Experimental.jsx | 42 +- .../main/settings/sections/Greeting.jsx | 64 +- .../main/settings/sections/Keybinds.jsx | 147 ++- .../modals/main/settings/sections/Message.jsx | 5 +- .../main/settings/sections/QuickLinks.jsx | 36 +- .../main/settings/sections/Reminder.jsx | 23 +- .../modals/main/settings/sections/Search.jsx | 100 +- .../modals/main/settings/sections/Weather.jsx | 202 +++- .../sections/background/Background.jsx | 252 ++-- .../settings/sections/background/Colour.jsx | 108 +- .../settings/sections/background/Custom.jsx | 116 +- .../sections/background/CustomURLModal.jsx | 18 +- src/components/modals/main/tabs/Addons.jsx | 14 +- .../modals/main/tabs/Marketplace.jsx | 18 +- src/components/modals/main/tabs/Settings.jsx | 90 +- .../modals/main/tabs/backend/Tab.jsx | 131 +- .../modals/main/tabs/backend/Tabs.jsx | 58 +- .../modals/welcome/WelcomeSections.jsx | 209 ++-- src/components/widgets/Widgets.jsx | 73 +- .../background/scss/_photoinformation.scss | 14 +- src/components/widgets/navbar/Navbar.jsx | 18 +- .../widgets/navbar/scss/_notes.scss | 1 - src/components/widgets/navbar/scss/_todo.scss | 1 - .../widgets/quicklinks/quicklinks.scss | 1 - src/components/widgets/quote/Quote.jsx | 70 +- src/components/widgets/quote/quote.scss | 11 + src/components/widgets/reminder/Reminder.jsx | 41 +- .../search/autocomplete_providers.json | 1 - src/components/widgets/time/Clock.jsx | 106 +- src/components/widgets/time/Date.jsx | 91 +- src/components/widgets/weather/Weather.jsx | 138 +-- .../widgets/weather/WeatherIcon.jsx | 38 +- .../widgets/weather/WindDirectionIcon.jsx | 38 +- src/index.js | 4 +- src/modules/constants.js | 6 +- src/modules/helpers/background/rgbToHsv.js | 4 +- src/modules/helpers/background/setRgba.js | 2 +- src/modules/helpers/background/widget.js | 56 +- src/modules/helpers/date.js | 6 +- src/modules/helpers/eventbus.js | 8 +- src/modules/helpers/experimental.js | 3 +- src/modules/helpers/marketplace.js | 19 +- src/modules/helpers/settings/index.js | 20 +- src/modules/helpers/settings/modals.js | 76 +- src/modules/helpers/stats.js | 2 +- src/modules/variables.js | 4 +- src/scss/_variables.scss | 2 +- src/translations/id_ID.json | 1063 ++++++++--------- webpack.config.js | 83 +- 84 files changed, 2630 insertions(+), 2323 deletions(-) rename prettierrc => .prettierrc (63%) diff --git a/.DS_Store b/.DS_Store index de931c6c004a24794d5162b55e27fe665e96227a..1a3312fc3ee39bab9879dcecd51586b028b1627b 100644 GIT binary patch delta 320 zcmZoMXfc@JFDk&mz`)4B0HjKQFq0vbp@^YqvmnQEW_FMiH-p~fE>_dYf-G9~Yz&DE z#Xy(}R9Ku;UR;orlb-}svm>b>C$qT3z~CAq6Eh1d8#@O(2RBD-a7KQ4a7kiGX|Ypc zQ8b7blAoWG1Y;*Ag=MCe#|wx!=jW9qX6B_9fi+~Nqym-1glFcZ z=sz&vh0-vp8^}QMR9SFQUQT{qI#3*>ho2z{=;b7!hjSS87&d#dI52MB%NoJBnVsV= FKLE&_PSOAX delta 63 zcmZoMXfc@JFUrTjz`)4BAi%&-!cgp)lb@WFlb^I%kYhPBBj02v7X8hMtbUA)T$6=Z TOgC?23uBzv@M$wU$6tN`;64!f diff --git a/.eslintrc.js b/.eslintrc.js index 59e8ed8b..861ebe4e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,4 @@ module.exports = { extends: 'react-app', - parser: '@babel/eslint-parser' + parser: '@babel/eslint-parser', }; diff --git a/prettierrc b/.prettierrc similarity index 63% rename from prettierrc rename to .prettierrc index ef0350af..e09edeb6 100644 --- a/prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ -{ +{ "printWidth": 100, "trailingComma": "all", - "tabWidth": 2, - "semi": true, + "tabWidth": 2, + "semi": true, "singleQuote": true - } \ No newline at end of file +} diff --git a/README.md b/README.md index bcfe7d5e..27bccac5 100644 --- a/README.md +++ b/README.md @@ -12,76 +12,95 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
## NOTICE + This is the branch for the next version of Mue, 7.0. All development is occuring in this branch which will be merged into main when it is finished. If you want the current code, see the main branch. ## Table of contents -* [Screenshots](#screenshot) -* [Features](#features) - * [Planned Features](#planned-features) -* [Installation](#installation) - * [Chrome](#chrome) - * [Firefox](#firefox) - * [Edge Chromium](#edge-chromium) - * [Whale](#whale) - * [Other](#other) -* [Contributing](#development) - * [Translations](#translations) -* [Credits](#credits) - * [Developers](#developers) - * [Translators](#translators) - * [Contributors](#contributors) - * [Resources](#resources) + +- [Screenshots](#screenshot) +- [Features](#features) + - [Planned Features](#planned-features) +- [Installation](#installation) + - [Chrome](#chrome) + - [Firefox](#firefox) + - [Edge Chromium](#edge-chromium) + - [Whale](#whale) + - [Other](#other) +- [Contributing](#development) + - [Translations](#translations) +- [Credits](#credits) + - [Developers](#developers) + - [Translators](#translators) + - [Contributors](#contributors) + - [Resources](#resources) + ## Screenshots + ![Screenshot](assets/screenshot.webp) ![Settings Modal](assets/screenshot2.webp) ## Features -* Fast and free -* Supports multiple browsers -* Actively developed and open source -* Automatically updating [API](https://github.com/mue/api) with new photos, quotes and offline mode -* Widgets such as search bar, weather, quick links, clock, date, quote, greeting -* Settings - enable/disable various features and customise parts of Mue -* Navbar with copy button, favourite background, notes feature etc -* [Marketplace](https://github.com/mue/marketplace) - download custom photo packs, quote packs and preset settings made by the community + +- Fast and free +- Supports multiple browsers +- Actively developed and open source +- Automatically updating [API](https://github.com/mue/api) with new photos, quotes and offline mode +- Widgets such as search bar, weather, quick links, clock, date, quote, greeting +- Settings - enable/disable various features and customise parts of Mue +- Navbar with copy button, favourite background, notes feature etc +- [Marketplace](https://github.com/mue/marketplace) - download custom photo packs, quote packs and preset settings made by the community ### Planned Features + Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). ## Installation -*A demo of the tab can be found [here](https://demo.muetab.com), and the latest GitHub commit build [here](https://mue.vercel.app)* + +_A demo of the tab can be found [here](https://demo.muetab.com), and the latest GitHub commit build [here](https://mue.vercel.app)_ + ### Chrome + [![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
[Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid) ### Firefox + [![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
[Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue) ### Edge (Chromium) + [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja) ### Whale + [Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc) ### Other + [GitHub Releases](https://github.com/mue/mue/releases) ## Development + Please see the [documentation](https://docs.muetab.com/development#mue-tab). ### Translations + Please see the [documentation](https://docs.muetab.com/translations). ## Credits + ### Developers + [David Ralph](https://github.com/davidcralph) - Lead development, photographer
[Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer
[Isaac Saunders](https://github.com/eartharoid) - QA, development, photographer
[Wessel Tip](https://github.com/Wessel) - Development
+ ### Translators + [Wessel Tip](https://github.com/Wessel), [Heimen Stoffels](https://github.com/Vistaus) - Dutch
[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French
[Anders](https://github.com/FuryingFox) - Norwegian
@@ -90,10 +109,14 @@ Please see the [documentation](https://docs.muetab.com/translations). [Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified)
[FreeFun](https://github.com/xXFreeFunXx) - German
[Aksal](https://github.com/aksalsf) - Indonesian
+ ### Contributors + Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs. And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)! + ### Resources + [Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode
[Undraw](https://undraw.co) - Welcome modal images diff --git a/babel.config.js b/babel.config.js index 0f2c9a3f..95baeec5 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,16 @@ module.exports = { - presets: ['@babel/preset-env', ['@babel/preset-react', { - runtime: 'automatic' - }]], - plugins: ['@babel/transform-runtime', '@babel/plugin-transform-react-inline-elements', '@babel/plugin-transform-react-constant-elements'] + presets: [ + '@babel/preset-env', + [ + '@babel/preset-react', + { + runtime: 'automatic', + }, + ], + ], + plugins: [ + '@babel/transform-runtime', + '@babel/plugin-transform-react-inline-elements', + '@babel/plugin-transform-react-constant-elements', + ], }; diff --git a/manifest/background-chrome.js b/manifest/background-chrome.js index 569cc7c9..d53119bd 100644 --- a/manifest/background-chrome.js +++ b/manifest/background-chrome.js @@ -4,7 +4,7 @@ chrome.runtime.setUninstallURL('https://muetab.com/uninstall'); chrome.runtime.onInstalled.addListener((details) => { if (details.reason === 'install') { chrome.tabs.create({ - url: chrome.runtime.getURL('index.html') + url: chrome.runtime.getURL('index.html'), }); } }); diff --git a/manifest/background-firefox.js b/manifest/background-firefox.js index 286b64a1..d4d7c792 100644 --- a/manifest/background-firefox.js +++ b/manifest/background-firefox.js @@ -4,7 +4,7 @@ browser.runtime.setUninstallURL('https://muetab.com/uninstall'); browser.runtime.onInstalled.addListener((details) => { if (details.reason === 'install') { browser.tabs.create({ - url: browser.runtime.getURL('index.html') + url: browser.runtime.getURL('index.html'), }); } }); diff --git a/manifest/chrome.json b/manifest/chrome.json index dbb405c9..936aa40f 100644 --- a/manifest/chrome.json +++ b/manifest/chrome.json @@ -20,6 +20,6 @@ "content_security_policy": "script-src 'self' https://api.bing.com https://www.google.com; object-src 'self'", "background": { "persistent": false, - "scripts": [ "background-chrome.js" ] + "scripts": ["background-chrome.js"] } } diff --git a/public/index.html b/public/index.html index f80906d9..777aaf91 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,18 @@ - + - - - - + + + + New Tab -
+
diff --git a/scripts/updatetranslations.js b/scripts/updatetranslations.js index 0c77d415..448928fe 100644 --- a/scripts/updatetranslations.js +++ b/scripts/updatetranslations.js @@ -7,7 +7,10 @@ fs.readdirSync('../src/translations').forEach((file) => { return; } - const newdata = merge(require('../src/translations/en_GB.json'), require('../src/translations/' + file)); + const newdata = merge( + require('../src/translations/en_GB.json'), + require('../src/translations/' + file), + ); fs.writeFileSync('../src/translations/' + file, JSON.stringify(newdata, null, 2)); // add new line fs.appendFileSync('../src/translations/' + file, '\n'); diff --git a/src/App.jsx b/src/App.jsx index fafea95e..d286dcc2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,7 +18,7 @@ export default class App extends PureComponent { if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) { moveSettings(); window.location.reload(); - } + } loadSettings(); @@ -34,11 +34,17 @@ export default class App extends PureComponent { render() { return ( <> - {(localStorage.getItem('background') === 'true') ? : null} - -
- - + {localStorage.getItem('background') === 'true' ? : null} + +
+ +
); diff --git a/src/components/helpers/autocomplete/Autocomplete.jsx b/src/components/helpers/autocomplete/Autocomplete.jsx index f0fc7511..87db8d7f 100644 --- a/src/components/helpers/autocomplete/Autocomplete.jsx +++ b/src/components/helpers/autocomplete/Autocomplete.jsx @@ -12,20 +12,22 @@ export default class Autocomplete extends PureComponent { this.state = { filtered: [], input: '', - autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true') + autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true', }; } onChange = (e) => { if (this.state.autocompleteDisabled) { return this.setState({ - input: e.target.value + input: e.target.value, }); } this.setState({ - filtered: this.props.suggestions.filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1), - input: e.target.value + filtered: this.props.suggestions.filter( + (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1, + ), + input: e.target.value, }); this.props.onChange(e.target.value); @@ -34,14 +36,14 @@ export default class Autocomplete extends PureComponent { onClick = (e) => { this.setState({ filtered: [], - input: e.target.innerText + input: e.target.innerText, }); this.props.onClick({ preventDefault: () => e.preventDefault(), target: { - value: e.target.innerText - } + value: e.target.innerText, + }, }); }; @@ -49,7 +51,7 @@ export default class Autocomplete extends PureComponent { EventBus.on('refresh', (data) => { if (data === 'search') { this.setState({ - autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true') + autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true', }); } }); @@ -65,7 +67,7 @@ export default class Autocomplete extends PureComponent { // length will only be > 0 if enabled if (this.state.filtered.length > 0 && this.state.input.length > 0) { autocomplete = ( -
+
{this.state.filtered.map((suggestion) => (
{suggestion} @@ -76,8 +78,16 @@ export default class Autocomplete extends PureComponent { } return ( -
- +
+ {autocomplete}
); diff --git a/src/components/helpers/preview/Preview.jsx b/src/components/helpers/preview/Preview.jsx index b78ddd60..09a8bb2c 100644 --- a/src/components/helpers/preview/Preview.jsx +++ b/src/components/helpers/preview/Preview.jsx @@ -6,9 +6,9 @@ export default function Preview(props) { const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); return ( -
- {getMessage('modals.main.settings.reminder.title')} - {getMessage('modals.welcome.preview.description')} +
+ {getMessage('modals.main.settings.reminder.title')} + {getMessage('modals.welcome.preview.description')}
); diff --git a/src/components/helpers/sharemodal/sharemodal.scss b/src/components/helpers/sharemodal/sharemodal.scss index a9784a12..92f84c49 100644 --- a/src/components/helpers/sharemodal/sharemodal.scss +++ b/src/components/helpers/sharemodal/sharemodal.scss @@ -1,59 +1,58 @@ @import '../../../scss/variables'; .shareModal { - @extend %tabText; + @extend %tabText; + display: flex; + flex-flow: column; + gap: 15px; + padding: 15px; + @include themed() { + background: t($modal-background); + } + .buttons { + justify-content: space-between; display: flex; - flex-flow: column; gap: 15px; - padding: 15px; + } + button { + place-items: center; + display: grid; + @include basicIconButton(11px, 1.3rem, modal); + } + .copy { + display: flex; + flex-flow: row; + gap: 15px; + } + input[type='text'] { @include themed() { - background: t($modal-background); + background: t($modal-sidebar); + border-radius: t($borderRadius); + box-shadow: 0 0 0 4px t($modal-sidebarActive); + padding: 11px; + flex: 1; + color: t($color); } - .buttons { - justify-content: space-between; - display: flex; - gap: 15px; - } - button { - place-items: center; - display: grid; - @include basicIconButton(11px, 1.3rem, modal); - } - .copy { - display: flex; - flex-flow: row; - gap: 15px; - } - input[type='text'] { + border: none; + outline: none; + } + .close { + padding: 15px; + place-items: center; + display: grid; + cursor: pointer; + &:hover { @include themed() { background: t($modal-sidebar); border-radius: t($borderRadius); - box-shadow: 0 0 0 4px t($modal-sidebarActive); - padding: 11px; - flex: 1; - color: t($color); - } - border: none; - outline: none; - } - .close { - padding: 15px; - place-items: center; - display: grid; - cursor: pointer; - &:hover { - @include themed() { - background: t($modal-sidebar); - border-radius: t($borderRadius); - } } } } - - .shareHeader { - display: flex; - flex-flow: row; - justify-content: space-between; - align-items: center; - } - \ No newline at end of file +} + +.shareHeader { + display: flex; + flex-flow: row; + justify-content: space-between; + align-items: center; +} diff --git a/src/components/helpers/tooltip/Tooltip.jsx b/src/components/helpers/tooltip/Tooltip.jsx index dd18ec9b..07442702 100644 --- a/src/components/helpers/tooltip/Tooltip.jsx +++ b/src/components/helpers/tooltip/Tooltip.jsx @@ -1,11 +1,11 @@ -import { useState } from "react"; -import { useFloating, flip, offset, shift } from "@floating-ui/react-dom"; -import "./tooltip.scss"; +import { useState } from 'react'; +import { useFloating, flip, offset, shift } from '@floating-ui/react-dom'; +import './tooltip.scss'; export default function Tooltip({ children, title, style, placement }) { const [showTooltip, setShowTooltip] = useState(false); const { x, y, reference, floating, strategy } = useFloating({ - placement: placement || "bottom", + placement: placement || 'bottom', middleware: [flip(), offset(15), shift()], }); @@ -25,8 +25,8 @@ export default function Tooltip({ children, title, style, placement }) { ref={floating} style={{ position: strategy, - top: y ?? "", - left: x ?? "", + top: y ?? '', + left: x ?? '', }} className="tooltipTitle" > diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index 029f8708..56dce8c0 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -93,19 +93,16 @@ export default class Modals extends PureComponent {
this.toggleModal('mainModal', false)} /> this.closeWelcome()} - isOpen={this.state.welcomeModal} - className="Modal welcomemodal mainModal" - overlayClassName="Overlay welcomeoverlay" - shouldCloseOnOverlayClick={false} - ariaHideApp={false} - > - this.closeWelcome()} - modalSkip={() => this.previewWelcome()} - /> - + closeTimeoutMS={300} + onRequestClose={() => this.closeWelcome()} + isOpen={this.state.welcomeModal} + className="Modal welcomemodal mainModal" + overlayClassName="Overlay welcomeoverlay" + shouldCloseOnOverlayClick={false} + ariaHideApp={false} + > + this.closeWelcome()} modalSkip={() => this.previewWelcome()} /> + {this.state.preview ? window.location.reload()} /> : null} {/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/} diff --git a/src/components/modals/main/marketplace/Collection.jsx b/src/components/modals/main/marketplace/Collection.jsx index 526c64b9..3c62868a 100644 --- a/src/components/modals/main/marketplace/Collection.jsx +++ b/src/components/modals/main/marketplace/Collection.jsx @@ -1,26 +1,24 @@ -import variables from "modules/variables"; +import variables from 'modules/variables'; export default function Collection({ items, toggleFunction }) { return [ -
-
-
+
+
+
Star Wars
- Star Wars Collection - A Collection of stuff inspired by the film franchise star wars.. - -
-
, -
+ Star Wars Collection + + A Collection of stuff inspired by the film franchise star wars.. + + +
+
, +
{items.map((item) => ( -
toggleFunction(item)} - key={item.name} - > +
toggleFunction(item)} key={item.name}> icon {item.author}
-
+
1
diff --git a/src/components/modals/main/marketplace/Lightbox.jsx b/src/components/modals/main/marketplace/Lightbox.jsx index 9f6cba49..a60f9f78 100644 --- a/src/components/modals/main/marketplace/Lightbox.jsx +++ b/src/components/modals/main/marketplace/Lightbox.jsx @@ -5,8 +5,10 @@ export default function Lightbox({ modalClose, img }) { return ( <> - × - Item screenshot + + × + + Item screenshot ); } diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx index 07ea704e..a72b04be 100644 --- a/src/components/modals/main/marketplace/sections/Create.jsx +++ b/src/components/modals/main/marketplace/sections/Create.jsx @@ -1,5 +1,5 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; import { MdSettings as Settings, MdOutlineInsertPhoto as Photos, @@ -9,18 +9,18 @@ import { MdArrowBack, MdDownload, MdOpenInNew, -} from "react-icons/md"; -import { TextField } from "@mui/material"; -import { toast } from "react-toastify"; -import SettingsItem from "../../../main/settings/SettingsItem"; +} from 'react-icons/md'; +import { TextField } from '@mui/material'; +import { toast } from 'react-toastify'; +import SettingsItem from '../../../main/settings/SettingsItem'; -import { saveFile } from "modules/helpers/settings/modals"; -import Tooltip from "../../../../helpers/tooltip/Tooltip"; +import { saveFile } from 'modules/helpers/settings/modals'; +import Tooltip from '../../../../helpers/tooltip/Tooltip'; -import FileUpload from "../../settings/FileUpload"; -import Dropdown from "../../settings/Dropdown"; +import FileUpload from '../../settings/FileUpload'; +import Dropdown from '../../settings/Dropdown'; -import "../../../welcome/welcome.scss"; +import '../../../welcome/welcome.scss'; export default class Create extends PureComponent { constructor() { @@ -28,18 +28,18 @@ export default class Create extends PureComponent { this.state = { currentTab: 1, addonMetadata: { - name: "", - description: "", - type: "", - version: "", - author: "", - icon_url: "", - screenshot_url: "", + name: '', + description: '', + type: '', + version: '', + author: '', + icon_url: '', + screenshot_url: '', }, - addonData: "", + addonData: '', settingsClasses: { - current: "toggle lightTheme", - json: "toggle lightTheme", + current: 'toggle lightTheme', + json: 'toggle lightTheme', }, }; } @@ -64,17 +64,17 @@ export default class Create extends PureComponent { let settings = {}; Object.keys(data).forEach((key) => { if ( - key === "statsData" || - key === "firstRun" || - key === "showWelcome" || - key === "language" || - key === "installed" || - key === "stats" || - key === "backup_settings" || - key === "showReminder" || - key === "experimental" || - key === "debugtimeout" || - key === "quotelanguage" + key === 'statsData' || + key === 'firstRun' || + key === 'showWelcome' || + key === 'language' || + key === 'installed' || + key === 'stats' || + key === 'backup_settings' || + key === 'showReminder' || + key === 'experimental' || + key === 'debugtimeout' || + key === 'quotelanguage' ) { return; } @@ -84,14 +84,12 @@ export default class Create extends PureComponent { this.setState({ addonData: settings, settingsClasses: { - current: input ? "toggle lightTheme active" : "toggle lightTheme", - json: input ? "toggle lightTheme active" : "toggle lightTheme", + current: input ? 'toggle lightTheme active' : 'toggle lightTheme', + json: input ? 'toggle lightTheme active' : 'toggle lightTheme', }, }); - toast( - variables.language.getMessage(variables.languagecode, "toasts.imported") - ); + toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); } updateQuotePackType(type) { @@ -104,7 +102,7 @@ export default class Create extends PureComponent { icon_url: this.state.addonMetadata.icon_url, screenshot_url: this.state.addonMetadata.screenshot_url, }; - if (type === "quotePack") { + if (type === 'quotePack') { this.setState({ addonMetadata: { addonMetadata, @@ -117,9 +115,9 @@ export default class Create extends PureComponent { addonMetadata, }, addonData: { - url: "", - name: "", - author: "", + url: '', + name: '', + author: '', }, }); } @@ -128,45 +126,38 @@ export default class Create extends PureComponent { updateQuotePackAPI(type, data) { this.setState({ addonData: { - url: type === "url" ? data : this.state.addonData.url || "", - name: type === "name" ? data : this.state.addonData.name || "", - author: type === "author" ? data : this.state.addonData.author || "", + url: type === 'url' ? data : this.state.addonData.url || '', + name: type === 'name' ? data : this.state.addonData.name || '', + author: type === 'author' ? data : this.state.addonData.author || '', }, }); } importQuotes() { this.setState({ - addonData: JSON.parse(localStorage.getItem("customQuote")) || [], + addonData: JSON.parse(localStorage.getItem('customQuote')) || [], }); - toast( - variables.language.getMessage(variables.languagecode, "toasts.imported") - ); + toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); } importPhotos() { let data = []; try { - const current = - JSON.parse(localStorage.getItem("customBackground")) || []; + const current = JSON.parse(localStorage.getItem('customBackground')) || []; data = current.map((item) => { return { - photographer: "???", - location: "???", + photographer: '???', + location: '???', url: { default: item, }, }; }); - toast( - variables.language.getMessage(variables.languagecode, "toasts.imported") - ); + toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); } catch (e) { console.log(e); - toast( - variables.language.getMessage(variables.languagecode, "toasts.error") - ); + toast(variables.language.getMessage(variables.languagecode, 'toasts.error')); } this.setState({ @@ -180,23 +171,20 @@ export default class Create extends PureComponent { name: this.state.addonMetadata.name, description: this.state.addonMetadata.description, type: - this.state.addonMetadata.type === "quote_api" - ? "quotes" - : this.state.addonMetadata.type, + this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type, version: this.state.addonMetadata.version, author: this.state.addonMetadata.author, icon_url: this.state.addonMetadata.icon_url, screenshot_url: this.state.addonMetadata.screenshot_url, [this.state.addonMetadata.type]: this.state.addonData, }, - this.state.addonMetadata.name + ".json" + this.state.addonMetadata.name + '.json', ); } render() { let tabContent; - const getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const chooseType = ( <> @@ -204,8 +192,7 @@ export default class Create extends PureComponent {
Help Centre - Home of all docs and guides on creating addons for Mue's - marketplace + Home of all docs and guides on creating addons for Mue's marketplace
-
this.changeTab(2, "photos")} - > +
this.changeTab(2, 'photos')}> - {getMessage("modals.main.marketplace.photo_packs")} + {getMessage('modals.main.marketplace.photo_packs')}
-
this.changeTab(2, "quotes")} - > +
this.changeTab(2, 'quotes')}> - {getMessage("modals.main.marketplace.quote_packs")} + {getMessage('modals.main.marketplace.quote_packs')}
-
this.changeTab(2, "settings")} - > +
this.changeTab(2, 'settings')}> - - {getMessage("modals.main.marketplace.preset_settings")} - + {getMessage('modals.main.marketplace.preset_settings')}
@@ -256,19 +232,13 @@ export default class Create extends PureComponent { const setMetadata = (data, type) => { this.setState({ addonMetadata: { - name: type === "name" ? data : this.state.addonMetadata.name, - description: - type === "description" - ? data - : this.state.addonMetadata.description, - version: type === "version" ? data : this.state.addonMetadata.version, - author: type === "author" ? data : this.state.addonMetadata.author, - icon_url: - type === "icon_url" ? data : this.state.addonMetadata.icon_url, + name: type === 'name' ? data : this.state.addonMetadata.name, + description: type === 'description' ? data : this.state.addonMetadata.description, + version: type === 'version' ? data : this.state.addonMetadata.version, + author: type === 'author' ? data : this.state.addonMetadata.author, + icon_url: type === 'icon_url' ? data : this.state.addonMetadata.icon_url, screenshot_url: - type === "screenshot_url" - ? data - : this.state.addonMetadata.screenshot_url, + type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url, type: this.state.addonMetadata.type, }, }); @@ -278,7 +248,7 @@ export default class Create extends PureComponent { <>
- + Create {this.state.addonMetadata.type} Pack Description of what is being made @@ -288,120 +258,97 @@ export default class Create extends PureComponent {
- + setMetadata(e.target.value, "name")} + onInput={(e) => setMetadata(e.target.value, 'name')} /> - + setMetadata(e.target.value, "version")} + onInput={(e) => setMetadata(e.target.value, 'version')} /> - + setMetadata(e.target.value, "author")} + onInput={(e) => setMetadata(e.target.value, 'author')} /> - + setMetadata(e.target.value, "icon_url")} + onInput={(e) => setMetadata(e.target.value, 'icon_url')} /> - + setMetadata(e.target.value, "screenshot_url")} + onInput={(e) => setMetadata(e.target.value, 'screenshot_url')} /> - + setMetadata(e.target.value, "description")} + onInput={(e) => setMetadata(e.target.value, 'description')} />
); // settings - const nextSettingsDisabled = this.state.addonData === ""; + const nextSettingsDisabled = this.state.addonData === ''; const importSettings = ( <> - +
-
+
this.importSettings()} > - - {getMessage("modals.main.addons.create.settings.current")} - + {getMessage('modals.main.addons.create.settings.current')}
document.getElementById("file-input").click()} + onClick={() => document.getElementById('file-input').click()} > - - {getMessage("modals.main.addons.create.settings.json")} - + {getMessage('modals.main.addons.create.settings.json')}
@@ -411,20 +358,15 @@ export default class Create extends PureComponent { id="file-input" type="settings" accept="application/json" - loadFunction={(e) => - this.importSettings(JSON.parse(e.target.result)) - } + loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
-
@@ -432,68 +374,68 @@ export default class Create extends PureComponent { // quotes const nextQuotesDisabled = !( - (this.state.addonMetadata.type === "quote_api" && - this.state.addonData.url !== "" && - this.state.addonData.name !== "" && - this.state.addonData.author !== "") || - (this.state.addonMetadata.type === "quotes" && - this.state.addonData.quotes !== "") + (this.state.addonMetadata.type === 'quote_api' && + this.state.addonData.url !== '' && + this.state.addonData.name !== '' && + this.state.addonData.author !== '') || + (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '') ); const addQuotes = ( <> - + this.updateQuotePackType(e)} > - {this.state.addonMetadata.type === "quote_api" ? ( + {this.state.addonMetadata.type === 'quote_api' ? ( <> this.updateQuotePack(e.target.value, "url")} + onInput={(e) => this.updateQuotePack(e.target.value, 'url')} /> this.updateQuotePack(e.target.value, "name")} + onInput={(e) => this.updateQuotePack(e.target.value, 'name')} /> this.updateQuotePack(e.target.value, "author")} + onInput={(e) => this.updateQuotePack(e.target.value, 'author')} />

) : ( - +
this.importQuotes()} className="toggle lightTheme" - style={{ width: "60%", margin: "10px 0 10px 0" }} + style={{ width: '60%', margin: '10px 0 10px 0' }} > - - {getMessage("modals.main.addons.create.settings.current")} - + {getMessage('modals.main.addons.create.settings.current')}
@@ -501,13 +443,10 @@ export default class Create extends PureComponent { )}
-
@@ -515,26 +454,24 @@ export default class Create extends PureComponent { // photos const nextPhotosDisabled = !( - this.state.addonData.photos !== "" && this.state.addonData.photos !== [] + this.state.addonData.photos !== '' && this.state.addonData.photos !== [] ); const addPhotos = ( <>
this.importPhotos()} className="toggle lightTheme" - style={{ width: "60%", margin: "10px 0 10px 0" }} + style={{ width: '60%', margin: '10px 0 10px 0' }} > - - {getMessage("modals.main.addons.create.settings.current")} - + {getMessage('modals.main.addons.create.settings.current')}
@@ -542,13 +479,10 @@ export default class Create extends PureComponent {
-
@@ -558,12 +492,11 @@ export default class Create extends PureComponent { <>
- + Next step, Publishing... - Visit the Mue Knowledgebase on information on how to publish your - newly created addon. + Visit the Mue Knowledgebase on information on how to publish your newly created addon.
@@ -591,14 +522,14 @@ export default class Create extends PureComponent {
{/*
)} - - {getMessage("modals.main.addons.create.other_title")} - + {getMessage('modals.main.addons.create.other_title')}
{tabContent} diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 2f590554..dd6ab8c9 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -146,7 +146,7 @@ h5 { gap: 15px; align-items: center; &:hover { - opacity: .8; + opacity: 0.8; cursor: pointer; } } @@ -187,7 +187,7 @@ h5 { gap: 15px; align-items: center; &:hover { - opacity: .8; + opacity: 0.8; cursor: pointer; } } diff --git a/src/components/modals/main/scss/marketplace/modules/_item.scss b/src/components/modals/main/scss/marketplace/modules/_item.scss index 7dd11a3f..483c3934 100644 --- a/src/components/modals/main/scss/marketplace/modules/_item.scss +++ b/src/components/modals/main/scss/marketplace/modules/_item.scss @@ -3,7 +3,6 @@ margin-left: 20px; } - p.description { margin-top: 0; max-width: 800px; diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss index ee2215ad..ab596911 100644 --- a/src/components/modals/main/scss/modules/_tab-content.scss +++ b/src/components/modals/main/scss/modules/_tab-content.scss @@ -102,4 +102,4 @@ table { svg { font-size: 1.5rem !important; } -} \ No newline at end of file +} diff --git a/src/components/modals/main/scss/settings/modules/_resetmodal.scss b/src/components/modals/main/scss/settings/modules/_resetmodal.scss index f158f284..74c49f2a 100644 --- a/src/components/modals/main/scss/settings/modules/_resetmodal.scss +++ b/src/components/modals/main/scss/settings/modules/_resetmodal.scss @@ -26,4 +26,4 @@ display: flex; flex-flow: row; justify-content: space-around; -} \ No newline at end of file +} diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx index 4c68cf64..efe7bfec 100644 --- a/src/components/modals/main/settings/Checkbox.jsx +++ b/src/components/modals/main/settings/Checkbox.jsx @@ -8,23 +8,26 @@ export default class Checkbox extends PureComponent { constructor(props) { super(props); this.state = { - checked: (localStorage.getItem(this.props.name) === 'true') + checked: localStorage.getItem(this.props.name) === 'true', }; } handleChange = () => { - const value = (this.state.checked !== true); + const value = this.state.checked !== true; localStorage.setItem(this.props.name, value); this.setState({ - checked: value + checked: value, }); if (this.props.onChange) { this.props.onChange(value); } - variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`); + variables.stats.postEvent( + 'setting', + `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`, + ); if (this.props.element) { if (!document.querySelector(this.props.element)) { @@ -34,13 +37,22 @@ export default class Checkbox extends PureComponent { } EventBus.dispatch('refresh', this.props.category); - } + }; render() { return ( <> } + control={ + + } label={this.props.text} /> diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index f33081e1..f77f0960 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -9,7 +9,7 @@ export default class Dropdown extends PureComponent { super(props); this.state = { value: localStorage.getItem(this.props.name) || this.props.children[0].props.value, - title: '' + title: '', }; this.dropdown = createRef(); } @@ -24,13 +24,13 @@ export default class Dropdown extends PureComponent { variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`); this.setState({ - value + value, }); - + if (!this.props.noSetting) { localStorage.setItem(this.props.name, value); } - + if (this.props.onChange) { this.props.onChange(value); } @@ -43,7 +43,7 @@ export default class Dropdown extends PureComponent { } EventBus.dispatch('refresh', this.props.category); - } + }; render() { const id = 'dropdown' + this.props.name; @@ -52,10 +52,24 @@ export default class Dropdown extends PureComponent { return ( {label} - + {this.props.manual + ? this.props.children + : this.props.children.map((e, index) => { + return e ? ( + + {e.props ? e.props.children : ''} + + ) : null; + })} ); diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx index 9670d1fb..444fb386 100644 --- a/src/components/modals/main/settings/FileUpload.jsx +++ b/src/components/modals/main/settings/FileUpload.jsx @@ -28,6 +28,13 @@ export default class FileUpload extends PureComponent { } render() { - return ; + return ( + + ); } } diff --git a/src/components/modals/main/settings/KeybindInput.jsx b/src/components/modals/main/settings/KeybindInput.jsx index e3d536ca..dcf00a3b 100644 --- a/src/components/modals/main/settings/KeybindInput.jsx +++ b/src/components/modals/main/settings/KeybindInput.jsx @@ -7,17 +7,53 @@ export default function KeybindInput(props) { const getButton = () => { if (!value) { - return ;; - } else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) { - return ; + return ( + + ); + } else if ( + value === + variables.language.getMessage( + variables.languagecode, + 'modals.main.settings.sections.keybinds.recording', + ) + ) { + return ( + + ); } else { - return ; + return ( + + ); } - } + }; return ( <> - props.action('listen', props.setting)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} /> + props.action('listen', props.setting)} + value={ + value || + variables.language.getMessage( + variables.languagecode, + 'modals.main.settings.sections.keybinds.click_to_record', + ) + } + readOnly + spellCheck={false} + varient="outlined" + InputLabelProps={{ shrink: true }} + /> {getButton()} ); diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx index 29251562..e14536e7 100644 --- a/src/components/modals/main/settings/Radio.jsx +++ b/src/components/modals/main/settings/Radio.jsx @@ -1,6 +1,12 @@ import variables from 'modules/variables'; import { PureComponent } from 'react'; -import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@mui/material'; +import { + Radio as RadioUI, + RadioGroup, + FormControlLabel, + FormControl, + FormLabel, +} from '@mui/material'; import EventBus from 'modules/helpers/eventbus'; @@ -8,10 +14,10 @@ export default class Radio extends PureComponent { constructor(props) { super(props); this.state = { - value: localStorage.getItem(this.props.name) + value: localStorage.getItem(this.props.name), }; } - + handleChange = (e) => { const { value } = e.target; @@ -21,15 +27,21 @@ export default class Radio extends PureComponent { if (this.props.name === 'language') { // old tab name - if (localStorage.getItem('tabName') === variables.language.getMessage(variables.languagecode, 'tabname')) { - localStorage.setItem('tabName', require(`translations/${value.replace('-', '_')}.json`).tabname); + if ( + localStorage.getItem('tabName') === + variables.language.getMessage(variables.languagecode, 'tabname') + ) { + localStorage.setItem( + 'tabName', + require(`translations/${value.replace('-', '_')}.json`).tabname, + ); } } localStorage.setItem(this.props.name, value); - + this.setState({ - value + value, }); if (this.props.onChange) { @@ -37,7 +49,7 @@ export default class Radio extends PureComponent { } variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`); - + if (this.props.element) { if (!document.querySelector(this.props.element)) { document.querySelector('.reminder-info').style.display = 'flex'; @@ -46,15 +58,30 @@ export default class Radio extends PureComponent { } EventBus.dispatch('refresh', this.props.category); - } - + }; + render() { return ( - - {this.props.title} - + + + {this.props.title} + + {this.props.options.map((option) => ( - } label={option.name} key={option.name} /> + } + label={option.name} + key={option.name} + /> ))} diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx index 6b75f5d4..3dff3df4 100644 --- a/src/components/modals/main/settings/Switch.jsx +++ b/src/components/modals/main/settings/Switch.jsx @@ -8,19 +8,22 @@ export default class Switch extends PureComponent { constructor(props) { super(props); this.state = { - checked: (localStorage.getItem(this.props.name) === 'true') + checked: localStorage.getItem(this.props.name) === 'true', }; } handleChange = () => { - const value = (this.state.checked !== true); + const value = this.state.checked !== true; localStorage.setItem(this.props.name, value); this.setState({ - checked: value + checked: value, }); - variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`); + variables.stats.postEvent( + 'setting', + `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`, + ); if (this.props.element) { if (!document.querySelector(this.props.element)) { @@ -30,15 +33,22 @@ export default class Switch extends PureComponent { } EventBus.dispatch('refresh', this.props.category); - } + }; render() { return ( <> } + control={ + + } label={this.props.text} - labelPlacement='start' + labelPlacement="start" /> ); diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx index 24fec522..763eff98 100644 --- a/src/components/modals/main/settings/Text.jsx +++ b/src/components/modals/main/settings/Text.jsx @@ -9,13 +9,13 @@ export default class Text extends PureComponent { constructor(props) { super(props); this.state = { - value: localStorage.getItem(this.props.name) || '' + value: localStorage.getItem(this.props.name) || '', }; } handleChange = (e) => { let { value } = e.target; - + // Alex wanted font to work with montserrat and Montserrat, so I made it work if (this.props.upperCaseFirst === true) { value = value.charAt(0).toUpperCase() + value.slice(1); @@ -23,7 +23,7 @@ export default class Text extends PureComponent { localStorage.setItem(this.props.name, value); this.setState({ - value + value, }); if (this.props.element) { @@ -34,25 +34,47 @@ export default class Text extends PureComponent { } EventBus.dispatch('refresh', this.props.category); - } + }; resetItem = () => { this.handleChange({ target: { - value: this.props.default || '' - } + value: this.props.default || '', + }, }); toast(variables.language.getMessage(variables.languagecode, 'toasts.reset')); - } + }; render() { return ( <> - {(this.props.textarea === true) ? - - : - } - {variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')} + {this.props.textarea === true ? ( + + ) : ( + + )} + + {variables.language.getMessage( + variables.languagecode, + 'modals.main.settings.buttons.reset', + )} + ); } diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index a79dd21d..acc18183 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -134,7 +134,7 @@ export default class About extends PureComponent { {this.getMessage('modals.main.settings.sections.about.title')} -
+
Logo @@ -179,10 +179,10 @@ export default class About extends PureComponent { {this.getMessage('modals.main.settings.sections.about.contact_us')}
- - - Form - + + + Form + {this.getMessage('modals.main.settings.sections.about.support_mue')} -

As Mue is entirely free, we rely on donations to cover pay the server bills and fund development

+

+ As Mue is entirely free, we rely on donations to cover pay the server bills and fund + development +

- + Donate - - + + - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); return ( <> - {getMessage("modals.main.settings.sections.advanced.title")} + {getMessage('modals.main.settings.sections.advanced.title')} - + - {localStorage.getItem("welcomePreview") !== "true" ? ( + {localStorage.getItem('welcomePreview') !== 'true' ? (
- {getMessage("modals.main.settings.sections.advanced.data")} + {getMessage('modals.main.settings.sections.advanced.data')} - {getMessage( - "modals.main.settings.sections.advanced.experimental_warning" - )} + {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
-
@@ -86,16 +72,12 @@ export default class AdvancedSettings extends PureComponent { - {getMessage( - "modals.main.settings.sections.advanced.timezone.automatic" - )} + {getMessage('modals.main.settings.sections.advanced.timezone.automatic')} {time_zones.map((timezone) => ( @@ -104,15 +86,11 @@ export default class AdvancedSettings extends PureComponent { ))} - + @@ -122,15 +100,9 @@ export default class AdvancedSettings extends PureComponent { type="settings" loadFunction={(e) => importSettings(e)} /> - +
- {getMessage("modals.main.settings.sections.experimental.title")} + {getMessage('modals.main.settings.sections.experimental.title')} - {getMessage( - "modals.main.settings.sections.advanced.experimental_warning" - )} + {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 8b4623b8..999f3b53 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -1,53 +1,52 @@ -import variables from "modules/variables"; +import variables from 'modules/variables'; -import Checkbox from "../Checkbox"; -import Dropdown from "../Dropdown"; -import Radio from "../Radio"; -import Slider from "../Slider"; -import Text from "../Text"; -import SettingsItem from "../SettingsItem"; +import Checkbox from '../Checkbox'; +import Dropdown from '../Dropdown'; +import Radio from '../Radio'; +import Slider from '../Slider'; +import Text from '../Text'; +import SettingsItem from '../SettingsItem'; -import { values } from "modules/helpers/settings/modals"; +import { values } from 'modules/helpers/settings/modals'; export default function AppearanceSettings() { - const getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const themeOptions = [ { - name: getMessage("modals.main.settings.sections.appearance.theme.auto"), - value: "auto", + name: getMessage('modals.main.settings.sections.appearance.theme.auto'), + value: 'auto', }, { - name: getMessage("modals.main.settings.sections.appearance.theme.light"), - value: "light", + name: getMessage('modals.main.settings.sections.appearance.theme.light'), + value: 'light', }, { - name: getMessage("modals.main.settings.sections.appearance.theme.dark"), - value: "dark", + name: getMessage('modals.main.settings.sections.appearance.theme.dark'), + value: 'dark', }, ]; const styleOptions = [ { - name: "Legacy", - value: "legacy", + name: 'Legacy', + value: 'legacy', }, { - name: "New", - value: "new", + name: 'New', + value: 'new', }, ]; return ( <> - {getMessage("modals.main.settings.sections.appearance.title")} + {getMessage('modals.main.settings.sections.appearance.title')}
- {getMessage("modals.main.settings.sections.appearance.theme.title")} + {getMessage('modals.main.settings.sections.appearance.theme.title')} subtitle
@@ -58,96 +57,66 @@ export default function AppearanceSettings() {
- {getMessage("modals.main.settings.sections.appearance.font.title")} + {getMessage('modals.main.settings.sections.appearance.font.title')} subtitle
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
@@ -167,17 +136,13 @@ export default function AppearanceSettings() {
- {getMessage( - "modals.main.settings.sections.appearance.accessibility.title" - )} + {getMessage('modals.main.settings.sections.appearance.accessibility.title')} subtitle
@@ -186,27 +151,23 @@ export default function AppearanceSettings() {
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx index a16cfcd6..802a6859 100644 --- a/src/components/modals/main/settings/sections/Changelog.jsx +++ b/src/components/modals/main/settings/sections/Changelog.jsx @@ -1,9 +1,9 @@ -import variables from "modules/variables"; -import { PureComponent, createRef } from "react"; -import { MdOutlineWifiOff } from "react-icons/md"; -import Modal from "react-modal"; +import variables from 'modules/variables'; +import { PureComponent, createRef } from 'react'; +import { MdOutlineWifiOff } from 'react-icons/md'; +import Modal from 'react-modal'; -import Lightbox from "../../marketplace/Lightbox"; +import Lightbox from '../../marketplace/Lightbox'; export default class Changelog extends PureComponent { constructor() { @@ -13,14 +13,14 @@ export default class Changelog extends PureComponent { showLightbox: false, lightboxImg: null, }; - this.offlineMode = localStorage.getItem("offlineMode") === "true"; + this.offlineMode = localStorage.getItem('offlineMode') === 'true'; this.controller = new AbortController(); this.changelog = createRef(); } async getUpdate() { const data = await ( - await fetch(variables.constants.BLOG_POST + "/index.json", { + await fetch(variables.constants.BLOG_POST + '/index.json', { signal: this.controller.signal, }) ).json(); @@ -29,11 +29,11 @@ export default class Changelog extends PureComponent { return; } - let date = new Date(data.date.split(" ")[0]); - date = date.toLocaleDateString(variables.languagecode.replace("_", "-"), { - year: "numeric", - month: "long", - day: "numeric", + let date = new Date(data.date.split(' ')[0]); + date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), { + year: 'numeric', + month: 'long', + day: 'numeric', }); this.setState({ @@ -42,17 +42,17 @@ export default class Changelog extends PureComponent { image: data.featured_image || null, author: variables.language.getMessage( variables.languagecode, - "modals.main.settings.sections.changelog.by", + 'modals.main.settings.sections.changelog.by', { - author: data.authors.join(", "), - } + author: data.authors.join(', '), + }, ), html: data.html, }); // lightbox etc - const images = this.changelog.current.getElementsByTagName("img"); - const links = this.changelog.current.getElementsByTagName("a"); + const images = this.changelog.current.getElementsByTagName('img'); + const links = this.changelog.current.getElementsByTagName('a'); for (const img of images) { img.draggable = false; @@ -66,8 +66,8 @@ export default class Changelog extends PureComponent { // open in new tab for (let link = 0; link < links.length; link++) { - links[link].target = "_blank"; - links[link].rel = "noopener noreferrer"; + links[link].target = '_blank'; + links[link].rel = 'noopener noreferrer'; } } @@ -85,8 +85,7 @@ export default class Changelog extends PureComponent { } render() { - const getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const errorMessage = (msg) => { return ( @@ -100,11 +99,9 @@ export default class Changelog extends PureComponent { return errorMessage( <> -

{getMessage("modals.main.marketplace.offline.title")}

-

- {getMessage("modals.main.marketplace.offline.description")} -

- +

{getMessage('modals.main.marketplace.offline.title')}

+

{getMessage('modals.main.marketplace.offline.description')}

+ , ); } @@ -113,7 +110,7 @@ export default class Changelog extends PureComponent {
Just be a sec. -
+
, ); } @@ -131,10 +128,7 @@ export default class Changelog extends PureComponent { className="updateImage" /> ) : null} -
+
this.setState({ showLightbox: false })} diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx index c6c25870..92e94d16 100644 --- a/src/components/modals/main/settings/sections/Date.jsx +++ b/src/components/modals/main/settings/sections/Date.jsx @@ -1,44 +1,39 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; -import Header from "../Header"; -import Checkbox from "../Checkbox"; -import Dropdown from "../Dropdown"; -import SettingsItem from "../SettingsItem"; +import Header from '../Header'; +import Checkbox from '../Checkbox'; +import Dropdown from '../Dropdown'; +import SettingsItem from '../SettingsItem'; export default class DateSettings extends PureComponent { constructor() { super(); this.state = { - dateType: localStorage.getItem("dateType") || "long", + dateType: localStorage.getItem('dateType') || 'long', }; } render() { - const getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); let dateSettings; const longSettings = ( <> - + @@ -47,7 +42,7 @@ export default class DateSettings extends PureComponent { const shortSettings = ( <> @@ -57,37 +52,27 @@ export default class DateSettings extends PureComponent { ); - if (this.state.dateType === "long") { + if (this.state.dateType === 'long') { dateSettings = longSettings; } else { dateSettings = shortSettings; @@ -96,7 +81,7 @@ export default class DateSettings extends PureComponent { return ( <>
this.setState({ dateType: value })} category="date" > {dateSettings} diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx index 70297995..58659f74 100644 --- a/src/components/modals/main/settings/sections/Experimental.jsx +++ b/src/components/modals/main/settings/sections/Experimental.jsx @@ -1,25 +1,22 @@ -import variables from "modules/variables"; -import { useState } from "react"; -import Checkbox from "../Checkbox"; -import Slider from "../Slider"; -import { TextField } from "@mui/material"; +import variables from 'modules/variables'; +import { useState } from 'react'; +import Checkbox from '../Checkbox'; +import Slider from '../Slider'; +import { TextField } from '@mui/material'; -import EventBus from "modules/helpers/eventbus"; -import { values } from "modules/helpers/settings/modals"; +import EventBus from 'modules/helpers/eventbus'; +import { values } from 'modules/helpers/settings/modals'; export default function ExperimentalSettings() { - const getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const [eventType, setEventType] = useState(); const [eventName, setEventName] = useState(); return ( <> -

{getMessage("modals.main.settings.sections.experimental.title")}

-

{getMessage("modals.main.settings.sections.experimental.warning")}

-

- {getMessage("modals.main.settings.sections.experimental.developer")} -

+

{getMessage('modals.main.settings.sections.experimental.title')}

+

{getMessage('modals.main.settings.sections.experimental.warning')}

+

{getMessage('modals.main.settings.sections.experimental.developer')}

Send Event

setEventType(e.target.value)} spellCheck={false} @@ -41,7 +38,7 @@ export default function ExperimentalSettings() { InputLabelProps={{ shrink: true }} /> setEventName(e.target.value)} spellCheck={false} @@ -49,19 +46,12 @@ export default function ExperimentalSettings() { InputLabelProps={{ shrink: true }} />
-

- diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index becb3cae..5e982ef8 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -11,7 +11,7 @@ export default class GreetingSettings extends PureComponent { constructor() { super(); this.state = { - birthday: new Date(localStorage.getItem('birthday')) || new Date() + birthday: new Date(localStorage.getItem('birthday')) || new Date(), }; } @@ -19,26 +19,64 @@ export default class GreetingSettings extends PureComponent { localStorage.setItem('birthday', e.target.value || new Date()); this.setState({ - birthday: e.target.value ? new Date(e.target.value) : new Date() + birthday: e.target.value ? new Date(e.target.value) : new Date(), }); - } + }; render() { const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); return ( <> -
- - - - +
+ + + + - - - -

{getMessage('modals.main.settings.sections.greeting.birthday_date')}

- + + + +

{getMessage('modals.main.settings.sections.greeting.birthday_date')}

+ {/*

{getMessage('modals.main.settings.sections.greeting.birthday')}

diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx index 2ed3c936..c52cd9a8 100644 --- a/src/components/modals/main/settings/sections/Keybinds.jsx +++ b/src/components/modals/main/settings/sections/Keybinds.jsx @@ -11,7 +11,7 @@ export default class KeybindSettings extends PureComponent { super(); this.state = { keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}, - cancelled: false + cancelled: false, }; } @@ -25,7 +25,7 @@ export default class KeybindSettings extends PureComponent { currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording'); this.setState({ keybinds: currentKeybinds, - cancelled: false + cancelled: false, }); this.forceUpdate(); @@ -42,7 +42,7 @@ export default class KeybindSettings extends PureComponent { keys = `${keys}+${event.key}`; } - previouskey = event.key + previouskey = event.key; }); this.keyup = document.addEventListener('keyup', () => { @@ -55,7 +55,7 @@ export default class KeybindSettings extends PureComponent { keybinds[type] = keys.split('+').slice(0, 4).join('+'); localStorage.setItem('keybinds', JSON.stringify(keybinds)); this.setState({ - keybinds: JSON.parse(localStorage.getItem('keybinds')) || {} + keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}, }); }); @@ -73,7 +73,7 @@ export default class KeybindSettings extends PureComponent { this.setState({ keybinds: currentKeybinds, - cancelled: true + cancelled: true, }); this.forceUpdate(); } @@ -85,7 +85,7 @@ export default class KeybindSettings extends PureComponent { this.setState({ keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}, - cancelled: true + cancelled: true, }); this.showReminder(); @@ -110,35 +110,140 @@ export default class KeybindSettings extends PureComponent { render() { return ( <> -
- +
+
- - + + - - + + - - + + - - + + - - + + - - + + - +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> this.action(type, e)}/> + this.action(type, e)} + /> + + this.action(type, e)} + /> +
this.action(type, e)}/> + this.action(type, e)} + /> +
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index 2e8db510..485bae89 100644 --- a/src/components/modals/main/settings/sections/Message.jsx +++ b/src/components/modals/main/settings/sections/Message.jsx @@ -96,8 +96,9 @@ export default class Message extends PureComponent { {this.state.messages.length > 1 ? ( ) : null} diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx index 16f18c05..52ce1de2 100644 --- a/src/components/modals/main/settings/sections/QuickLinks.jsx +++ b/src/components/modals/main/settings/sections/QuickLinks.jsx @@ -12,12 +12,38 @@ export default function QuickLinks() { return ( <> -
+
- setTextOnly(value)}/> - - - + setTextOnly(value)} + /> + + + ); diff --git a/src/components/modals/main/settings/sections/Reminder.jsx b/src/components/modals/main/settings/sections/Reminder.jsx index 8c8a4f6e..38a894f3 100644 --- a/src/components/modals/main/settings/sections/Reminder.jsx +++ b/src/components/modals/main/settings/sections/Reminder.jsx @@ -6,7 +6,7 @@ export default class ReminderSettings extends PureComponent { constructor() { super(); this.state = { - colour: localStorage.getItem('reminderColour') || '#ffa500' + colour: localStorage.getItem('reminderColour') || '#ffa500', }; } @@ -20,9 +20,24 @@ export default class ReminderSettings extends PureComponent { const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); return ( <> -
- this.updateColour(event)} value={this.state.colour}> - +
+ this.updateColour(event)} + value={this.state.colour} + > + ); } diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx index 1cbaeff4..b68aa156 100644 --- a/src/components/modals/main/settings/sections/Search.jsx +++ b/src/components/modals/main/settings/sections/Search.jsx @@ -22,14 +22,14 @@ export default class SearchSettings extends PureComponent { this.state = { customEnabled: false, customDisplay: 'none', - customValue: localStorage.getItem('customSearchEngine') || '' + customValue: localStorage.getItem('customSearchEngine') || '', }; } resetSearch() { localStorage.removeItem('customSearchEngine'); this.setState({ - customValue: '' + customValue: '', }); toast(this.getMessage('toasts.reset')); @@ -39,7 +39,7 @@ export default class SearchSettings extends PureComponent { if (localStorage.getItem('searchEngine') === 'custom') { this.setState({ customDisplay: 'block', - customEnabled: true + customEnabled: true, }); } else { localStorage.removeItem('customSearchEngine'); @@ -58,12 +58,12 @@ export default class SearchSettings extends PureComponent { if (input === 'custom') { this.setState({ customDisplay: 'block', - customEnabled: true + customEnabled: true, }); } else { this.setState({ customDisplay: 'none', - customEnabled: false + customEnabled: false, }); localStorage.setItem('searchEngine', input); } @@ -74,30 +74,78 @@ export default class SearchSettings extends PureComponent { render() { return ( <> -
+
- {/* not supported on firefox */} - {(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ? - - : null} - - -
    -

    this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}

    - this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} /> -
- + {/* not supported on firefox */} + {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? ( + + ) : null} + + +
    +

    + this.resetSearch()}> + {this.getMessage('modals.main.settings.buttons.reset')} + +

    + this.setState({ customValue: e.target.value })} + varient="outlined" + InputLabelProps={{ shrink: true }} + /> +
+ - - this.setSearchEngine(value)} manual={true}> - {searchEngines.map((engine) => ( - {engine.name} - ))} - {this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]} - + + this.setSearchEngine(value)} + manual={true} + > + {searchEngines.map((engine) => ( + + {engine.name} + + ))} + + {this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]} + + - - + + ); diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index fedd9065..4feab723 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -8,13 +8,12 @@ import Checkbox from '../Checkbox'; import { TextField } from '@mui/material'; import SettingsItem from '../SettingsItem'; - export default class TimeSettings extends PureComponent { constructor() { super(); this.state = { location: localStorage.getItem('location') || '', - windSpeed: (localStorage.getItem('windspeed') !== 'true') + windSpeed: localStorage.getItem('windspeed') !== 'true', }; } @@ -29,26 +28,34 @@ export default class TimeSettings extends PureComponent { changeLocation(e) { this.setState({ - location: e.target.value + location: e.target.value, }); this.showReminder(); } getAuto() { - navigator.geolocation.getCurrentPosition(async (position) => { - const data = await (await fetch(`${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`)).json(); - this.setState({ - location: data[0].name - }); + navigator.geolocation.getCurrentPosition( + async (position) => { + const data = await ( + await fetch( + `${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`, + ) + ).json(); + this.setState({ + location: data[0].name, + }); - this.showReminder(); - }, (error) => { - // firefox requires this 2nd function - console.log(error); - }, { - enableHighAccuracy: true - }); + this.showReminder(); + }, + (error) => { + // firefox requires this 2nd function + console.log(error); + }, + { + enableHighAccuracy: true, + }, + ); } render() { @@ -57,62 +64,151 @@ export default class TimeSettings extends PureComponent { const tempFormat = [ { name: getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)', - value: 'celsius' + value: 'celsius', }, { name: getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)', - value: 'fahrenheit' + value: 'fahrenheit', }, { name: getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)', - value: 'kelvin' - } + value: 'kelvin', + }, ]; return ( <> -
+
- - - - - + + + + + - this.changeLocation(e)} placeholder='London' varient='outlined' InputLabelProps={{ shrink: true }} /> - this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')} + this.changeLocation(e)} + placeholder="London" + varient="outlined" + InputLabelProps={{ shrink: true }} + /> + this.getAuto()}> + {getMessage('modals.main.settings.sections.weather.auto')} + - + - { localStorage.getItem('weatherType') > 1 && + {localStorage.getItem('weatherType') > 1 && ( - - - - - - - - - - - - + + + + + + + + + + + + - } - - - - - - this.setState({ windSpeed: (localStorage.getItem('windspeed') !== 'true') })}/> - - - - - + )} + + + + + + + this.setState({ + windSpeed: localStorage.getItem('windspeed') !== 'true', + }) + } + /> + + + + + ); } diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 5bb3022a..6c1a889f 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -1,38 +1,37 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; -import { MenuItem } from "@mui/material"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; +import { MenuItem } from '@mui/material'; -import Header from "../../Header"; -import Checkbox from "../../Checkbox"; -import Dropdown from "../../Dropdown"; -import Slider from "../../Slider"; -import Radio from "../../Radio"; -import SettingsItem from "../../SettingsItem"; +import Header from '../../Header'; +import Checkbox from '../../Checkbox'; +import Dropdown from '../../Dropdown'; +import Slider from '../../Slider'; +import Radio from '../../Radio'; +import SettingsItem from '../../SettingsItem'; -import ColourSettings from "./Colour"; -import CustomSettings from "./Custom"; +import ColourSettings from './Colour'; +import CustomSettings from './Custom'; -import { values } from "modules/helpers/settings/modals"; +import { values } from 'modules/helpers/settings/modals'; export default class BackgroundSettings extends PureComponent { - getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + getMessage = (text) => variables.language.getMessage(variables.languagecode, text); constructor() { super(); this.state = { - backgroundType: localStorage.getItem("backgroundType") || "api", - backgroundFilter: localStorage.getItem("backgroundFilter") || "none", - backgroundCategories: [this.getMessage("modals.main.loading")], - backgroundAPI: localStorage.getItem("backgroundAPI") || "mue", - marketplaceEnabled: localStorage.getItem("photo_packs"), + backgroundType: localStorage.getItem('backgroundType') || 'api', + backgroundFilter: localStorage.getItem('backgroundFilter') || 'none', + backgroundCategories: [this.getMessage('modals.main.loading')], + backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue', + marketplaceEnabled: localStorage.getItem('photo_packs'), }; this.controller = new AbortController(); } async getBackgroundCategories() { const data = await ( - await fetch(variables.constants.API_URL + "/images/categories", { + await fetch(variables.constants.API_URL + '/images/categories', { signal: this.controller.signal, }) ).json(); @@ -47,12 +46,9 @@ export default class BackgroundSettings extends PureComponent { } componentDidMount() { - if ( - navigator.onLine === false || - localStorage.getItem("offlineMode") === "true" - ) { + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { return this.setState({ - backgroundCategories: [this.getMessage("modals.update.offline.title")], + backgroundCategories: [this.getMessage('modals.update.offline.title')], }); } @@ -71,53 +67,41 @@ export default class BackgroundSettings extends PureComponent { const apiOptions = [ { - name: "Mue", - value: "mue", + name: 'Mue', + value: 'mue', }, { - name: "Unsplash", - value: "unsplash", + name: 'Unsplash', + value: 'unsplash', }, { - name: "Pexels", - value: "pexels", + name: 'Pexels', + value: 'pexels', }, ]; const interval = ( - + - + @@ -127,37 +111,30 @@ export default class BackgroundSettings extends PureComponent { <> this.setState({ backgroundAPI: e })} /> - {this.state.backgroundCategories[0] === - getMessage("modals.main.loading") ? ( + {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? ( <> - {getMessage("modals.main.loading")} + {getMessage('modals.main.loading')} - {getMessage("modals.main.loading")} + {getMessage('modals.main.loading')} ) : ( {this.state.backgroundCategories.map((category) => ( @@ -168,31 +145,21 @@ export default class BackgroundSettings extends PureComponent { )} @@ -201,16 +168,16 @@ export default class BackgroundSettings extends PureComponent { ); switch (this.state.backgroundType) { - case "custom": + case 'custom': backgroundSettings = ; break; - case "colour": + case 'colour': backgroundSettings = ; break; - case "random_colour": + case 'random_colour': backgroundSettings = <>; break; - case "random_gradient": + case 'random_gradient': backgroundSettings = <>; break; default: @@ -219,23 +186,23 @@ export default class BackgroundSettings extends PureComponent { } if ( - localStorage.getItem("photo_packs") && - this.state.backgroundType !== "custom" && - this.state.backgroundType !== "colour" && - this.state.backgroundType !== "api" + localStorage.getItem('photo_packs') && + this.state.backgroundType !== 'custom' && + this.state.backgroundType !== 'colour' && + this.state.backgroundType !== 'api' ) { backgroundSettings = null; } const usingImage = - this.state.backgroundType !== "colour" && - this.state.backgroundType !== "random_colour" && - this.state.backgroundType !== "random_gradient"; + this.state.backgroundType !== 'colour' && + this.state.backgroundType !== 'random_colour' && + this.state.backgroundType !== 'random_gradient'; return ( <>
this.setState({ backgroundType: value })} category="background" > {this.state.marketplaceEnabled ? ( ) : null} {backgroundSettings} - {this.state.backgroundType === "api" || - this.state.backgroundType === "custom" || + {this.state.backgroundType === 'api' || + this.state.backgroundType === 'custom' || this.state.marketplaceEnabled ? ( this.setState({ backgroundFilter: value })} category="background" element="#backgroundImage" > - {this.state.backgroundFilter !== "none" ? ( + {this.state.backgroundFilter !== 'none' ? ( diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx index 5b22532e..bda7be55 100644 --- a/src/components/modals/main/settings/sections/background/Colour.jsx +++ b/src/components/modals/main/settings/sections/background/Colour.jsx @@ -1,25 +1,24 @@ -import variables from "modules/variables"; -import { PureComponent, Fragment } from "react"; -import { ColorPicker } from "react-color-gradient-picker"; -import { toast } from "react-toastify"; -import SettingsItem from "../../SettingsItem"; +import variables from 'modules/variables'; +import { PureComponent, Fragment } from 'react'; +import { ColorPicker } from 'react-color-gradient-picker'; +import { toast } from 'react-toastify'; +import SettingsItem from '../../SettingsItem'; -import hexToRgb from "modules/helpers/background/hexToRgb"; -import rgbToHex from "modules/helpers/background/rgbToHex"; +import hexToRgb from 'modules/helpers/background/hexToRgb'; +import rgbToHex from 'modules/helpers/background/rgbToHex'; -import "react-color-gradient-picker/dist/index.css"; -import "../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss"; +import 'react-color-gradient-picker/dist/index.css'; +import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss'; export default class ColourSettings extends PureComponent { DefaultGradientSettings = { - angle: "180", - gradient: [{ colour: "#ffb032", stop: 0 }], - type: "linear", + angle: '180', + gradient: [{ colour: '#ffb032', stop: 0 }], + type: 'linear', }; GradientPickerInitialState = undefined; - getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + getMessage = (text) => variables.language.getMessage(variables.languagecode, text); constructor() { super(); @@ -29,11 +28,11 @@ export default class ColourSettings extends PureComponent { } resetColour() { - localStorage.setItem("customBackgroundColour", ""); + localStorage.setItem('customBackgroundColour', ''); this.setState({ gradientSettings: this.DefaultGradientSettings, }); - toast(this.getMessage("toasts.reset")); + toast(this.getMessage('toasts.reset')); } initialiseColourPickerState(gradientSettings) { @@ -54,10 +53,10 @@ export default class ColourSettings extends PureComponent { } componentDidMount() { - const hex = localStorage.getItem("customBackgroundColour"); + const hex = localStorage.getItem('customBackgroundColour'); let gradientSettings = undefined; - if (hex !== "") { + if (hex !== '') { try { gradientSettings = JSON.parse(hex); } catch (e) { @@ -75,10 +74,7 @@ export default class ColourSettings extends PureComponent { } componentDidUpdate() { - localStorage.setItem( - "customBackgroundColour", - this.currentGradientSettings() - ); + localStorage.setItem('customBackgroundColour', this.currentGradientSettings()); } onGradientChange = (event, index) => { @@ -89,7 +85,7 @@ export default class ColourSettings extends PureComponent { gradientSettings: { ...s.gradientSettings, gradient: s.gradientSettings.gradient.map((g, i) => - i === index ? { ...g, [name]: newValue } : g + i === index ? { ...g, [name]: newValue } : g, ), }, }); @@ -100,8 +96,7 @@ export default class ColourSettings extends PureComponent { addColour = () => { this.setState((s) => { - const [lastGradient, ...initGradients] = - s.gradientSettings.gradient.reverse(); + const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse(); return { gradientSettings: { ...s.gradientSettings, @@ -109,10 +104,7 @@ export default class ColourSettings extends PureComponent { ...initGradients, lastGradient, { - colour: - localStorage.getItem("theme") === "dark" - ? "#000000" - : "#ffffff", + colour: localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100, }, ].sort((a, b) => (a.stop > b.stop ? 1 : -1)), @@ -120,25 +112,18 @@ export default class ColourSettings extends PureComponent { }; }); - variables.stats.postEvent( - "setting", - "Changed backgroundType from colour to gradient" - ); + variables.stats.postEvent('setting', 'Changed backgroundType from colour to gradient'); }; currentGradientSettings = () => { if ( - typeof this.state.gradientSettings === "object" && + typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every( (g) => - g.colour !== - this.getMessage( - "modals.main.settings.sections.background.source.disabled" - ) + g.colour !== this.getMessage('modals.main.settings.sections.background.source.disabled'), ) ) { - const clampNumber = (num, a, b) => - Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)); + const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)); return JSON.stringify({ ...this.state.gradientSettings, gradient: [ @@ -148,13 +133,11 @@ export default class ColourSettings extends PureComponent { ].sort((a, b) => (a.stop > b.stop ? 1 : -1)), }); } - return this.getMessage( - "modals.main.settings.sections.background.source.disabled" - ); + return this.getMessage('modals.main.settings.sections.background.source.disabled'); }; onColourPickerChange = (attrs, name) => { - if (process.env.NODE_ENV === "development") { + if (process.env.NODE_ENV === 'development') { console.log(attrs, name); } @@ -163,7 +146,7 @@ export default class ColourSettings extends PureComponent { angle: attrs.degree, gradient: attrs.points.map((p) => { return { - colour: "#" + rgbToHex(p.red, p.green, p.blue), + colour: '#' + rgbToHex(p.red, p.green, p.blue), stop: p.left, }; }), @@ -175,18 +158,17 @@ export default class ColourSettings extends PureComponent { }; showReminder() { - const reminderInfo = document.querySelector(".reminder-info"); - if (reminderInfo.style.display !== "block") { - reminderInfo.style.display = "block"; - localStorage.setItem("showReminder", true); + const reminderInfo = document.querySelector('.reminder-info'); + if (reminderInfo.style.display !== 'block') { + reminderInfo.style.display = 'block'; + localStorage.setItem('showReminder', true); } } render() { let colourSettings = null; - if (typeof this.state.gradientSettings === "object") { - const gradientHasMoreThanOneColour = - this.state.gradientSettings.gradient.length > 1; + if (typeof this.state.gradientSettings === 'object') { + const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1; let gradientInputs; if (gradientHasMoreThanOneColour) { @@ -196,11 +178,9 @@ export default class ColourSettings extends PureComponent { gradientInputs = ( - this.onColourPickerChange(colour, "start") - } - onChange={(colour) => this.onColourPickerChange(colour, "change")} - onEndChange={(colour) => this.onColourPickerChange(colour, "end")} + onStartChange={(colour) => this.onColourPickerChange(colour, 'start')} + onChange={(colour) => this.onColourPickerChange(colour, 'change')} + onEndChange={(colour) => this.onColourPickerChange(colour, 'end')} gradient={this.GradientPickerInitialState} isGradient /> @@ -210,14 +190,14 @@ export default class ColourSettings extends PureComponent { return ( this.onGradientChange(event, i)} value={g.colour} > - @@ -231,9 +211,7 @@ export default class ColourSettings extends PureComponent { {!gradientHasMoreThanOneColour ? ( <> ) : null} @@ -244,12 +222,10 @@ export default class ColourSettings extends PureComponent { return ( <> this.resetColour()}> - {this.getMessage("modals.main.settings.buttons.reset")} + {this.getMessage('modals.main.settings.buttons.reset')} {colourSettings} diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx index bd60e425..ee80da28 100644 --- a/src/components/modals/main/settings/sections/background/Custom.jsx +++ b/src/components/modals/main/settings/sections/background/Custom.jsx @@ -1,25 +1,19 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; -import { toast } from "react-toastify"; -import { - MdCancel, - MdAddLink, - MdAddPhotoAlternate, - MdPersonalVideo, -} from "react-icons/md"; -import EventBus from "modules/helpers/eventbus"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; +import { toast } from 'react-toastify'; +import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md'; +import EventBus from 'modules/helpers/eventbus'; -import Checkbox from "../../Checkbox"; -import FileUpload from "../../FileUpload"; -import SettingsItem from "../../SettingsItem"; +import Checkbox from '../../Checkbox'; +import FileUpload from '../../FileUpload'; +import SettingsItem from '../../SettingsItem'; -import Modal from "react-modal"; +import Modal from 'react-modal'; -import CustomURLModal from "./CustomURLModal"; +import CustomURLModal from './CustomURLModal'; export default class CustomSettings extends PureComponent { - getMessage = (text) => - variables.language.getMessage(variables.languagecode, text); + getMessage = (text) => variables.language.getMessage(variables.languagecode, text); constructor() { super(); @@ -30,12 +24,12 @@ export default class CustomSettings extends PureComponent { } resetCustom = () => { - localStorage.setItem("customBackground", "[]"); + localStorage.setItem('customBackground', '[]'); this.setState({ customBackground: [], }); - toast(this.getMessage("toasts.reset")); - EventBus.dispatch("refresh", "background"); + toast(this.getMessage('toasts.reset')); + EventBus.dispatch('refresh', 'background'); }; customBackground(e, text, index) { @@ -48,15 +42,15 @@ export default class CustomSettings extends PureComponent { }); this.forceUpdate(); - localStorage.setItem("customBackground", JSON.stringify(customBackground)); - document.querySelector(".reminder-info").style.display = "flex"; - localStorage.setItem("showReminder", true); + localStorage.setItem('customBackground', JSON.stringify(customBackground)); + document.querySelector('.reminder-info').style.display = 'flex'; + localStorage.setItem('showReminder', true); } modifyCustomBackground(type, index) { const customBackground = this.state.customBackground; - if (type === "add") { - customBackground.push(""); + if (type === 'add') { + customBackground.push(''); } else { customBackground.splice(index, 1); } @@ -66,39 +60,33 @@ export default class CustomSettings extends PureComponent { }); this.forceUpdate(); - localStorage.setItem("customBackground", JSON.stringify(customBackground)); - document.querySelector(".reminder-info").style.display = "flex"; - localStorage.setItem("showReminder", true); + localStorage.setItem('customBackground', JSON.stringify(customBackground)); + document.querySelector('.reminder-info').style.display = 'flex'; + localStorage.setItem('showReminder', true); } videoCheck(url) { return ( - url.startsWith("data:video/") || - url.endsWith(".mp4") || - url.endsWith(".webm") || - url.endsWith(".ogg") + url.startsWith('data:video/') || + url.endsWith('.mp4') || + url.endsWith('.webm') || + url.endsWith('.ogg') ); } videoCustomSettings = () => { - const hasVideo = this.state.customBackground.filter((bg) => - this.videoCheck(bg) - ); + const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg)); if (hasVideo.length > 0) { return ( <> ); @@ -110,19 +98,17 @@ export default class CustomSettings extends PureComponent { getCustom() { let data; try { - data = JSON.parse(localStorage.getItem("customBackground")); + data = JSON.parse(localStorage.getItem('customBackground')); } catch (e) { - data = [localStorage.getItem("customBackground")]; + data = [localStorage.getItem('customBackground')]; } return data; } uploadCustomBackground() { - document - .getElementById("bg-input") - .setAttribute("index", this.state.customBackground.length); - document.getElementById("bg-input").click(); + document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length); + document.getElementById('bg-input').click(); // to fix loadFunction this.setState({ currentBackgroundIndex: this.state.customBackground.length, @@ -134,39 +120,27 @@ export default class CustomSettings extends PureComponent { customURLModal: false, currentBackgroundIndex: this.state.customBackground.length, }); - this.customBackground( - { target: { value: e } }, - true, - this.state.customBackground.length - ); + this.customBackground({ target: { value: e } }, true, this.state.customBackground.length); } render() { return ( <> {this.props.interval} -
+
{this.state.customBackground.map((url, index) => (
{"Custom - {this.videoCheck(url) ? ( - - ) : null} + {this.videoCheck(url) ? : null} {this.state.customBackground.length > 0 ? ( @@ -183,14 +157,10 @@ export default class CustomSettings extends PureComponent { Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg - +
{/* @@ -204,9 +174,7 @@ export default class CustomSettings extends PureComponent { - this.customBackground(e, false, this.state.currentBackgroundIndex) - } + loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} /> {this.videoCustomSettings()} {variables.language.getMessage( variables.languagecode, - "modals.main.settings.sections.background.source.add_url" + 'modals.main.settings.sections.background.source.add_url', )} - setURL(e.target.value)} - varient="outlined" - /> + setURL(e.target.value)} varient="outlined" />
- {(divider === true) ?
: null} + {divider === true ?
: null} ); } diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx index e0dd635b..94348b95 100644 --- a/src/components/modals/main/tabs/backend/Tabs.jsx +++ b/src/components/modals/main/tabs/backend/Tabs.jsx @@ -1,12 +1,8 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; -import { - MdSettings, - MdOutlineShoppingBasket, - MdOutlineExtension, -} from "react-icons/md"; -import Tab from "./Tab"; -import ErrorBoundary from "../../../ErrorBoundary"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; +import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension } from 'react-icons/md'; +import Tab from './Tab'; +import ErrorBoundary from '../../../ErrorBoundary'; export default class Tabs extends PureComponent { constructor(props) { @@ -20,7 +16,7 @@ export default class Tabs extends PureComponent { onClick = (tab, name) => { if (name !== this.state.currentName) { - variables.stats.postEvent("tab", `Opened ${name}`); + variables.stats.postEvent('tab', `Opened ${name}`); } this.setState({ @@ -31,48 +27,48 @@ export default class Tabs extends PureComponent { render() { const reminderInfo = ( -
+
{variables.language.getMessage( variables.languagecode, - "modals.main.settings.reminder.title" + 'modals.main.settings.reminder.title', )} {variables.language.getMessage( variables.languagecode, - "modals.main.settings.reminder.message" + 'modals.main.settings.reminder.message', )}
); - let settingsActive = ""; - let addonsActive = ""; - let marketplaceActive = ""; + let settingsActive = ''; + let addonsActive = ''; + let marketplaceActive = ''; switch (this.props.current) { - case "settings": - settingsActive = " navbar-item-active"; + case 'settings': + settingsActive = ' navbar-item-active'; break; - case "addons": - addonsActive = " navbar-item-active"; + case 'addons': + addonsActive = ' navbar-item-active'; break; - case "marketplace": - marketplaceActive = " navbar-item-active"; + case 'marketplace': + marketplaceActive = ' navbar-item-active'; break; default: break; } return ( -
+
    {reminderInfo} {this.props.children.map((tab, index) => ( @@ -85,26 +81,26 @@ export default class Tabs extends PureComponent { /> ))}
-
+
this.importSettings(e)} /> -

{this.getMessage("modals.welcome.tip")}

-

{this.getMessage("modals.welcome.sections.settings.tip")}

+

{this.getMessage('modals.welcome.tip')}

+

{this.getMessage('modals.welcome.sections.settings.tip')}

); const privacy = ( <> - {this.getMessage("modals.welcome.sections.privacy.title")} + {this.getMessage('modals.welcome.sections.privacy.title')} -

{this.getMessage("modals.welcome.sections.privacy.description")}

+

{this.getMessage('modals.welcome.sections.privacy.description')}

-

- {this.getMessage( - "modals.welcome.sections.privacy.offline_mode_description" - )} -

+

{this.getMessage('modals.welcome.sections.privacy.offline_mode_description')}

-

- {this.getMessage( - "modals.welcome.sections.privacy.ddg_proxy_description" - )} -

+

{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}

- {this.getMessage("modals.welcome.sections.privacy.links.title")} + {this.getMessage('modals.welcome.sections.privacy.links.title')}

- {this.getMessage( - "modals.welcome.sections.privacy.links.privacy_policy" - )} + {this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}

- {this.getMessage("modals.welcome.sections.privacy.links.source_code")} + {this.getMessage('modals.welcome.sections.privacy.links.source_code')} ); const final = ( <> - - {this.getMessage("modals.welcome.sections.final.title")} - -

{this.getMessage("modals.welcome.sections.final.description")}

-

- {this.getMessage("modals.welcome.sections.final.changes")} -

-

- {this.getMessage("modals.welcome.sections.final.changes_description")} -

+ {this.getMessage('modals.welcome.sections.final.title')} +

{this.getMessage('modals.welcome.sections.final.description')}

+

{this.getMessage('modals.welcome.sections.final.changes')}

+

{this.getMessage('modals.welcome.sections.final.changes_description')}

this.props.switchTab(1)}> - {this.getMessage("modals.main.settings.sections.language.title")}:{" "} - { - languages.find( - (i) => i.value === localStorage.getItem("language") - ).name - } + {this.getMessage('modals.main.settings.sections.language.title')}:{' '} + {languages.find((i) => i.value === localStorage.getItem('language')).name}
this.props.switchTab(3)}> - {this.getMessage( - "modals.main.settings.sections.appearance.theme.title" - )} - : {this.getSetting("theme")} + {this.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '} + {this.getSetting('theme')}
{this.state.importedSettings.length !== 0 ? (
this.props.switchTab(2)}> - {this.getMessage("modals.main.settings.sections.final.imported", { + {this.getMessage('modals.main.settings.sections.final.imported', { amount: this.state.importedSettings.length, - })}{" "} + })}{' '} {this.state.importedSettings.length}
) : null} diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index d07a4b47..2f609392 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -1,67 +1,64 @@ -import { PureComponent, Fragment, Suspense, lazy } from "react"; +import { PureComponent, Fragment, Suspense, lazy } from 'react'; -import Clock from "./time/Clock"; -import Greeting from "./greeting/Greeting"; -import Quote from "./quote/Quote"; -import Search from "./search/Search"; -import QuickLinks from "./quicklinks/QuickLinks"; -import Date from "./time/Date"; -import Message from "./message/Message"; -import Reminder from "./reminder/Reminder"; +import Clock from './time/Clock'; +import Greeting from './greeting/Greeting'; +import Quote from './quote/Quote'; +import Search from './search/Search'; +import QuickLinks from './quicklinks/QuickLinks'; +import Date from './time/Date'; +import Message from './message/Message'; +import Reminder from './reminder/Reminder'; -import EventBus from "modules/helpers/eventbus"; +import EventBus from 'modules/helpers/eventbus'; -const Weather = lazy(() => import("./weather/Weather")); +const Weather = lazy(() => import('./weather/Weather')); const renderLoader = () => <>; export default class Widgets extends PureComponent { - online = localStorage.getItem("offlineMode") === "false"; + online = localStorage.getItem('offlineMode') === 'false'; constructor() { super(); this.state = { - order: JSON.parse(localStorage.getItem("order")), - welcome: localStorage.getItem("showWelcome"), + order: JSON.parse(localStorage.getItem('order')), + welcome: localStorage.getItem('showWelcome'), }; // widgets we can re-order this.widgets = { - time: this.enabled("time") ? : null, - greeting: this.enabled("greeting") ? : null, - quote: this.enabled("quote") ? : null, - date: this.enabled("date") ? : null, - quicklinks: - this.enabled("quicklinksenabled") && this.online ? ( - - ) : null, - message: this.enabled("message") ? : null, - reminder: this.enabled("reminder") ? : null, + time: this.enabled('time') ? : null, + greeting: this.enabled('greeting') ? : null, + quote: this.enabled('quote') ? : null, + date: this.enabled('date') ? : null, + quicklinks: this.enabled('quicklinksenabled') && this.online ? : null, + message: this.enabled('message') ? : null, + reminder: this.enabled('reminder') ? : null, }; } enabled(key) { - return localStorage.getItem(key) === "true"; + return localStorage.getItem(key) === 'true'; } componentDidMount() { - EventBus.on("refresh", (data) => { - if (data === "widgets") { + EventBus.on('refresh', (data) => { + if (data === 'widgets') { this.setState({ - order: JSON.parse(localStorage.getItem("order")), + order: JSON.parse(localStorage.getItem('order')), }); } - if (data === "widgetsWelcome") { + if (data === 'widgetsWelcome') { this.setState({ - welcome: localStorage.getItem("showWelcome"), + welcome: localStorage.getItem('showWelcome'), }); - localStorage.setItem("showWelcome", true); + localStorage.setItem('showWelcome', true); window.onbeforeunload = () => { localStorage.clear(); }; } - if (data === "widgetsWelcomeDone") { + if (data === 'widgetsWelcomeDone') { this.setState({ - welcome: localStorage.getItem("showWelcome"), + welcome: localStorage.getItem('showWelcome'), }); window.onbeforeunload = null; } @@ -70,7 +67,7 @@ export default class Widgets extends PureComponent { render() { // don't show when welcome is there - if (this.state.welcome !== "false") { + if (this.state.welcome !== 'false') { return
; } @@ -79,9 +76,7 @@ export default class Widgets extends PureComponent { if (this.state.order) { this.state.order.forEach((element) => { - elements.push( - {this.widgets[element]} - ); + elements.push({this.widgets[element]}); }); } else { // prevent error @@ -99,9 +94,9 @@ export default class Widgets extends PureComponent { return (
- {this.enabled("searchBar") ? : null} + {this.enabled('searchBar') ? : null} {elements} - {this.enabled("weatherEnabled") && this.online ? : null} + {this.enabled('weatherEnabled') && this.online ? : null}
); diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 47322a40..d2232ba4 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -50,6 +50,7 @@ } } .photoInformation-content { + padding: 20px; padding-left: 0; } .map-concept { @@ -183,13 +184,14 @@ font-size: 0.8em; font-weight: 300; z-index: 99; - padding: 20px; display: flex; flex-flow: row; align-items: center; transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); - width: 380px; + width: 300px; + padding: 10px; &:hover { + padding: 20px; height: auto; align-items: flex-start; flex-flow: column; @@ -240,15 +242,15 @@ } .map-concept { @extend %basic; - height: 80px; - width: 80px; + height: 50px; + width: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: none !important; svg { - font-size: 25px; + font-size: 24px; } img { width: 100%; @@ -281,7 +283,7 @@ .photoInformation-content { display: flex; flex-flow: column; - padding: 20px; + padding-left: 20px; a { color: #5352ed; text-decoration: none; diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index 1a9336a6..5733e8de 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -89,14 +89,16 @@ export default class Navbar extends PureComponent { linkText={'Learn more'} > */} - + + +
{/*
New Update diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index 2ea2c8ee..85033f64 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -57,7 +57,6 @@ } } - .flexNotes { display: flex; flex-flow: column; diff --git a/src/components/widgets/navbar/scss/_todo.scss b/src/components/widgets/navbar/scss/_todo.scss index dcafb50c..37094054 100644 --- a/src/components/widgets/navbar/scss/_todo.scss +++ b/src/components/widgets/navbar/scss/_todo.scss @@ -61,4 +61,3 @@ cursor: not-allowed; } } - diff --git a/src/components/widgets/quicklinks/quicklinks.scss b/src/components/widgets/quicklinks/quicklinks.scss index e2f6fc05..df311c02 100644 --- a/src/components/widgets/quicklinks/quicklinks.scss +++ b/src/components/widgets/quicklinks/quicklinks.scss @@ -30,7 +30,6 @@ border-radius: 12px; } - ::placeholder { color: #636e72; opacity: 1; diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index faf803a3..33efd74f 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -63,7 +63,7 @@ export default class Quote extends PureComponent { copy: localStorage.getItem('copyButton') === 'false' ? null : this.buttons.copy, quoteLanguage: '', type: localStorage.getItem('quoteType') || 'api', - shareModal: false + shareModal: false, }; this.quote = createRef(); this.quotediv = createRef(); @@ -398,7 +398,7 @@ export default class Quote extends PureComponent { {this.state.quote} - {localStorage.getItem('widgetStyle') === 'legacy' ? ( + {(localStorage.getItem('widgetStyle') === 'legacy') ? ( <>

@@ -417,38 +417,42 @@ export default class Quote extends PureComponent {

) : ( -
- + ) :
} + )} {/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ? this.favourite()} /> : null*/} {/*variables.keybinds.tweetQuote && variables.keybinds.tweetQuote !== '' ? this.tweetQuote()} /> : null*/} diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index b0df0142..05e79cb3 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -93,6 +93,16 @@ h1.quoteauthor { align-items: center; justify-content: center; flex-flow: column; + animation: fadeIn 1s; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } .quote-buttons { @@ -110,6 +120,7 @@ h1.quoteauthor { } .quotediv { + animation: fadeIn 1s; width: 40vw; display: flex; flex-direction: column; diff --git a/src/components/widgets/reminder/Reminder.jsx b/src/components/widgets/reminder/Reminder.jsx index 13b2be25..52285d89 100644 --- a/src/components/widgets/reminder/Reminder.jsx +++ b/src/components/widgets/reminder/Reminder.jsx @@ -5,21 +5,26 @@ import './reminder.scss'; import { MdClose, MdSnooze, MdWork } from 'react-icons/md'; export default class Reminder extends React.PureComponent { - render() { - return ( -
-
- -
-
- Reminder - Time -
-
- - -
-
- ) - } -} \ No newline at end of file + render() { + return ( +
+
+ +
+
+ Reminder + Time +
+
+ + +
+
+ ); + } +} diff --git a/src/components/widgets/search/autocomplete_providers.json b/src/components/widgets/search/autocomplete_providers.json index 292d5521..209850a2 100644 --- a/src/components/widgets/search/autocomplete_providers.json +++ b/src/components/widgets/search/autocomplete_providers.json @@ -14,4 +14,3 @@ "query": "&query=" } ] - \ No newline at end of file diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx index 182fb002..158d14ef 100644 --- a/src/components/widgets/time/Clock.jsx +++ b/src/components/widgets/time/Clock.jsx @@ -1,11 +1,11 @@ -import { PureComponent, Suspense, lazy } from "react"; +import { PureComponent, Suspense, lazy } from 'react'; -import { convertTimezone } from "modules/helpers/date"; -import EventBus from "modules/helpers/eventbus"; +import { convertTimezone } from 'modules/helpers/date'; +import EventBus from 'modules/helpers/eventbus'; -import "./clock.scss"; +import './clock.scss'; -const Analog = lazy(() => import("react-clock")); +const Analog = lazy(() => import('react-clock')); const renderLoader = () => <>; export default class Clock extends PureComponent { @@ -14,34 +14,34 @@ export default class Clock extends PureComponent { this.timer = undefined; this.state = { - time: "", - ampm: "", + time: '', + ampm: '', }; } startTime( - time = localStorage.getItem("seconds") === "true" || - localStorage.getItem("timeType") === "analogue" + time = localStorage.getItem('seconds') === 'true' || + localStorage.getItem('timeType') === 'analogue' ? 1000 - (Date.now() % 1000) - : 60000 - (Date.now() % 60000) + : 60000 - (Date.now() % 60000), ) { this.timer = setTimeout(() => { let now = new Date(); - const timezone = localStorage.getItem("timezone"); - if (timezone && timezone !== "auto") { + const timezone = localStorage.getItem('timezone'); + if (timezone && timezone !== 'auto') { now = convertTimezone(now, timezone); } - switch (localStorage.getItem("timeType")) { - case "percentageComplete": + switch (localStorage.getItem('timeType')) { + case 'percentageComplete': this.setState({ - time: (now.getHours() / 24).toFixed(2).replace("0.", "") + "%", - ampm: "", + time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%', + ampm: '', }); break; - case "analogue": + case 'analogue': // load analog clock css - require("react-clock/dist/Clock.css"); + require('react-clock/dist/Clock.css'); this.setState({ time: now, @@ -50,27 +50,25 @@ export default class Clock extends PureComponent { default: // Default clock let time, - sec = ""; - const zero = localStorage.getItem("zero"); + sec = ''; + const zero = localStorage.getItem('zero'); - 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("timeformat") === "twentyfourhour") { - if (zero === "false") { - time = `${now.getHours()}:${("00" + now.getMinutes()).slice( - -2 - )}${sec}`; + if (localStorage.getItem('timeformat') === 'twentyfourhour') { + if (zero === 'false') { + time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`; } else { - time = `${("00" + now.getHours()).slice(-2)}:${( - "00" + now.getMinutes() - ).slice(-2)}${sec}`; + time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice( + -2, + )}${sec}`; } this.setState({ time, - ampm: "", + ampm: '', }); } else { // 12 hour @@ -82,17 +80,15 @@ export default class Clock extends PureComponent { hours = 12; } - if (zero === "false") { - time = `${hours}:${("00" + now.getMinutes()).slice(-2)}${sec}`; + if (zero === 'false') { + time = `${hours}:${('00' + now.getMinutes()).slice(-2)}${sec}`; } else { - time = `${("00" + hours).slice(-2)}:${( - "00" + now.getMinutes() - ).slice(-2)}${sec}`; + time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`; } this.setState({ time, - ampm: now.getHours() > 11 ? "PM" : "AM", + ampm: now.getHours() > 11 ? 'PM' : 'AM', }); } break; @@ -103,27 +99,27 @@ export default class Clock extends PureComponent { } componentDidMount() { - EventBus.on("refresh", (data) => { - if (data === "clock" || data === "timezone") { - const element = document.querySelector(".clock-container"); + EventBus.on('refresh', (data) => { + if (data === 'clock' || data === 'timezone') { + const element = document.querySelector('.clock-container'); - if (localStorage.getItem("time") === "false") { - return (element.style.display = "none"); + if (localStorage.getItem('time') === 'false') { + return (element.style.display = 'none'); } this.timer = null; this.startTime(0); - element.style.display = "block"; + element.style.display = 'block'; element.style.fontSize = `${ - 4 * Number((localStorage.getItem("zoomClock") || 100) / 100) + 4 * Number((localStorage.getItem('zoomClock') || 100) / 100) }em`; } }); - if (localStorage.getItem("timeType") !== "analogue") { - document.querySelector(".clock-container").style.fontSize = `${ - 4 * Number((localStorage.getItem("zoomClock") || 100) / 100) + if (localStorage.getItem('timeType') !== 'analogue') { + document.querySelector('.clock-container').style.fontSize = `${ + 4 * Number((localStorage.getItem('zoomClock') || 100) / 100) }em`; } @@ -131,7 +127,7 @@ export default class Clock extends PureComponent { } componentWillUnmount() { - EventBus.off("refresh"); + EventBus.off('refresh'); } render() { @@ -143,21 +139,21 @@ export default class Clock extends PureComponent { ); const enabled = (setting) => { - return localStorage.getItem(setting) === "true"; + return localStorage.getItem(setting) === 'true'; }; - if (localStorage.getItem("timeType") === "analogue") { + if (localStorage.getItem('timeType') === 'analogue') { clockHTML = (
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 9a88b041..ded539b4 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -1,16 +1,16 @@ -import variables from "modules/variables"; -import { PureComponent, createRef } from "react"; +import variables from 'modules/variables'; +import { PureComponent, createRef } from 'react'; -import { nth, convertTimezone } from "modules/helpers/date"; -import EventBus from "modules/helpers/eventbus"; +import { nth, convertTimezone } from 'modules/helpers/date'; +import EventBus from 'modules/helpers/eventbus'; -import "./date.scss"; +import './date.scss'; export default class DateWidget extends PureComponent { constructor() { super(); this.state = { - date: "", + date: '', weekNumber: null, }; this.date = createRef(); @@ -29,21 +29,20 @@ export default class DateWidget extends PureComponent { } this.setState({ - weekNumber: `${variables.language.getMessage( - variables.languagecode, - "widgets.date.week" - )} ${1 + Math.ceil((firstThursday - dateToday) / 604800000)}`, + weekNumber: `${variables.language.getMessage(variables.languagecode, 'widgets.date.week')} ${ + 1 + Math.ceil((firstThursday - dateToday) / 604800000) + }`, }); } getDate() { let date = new Date(); - const timezone = localStorage.getItem("timezone"); - if (timezone && timezone !== "auto") { + const timezone = localStorage.getItem('timezone'); + if (timezone && timezone !== 'auto') { date = convertTimezone(date, timezone); } - if (localStorage.getItem("weeknumber") === "true") { + if (localStorage.getItem('weeknumber') === 'true') { this.getWeekNumber(date); } else if (this.state.weekNumber !== null) { this.setState({ @@ -51,23 +50,23 @@ export default class DateWidget extends PureComponent { }); } - if (localStorage.getItem("dateType") === "short") { + if (localStorage.getItem('dateType') === 'short') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); - const zero = localStorage.getItem("datezero") === "true"; + const zero = localStorage.getItem('datezero') === 'true'; - let day = zero ? ("00" + dateDay).slice(-2) : dateDay; - let month = zero ? ("00" + dateMonth).slice(-2) : dateMonth; + let day = zero ? ('00' + dateDay).slice(-2) : dateDay; + let month = zero ? ('00' + dateMonth).slice(-2) : dateMonth; let year = dateYear; - switch (localStorage.getItem("dateFormat")) { - case "MDY": + switch (localStorage.getItem('dateFormat')) { + case 'MDY': day = dateMonth; month = dateDay; break; - case "YMD": + case 'YMD': day = dateYear; year = dateDay; break; @@ -77,17 +76,17 @@ export default class DateWidget extends PureComponent { } let format; - switch (localStorage.getItem("shortFormat")) { - case "dots": + switch (localStorage.getItem('shortFormat')) { + case 'dots': format = `${day}.${month}.${year}`; break; - case "dash": + case 'dash': format = `${day}-${month}-${year}`; break; - case "gaps": + case 'gaps': format = `${day} - ${month} - ${year}`; break; - case "slashes": + case 'slashes': format = `${day}/${month}/${year}`; break; default: @@ -99,31 +98,29 @@ export default class DateWidget extends PureComponent { }); } else { // Long date - const lang = variables.languagecode.split("_")[0]; + const lang = variables.languagecode.split('_')[0]; const datenth = - localStorage.getItem("datenth") === "true" - ? nth(date.getDate()) - : date.getDate(); + localStorage.getItem('datenth') === 'true' ? nth(date.getDate()) : date.getDate(); const dateDay = - localStorage.getItem("dayofweek") === "true" - ? date.toLocaleDateString(lang, { weekday: "long" }) - : ""; - const dateMonth = date.toLocaleDateString(lang, { month: "long" }); + localStorage.getItem('dayofweek') === 'true' + ? date.toLocaleDateString(lang, { weekday: 'long' }) + : ''; + const dateMonth = date.toLocaleDateString(lang, { month: 'long' }); const dateYear = date.getFullYear(); - let day = dateDay + " " + datenth; + let day = dateDay + ' ' + datenth; let month = dateMonth; let year = dateYear; - switch (localStorage.getItem("longFormat")) { - case "MDY": + switch (localStorage.getItem('longFormat')) { + case 'MDY': day = dateMonth; - month = dateDay + " " + datenth;; + month = dateDay + ' ' + datenth; break; - case "YMD": + case 'YMD': day = dateYear; - year = dateDay + " " + datenth;; + year = dateDay + ' ' + datenth; break; // DMY default: @@ -137,28 +134,28 @@ export default class DateWidget extends PureComponent { } componentDidMount() { - EventBus.on("refresh", (data) => { - if (data === "date" || data === "timezone") { - if (localStorage.getItem("date") === "false") { - return (this.date.current.style.display = "none"); + EventBus.on('refresh', (data) => { + if (data === 'date' || data === 'timezone') { + if (localStorage.getItem('date') === 'false') { + return (this.date.current.style.display = 'none'); } - this.date.current.style.display = "block"; + this.date.current.style.display = 'block'; this.date.current.style.fontSize = `${Number( - (localStorage.getItem("zoomDate") || 100) / 100 + (localStorage.getItem('zoomDate') || 100) / 100, )}em`; this.getDate(); } }); this.date.current.style.fontSize = `${Number( - (localStorage.getItem("zoomDate") || 100) / 100 + (localStorage.getItem('zoomDate') || 100) / 100, )}em`; this.getDate(); } componentWillUnmount() { - EventBus.off("refresh"); + EventBus.off('refresh'); } render() { diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx index dca279ac..e9799216 100644 --- a/src/components/widgets/weather/Weather.jsx +++ b/src/components/widgets/weather/Weather.jsx @@ -1,43 +1,41 @@ -import variables from "modules/variables"; -import { PureComponent } from "react"; -import { WiHumidity, WiWindy, WiBarometer, WiCloud } from "react-icons/wi"; -import { MdDisabledVisible } from "react-icons/md"; +import variables from 'modules/variables'; +import { PureComponent } from 'react'; +import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi'; +import { MdDisabledVisible } from 'react-icons/md'; -import WeatherIcon from "./WeatherIcon"; -import WindDirectionIcon from "./WindDirectionIcon"; +import WeatherIcon from './WeatherIcon'; +import WindDirectionIcon from './WindDirectionIcon'; -import EventBus from "modules/helpers/eventbus"; +import EventBus from 'modules/helpers/eventbus'; -import "./weather.scss"; +import './weather.scss'; export default class Weather extends PureComponent { constructor() { super(); this.state = { - location: localStorage.getItem("location") || "London", - icon: "", - temp_text: "", + location: localStorage.getItem('location') || 'London', + icon: '', + temp_text: '', weather: { - temp: "", - description: "", - temp_min: "", - temp_max: "", - temp_feels_like: "", - humidity: "", - wind_speed: "", - wind_degrees: "", - cloudiness: "", - visibility: "", - pressure: "", + temp: '', + description: '', + temp_min: '', + temp_max: '', + temp_feels_like: '', + humidity: '', + wind_speed: '', + wind_degrees: '', + cloudiness: '', + visibility: '', + pressure: '', }, }; } async getWeather() { - const zoomWeather = `${Number( - (localStorage.getItem("zoomWeather") || 100) / 100 - )}em`; - document.querySelector(".weather").style.fontSize = zoomWeather; + const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`; + document.querySelector('.weather').style.fontSize = zoomWeather; let data = { weather: [ @@ -68,16 +66,16 @@ export default class Weather extends PureComponent { data = await ( await fetch( variables.constants.PROXY_URL + - `/weather/current?city=${this.state.location}&lang=${variables.languagecode}` + `/weather/current?city=${this.state.location}&lang=${variables.languagecode}`, ) ).json(); } - if (data.cod === "404") { + if (data.cod === '404') { return this.setState({ location: variables.language.getMessage( variables.languagecode, - "widgets.weather.not_found" + 'widgets.weather.not_found', ), }); } @@ -86,22 +84,22 @@ export default class Weather extends PureComponent { let temp_min = data.main.temp_min; let temp_max = data.main.temp_max; let temp_feels_like = data.main.temp_feels_like; - let temp_text = "K"; + let temp_text = 'K'; - switch (localStorage.getItem("tempformat")) { - case "celsius": + switch (localStorage.getItem('tempformat')) { + case 'celsius': temp -= 273.15; temp_min -= 273.15; temp_max -= 273.15; temp_feels_like -= 273.15; - temp_text = "°C"; + temp_text = '°C'; break; - case "fahrenheit": + case 'fahrenheit': temp = (temp - 273.15) * 1.8 + 32; temp_min = (temp_min - 273.15) * 1.8 + 32; temp_max = (temp_max - 273.15) * 1.8 + 32; temp_feels_like = (temp_feels_like - 273.15) * 1.8 + 32; - temp_text = "°F"; + temp_text = '°F'; break; // kelvin default: @@ -130,12 +128,12 @@ export default class Weather extends PureComponent { }, }); - document.querySelector(".weather svg").style.fontSize = zoomWeather; + document.querySelector('.weather svg').style.fontSize = zoomWeather; } componentDidMount() { - EventBus.on("refresh", (data) => { - if (data === "weather") { + EventBus.on('refresh', (data) => { + if (data === 'weather') { this.getWeather(); } }); @@ -144,17 +142,17 @@ export default class Weather extends PureComponent { } componentWillUnmount() { - EventBus.off("refresh"); + EventBus.off('refresh'); } render() { const enabled = (setting) => { - return localStorage.getItem(setting) === "true"; + return localStorage.getItem(setting) === 'true'; }; if ( this.state.location === - variables.language.getMessage(variables.languagecode, "weather.not_found") + variables.language.getMessage(variables.languagecode, 'weather.not_found') ) { return (
@@ -164,33 +162,24 @@ export default class Weather extends PureComponent { } const minmax = () => { - const mintemp = enabled("mintemp"); - const maxtemp = enabled("maxtemp"); + const mintemp = enabled('mintemp'); + const maxtemp = enabled('maxtemp'); if (!mintemp && !maxtemp) { return null; } else if (mintemp && !maxtemp) { return ( - - {this.state.weather.temp_min + this.state.temp_text} - + {this.state.weather.temp_min + this.state.temp_text} ); } else if (maxtemp && !mintemp) { return ( - - {this.state.weather.temp_max + this.state.temp_text} - + {this.state.weather.temp_max + this.state.temp_text} ); } else { return ( <> - - {this.state.weather.temp_min + this.state.temp_text} - {" "} - - {" "} - {this.state.weather.temp_max + this.state.temp_text} - + {this.state.weather.temp_min + this.state.temp_text}{' '} + {this.state.weather.temp_max + this.state.temp_text} ); } @@ -208,15 +197,10 @@ export default class Weather extends PureComponent {
{/*{enabled('humidity') ? {this.state.weather.humidity}% : null}*/} - {enabled("feelsliketemp") ? ( - - Feels like{" "} - {this.state.weather.temp_feels_like + this.state.temp_text} - - ) : null} - {enabled("showlocation") ? ( - {this.state.location} + {enabled('feelsliketemp') ? ( + Feels like {this.state.weather.temp_feels_like + this.state.temp_text} ) : null} + {enabled('showlocation') ? {this.state.location} : null}
Upcoming Forecast @@ -238,18 +222,18 @@ export default class Weather extends PureComponent {
Extra Information - {enabled("cloudiness") ? ( + {enabled('cloudiness') ? ( {this.state.weather.cloudiness}% ) : null} - {enabled("windspeed") ? ( + {enabled('windspeed') ? ( {this.state.weather.wind_speed} - m/s{" "} - {enabled("windDirection") ? ( + m/s{' '} + {enabled('windDirection') ? (
) : null} - {enabled("atmosphericpressure") ? ( + {enabled('atmosphericpressure') ? ( {this.state.weather.pressure} hPa ) : null} - {enabled("weatherdescription") ? ( + {enabled('weatherdescription') ? (
@@ -274,16 +258,12 @@ export default class Weather extends PureComponent { {this.state.weather.description} ) : null} - {enabled("visibility") ? ( + {enabled('visibility') ? ( - - {variables.language.getMessage( - variables.languagecode, - "widgets.weather.meters", - { - amount: this.state.weather.visibility, - } - )} + + {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', { + amount: this.state.weather.visibility, + })} ) : null}
diff --git a/src/components/widgets/weather/WeatherIcon.jsx b/src/components/widgets/weather/WeatherIcon.jsx index 7c0a60fe..84c32087 100644 --- a/src/components/widgets/weather/WeatherIcon.jsx +++ b/src/components/widgets/weather/WeatherIcon.jsx @@ -11,53 +11,53 @@ import { WiThunderstorm, WiSnow, WiFog, -} from "react-icons/wi"; +} from 'react-icons/wi'; export default function WeatherIcon({ name }) { let icon; // name is the openweathermap icon name, see https://openweathermap.org/weather-conditions switch (name) { - case "01d": + case '01d': icon = ; break; - case "01n": + case '01n': icon = ; break; - case "02d": + case '02d': icon = ; break; - case "02n": + case '02n': icon = ; break; - case "03d": - case "03n": + case '03d': + case '03n': icon = ; break; - case "04d": - case "04n": + case '04d': + case '04n': icon = ; break; - case "09d": + case '09d': icon = ; break; - case "09n": + case '09n': icon = ; break; - case "10d": - case "10n": + case '10d': + case '10n': icon = ; break; - case "11d": - case "11n": + case '11d': + case '11n': icon = ; break; - case "13d": - case "13n": + case '13d': + case '13n': icon = ; break; - case "50d": - case "50n": + case '50d': + case '50n': icon = ; break; default: diff --git a/src/components/widgets/weather/WindDirectionIcon.jsx b/src/components/widgets/weather/WindDirectionIcon.jsx index 6edfd432..941a4a3b 100644 --- a/src/components/widgets/weather/WindDirectionIcon.jsx +++ b/src/components/widgets/weather/WindDirectionIcon.jsx @@ -7,7 +7,7 @@ import { WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp, -} from "react-icons/wi"; +} from 'react-icons/wi'; // degrees are imported because of a potential bug, IDK what causes it, but now it is fixed export default function WindDirectionIcon({ degrees }) { @@ -15,43 +15,41 @@ export default function WindDirectionIcon({ degrees }) { // convert the number OpenWeatherMap gives us to the closest direction or something const directions = [ - "North", - "North-West", - "West", - "South-West", - "South", - "South-East", - "East", - "North-East", + 'North', + 'North-West', + 'West', + 'South-West', + 'South', + 'South-East', + 'East', + 'North-East', ]; const direction = - directions[ - Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8 - ]; + directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8]; switch (direction) { - case "North": + case 'North': icon = ; break; - case "North-West": + case 'North-West': icon = ; break; - case "West": + case 'West': icon = ; break; - case "South-West": + case 'South-West': icon = ; break; - case "South": + case 'South': icon = ; break; - case "South-East": + case 'South-East': icon = ; break; - case "East": + case 'East': icon = ; break; - case "North-East": + case 'North-East': icon = ; break; default: diff --git a/src/index.js b/src/index.js index 8f1f67dc..36be0891 100644 --- a/src/index.js +++ b/src/index.js @@ -31,7 +31,7 @@ variables.language = new I18n(variables.languagecode, { no: require('./translations/no.json'), ru: require('./translations/ru.json'), zh_CN: require('./translations/zh_CN.json'), - id_ID: require('./translations/id_ID.json') + id_ID: require('./translations/id_ID.json'), }); // set html language tag @@ -50,4 +50,4 @@ if (localStorage.getItem('stats') === 'true') { const container = document.getElementById('root'); const root = createRoot(container); -root.render(); +root.render(); diff --git a/src/modules/constants.js b/src/modules/constants.js index c73cabc9..5933aa09 100644 --- a/src/modules/constants.js +++ b/src/modules/constants.js @@ -13,8 +13,10 @@ 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-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+'; -export const BUG_REPORT = 'https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+'; +export const REPORT_ITEM = + 'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+'; +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'; // Mue Info diff --git a/src/modules/helpers/background/rgbToHsv.js b/src/modules/helpers/background/rgbToHsv.js index b85e8a30..0bc0febb 100644 --- a/src/modules/helpers/background/rgbToHsv.js +++ b/src/modules/helpers/background/rgbToHsv.js @@ -21,9 +21,9 @@ export default function rgbToHSv({ red, green, blue }) { if (rabs === v) { h = bb - gg; } else if (gabs === v) { - h = (1 / 3) + rr - bb; + h = 1 / 3 + rr - bb; } else if (babs === v) { - h = (2 / 3) + gg - rr; + h = 2 / 3 + gg - rr; } if (h < 0) { diff --git a/src/modules/helpers/background/setRgba.js b/src/modules/helpers/background/setRgba.js index 34e9b47f..2a2b73b3 100644 --- a/src/modules/helpers/background/setRgba.js +++ b/src/modules/helpers/background/setRgba.js @@ -1,5 +1,5 @@ const isValidRGBValue = (value) => { - return (typeof (value) === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255); + return typeof value === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255; }; export default function setRGBA(red, green, blue, alpha) { diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js index 610c0f9a..095319cf 100644 --- a/src/modules/helpers/background/widget.js +++ b/src/modules/helpers/background/widget.js @@ -1,6 +1,11 @@ // since there is so much code in the component, we have moved it to a separate file export function videoCheck(url) { - return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg'); + return ( + url.startsWith('data:video/') || + url.endsWith('.mp4') || + url.endsWith('.webm') || + url.endsWith('.ogg') + ); } export function offlineBackground() { @@ -10,16 +15,17 @@ export function offlineBackground() { const photographers = Object.keys(offlineImages); const photographer = photographers[Math.floor(Math.random() * photographers.length)]; - const randomImage = offlineImages[photographer].photo[ - Math.floor(Math.random() * offlineImages[photographer].photo.length) - ]; + const randomImage = + offlineImages[photographer].photo[ + Math.floor(Math.random() * offlineImages[photographer].photo.length) + ]; const object = { url: `./offline-images/${randomImage}.webp`, photoInfo: { offline: true, - credit: photographer - } + credit: photographer, + }, }; localStorage.setItem('currentBackground', JSON.stringify(object)); @@ -33,12 +39,16 @@ function gradientStyleBuilder({ type, angle, gradient }) { return { type: 'colour', - style: `background:${gradient[0]?.colour};${grad}` + style: `background:${gradient[0]?.colour};${grad}`, }; } export function getGradient() { - const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'}; + const customBackgroundColour = localStorage.getItem('customBackgroundColour') || { + angle: '180', + gradient: [{ colour: '#ffb032', stop: 0 }], + type: 'linear', + }; let gradientSettings = ''; try { @@ -47,7 +57,11 @@ export function getGradient() { const hexColorRegex = /#[0-9a-fA-F]{6}/s; if (hexColorRegex.exec(customBackgroundColour)) { // Colour used to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception) - gradientSettings = { 'type': 'linear', 'angle': '180', 'gradient': [{ 'colour': customBackgroundColour, 'stop': 0 }] }; + gradientSettings = { + type: 'linear', + angle: '180', + gradient: [{ colour: customBackgroundColour, stop: 0 }], + }; localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings)); } } @@ -59,16 +73,30 @@ export function getGradient() { export function randomColourStyleBuilder(type) { // randomColour based on https://stackoverflow.com/a/5092872 - const randomColour = () => '#000000'.replace(/0/g, () => { return (~~(Math.random()*16)).toString(16) }); + const randomColour = () => + '#000000'.replace(/0/g, () => { + return (~~(Math.random() * 16)).toString(16); + }); let style = `background:${randomColour()};`; if (type === 'random_gradient') { - const directions = ['to right', 'to left', 'to bottom', 'to top', 'to bottom right', 'to bottom left', 'to top right', 'to top left']; - style = `background:linear-gradient(${directions[Math.floor(Math.random() * directions.length)]}, ${randomColour()}, ${randomColour()});`; + const directions = [ + 'to right', + 'to left', + 'to bottom', + 'to top', + 'to bottom right', + 'to bottom left', + 'to top right', + 'to top left', + ]; + style = `background:linear-gradient(${ + directions[Math.floor(Math.random() * directions.length)] + }, ${randomColour()}, ${randomColour()});`; } return { type: 'colour', - style - } + style, + }; } diff --git a/src/modules/helpers/date.js b/src/modules/helpers/date.js index 62e7ee65..30b97381 100644 --- a/src/modules/helpers/date.js +++ b/src/modules/helpers/date.js @@ -16,5 +16,9 @@ export function nth(d) { } export function convertTimezone(date, tz) { - return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tz })); + return new Date( + (typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { + timeZone: tz, + }), + ); } diff --git a/src/modules/helpers/eventbus.js b/src/modules/helpers/eventbus.js index 49e25b0f..affb3ca6 100644 --- a/src/modules/helpers/eventbus.js +++ b/src/modules/helpers/eventbus.js @@ -6,9 +6,11 @@ export default class EventBus { } static dispatch(event, data) { - document.dispatchEvent(new CustomEvent(event, { - detail: data - })); + document.dispatchEvent( + new CustomEvent(event, { + detail: data, + }), + ); } static off(event, callback) { diff --git a/src/modules/helpers/experimental.js b/src/modules/helpers/experimental.js index 38195aa3..2cf8ca1c 100644 --- a/src/modules/helpers/experimental.js +++ b/src/modules/helpers/experimental.js @@ -22,7 +22,8 @@ export default function ExperimentalInit() { debugger; } break; - default: break; + default: + break; } }; } diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index d06b065b..3dedf402 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -7,7 +7,8 @@ function showReminder() { // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links export function urlParser(input) { - const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/; + const urlPattern = + /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/; return input.replace(urlPattern, '
$&'); } @@ -20,7 +21,7 @@ export function install(type, input, sideload) { Object.keys(localStorage).forEach((key) => { oldSettings.push({ name: key, - value: localStorage.getItem(key) + value: localStorage.getItem(key), }); }); @@ -33,7 +34,7 @@ export function install(type, input, sideload) { case 'photos': const currentPhotos = JSON.parse(localStorage.getItem('photo_packs')) || []; - input.photos.forEach(photo => { + input.photos.forEach((photo) => { currentPhotos.push(photo); }); localStorage.setItem('photo_packs', JSON.stringify(currentPhotos)); @@ -63,8 +64,8 @@ export function install(type, input, sideload) { installed.push({ content: { updated: 'Unpublished', - data: input - } + data: input, + }, }); } else { installed.push(input); @@ -94,9 +95,11 @@ export function uninstall(type, name) { case 'photos': const installedContents = JSON.parse(localStorage.getItem('photo_packs')); - const packContents = JSON.parse(localStorage.getItem('installed')).find(content => content.name === name); + const packContents = JSON.parse(localStorage.getItem('installed')).find( + (content) => content.name === name, + ); // todo: make it find in photo_packs all the ones in installed for that pack and remove - console.log(packContents) + console.log(packContents); installedContents.forEach((item, index) => { if (packContents.photos.includes(item)) { installedContents.splice(index, 1); @@ -121,4 +124,4 @@ export function uninstall(type, name) { } localStorage.setItem('installed', JSON.stringify(installed)); -}; +} diff --git a/src/modules/helpers/settings/index.js b/src/modules/helpers/settings/index.js index d725032d..90e32296 100644 --- a/src/modules/helpers/settings/index.js +++ b/src/modules/helpers/settings/index.js @@ -12,7 +12,10 @@ export function setDefaultSettings(reset) { // Languages const languageCodes = languages.map(({ value }) => value); - const browserLanguage = (navigator.languages && navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) || navigator.language.replace('-', '_'); + const browserLanguage = + (navigator.languages && + navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) || + navigator.language.replace('-', '_'); if (languageCodes.includes(browserLanguage)) { localStorage.setItem('language', browserLanguage); @@ -63,7 +66,7 @@ export function loadSettings(hotreload) { }); } - if (localStorage.getItem('animations') === 'false') { + if (localStorage.getItem('animations') === 'false') { document.body.classList.add('no-animations'); } else { document.body.classList.remove('no-animations'); @@ -79,7 +82,7 @@ export function loadSettings(hotreload) { try { document.querySelector('.' + element).classList.add('textBorder'); } catch (e) { - // Disregard exception + // Disregard exception } }); } else { @@ -88,7 +91,7 @@ export function loadSettings(hotreload) { try { document.querySelector('.' + element).classList.remove('textBorder'); } catch (e) { - // Disregard exception + // Disregard exception } }); } @@ -112,7 +115,9 @@ export function loadSettings(hotreload) { url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`; } - document.head.insertAdjacentHTML('beforeend', ` + document.head.insertAdjacentHTML( + 'beforeend', + ` - `); + `, + ); } // everything below this shouldn't run on a hot reload event @@ -153,7 +159,7 @@ export function loadSettings(hotreload) { `); } -// in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides +// in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides // the new settings with the old saved messages where they exist export function moveSettings() { const currentSettings = Object.keys(localStorage); diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js index 7cfe89cb..442d50ea 100644 --- a/src/modules/helpers/settings/modals.js +++ b/src/modules/helpers/settings/modals.js @@ -7,17 +7,33 @@ export function saveFile(data, filename = 'file', type = 'text/json') { if (typeof data === 'object') { data = JSON.stringify(data, undefined, 4); } - + const blob = new Blob([data], { type }); const event = document.createEvent('MouseEvents'); const a = document.createElement('a'); - + a.href = window.URL.createObjectURL(blob); a.download = filename; a.dataset.downloadurl = [type, a.download, a.href].join(':'); - - event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + + event.initMouseEvent( + 'click', + true, + false, + window, + 0, + 0, + 0, + 0, + 0, + false, + false, + false, + false, + 0, + null, + ); a.dispatchEvent(event); } @@ -44,39 +60,39 @@ export function importSettings(e) { export function values(type) { const marks = { zoom: [ - { value: 10, label: '0.1x' }, - { value: 100, label: '1x' }, - { value: 200, label: '2x' }, - { value: 400, label: '4x' } + { value: 10, label: '0.1x' }, + { value: 100, label: '1x' }, + { value: 200, label: '2x' }, + { value: 400, label: '4x' }, ], toast: [ - { value: 500, label: '0.5s' }, - { value: 1000, label: '1s' }, - { value: 1500, label: '1.5s' }, - { value: 2000, label: '2s' }, - { value: 2500, label: '2.5s' }, - { value: 3000, label: '3s' }, - { value: 4000, label: '4s' }, - { value: 5000, label: '5s'} + { value: 500, label: '0.5s' }, + { value: 1000, label: '1s' }, + { value: 1500, label: '1.5s' }, + { value: 2000, label: '2s' }, + { value: 2500, label: '2.5s' }, + { value: 3000, label: '3s' }, + { value: 4000, label: '4s' }, + { value: 5000, label: '5s' }, ], background: [ - { value: 0, label: '0%'}, - { value: 25, label: '25%' }, - { value: 50, label: '50%' }, - { value: 75, label: '75%' }, - { value: 100, label: '100%' } + { value: 0, label: '0%' }, + { value: 25, label: '25%' }, + { value: 50, label: '50%' }, + { value: 75, label: '75%' }, + { value: 100, label: '100%' }, ], experimental: [ { value: 0, label: '0s' }, - { value: 500, label: '0.5s' }, - { value: 1000, label: '1s' }, - { value: 1500, label: '1.5s' }, - { value: 2000, label: '2s' }, - { value: 2500, label: '2.5s' }, - { value: 3000, label: '3s' }, - { value: 4000, label: '4s' }, - { value: 5000, label: '5s'} - ] + { value: 500, label: '0.5s' }, + { value: 1000, label: '1s' }, + { value: 1500, label: '1.5s' }, + { value: 2000, label: '2s' }, + { value: 2500, label: '2.5s' }, + { value: 3000, label: '3s' }, + { value: 4000, label: '4s' }, + { value: 5000, label: '5s' }, + ], }; return marks[type]; diff --git a/src/modules/helpers/stats.js b/src/modules/helpers/stats.js index f402de4a..813ef567 100644 --- a/src/modules/helpers/stats.js +++ b/src/modules/helpers/stats.js @@ -21,7 +21,7 @@ export default class Stats { static async tabLoad() { const data = JSON.parse(localStorage.getItem('statsData')); - data['tabs-opened'] = data['tabs-opened'] + 1 || 1; + data['tabs-opened'] = data['tabs-opened'] + 1 || 1; localStorage.setItem('statsData', JSON.stringify(data)); } } diff --git a/src/modules/variables.js b/src/modules/variables.js index e6fe6ca0..0fea0e8f 100644 --- a/src/modules/variables.js +++ b/src/modules/variables.js @@ -5,10 +5,10 @@ const variables = { languagecode: '', stats: { tabLoad: () => '', - postEvent: () => '' + postEvent: () => '', }, //keybinds: {}, - constants: Constants + constants: Constants, }; export default variables; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 893b8951..6204cf37 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -61,7 +61,7 @@ $themes: ( 'color': rgb(0, 0, 0), 'subColor': #333333, 'borderRadius': 12px, - 'boxShadow': 0 0 0 1px #E7E3E9, + 'boxShadow': 0 0 0 1px #e7e3e9, 'btn-background': #fff, 'btn-backgroundHover': rgba(247, 250, 252, 0.9), 'modal-background': #fff, diff --git a/src/translations/id_ID.json b/src/translations/id_ID.json index 395d8a6c..40b05616 100644 --- a/src/translations/id_ID.json +++ b/src/translations/id_ID.json @@ -1,555 +1,554 @@ { - "tabname": "Tab Baru", - "widgets": { - "greeting": { - "morning": "Selamat Pagi", - "afternoon": "Selamat Siang", - "evening": "Selamat Malam", - "christmas": "Selamat Natal", - "newyear": "Selamat Tahun Baru", - "halloween": "Selamat Hari Halloween", - "birthday": "Selamat Ulang Tahun" - }, - "background": { - "credit": "Foto oleh", - "unsplash": "di Unsplash", - "pexels": "di Pexels", - "information": "Informasi", - "download": "Unduh" - }, - "search": "Cari", - "quicklinks": { - "new": "Pranala Baru", - "name": "Nama", - "url": "URL", - "icon": "Ikon (opsional)", - "add": "Tambah", - "name_error": "Harap cantumkan nama", - "url_error": "Harap cantumkan URL" - }, - "date": { - "week": "Pekan" - }, - "weather": { - "not_found": "Tidak Ditemukan", - "meters": "{amount} meter" - }, - "navbar": { - "tooltips": { - "refresh": "Muat Ulang" - }, - "notes": { - "title": "Catatan", - "placeholder": "Ketik di sini" - } - } + "tabname": "Tab Baru", + "widgets": { + "greeting": { + "morning": "Selamat Pagi", + "afternoon": "Selamat Siang", + "evening": "Selamat Malam", + "christmas": "Selamat Natal", + "newyear": "Selamat Tahun Baru", + "halloween": "Selamat Hari Halloween", + "birthday": "Selamat Ulang Tahun" }, - "modals": { - "main": { - "title": "Setelan", - "loading": "Sedang memuat...", - "file_upload_error": "Ukuran berkas lebih dari 2MB", - "navbar": { - "settings": "Pengaturan", - "addons": "Add-ons", - "marketplace": "Marketplace" + "background": { + "credit": "Foto oleh", + "unsplash": "di Unsplash", + "pexels": "di Pexels", + "information": "Informasi", + "download": "Unduh" + }, + "search": "Cari", + "quicklinks": { + "new": "Pranala Baru", + "name": "Nama", + "url": "URL", + "icon": "Ikon (opsional)", + "add": "Tambah", + "name_error": "Harap cantumkan nama", + "url_error": "Harap cantumkan URL" + }, + "date": { + "week": "Pekan" + }, + "weather": { + "not_found": "Tidak Ditemukan", + "meters": "{amount} meter" + }, + "navbar": { + "tooltips": { + "refresh": "Muat Ulang" + }, + "notes": { + "title": "Catatan", + "placeholder": "Ketik di sini" + } + } + }, + "modals": { + "main": { + "title": "Setelan", + "loading": "Sedang memuat...", + "file_upload_error": "Ukuran berkas lebih dari 2MB", + "navbar": { + "settings": "Pengaturan", + "addons": "Add-ons", + "marketplace": "Marketplace" + }, + "error_boundary": { + "title": "Galat", + "message": "Gagal memuat komponen Mue", + "refresh": "Muat Ulang" + }, + "settings": { + "enabled": "Aktif", + "reminder": { + "title": "PERHATIAN", + "message": "Agar semua perubahan dapat diterapkan, harap muat ulang halaman ini" }, - "error_boundary": { - "title": "Galat", - "message": "Gagal memuat komponen Mue", - "refresh": "Muat Ulang" - }, - "settings": { - "enabled": "Aktif", - "reminder": { - "title": "PERHATIAN", - "message": "Agar semua perubahan dapat diterapkan, harap muat ulang halaman ini" - }, - "sections": { - "time": { - "title": "Waktu", - "format": "Format", - "type": "Tipe", - "digital": { - "title": "Digital", - "seconds": "Detik", - "twentyfourhour": "24", - "twelvehour": "12 (AM/PM)", - "zero": "Zero-padded" - }, - "analogue": { - "title": "Analog", - "second_hand": "Jarum Detik", - "minute_hand": "Jarum Menit", - "hour_hand": "Jarum Jam", - "hour_marks": "Penanda Jam", - "minute_marks": "Penanda Menit" - }, - "percentage_complete": "Persentase" + "sections": { + "time": { + "title": "Waktu", + "format": "Format", + "type": "Tipe", + "digital": { + "title": "Digital", + "seconds": "Detik", + "twentyfourhour": "24", + "twelvehour": "12 (AM/PM)", + "zero": "Zero-padded" }, - "date": { - "title": "Tanggal", - "week_number": "Nomor Urut Pekan", - "day_of_week": "Hari", - "datenth": "Imbuhan nth", - "type": { - "short": "Ringkas", - "long": "Lengkap" - }, - "short_date": "Tanggal Ringkas", - "short_format": "Format Ringkas", - "short_separator": { - "title": "Pemisah", - "dots": "Titik", - "dash": "Setrip", - "gaps": "Spasi", - "slashes": "Garis Miring" + "analogue": { + "title": "Analog", + "second_hand": "Jarum Detik", + "minute_hand": "Jarum Menit", + "hour_hand": "Jarum Jam", + "hour_marks": "Penanda Jam", + "minute_marks": "Penanda Menit" + }, + "percentage_complete": "Persentase" + }, + "date": { + "title": "Tanggal", + "week_number": "Nomor Urut Pekan", + "day_of_week": "Hari", + "datenth": "Imbuhan nth", + "type": { + "short": "Ringkas", + "long": "Lengkap" + }, + "short_date": "Tanggal Ringkas", + "short_format": "Format Ringkas", + "short_separator": { + "title": "Pemisah", + "dots": "Titik", + "dash": "Setrip", + "gaps": "Spasi", + "slashes": "Garis Miring" + } + }, + "quote": { + "title": "Kutipan", + "author_link": "Pranala penulis", + "custom": "Kutipan kustom", + "custom_author": "Penulis kustom", + "add": "Tambahkan kutipan", + "buttons": { + "title": "Aksi", + "copy": "Salin", + "tweet": "Tweet", + "favourite": "Favorit" + } + }, + "greeting": { + "title": "Sapaan", + "events": "Hari Besar", + "default": "Sapaan bawaan", + "name": "Nama", + "birthday": "Hari Ulang Tahun", + "birthday_age": "Usia", + "birthday_date": "Tanggal Ulang Tahun" + }, + "background": { + "title": "Background", + "ddg_image_proxy": "Gunakan proksi gambar DuckDuckGo", + "transition": "Transisi Fade-in", + "photo_information": "Tampilkan informasi foto", + "show_map": "Tampilkan informasi lokasi foto jika ada", + "category": "Kategori", + "buttons": { + "title": "Aksi", + "view": "Layar Penuh", + "favourite": "Favorit", + "download": "Unduh" + }, + "effects": { + "title": "Efek", + "blur": "Sesuaikan blur", + "brightness": "Sesuaikan kecerahan", + "filters": { + "title": "Filter background", + "amount": "Sesuaikan filter", + "grayscale": "Grayscale", + "sepia": "Sepia", + "invert": "Invert", + "saturate": "Saturate", + "contrast": "Contrast" } }, + "type": { + "title": "Tipe", + "api": "API", + "custom_image": "Gambar kustom", + "custom_colour": "Warna/gradasi kustom", + "random_colour": "Warna acak", + "random_gradient": "Gradasi acak" + }, + "source": { + "title": "Sumber", + "api": "Background API", + "custom_background": "Background kustom", + "custom_colour": "Background warna kustom", + "upload": "Unggah", + "add_colour": "Tambah warna", + "add_background": "Tambah background", + "add_url": "Tambah URL", + "disabled": "Nonaktif", + "loop_video": "Ulang video", + "mute_video": "Bisukan video", + "quality": { + "title": "Kualitas", + "original": "Original", + "high": "High Quality", + "normal": "Normal Quality", + "datasaver": "Data Saver" + } + }, + "interval": { + "title": "Ubah setiap", + "minute": "Menit", + "half_hour": "Setengah jam", + "hour": "Jam", + "day": "Hari", + "month": "Bulan" + } + }, + "search": { + "title": "Cari", + "search_engine": "Mesin pencari", + "custom": "URL kustom", + "autocomplete": "Autocomplete", + "autocomplete_provider": "Provider Autocomplete", + "voice_search": "Pencarian suara", + "dropdown": "Dropdown pencarian" + }, + "weather": { + "title": "Cuaca", + "location": "Lokasi", + "auto": "Otomatis", + "temp_format": { + "title": "Format suhu", + "celsius": "Celsius", + "fahrenheit": "Fahrenheit", + "kelvin": "Kelvin" + }, + "extra_info": { + "title": "Informasi Tambahan", + "show_location": "Tampilkan lokasi", + "show_description": "Tampilkan deskripsi", + "cloudiness": "Kondisi awan", + "humidity": "Kelembapan", + "visibility": "Jarak pandang", + "wind_speed": "Kecepatan angin", + "wind_direction": "Arah angin", + "min_temp": "Temperatur minimal", + "max_temp": "Temperatur maksimal", + "atmospheric_pressure": "Tekanan atmosfer" + } + }, + "quicklinks": { + "title": "Pranala cepat", + "open_new": "Buka di tab baru", + "tooltip": "Tooltip", + "text_only": "Hanya teks" + }, + "message": { + "title": "Pesan", + "add": "Tambahkan pesan", + "text": "Teks" + }, + "appearance": { + "title": "Antarmuka", + "theme": { + "title": "Tema", + "auto": "Otomatis", + "light": "Light", + "dark": "Dark" + }, + "navbar": { + "title": "Navbar", + "notes": "Catatan", + "refresh": "Muat ulang", + "hover": "Tampilkan ketika hover", + "refresh_options": { + "none": "Nonaktif", + "page": "Halaman" + } + }, + "font": { + "title": "Font", + "custom": "Font kustom", + "google": "Impor dari Google Fonts", + "weight": { + "title": "Font weight", + "thin": "Thin", + "extra_light": "Extra Light", + "light": "Light", + "normal": "Normal", + "medium": "Medium", + "semi_bold": "Semi-Bold", + "bold": "Bold", + "extra_bold": "Extra-Bold" + }, + "style": { + "title": "Font style", + "normal": "Normal", + "italic": "Italic", + "oblique": "Oblique" + } + }, + "accessibility": { + "title": "Aksesibilitas", + "animations": "Animasi", + "text_shadow": "Widget text shadow", + "widget_zoom": "Widget zoom", + "toast_duration": "Durasi toast", + "milliseconds": "milliseconds" + } + }, + "order": { + "title": "Urutan Widget" + }, + "advanced": { + "title": "Lanjutan", + "offline_mode": "Mode Luring", + "data": "Data", + "reset_modal": { + "title": "PERINGATAN", + "question": "Apakah Anda ingin me-reset Mue?", + "information": "Aksi ini akan menghapus semua data Anda. Harap ekspor pengaturan Anda sebelum melakukan reset.", + "cancel": "Batal" + }, + "customisation": "Kustomisasi", + "custom_css": "CSS Kustom", + "custom_js": "JS Kustom", + "tab_name": "Nama tab", + "timezone": { + "title": "Zona Waktu", + "automatic": "Otomatis" + }, + "experimental_warning": "Harap diperhatikan bahwa tim Mue tidak menyediakan dukungan jika Anda mengaktifkan mode experimental. Harap nonaktifkan terlebih dahulu dan lihat apabila kendala Anda masih terjadi sebelum menghubungi kami." + }, + "stats": { + "title": "Statistik", + "warning": "Anda harus mengizinkan penggunaan data untuk menggunakan fitur ini. Data hanya akan disimpan di perangkat Anda saja.", + "sections": { + "tabs_opened": "Riwayat tab terbuka", + "backgrounds_favourited": "Backgrounds favorit", + "backgrounds_downloaded": "Backgrounds terunduh", + "quotes_favourited": "Kutipan favorit", + "quicklinks_added": "Pranala cepat ditambahkan", + "settings_changed": "Perubahan pengaturan", + "addons_installed": "Add-ons ditambahkan" + }, + "usage": "Statistik Penggunaan" + }, + "keybinds": { + "title": "Keybinds", + "recording": "Recording...", + "click_to_record": "Click to record", + "background": { + "favourite": "Favourite background", + "maximise": "Maximise background", + "download": "Download background", + "show_info": "Show background information" + }, "quote": { - "title": "Kutipan", - "author_link": "Pranala penulis", - "custom": "Kutipan kustom", - "custom_author": "Penulis kustom", - "add": "Tambahkan kutipan", - "buttons": { - "title": "Aksi", - "copy": "Salin", - "tweet": "Tweet", - "favourite": "Favorit" - } + "favourite": "Favourite quote", + "copy": "Copy quote", + "tweet": "Tweet quote" }, - "greeting": { - "title": "Sapaan", - "events": "Hari Besar", - "default": "Sapaan bawaan", - "name": "Nama", - "birthday": "Hari Ulang Tahun", - "birthday_age": "Usia", - "birthday_date": "Tanggal Ulang Tahun" + "notes": { + "pin": "Pin notes", + "copy": "Copy notes" }, - "background": { - "title": "Background", - "ddg_image_proxy": "Gunakan proksi gambar DuckDuckGo", - "transition": "Transisi Fade-in", - "photo_information": "Tampilkan informasi foto", - "show_map": "Tampilkan informasi lokasi foto jika ada", - "category": "Kategori", - "buttons": { - "title": "Aksi", - "view": "Layar Penuh", - "favourite": "Favorit", - "download": "Unduh" - }, - "effects": { - "title": "Efek", - "blur": "Sesuaikan blur", - "brightness": "Sesuaikan kecerahan", - "filters": { - "title": "Filter background", - "amount": "Sesuaikan filter", - "grayscale": "Grayscale", - "sepia": "Sepia", - "invert": "Invert", - "saturate": "Saturate", - "contrast": "Contrast" - } - }, - "type": { - "title": "Tipe", - "api": "API", - "custom_image": "Gambar kustom", - "custom_colour": "Warna/gradasi kustom", - "random_colour": "Warna acak", - "random_gradient": "Gradasi acak" - }, - "source": { - "title": "Sumber", - "api": "Background API", - "custom_background": "Background kustom", - "custom_colour": "Background warna kustom", - "upload": "Unggah", - "add_colour": "Tambah warna", - "add_background": "Tambah background", - "add_url": "Tambah URL", - "disabled": "Nonaktif", - "loop_video": "Ulang video", - "mute_video": "Bisukan video", - "quality": { - "title": "Kualitas", - "original": "Original", - "high": "High Quality", - "normal": "Normal Quality", - "datasaver": "Data Saver" - } - }, - "interval": { - "title": "Ubah setiap", - "minute": "Menit", - "half_hour": "Setengah jam", - "hour": "Jam", - "day": "Hari", - "month": "Bulan" - } - }, - "search": { - "title": "Cari", - "search_engine": "Mesin pencari", - "custom": "URL kustom", - "autocomplete": "Autocomplete", - "autocomplete_provider": "Provider Autocomplete", - "voice_search": "Pencarian suara", - "dropdown": "Dropdown pencarian" - }, - "weather": { - "title": "Cuaca", - "location": "Lokasi", - "auto": "Otomatis", - "temp_format": { - "title": "Format suhu", - "celsius": "Celsius", - "fahrenheit": "Fahrenheit", - "kelvin": "Kelvin" - }, - "extra_info": { - "title": "Informasi Tambahan", - "show_location": "Tampilkan lokasi", - "show_description": "Tampilkan deskripsi", - "cloudiness": "Kondisi awan", - "humidity": "Kelembapan", - "visibility": "Jarak pandang", - "wind_speed": "Kecepatan angin", - "wind_direction": "Arah angin", - "min_temp": "Temperatur minimal", - "max_temp": "Temperatur maksimal", - "atmospheric_pressure": "Tekanan atmosfer" - } - }, - "quicklinks": { - "title": "Pranala cepat", - "open_new": "Buka di tab baru", - "tooltip": "Tooltip", - "text_only": "Hanya teks" - }, - "message": { - "title": "Pesan", - "add": "Tambahkan pesan", - "text": "Teks" - }, - "appearance": { - "title": "Antarmuka", - "theme": { - "title": "Tema", - "auto": "Otomatis", - "light": "Light", - "dark": "Dark" - }, - "navbar": { - "title": "Navbar", - "notes": "Catatan", - "refresh": "Muat ulang", - "hover": "Tampilkan ketika hover", - "refresh_options": { - "none": "Nonaktif", - "page": "Halaman" - } - }, - "font": { - "title": "Font", - "custom": "Font kustom", - "google": "Impor dari Google Fonts", - "weight": { - "title": "Font weight", - "thin": "Thin", - "extra_light": "Extra Light", - "light": "Light", - "normal": "Normal", - "medium": "Medium", - "semi_bold": "Semi-Bold", - "bold": "Bold", - "extra_bold": "Extra-Bold" - }, - "style": { - "title": "Font style", - "normal": "Normal", - "italic": "Italic", - "oblique": "Oblique" - } - }, - "accessibility": { - "title": "Aksesibilitas", - "animations": "Animasi", - "text_shadow": "Widget text shadow", - "widget_zoom": "Widget zoom", - "toast_duration": "Durasi toast", - "milliseconds": "milliseconds" - } - }, - "order": { - "title": "Urutan Widget" - }, - "advanced": { - "title": "Lanjutan", - "offline_mode": "Mode Luring", - "data": "Data", - "reset_modal": { - "title": "PERINGATAN", - "question": "Apakah Anda ingin me-reset Mue?", - "information": "Aksi ini akan menghapus semua data Anda. Harap ekspor pengaturan Anda sebelum melakukan reset.", - "cancel": "Batal" - }, - "customisation": "Kustomisasi", - "custom_css": "CSS Kustom", - "custom_js": "JS Kustom", - "tab_name": "Nama tab", - "timezone": { - "title": "Zona Waktu", - "automatic": "Otomatis" - }, - "experimental_warning": "Harap diperhatikan bahwa tim Mue tidak menyediakan dukungan jika Anda mengaktifkan mode experimental. Harap nonaktifkan terlebih dahulu dan lihat apabila kendala Anda masih terjadi sebelum menghubungi kami." - }, - "stats": { - "title": "Statistik", - "warning": "Anda harus mengizinkan penggunaan data untuk menggunakan fitur ini. Data hanya akan disimpan di perangkat Anda saja.", - "sections": { - "tabs_opened": "Riwayat tab terbuka", - "backgrounds_favourited": "Backgrounds favorit", - "backgrounds_downloaded": "Backgrounds terunduh", - "quotes_favourited": "Kutipan favorit", - "quicklinks_added": "Pranala cepat ditambahkan", - "settings_changed": "Perubahan pengaturan", - "addons_installed": "Add-ons ditambahkan" - }, - "usage": "Statistik Penggunaan" - }, - "keybinds": { - "title": "Keybinds", - "recording": "Recording...", - "click_to_record": "Click to record", - "background": { - "favourite": "Favourite background", - "maximise": "Maximise background", - "download": "Download background", - "show_info": "Show background information" - }, - "quote": { - "favourite": "Favourite quote", - "copy": "Copy quote", - "tweet": "Tweet quote" - }, - "notes": { - "pin": "Pin notes", - "copy": "Copy notes" - }, - "search": "Focus search", - "quicklinks": "Toggle add quick link", - "modal": "Toggle modal" - }, - "experimental": { - "title": "Experimental", - "warning": "These settings have not been fully tested/implemented and may not work correctly!", - "developer": "Developer" - }, - "language": { - "title": "Bahasa", - "quote": "Bahasa untuk kutipan" - }, - "changelog": { - "title": "Changelog", - "by": "Oleh {author}" - }, - "about": { - "title": "Tentang Mue", - "copyright": "Hak Cipta", - "version": { - "title": "Versi", - "checking_update": "Periksa pembaruan", - "update_available": "Pembaruan tersedia", - "no_update": "Tidak ada pembaruan", - "offline_mode": "Periksa pembaruan tidak dapat dilakukan pada mode luring", - "error": { - "title": "Gagal mendapatkan informasi pembaruan", - "description": "Muncul galat saat mencoba mendapatkan informasi pembaruan. Harap coba lagi nanti." - } - }, - "contact_us": "Hubungi Kami", - "support_mue": "Dukung Mue", - "resources_used": { - "title": "Resources yang kami gunakan", - "bg_images": "Offline background images" - }, - "contributors": "Kontributor", - "supporters": "Suporter", - "no_supporters": "Mue belum punya suporter saat ini.", - "photographers": "Fotografer" - } + "search": "Focus search", + "quicklinks": "Toggle add quick link", + "modal": "Toggle modal" }, - "buttons": { - "reset": "Reset", - "import": "Impor", - "export": "Ekspor" - } - }, - "marketplace": { - "photo_packs": "Photo Packs", - "quote_packs": "Quote Packs", - "preset_settings": "Preset Settings", - "no_items": "Tidak ada item pada kategori ini", - "product": { - "overview": "Ikhtisar", - "information": "Informasi", - "last_updated": "Pembaruan Terakhir", - "version": "Versi", - "author": "Kreator", - "buttons": { - "addtomue": "Tambahkan ke Mue", - "remove": "Hapus", - "update_addon": "Perbarui Add-on" - }, - "quote_warning": { - "title": "Peringatan", - "description": "Quote pack ini membutuhkan peladen eksternal yang mungkin melacak Anda!" - } - }, - "offline": { - "title": "Sepertinya Anda sedang dalam mode luring", - "description": "Harap periksa kembali koneksi Anda dan coba lagi nanti" - } - }, - "addons": { - "added": "Terinstal", - "check_updates": "Periksa pembaruan", - "no_updates": "Tidak ada pembaruan", - "updates_available": "Terdapat {amount} pembaruan", - "empty": { - "title": "Kosong", - "description": "Belum ada addons yang terinstal" - }, - "sideload": { - "title": "Sideload", - "failed": "Failed to sideload addon", - "errors": { - "no_name": "No name provided", - "no_author": "No author provided", - "no_type": "No type provided", - "invalid_photos": "Invalid photos object", - "invalid_quotes": "Invalid quotes object" - } - }, - "sort": { - "title": "Urutkan", - "newest": "Terinstal (Terbaru)", - "oldest": "Terinstal (Terlama)", - "a_z": "Abjad (A-Z)", - "z_a": "Abjad (Z-A)" - }, - "create": { - "title": "Buat", - "other_title": "Buat Add-on", - "metadata": { - "name": "Nama", - "icon_url": "URL Ikon", - "screenshot_url": "URL Screenshot", - "description": "Deskripsi" - }, - "finish": { - "title": "Selesai", - "download": "Unduh Add-on" - }, - "settings": { - "current": "Impor", - "json": "Unggah JSON" - }, - "photos": { - "title": "Tambahkan foto" - }, - "quotes": { - "title": "Tambahkan Kutipan", - "api": { - "title": "API", - "url": "URL Kutipan", - "name": "Nama Kutipan", - "author": "Penulis kutipan" - }, - "local": { - "title": "Lokal" - } - } - } - } - }, - "update": { - "title": "Pembaruan", - "offline": { - "title": "Anda dalam mode luring", - "description": "Tidak dapat memeriksa pembaruan. Harap periksa kembali koneksi Anda dan coba lagi nanti." - }, - "error": { - "title": "Galat", - "description": "Tidak dapat terhubung ke peladen" - } - }, - "welcome": { - "tip": "Tip", - "sections": { - "intro": { - "title": "Selamat datang di Mue Tab", - "description": "Terima kasih sudah menginstal Mue, kami harap Anda dapat menikmati pengalaman bersama Mue" + "experimental": { + "title": "Experimental", + "warning": "These settings have not been fully tested/implemented and may not work correctly!", + "developer": "Developer" }, "language": { - "title": "Pilih bahasa", - "description": "Antarmuka Mue dapat ditampilkan dalam ragam bahasa berikut. Kamu juga bisa menambahkan terjemahan baru untuk Mue pada" + "title": "Bahasa", + "quote": "Bahasa untuk kutipan" }, - "theme": { - "title": "Pilih tema", - "description": "Mue tersedia dalam tema terang dan gelap, atau kami juga bisa mengaturnya secara otomatis sesuai dengan preferensi sistem Anda.", - "tip": "Pengaturan otomatis akan menyesuaikan dengan tema komputer Anda. Pengaturan ini akan mengubah tampilan modal dan beberapa widget, seperti Cuaca dan Catatan." + "changelog": { + "title": "Changelog", + "by": "Oleh {author}" }, - "settings": { - "title": "Impor Pengaturan", - "description": "Sudah pernah menginstal Mue? Yuk coba impor pengaturan lama kamu tanpa perlu mengatur ulang dari awal!", - "tip": "Kamu bisa mengekspor pengaturan lama kamu melalui tab lanjutan pada Pengaturan. Klik tombol ekspor untuk mengunduh berkas JSON. Unggah berkas tersebut di sini sehingga kamu dapat menikmati preferensi yang sama pada perangkat yang berbeda!" - }, - "privacy": { - "title": "Opsi Privasi", - "description": "Aktifkan pegaturan sehingga Mue dapat melindungi privasi Anda.", - "offline_mode_description": "Mengaktifkan mode luring akan menghalangi request ke semua layanan, termasuk Background Online, Kutipan Daring, Marketplace, Cuaca, Pranala Cepat, Change Log, dan beberapa informasi tentang tab.", - "ddg_proxy_description": "Anda dapat membuat permintaan gambar melalui DuckDuckGo jika Anda mau. Secara bawaan, permintaan API dilakukan melalui peladen terbuka kami sedangkan permintaan gambar melalui peladen original. Menonaktifkan pengaturan ini untuk Pranala Cepat akan mendapatkan ikon dari Google, bukan DuckDuckGo. Proksi DuckDuckGo selalu diaktifkan untuk Marketplace.", - "links": { - "title": "Pranala", - "privacy_policy": "Kebijakan Privasi", - "source_code": "Source Code" - } - }, - "final": { - "title": "Langkah terakhir", - "description": "Pengalaman Mue Tab Anda akan segera dimulai!", - "changes": "Perubahan", - "changes_description": "Untuk mengubah pengaturan lainnya, klik pada ikon pengaturan di pojok kanan atas tab Anda.", - "imported": "Berhasil mengimpor {amount} pengaturan" + "about": { + "title": "Tentang Mue", + "copyright": "Hak Cipta", + "version": { + "title": "Versi", + "checking_update": "Periksa pembaruan", + "update_available": "Pembaruan tersedia", + "no_update": "Tidak ada pembaruan", + "offline_mode": "Periksa pembaruan tidak dapat dilakukan pada mode luring", + "error": { + "title": "Gagal mendapatkan informasi pembaruan", + "description": "Muncul galat saat mencoba mendapatkan informasi pembaruan. Harap coba lagi nanti." + } + }, + "contact_us": "Hubungi Kami", + "support_mue": "Dukung Mue", + "resources_used": { + "title": "Resources yang kami gunakan", + "bg_images": "Offline background images" + }, + "contributors": "Kontributor", + "supporters": "Suporter", + "no_supporters": "Mue belum punya suporter saat ini.", + "photographers": "Fotografer" } }, "buttons": { - "next": "Selanjutnya", - "preview": "Pratinjau", - "previous": "Kembali", - "close": "Tutup" + "reset": "Reset", + "import": "Impor", + "export": "Ekspor" + } + }, + "marketplace": { + "photo_packs": "Photo Packs", + "quote_packs": "Quote Packs", + "preset_settings": "Preset Settings", + "no_items": "Tidak ada item pada kategori ini", + "product": { + "overview": "Ikhtisar", + "information": "Informasi", + "last_updated": "Pembaruan Terakhir", + "version": "Versi", + "author": "Kreator", + "buttons": { + "addtomue": "Tambahkan ke Mue", + "remove": "Hapus", + "update_addon": "Perbarui Add-on" + }, + "quote_warning": { + "title": "Peringatan", + "description": "Quote pack ini membutuhkan peladen eksternal yang mungkin melacak Anda!" + } }, - "preview": { - "description": "Kamu dalam mode Pratinjau. Pengaturan akan direset ketika tab ini ditutup.", - "continue": "Lanjutkan setup" + "offline": { + "title": "Sepertinya Anda sedang dalam mode luring", + "description": "Harap periksa kembali koneksi Anda dan coba lagi nanti" + } + }, + "addons": { + "added": "Terinstal", + "check_updates": "Periksa pembaruan", + "no_updates": "Tidak ada pembaruan", + "updates_available": "Terdapat {amount} pembaruan", + "empty": { + "title": "Kosong", + "description": "Belum ada addons yang terinstal" + }, + "sideload": { + "title": "Sideload", + "failed": "Failed to sideload addon", + "errors": { + "no_name": "No name provided", + "no_author": "No author provided", + "no_type": "No type provided", + "invalid_photos": "Invalid photos object", + "invalid_quotes": "Invalid quotes object" + } + }, + "sort": { + "title": "Urutkan", + "newest": "Terinstal (Terbaru)", + "oldest": "Terinstal (Terlama)", + "a_z": "Abjad (A-Z)", + "z_a": "Abjad (Z-A)" + }, + "create": { + "title": "Buat", + "other_title": "Buat Add-on", + "metadata": { + "name": "Nama", + "icon_url": "URL Ikon", + "screenshot_url": "URL Screenshot", + "description": "Deskripsi" + }, + "finish": { + "title": "Selesai", + "download": "Unduh Add-on" + }, + "settings": { + "current": "Impor", + "json": "Unggah JSON" + }, + "photos": { + "title": "Tambahkan foto" + }, + "quotes": { + "title": "Tambahkan Kutipan", + "api": { + "title": "API", + "url": "URL Kutipan", + "name": "Nama Kutipan", + "author": "Penulis kutipan" + }, + "local": { + "title": "Lokal" + } + } } } }, - "toasts": { - "quote": "Berhasil menyalin kutipan", - "notes": "Berhasil menyalin catatan", - "reset": "Reset berhasil", - "installed": "Berhasil menginstal", - "uninstalled": "Berhasil menghapus", - "updated": "Berhasil diperbarui", - "error": "Terdapat kesalahan", - "imported": "Berhasil mengimpor" + "update": { + "title": "Pembaruan", + "offline": { + "title": "Anda dalam mode luring", + "description": "Tidak dapat memeriksa pembaruan. Harap periksa kembali koneksi Anda dan coba lagi nanti." + }, + "error": { + "title": "Galat", + "description": "Tidak dapat terhubung ke peladen" + } + }, + "welcome": { + "tip": "Tip", + "sections": { + "intro": { + "title": "Selamat datang di Mue Tab", + "description": "Terima kasih sudah menginstal Mue, kami harap Anda dapat menikmati pengalaman bersama Mue" + }, + "language": { + "title": "Pilih bahasa", + "description": "Antarmuka Mue dapat ditampilkan dalam ragam bahasa berikut. Kamu juga bisa menambahkan terjemahan baru untuk Mue pada" + }, + "theme": { + "title": "Pilih tema", + "description": "Mue tersedia dalam tema terang dan gelap, atau kami juga bisa mengaturnya secara otomatis sesuai dengan preferensi sistem Anda.", + "tip": "Pengaturan otomatis akan menyesuaikan dengan tema komputer Anda. Pengaturan ini akan mengubah tampilan modal dan beberapa widget, seperti Cuaca dan Catatan." + }, + "settings": { + "title": "Impor Pengaturan", + "description": "Sudah pernah menginstal Mue? Yuk coba impor pengaturan lama kamu tanpa perlu mengatur ulang dari awal!", + "tip": "Kamu bisa mengekspor pengaturan lama kamu melalui tab lanjutan pada Pengaturan. Klik tombol ekspor untuk mengunduh berkas JSON. Unggah berkas tersebut di sini sehingga kamu dapat menikmati preferensi yang sama pada perangkat yang berbeda!" + }, + "privacy": { + "title": "Opsi Privasi", + "description": "Aktifkan pegaturan sehingga Mue dapat melindungi privasi Anda.", + "offline_mode_description": "Mengaktifkan mode luring akan menghalangi request ke semua layanan, termasuk Background Online, Kutipan Daring, Marketplace, Cuaca, Pranala Cepat, Change Log, dan beberapa informasi tentang tab.", + "ddg_proxy_description": "Anda dapat membuat permintaan gambar melalui DuckDuckGo jika Anda mau. Secara bawaan, permintaan API dilakukan melalui peladen terbuka kami sedangkan permintaan gambar melalui peladen original. Menonaktifkan pengaturan ini untuk Pranala Cepat akan mendapatkan ikon dari Google, bukan DuckDuckGo. Proksi DuckDuckGo selalu diaktifkan untuk Marketplace.", + "links": { + "title": "Pranala", + "privacy_policy": "Kebijakan Privasi", + "source_code": "Source Code" + } + }, + "final": { + "title": "Langkah terakhir", + "description": "Pengalaman Mue Tab Anda akan segera dimulai!", + "changes": "Perubahan", + "changes_description": "Untuk mengubah pengaturan lainnya, klik pada ikon pengaturan di pojok kanan atas tab Anda.", + "imported": "Berhasil mengimpor {amount} pengaturan" + } + }, + "buttons": { + "next": "Selanjutnya", + "preview": "Pratinjau", + "previous": "Kembali", + "close": "Tutup" + }, + "preview": { + "description": "Kamu dalam mode Pratinjau. Pengaturan akan direset ketika tab ini ditutup.", + "continue": "Lanjutkan setup" + } } + }, + "toasts": { + "quote": "Berhasil menyalin kutipan", + "notes": "Berhasil menyalin catatan", + "reset": "Reset berhasil", + "installed": "Berhasil menginstal", + "uninstalled": "Berhasil menghapus", + "updated": "Berhasil diperbarui", + "error": "Terdapat kesalahan", + "imported": "Berhasil mengimpor" } - \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js index 24c45831..c40527e3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,36 +7,38 @@ module.exports = { entry: path.resolve(__dirname, './src/index.js'), mode: 'development', performance: { - hints: false + hints: false, }, module: { - rules: [{ - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: ['babel-loader'] - }, - { - test: /\.(|sc|c)ss$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: '' + rules: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: ['babel-loader'], + }, + { + test: /\.(|sc|c)ss$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: '', + }, }, - }, - 'css-loader', - 'sass-loader' - ], - }, - { - test: /\.(woff|woff2|svg)$/, - type: 'asset/resource' - }, - { - test: /\.js$/, - enforce: 'pre', - use: ['source-map-loader'] - }] + 'css-loader', + 'sass-loader', + ], + }, + { + test: /\.(woff|woff2|svg)$/, + type: 'asset/resource', + }, + { + test: /\.js$/, + enforce: 'pre', + use: ['source-map-loader'], + }, + ], }, resolve: { extensions: ['.js', '.jsx'], @@ -44,42 +46,43 @@ module.exports = { components: path.resolve(__dirname, './src/components'), modules: path.resolve(__dirname, './src/modules'), translations: path.resolve(__dirname, './src/translations'), - scss: path.resolve(__dirname, './src/scss') - } + scss: path.resolve(__dirname, './src/scss'), + }, }, output: { path: path.resolve(__dirname, './build'), filename: '[name].[chunkhash].js', chunkFilename: '[id].[chunkhash].chunk.js', - clean: true + clean: true, }, devServer: { static: path.resolve(__dirname, './build'), open: true, - port: 3000 + port: 3000, }, plugins: [ new HtmlWebpackPlugin({ - template: path.resolve(__dirname, './public/index.html') + template: path.resolve(__dirname, './public/index.html'), }), new CopyPlugin({ - patterns: [{ + patterns: [ + { from: 'public/icons', - to: 'icons' + to: 'icons', }, { from: 'public/offline-images', - to: 'offline-images' + to: 'offline-images', }, { from: 'public/welcome-images', - to: 'welcome-images' - } - ] + to: 'welcome-images', + }, + ], }), new MiniCssExtractPlugin({ filename: '[name].[chunkhash].css', - chunkFilename: '[id].[chunkhash].chunk.css' + chunkFilename: '[id].[chunkhash].chunk.css', }), - ] + ], };