[mirotalkc2c] - add bouncing dots animation to waiting screen, update dep

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.2.85 - Environment Configuration
+# MiroTalk C2C v.1.2.86 - Environment Configuration
 # ====================================================
 
 # App environment

backend/server.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.85
+ * @version 1.2.86
  */
 
 require('dotenv').config();

frontend/css/client.css

@@ -138,6 +138,43 @@ body {
     }
 }
 
+/* Waiting dots animation */
+.waiting-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 25px;
+}
+
+.waiting-dots .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    animation: waiting-bounce 1.4s ease-in-out infinite;
+}
+
+.waiting-dots .dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.waiting-dots .dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes waiting-bounce {
+    0%,
+    80%,
+    100% {
+        opacity: 0.3;
+        transform: scale(0.8);
+    }
+    40% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+}
+
 .grid-buttons {
     display: grid;
     grid-template-columns: repeat(5, 1fr); /* 4 equal-width columns */

frontend/html/client.html

@@ -82,6 +82,11 @@ <h1 class="pulsate">Waiting</h1>
                     <pre>
 Waiting for users to join.
                     </pre>
+                    <div class="waiting-dots">
+                        <span class="dot"></span>
+                        <span class="dot"></span>
+                        <span class="dot"></span>
+                    </div>
                 </div>
                 <div class="grid-buttons">
                     <button id="shareRoomBtn" class="fas fa-share-nodes"></button>

frontend/js/client.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.85
+ * @version 1.2.86
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.2.85",
+    "version": "1.2.86",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {
@@ -40,12 +40,12 @@
     "dependencies": {
         "@mattermost/client": "11.5.0",
         "@ngrok/ngrok": "1.7.0",
-        "@sentry/node": "^10.46.0",
+        "@sentry/node": "^10.47.0",
         "colors": "^1.4.0",
         "compression": "^1.8.1",
         "cors": "^2.8.6",
         "dompurify": "^3.3.3",
-        "dotenv": "^17.3.1",
+        "dotenv": "^17.4.0",
         "express": "^5.2.1",
         "express-openid-connect": "^2.20.1",
         "he": "^1.2.0",