Skip to content

Commit 409b246

Browse files
miroslavpejic85miroslavpejic85
committed
[mirotalk] - feat: add animated disconnect banner for lost signaling connection
1 parent b333fdb commit 409b246

8 files changed

Lines changed: 188 additions & 7 deletions

File tree

‎.env.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# ====================================================
2-
# MiroTalk P2P v.1.8.17 - Environment Configuration
2+
# MiroTalk P2P v.1.8.18 - Environment Configuration
33
# ====================================================
44

55
# App environment

‎app/src/config.template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* ==============================================
5-
* MiroTalk P2P v.1.8.17 - Configuration File
5+
* MiroTalk P2P v.1.8.18 - Configuration File
66
* ==============================================
77
*
88
* This file is the central configuration source.

‎app/src/server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ dependencies: {
4545
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
4646
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
4747
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
48-
* @version 1.8.17
48+
* @version 1.8.18
4949
*
5050
*/
5151

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mirotalk",
3-
"version": "1.8.17",
3+
"version": "1.8.18",
44
"description": "A free WebRTC browser-based video call",
55
"main": "server.js",
66
"scripts": {

‎public/css/client.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,132 @@ body {
9191
/* background: url('../images/bg.svg'); */
9292
}
9393

94+
/*--------------------------------------------------------------
95+
# Disconnect banner
96+
--------------------------------------------------------------*/
97+
98+
.disconnect-banner {
99+
position: fixed;
100+
top: 18px;
101+
left: 50%;
102+
transform: translateX(-50%) translateY(calc(-100% - 30px));
103+
z-index: 99999;
104+
opacity: 0;
105+
pointer-events: none;
106+
transition:
107+
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
108+
opacity 0.35s ease;
109+
will-change: transform, opacity;
110+
}
111+
112+
.disconnect-banner.visible {
113+
transform: translateX(-50%) translateY(0);
114+
opacity: 1;
115+
pointer-events: auto;
116+
}
117+
118+
.disconnect-banner-inner {
119+
display: flex;
120+
align-items: center;
121+
gap: 14px;
122+
padding: 11px 22px 11px 16px;
123+
background: linear-gradient(135deg, rgba(28, 28, 32, 0.82), rgba(18, 18, 20, 0.9));
124+
backdrop-filter: blur(18px) saturate(160%);
125+
-webkit-backdrop-filter: blur(18px) saturate(160%);
126+
border: 1px solid rgba(255, 80, 80, 0.4);
127+
border-radius: 50px;
128+
box-shadow:
129+
0 4px 24px rgba(0, 0, 0, 0.55),
130+
0 0 0 1px rgba(255, 80, 80, 0.12) inset,
131+
0 0 28px rgba(220, 50, 50, 0.18);
132+
color: #fff;
133+
white-space: nowrap;
134+
transition:
135+
border-color 0.4s ease,
136+
box-shadow 0.4s ease;
137+
}
138+
139+
.disconnect-banner.reconnected .disconnect-banner-inner {
140+
border-color: rgba(52, 211, 100, 0.45);
141+
box-shadow:
142+
0 4px 24px rgba(0, 0, 0, 0.55),
143+
0 0 0 1px rgba(52, 211, 100, 0.12) inset,
144+
0 0 28px rgba(30, 180, 80, 0.22);
145+
}
146+
147+
.disconnect-banner-icon-wrap {
148+
display: flex;
149+
align-items: center;
150+
justify-content: center;
151+
width: 34px;
152+
height: 34px;
153+
border-radius: 50%;
154+
background: rgba(220, 50, 50, 0.22);
155+
border: 1px solid rgba(255, 80, 80, 0.3);
156+
font-size: 15px;
157+
color: #ff6b6b;
158+
flex-shrink: 0;
159+
transition:
160+
background 0.4s ease,
161+
border-color 0.4s ease,
162+
color 0.4s ease;
163+
animation: bannerIconPulse 1.8s ease-in-out infinite;
164+
}
165+
166+
.disconnect-banner.reconnected .disconnect-banner-icon-wrap {
167+
background: rgba(30, 180, 80, 0.22);
168+
border-color: rgba(52, 211, 100, 0.35);
169+
color: #4ade80;
170+
animation: none;
171+
}
172+
173+
.disconnect-banner-text {
174+
display: flex;
175+
flex-direction: column;
176+
gap: 2px;
177+
line-height: 1.3;
178+
}
179+
180+
#disconnectBannerTitle {
181+
font-size: 13px;
182+
font-weight: 700;
183+
letter-spacing: 0.02em;
184+
color: #ff6b6b;
185+
transition: color 0.4s ease;
186+
}
187+
188+
.disconnect-banner.reconnected #disconnectBannerTitle {
189+
color: #4ade80;
190+
}
191+
192+
#disconnectBannerMsg {
193+
font-size: 11.5px;
194+
font-weight: 500;
195+
color: rgba(220, 220, 230, 0.75);
196+
letter-spacing: 0.01em;
197+
}
198+
199+
.disconnect-banner-spinner {
200+
font-size: 15px;
201+
color: rgba(255, 255, 255, 0.45);
202+
flex-shrink: 0;
203+
transition: opacity 0.3s ease;
204+
}
205+
206+
.disconnect-banner.reconnected .disconnect-banner-spinner {
207+
opacity: 0;
208+
}
209+
210+
@keyframes bannerIconPulse {
211+
0%,
212+
100% {
213+
box-shadow: 0 0 0 0 rgba(220, 50, 50, 0.35);
214+
}
215+
50% {
216+
box-shadow: 0 0 0 6px rgba(220, 50, 50, 0);
217+
}
218+
}
219+
94220
/*--------------------------------------------------------------
95221
# Google Translate
96222
--------------------------------------------------------------*/

‎public/js/brand.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ let brand = {
109109
},
110110
about: {
111111
imageUrl: '../images/mirotalk-logo.gif',
112-
title: 'WebRTC P2P v1.8.17',
112+
title: 'WebRTC P2P v1.8.18',
113113
html: `
114114
<button
115115
id="support-button"

‎public/js/client.js‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
1616
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
1717
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
18-
* @version 1.8.17
18+
* @version 1.8.18
1919
*
2020
*/
2121

@@ -504,6 +504,13 @@ const speechRecognitionStop = getId('speechRecognitionStop');
504504
// Media
505505
const sinkId = 'sinkId' in HTMLMediaElement.prototype;
506506

507+
// Disconnect banner
508+
const banner = getId('disconnectBanner');
509+
const icon = getId('disconnectBannerIcon');
510+
const title = getId('disconnectBannerTitle');
511+
const msg = getId('disconnectBannerMsg');
512+
const spinner = getId('disconnectBannerSpinner');
513+
507514
//....
508515

509516
const isRulesActive = true; // Presenter can do anything, guest is slightly moderate, if false no Rules for the room.
@@ -1483,6 +1490,7 @@ async function sendToDataChannel(config) {
14831490
async function handleConnect() {
14841491
console.log('03. Connected to signaling server');
14851492

1493+
hideDisconnectBanner();
14861494
myPeerId = signalingSocket.id;
14871495
console.log('04. My peer id [ ' + myPeerId + ' ]');
14881496

@@ -3148,6 +3156,7 @@ function handleIceCandidate(config) {
31483156
function handleDisconnect(reason) {
31493157
console.log('Disconnected from signaling server', { reason: reason });
31503158

3159+
showDisconnectBanner();
31513160
checkRecording();
31523161

31533162
for (const peer_id in peerConnections) {
@@ -15532,7 +15541,7 @@ function showAbout() {
1553215541
Swal.fire({
1553315542
background: swBg,
1553415543
position: 'center',
15535-
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.17',
15544+
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.18',
1553615545
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
1553715546
customClass: { image: 'img-about' },
1553815547
html: `
@@ -15818,6 +15827,35 @@ function applyBoxShadowEffect(element, color, delay = 200) {
1581815827
}
1581915828
}
1582015829

15830+
/**
15831+
* Show a persistent banner indicating the signaling server connection was lost.
15832+
*/
15833+
function showDisconnectBanner() {
15834+
if (!banner) return;
15835+
banner.classList.remove('reconnected');
15836+
icon.className = 'fa-solid fa-wifi-exclamation';
15837+
title.textContent = 'Connection lost';
15838+
msg.innerHTML = 'Reconnecting to signaling server\u2026';
15839+
spinner.style.opacity = '1';
15840+
// Trigger transition
15841+
requestAnimationFrame(() => banner.classList.add('visible'));
15842+
}
15843+
15844+
/**
15845+
* Hide the disconnect banner (or briefly show a reconnected confirmation).
15846+
*/
15847+
function hideDisconnectBanner() {
15848+
if (!banner || !banner.classList.contains('visible')) return;
15849+
banner.classList.add('reconnected');
15850+
icon.className = 'fa-solid fa-circle-check';
15851+
title.textContent = 'Back online';
15852+
msg.textContent = 'Connection restored successfully';
15853+
setTimeout(() => {
15854+
banner.classList.remove('visible');
15855+
setTimeout(() => banner.classList.remove('reconnected'), 420);
15856+
}, 2800);
15857+
}
15858+
1582115859
/**
1582215860
* Basic user logging using https://sweetalert2.github.io & https://animate.style/
1582315861
* @param {string} type of popup

‎public/views/client.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,23 @@
7373
<body>
7474
<noscript>You need to enable JavaScript to run this app.</noscript>
7575

76+
<!-- Disconnect banner -->
77+
78+
<div id="disconnectBanner" class="disconnect-banner" role="status" aria-live="assertive" aria-atomic="true">
79+
<div class="disconnect-banner-inner">
80+
<span class="disconnect-banner-icon-wrap">
81+
<i id="disconnectBannerIcon" class="fa-solid fa-wifi-exclamation"></i>
82+
</span>
83+
<div class="disconnect-banner-text">
84+
<span id="disconnectBannerTitle">Connection lost</span>
85+
<span id="disconnectBannerMsg">Reconnecting to signaling server&hellip;</span>
86+
</div>
87+
<span class="disconnect-banner-spinner" id="disconnectBannerSpinner">
88+
<i class="fa-solid fa-circle-notch fa-spin"></i>
89+
</span>
90+
</div>
91+
</div>
92+
7693
<!-- just 4SEO Optimization -->
7794

7895
<div id="webRTCSeo">

0 commit comments

Comments
 (0)