[mirotalk] - use mutationObserver

app/src/server.js

@@ -39,7 +39,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.66
+ * @version 1.4.67
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.4.66",
+    "version": "1.4.67",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

public/js/client.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.66
+ * @version 1.4.67
  *
  */
 
@@ -11039,7 +11039,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: '<strong>WebRTC P2P v1.4.66</strong>',
+        title: '<strong>WebRTC P2P v1.4.67</strong>',
         imageAlt: 'mirotalk-about',
         imageUrl: images.about,
         customClass: { image: 'img-about' },

public/js/translate.js

@@ -1,35 +1,54 @@
 'use strict';
 
-const script = document.createElement('script');
-script.setAttribute('async', '');
-script.setAttribute('src', 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
-document.head.appendChild(script);
+/**
+ * Dynamically load an external script and return a Promise.
+ */
+function loadScript(src) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = src;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+}
 
 /**
- * Start Google Translate
- * https://www.w3schools.com/howto/howto_google_translate.asp
+ * Initialize Google Translate.
  */
 function googleTranslateElementInit() {
     new google.translate.TranslateElement(
         {
             pageLanguage: 'en',
-            autoDisplay: false, // Prevent the popup from showing by default
+            autoDisplay: false, // Prevent default popup
         },
         'google_translate_element',
     );
 
-    const interval = setInterval(() => {
-        const language = brand.app.language ? brand.app.language : 'en';
-
-        if (language === 'en') {
-            clearInterval(interval);
-        }
+    const language = brand?.app?.language || 'en';
+    if (language === 'en') return; // No need to switch if default is 'en'
 
+    // Use MutationObserver to detect the dropdown
+    const observer = new MutationObserver(() => {
         const select = document.querySelector('.goog-te-combo');
         if (select) {
             select.value = language;
             select.dispatchEvent(new Event('change'));
-            clearInterval(interval);
+            observer.disconnect(); // Stop observing once the dropdown is found
         }
-    }, 500);
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
 }
+
+/**
+ * Load Google Translate and initialize.
+ */
+(async function initGoogleTranslate() {
+    try {
+        await loadScript('https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
+    } catch (error) {
+        console.error('Failed to load Google Translate script:', error);
+    }
+})();