import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
import { Cancel } from '@mui/icons-material';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import FileUpload from '../../FileUpload';
import Slider from '../../Slider';
import Switch from '../../Switch';
import Radio from '../../Radio';
import ColourSettings from './Colour';
import EventBus from 'modules/helpers/eventbus';
export default class BackgroundSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
customBackground: this.getCustom(),
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundCategories: [this.getMessage(this.languagecode, 'modals.main.loading')]
};
this.controller = new AbortController();
}
resetCustom = () => {
localStorage.setItem('customBackground', '[""]');
this.setState({
customBackground: ['']
});
toast(this.getMessage(this.languagecode, 'toasts.reset'));
EventBus.dispatch('refresh', 'background');
}
customBackground(e, text, index) {
const result = (text === true) ? e.target.value : e.target.result;
const customBackground = this.state.customBackground;
customBackground[index] = result;
this.setState({
customBackground
});
this.forceUpdate();
localStorage.setItem('customBackground', JSON.stringify(customBackground));
document.querySelector('.reminder-info').style.display = 'block';
localStorage.setItem('showReminder', true);
}
modifyCustomBackground(type, index) {
const customBackground = this.state.customBackground;
if (type === 'add') {
customBackground.push('');
} else {
customBackground.splice(index, 1);
}
this.setState({
customBackground
});
this.forceUpdate();
localStorage.setItem('customBackground', JSON.stringify(customBackground));
}
videoCustomSettings = (index) => {
const customBackground = this.state.customBackground[index];
if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
return (
<>
);
} else {
return null;
}
}
marketplaceType = () => {
if (localStorage.getItem('photo_packs')) {
return ;
}
}
getCustom() {
let data;
try {
data = JSON.parse(localStorage.getItem('customBackground'));
} catch (e) {
data = [localStorage.getItem('customBackground')];
}
return data;
}
uploadCustombackground(index) {
document.getElementById('bg-input').setAttribute('index', index);
document.getElementById('bg-input').click();
// to fix loadFunction
this.setState({
currentBackgroundIndex: index
});
}
async getBackgroundCategories() {
const data = await (await fetch(window.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(this.languagecode, 'modals.update.offline.title')]
});
}
this.getBackgroundCategories();
}
componentWillUnmount() {
// stop making requests
this.controller.abort();
}
render() {
const { getMessage, languagecode } = this;
let backgroundSettings;
const apiOptions = [
{
name: 'Mue',
value: 'mue'
},
{
name: 'Unsplash',
value: 'unsplash'
},
{
name: 'Pexels',
value: 'pexels'
}
];
const APISettings = (
<>
{this.state.backgroundCategories.map((category) => (
))}
);
const customSettings = (
<>
{getMessage(languagecode, 'modals.main.settings.sections.background.source.custom_background')} {getMessage(languagecode, 'modals.main.settings.buttons.reset')}
{this.state.customBackground.map((_url, index) => (
this.customBackground(e, true, index)}>
{this.state.customBackground.length > 1 ? : null}
this.uploadCustombackground(index)}>{getMessage(languagecode, 'modals.main.settings.sections.background.source.upload')}
{this.videoCustomSettings(index)}
))}
this.customBackground(e, false, this.state.currentBackgroundIndex)} />
);
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = customSettings; break;
case 'colour': 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;
}
return (
<>
{getMessage(languagecode, 'modals.main.settings.sections.background.title')}
{getMessage(languagecode, 'modals.main.settings.sections.background.source.title')}
this.setState({ backgroundType: value })} category='background'>
{this.marketplaceType()}
{backgroundSettings}
{getMessage(languagecode, 'modals.main.settings.sections.background.buttons.title')}
{getMessage(languagecode, 'modals.main.settings.sections.background.effects.title')}
);
}
}