[mirotalkc2c] - replace GIF loaders with CSS spinners for faster load

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.2.84 - Environment Configuration
+# MiroTalk C2C v.1.2.85 - 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.84
+ * @version 1.2.85
  */
 
 require('dotenv').config();

frontend/css/client.css

@@ -66,6 +66,7 @@ body {
     min-width: 290px;
     padding: 30px;
     color: #ffffff;
+    text-align: center;
     border: var(--border);
     border-radius: var(--border-radius);
     background: var(--secondary-color);
@@ -82,8 +83,59 @@ body {
     font-size: 16px;
 }
 
-.loading-img {
-    width: 290px;
+/* Custom CSS spinner */
+.loading-spinner {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 15px;
+}
+
+.spinner-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-top-color: #fff;
+    animation: spin 1s linear infinite;
+}
+
+.spinner-ring::before {
+    content: '';
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    border: 4px solid rgba(255, 255, 255, 0.05);
+    border-top-color: rgba(255, 255, 255, 0.6);
+    animation: spin 1.5s linear reverse infinite;
+}
+
+.spinner-logo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    animation: pulse-logo 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse-logo {
+    0%,
+    100% {
+        opacity: 0.7;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.08);
+    }
 }
 
 .grid-buttons {
@@ -244,6 +296,27 @@ body {
     overflow: hidden;
 }
 
+/* Video spinner overlay */
+.video-spinner {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.video-spinner .loading-spinner {
+    width: 80px;
+    height: 80px;
+}
+
+.video-spinner .spinner-logo {
+    width: 32px;
+    height: 32px;
+}
+
 .remoteVideoWrap {
     z-index: 4;
     width: 100vw;

frontend/html/client.html

@@ -64,7 +64,10 @@
         <div id="loadingDivContainer">
             <div id="loadingDiv" class="center">
                 <h1 class="pulsate">Loading</h1>
-                <img class="loading-img" src="../images/loading.gif" />
+                <div class="loading-spinner">
+                    <div class="spinner-ring"></div>
+                    <img class="spinner-logo" src="../images/logo.svg" alt="logo" />
+                </div>
                 <pre>
 Please allow camera & microphone
 access to use this app.          

frontend/images/loader.gif

@@ -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.84
+ * @version 1.2.85
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');
@@ -80,7 +80,6 @@ const image = {
     camOff: '../images/camOff.png',
     feedback: '../images/feedback.png',
     forbidden: '../images/forbidden.png',
-    poster: '../images/loader.gif',
 };
 
 const className = {
@@ -668,12 +667,19 @@ function createVideoElement(id, stream, muted = false) {
     video.controls = false;
     video.muted = muted;
     video.volume = muted ? 0 : 1;
-    video.poster = image.poster;
     attachMediaStream(video, stream);
     video.play().catch(() => {});
     return video;
 }
 
+function createVideoSpinner() {
+    const spinner = document.createElement('div');
+    spinner.className = 'video-spinner';
+    spinner.innerHTML =
+        '<div class="loading-spinner"><div class="spinner-ring"></div><img class="spinner-logo" src="../images/logo.svg" alt="logo" /></div>';
+    return spinner;
+}
+
 function createAudioElement(id, stream, muted = false) {
     const audio = document.createElement('audio');
     audio.id = id;
@@ -758,6 +764,9 @@ function setLocalMedia(stream) {
         myLocalMedia.style.objectFit = localStorageConfig.video.settings.aspect_ratio ? 'contain' : 'cover';
         myLocalMedia.style.display = 'block';
         myVideoAvatarImage.style.display = 'none';
+        const myVideoSpinner = createVideoSpinner();
+        myVideoWrap.appendChild(myVideoSpinner);
+        myLocalMedia.addEventListener('playing', () => myVideoSpinner.remove(), { once: true });
     } else if (hasAudio) {
         myLocalMedia = createAudioElement('myAudio', stream, true);
         myLocalMedia.style.display = 'block';
@@ -888,6 +897,9 @@ function setRemoteMedia(stream, peers, peerId) {
         remoteVideoElem = createVideoElement(peerId + '_remoteVideo', stream, false);
         remoteVideoElem.style.display = 'block';
         remoteVideoAvatarImage.style.display = 'none';
+        const remoteVideoSpinner = createVideoSpinner();
+        remoteVideoWrap.appendChild(remoteVideoSpinner);
+        remoteVideoElem.addEventListener('playing', () => remoteVideoSpinner.remove(), { once: true });
     }
 
     // Audio element (if audio track)

frontend/images/loading.gif

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.2.84",
+    "version": "1.2.85",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {