[mirotalkwebrtc] - add settings/language

miroslavpejic85 · Dec 1, 2024 · 13b0c70 · 13b0c70
1 parent d9d96ed
commit 13b0c70
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 2 deletions.
diff --git a/frontend/css/client.css b/frontend/css/client.css
@@ -540,6 +540,7 @@ iframe {
     }
 }
 
+.settingsDiv,
 .accountDiv,
 .addRowDiv {
     position: fixed;
@@ -555,6 +556,7 @@ iframe {
     color: var(--text-color);
 }
 
+.settingsDiv label,
 .accountDiv label,
 .addRowDiv label {
     display: block;
@@ -563,6 +565,20 @@ iframe {
     font-size: 16px;
 }
 
+.settingsDiv select {
+    margin-top: 10px !important;
+    width: 100%;
+    padding: 12px;
+    border-radius: 5px;
+    border: 0.1px solid var(--border-color);
+    background: var(--body-color);
+    color: var(--text-color);
+    color-scheme: var(--input-color-schema);
+    font-size: 16px;
+    outline: none;
+    cursor: pointer;
+}
+
 .accountDiv input,
 .addRowDiv input {
     padding: 12px;
@@ -591,11 +607,13 @@ iframe {
     width: auto;
 }
 
+.settingsDiv i,
 .accountDiv i,
 .addRowDiv i {
     cursor: pointer;
 }
 
+.settingsDiv i:hover,
 .accountDiv i:hover,
 .addRowDiv i:hover {
     color: var(--color-hover);
@@ -831,6 +849,19 @@ tr:nth-child(even) {
     background: transparent;
 }
 
+/* google translate */
+.skiptranslate iframe,
+.goog-te-banner-frame.skiptranslate {
+    display: none !important;
+    position: absolute !important;
+    top: -10000px !important;
+}
+
+#google_translate_element select {
+    background: var(--secondary-color) !important;
+    color: var(--text-color) !important;
+}
+
 .fadeIn {
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;
@@ -934,6 +965,9 @@ tr:nth-child(even) {
     .accountDiv {
         width: 100%;
     }
+    .settingsDiv {
+        width: 100%;
+    }
     .dash-content .boxes {
         display: flex;
     }

diff --git a/frontend/html/client.html b/frontend/html/client.html
@@ -46,6 +46,7 @@
         <script defer src="../js/swal.js"></script>
         <script defer src="../js/api.js"></script>
         <script defer src="../js/client.js"></script>
+        <script defer src="../js/translate.js"></script>
     </head>
 
     <body>
@@ -110,6 +111,12 @@
                             <span class="link-name">Account</span>
                         </a>
                     </li>
+                    <li>
+                        <a id="navSet" href="javascript:void(0)">
+                            <i class="uil uil-setting"></i>
+                            <span class="link-name">Settings</span>
+                        </a>
+                    </li>
                     <li class="mode">
                         <a href="javascript:void(0)">
                             <i class="uil uil-moon"></i>
@@ -307,6 +314,12 @@
                     <button id="account-delete">Delete</button>
                 </div>
 
+                <div id="settingsDiv" class="settingsDiv hidden">
+                    <i id="settings-close-btn" class="uil uil-multiply"></i>
+                    <label for="google_translate_element">Language</label>
+                    <div id="google_translate_element"></div>
+                </div>
+
                 <div id="p2p" class="dash-iframe fadeIn">
                     <iframe
                         id="p2p-iframe"

diff --git a/frontend/js/client.js b/frontend/js/client.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/a-selfhosted-mirotalks-webrtc-rooms-scheduler-server/42643313
  * @author  Miroslav Pejic - [email protected]
- * @version 1.1.21
+ * @version 1.1.22
  */
 
 const isMobile = !!/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(
@@ -28,6 +28,7 @@ const navSFU = document.getElementById('navSFU');
 const navBRO = document.getElementById('navBRO');
 const navSup = document.getElementById('navSup');
 const navAcc = document.getElementById('navAcc');
+const navSet = document.getElementById('navSet');
 
 const myProfile = document.getElementById('myProfile');
 
@@ -83,6 +84,9 @@ const accountServicesAllowed = document.getElementById('account-services-allowed
 const accountRoomsAllowed = document.getElementById('account-rooms-allowed');
 const accountDelete = document.getElementById('account-delete');
 
+const settingsDiv = document.getElementById('settingsDiv');
+const settingsClose = document.getElementById('settings-close-btn');
+
 const addRowDiv = document.getElementById('addRowDiv');
 const openAddBtn = document.getElementById('open-add-btn');
 const closeAddBtn = document.getElementById('add-close-btn');
@@ -360,10 +364,15 @@ navBRO.addEventListener('click', () => {
 navSup.addEventListener('click', () => {
     openURL(config.Author.Support, true);
 });
+
 navAcc.addEventListener('click', () => {
     getMyAccount();
 });
 
+navSet.addEventListener('click', () => {
+    toggleSettings();
+});
+
 hideBoxesDS.addEventListener('click', () => {
     toggleBoxesDS(false);
 });
@@ -401,6 +410,10 @@ accountDelete.addEventListener('click', () => {
     delMyAccount();
 });
 
+settingsClose.addEventListener('click', () => {
+    toggleSettings();
+});
+
 function navShow(elements = []) {
     elemDisplay(search, false);
     elemDisplay(dsDash, false);
@@ -453,6 +466,17 @@ function toggleAccount() {
     }
 }
 
+function toggleSettings() {
+    if (settingsDiv.classList.contains('show')) {
+        animateCSS(settingsDiv, 'fadeOutRight').then((ok) => {
+            settingsDiv.classList.toggle('show');
+        });
+    } else {
+        settingsDiv.classList.toggle('show');
+        animateCSS(settingsDiv, 'fadeInRight');
+    }
+}
+
 async function showDataTable() {
     navDash.click();
 

diff --git a/frontend/js/translate.js b/frontend/js/translate.js
@@ -0,0 +1,10 @@
+'use strict';
+
+const trScript = document.createElement('script');
+trScript.setAttribute('async', '');
+trScript.setAttribute('src', 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
+document.head.appendChild(trScript);
+
+function googleTranslateElementInit() {
+    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalkwebrtc",
-    "version": "1.1.21",
+    "version": "1.1.22",
     "description": "MiroTalk WebRTC admin",
     "main": "server.js",
     "scripts": {