diff --git a/src/i18n/withTranslation.js b/src/i18n/withTranslation.js index 8743030..c3d096b 100644 --- a/src/i18n/withTranslation.js +++ b/src/i18n/withTranslation.js @@ -23,8 +23,12 @@ export class LanguageProvider extends Component { this.state = { currentLanguage, - availableLanguages: ['ar', 'bg', 'cs', 'de', 'el', 'en', 'es', 'fr', 'hr', 'hu', 'it', 'pl', 'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'tr', 'uk', 'zh'] + availableLanguages: ['ar', 'bg', 'cs', 'de', 'el', 'en', 'es', 'fr', 'hr', 'hu', 'it', 'pl', 'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'tr', 'uk', 'zh'], + demoMode: false, // Enable demo mode + currentLanguageIndex: 0 }; + + this.demoInterval = null; } componentDidMount() { @@ -33,6 +37,11 @@ export class LanguageProvider extends Component { // Set initial language state and HTML attribute this.setState({ currentLanguage: this.props.i18n.language }); document.documentElement.lang = this.props.i18n.language; + + // Start demo mode + if (this.state.demoMode) { + this.startDemo(); + } } } @@ -40,8 +49,38 @@ export class LanguageProvider extends Component { if (this.props.i18n) { this.props.i18n.off('languageChanged', this.handleLanguageChanged); } + + // Clean up demo interval + if (this.demoInterval) { + clearInterval(this.demoInterval); + } } + startDemo = () => { + // Find current language index + const currentIndex = this.state.availableLanguages.indexOf(this.state.currentLanguage); + this.setState({ currentLanguageIndex: currentIndex >= 0 ? currentIndex : 0 }); + + this.demoInterval = setInterval(() => { + const nextIndex = (this.state.currentLanguageIndex + 1) % this.state.availableLanguages.length; + const nextLanguage = this.state.availableLanguages[nextIndex]; + + this.setState({ currentLanguageIndex: nextIndex }); + + if (this.props.i18n) { + this.props.i18n.changeLanguage(nextLanguage); + } + }, 5000); // Change language every 5 seconds + }; + + stopDemo = () => { + if (this.demoInterval) { + clearInterval(this.demoInterval); + this.demoInterval = null; + } + this.setState({ demoMode: false }); + }; + handleLanguageChanged = (lng) => { this.setState({ currentLanguage: lng }); @@ -87,6 +126,11 @@ export class LanguageProvider extends Component { changeLanguage = (language) => { if (this.props.i18n && this.state.availableLanguages.includes(language)) { + // Stop demo mode if user manually changes language + if (this.state.demoMode) { + this.stopDemo(); + } + this.props.i18n.changeLanguage(language); } }; @@ -95,7 +139,9 @@ export class LanguageProvider extends Component { const contextValue = { currentLanguage: this.state.currentLanguage, changeLanguage: this.changeLanguage, - availableLanguages: this.state.availableLanguages + availableLanguages: this.state.availableLanguages, + demoMode: this.state.demoMode, + stopDemo: this.stopDemo }; return (