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

[mirotalk] - feat: group settingsExtraToggle menu with category headers and hover slide effect

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-27 17:39:25 +01:00
parent 136cca13b8
commit e74791652d
9 changed files with 107 additions and 32 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.62 - Environment Configuration
# MiroTalk P2P v.1.7.63 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.7.62 - Configuration File
* MiroTalk P2P v.1.7.63 - 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.62
* @version 1.7.63
*
*/
package-lock.json
Generated
+14 -14
View File
@@ -1,15 +1,15 @@
{
"name": "mirotalk",
"version": "1.7.62",
"version": "1.7.63",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.7.62",
"version": "1.7.63",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.4.0",
"@mattermost/client": "11.5.0",
"@ngrok/ngrok": "1.7.0",
"@sentry/node": "^10.46.0",
"axios": "^1.13.6",
@@ -21,7 +21,7 @@
"dompurify": "^3.3.3",
"dotenv": "^17.3.1",
"express": "^5.2.1",
"express-openid-connect": "^2.19.4",
"express-openid-connect": "^2.20.1",
"express-rate-limit": "^8.3.1",
"he": "^1.2.0",
"helmet": "^8.1.0",
@@ -401,12 +401,12 @@
}
},
"node_modules/@mattermost/client": {
"version": "11.4.0",
"resolved": "https://registry.npmjs.org/@mattermost/client/-/client-11.4.0.tgz",
"integrity": "sha512-QzYIpxFRPA+NDCCxk9bPwnFRpgZq8d1KKYXic8AJJiPXjja6IJDOkpDfGgo4b1q0AofUQ+u7Js3Fh2mxerwz5g==",
"version": "11.5.0",
"resolved": "https://registry.npmjs.org/@mattermost/client/-/client-11.5.0.tgz",
"integrity": "sha512-/e1/TVisfiAwiBH9Um9Ur5fShemS09GKuNO9Nurxpvsrgo/anybqi/R7AT7ppUZ9j4K2b+acBj/gDuUGN6Gpmw==",
"license": "MIT",
"peerDependencies": {
"@mattermost/types": "11.4.0",
"@mattermost/types": "11.5.0",
"typescript": "^4.3.0 || ^5.0.0"
},
"peerDependenciesMeta": {
@@ -416,9 +416,9 @@
}
},
"node_modules/@mattermost/types": {
"version": "11.4.0",
"resolved": "https://registry.npmjs.org/@mattermost/types/-/types-11.4.0.tgz",
"integrity": "sha512-oYt7vvsa60hPpujcCBYeyd+22OwprEAtFXgVJrsdd9pR1qkEGU4F+uv8bh6ZTBSZAQnc2/xXQPZJGGR06toteA==",
"version": "11.5.0",
"resolved": "https://registry.npmjs.org/@mattermost/types/-/types-11.5.0.tgz",
"integrity": "sha512-8vAzjjIJV/NIyKMB5tVRDQF9Uc58t6jCvZ7kOPR+JYHuW/8CPKBJkWmx2hqvgQ8h0b+otPLUqksGKp3LevGF7A==",
"license": "MIT",
"peer": true,
"peerDependencies": {
@@ -2939,9 +2939,9 @@
}
},
"node_modules/express-openid-connect": {
"version": "2.19.4",
"resolved": "https://registry.npmjs.org/express-openid-connect/-/express-openid-connect-2.19.4.tgz",
"integrity": "sha512-3YFPZ4MgUPhwfHbCaJKEij7uTc0vF4KpGKsuc3D1IhNMooiP6w8p1HBaaDQOE2KaAas22UghxVECxPpcC/gfOA==",
"version": "2.20.1",
"resolved": "https://registry.npmjs.org/express-openid-connect/-/express-openid-connect-2.20.1.tgz",
"integrity": "sha512-Ka4qyKJgoC2fLJszQLpnoGFfmEPGCnq/uJgfhZxI+a8+3pvK8i+AKXIyavd29Z7V4lsK5JBs0Sjx/QSusMYNEw==",
"license": "MIT",
"dependencies": {
"base64url": "^3.0.1",
package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.7.62",
"version": "1.7.63",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -44,7 +44,7 @@
"license": "AGPL-3.0",
"homepage": "https://github.com/miroslavpejic85/mirotalk",
"dependencies": {
"@mattermost/client": "11.4.0",
"@mattermost/client": "11.5.0",
"@ngrok/ngrok": "1.7.0",
"@sentry/node": "^10.46.0",
"axios": "^1.13.6",
@@ -56,7 +56,7 @@
"dompurify": "^3.3.3",
"dotenv": "^17.3.1",
"express": "^5.2.1",
"express-openid-connect": "^2.19.4",
"express-openid-connect": "^2.20.1",
"express-rate-limit": "^8.3.1",
"he": "^1.2.0",
"helmet": "^8.1.0",
public/css/client.css
+21 -1
View File
@@ -353,11 +353,31 @@ body {
}
#bottomButtons #settingsExtraMenu {
min-width: 200px;
min-width: 220px;
max-width: calc(100vw - 24px);
text-align: left;
}
#bottomButtons #settingsExtraMenu .device-menu-header.extra-menu-group {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.4);
padding: 10px 16px 4px;
pointer-events: none;
user-select: none;
}
#bottomButtons #settingsExtraMenu button:hover {
transform: translateX(3px) !important;
}
#bottomButtons #settingsExtraMenu .extra-menu-divider.extra-menu-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 6px 12px;
}
/* Mobile: keep settingsExtraMenu inside viewport and scrollable */
@media (max-width: 600px) {
#bottomButtons #audioMenu,
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.62',
title: 'WebRTC P2P v1.7.63',
html: `
<button
id="support-button"
public/js/client.js
+27 -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.62
* @version 1.7.63
*
*/
@@ -6729,6 +6729,7 @@ function setMySettingsExtraBtns() {
let hideTimeout;
function showMenu() {
clearTimeout(hideTimeout);
updateSettingsExtraGroups();
settingsExtraMenu.classList.remove('hidden');
settingsExtraMenu.classList.add('show');
}
@@ -6774,6 +6775,30 @@ function setMySettingsExtraBtns() {
}
}
function updateSettingsExtraGroups() {
settingsExtraMenu.querySelectorAll('.extra-menu-group').forEach((header) => {
const ids = (header.dataset.buttons || '').split(',');
const anyVisible = ids.some((id) => {
const btn = document.getElementById(id.trim());
return btn && !btn.classList.contains('hidden') && btn.style.display !== 'none';
});
header.style.display = anyVisible ? '' : 'none';
});
settingsExtraMenu.querySelectorAll('.extra-menu-divider').forEach((div) => {
let prev = div.previousElementSibling;
while (prev && !prev.classList.contains('extra-menu-group')) {
prev = prev.previousElementSibling;
}
let next = div.nextElementSibling;
while (next && !next.classList.contains('extra-menu-group')) {
next = next.nextElementSibling;
}
const prevVisible = prev && prev.style.display !== 'none';
const nextVisible = next && next.style.display !== 'none';
div.style.display = prevVisible && nextVisible ? '' : 'none';
});
}
/**
* About button click event
*/
@@ -13738,7 +13763,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.62',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.63',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+38 -8
View File
@@ -192,17 +192,47 @@ access to use this app.
class="dropdown-menu text-start hidden"
aria-labelledby="settingsExtraToggle"
>
<!-- https://fontawesome.com/icons?d=gallery -->
<!-- SHARING -->
<div class="device-menu-header extra-menu-group" data-buttons="shareRoomBtn,fileShareBtn">
SHARING
</div>
<button id="shareRoomBtn"><i class="fas fa-share-alt"></i> Share Room</button>
<button id="hideMeBtn"><i class="fas fa-user"></i> Hide Me</button>
<button id="recordStreamBtn"><i class="fas fa-record-vinyl"></i> Recording</button>
<button id="fullScreenBtn"><i class="fas fa-expand-alt"></i> Full screen</button>
<button id="roomEmojiPickerBtn"><i class="fas fa-face-smile"></i> Room Emoji</button>
<button id="captionBtn"><i class="fas fa-closed-captioning"></i> Caption</button>
<button id="whiteboardBtn"><i class="fas fa-chalkboard-teacher"></i> Whiteboard</button>
<button id="fileShareBtn"><i class="fas fa-folder-open"></i> File sharing</button>
<div class="device-menu-divider extra-menu-divider" data-group="sharing"></div>
<!-- RECORDING & CAPTURE -->
<div class="device-menu-header extra-menu-group" data-buttons="recordStreamBtn,snapshotRoomBtn">
RECORDING & CAPTURE
</div>
<button id="recordStreamBtn"><i class="fas fa-record-vinyl"></i> Start Recording</button>
<button id="snapshotRoomBtn"><i class="fas fa-camera-retro"></i> Snapshot</button>
<button id="fileShareBtn"><i class="fas fa-folder-open"></i> File Share</button>
<div class="device-menu-divider extra-menu-divider" data-group="recording"></div>
<!-- TOOLS -->
<div
class="device-menu-header extra-menu-group"
data-buttons="captionBtn,whiteboardBtn,documentPiPBtn,roomEmojiPickerBtn"
>
TOOLS
</div>
<button id="captionBtn"><i class="fas fa-closed-captioning"></i> Transcription</button>
<button id="whiteboardBtn"><i class="fas fa-chalkboard-teacher"></i> Whiteboard</button>
<button id="documentPiPBtn"><i class="fas fa-images"></i> Document PiP</button>
<button id="roomEmojiPickerBtn"><i class="fas fa-face-smile"></i> Room Emoji</button>
<div class="device-menu-divider extra-menu-divider" data-group="tools"></div>
<!-- VIEW & SETTINGS -->
<div
class="device-menu-header extra-menu-group"
data-buttons="hideMeBtn,fullScreenBtn,aboutBtn"
>
VIEW & SETTINGS
</div>
<button id="hideMeBtn"><i class="fas fa-user"></i> Hide Me</button>
<button id="fullScreenBtn"><i class="fas fa-expand-alt"></i> Full Screen</button>
<button id="aboutBtn"><i class="fas fa-question"></i> About</button>
</div>
</div>