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

[mirotalk] - refactor: improve handlePeerVolume and handleMyVolume logic and UI, update dep

Browse Source
This commit is contained in:
Miroslav Pejic
2026-04-25 05:53:47 +02:00
parent a06221a97a
commit b5b55973b8
7 changed files with 37 additions and 22 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.11 - Environment Configuration
# MiroTalk P2P v.1.8.12 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.8.11 - Configuration File
* MiroTalk P2P v.1.8.12 - 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.11
* @version 1.8.12
*
*/
package-lock.json
Generated
+6 -6
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.8.11",
"version": "1.8.12",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.8.11",
"version": "1.8.12",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.6.0",
@@ -22,7 +22,7 @@
"dotenv": "^17.4.2",
"express": "^5.2.1",
"express-openid-connect": "^2.20.2",
"express-rate-limit": "^8.4.0",
"express-rate-limit": "^8.4.1",
"he": "^1.2.0",
"helmet": "^8.1.0",
"httpolyglot": "0.1.2",
@@ -3005,9 +3005,9 @@
}
},
"node_modules/express-rate-limit": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.4.0.tgz",
"integrity": "sha512-gDK8yiqKxrGta+3WtON59arrrw6GLmadA1qoFgYXzdcch8fmKDID2XqO8itsi3f1wufXYPT51387dN6cvVBS3Q==",
"version": "8.4.1",
"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.4.1.tgz",
"integrity": "sha512-NGVYwQSAyEQgzxX1iCM978PP9AdO/hW93gMcF6ZwQCm+rFvLsBH6w4xcXWTcliS8La5EPRN3p9wzItqBwJrfNw==",
"license": "MIT",
"dependencies": {
"ip-address": "10.1.0"
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.8.11",
"version": "1.8.12",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -57,7 +57,7 @@
"dotenv": "^17.4.2",
"express": "^5.2.1",
"express-openid-connect": "^2.20.2",
"express-rate-limit": "^8.4.0",
"express-rate-limit": "^8.4.1",
"he": "^1.2.0",
"helmet": "^8.1.0",
"httpolyglot": "0.1.2",
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.11',
title: 'WebRTC P2P v1.8.12',
html: `
<button
id="support-button"
public/js/client.js
+25 -10
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.11
* @version 1.8.12
*
*/
@@ -630,6 +630,8 @@ let myPrivacyBtn;
let myVideoPinBtn;
let myScreenPinBtn;
let myPitchBar;
let myVolumeTimer = null;
const peerVolumeTimers = {};
let myVideoPeerName;
let myScreenPeerName;
let myHandStatusIcon;
@@ -15268,7 +15270,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.11',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.12',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
@@ -15459,6 +15461,17 @@ function bytesToSize(bytes) {
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
/**
* Map volume level to a display color
* @param {number} volume 0-100
* @returns {string} hex color
*/
function getVolumeColor(volume) {
if (volume >= 80) return '#FF0000'; // Red
if (volume >= 50) return '#FFA500'; // Orange
return '#19bb5c'; // Green
}
/**
* Handle peer audio volume
* @param {object} data peer audio
@@ -15466,9 +15479,9 @@ function bytesToSize(bytes) {
function handlePeerVolume(data) {
const { peer_id, volume } = data;
let audioColorTmp = '#19bb5c';
if ([50, 60, 70].includes(volume)) audioColorTmp = '#FFA500'; // Orange
if ([80, 90, 100].includes(volume)) audioColorTmp = '#FF0000'; // Red
if (volume === 0) return;
const audioColorTmp = getVolumeColor(volume);
if (!isAudioPitchBar) {
const remotePeerAvatarImg = getId(peer_id + '_avatar');
@@ -15488,7 +15501,8 @@ function handlePeerVolume(data) {
remotePitchBar.style.backgroundColor = audioColorTmp;
remotePitchBar.style.height = volume + '%';
//remoteVideoWrap.classList.toggle('speaking');
setTimeout(function () {
clearTimeout(peerVolumeTimers[peer_id]);
peerVolumeTimers[peer_id] = setTimeout(function () {
remotePitchBar.style.backgroundColor = '#19bb5c';
remotePitchBar.style.height = '0%';
//remoteVideoWrap.classList.toggle('speaking');
@@ -15502,9 +15516,9 @@ function handlePeerVolume(data) {
function handleMyVolume(data) {
const { volume } = data;
let audioColorTmp = '#19bb5c';
if ([50, 60, 70].includes(volume)) audioColorTmp = '#FFA500'; // Orange
if ([80, 90, 100].includes(volume)) audioColorTmp = '#FF0000'; // Red
if (volume === 0) return;
const audioColorTmp = getVolumeColor(volume);
if (!isAudioPitchBar || !myPitchBar) {
const localPeerAvatarImg = getId('myVideoAvatarImage');
@@ -15519,7 +15533,8 @@ function handleMyVolume(data) {
myPitchBar.style.backgroundColor = audioColorTmp;
myPitchBar.style.height = volume + '%';
//myVideoWrap.classList.toggle('speaking');
setTimeout(function () {
clearTimeout(myVolumeTimer);
myVolumeTimer = setTimeout(function () {
myPitchBar.style.backgroundColor = '#19bb5c';
myPitchBar.style.height = '0%';
//myVideoWrap.classList.toggle('speaking');