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

[mirotalk] - add participants button

Browse Source
This commit is contained in:
Miroslav Pejic
2025-11-26 17:59:34 +01:00
parent 8935ff031d
commit cd6f9d3c3a
10 changed files with 58 additions and 14 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.46 - Environment Configuration
# MiroTalk P2P v.1.6.47 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+2 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.6.46 - Configuration File
* MiroTalk P2P v.1.6.47 - Configuration File
* ==============================================
*
* Branding and customizations require a license:
@@ -138,6 +138,7 @@ module.exports = {
showScreenBtn: true, // autodetected
showRecordStreamBtn: true,
showChatRoomBtn: true,
showParticipantsBtn: true,
showCaptionRoomBtn: true,
showRoomEmojiPickerBtn: true,
showMyHandBtn: true,
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.46
* @version 1.6.47
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.6.46",
"version": "1.6.47",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.6.46",
"version": "1.6.47",
"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.46",
"version": "1.6.47",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+17 -5
View File
@@ -1270,16 +1270,28 @@ button {
width: 90%;
}
#bottomButtons {
gap: 0.3rem;
padding: 3px;
}
#bottomButtons button {
width: 36px;
font-size: 1rem;
width: 38px;
font-size: 0.95rem;
padding: 8px;
margin: 0 1px;
}
}
@media screen and (max-width: 350px) {
@media screen and (max-width: 360px) {
#bottomButtons {
gap: 0.15rem;
padding: 2px;
}
#bottomButtons button {
width: 30px;
font-size: 0.6rem;
width: 28px;
font-size: 0.65rem;
padding: 6px;
margin: 0 1px;
}
}
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.46',
title: 'WebRTC P2P v1.6.47',
html: `
<button
id="support-button"
public/js/buttons.js
+1
View File
@@ -16,6 +16,7 @@ let buttons = {
showScreenBtn: true, // autodetected
showRecordStreamBtn: true,
showChatRoomBtn: true,
showParticipantsBtn: true,
showCaptionRoomBtn: true,
showRoomEmojiPickerBtn: true,
showMyHandBtn: true,
public/js/client.js
+31 -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.6.46
* @version 1.6.47
*
*/
@@ -183,6 +183,7 @@ const shareRoomBtn = getId('shareRoomBtn');
const recordStreamBtn = getId('recordStreamBtn');
const fullScreenBtn = getId('fullScreenBtn');
const chatRoomBtn = getId('chatRoomBtn');
const participantsBtn = getId('participantsBtn');
const captionBtn = getId('captionBtn');
const roomEmojiPickerBtn = getId('roomEmojiPickerBtn');
const whiteboardBtn = getId('whiteboardBtn');
@@ -609,6 +610,7 @@ let showChatOnMessage = true;
let isChatPinned = false;
let isCaptionPinned = false;
let isChatRoomVisible = false;
let isParticipantsVisible = false;
let isCaptionBoxVisible = false;
let isChatEmojiVisible = false;
let isChatMarkdownOn = false;
@@ -863,6 +865,7 @@ function refreshMainButtonsToolTipPlacement() {
setTippy(screenShareBtn, 'Start screen sharing', bottomButtonsPlacement);
setTippy(myHandBtn, 'Raise your hand', bottomButtonsPlacement);
setTippy(chatRoomBtn, 'Open the chat', bottomButtonsPlacement);
setTippy(participantsBtn, 'Show participants', bottomButtonsPlacement);
setTippy(mySettingsBtn, 'Open the settings', bottomButtonsPlacement);
setTippy(leaveRoomBtn, 'Leave this room', bottomButtonsPlacement);
}
@@ -1425,6 +1428,7 @@ function handleButtonsRule() {
{ element: recordStreamBtn, display: buttons.main.showRecordStreamBtn },
{ element: recImage, display: buttons.main.showRecordStreamBtn },
{ element: chatRoomBtn, display: buttons.main.showChatRoomBtn },
{ element: participantsBtn, display: buttons.main.showParticipantsBtn },
{ element: captionBtn, display: buttons.main.showCaptionRoomBtn && speechRecognition }, // auto-detected
{ element: roomEmojiPickerBtn, display: buttons.main.showRoomEmojiPickerBtn },
{ element: myHandBtn, display: buttons.main.showMyHandBtn },
@@ -5181,6 +5185,7 @@ function manageButtons() {
setScreenShareBtn();
setFullScreenBtn();
setChatRoomBtn();
setParticipantsBtn();
setCaptionRoomBtn();
setRoomEmojiButton();
setChatEmojiBtn();
@@ -5571,6 +5576,27 @@ function setChatRoomBtn() {
if (isMobileDevice) msgerInput.style.fontSize = 'xx-small';
}
/**
* Participants room buttons click event
*/
function setParticipantsBtn() {
participantsBtn.addEventListener('click', async (e) => {
if (!thereArePeerConnections()) {
return userLog('info', 'No participants detected');
}
if (isParticipantsVisible) {
hideChatRoomAndEmojiPicker();
elemDisplay(msgerCP, false);
}
if (!isChatRoomVisible && !isParticipantsVisible) {
showChatRoomDraggable();
await sleep(500);
elemDisplay(msgerCP, true, 'flex');
}
isParticipantsVisible = !isParticipantsVisible;
});
}
/**
* Caption room buttons click event
*/
@@ -8473,6 +8499,9 @@ function setChatRoomAndCaptionForMobile() {
*/
function showChatRoomDraggable() {
playSound('newMessage');
// Hide Participants chat
elemDisplay(msgerCP, false);
if (isMobileDevice) {
elemDisplay(buttonsBar, false);
elemDisplay(bottomButtons, false);
@@ -12344,7 +12373,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.46',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.47',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+1
View File
@@ -156,6 +156,7 @@ access to use this app.
<button id="screenShareBtn" class="fas fa-desktop"></button>
<button id="myHandBtn" class="fas fa-hand-paper"></button>
<button id="chatRoomBtn" class="fas fa-comment"></button>
<button id="participantsBtn" class="fas fa-users"></button>
<button id="mySettingsBtn" class="fas fa-cogs"></button>
<button id="leaveRoomBtn" class="fa-solid fa-phone-slash"></button>
</div>