Add demo mode functionality to LanguageProvider: Introduced demo mode to automatically cycle through available languages every 5 seconds. Updated state management to include demo mode and current language index, and added methods to start and stop the demo. Enhanced language change handling to stop demo mode when a user manually selects a language.

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 (