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

[mirotalk] - improve participants list

Browse Source
This commit is contained in:
Miroslav Pejic
2025-12-01 14:08:48 +01:00
parent 508b26a9cc
commit ce21448e55
10 changed files with 99 additions and 21 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.6.64 - Environment Configuration
# MiroTalk P2P v.1.6.65 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.6.64 - Configuration File
* MiroTalk P2P v.1.6.65 - Configuration File
* ==============================================
*
* Branding and customizations require a license:
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.6.64
* @version 1.6.65
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.6.64",
"version": "1.6.65",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.6.64",
"version": "1.6.65",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.1.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.6.64",
"version": "1.6.65",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+41
View File
@@ -1112,6 +1112,7 @@ button {
}
#msgerCPList {
display: none;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 8px;
@@ -1180,6 +1181,46 @@ button {
color: #fff;
}
/*--------------------------------------------------------------
# Empty participants illustration
--------------------------------------------------------------*/
.empty-participants-notice {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
text-align: center;
padding: 2rem 1rem;
opacity: 0.85;
transition: opacity 0.2s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.empty-participants-img {
width: 50%;
max-width: 240px;
opacity: 0.8;
margin: 0 auto 0.5rem auto;
}
.empty-participants-title {
font-size: 1.3rem;
font-weight: 600;
color: #e0e0e0;
margin: 0.5rem 0 0.2rem 0;
}
.empty-participants-desc {
color: #b0b0b0;
max-width: 350px;
margin: 0 auto;
font-size: 1rem;
}
/*--------------------------------------------------------------
# Chat/room/user emoji picker
--------------------------------------------------------------*/
public/js/brand.js
+1 -1
View File
@@ -77,7 +77,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.6.64',
title: 'WebRTC P2P v1.6.65',
html: `
<button
id="support-button"
public/js/client.js
+21 -14
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.6.64
* @version 1.6.65
*
*/
@@ -226,6 +226,7 @@ const msgerMaxBtn = getId('msgerMaxBtn');
const msgerMinBtn = getId('msgerMinBtn');
const msgerChat = getId('msgerChat');
const msgerEmptyNotice = getId('msgerEmptyNotice');
const msgerEmptyParticipantsNotice = getId('msgerEmptyParticipantsNotice');
const msgerEmojiBtn = getId('msgerEmojiBtn');
const msgerMarkdownBtn = getId('msgerMarkdownBtn');
const msgerGPTBtn = getId('msgerGPTBtn');
@@ -5617,9 +5618,7 @@ function setChatRoomBtn() {
*/
function setParticipantsBtn() {
participantsBtn.addEventListener('click', async (e) => {
if (!thereArePeerConnections()) {
return toastMessage('info', 'No participants detected', '', 'top');
}
e.preventDefault();
if (isParticipantsVisible) {
hideChatRoomAndEmojiPicker();
elemDisplay(msgerCP, false);
@@ -8874,7 +8873,7 @@ function cleanMessages() {
// clean chatGPT context
chatGPTcontext = [];
// show empty messages
showMsgerEmptyNoticeIfNoMessages();
toggleMsgerEmptyNotice();
playSound('delete');
}
});
@@ -9226,17 +9225,27 @@ function appendMessage(from, img, side, msg, privateMsg, msgId = null, to = '')
}
}
chatMessagesId++;
showMsgerEmptyNoticeIfNoMessages();
toggleMsgerEmptyNotice();
}
/**
* Hide empty chat notice
* Toggle empty chat notice
*/
function showMsgerEmptyNoticeIfNoMessages() {
function toggleMsgerEmptyNotice() {
const messages = msgerChat.querySelectorAll('.msg');
messages.length === 0 ? msgerEmptyNotice.classList.remove('hidden') : msgerEmptyNotice.classList.add('hidden');
}
/**
* Toggle empty participants notice
*/
function toggleMsgerParticipantsEmptyNotice() {
const participants = msgerCPList.querySelectorAll('.msger-peer-inputarea');
const isEmpty = participants.length === 0;
msgerEmptyParticipantsNotice.classList.toggle('hidden', !isEmpty);
elemDisplay(msgerCPList, !isEmpty, 'block');
}
/**
* Process Messages
* @param {string} message
@@ -9349,7 +9358,7 @@ function deleteMessage(id) {
// clean this message
if (result.isConfirmed) {
getId(id).remove();
showMsgerEmptyNoticeIfNoMessages();
toggleMsgerEmptyNotice();
playSound('delete');
}
});
@@ -9504,6 +9513,7 @@ async function msgerAddPeers(peers) {
}
}
}
toggleMsgerParticipantsEmptyNotice();
}
/**
@@ -9536,10 +9546,7 @@ function msgerRemovePeer(peer_id) {
msgerPrivateDiv.remove();
// No peer connected
if (msgerCPList.children.length === 0 && isChatRoomVisible && isParticipantsVisible) {
elemDisplay(msgerCP, false);
hideChatRoomAndEmojiPicker();
isParticipantsVisible = false;
isChatRoomVisible = false;
toggleMsgerParticipantsEmptyNotice();
}
}
}
@@ -12655,7 +12662,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.64',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.65',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/svg/emptyParticipants.svg
+20
View File
@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
>
<!-- Circle representing a user head -->
<circle cx="32" cy="20" r="12" fill="#ccc" />
<!-- Body -->
<path
d="M16 52c0-8.837 7.163-16 16-16s16 7.163 16 16"
fill="#ccc"
/>
<!-- Optional: multiple empty participants, here 3 simplified silhouettes -->
<circle cx="12" cy="40" r="6" fill="#eee" />
<circle cx="52" cy="40" r="6" fill="#eee" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

public/views/client.html
+10
View File
@@ -293,6 +293,16 @@ access to use this app.
/>
</div>
<br />
<!-- EMPTY PARTICIPANTS ILLUSTRATION -->
<div id="msgerEmptyParticipantsNotice" class="empty-participants-notice">
<img
alt="Empty participants illustration"
class="empty-participants-img"
src="../svg/emptyParticipants.svg"
/>
<h5 class="empty-participants-title">Participants</h5>
<p class="empty-participants-desc">There are no participants here yet.</p>
</div>
<div id="msgerCPList"></div>
</main>
</section>