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

[mirotalk] - imporve UI, move session time

Browse Source
This commit is contained in:
Miroslav Pejic
2025-11-02 22:15:38 +01:00
parent 314150fd8c
commit 520d95115e
7 changed files with 139 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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.19
* @version 1.6.20
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.6.19",
"version": "1.6.20",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.6.19",
"version": "1.6.20",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.0.4",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.6.19",
"version": "1.6.20",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/videoGrid.css
+119 -20
View File
@@ -34,20 +34,7 @@
/* border: 3px solid lime; */
}
.Camera {
position: relative;
vertical-align: middle;
align-self: center;
border-radius: 10px;
overflow: hidden;
display: inline-block;
background: var(--body-bg);
border: var(--elem-border-color);
box-shadow: var(--box-shadow);
border-radius: 10px;
animation: show 0.4s ease;
}
.Camera,
.Screen {
position: relative;
vertical-align: middle;
@@ -59,6 +46,8 @@
border: var(--elem-border-color);
box-shadow: var(--box-shadow);
border-radius: 10px;
container-type: inline-size;
container-name: camera;
animation: show 0.4s ease;
}
@@ -73,26 +62,136 @@
width: 100%;
background: var(--navbar-bg);
text-align: right;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding: 6px 12px 6px 6px;
gap: 4px;
row-gap: 4px;
box-sizing: border-box;
}
.navbar button {
display: inline;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: small;
font-size: 1.2rem;
text-decoration: none;
border: none;
border-radius: 10px;
background: transparent;
background: var(--body-bg);
color: #fff;
margin: 2px;
flex-shrink: 0;
box-sizing: border-box;
}
.navbar button:hover {
background: var(--btns-bg-color);
transform: scale(1.05);
cursor: pointer;
}
.navbar div {
display: inline;
}
.navbar button:hover {
color: var(--hover-color);
cursor: pointer;
/* Extra small containers (mobile portrait, small screens) */
@container camera (max-width: 250px) {
.navbar {
padding: 4px 10px 4px 4px;
gap: 3px;
row-gap: 3px;
}
.navbar button {
font-size: 0.7rem;
padding: 6px;
min-width: 28px;
min-height: 28px;
margin: 1px;
}
}
/* Small containers (mobile portrait) */
@container camera (min-width: 251px) and (max-width: 350px) {
.navbar {
padding: 5px 10px 5px 5px;
gap: 3px;
row-gap: 3px;
}
.navbar button {
font-size: 0.8rem;
padding: 7px;
min-width: 30px;
min-height: 30px;
margin: 1px;
}
}
/* Medium-small containers (mobile landscape, small tablets) */
@container camera (min-width: 351px) and (max-width: 500px) {
.navbar {
padding: 6px 11px 6px 6px;
gap: 4px;
row-gap: 4px;
}
.navbar button {
font-size: 0.9rem;
padding: 8px;
min-width: 32px;
min-height: 32px;
margin: 1.5px;
}
}
/* Medium containers (tablets portrait) */
@container camera (min-width: 501px) and (max-width: 700px) {
.navbar {
padding: 6px 12px 6px 6px;
gap: 4px;
row-gap: 4px;
}
.navbar button {
font-size: 1rem;
padding: 9px;
min-width: 34px;
min-height: 34px;
margin: 2px;
}
}
/* Large containers (tablets landscape, desktop) */
@container camera (min-width: 701px) and (max-width: 900px) {
.navbar {
padding: 7px 13px 7px 7px;
gap: 5px;
row-gap: 5px;
}
.navbar button {
font-size: 1.05rem;
padding: 9.5px;
min-width: 36px;
min-height: 36px;
margin: 2px;
}
}
/* Extra large containers (large desktop) */
@container camera (min-width: 901px) {
.navbar {
padding: 8px 14px 8px 8px;
gap: 6px;
row-gap: 6px;
}
.navbar button {
font-size: 1.1rem;
padding: 10px;
min-width: 38px;
min-height: 38px;
margin: 2px;
}
}
/*--------------------------------------------------------------
public/js/brand.js
+1 -1
View File
@@ -75,7 +75,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.6.19',
title: 'WebRTC P2P v1.6.20',
html: `
<button
id="support-button"
public/js/client.js
+4 -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.19
* @version 1.6.20
*
*/
@@ -311,6 +311,7 @@ const captionFooter = getId('captionFooter');
// My settings
const mySettings = getId('mySettings');
const mySettingsHeader = getId('mySettingsHeader');
const mySessionTime = getId('mySessionTime'); // conference session time
const tabVideoBtn = getId('tabVideoBtn');
const tabAudioBtn = getId('tabAudioBtn');
const tabVideoShareBtn = getId('tabVideoShareBtn');
@@ -515,7 +516,6 @@ let thisMaxRoomParticipants = 8;
// misc
let swBg = 'rgba(0, 0, 0, 0.7)'; // swAlert background color
let callElapsedTime; // count time
let mySessionTime; // conference session time
let isDocumentOnFullScreen = false;
let isToggleExtraBtnClicked = false;
@@ -708,7 +708,6 @@ function loadGeo() {
* Load all Html elements by Id
*/
function getHtmlElementsById() {
mySessionTime = getId('mySessionTime');
// My video elements
myVideo = getId('myVideo');
myScreen = getId('myScreen');
@@ -773,6 +772,7 @@ function setButtonsToolTip() {
setTippy(mySettingsCloseBtn, 'Close', 'bottom');
setTippy(myPeerNameSetBtn, 'Change name', 'top');
setTippy(myRoomId, 'Room name (click to copy/share)', 'right');
setTippy(mySessionTime, 'Session time', 'right');
setTippy(
switchNoiseSuppression,
'If Active, the audio will be processed to reduce background noise, making the voice clearer',
@@ -3390,7 +3390,6 @@ async function loadLocalMedia(stream, kind) {
// html elements
const myVideoNavBar = document.createElement('div');
const mySessionTime = document.createElement('button');
const myVideoPeerName = document.createElement('p');
const myHandStatusIcon = document.createElement('button');
const myVideoToImgBtn = document.createElement('button');
@@ -3408,11 +3407,6 @@ async function loadLocalMedia(stream, kind) {
const myPitchMeter = document.createElement('div');
const myPitchBar = document.createElement('div');
// session time
mySessionTime.setAttribute('id', 'mySessionTime');
mySessionTime.className = 'notranslate';
mySessionTime.style.cursor = 'default';
// my peer name
myVideoPeerName.setAttribute('id', 'myVideoPeerName');
myVideoPeerName.className = 'videoPeerName notranslate';
@@ -3468,7 +3462,6 @@ async function loadLocalMedia(stream, kind) {
// no mobile devices
if (!isMobileDevice) {
setTippy(mySessionTime, 'Session Time', 'bottom');
setTippy(myHandStatusIcon, 'My hand is raised', 'bottom');
setTippy(myPrivacyBtn, 'Toggle video privacy', 'bottom');
setTippy(myVideoStatusIcon, 'My video is on', 'bottom');
@@ -3497,9 +3490,6 @@ async function loadLocalMedia(stream, kind) {
// my video nav bar
myVideoNavBar.className = 'navbar fadein';
// attach to video nav bar
myVideoNavBar.appendChild(mySessionTime);
!isMobileDevice && myVideoNavBar.appendChild(myVideoPinBtn);
buttons.local.showVideoFocusBtn && myVideoNavBar.appendChild(myVideoFocusBtn);
@@ -12310,7 +12300,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.19',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.20',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+11
View File
@@ -431,6 +431,17 @@ access to use this app.
<td><input id="switchKeepButtonsVisible" class="toggle" type="checkbox" /></td>
</tr>
</table>
<br />
<table id="mySettingsTable">
<tr>
<td>
<div class="title">
<i class="fas fa-clock"></i>
</div>
<span id="mySessionTime">0s</span>
</td>
</tr>
</table>
</div>
<div id="tabVideo" class="tabcontent">