[mirotalk] - make the room language configurable from your config.js

app/src/config.template.js

@@ -4,6 +4,7 @@ module.exports = {
     // Branding and customizations require a license: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
     brand: {
         app: {
+            language: 'en',
             name: 'MiroTalk',
             title: 'MiroTalk<br />Free browser based Real-time video calls.<br />Simple, Secure, Fast.',
             description:

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.64
+ * @version 1.4.65
  *
  */
 

package.json

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

public/js/brand.js

@@ -37,6 +37,7 @@ const footer = document.getElementById('footer');
 
 let brand = {
     app: {
+        language: 'en',
         name: 'MiroTalk',
         title: 'MiroTalk<br />Free browser based Real-time video calls.<br />Simple, Secure, Fast.',
         description:

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.64
+ * @version 1.4.65
  *
  */
 
@@ -11039,7 +11039,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: '<strong>WebRTC P2P v1.4.64</strong>',
+        title: '<strong>WebRTC P2P v1.4.65</strong>',
         imageAlt: 'mirotalk-about',
         imageUrl: images.about,
         customClass: { image: 'img-about' },

public/js/common.js

@@ -165,6 +165,13 @@ const roomName = document.getElementById('roomName');
 if (roomName) {
     roomName.value = '';
     typeWriter();
+
+    roomName.onkeyup = (e) => {
+        if (e.keyCode === 13) {
+            e.preventDefault();
+            joinRoom();
+        }
+    };
 }
 
 // ####################################################################
@@ -202,15 +209,8 @@ if (adultCnt) {
     };
 }
 
-document.getElementById('roomName').onkeyup = (e) => {
-    if (e.keyCode === 13) {
-        e.preventDefault();
-        joinRoom();
-    }
-};
-
 function genRoom() {
-    document.getElementById('roomName').value = getUUID4();
+    roomName.value = getUUID4();
 }
 
 function getUUID4() {
@@ -220,7 +220,7 @@ function getUUID4() {
 }
 
 function joinRoom() {
-    const roomName = filterXSS(document.getElementById('roomName').value).trim().replace(/\s+/g, '-');
+    const roomName = filterXSS(roomName.value).trim().replace(/\s+/g, '-');
     const roomValid = isValidRoomName(roomName);
 
     if (!roomName) {

public/js/translate.js

@@ -10,5 +10,23 @@ document.head.appendChild(script);
  * https://www.w3schools.com/howto/howto_google_translate.asp
  */
 function googleTranslateElementInit() {
-    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
+    new google.translate.TranslateElement({ 
+        pageLanguage: 'en',
+        autoDisplay: false // Prevent the popup from showing by default
+    }, 'google_translate_element');
+
+    const interval = setInterval(() => {
+        const language = brand.app.language ? brand.app.language : 'en';
+
+        if (language === 'en') {
+            clearInterval(interval);
+        }
+
+        const select = document.querySelector('.goog-te-combo');
+        if (select) {
+            select.value = language;
+            select.dispatchEvent(new Event('change'));
+            clearInterval(interval);
+        }
+    }, 500);
 }

public/views/client.html

@@ -1162,6 +1162,7 @@ access to use this app.
         <script defer src="/socket.io/socket.io.js"></script>
         <script defer src="../js/localStorage.js"></script>
         <script defer src="../js/helpers.js"></script>
+        <script defer src="../js/common.js"></script>
         <script defer src="../js/brand.js"></script>
         <script defer src="../js/buttons.js"></script>
         <script defer src="../js/client.js"></script>

public/views/landing.html

@@ -751,9 +751,9 @@
         </div>
 
         <script defer src="../js/utils.js"></script>
+        <script defer src="../js/common.js"></script>
         <script defer src="../js/brand.js"></script>
         <script defer src="../js/landing.js"></script>
-        <script defer src="../js/common.js"></script>
         <script async defer src="https://buttons.github.io/buttons.js"></script>
     </body>
 </html>