import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MenuItem } from '@mui/material';
import Header from '../../Header';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import Slider from '../../Slider';
import Radio from '../../Radio';
import SettingsItem from '../../SettingsItem';
import ColourSettings from './Colour';
import CustomSettings from './Custom';
import { values } from 'modules/helpers/settings/modals';
export default class BackgroundSettings extends PureComponent {
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'),
};
this.controller = new AbortController();
}
async getBackgroundCategories() {
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,
});
}
componentDidMount() {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
backgroundCategories: [this.getMessage('modals.update.offline.title')],
});
}
this.getBackgroundCategories();
}
componentWillUnmount() {
// stop making requests
this.controller.abort();
}
render() {
const { getMessage } = this;
let backgroundSettings;
const apiOptions = [
{
name: 'Mue',
value: 'mue',
},
{
name: 'Unsplash',
value: 'unsplash',
},
{
name: 'Pexels',
value: 'pexels',
},
];
const interval = (
);
const APISettings = (
<>
this.setState({ backgroundAPI: e })}
/>
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
<>
>
) : (
{this.state.backgroundCategories.map((category) => (
))}
)}
{interval}
>
);
switch (this.state.backgroundType) {
case 'custom':
backgroundSettings = ;
break;
case 'colour':
backgroundSettings = ;
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'
) {
backgroundSettings = null;
}
const usingImage =
this.state.backgroundType !== 'colour' &&
this.state.backgroundType !== 'random_colour' &&
this.state.backgroundType !== 'random_gradient';
return (
<>
this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled ? (
) : null}
{backgroundSettings}
{this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled ? (
this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
{this.state.backgroundFilter !== 'none' ? (
) : null}
) : null}
>
);
}
}