[mirotalk] - fix: debounce theme card clicks on mobile to prevent freezing

public/css/client.css

@@ -2699,8 +2699,15 @@ button {
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.05);
     cursor: pointer;
-    transition: all 0.25s ease;
+    transition:
+        border-color 0.25s ease,
+        background 0.25s ease,
+        box-shadow 0.25s ease,
+        transform 0.25s ease,
+        opacity 0.25s ease;
     user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .theme-card i {
@@ -3121,7 +3128,6 @@ button {
 /* Style the tab content */
 .tabcontent {
     display: none;
-    margin-top: 15px;
     padding: 6px 12px;
     width: 100%;
     min-height: 480px;

public/js/client.js

@@ -693,6 +693,7 @@ let isAudioPitchBar = true;
 let isPushToTalkActive = false;
 let isSpaceDown = false;
 let isShortcutsEnabled = false;
+let themeCardDebounce = null;
 
 // recording
 let mediaRecorder;
@@ -7320,12 +7321,18 @@ function setupMySettings() {
         lS.setSettings(lsSettings);
         setTheme();
     });
+
     document.querySelectorAll('.theme-card').forEach((card) => {
         card.onclick = () => {
             if (card.classList.contains('disabled')) return;
             const index = parseInt(card.dataset.index);
             themeSelect.selectedIndex = index;
-            themeSelect.dispatchEvent(new Event('change'));
+            updateThemeCardsActive();
+            if (themeCardDebounce) clearTimeout(themeCardDebounce);
+            themeCardDebounce = setTimeout(() => {
+                themeCardDebounce = null;
+                themeSelect.dispatchEvent(new Event('change'));
+            }, 200);
         };
     });
     // video object fit