aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - replace loading GIFs with pure CSS spinners

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-29 11:22:44 +02:00
parent fbed28b1ae
commit fd8da319e3
9 changed files with 92 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.7.67 - Environment Configuration
# MiroTalk P2P v.1.7.68 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.7.67 - Configuration File
* MiroTalk P2P v.1.7.68 - Configuration File
* ==============================================
*
* This file is the central configuration source.
app/src/server.js
+1 -1
View File
@@ -45,7 +45,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.7.67
* @version 1.7.68
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.7.67",
"version": "1.7.68",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.7.67",
"version": "1.7.68",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.5.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.7.67",
"version": "1.7.68",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+66 -4
View File
@@ -138,15 +138,66 @@ body {
font-size: 60px;
font-family: 'Montserrat';
}
#loadingDiv img {
margin-top: 5px;
margin-bottom: 5px;
}
#loadingDiv pre {
padding: 5px;
font-family: 'Montserrat';
}
/* 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);
}
}
/*--------------------------------------------------------------
# Init User
--------------------------------------------------------------*/
@@ -167,6 +218,17 @@ body {
width: 100%;
}
.init-video-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
.init-video-container video {
z-index: 0;
position: relative;
public/js/brand.js
+1 -1
View File
@@ -107,7 +107,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.7.67',
title: 'WebRTC P2P v1.7.68',
html: `
<button
id="support-button"
public/js/client.js
+7 -2
View File
@@ -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.7.67
* @version 1.7.68
*
*/
@@ -2093,6 +2093,9 @@ async function changeInitCamera(deviceId) {
console.log('Detect Camera facing mode', camera);
// We going to update init video stream
initVideo.srcObject = camStream;
// Hide the CSS loader overlay once camera stream is attached
const initVideoLoader = getId('initVideoLoader');
if (initVideoLoader) initVideoLoader.style.display = 'none';
initStream = camStream;
const initVideoTrack = getVideoTrack(initStream);
if (initVideoTrack) {
@@ -8071,6 +8074,8 @@ async function startScreenSharing(constraints, init) {
elemDisplay(initVideo, true, 'block');
initVideo.classList.toggle('mirror');
initVideo.srcObject = newInitStream;
const initVideoLoader = getId('initVideoLoader');
if (initVideoLoader) initVideoLoader.style.display = 'none';
disable(initVideoSelect, true);
disable(initVideoBtn, true);
} else {
@@ -13764,7 +13769,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.67',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.68',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+12 -9
View File
@@ -85,9 +85,12 @@
<!-- show this before to join -->
<div id="loadingDiv" class="center pulsate">
<div id="loadingDiv" class="center">
<div class="loading-spinner">
<div class="spinner-ring"></div>
<img class="spinner-logo" src="../images/logo.svg" alt="logo" />
</div>
<h1>Loading</h1>
<img class="loading-img" src="../images/loading.gif" />
<pre>
Please allow the camera or microphone
access to use this app.
@@ -106,13 +109,13 @@ access to use this app.
<div id="initUser" class="init-user hidden">
<!-- <p>Please allow the camera & microphone access to use this app.</p> -->
<div id="initVideoContainer" class="init-video-container">
<video
id="initVideo"
playsinline="true"
autoplay=""
class="mirror"
poster="../images/loader.gif"
></video>
<div id="initVideoLoader" class="init-video-loader">
<div class="loading-spinner">
<div class="spinner-ring"></div>
<img class="spinner-logo" src="../images/logo.svg" alt="logo" />
</div>
</div>
<video id="initVideo" playsinline="true" autoplay="" class="mirror"></video>
</div>
<div class="initComands">
<button id="initVideoBtn" class="fas fa-video"></button>