mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-23 16:57:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: turn backgroundoptions into a functional component

Browse Source
This commit is contained in:
David Ralph
2024-08-21 14:19:23 +01:00
parent bc73f4ebfa
commit 0c4e21dd50
1 changed files with 305 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

633
src/features/background/options/BackgroundOptions.jsx
View File

@@ -1,5 +1,5 @@
import variables from 'config/variables'; import variables from 'config/variables';
import { PureComponent } from 'react'; import { useState, useEffect } from 'react';
import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md'; import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md';
import { Header, PreferencesWrapper } from 'components/Layout/Settings'; import { Header, PreferencesWrapper } from 'components/Layout/Settings';
@@ -15,344 +15,355 @@ import { APIQualityOptions, backgroundImageEffects, getBackgroundOptionItems } f
import defaults from './default'; import defaults from './default';
class BackgroundOptions extends PureComponent { function BackgroundOptions() {
constructor() { const [backgroundType, setBackgroundType] = useState(
super(); localStorage.getItem('backgroundType') || defaults.backgroundType,
this.state = { );
backgroundType: localStorage.getItem('backgroundType') || defaults.backgroundType, const [backgroundFilter, setBackgroundFilter] = useState(
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none', localStorage.getItem('backgroundFilter') || 'none',
backgroundCategories: [variables.getMessage('modals.main.loading')], );
backgroundAPI: localStorage.getItem('backgroundAPI') || defaults.backgroundAPI, const [backgroundCategories, setBackgroundCategories] = useState([
marketplaceEnabled: localStorage.getItem('photo_packs'), variables.getMessage('modals.main.loading'),
effects: false, ]);
backgroundSettingsSection: false, const [backgroundAPI, setBackgroundAPI] = useState(
}; localStorage.getItem('backgroundAPI') || defaults.backgroundAPI,
this.controller = new AbortController(); );
} const [marketplaceEnabled, setMarketplaceEnabled] = useState(localStorage.getItem('photo_packs'));
const [effects, setEffects] = useState(false);
const [backgroundSettingsSection, setBackgroundSettingsSection] = useState(false);
async getBackgroundCategories() { const controller = new AbortController();
async function getBackgroundCategories() {
const data = await ( const data = await (
await fetch(variables.constants.API_URL + '/images/categories', { await fetch(variables.constants.API_URL + '/images/categories', {
signal: this.controller.signal, signal: controller.signal,
}) })
).json(); ).json();
if (this.controller.signal.aborted === true) { if (controller.signal.aborted === true) {
return; return;
} }
if (this.state.backgroundAPI !== 'mue') { if (backgroundAPI !== 'mue') {
// remove counts from unsplash categories // remove counts from unsplash categories
data.forEach((category) => { data.forEach((category) => {
delete category.count; delete category.count;
}); });
} }
this.setState({ setBackgroundCategories(data);
backgroundCategories: data,
backgroundCategoriesOG: data,
});
} }
updateAPI(e) { function updateAPI(e) {
localStorage.setItem('nextImage', null); localStorage.setItem('nextImage', null);
if (e === 'mue') { if (e === 'mue') {
this.setState({ setBackgroundCategories(backgroundCategories);
backgroundCategories: this.state.backgroundCategoriesOG, setBackgroundAPI('mue');
backgroundAPI: 'mue',
});
} else { } else {
const data = this.state.backgroundCategories; const data = backgroundCategories;
data.forEach((category) => { data.forEach((category) => {
delete category.count; delete category.count;
}); });
this.setState({ setBackgroundAPI('unsplash');
backgroundAPI: 'unsplash', setBackgroundCategories(data);
backgroundCategories: data,
});
} }
} }
componentDidMount() { useEffect(() => {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({ setBackgroundCategories([variables.getMessage('modals.update.offline.title')]);
backgroundCategories: [variables.getMessage('modals.update.offline.title')], return;
});
} }
this.getBackgroundCategories(); getBackgroundCategories();
}
componentWillUnmount() { return () => {
// stop making requests controller.abort();
this.controller.abort(); };
} }, []);
render() { const APISettings = (
const APISettings = ( <>
<> <Row final={backgroundAPI === 'mue'}>
<Row final={this.state.backgroundAPI === 'mue'}> <Content
title={variables.getMessage('settings:sections.background.api')}
subtitle={variables.getMessage('settings:sections.background.api_subtitle')}
/>
<Action>
{backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
<>
<Dropdown
label={variables.getMessage('settings:sections.background.category')}
name="apiCategories"
items={[
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
]}
/>
</>
) : (
<ChipSelect
label={variables.getMessage('settings:sections.background.categories')}
options={backgroundCategories}
name="apiCategories"
/>
)}
<Dropdown
label={variables.getMessage('settings:sections.background.source.quality.title')}
name="apiQuality"
element=".other"
items={APIQualityOptions}
/>
<Radio
title="API"
options={[
{
name: 'Mue',
value: 'mue',
},
{
name: 'Unsplash',
value: 'unsplash',
},
]}
name="backgroundAPI"
category="background"
element="#backgroundImage"
onChange={(e) => updateAPI(e)}
/>
</Action>
</Row>
{backgroundAPI === 'unsplash' && (
<Row final={true}>
<Content <Content
title={variables.getMessage('settings:sections.background.api')} title={variables.getMessage('settings:sections.background.unsplash.title')}
subtitle={variables.getMessage('settings:sections.background.api_subtitle')} subtitle={variables.getMessage('settings:sections.background.unsplash.subtitle')}
/> />
<Action> <Action>
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? ( <Text
<> title={variables.getMessage('settings:sections.background.unsplash.id')}
<Dropdown subtitle={variables.getMessage('settings:sections.background.unsplash.id_subtitle')}
label={variables.getMessage('settings:sections.background.category')} placeholder="e.g. 123456, 654321"
name="apiCategories" name="unsplashCollections"
items={[
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
{
value: 'loading',
text: variables.getMessage('modals.main.loading'),
},
]}
/>
</>
) : (
<ChipSelect
label={variables.getMessage('settings:sections.background.categories')}
options={this.state.backgroundCategories}
name="apiCategories"
/>
)}
<Dropdown
label={variables.getMessage('settings:sections.background.source.quality.title')}
name="apiQuality"
element=".other"
items={APIQualityOptions}
/>
<Radio
title="API"
options={[
{
name: 'Mue',
value: 'mue',
},
{
name: 'Unsplash',
value: 'unsplash',
},
]}
name="backgroundAPI"
category="background" category="background"
element="#backgroundImage" element="#backgroundImage"
onChange={(e) => this.updateAPI(e)}
/> />
</Action> </Action>
</Row> </Row>
{this.state.backgroundAPI === 'unsplash' && ( )}
</>
);
let backgroundSettings = APISettings;
switch (backgroundType) {
case 'custom':
backgroundSettings = <CustomSettings />;
break;
case 'colour':
backgroundSettings = <ColourSettings />;
break;
case 'random_colour':
case 'random_gradient':
backgroundSettings = <></>;
break;
default:
break;
}
if (
localStorage.getItem('photo_packs') &&
backgroundType !== 'custom' &&
backgroundType !== 'colour' &&
backgroundType !== 'api'
) {
backgroundSettings = null;
}
const usingImage =
backgroundType !== 'colour' &&
backgroundType !== 'random_colour' &&
backgroundType !== 'random_gradient';
let header;
if (effects === true) {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
secondaryTitle={variables.getMessage('settings:sections.background.effects.title')}
goBack={() => setEffects(false)}
/>
);
} else if (backgroundSettingsSection === true) {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
goBack={() => setBackgroundSettingsSection(false)}
/>
);
} else {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
setting="background"
category="background"
element="#backgroundImage"
/>
);
}
return (
<>
{header}
{backgroundSettingsSection !== true && effects !== true ? (
<>
<div className="moreSettings" onClick={() => setBackgroundSettingsSection(true)}>
<div className="left">
<MdSource />
<div className="content">
<span className="title">
{variables.getMessage('settings:sections.background.source.title')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.source.subtitle')}
</span>
</div>
</div>
<div className="action">
<Dropdown
label={variables.getMessage('settings:sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
items={getBackgroundOptionItems(marketplaceEnabled)}
/>
</div>
</div>
{backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled ? (
<>
<div className="moreSettings" onClick={() => setEffects(true)}>
<div className="left">
<MdOutlineAutoAwesome />
<div className="content">
<span className="title">
{variables.getMessage('settings:sections.background.effects.title')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.effects.subtitle')}
</span>
</div>
</div>
<div className="action">
{' '}
<MdOutlineKeyboardArrowRight />
</div>
</div>
</>
) : null}
</>
) : null}
{backgroundSettingsSection !== true &&
effects !== true &&
(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) ? (
<PreferencesWrapper>
<Row final={true}> <Row final={true}>
<Content <Content
title={variables.getMessage('settings:sections.background.unsplash.title')} title={variables.getMessage('settings:sections.background.display')}
subtitle={variables.getMessage('settings:sections.background.unsplash.subtitle')} subtitle={variables.getMessage('settings:sections.background.display_subtitle')}
/> />
<Action> <Action>
<Text <Checkbox
title={variables.getMessage('settings:sections.background.unsplash.id')} name="bgtransition"
subtitle={variables.getMessage('settings:sections.background.unsplash.id_subtitle')} text={variables.getMessage('settings:sections.background.transition')}
placeholder="e.g. 123456, 654321" element=".other"
name="unsplashCollections" disabled={!usingImage}
category="background" />
element="#backgroundImage" <Checkbox
name="photoInformation"
text={variables.getMessage('settings:sections.background.photo_information')}
element=".other"
/>
<Checkbox
name="photoMap"
text={variables.getMessage('settings:sections.background.show_map')}
element=".other"
disabled={!usingImage}
/> />
</Action> </Action>
</Row> </Row>
)} </PreferencesWrapper>
</> ) : null}
); {backgroundSettingsSection && (
<>
let backgroundSettings = APISettings; <Row final={backgroundType === 'random_colour' || backgroundType === 'random_gradient'}>
switch (this.state.backgroundType) {
case 'custom':
backgroundSettings = <CustomSettings />;
break;
case 'colour':
backgroundSettings = <ColourSettings />;
break;
case 'random_colour':
case 'random_gradient':
backgroundSettings = <></>;
break;
default:
break;
}
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';
let header;
if (this.state.effects === true) {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
secondaryTitle={variables.getMessage('settings:sections.background.effects.title')}
goBack={() => this.setState({ effects: false })}
/>
);
} else if (this.state.backgroundSettingsSection === true) {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
goBack={() => this.setState({ backgroundSettingsSection: false })}
/>
);
} else {
header = (
<Header
title={variables.getMessage('settings:sections.background.title')}
setting="background"
category="background"
element="#backgroundImage"
/>
);
}
return (
<>
{header}
{this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
<>
<div
className="moreSettings"
onClick={() => this.setState({ backgroundSettingsSection: true })}
>
<div className="left">
<MdSource />
<div className="content">
<span className="title">
{variables.getMessage('settings:sections.background.source.title')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.source.subtitle')}
</span>
</div>
</div>
<div className="action">
<Dropdown
label={variables.getMessage('settings:sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
items={getBackgroundOptionItems(this.state.marketplaceEnabled)}
/>
</div>
</div>
{this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled ? (
<>
<div className="moreSettings" onClick={() => this.setState({ effects: true })}>
<div className="left">
<MdOutlineAutoAwesome />
<div className="content">
<span className="title">
{variables.getMessage('settings:sections.background.effects.title')}
</span>
<span className="subtitle">
{variables.getMessage('settings:sections.background.effects.subtitle')}
</span>
</div>
</div>
<div className="action">
{' '}
<MdOutlineKeyboardArrowRight />
</div>
</div>
</>
) : null}
</>
) : null}
{this.state.backgroundSettingsSection !== true &&
this.state.effects !== true &&
(this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) ? (
<PreferencesWrapper>
<Row final={true}>
<Content
title={variables.getMessage('settings:sections.background.display')}
subtitle={variables.getMessage('settings:sections.background.display_subtitle')}
/>
<Action>
<Checkbox
name="bgtransition"
text={variables.getMessage('settings:sections.background.transition')}
element=".other"
disabled={!usingImage}
/>
<Checkbox
name="photoInformation"
text={variables.getMessage('settings:sections.background.photo_information')}
element=".other"
/>
<Checkbox
name="photoMap"
text={variables.getMessage('settings:sections.background.show_map')}
element=".other"
disabled={!usingImage}
/>
</Action>
</Row>
</PreferencesWrapper>
) : null}
{this.state.backgroundSettingsSection && (
<>
<Row
final={
this.state.backgroundType === 'random_colour' ||
this.state.backgroundType === 'random_gradient'
}
>
<Content
title={variables.getMessage('settings:sections.background.source.title')}
subtitle={variables.getMessage('settings:sections.background.source.subtitle')}
/>
<Action>
<Dropdown
label={variables.getMessage('settings:sections.background.type.title')}
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
items={getBackgroundOptionItems(this.state.marketplaceEnabled)}
/>
</Action>
</Row>
{/* todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
{backgroundSettings}
</>
)}
{(this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) &&
this.state.effects ? (
<Row final={true}>
<Content <Content
title={variables.getMessage('settings:sections.background.effects.title')} title={variables.getMessage('settings:sections.background.source.title')}
subtitle={variables.getMessage('settings:sections.background.effects.subtitle')} subtitle={variables.getMessage('settings:sections.background.source.subtitle')}
/> />
<Action> <Action>
<Dropdown
label={variables.getMessage('settings:sections.background.type.title')}
name="backgroundType"
onChange={(value) => setBackgroundType(value)}
category="background"
items={getBackgroundOptionItems(marketplaceEnabled)}
/>
</Action>
</Row>
{/* todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
{backgroundSettings}
</>
)}
{(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) &&
effects ? (
<Row final={true}>
<Content
title={variables.getMessage('settings:sections.background.effects.title')}
subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
/>
<Action>
<Slider
title={variables.getMessage('settings:sections.background.effects.blur')}
name="blur"
min="0"
max="100"
default="0"
display="%"
marks={values.background}
category="backgroundeffect"
element="#backgroundImage"
/>
<Slider
title={variables.getMessage('settings:sections.background.effects.brightness')}
name="brightness"
min="0"
max="100"
default="90"
display="%"
marks={values.background}
category="backgroundeffect"
element="#backgroundImage"
/>
<Dropdown
label={variables.getMessage('settings:sections.background.effects.filters.title')}
name="backgroundFilter"
onChange={(value) => setBackgroundFilter(value)}
category="backgroundeffect"
element="#backgroundImage"
items={backgroundImageEffects}
/>
{backgroundFilter !== 'none' && (
<Slider <Slider
title={variables.getMessage('settings:sections.background.effects.blur')} title={variables.getMessage('settings:sections.background.effects.filters.amount')}
name="blur" name="backgroundFilterAmount"
min="0" min="0"
max="100" max="100"
default="0" default="0"
@@ -361,46 +372,12 @@ class BackgroundOptions extends PureComponent {
category="backgroundeffect" category="backgroundeffect"
element="#backgroundImage" element="#backgroundImage"
/> />
<Slider )}
title={variables.getMessage('settings:sections.background.effects.brightness')} </Action>
name="brightness" </Row>
min="0" ) : null}
max="100" </>
default="90" );
display="%"
marks={values.background}
category="backgroundeffect"
element="#backgroundImage"
/>
<Dropdown
label={variables.getMessage('settings:sections.background.effects.filters.title')}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="backgroundeffect"
element="#backgroundImage"
items={backgroundImageEffects}
/>
{this.state.backgroundFilter !== 'none' && (
<Slider
title={variables.getMessage(
'settings:sections.background.effects.filters.amount',
)}
name="backgroundFilterAmount"
min="0"
max="100"
default="0"
display="%"
marks={values.background}
category="backgroundeffect"
element="#backgroundImage"
/>
)}
</Action>
</Row>
) : null}
</>
);
}
} }
export { BackgroundOptions as default, BackgroundOptions }; export { BackgroundOptions as default, BackgroundOptions };