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

[mirotalk] - feat: improve extra info UI with styled cards

Browse Source
This commit is contained in:
Miroslav Pejic
2026-04-28 11:08:58 +02:00
parent 573982343a
commit 2c63316e59
9 changed files with 118 additions and 18 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.8.15 - Environment Configuration
# MiroTalk P2P v.1.8.16 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.8.15 - Configuration File
* MiroTalk P2P v.1.8.16 - 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.8.15
* @version 1.8.16
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.8.15",
"version": "1.8.16",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.8.15",
"version": "1.8.16",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.6.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.8.15",
"version": "1.8.16",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+72 -5
View File
@@ -3109,15 +3109,82 @@ button {
.extra-info-container {
margin-top: 15px;
border-radius: 8px;
background: var(--body-bg);
background: transparent;
}
#extraInfo {
padding: 10px;
font-size: 14px;
color: #fff;
/* background: var(--select-bg); */
width: 100%;
box-sizing: border-box;
}
.extra-info-grid {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
.extra-info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: 10px;
border: var(--border);
background: var(--select-bg);
font-size: 0.82rem;
}
.extra-info-label {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
min-width: 70px;
}
.extra-info-label i {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 0.85rem;
line-height: 1;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.4);
}
.extra-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
line-height: 1;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.4);
}
.extra-info-values {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: flex-end;
}
.extra-info-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 20px;
background: transparent;
border: var(--border);
color: rgba(255, 255, 255, 0.85);
font-size: 0.78rem;
letter-spacing: 0.01em;
white-space: nowrap;
}
/*--------------------------------------------------------------
public/js/brand.js
+1 -1
View File
@@ -109,7 +109,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.8.15',
title: 'WebRTC P2P v1.8.16',
html: `
<button
id="support-button"
public/js/client.js
+38 -5
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.8.15
* @version 1.8.16
*
*/
@@ -107,6 +107,12 @@ const icons = {
codecs: '<i class="fa-solid fa-film"></i>',
theme: '<i class="fas fa-fill-drip"></i>',
close: '<i class="fas fa-times"></i>',
infoBrowser: '<i class="fa-solid fa-globe"></i>',
infoCpu: '<i class="fa-solid fa-microchip"></i>',
infoDevice: '<i class="fa-solid fa-laptop"></i>',
infoEngine: '<i class="fa-solid fa-gear"></i>',
infoOs: '<i class="fa-solid fa-layer-group"></i>',
infoDefault: '<i class="fa-solid fa-circle-info"></i>',
};
// Whiteboard and fileSharing
@@ -1007,10 +1013,37 @@ function getInfo() {
os: filterUnknown(parserResult.os),
};
// Convert the filtered result to a readable JSON string
const resultString = JSON.stringify(filteredResult, null, 2);
const sectionMeta = {
browser: { iconMarkup: icons.infoBrowser, label: 'Browser' },
cpu: { iconMarkup: icons.infoCpu, label: 'CPU info' },
device: { iconMarkup: icons.infoDevice, label: 'Device' },
engine: { iconMarkup: icons.infoEngine, label: 'Engine' },
os: { iconMarkup: icons.infoOs, label: 'OS info' },
};
extraInfo.innerText = resultString;
const rows = Object.entries(filteredResult)
.filter(([, data]) => Object.keys(data).length > 0)
.map(([section, data]) => {
const { iconMarkup, label } = sectionMeta[section] || {
iconMarkup: icons.infoDefault,
label: section,
};
const badges = Object.entries(data)
.filter(([key]) => key !== 'major')
.map(([, val]) => `<span class="extra-info-badge">${val}</span>`)
.join('');
return `
<div class="extra-info-row extra-info-row--${section}">
<div class="extra-info-label">
${iconMarkup}
<span>${label}</span>
</div>
<div class="extra-info-values">${badges}</div>
</div>`;
})
.join('');
extraInfo.innerHTML = `<div class="extra-info-grid">${rows}</div>`;
return parserResult;
} catch (error) {
@@ -15499,7 +15532,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.15',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.16',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+1 -1
View File
@@ -1079,7 +1079,7 @@ access to use this app.
<p>Extra info:</p>
</div>
<div class="extra-info-container">
<pre id="extraInfo"></pre>
<div id="extraInfo"></div>
</div>
</div>