import variables from 'modules/variables'; import { PureComponent } from 'react'; import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md'; import Radio from '../main/settings/Radio'; import Checkbox from '../main/settings/Checkbox'; import FileUpload from '../main/settings/FileUpload'; import { loadSettings } from 'modules/helpers/settings'; import { importSettings } from 'modules/helpers/settings/modals'; import * as default_settings from 'modules/default_settings.json'; import * as languages from 'modules/languages.json'; export default class WelcomeSections extends PureComponent { getMessage = (text) => variables.language.getMessage(variables.languagecode, text); constructor() { super(); this.state = { // themes autoClass: 'toggle auto active', lightClass: 'toggle lightTheme', darkClass: 'toggle darkTheme', // welcome welcomeImage: 0, // final importedSettings: [], }; this.changeWelcomeImg = this.changeWelcomeImg.bind(this); this.welcomeImages = 4; } changeTheme(type) { this.setState({ autoClass: type === 'auto' ? 'toggle auto active' : 'toggle auto', lightClass: type === 'light' ? 'toggle lightTheme active' : 'toggle lightTheme', darkClass: type === 'dark' ? 'toggle darkTheme active' : 'toggle darkTheme', }); localStorage.setItem('theme', type); loadSettings(true); } getSetting(name) { const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On'); return value.charAt(0).toUpperCase() + value.slice(1); } importSettings(e) { importSettings(e); const settings = []; const data = JSON.parse(e.target.result); Object.keys(data).forEach((setting) => { // language and theme already shown, the others are only used internally if ( setting === 'language' || setting === 'theme' || setting === 'firstRun' || setting === 'showWelcome' || setting === 'showReminder' ) { return; } const defaultSetting = default_settings.find((i) => i.name === setting); if (defaultSetting !== undefined) { if (data[setting] === String(defaultSetting.value)) { return; } } settings.push({ name: setting, value: data[setting], }); }); this.setState({ importedSettings: settings, }); this.props.switchTab(5); } changeWelcomeImg() { let welcomeImage = this.state.welcomeImage; this.setState({ welcomeImage: ++welcomeImage % this.welcomeImages.length, }); this.timeout = setTimeout(this.changeWelcomeImg, 3000); } componentDidMount() { this.timeout = setTimeout(this.changeWelcomeImg, 3000); } componentWillUnmount() { if (this.timeout) { clearTimeout(this.timeout); this.timeout = null; } } // cancel welcome image timer if not on welcome tab componentDidUpdate() { if (this.props.currentTab !== 0) { if (this.timeout) { clearTimeout(this.timeout); this.timeout = null; } } else if (!this.timeout) { this.timeout = setTimeout(this.changeWelcomeImg, 3000); } } render() { const intro = ( <> {this.getMessage('modals.welcome.sections.intro.title')}
{this.getMessage('modals.welcome.sections.intro.description')}
{this.getMessage('modals.welcome.sections.language.description')}{' '} GitHub !
{this.getMessage('modals.welcome.sections.theme.description')}
{this.getMessage('modals.welcome.sections.theme.tip')}
{this.getMessage('modals.welcome.sections.settings.description')}
{this.getMessage('modals.welcome.sections.settings.tip')}
> ); const privacy = ( <> {this.getMessage('modals.welcome.sections.privacy.title')}{this.getMessage('modals.welcome.sections.privacy.description')}
{this.getMessage('modals.welcome.sections.privacy.offline_mode_description')}
{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}
{this.getMessage('modals.welcome.sections.final.description')}
{this.getMessage('modals.welcome.sections.final.changes_description')}