diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..de931c6c
Binary files /dev/null and b/.DS_Store differ
diff --git a/prettierrc b/prettierrc
new file mode 100644
index 00000000..ef0350af
--- /dev/null
+++ b/prettierrc
@@ -0,0 +1,7 @@
+{
+ "printWidth": 100,
+ "trailingComma": "all",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true
+ }
\ No newline at end of file
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index ae220fff..07ea704e 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,12 +84,14 @@ 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) {
@@ -102,7 +104,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,
@@ -115,9 +117,9 @@ export default class Create extends PureComponent {
addonMetadata,
},
addonData: {
- url: '',
- name: '',
- author: '',
+ url: "",
+ name: "",
+ author: "",
},
});
}
@@ -126,38 +128,45 @@ 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({
@@ -171,20 +180,23 @@ 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 = (
<>
@@ -192,7 +204,8 @@ 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
@@ -202,17 +215,28 @@ export default class Create extends PureComponent {
-
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")}
+
@@ -232,13 +256,19 @@ 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,
},
});
@@ -248,7 +278,7 @@ export default class Create extends PureComponent {
<>
-
+
Create {this.state.addonMetadata.type} Pack
Description of what is being made
@@ -258,234 +288,269 @@ 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")}
/>
- this.changeTab(1)} className="uploadbg">
- {getMessage('modals.welcome.buttons.previous')}
+ this.changeTab(1)}>
+ {getMessage("modals.welcome.buttons.previous")}
this.changeTab(this.state.addonMetadata.type)}
- className="uploadbg"
disabled={nextDescriptionDisabled}
>
- {getMessage('modals.welcome.buttons.next')}
+ {getMessage("modals.welcome.buttons.next")}
>
);
// settings
- const nextSettingsDisabled = this.state.addonData === '';
+ const nextSettingsDisabled = this.state.addonData === "";
const importSettings = (
<>
- {getMessage('modals.welcome.sections.settings.title')}
-
-
-
this.importSettings()}
- >
-
- {getMessage('modals.main.addons.create.settings.current')}
-
-
document.getElementById('file-input').click()}
- >
-
-
{getMessage('modals.main.addons.create.settings.json')}
+
+
+
+
this.importSettings()}
+ >
+
+
+ {getMessage("modals.main.addons.create.settings.current")}
+
+
+
document.getElementById("file-input").click()}
+ >
+
+
+ {getMessage("modals.main.addons.create.settings.json")}
+
+
+
+
+
+ this.importSettings(JSON.parse(e.target.result))
+ }
+ />
+
+
+ this.changeTab(2)}>
+ {getMessage("modals.welcome.buttons.previous")}
+
+ this.changeTab(3)}
+ disabled={nextSettingsDisabled}
+ >
+ {getMessage("modals.welcome.buttons.next")}
+
-
this.importSettings(JSON.parse(e.target.result))}
- />
-
-
- this.changeTab(2)} className="uploadbg" style={{ margin: '10px' }}>
- {getMessage('modals.welcome.buttons.previous')}
-
- this.changeTab(3)}
- className="uploadbg"
- style={{ margin: '10px' }}
- disabled={nextSettingsDisabled}
- >
- {getMessage('modals.welcome.buttons.next')}
-
>
);
// 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 = (
<>
- {getMessage('modals.main.addons.create.quotes.title')}
- this.updateQuotePackType(e)}
- >
-
- {getMessage('modals.main.addons.create.quotes.local.title')}
-
-
- {getMessage('modals.main.addons.create.quotes.api.title')}
-
-
- {this.state.addonMetadata.type === 'quote_api' ? (
+
+ this.updateQuotePackType(e)}
+ >
+
+ {getMessage("modals.main.addons.create.quotes.local.title")}
+
+
+ {getMessage("modals.main.addons.create.quotes.api.title")}
+
+
+
+ {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")}
+
-
- >
+
)}
- this.changeTab(2)} className="uploadbg">
- {getMessage('modals.welcome.buttons.previous')}
-
- this.changeTab(3)}
- className="uploadbg"
- style={{ margin: '10px' }}
- disabled={nextQuotesDisabled}
- >
- {getMessage('modals.welcome.buttons.next')}
-
+
+ this.changeTab(2)}>
+ {getMessage("modals.welcome.buttons.previous")}
+
+ this.changeTab(3)}
+ disabled={nextQuotesDisabled}
+ >
+ {getMessage("modals.welcome.buttons.next")}
+
+
>
);
// photos
const nextPhotosDisabled = !(
- this.state.addonData.photos !== '' && this.state.addonData.photos !== []
+ this.state.addonData.photos !== "" && this.state.addonData.photos !== []
);
const addPhotos = (
<>
- {getMessage('modals.main.addons.create.photos.title')}
-
-
-
this.importPhotos()}
- className="toggle lightTheme"
- style={{ width: '60%', margin: '10px 0 10px 0' }}
- >
-
-
{getMessage('modals.main.addons.create.settings.current')}
+
+
+
+
this.importPhotos()}
+ className="toggle lightTheme"
+ style={{ width: "60%", margin: "10px 0 10px 0" }}
+ >
+
+
+ {getMessage("modals.main.addons.create.settings.current")}
+
+
-
+
-
this.changeTab(2)} className="uploadbg">
- {getMessage('modals.welcome.buttons.previous')}
-
-
this.changeTab(3)}
- className="uploadbg"
- style={{ margin: '10px' }}
- disabled={nextPhotosDisabled}
- >
- {getMessage('modals.welcome.buttons.next')}
-
+
+ this.changeTab(2)}>
+ {getMessage("modals.welcome.buttons.previous")}
+
+ this.changeTab(3)}
+ disabled={nextPhotosDisabled}
+ >
+ {getMessage("modals.welcome.buttons.next")}
+
+
>
);
@@ -493,11 +558,12 @@ 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.
@@ -511,10 +577,12 @@ export default class Create extends PureComponent {
this.downloadAddon()}
className="toggle lightTheme"
- style={{ width: '60%', margin: '10px 0 10px 0' }}
+ style={{ width: "60%", margin: "10px 0 10px 0" }}
>
- {getMessage('modals.main.addons.create.finish.download')}
+
+ {getMessage("modals.main.addons.create.finish.download")}
+
@@ -523,15 +591,14 @@ export default class Create extends PureComponent {
this.changeTab(
- this.state.addonMetadata.type === 'quote_api'
- ? 'quotes'
- : this.state.addonMetadata.type,
+ this.state.addonMetadata.type === "quote_api"
+ ? "quotes"
+ : this.state.addonMetadata.type
)
}
- className="uploadbg"
disabled={nextDescriptionDisabled}
>
- {getMessage('modals.welcome.buttons.previous')}
+ {getMessage("modals.welcome.buttons.previous")}
{/*
{getMessage('modals.welcome.buttons.previous')}
*/}
@@ -554,13 +619,13 @@ export default class Create extends PureComponent {
case 2:
tabContent = writeDescription;
break;
- case 'settings':
+ case "settings":
tabContent = importSettings;
break;
- case 'quotes':
+ case "quotes":
tabContent = addQuotes;
break;
- case 'photos':
+ case "photos":
tabContent = addPhotos;
break;
case 3:
@@ -583,7 +648,9 @@ 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/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index a82e932f..b6488d14 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -1,113 +1 @@
@import 'scss/modules/buttons';
-/*
-.refresh {
- @extend %settingsButton;
-
- background-color: map-get($button-colours, 'confirm');
- border: 2px solid map-get($button-colours, 'confirm');
-
- &:hover {
- border: 2px solid map-get($button-colours, 'confirm');
- color: map-get($button-colours, 'confirm');
- }
-}
-
-.reset {
- @extend %settingsButton;
-
- background-color: map-get($button-colours, 'reset');
- border: 2px solid map-get($button-colours, 'reset');
-
- &:hover {
- border: 2px solid map-get($button-colours, 'reset');
- color: map-get($button-colours, 'reset');
- }
-}
-
-.add,
-.close {
- @extend %settingsButton;
-
- background-color: map-get($button-colours, 'other');
- border: 2px solid map-get($button-colours, 'other');
-
- &:hover {
- color: map-get($button-colours, 'other');
- border: 2px solid map-get($button-colours, 'other');
- }
-}
-
-.close {
- padding: 10px 50px 10px 50px;
-}
-
-.export,
-.uploadbg,
-.import {
- width: 440px;
- height: 60px;
- background-color: var(--sidebar);
- border: none;
- outline: none;
- color: var(--modal-text);
- border-radius: 12px;
- margin-right: 25px;
- width: 220px;
- cursor: pointer;
- border-radius: 24px;
- border: 3px solid var(--tab-active);
- font-size: 1rem;
-
- &:hover {
- background-color: var(--tab-active);
- }
-
- &:disabled {
- cursor: not-allowed;
- background: none;
- border: 1px solid var(--tab-active);
-
- &:hover {
- background: none;
- border: 1px solid var(--tab-active);
- }
- }
-}
-
-.export,
-.import {
- margin-left: 20px;
-}
-
-.round-small {
- height: 10px !important;
- width: 10px !important;
-}
-
-
-/* button {
- background: var(--sidebar);
- text-align: center;
- border-radius: 20px;
- padding: 20px;
- border: 3px solid var(--tab-active);
- height: 40px;
- font-size: 1rem;
- margin: 0 10px 10px 0;
- display: flex;
- flex-direction: column-reverse;
- align-items: center;
- color: var(--modal-text);
- transition: 0.5s;
-
- &:hover {
- background: var(--tab-active);
- cursor: pointer;
- }
-
-.customvideoicon {
- position: absolute;
- margin-bottom: 45px;
- font-size: 3em !important;
-}
-*/
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index 7a476ccc..1404386d 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -63,6 +63,7 @@ export default class SliderComponent extends PureComponent {
<>
{this.props.title}
+ {Number(this.state.value / 100)}x
{variables.language.getMessage(
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 7563eeef..a79dd21d 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
-import { MdEmail } from 'react-icons/md';
+import { MdEmail, MdContactPage } from 'react-icons/md';
import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
import { BiDonateHeart } from 'react-icons/bi';
@@ -179,6 +179,10 @@ export default class About extends PureComponent {
{this.getMessage('modals.main.settings.sections.about.contact_us')}