mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-18 06:24:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add work in progress 7.0 code

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2022-04-08 14:48:36 +01:00
parent e0820c6b2a
commit 361fae7f25
136 changed files with 8631 additions and 3500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/components/modals/main/settings/sections/About.jsx
View File

@@ -1,11 +1,13 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdEmail } from 'react-icons/md';
import { FaDiscord, FaTwitter } from 'react-icons/fa';
import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
import { SiKofi } from 'react-icons/si';
import Tooltip from 'components/helpers/tooltip/Tooltip';
import SettingsItem from '../SettingsItem';
const other_contributors = require('modules/other_contributors.json');
export default class About extends PureComponent {
@@ -19,7 +21,11 @@ export default class About extends PureComponent {
other_contributors: [],
photographers: this.getMessage('modals.main.loading'),
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage('modals.main.loading')
loading: this.getMessage('modals.main.loading'),
image:
localStorage.getItem('theme') === 'dark'
? './././icons/mue_dark.svg'
: './././icons/mue_light.svg',
};
this.controller = new AbortController();
}
@@ -28,10 +34,40 @@ export default class About extends PureComponent {
let contributors, sponsors, photographers, versionData;
try {
versionData = await (await fetch(variables.constants.GITHUB_URL + '/repos/' + variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/releases', { signal: this.controller.signal })).json();
contributors = await (await fetch(variables.constants.GITHUB_URL + '/repos/'+ variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/contributors', { signal: this.controller.signal })).json();
sponsors = (await (await fetch(variables.constants.SPONSORS_URL + '/list', { signal: this.controller.signal })).json()).sponsors;
photographers = await (await fetch(variables.constants.API_URL + '/images/photographers', { signal: this.controller.signal })).json();
versionData = await (
await fetch(
variables.constants.GITHUB_URL +
'/repos/' +
variables.constants.ORG_NAME +
'/' +
variables.constants.REPO_NAME +
'/releases',
{ signal: this.controller.signal },
)
).json();
contributors = await (
await fetch(
variables.constants.GITHUB_URL +
'/repos/' +
variables.constants.ORG_NAME +
'/' +
variables.constants.REPO_NAME +
'/contributors',
{ signal: this.controller.signal },
)
).json();
sponsors = (
await (
await fetch(variables.constants.SPONSORS_URL + '/list', {
signal: this.controller.signal,
})
).json()
).sponsors;
photographers = await (
await fetch(variables.constants.API_URL + '/images/photographers', {
signal: this.controller.signal,
})
).json();
} catch (e) {
if (this.controller.signal.aborted === true) {
return;
@@ -39,11 +75,11 @@ export default class About extends PureComponent {
return this.setState({
update: this.getMessage('modals.main.settings.sections.about.version.error.title'),
loading: this.getMessage('modals.main.settings.sections.about.version.error.description')
loading: this.getMessage('modals.main.settings.sections.about.version.error.description'),
});
}
if (sponsors.length === 0) {
if (sponsors.length === 0) {
sponsors = [{ handle: 'empty' }];
}
@@ -54,8 +90,13 @@ export default class About extends PureComponent {
const newVersion = versionData[0].tag_name;
let update = this.getMessage('modals.main.settings.sections.about.version.no_update');
if (Number(variables.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
update = `${this.getMessage('modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
if (
Number(variables.constants.VERSION.replaceAll('.', '')) <
Number(newVersion.replaceAll('.', ''))
) {
update = `${this.getMessage(
'modals.main.settings.sections.about.version.update_available',
)}: ${newVersion}`;
}
this.setState({
@@ -64,8 +105,8 @@ export default class About extends PureComponent {
sponsors,
update,
other_contributors,
photographers: photographers.sort().join(', '),
loading: null
photographers: photographers.sort().join(', '),
loading: null,
});
}
@@ -73,7 +114,7 @@ export default class About extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
this.setState({
update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
loading: this.getMessage('modals.main.marketplace.offline.description')
loading: this.getMessage('modals.main.marketplace.offline.description'),
});
return;
}
@@ -89,59 +130,189 @@ export default class About extends PureComponent {
render() {
return (
<>
<h2>{this.getMessage('modals.main.settings.sections.about.title')}</h2>
<img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
<p>{this.getMessage('modals.main.settings.sections.about.copyright')} {variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{variables.constants.COPYRIGHT_NAME}</a> ({variables.constants.COPYRIGHT_LICENSE})</p>
<p>{this.getMessage('modals.main.settings.sections.about.version.title')} {variables.constants.VERSION} ({this.state.update})</p>
<a href={variables.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.about.title')}
</span>
<SettingsItem>
<div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
<img draggable="false" className="aboutLogo" src={this.state.image} alt="Logo" />
<span className="title">
{this.getMessage('modals.main.settings.sections.about.version.title')}{' '}
{variables.constants.VERSION}
</span>
<span className="subtitle">({this.state.update})</span>
<span className="subtitle">
{this.getMessage('modals.main.settings.sections.about.copyright')}{' '}
{variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()}{' '}
<a
className="link"
href={
'https://github.com/' +
variables.constants.ORG_NAME +
'/' +
variables.constants.REPO_NAME +
'/graphs/contributors'
}
target="_blank"
rel="noopener noreferrer"
>
{variables.constants.COPYRIGHT_NAME}
</a>{' '}
({variables.constants.COPYRIGHT_LICENSE})
</span>
<span className="subtitle">
<a
href={variables.constants.PRIVACY_URL}
className="link"
target="_blank"
rel="noopener noreferrer"
>
{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
</a>
</span>
</div>
</SettingsItem>
<h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
<a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><MdEmail/></a>
<a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaTwitter/></a>
<a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaDiscord/></a>
<h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
<a href={'https://github.com/sponsors/' + variables.constants.SPONSORS_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiGithubsponsors/></a>
<a href={'https://liberapay.com/' + variables.constants.LIBERAPAY_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiLiberapay/></a>
<a href={'https://ko-fi.com/' + variables.constants.KOFI_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiKofi/></a>
<a href={'https://patreon.com/' + variables.constants.PATREON_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiPatreon/></a>
<h3>{this.getMessage('modals.main.settings.sections.about.resources_used.title')}</h3>
<p>
<a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
, <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
</p>
<h3>{this.getMessage('modals.main.settings.sections.about.contributors')}</h3>
<p>{this.state.loading}</p>
{this.state.contributors.map(({ login, id }) => (
<Tooltip title={login} key={login}>
<a href={'https://github.com/' + login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={'https://avatars.githubusercontent.com/u/' + id + '?s=128'} alt={login}></img></a>
</Tooltip>
))}
{ // for those who contributed without opening a pull request
this.state.other_contributors.map(({ login, avatar_url }) => (
<Tooltip title={login} key={login}>
<a href={'https://github.com/' + login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={avatar_url + '&s=128'} alt={login}></img></a>
</Tooltip>
))}
<h3>{this.getMessage('modals.main.settings.sections.about.supporters')}</h3>
<p>{this.state.loading}</p>
{this.state.sponsors.map(({ handle, avatar }) => {
if (handle === 'empty') {
return <p>{this.getMessage('modals.main.settings.sections.about.no_supporters')}</p>;
}
return (
<Tooltip title={handle} key={handle}>
<a href={'https://github.com/' + handle} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={avatar.split('?')[0] + '?s=128'} alt={handle}></img></a>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.contact_us')}
</span>
<div className="aboutContact">
<Tooltip title={'Email'}>
<a
href={'mailto:' + variables.constants.EMAIL}
target="_blank"
rel="noopener noreferrer"
>
<MdEmail />
</a>
</Tooltip>
)
})}
<Tooltip title={'Twitter'}>
<a
href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE}
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter />
</a>
</Tooltip>
<Tooltip title={'Discord'}>
<a
href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
target="_blank"
rel="noopener noreferrer"
>
<FaDiscord />
</a>
</Tooltip>
</div>
</div>
<h3>{this.getMessage('modals.main.settings.sections.about.photographers')}</h3>
<p>{this.state.photographers}</p>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.support_mue')}
</span>
<p>As Mue is entirely free, we rely on donations to cover pay the server bills and fund development</p>
<div className="aboutContact">
<a class='button' href={variables.constants.DONATE_LINK}>Donate</a>
</div>
</div>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.resources_used.title')}
</span>
<span className="subtitle">
<a
href="https://www.pexels.com"
className="link"
target="_blank"
rel="noopener noreferrer"
>
Pexels
</a>
,{' '}
<a
href="https://unsplash.com"
className="link"
target="_blank"
rel="noopener noreferrer"
>
Unsplash
</a>{' '}
({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
</span>
<span className="subtitle">
<a href="https://undraw.co" className="link" target="_blank" rel="noopener noreferrer">
Undraw
</a>{' '}
({this.getMessage('modals.main.settings.sections.about.resources_used.welcome_img')})
</span>
</div>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.contributors')}
</span>
<p>{this.state.loading}</p>
<div className="contributorImages">
{this.state.contributors.map(({ login, id }) => (
<Tooltip title={login} key={login}>
<a href={'https://github.com/' + login} target="_blank" rel="noopener noreferrer">
<img
draggable="false"
src={'https://avatars.githubusercontent.com/u/' + id + '?s=128'}
alt={login}
></img>
</a>
</Tooltip>
))}
{
// for those who contributed without opening a pull request
this.state.other_contributors.map(({ login, avatar_url }) => (
<Tooltip title={login} key={login}>
<a href={'https://github.com/' + login} target="_blank" rel="noopener noreferrer">
<img draggable="false" src={avatar_url + '&s=128'} alt={login}></img>
</a>
</Tooltip>
))
}
</div>
</div>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.supporters')}
</span>
<p>{this.state.loading}</p>
<div className="contributorImages">
{this.state.sponsors.map(({ handle, avatar }) => {
if (handle === 'empty') {
return (
<p>{this.getMessage('modals.main.settings.sections.about.no_supporters')}</p>
);
}
return (
<Tooltip title={handle} key={handle}>
<a
href={'https://github.com/' + handle}
target="_blank"
rel="noopener noreferrer"
>
<img draggable="false" src={avatar.split('?')[0] + '?s=128'} alt={handle}></img>
</a>
</Tooltip>
);
})}
</div>
</div>
<div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
<span className="title">
{this.getMessage('modals.main.settings.sections.about.photographers')}
</span>
<span className="subtitle">{this.state.photographers}</span>
</div>
</>
);
}

204
src/components/modals/main/settings/sections/Advanced.jsx
View File

@@ -1,73 +1,169 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import { MdUpload as ImportIcon, MdDownload as ExportIcon, MdRestartAlt as ResetIcon } from 'react-icons/md';
import variables from "modules/variables";
import { PureComponent } from "react";
import Modal from "react-modal";
import { MenuItem } from "@mui/material";
import {
MdUpload as ImportIcon,
MdDownload as ExportIcon,
MdRestartAlt as ResetIcon,
} from "react-icons/md";
import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
import {
exportSettings,
importSettings,
} from "modules/helpers/settings/modals";
import Checkbox from '../Checkbox';
import FileUpload from '../FileUpload';
import Text from '../Text';
import Switch from '../Switch';
import ResetModal from '../ResetModal';
import Dropdown from '../Dropdown';
import Checkbox from "../Checkbox";
import FileUpload from "../FileUpload";
import Text from "../Text";
import Switch from "../Switch";
import ResetModal from "../ResetModal";
import Dropdown from "../Dropdown";
import SettingsItem from "../SettingsItem";
const time_zones = require('components/widgets/time/timezones.json');
const time_zones = require("components/widgets/time/timezones.json");
export default class AdvancedSettings extends PureComponent {
constructor() {
super();
this.state = {
resetModal: false
resetModal: false,
};
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
return (
<>
<h2>{getMessage('modals.main.settings.sections.advanced.title')}</h2>
<Checkbox name='offlineMode' text={getMessage('modals.main.settings.sections.advanced.offline_mode')} element='.other' />
<Dropdown name='timezone' label={getMessage('modals.main.settings.sections.advanced.timezone.title')} category='timezone' manual={true}>
<MenuItem value='auto'>{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>{timezone}</MenuItem>
))}
</Dropdown>
<span className="mainTitle">
{getMessage("modals.main.settings.sections.advanced.title")}
</span>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.advanced.offline_mode"
)}
>
<Switch
name="offlineMode"
text={getMessage(
"modals.main.settings.sections.advanced.offline_mode"
)}
element=".other"
/>
</SettingsItem>
{localStorage.getItem("welcomePreview") !== "true" ? (
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.advanced.data")}
</span>
<span className="subtitle">
{getMessage(
"modals.main.settings.sections.advanced.experimental_warning"
)}
</span>
</div>
<div className="action activityButtons">
<button onClick={() => this.setState({ resetModal: true })}>
{getMessage("modals.main.settings.buttons.reset")}
<ResetIcon />
</button>
<button onClick={() => exportSettings()}>
{getMessage("modals.main.settings.buttons.export")}
<ExportIcon />
</button>
<button
onClick={() => document.getElementById("file-input").click()}
>
{getMessage("modals.main.settings.buttons.import")}
<ImportIcon />
</button>
</div>
</div>
) : null}
<SettingsItem title="This should really be in time">
<Dropdown
name="timezone"
label={getMessage(
"modals.main.settings.sections.advanced.timezone.title"
)}
category="timezone"
manual={true}
>
<MenuItem value="auto">
{getMessage(
"modals.main.settings.sections.advanced.timezone.automatic"
)}
</MenuItem>
{time_zones.map((timezone) => (
<MenuItem value={timezone} key={timezone}>
{timezone}
</MenuItem>
))}
</Dropdown>
</SettingsItem>
<SettingsItem
title={getMessage("modals.main.settings.sections.advanced.tab_name")}
>
<Text
title={getMessage(
"modals.main.settings.sections.advanced.tab_name"
)}
name="tabName"
default={getMessage("tabname")}
category="other"
/>
</SettingsItem>
<FileUpload
id="file-input"
accept="application/json"
type="settings"
loadFunction={(e) => importSettings(e)}
/>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.advanced.custom_css"
)}
>
<Text
title={getMessage(
"modals.main.settings.sections.advanced.custom_css"
)}
name="customcss"
textarea={true}
category="other"
/>
</SettingsItem>
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.experimental.title")}
</span>
<span className="subtitle">
{getMessage(
"modals.main.settings.sections.advanced.experimental_warning"
)}
</span>
</div>
<div className="action">
<Switch
name="experimental"
text={getMessage("modals.main.settings.enabled")}
element=".other"
/>
</div>
</div>
{localStorage.getItem('welcomePreview') !== 'true' ?
<>
<h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
<br/>
<div className='data-buttons-row'>
<button onClick={() => this.setState({ resetModal: true })}>
{getMessage('modals.main.settings.buttons.reset')}
<ResetIcon/>
</button>
<button onClick={() => exportSettings()}>
{getMessage('modals.main.settings.buttons.export')}
<ExportIcon/>
</button>
<button onClick={() => document.getElementById('file-input').click()}>
{getMessage('modals.main.settings.buttons.import')}
<ImportIcon/>
</button>
</div>
</>
: null}
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
<h3>{getMessage('modals.main.settings.sections.advanced.customisation')}</h3>
<Text title={getMessage('modals.main.settings.sections.advanced.tab_name')} name='tabName' default={getMessage('tabname')} category='other'/>
<Text title={getMessage('modals.main.settings.sections.advanced.custom_css')} name='customcss' textarea={true} category='other'/>
<h3>{getMessage('modals.main.settings.sections.experimental.title')}</h3>
<p style={{ maxWidth: '75%' }}>{getMessage('modals.main.settings.sections.advanced.experimental_warning')}</p>
<Switch name='experimental' text={getMessage('modals.main.settings.enabled')} element='.other'/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Modal
closeTimeoutMS={100}
onRequestClose={() => this.setState({ resetModal: false })}
isOpen={this.state.resetModal}
className="Modal resetmodal mainModal"
overlayClassName="Overlay resetoverlay"
ariaHideApp={false}
>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />
</Modal>
</>

238
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -1,62 +1,216 @@
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 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: "New",
value: "new",
},
];
return (
<>
<h2>{getMessage('modals.main.settings.sections.appearance.title')}</h2>
<Radio name='theme' title={getMessage('modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
<span className="mainTitle">
{getMessage("modals.main.settings.sections.appearance.title")}
</span>
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.appearance.theme.title")}
</span>
<span className="subtitle">subtitle</span>
</div>
<div className="action">
<Radio name="theme" options={themeOptions} category="other" />
</div>
</div>
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage("modals.main.settings.sections.appearance.font.title")}
</span>
<span className="subtitle">subtitle</span>
</div>
<div className="action">
<Checkbox
name="fontGoogle"
text={getMessage(
"modals.main.settings.sections.appearance.font.google"
)}
category="other"
/>
<Text
title={getMessage(
"modals.main.settings.sections.appearance.font.custom"
)}
name="font"
upperCaseFirst={true}
category="other"
/>
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.font.weight.title"
)}
name="fontweight"
category="other"
>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value="100">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.thin"
)}
</option>
<option value="200">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.extra_light"
)}
</option>
<option value="300">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.light"
)}
</option>
<option value="400">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.normal"
)}
</option>
<option value="500">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.medium"
)}
</option>
<option value="600">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.semi_bold"
)}
</option>
<option value="700">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.bold"
)}
</option>
<option value="800">
{getMessage(
"modals.main.settings.sections.appearance.font.weight.extra_bold"
)}
</option>
</Dropdown>
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.font.style.title"
)}
name="fontstyle"
category="other"
>
<option value="normal">
{getMessage(
"modals.main.settings.sections.appearance.font.style.normal"
)}
</option>
<option value="italic">
{getMessage(
"modals.main.settings.sections.appearance.font.style.italic"
)}
</option>
<option value="oblique">
{getMessage(
"modals.main.settings.sections.appearance.font.style.oblique"
)}
</option>
</Dropdown>
</div>
</div>
<SettingsItem
title="Widget Style"
subtitle="Choose between the two styles, legacy (enabled for pre 7.0 users) and our slick modern styling."
>
<Radio name="widgetStyle" options={styleOptions} category="widgets" />
</SettingsItem>
<h3>{getMessage('modals.main.settings.sections.appearance.font.title')}</h3>
<Text title={getMessage('modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
<br/>
<Checkbox name='fontGoogle' text={getMessage('modals.main.settings.sections.appearance.font.google')} category='other' />
<Dropdown label={getMessage('modals.main.settings.sections.appearance.font.weight.title')} name='fontweight' category='other'>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value='100'>{getMessage('modals.main.settings.sections.appearance.font.weight.thin')}</option>
<option value='200'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
<option value='300'>{getMessage('modals.main.settings.sections.appearance.font.weight.light')}</option>
<option value='400'>{getMessage('modals.main.settings.sections.appearance.font.weight.normal')}</option>
<option value='500'>{getMessage('modals.main.settings.sections.appearance.font.weight.medium')}</option>
<option value='600'>{getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
<option value='700'>{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}</option>
<option value='800'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
</Dropdown>
<Dropdown label={getMessage('modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
<option value='normal'>{getMessage('modals.main.settings.sections.appearance.font.style.normal')}</option>
<option value='italic'>{getMessage('modals.main.settings.sections.appearance.font.style.italic')}</option>
<option value='oblique'>{getMessage('modals.main.settings.sections.appearance.font.style.oblique')}</option>
</Dropdown>
<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
{/*<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' marks={values('toast')} toast={true}
display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' marks={values('toast')}
display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />*/}
<div className="settingsRow">
<div className="content">
<span className="title">
{getMessage(
"modals.main.settings.sections.appearance.accessibility.title"
)}
</span>
<span className="subtitle">subtitle</span>
</div>
<div className="action">
<Dropdown
label={getMessage(
"modals.main.settings.sections.appearance.accessibility.text_shadow"
)}
name="textBorder"
category="other"
>
<option value="new">New</option> {/* default */}
<option value="true">Old</option> {/* old checkbox setting */}
<option value="none">None</option>
</Dropdown>
<Checkbox
text={getMessage(
"modals.main.settings.sections.appearance.accessibility.animations"
)}
name="animations"
category="other"
/>
<Slider
title={getMessage(
"modals.main.settings.sections.appearance.accessibility.toast_duration"
)}
name="toastDisplayTime"
default="2500"
step="100"
min="500"
max="5000"
marks={values("toast")}
display={
" " +
getMessage(
"modals.main.settings.sections.appearance.accessibility.milliseconds"
)
}
/>
</div>
</div>
</>
);
}

124
src/components/modals/main/settings/sections/Changelog.jsx
View File

@@ -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() {
@@ -11,63 +11,71 @@ export default class Changelog extends PureComponent {
this.state = {
title: null,
showLightbox: false,
lightboxImg: null
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', { signal: this.controller.signal })).json();
const data = await (
await fetch(variables.constants.BLOG_POST + "/index.json", {
signal: this.controller.signal,
})
).json();
if (this.controller.signal.aborted === true) {
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({
title: data.title,
date,
image: data.featured_image || null,
author: variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.changelog.by', {
author: data.authors.join(', ')
}),
html: data.html
author: variables.language.getMessage(
variables.languagecode,
"modals.main.settings.sections.changelog.by",
{
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;
img.onclick = () => {
this.setState({
showLightbox: true,
lightboxImg: img.src
lightboxImg: img.src,
});
};
}
// 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";
}
}
componentDidMount() {
if (navigator.onLine === false || this.offlineMode) {
return;
}
this.getUpdate();
}
@@ -77,38 +85,68 @@ 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 (
<div className='emptyitems'>
<div className='emptyMessage'>
{msg}
</div>
<div className="emptyItems">
<div className="emptyMessage">{msg}</div>
</div>
);
};
if (navigator.onLine === false || this.offlineMode) {
return errorMessage(<>
<MdOutlineWifiOff/>
<h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
<p className='description'>{getMessage('modals.main.marketplace.offline.description')}</p>
</>);
if (navigator.onLine === false || this.offlineMode) {
return errorMessage(
<>
<MdOutlineWifiOff />
<h1>{getMessage("modals.main.marketplace.offline.title")}</h1>
<p className="description">
{getMessage("modals.main.marketplace.offline.description")}
</p>
</>
);
}
if (!this.state.title) {
return errorMessage(<h1>{getMessage('modals.main.loading')}</h1>);
return errorMessage(
<div className="loaderHolder">
<div id="loader"></div>
<span className="subtitle">Just be a sec.</span>
</div>
);
}
return (
<div className='changelogtab' ref={this.changelog}>
<div className="changelogtab" ref={this.changelog}>
<h1>{this.state.title}</h1>
<h5>{this.state.author} • {this.state.date}</h5>
{this.state.image ? <img draggable='false' src={this.state.image} alt={this.state.title} className='updateimage'/> : null}
<div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<Lightbox modalClose={() => this.setState({ showLightbox: false })} img={this.state.lightboxImg}/>
<h5>
{this.state.author} • {this.state.date}
</h5>
{this.state.image ? (
<img
draggable="false"
src={this.state.image}
alt={this.state.title}
className="updateImage"
/>
) : null}
<div
className="updateChangelog"
dangerouslySetInnerHTML={{ __html: this.state.html }}
/>
<Modal
closeTimeoutMS={100}
onRequestClose={() => this.setState({ showLightbox: false })}
isOpen={this.state.showLightbox}
className="Modal lightBoxModal"
overlayClassName="Overlay resetoverlay"
ariaHideApp={false}
>
<Lightbox
modalClose={() => this.setState({ showLightbox: false })}
img={this.state.lightboxImg}
/>
</Modal>
</div>
);

135
src/components/modals/main/settings/sections/Date.jsx
View File

@@ -1,49 +1,93 @@
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 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 = (
<>
<Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.date.day_of_week')} category='date' />
<Checkbox name='datenth' text={getMessage('modals.main.settings.sections.date.datenth')} category='date' />
<Dropdown
label="Long Format"
name="longFormat"
category="date"
>
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</Dropdown>
<Checkbox
name="dayofweek"
text={getMessage("modals.main.settings.sections.date.day_of_week")}
category="date"
/>
<Checkbox
name="datenth"
text={getMessage("modals.main.settings.sections.date.datenth")}
category="date"
/>
</>
);
const shortSettings = (
<>
<Dropdown label={getMessage('modals.main.settings.sections.date.short_format')} name='dateFormat' category='date'>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
<Dropdown
label={getMessage("modals.main.settings.sections.date.short_format")}
name="dateFormat"
category="date"
>
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</Dropdown>
<Dropdown
label={getMessage(
"modals.main.settings.sections.date.short_separator.title"
)}
name="shortFormat"
category="date"
>
<option value="dash">
{getMessage(
"modals.main.settings.sections.date.short_separator.dash"
)}
</option>
<option value="dots">
{getMessage(
"modals.main.settings.sections.date.short_separator.dots"
)}
</option>
<option value="gaps">
{getMessage(
"modals.main.settings.sections.date.short_separator.gaps"
)}
</option>
<option value="slashes">
{getMessage(
"modals.main.settings.sections.date.short_separator.slashes"
)}
</option>
</Dropdown>
<Dropdown label={getMessage('modals.main.settings.sections.date.short_separator.title')} name='shortFormat' category='date'>
<option value='dash'>{getMessage('modals.main.settings.sections.date.short_separator.dash')}</option>
<option value='dots'>{getMessage('modals.main.settings.sections.date.short_separator.dots')}</option>
<option value='gaps'>{getMessage('modals.main.settings.sections.date.short_separator.gaps')}</option>
<option value='slashes'>{getMessage('modals.main.settings.sections.date.short_separator.slashes')}</option>
</Dropdown>
</>
);
if (this.state.dateType === 'long') {
if (this.state.dateType === "long") {
dateSettings = longSettings;
} else {
dateSettings = shortSettings;
@@ -51,15 +95,42 @@ export default class DateSettings extends PureComponent {
return (
<>
<Header title={getMessage('modals.main.settings.sections.date.title')} setting='date' category='date' element='.date' zoomSetting='zoomDate'/>
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.date.week_number')} category='date'/>
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{getMessage('modals.main.settings.sections.date.type.long')}</option>
<option value='short'>{getMessage('modals.main.settings.sections.date.type.short')}</option>
</Dropdown>
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
{dateSettings}
<Header
title={getMessage("modals.main.settings.sections.date.title")}
setting="date"
category="date"
element=".date"
zoomSetting="zoomDate"
switch={true}
/>
<SettingsItem title="Date Type">
<Dropdown
label={getMessage("modals.main.settings.sections.time.type")}
name="dateType"
onChange={(value) => this.setState({ dateType: value })}
category="date"
>
<option value="long">
{getMessage("modals.main.settings.sections.date.type.long")}
</option>
<option value="short">
{getMessage("modals.main.settings.sections.date.type.short")}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem title="Extra Options">
<Checkbox
name="weeknumber"
text={getMessage("modals.main.settings.sections.date.week_number")}
category="date"
/>
<Checkbox
name="datezero"
text={getMessage("modals.main.settings.sections.time.digital.zero")}
category="date"
/>
{dateSettings}
</SettingsItem>
</>
);
}

76
src/components/modals/main/settings/sections/Experimental.jsx
View File

@@ -1,31 +1,69 @@
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 (
<>
<h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
<p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
<h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
<Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
<Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' marks={values('experimental')} element='.other' />
<h2>{getMessage("modals.main.settings.sections.experimental.title")}</h2>
<p>{getMessage("modals.main.settings.sections.experimental.warning")}</p>
<h3>
{getMessage("modals.main.settings.sections.experimental.developer")}
</h3>
<Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
<Slider
title="Debug timeout"
name="debugtimeout"
min="0"
max="5000"
default="0"
step="100"
marks={values("experimental")}
element=".other"
/>
<p>Send Event</p>
<TextField label={'Type'} value={eventType} onChange={(e) => setEventType(e.target.value)} spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
<TextField label={'Name'} value={eventName} onChange={(e) => setEventName(e.target.value)} spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
<br/>
<button className='uploadbg' onClick={() => EventBus.dispatch(eventType, eventName)}>Send</button>
<br/><br/>
<button className='reset' style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
<TextField
label={"Type"}
value={eventType}
onChange={(e) => setEventType(e.target.value)}
spellCheck={false}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
<TextField
label={"Name"}
value={eventName}
onChange={(e) => setEventName(e.target.value)}
spellCheck={false}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
<br />
<button
className="uploadbg"
onClick={() => EventBus.dispatch(eventType, eventName)}
>
Send
</button>
<br />
<br />
<button
className="reset"
style={{ marginLeft: "0px" }}
onClick={() => localStorage.clear()}
>
Clear LocalStorage
</button>
</>
);
}

16
src/components/modals/main/settings/sections/Greeting.jsx
View File

@@ -5,6 +5,7 @@ import Header from '../Header';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
import SettingsItem from '../SettingsItem';
export default class GreetingSettings extends PureComponent {
constructor() {
@@ -27,17 +28,24 @@ export default class GreetingSettings extends PureComponent {
return (
<>
<Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting'/>
<Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting' switch={true}/>
<SettingsItem title={getMessage('modals.main.settings.sections.greeting.birthday')} subtitle={getMessage('modals.main.settings.enabled')}>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>
</SettingsItem>
<SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
<Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
</SettingsItem>
{/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<br/>
<Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>*/}
</>
);
}

46
src/components/modals/main/settings/sections/Language.jsx
View File

@@ -11,16 +11,22 @@ export default class LanguageSettings extends PureComponent {
constructor() {
super();
this.state = {
quoteLanguages: [{
name: this.getMessage('modals.main.loading'),
value: 'loading'
}]
quoteLanguages: [
{
name: this.getMessage('modals.main.loading'),
value: 'loading',
},
],
};
this.controller = new AbortController();
}
async getQuoteLanguages() {
const data = await (await fetch(variables.constants.API_URL + '/quotes/languages', { signal: this.controller.signal })).json();
const data = await (
await fetch(variables.constants.API_URL + '/quotes/languages', {
signal: this.controller.signal,
})
).json();
if (this.controller.signal.aborted === true) {
return;
@@ -30,22 +36,24 @@ export default class LanguageSettings extends PureComponent {
data.forEach((item) => {
quoteLanguages.push({
name: item,
value: item
value: item,
});
});
this.setState({
quoteLanguages
quoteLanguages,
});
}
componentDidMount() {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
quoteLanguages: [{
name: this.getMessage('modals.main.marketplace.offline.description'),
value: 'loading'
}]
quoteLanguages: [
{
name: this.getMessage('modals.main.marketplace.offline.description'),
value: 'loading',
},
],
});
}
@@ -60,10 +68,18 @@ export default class LanguageSettings extends PureComponent {
render() {
return (
<>
<h2>{this.getMessage('modals.main.settings.sections.language.title')}</h2>
<Radio name='language' options={languages} element='.other' />
<h3>{this.getMessage('modals.main.settings.sections.language.quote')}</h3>
<Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
<span className="mainTitle">
{this.getMessage('modals.main.settings.sections.language.title')}
</span>
<div className={'languageSettings'}>
<Radio name="language" options={languages} element=".other" />
</div>
<span className={'mainTitle'}>
{this.getMessage('modals.main.settings.sections.language.quote')}
</span>
<div className={'languageSettings'}>
<Radio name="quotelanguage" options={this.state.quoteLanguages} category="quote" />
</div>
</>
);
}

77
src/components/modals/main/settings/sections/Message.jsx
View File

@@ -2,7 +2,8 @@ import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdCancel, MdAdd } from 'react-icons/md';
import { toast } from 'react-toastify';
import { TextField } from '@mui/material';
import { TextField, TextareaAutosize } from '@mui/material';
import SettingsItem from '../SettingsItem';
import Header from '../Header';
@@ -21,22 +22,22 @@ export default class Message extends PureComponent {
reset = () => {
localStorage.setItem('messages', '[""]');
this.setState({
messages: ['']
messages: [''],
});
toast(this.getMessage(this.languagecode, 'toasts.reset'));
EventBus.dispatch('refresh', 'message');
}
};
modifyMessage(type, index) {
const messages = this.state.messages;
if (type === 'add') {
messages.push('');
messages.push(' ');
} else {
messages.splice(index, 1);
}
this.setState({
messages
messages,
});
this.forceUpdate();
@@ -44,37 +45,67 @@ export default class Message extends PureComponent {
}
message(e, text, index) {
const result = (text === true) ? e.target.value : e.target.result;
const result = text === true ? e.target.value : e.target.result;
const messages = this.state.messages;
messages[index] = result;
this.setState({
messages
messages,
});
this.forceUpdate();
localStorage.setItem('messages', JSON.stringify(messages));
document.querySelector('.reminder-info').style.display = 'block';
document.querySelector('.reminder-info').style.display = 'flex';
localStorage.setItem('showReminder', true);
}
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.message.title')} setting='message' category='message' element='.message' zoomSetting='zoomMessage'/>
<p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
<div className='data-buttons-row'>
<button onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')} <MdAdd/></button>
</div>
{this.state.messages.map((_url, index) => (
<div style={{ display: 'flex' }} key={index}>
<TextField value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)} varient='outlined' />
{this.state.messages.length > 1 ? <button className='cleanButton' onClick={() => this.modifyMessage('remove', index)}>
<MdCancel/>
</button> : null}
</div>
))}
<br/>
<Header
title={this.getMessage('modals.main.settings.sections.message.title')}
setting="message"
category="message"
element=".message"
zoomSetting="zoomMessage"
switch={true}
/>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.message.text')}
subtitle=""
>
<button onClick={() => this.modifyMessage('add')}>
{this.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
</button>
</SettingsItem>
<table style={{ width: '100%' }}>
<tr>
<th>Messages</th>
<th>Buttons</th>
</tr>
{this.state.messages.map((_url, index) => (
<tr>
<th>
<TextareaAutosize
value={this.state.messages[index]}
placeholder="Message"
onChange={(e) => this.message(e, true, index)}
varient="outlined"
/>
</th>
<th>
{this.state.messages.length > 1 ? (
<button
className='deleteButton'
onClick={() => this.modifyMessage('remove', index)}>
<MdCancel />
</button>
) : null}
</th>
</tr>
))}
</table>
<br />
</>
);
}

92
src/components/modals/main/settings/sections/Navbar.jsx
View File

@@ -1,34 +1,76 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { useState } from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Slider from '../Slider';
import { values } from 'modules/helpers/settings/modals';
import SettingsItem from '../SettingsItem';
import Header from '../Header';
export default class Navbar extends PureComponent {
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
export default function Navbar() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [showRefreshOptions, setShowRefreshOptions] = useState(
localStorage.getItem('refresh') === 'true',
);
return (
<>
<h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' marks={values('zoom')} category='navbar' />
<Checkbox name='navbarHover' text={getMessage('modals.main.settings.sections.appearance.navbar.hover')} category='navbar'/>
<Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
<Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
<option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
<option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
{/* before it was just a checkbox */}
<option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
</Dropdown>
</>
);
}
return (
<>
<Header
title={getMessage('modals.main.settings.sections.appearance.navbar.title')}
setting="navbar"
category="widgets"
zoomSetting="zoomNavbar"
zoomCategory="navbar"
/>
<SettingsItem title="Extra Options" subtitle="subtitle" final={!showRefreshOptions}>
<Checkbox
name="navbarHover"
text={getMessage('modals.main.settings.sections.appearance.navbar.hover')}
category="navbar"
/>
<Checkbox
name="notesEnabled"
text={getMessage('modals.main.settings.sections.appearance.navbar.notes')}
category="navbar"
/>
<Checkbox
name="view"
text={getMessage('modals.main.settings.sections.background.buttons.view')}
category="navbar"
/>
<Checkbox
name="refresh"
text={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox name="todo" text="Todos" category="navbar" />
</SettingsItem>
{showRefreshOptions ? (
<SettingsItem
title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
final={true}
>
<Dropdown
label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
name="refreshOption"
category="navbar"
>
<option value="page">
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}
</option>
<option value="background">
{getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">{getMessage('modals.main.settings.sections.quote.title')}</option>
<option value="quotebackground">
{getMessage('modals.main.settings.sections.quote.title')} +{' '}
{getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
</SettingsItem>
) : null}
</>
);
}

53
src/components/modals/main/settings/sections/Order.jsx
View File

@@ -13,25 +13,26 @@ const widget_name = {
quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
quote: getMessage('modals.main.settings.sections.quote.title'),
date: getMessage('modals.main.settings.sections.date.title'),
message: getMessage('modals.main.settings.sections.message.title')
message: getMessage('modals.main.settings.sections.message.title'),
reminder: 'reminder',
};
const SortableItem = sortableElement(({ value }) => (
<li className='sortableitem'>
<li className="sortableItem">
<MdOutlineDragIndicator style={{ verticalAlign: 'middle' }} />
{widget_name[value]}
</li>
));
const SortableContainer = sortableContainer(({ children }) => (
<ul className='sortablecontainer'>{children}</ul>
<ul className="sortablecontainer">{children}</ul>
));
export default class OrderSettings extends PureComponent {
constructor() {
super();
this.state = {
items: JSON.parse(localStorage.getItem('order'))
items: JSON.parse(localStorage.getItem('order')),
};
}
@@ -39,34 +40,37 @@ export default class OrderSettings extends PureComponent {
const result = Array.from(array);
const [removed] = result.splice(oldIndex, 1);
result.splice(newIndex, 0, removed);
return result;
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState({
items: this.arrayMove(this.state.items, oldIndex, newIndex)
items: this.arrayMove(this.state.items, oldIndex, newIndex),
});
}
};
reset = () => {
localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message']));
localStorage.setItem(
'order',
JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message', 'reminder']),
);
this.setState({
items: JSON.parse(localStorage.getItem('order'))
items: JSON.parse(localStorage.getItem('order')),
});
toast(getMessage('toasts.reset'));
}
};
enabled = (setting) => {
switch (setting) {
case 'quicklinks':
return (localStorage.getItem('quicklinksenabled') === 'true');
return localStorage.getItem('quicklinksenabled') === 'true';
default:
return (localStorage.getItem(setting) === 'true');
return localStorage.getItem(setting) === 'true';
}
}
};
componentDidUpdate() {
localStorage.setItem('order', JSON.stringify(this.state.items));
@@ -77,17 +81,22 @@ export default class OrderSettings extends PureComponent {
render() {
return (
<>
<h2>{getMessage('modals.main.settings.sections.order.title')}</h2>
<span className='modalLink' onClick={this.reset}>{getMessage('modals.main.settings.buttons.reset')}</span>
<SortableContainer onSortEnd={this.onSortEnd} lockAxis='y' lockToContainerEdges disableAutoscroll>
<span className="mainTitle">{getMessage('modals.main.settings.sections.order.title')}</span>
<span className="link" onClick={this.reset}>
{getMessage('modals.main.settings.buttons.reset')}
</span>
<SortableContainer
onSortEnd={this.onSortEnd}
lockAxis="y"
lockToContainerEdges
disableAutoscroll
>
{this.state.items.map((value, index) => {
if (!this.enabled(value)) {
if (!this.enabled(value)) {
return null;
}
return (
<SortableItem key={`item-${value}`} index={index} value={value} />
);
return <SortableItem key={`item-${value}`} index={index} value={value} />;
})}
</SortableContainer>
</>

14
src/components/modals/main/settings/sections/QuickLinks.jsx
View File

@@ -4,17 +4,21 @@ import { useState } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import SettingsItem from '../SettingsItem';
export default function QuickLinks() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
const [textOnly, setTextOnly] = useState(localStorage.getItem('quicklinksText') === 'true');
return (
<>
<Header title={getMessage('modals.main.settings.sections.quicklinks.title')} setting='quicklinksenabled' category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks'/>
<Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks' onChange={(value) => setTextOnly(value)}/>
<Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks' disabled={textOnly}/>
<Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
<Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks' disabled={textOnly}/>
<Header title={getMessage('modals.main.settings.sections.quicklinks.title')} setting='quicklinksenabled' category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks' switch={true}/>
<SettingsItem title="Extra Options" subtitle="subtitle">
<Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks' onChange={(value) => setTextOnly(value)}/>
<Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks' disabled={textOnly}/>
<Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
<Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks' disabled={textOnly}/>
</SettingsItem>
</>
);
}

207
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -1,11 +1,13 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import React, { PureComponent } from 'react';
import { MdCancel, MdAdd } from 'react-icons/md';
import { TextField } from '@mui/material';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import { toast } from 'react-toastify';
import EventBus from 'modules/helpers/eventbus';
@@ -17,40 +19,44 @@ export default class QuoteSettings extends PureComponent {
super();
this.state = {
quoteType: localStorage.getItem('quoteType') || 'api',
customQuote: this.getCustom()
customQuote: this.getCustom(),
};
}
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return <option value='quote_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option>;
return (
<option value="quote_pack">{this.getMessage('modals.main.navbar.marketplace')}</option>
);
}
}
};
resetCustom = () => {
localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
this.setState({
customQuote: [{
quote: '',
author: ''
}]
customQuote: [
{
quote: '',
author: '',
},
],
});
toast(this.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
}
};
customQuote(e, text, index, type) {
const result = (text === true) ? e.target.value : e.target.result;
const result = text === true ? e.target.value : e.target.result;
const customQuote = this.state.customQuote;
customQuote[index][type] = result;
this.setState({
customQuote
customQuote,
});
this.forceUpdate();
localStorage.setItem('customQuote', JSON.stringify(customQuote));
document.querySelector('.reminder-info').style.display = 'block';
document.querySelector('.reminder-info').style.display = 'flex';
localStorage.setItem('showReminder', true);
}
@@ -59,14 +65,14 @@ export default class QuoteSettings extends PureComponent {
if (type === 'add') {
customQuote.push({
quote: '',
author: ''
author: '',
});
} else {
customQuote.splice(index, 1);
}
this.setState({
customQuote
customQuote,
});
this.forceUpdate();
@@ -76,10 +82,12 @@ export default class QuoteSettings extends PureComponent {
getCustom() {
let data = JSON.parse(localStorage.getItem('customQuote'));
if (data === null) {
data = [{
quote: localStorage.getItem('customQuote') || '',
author: localStorage.getItem('customQuoteAuthor') || ''
}];
data = [
{
quote: localStorage.getItem('customQuote') || '',
author: localStorage.getItem('customQuoteAuthor') || '',
},
];
}
return data;
}
@@ -89,53 +97,146 @@ export default class QuoteSettings extends PureComponent {
if (this.state.quoteType === 'custom') {
customSettings = (
<>
<p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<div className='data-buttons-row'>
<button onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd/></button>
</div>
{this.state.customQuote.map((_url, index) => (
<div style={{ display: 'flex' }} key={index}>
<TextField value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')} varient='outlined' style={{ marginRight: '10px' }} />
<TextField value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')} varient='outlined' />
{this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)} style={{ marginBottom: '-14px' }}>
<MdCancel/>
</button> : null}
</div>
))}
<SettingsItem
title={this.getMessage('modals.main.settings.sections.quote.custom')}
subtitle="subtitle"
>
<button onClick={() => this.modifyCustomQuote('add')}>
{this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
</button>
</SettingsItem>
<table style={{ width: '100%' }}>
<tr>
<th>Quote</th>
<th>Author</th>
<th>Buttons</th>
</tr>
{this.state.customQuote.map((_url, index) => (
<tr>
<th>
<TextareaAutosize
value={this.state.customQuote[index].quote}
placeholder="Quote"
onChange={(e) => this.customQuote(e, true, index, 'quote')}
varient="outlined"
style={{ marginRight: '10px' }}
/>
</th>
<th>
<TextareaAutosize
value={this.state.customQuote[index].author}
placeholder="Author"
onChange={(e) => this.customQuote(e, true, index, 'author')}
varient="outlined"
/>
</th>
<th>
{this.state.customQuote.length > 1 ? (
<button
className="deleteButton"
onClick={() => this.modifyCustomQuote('remove', index)}
style={{}}
>
<MdCancel />
</button>
) : null}
</th>
</tr>
))}
</table>
</>
);
} else {
// api
customSettings = (
<>
<Dropdown label={this.getMessage('modals.main.settings.sections.background.interval.title')} name='quotechange'>
<option value='refresh'>{this.getMessage('tabname')}</option>
<option value='60000'>{this.getMessage('modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{this.getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{this.getMessage('modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{this.getMessage('modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{this.getMessage('widgets.date.week')}</option>
<option value='2628000000'>{this.getMessage('modals.main.settings.sections.background.interval.month')}</option>
<SettingsItem title="Additional Options">
<Dropdown
label={this.getMessage('modals.main.settings.sections.background.interval.title')}
name="quotechange"
>
<option value="refresh">{this.getMessage('tabname')}</option>
<option value="60000">
{this.getMessage('modals.main.settings.sections.background.interval.minute')}
</option>
<option value="1800000">
{this.getMessage('modals.main.settings.sections.background.interval.half_hour')}
</option>
<option value="3600000">
{this.getMessage('modals.main.settings.sections.background.interval.hour')}
</option>
<option value="86400000">
{this.getMessage('modals.main.settings.sections.background.interval.day')}
</option>
<option value="604800000">{this.getMessage('widgets.date.week')}</option>
<option value="2628000000">
{this.getMessage('modals.main.settings.sections.background.interval.month')}
</option>
</Dropdown>
</>
</SettingsItem>
);
}
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.quote.title')} setting='quote' category='quote' element='.quotediv' zoomSetting='zoomQuote'/>
<Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
<Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
{this.marketplaceType()}
<option value='api'>{this.getMessage('modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
</Dropdown>
<Header
title={this.getMessage('modals.main.settings.sections.quote.title')}
setting="quote"
category="quote"
element=".quotediv"
zoomSetting="zoomQuote"
switch={true}
/>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.quote.buttons.title')}
subtitle="subtitle"
>
<Checkbox
name="copyButton"
text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')}
category="quote"
/>
<Checkbox
name="quoteShareButton"
text={this.getMessage('modals.main.settings.sections.quote.buttons.tweet')}
category="quote"
/>
<Checkbox
name="favouriteQuoteEnabled"
text={this.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
category="quote"
/>
<Checkbox
name="authorLink"
text={this.getMessage('modals.main.settings.sections.quote.author_link')}
element=".other"
/>
</SettingsItem>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.background.type.title')}
subtitle="subtitle"
>
<Checkbox name="quoteModern" text="Use modern style" />
</SettingsItem>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.background.type.title')}
subtitle="subtitle"
>
<Dropdown
label={this.getMessage('modals.main.settings.sections.background.type.title')}
name="quoteType"
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
>
{this.marketplaceType()}
<option value="api">
{this.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">
{this.getMessage('modals.main.settings.sections.quote.custom')}
</option>
</Dropdown>
</SettingsItem>
{customSettings}
<h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
<Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
<Checkbox name='tweetButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.tweet')} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={this.getMessage('modals.main.settings.sections.quote.buttons.favourite')} category='quote'/>
</>
);
}

29
src/components/modals/main/settings/sections/Reminder.jsx Normal file
View File

@@ -0,0 +1,29 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
export default class ReminderSettings extends PureComponent {
constructor() {
super();
this.state = {
colour: localStorage.getItem('reminderColour') || '#ffa500'
};
}
updateColour(event) {
const colour = event.target.value;
this.setState({ colour });
localStorage.setItem('reminderColour', colour);
}
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<Header title='Reminder' setting='reminder' category='reminder' element='.reminder' zoomSetting='zoomReminder' switch={true}/>
<input type='color' name='colour' className='colour' onChange={(event) => this.updateColour(event)} value={this.state.colour}></input>
<label htmlFor={'colour'} className='customBackgroundHex'>{this.state.colour}</label>
</>
);
}
}

22
src/components/modals/main/settings/sections/Search.jsx
View File

@@ -7,6 +7,7 @@ import Header from '../Header';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import Radio from '../Radio';
import SettingsItem from '../SettingsItem';
import EventBus from 'modules/helpers/eventbus';
@@ -73,24 +74,31 @@ export default class SearchSettings extends PureComponent {
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} setting='searchBar' category='widgets'/>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} setting='searchBar' category='widgets' switch={true}/>
<SettingsItem title="Extra Options" subtitle="eeeee">
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>
: null}
<Checkbox name='searchDropdown' text={this.getMessage('modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
<Checkbox name='searchFocus' text={this.getMessage('modals.main.settings.sections.search.focus')} category='search' element='.other'/>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}><span className='link' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} />
</ul>
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.search_engine')} subtitle="cheese is gucci tbf">
<Dropdown label={this.getMessage('modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)} manual={true}>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>{engine.name}</MenuItem>
))}
<MenuItem value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</MenuItem>
</Dropdown>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}><span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} />
</ul>
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
<Radio title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} subtitle="cheese">
<Radio options={autocompleteProviders} name='autocompleteProvider' category='search'/>
</SettingsItem>
</>
);
}

105
src/components/modals/main/settings/sections/Stats.jsx
View File

@@ -1,7 +1,9 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdShowChart } from 'react-icons/md';
import Switch from '../Switch';
import SettingsItem from '../SettingsItem';
import EventBus from 'modules/helpers/eventbus';
@@ -9,17 +11,17 @@ export default class Stats extends PureComponent {
constructor() {
super();
this.state = {
stats: JSON.parse(localStorage.getItem('statsData')) || {}
stats: JSON.parse(localStorage.getItem('statsData')) || {},
};
}
componentDidMount() {
EventBus.on('refresh', (data) => {
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'stats') {
if (localStorage.getItem('stats') === 'false') {
localStorage.setItem('statsData', JSON.stringify({}));
return this.setState({
stats: {}
stats: {},
});
}
this.forceUpdate();
@@ -37,24 +39,95 @@ export default class Stats extends PureComponent {
if (localStorage.getItem('stats') === 'false') {
return (
<>
<h2>{getMessage('modals.main.settings.reminder.title')}</h2>
<p>{getMessage('modals.main.settings.sections.stats.warning')}</p>
<Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
<span className="mainTitle">
{getMessage('modals.main.settings.sections.stats.title')}
</span>
<SettingsItem
title={getMessage('modals.main.settings.reminder.title')}
subtitle={getMessage('modals.main.settings.sections.stats.warning')}
>
<Switch
name="stats"
text={getMessage('modals.main.settings.sections.stats.usage')}
category="stats"
/>
</SettingsItem>
</>
);
}
return (
<>
<h2>{getMessage('modals.main.settings.sections.stats.title')}</h2>
<Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
<p>{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}: {this.state.stats['tabs-opened'] || 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_favourited')}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_downloaded')}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.quotes_favourited')}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.quicklinks_added')}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.settings_changed')}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
<p>{getMessage('modals.main.settings.sections.stats.sections.addons_installed')}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
{/*<h2>{getMessage('modals.main.settings.sections.stats.title')}</h2>
<Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>*/}
<span className="mainTitle">{getMessage('modals.main.settings.sections.stats.title')}</span>
<SettingsItem
title={getMessage('modals.main.settings.reminder.title')}
subtitle={getMessage('modals.main.settings.sections.stats.warning')}
>
<Switch
name="stats"
text={getMessage('modals.main.settings.sections.stats.usage')}
category="stats"
/>
</SettingsItem>
<div className="statsGrid">
<div>
<span>
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
{this.state.stats['tabs-opened'] || 0}
</span>
</div>
<div>
<span>
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
{this.state.stats['tabs-opened'] || 0}
</span>
</div>
<div>
<MdShowChart />
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
</span>
<span>{this.state.stats['tabs-opened'] || 0}</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.backgrounds_favourited')}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.backgrounds_downloaded')}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.quotes_favourited')}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.quicklinks_added')}{' '}
</span>
<span>
{this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.settings_changed')}{' '}
</span>
<span>
{this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}
</span>
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.addons_installed')}{' '}
</span>
<span>
{this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}
</span>
</div>
</div>
</>
);
}

105
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -6,11 +6,13 @@ import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
import SettingsItem from '../SettingsItem';
export default class TimeSettings extends PureComponent {
constructor() {
super();
this.state = {
timeType: localStorage.getItem('timeType') || 'digital'
timeType: localStorage.getItem('timeType') || 'digital',
};
}
@@ -22,32 +24,64 @@ export default class TimeSettings extends PureComponent {
const digitalOptions = [
{
name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
value: 'twentyfourhour'
value: 'twentyfourhour',
},
{
name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
value: 'twelvehour'
}
value: 'twelvehour',
},
];
const digitalSettings = (
<>
<h3>{getMessage('modals.main.settings.sections.time.digital.title')}</h3>
<Radio title={getMessage('modals.main.settings.sections.time.format')} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<Checkbox name='seconds' text={getMessage('modals.main.settings.sections.time.digital.seconds')} category='clock' />
<Checkbox name='zero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='clock' />
</>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.digital.title')}
subtitle={getMessage('modals.main.settings.sections.time.format')}
>
<Radio name="timeformat" options={digitalOptions} smallTitle={true} category="clock" />
<Checkbox
name="seconds"
text={getMessage('modals.main.settings.sections.time.digital.seconds')}
category="clock"
/>
<Checkbox
name="zero"
text={getMessage('modals.main.settings.sections.time.digital.zero')}
category="clock"
/>
</SettingsItem>
);
const analogSettings = (
<>
<h3>{getMessage('modals.main.settings.sections.time.analogue.title')}</h3>
<Checkbox name='secondHand' text={getMessage('modals.main.settings.sections.time.analogue.second_hand')} category='clock' />
<Checkbox name='minuteHand' text={getMessage('modals.main.settings.sections.time.analogue.minute_hand')} category='clock' />
<Checkbox name='hourHand' text={getMessage('modals.main.settings.sections.time.analogue.hour_hand')} category='clock' />
<Checkbox name='hourMarks' text={getMessage('modals.main.settings.sections.time.analogue.hour_marks')} category='clock' />
<Checkbox name='minuteMarks' text={getMessage('modals.main.settings.sections.time.analogue.minute_marks')} category='clock' />
</>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.analogue.title')}
subtitle="subtitle"
>
<Checkbox
name="secondHand"
text={getMessage('modals.main.settings.sections.time.analogue.second_hand')}
category="clock"
/>
<Checkbox
name="minuteHand"
text={getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
category="clock"
/>
<Checkbox
name="hourHand"
text={getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
category="clock"
/>
<Checkbox
name="hourMarks"
text={getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
category="clock"
/>
<Checkbox
name="minuteMarks"
text={getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
category="clock"
/>
</SettingsItem>
);
if (this.state.timeType === 'digital') {
@@ -58,12 +92,35 @@ export default class TimeSettings extends PureComponent {
return (
<>
<Header title={getMessage('modals.main.settings.sections.time.title')} setting='time' category='clock' element='.clock-container' zoomSetting='zoomClock'/>
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{getMessage('modals.main.settings.sections.time.digital.title')}</option>
<option value='analogue'>{getMessage('modals.main.settings.sections.time.analogue.title')}</option>
<option value='percentageComplete'>{getMessage('modals.main.settings.sections.time.percentage_complete')}</option>
</Dropdown>
<Header
title={getMessage('modals.main.settings.sections.time.title')}
setting="time"
category="clock"
element=".clock-container"
zoomSetting="zoomClock"
switch={true}
/>
<SettingsItem
title={getMessage('modals.main.settings.sections.time.type')}
subtitle="subtitle"
>
<Dropdown
label={getMessage('modals.main.settings.sections.time.type')}
name="timeType"
onChange={(value) => this.setState({ timeType: value })}
category="clock"
>
<option value="digital">
{getMessage('modals.main.settings.sections.time.digital.title')}
</option>
<option value="analogue">
{getMessage('modals.main.settings.sections.time.analogue.title')}
</option>
<option value="percentageComplete">
{getMessage('modals.main.settings.sections.time.percentage_complete')}
</option>
</Dropdown>
</SettingsItem>
{timeSettings}
</>
);

55
src/components/modals/main/settings/sections/Weather.jsx
View File

@@ -3,8 +3,11 @@ import { PureComponent } from 'react';
import Header from '../Header';
import Radio from '../Radio';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import { TextField } from '@mui/material';
import SettingsItem from '../SettingsItem';
export default class TimeSettings extends PureComponent {
constructor() {
@@ -20,13 +23,13 @@ export default class TimeSettings extends PureComponent {
}
showReminder() {
document.querySelector('.reminder-info').style.display = 'block';
document.querySelector('.reminder-info').style.display = 'flex';
localStorage.setItem('showReminder', true);
}
changeLocation(e) {
this.setState({
location: e.target.value
this.setState({
location: e.target.value
});
this.showReminder();
@@ -43,8 +46,8 @@ export default class TimeSettings extends PureComponent {
}, (error) => {
// firefox requires this 2nd function
console.log(error);
}, {
enableHighAccuracy: true
}, {
enableHighAccuracy: true
});
}
@@ -65,24 +68,50 @@ export default class TimeSettings extends PureComponent {
value: 'kelvin'
}
];
return (
<>
<Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather'/>
<TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' InputLabelProps={{ shrink: true }} />
<span className='modalLink' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span>
<Radio name='tempformat' title={getMessage('modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
<h3>{getMessage('modals.main.settings.sections.weather.extra_info.title')}</h3>
<Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather' switch={true}/>
<SettingsItem title="Widget Type">
<Dropdown label="Type" name="weatherType">
<option value='1'>Basic</option>
<option value='2'>Standard</option>
<option value='3'>Expanded</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.location')}>
<TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' InputLabelProps={{ shrink: true }} />
<span className='link' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.temp_format.title')}>
<Radio name='tempformat' options={tempFormat} category='weather'/>
</SettingsItem>
{ localStorage.getItem('weatherType') > 1 &&
<SettingsItem title="Active bit" subtitle="idk a better word for it sorry">
<Dropdown label="Type" name="weatherActiveBit" category='weather'>
<option value='weatherdescription'>{getMessage('modals.main.settings.sections.weather.extra_info.show_description')} </option>
<option value='cloudiness'>{getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}</option>
<option value='humidity'>{getMessage('modals.main.settings.sections.weather.extra_info.humidity')}</option>
<option value='visibility'>{getMessage('modals.main.settings.sections.weather.extra_info.visibility')}</option>
<option value='windspeed' onChange={() => this.setState({ windSpeed: (localStorage.getItem('windspeed') !== 'true') })}>{getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}</option>
<option value='windDirection' disabled={this.state.windSpeed}>{getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}</option>
<option value='mintemp'>{getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}</option>
<option value='maxtemp'>{getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}</option>
<option value='feelsliketemp'>Feels like temperature</option>
<option value='atmosphericpressure'>{getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}</option>
</Dropdown>
</SettingsItem>
}
<Checkbox name='showlocation' text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')} category='weather'/>
<Checkbox name='weatherdescription' text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')} category='weather'/>
<Checkbox name='cloudiness' text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')} category='weather'/>
<Checkbox name='humidity' text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')} category='weather'/>
<Checkbox name='visibility' text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')} category='weather'/>
<Checkbox name='windspeed' text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')} category='weather' onChange={() => this.setState({ windSpeed: (localStorage.getItem('windspeed') !== 'true') })}/>
<Checkbox name='windDirection' text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather' disabled={this.state.windSpeed}/>
<Checkbox name='windDirection' text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather' disabled={this.state.windSpeed}/>
<Checkbox name='mintemp' text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')} category='weather'/>
<Checkbox name='maxtemp' text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')} category='weather'/>
<Checkbox name='feelsliketemp' text={'Feels like temperature'} category='weather'/>
<Checkbox name='atmosphericpressure' text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')} category='weather'/>
</>
);

476
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -1,49 +1,58 @@
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 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', { signal: this.controller.signal })).json();
const data = await (
await fetch(variables.constants.API_URL + "/images/categories", {
signal: this.controller.signal,
})
).json();
if (this.controller.signal.aborted === true) {
return;
}
this.setState({
backgroundCategories: data
backgroundCategories: data,
});
}
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")],
});
}
@@ -62,117 +71,374 @@ 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 = (
<Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
<option value='refresh'>{getMessage('tabname')}</option>
<option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{getMessage('widgets.date.week')}</option>
<option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
<SettingsItem>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.interval.title"
)}
name="backgroundchange"
>
<option value="refresh">{getMessage("tabname")}</option>
<option value="60000">
{getMessage(
"modals.main.settings.sections.background.interval.minute"
)}
</option>
<option value="1800000">
{getMessage(
"modals.main.settings.sections.background.interval.half_hour"
)}
</option>
<option value="3600000">
{getMessage(
"modals.main.settings.sections.background.interval.hour"
)}
</option>
<option value="86400000">
{getMessage(
"modals.main.settings.sections.background.interval.day"
)}
</option>
<option value="604800000">{getMessage("widgets.date.week")}</option>
<option value="2628000000">
{getMessage(
"modals.main.settings.sections.background.interval.month"
)}
</option>
</Dropdown>
</SettingsItem>
);
const APISettings = (
<>
<Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage' onChange={(e) => this.setState({ backgroundAPI: e })}/>
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ?
<>
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
<MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
<MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
<SettingsItem>
<Radio
title={getMessage(
"modals.main.settings.sections.background.source.api"
)}
options={apiOptions}
name="backgroundAPI"
category="background"
element="#backgroundImage"
onChange={(e) => this.setState({ backgroundAPI: e })}
/>
{this.state.backgroundCategories[0] ===
getMessage("modals.main.loading") ? (
<>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.category"
)}
name="apiCategory"
>
<MenuItem value="loading" key="loading">
{getMessage("modals.main.loading")}
</MenuItem>
<MenuItem value="loading" key="loading">
{getMessage("modals.main.loading")}
</MenuItem>
</Dropdown>
</>
) : (
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.category"
)}
name="apiCategory"
>
{this.state.backgroundCategories.map((category) => (
<MenuItem value={category} key={category}>
{category.charAt(0).toUpperCase() + category.slice(1)}
</MenuItem>
))}
</Dropdown>
</> :
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' >
{this.state.backgroundCategories.map((category) => (
<MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
))}
)}
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.source.quality.title"
)}
name="apiQuality"
element=".other"
>
<option value="original">
{getMessage(
"modals.main.settings.sections.background.source.quality.original"
)}
</option>
<option value="high">
{getMessage(
"modals.main.settings.sections.background.source.quality.high"
)}
</option>
<option value="normal">
{getMessage(
"modals.main.settings.sections.background.source.quality.normal"
)}
</option>
<option value="datasaver">
{getMessage(
"modals.main.settings.sections.background.source.quality.datasaver"
)}
</option>
</Dropdown>
}
<Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
<option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
<option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
<option value='normal'>{getMessage('modals.main.settings.sections.background.source.quality.normal')}</option>
<option value='datasaver'>{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}</option>
</Dropdown>
</SettingsItem>
{interval}
</>
);
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = <CustomSettings interval={interval}/>; break;
case 'colour': backgroundSettings = <ColourSettings/>; break;
case 'random_colour': backgroundSettings = <></>; break;
case 'random_gradient': backgroundSettings = <></>; break;
default: backgroundSettings = APISettings; break;
case "custom":
backgroundSettings = <CustomSettings interval={interval} />;
break;
case "colour":
backgroundSettings = <ColourSettings />;
break;
case "random_colour":
backgroundSettings = <></>;
break;
case "random_gradient":
backgroundSettings = <></>;
break;
default:
backgroundSettings = APISettings;
break;
}
if (localStorage.getItem('photo_packs') && this.state.backgroundType !== 'custom' && this.state.backgroundType !== 'colour' && this.state.backgroundType !== 'api') {
if (
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';
const usingImage =
this.state.backgroundType !== "colour" &&
this.state.backgroundType !== "random_colour" &&
this.state.backgroundType !== "random_gradient";
return (
<>
<Header title={getMessage('modals.main.settings.sections.background.title')} setting='background' category='background' element='#backgroundImage'/>
<Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' disabled={!usingImage} />
<Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' disabled={!usingImage} />
<Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' disabled={this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'} />
<Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>
<h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
<Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
{this.state.marketplaceEnabled ? <option value='photo_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option> : null}
<option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
<option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
<option value='random_colour'>{getMessage('modals.main.settings.sections.background.type.random_colour')}</option>
<option value='random_gradient'>{getMessage('modals.main.settings.sections.background.type.random_gradient')}</option>
</Dropdown>
<Header
title={getMessage("modals.main.settings.sections.background.title")}
setting="background"
category="background"
element="#backgroundImage"
/>
<SettingsItem title="cheese" subtitle="cheese">
<Checkbox
name="ddgProxy"
text={getMessage(
"modals.main.settings.sections.background.ddg_image_proxy"
)}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="bgtransition"
text={getMessage(
"modals.main.settings.sections.background.transition"
)}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="photoInformation"
text={getMessage(
"modals.main.settings.sections.background.photo_information"
)}
element=".other"
disabled={
this.state.backgroundType !== "api" &&
this.state.backgroundType !== "marketplace"
}
/>
<Checkbox
name="photoMap"
text={getMessage(
"modals.main.settings.sections.background.show_map"
)}
element=".other"
disabled={this.state.backgroundAPI !== "unsplash"}
/>
</SettingsItem>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.background.buttons.title"
)}
subtitle="cheese"
>
<Checkbox
name="favouriteEnabled"
text={getMessage(
"modals.main.settings.sections.background.buttons.favourite"
)}
category="navbar"
/>
{this.state.backgroundType === "api" &&
APISettings &&
this.state.backgroundAPI === "mue" ? (
<Checkbox
name="downloadbtn"
text={getMessage(
"modals.main.settings.sections.background.buttons.download"
)}
element=".other"
/>
) : null}
</SettingsItem>
<SettingsItem
title={getMessage(
"modals.main.settings.sections.background.source.title"
)}
subtitle="mucho gracias"
>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.type.title"
)}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled ? (
<option value="photo_pack">
{this.getMessage("modals.main.navbar.marketplace")}
</option>
) : null}
<option value="api">
{getMessage("modals.main.settings.sections.background.type.api")}
</option>
<option value="custom">
{getMessage(
"modals.main.settings.sections.background.type.custom_image"
)}
</option>
<option value="colour">
{getMessage(
"modals.main.settings.sections.background.type.custom_colour"
)}
</option>
<option value="random_colour">
{getMessage(
"modals.main.settings.sections.background.type.random_colour"
)}
</option>
<option value="random_gradient">
{getMessage(
"modals.main.settings.sections.background.type.random_gradient"
)}
</option>
</Dropdown>
</SettingsItem>
{backgroundSettings}
{this.state.backgroundType === 'api' && APISettings && this.state.backgroundAPI === 'mue' ?
<>
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
</>
: null}
{this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.marketplaceEnabled ?
<>
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
<option value='none'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
{this.state.backgroundType === "api" ||
this.state.backgroundType === "custom" ||
this.state.marketplaceEnabled ? (
<SettingsItem
title={getMessage(
"modals.main.settings.sections.background.effects.title"
)}
subtitle="cheese"
>
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.blur"
)}
name="blur"
min="0"
max="100"
default="0"
display="%"
marks={values("background")}
category="background"
element="#backgroundImage"
/>
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.brightness"
)}
name="brightness"
min="0"
max="100"
default="90"
display="%"
marks={values("background")}
category="background"
element="#backgroundImage"
/>
<Dropdown
label={getMessage(
"modals.main.settings.sections.background.effects.filters.title"
)}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{getMessage(
"modals.main.settings.sections.appearance.navbar.refresh_options.none"
)}
</option>
<option value="grayscale">
{getMessage(
"modals.main.settings.sections.background.effects.filters.grayscale"
)}
</option>
<option value="sepia">
{getMessage(
"modals.main.settings.sections.background.effects.filters.sepia"
)}
</option>
<option value="invert">
{getMessage(
"modals.main.settings.sections.background.effects.filters.invert"
)}
</option>
<option value="saturate">
{getMessage(
"modals.main.settings.sections.background.effects.filters.saturate"
)}
</option>
<option value="contrast">
{getMessage(
"modals.main.settings.sections.background.effects.filters.contrast"
)}
</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' ?
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
: null}
</>
: null}
{this.state.backgroundFilter !== "none" ? (
<Slider
title={getMessage(
"modals.main.settings.sections.background.effects.filters.amount"
)}
name="backgroundFilterAmount"
min="0"
max="100"
default="0"
display="%"
marks={values("background")}
category="background"
element="#backgroundImage"
/>
) : null}
</SettingsItem>
) : null}
</>
);
}

201
src/components/modals/main/settings/sections/background/Colour.jsx
View File

@@ -1,37 +1,43 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { ColorPicker } from 'react-color-gradient-picker';
import { toast } from 'react-toastify';
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' };
GradientPickerInitalState = undefined;
DefaultGradientSettings = {
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();
this.state = {
gradientSettings: this.DefaultGradientSettings
gradientSettings: this.DefaultGradientSettings,
};
}
resetColour() {
localStorage.setItem('customBackgroundColour', '');
localStorage.setItem("customBackgroundColour", "");
this.setState({
gradientSettings: this.DefaultGradientSettings
gradientSettings: this.DefaultGradientSettings,
});
toast(this.getMessage('toasts.reset'));
toast(this.getMessage("toasts.reset"));
}
initialiseColourPickerState(gradientSettings) {
this.GradientPickerInitalState = {
this.GradientPickerInitialState = {
points: gradientSettings.gradient.map((g) => {
const rgb = hexToRgb(g.colour);
return {
@@ -39,19 +45,19 @@ export default class ColourSettings extends PureComponent {
red: rgb.red,
green: rgb.green,
blue: rgb.blue,
alpha: 1
alpha: 1,
};
}),
degree: + gradientSettings.angle,
type: gradientSettings.type
degree: +gradientSettings.angle,
type: gradientSettings.type,
};
}
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) {
@@ -64,58 +70,91 @@ export default class ColourSettings extends PureComponent {
}
this.setState({
gradientSettings
gradientSettings,
});
}
componentDidUpdate() {
localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
localStorage.setItem(
"customBackgroundColour",
this.currentGradientSettings()
);
}
onGradientChange = (event, index) => {
const newValue = event.target.value;
const name = event.target.name;
this.setState((s) => {
const newState = {
return (newState = {
gradientSettings: {
...s.gradientSettings,
gradient: s.gradientSettings.gradient.map((g, i) => i === index ? { ...g, [name]: newValue } : g)
}
};
return newState;
gradient: s.gradientSettings.gradient.map((g, i) =>
i === index ? { ...g, [name]: newValue } : g
),
},
});
});
this.showReminder();
}
};
addColour = () => {
this.setState((s) => {
const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse();
const newState = {
const [lastGradient, ...initGradients] =
s.gradientSettings.gradient.reverse();
return {
gradientSettings: {
...s.gradientSettings,
gradient: [...initGradients, lastGradient, { colour: localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
}
gradient: [
...initGradients,
lastGradient,
{
colour:
localStorage.getItem("theme") === "dark"
? "#000000"
: "#ffffff",
stop: 100,
},
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
},
};
return newState;
});
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' && this.state.gradientSettings.gradient.every(g => 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));
if (
typeof this.state.gradientSettings === "object" &&
this.state.gradientSettings.gradient.every(
(g) =>
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));
return JSON.stringify({
...this.state.gradientSettings,
gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
gradient: [
...this.state.gradientSettings.gradient.map((g) => {
return { ...g, stop: clampNumber(+g.stop, 0, 100) };
}),
].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);
}
@@ -124,49 +163,63 @@ export default class ColourSettings extends PureComponent {
angle: attrs.degree,
gradient: attrs.points.map((p) => {
return {
colour: '#' + rgbToHex(p.red, p.green, p.blue),
stop: p.left
}}),
type: attrs.type
}
colour: "#" + rgbToHex(p.red, p.green, p.blue),
stop: p.left,
};
}),
type: attrs.type,
},
});
this.showReminder();
};
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) {
if (this.GradientPickerInitalState === undefined) {
if (this.GradientPickerInitialState === undefined) {
this.initialiseColourPickerState(this.state.gradientSettings);
}
gradientInputs = (
<ColorPicker
onStartChange={(colour) => this.onColourPickerChange(colour, 'start')}
onChange={(colour) => this.onColourPickerChange(colour, 'change')}
onEndChange={(colour) => this.onColourPickerChange(colour, 'end')}
gradient={this.GradientPickerInitalState}
isGradient/>
onStartChange={(colour) =>
this.onColourPickerChange(colour, "start")
}
onChange={(colour) => this.onColourPickerChange(colour, "change")}
onEndChange={(colour) => this.onColourPickerChange(colour, "end")}
gradient={this.GradientPickerInitialState}
isGradient
/>
);
} else {
gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
return (
<Fragment key={i}>
<input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
<label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
<input
id={"colour_" + i}
type="color"
name="colour"
className="colour"
onChange={(event) => this.onGradientChange(event, i)}
value={g.colour}
></input>
<label htmlFor={"colour_" + i} className="customBackgroundHex">
{g.colour}
</label>
</Fragment>
);
});
@@ -174,16 +227,32 @@ export default class ColourSettings extends PureComponent {
colourSettings = (
<>
{gradientInputs}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage('modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
<div className="colourInput">{gradientInputs}</div>
{!gradientHasMoreThanOneColour ? (
<>
<button type="button" className="add" onClick={this.addColour}>
{this.getMessage(
"modals.main.settings.sections.background.source.add_colour"
)}
</button>
</>
) : null}
</>
);
}
return (
<>
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
{colourSettings}
<SettingsItem
title={this.getMessage(
"modals.main.settings.sections.background.source.custom_colour"
)}
>
<span className="link" onClick={() => this.resetColour()}>
{this.getMessage("modals.main.settings.buttons.reset")}
</span>
{colourSettings}
</SettingsItem>
</>
);
}

229
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -1,141 +1,228 @@
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 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();
this.state = {
customBackground: this.getCustom(),
customURLModal: false
customURLModal: false,
};
}
resetCustom = () => {
localStorage.setItem('customBackground', '[]');
localStorage.setItem("customBackground", "[]");
this.setState({
customBackground: []
customBackground: [],
});
toast(this.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
}
toast(this.getMessage("toasts.reset"));
EventBus.dispatch("refresh", "background");
};
customBackground(e, text, index) {
const result = (text === true) ? e.target.value : e.target.result;
const result = text === true ? e.target.value : e.target.result;
const customBackground = this.state.customBackground;
customBackground[index] = result;
this.setState({
customBackground
customBackground,
});
this.forceUpdate();
localStorage.setItem('customBackground', JSON.stringify(customBackground));
document.querySelector('.reminder-info').style.display = 'block';
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);
}
this.setState({
customBackground
customBackground,
});
this.forceUpdate();
localStorage.setItem('customBackground', JSON.stringify(customBackground));
document.querySelector('.reminder-info').style.display = 'block';
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');
return (
url.startsWith("data:video/") ||
url.endsWith(".mp4") ||
url.endsWith(".webm") ||
url.endsWith(".ogg")
);
}
videoCustomSettings = () => {
const hasVideo = this.state.customBackground.filter(bg => this.videoCheck(bg));
if (hasVideo.length > 0) {
videoCustomSettings = () => {
const hasVideo = this.state.customBackground.filter((bg) =>
this.videoCheck(bg)
);
if (hasVideo.length > 0) {
return (
<>
<Checkbox name='backgroundVideoLoop' text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}/>
<Checkbox name='backgroundVideoMute' text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}/>
<Checkbox
name="backgroundVideoLoop"
text={this.getMessage(
"modals.main.settings.sections.background.source.loop_video"
)}
/>
<Checkbox
name="backgroundVideoMute"
text={this.getMessage(
"modals.main.settings.sections.background.source.mute_video"
)}
/>
</>
);
} else {
return null;
}
}
};
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
currentBackgroundIndex: this.state.customBackground.length,
});
}
addCustomURL(e) {
this.setState({
customURLModal: false,
currentBackgroundIndex: this.state.customBackground.length
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 (
<ul>
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<div className='data-buttons-row'>
<button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>
<button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <MdAddLink/></button>
</div>
<div className='images-row'>
{this.state.customBackground.map((url, index) => (
<div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
{this.videoCheck(url) ? <MdPersonalVideo className='customvideoicon'/> : null}
{this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<MdCancel/>
</button> : null}
</div>
))}
</div>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
<>
{this.props.interval}
<div className="settingsRow" style={{ alignItems: "flex-start" }}>
<div className="content">
<div className="images-row">
{this.state.customBackground.map((url, index) => (
<div key={index}>
<img
alt={"Custom background " + (index || 0)}
src={`${
!this.videoCheck(url)
? this.state.customBackground[index]
: ""
}`}
/>
{this.videoCheck(url) ? (
<MdPersonalVideo className="customvideoicon" />
) : null}
{this.state.customBackground.length > 0 ? (
<button
className="iconButton"
onClick={() =>
this.modifyCustomBackground("remove", index)
}
>
<MdCancel />
</button>
) : null}
</div>
))}
</div>
</div>
<div className="action">
{/*<button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>*/}
<div className="dropzone">
<MdAddPhotoAlternate />
<span className="title">Drop to upload</span>
<span className="subtitle">
Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
</span>
<button onClick={() => this.uploadCustomBackground()}>
Or Select
</button>
</div>
<button onClick={() => this.setState({ customURLModal: true })}>
{this.getMessage(
"modals.main.settings.sections.background.source.add_url"
)}{" "}
<MdAddLink />
</button>
{/*<span className='subtitle'>
{this.getMessage('modals.main.settings.sections.background.source.custom_background')}{' '}
<span className="link" onClick={this.resetCustom}>
{this.getMessage('modals.main.settings.buttons.reset')}
</span>
</span>*/}
</div>
</div>
<FileUpload
id="bg-input"
accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
loadFunction={(e) =>
this.customBackground(e, false, this.state.currentBackgroundIndex)
}
/>
{this.videoCustomSettings()}
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ customURLModal: false })} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
<CustomURLModal modalClose={(e) => this.addCustomURL(e)} modalCloseOnly={() => this.setState({ customURLModal: false })} />
<Modal
closeTimeoutMS={100}
onRequestClose={() => this.setState({ customURLModal: false })}
isOpen={this.state.customURLModal}
className="Modal resetmodal mainModal"
overlayClassName="Overlay resetoverlay"
ariaHideApp={false}
>
<CustomURLModal
modalClose={(e) => this.addCustomURL(e)}
modalCloseOnly={() => this.setState({ customURLModal: false })}
/>
</Modal>
</ul>
</>
);
}
}

35
src/components/modals/main/settings/sections/background/CustomURLModal.jsx
View File

@@ -1,19 +1,34 @@
import variables from 'modules/variables';
import { useState } from 'react';
import { MdAdd } from 'react-icons/md';
import { TextField } from '@mui/material';
import variables from "modules/variables";
import { useState } from "react";
import { MdAdd } from "react-icons/md";
import { TextField } from "@mui/material";
export default function CustomURLModal({ modalClose, modalCloseOnly }) {
const [url, setURL] = useState();
return (
<>
<span className='closeModal' onClick={modalCloseOnly}>&times;</span>
<h1>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.source.add_url')}</h1>
<TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined'/>
<div className='resetfooter'>
<button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
<MdAdd/>
<span className="closeModal" onClick={modalCloseOnly}>
&times;
</span>
<h1>
{variables.language.getMessage(
variables.languagecode,
"modals.main.settings.sections.background.source.add_url"
)}
</h1>
<TextField
value={url}
onChange={(e) => setURL(e.target.value)}
varient="outlined"
/>
<div className="resetFooter">
<button
className="round import"
style={{ marginLeft: "5px" }}
onClick={() => modalClose(url)}
>
<MdAdd />
</button>
</div>
</>