[mirotalk] - improve ui

This commit is contained in:
Miroslav Pejic
2025-01-28 11:11:28 +01:00
parent d4723ffa85
commit 59cf230682
5 changed files with 44 additions and 33 deletions
+1 -1
View File
@@ -39,7 +39,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.4.68
* @version 1.4.69
*
*/
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.4.68",
"version": "1.4.69",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
+28 -17
View File
@@ -1045,8 +1045,6 @@ button:hover {
.inline-check-box {
margin-bottom: 20px;
display: inline-flex;
justify-content: center; /* Vertical centering */
align-items: center; /* Horizontal centering */
text-align: left;
color: white;
}
@@ -1188,31 +1186,44 @@ button:hover {
--------------------------------------------------------------*/
#mySettingsTable {
/* margin-top: 5px; */
width: 100%;
color: #fff;
table-layout: auto;
border-collapse: collapse;
border-style: hidden;
border-radius: 10px;
background: var(--body-bg);
/* border-radius: 5px; */
/* box-shadow: 0 0 0 1px #666; */
}
#mySettingsTable td,
th {
padding: 10px;
}
#mySettingsTable tr td {
text-align: left;
}
#mySettingsTable tr:nth-child(even) {
/* background-color: #2b2b2b; */
}
.width-auto {
#mySettingsTable td,
#mySettingsTable th {
padding: 10px;
text-align: left;
}
#mySettingsTable td:first-child {
width: auto;
}
#mySettingsTable td:last-child {
width: 140px;
justify-content: center;
align-items: center;
}
/* Optional alternating row background */
/* #mySettingsTable tr:nth-child(even) {
background: var(--select-bg);
} */
#mySettingsTable i {
border: none;
border-radius: 5px;
}
#mySettingsTable select {
width: 100px !important;
}
/*--------------------------------------------------------------
# Shortcut Table
--------------------------------------------------------------*/
+2 -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.4.68
* @version 1.4.69
*
*/
@@ -11039,7 +11039,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: '<strong>WebRTC P2P v1.4.68</strong>',
title: '<strong>WebRTC P2P v1.4.69</strong>',
imageAlt: 'mirotalk-about',
imageUrl: images.about,
customClass: { image: 'img-about' },
+12 -12
View File
@@ -391,7 +391,7 @@ access to use this app.
<br />
<table id="mySettingsTable">
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fas fa-microphone-lines"></i>
<p>Volume bar</p>
@@ -400,7 +400,7 @@ access to use this app.
<td><input id="switchAudioPitchBar" class="toggle" type="checkbox" checked /></td>
</tr>
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fas fa-music"></i>
<p>Sounds</p>
@@ -409,7 +409,7 @@ access to use this app.
<td><input id="switchSounds" class="toggle" type="checkbox" checked /></td>
</tr>
<tr id="shareOnJoinButton">
<td class="width-auto">
<td>
<div class="title">
<i class="fas fa-share-alt"></i>
<p>Share</p>
@@ -418,7 +418,7 @@ access to use this app.
<td><input id="switchShare" class="toggle" type="checkbox" checked /></td>
</tr>
<tr id="keepButtonsVisibleButton">
<td class="width-auto">
<td>
<div class="title">
<i class="fas fa-eye"></i>
<p>Buttons</p>
@@ -674,7 +674,7 @@ access to use this app.
</div>
<table id="mySettingsTable">
<tr id="pushToTalkDiv">
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-hand-pointer"></i>
<p>Push to talk</p>
@@ -690,7 +690,7 @@ access to use this app.
<div id="recOptions">
<table class="settingsTable">
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-film"></i>
<p>Prioritize H.264</p>
@@ -743,7 +743,7 @@ access to use this app.
<div id="tabShortcuts" class="tabcontent">
<table class="mySettingsTable">
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-keyboard"></i>
<p>Keyboard shortcuts</p>
@@ -872,7 +872,7 @@ access to use this app.
<div id="tabNetwork" class="tabcontent">
<table id="mySettingsTable">
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-location-dot"></i>
<p>IP</p>
@@ -881,7 +881,7 @@ access to use this app.
<td><p id="networkIP"></p></td>
</tr>
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-house-signal"></i>
<p>Host</p>
@@ -890,7 +890,7 @@ access to use this app.
<td><p id="networkHost">🔴</p></td>
</tr>
<tr>
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-globe"></i>
<p>Stun</p>
@@ -899,7 +899,7 @@ access to use this app.
<td><p id="networkStun">🔴</p></td>
</tr>
<tr id="shareOnJoinButton">
<td class="width-auto">
<td>
<div class="title">
<i class="fa-solid fa-tower-cell"></i>
<p>Turn</p>
@@ -936,7 +936,7 @@ access to use this app.
<input id="themeColorPicker" class="theme-color-picker" type="text" />
<br />
<div class="inline-check-box">
<div class="width-auto">
<div>
<div class="title">
<i class="fas fa-save"></i>
<p>Keep custom</p>