ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - improve UI

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2025-01-27 20:20:39 +01:00
الأصل 2396f8aaa4
التزام 2e65ea557a
4 ملفات معدلة مع 77 إضافات و74 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
package.json
عرض الملف

@@ -1,6 +1,6 @@
{ {
"name": "mirotalksfu", "name": "mirotalksfu",
"version": "1.7.14", "version": "1.7.15",
"description": "WebRTC SFU browser-based video calls", "description": "WebRTC SFU browser-based video calls",
"main": "Server.js", "main": "Server.js",
"scripts": { "scripts": {

48
public/css/Room.css
عرض الملف

@@ -418,9 +418,8 @@ body {
} }
#applyAudioOptionsButton { #applyAudioOptionsButton {
width: 180px; width: 100%;
padding: 10px; padding: 10px;
margin-left: 10px;
font-size: 1rem; font-size: 1rem;
background: var(--body-bg); background: var(--body-bg);
border: var(--border); border: var(--border);
@@ -438,30 +437,39 @@ body {
.settingsTable { .settingsTable {
width: 100%; width: 100%;
color: #fff; color: #fff;
table-layout: fixed; table-layout: auto;
border-collapse: collapse; border-collapse: collapse;
border-radius: 10px; border-radius: 10px;
border-style: hidden;
background: var(--body-bg); background: var(--body-bg);
} }
.settingsTable td,
th { .settingsTable td, .settingsTable th {
text-align: left;
padding: 10px; padding: 10px;
/* border: 1px solid grey; */ text-align: left;
} }
.settingsTable td:first-child {
width: auto;
}
.settingsTable td:last-child {
width: 140px;
justify-content: center;
align-items: center;
}
/* Optional alternating row background */
/* .settingsTable tr:nth-child(even) { /* .settingsTable tr:nth-child(even) {
background: var(--select-bg); background: var(--select-bg);
} */ } */
.settingsTable i { .settingsTable i {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
} }
.custom-width {
width: auto; .settingsTable select {
} width: 100px !important;
.microphone-table-width {
width: 180px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@@ -606,7 +614,7 @@ th {
} }
.dropdown-menu button { .dropdown-menu button {
width: 240px; min-width: 240px;
padding: 8px 16px; padding: 8px 16px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -665,7 +673,7 @@ th {
width: 65%; width: 65%;
background-color: var(--body-bg); background-color: var(--body-bg);
min-height: 480px; min-height: 480px;
max-height: 768px; max-height: 750px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@@ -1496,16 +1504,6 @@ hr {
background: #ffffff !important; background: #ffffff !important;
} }
.wa {
width: 260px;
}
@media screen and (max-width: 500px) {
.wa {
width: 220px;
}
}
.ml-5 { .ml-5 {
margin: 5px; margin: 5px;
} }

1
public/js/Room.js
عرض الملف

@@ -1725,6 +1725,7 @@ function handleButtons() {
showFreeAvatars = e.currentTarget.checked; showFreeAvatars = e.currentTarget.checked;
rc.getAvatarList(); rc.getAvatarList();
}; };
avatarQuality.selectedIndex = 1;
avatarQuality.onchange = (e) => { avatarQuality.onchange = (e) => {
VideoAI.quality = e.target.value; VideoAI.quality = e.target.value;
}; };

100
public/views/Room.html
عرض الملف

@@ -289,7 +289,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr id="broadcastingButton" class="hidden"> <tr id="broadcastingButton" class="hidden">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-wifi"></i> <i class="fa-solid fa-wifi"></i>
<p>Broadcast</p> <p>Broadcast</p>
@@ -302,7 +302,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="lobbyButton" class="hidden"> <tr id="lobbyButton" class="hidden">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-shield-halved"></i> <i class="fas fa-shield-halved"></i>
<p>Lobby</p> <p>Lobby</p>
@@ -315,7 +315,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="pitchBarButton"> <tr id="pitchBarButton">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-microphone-lines"></i> <i class="fas fa-microphone-lines"></i>
<p>Volume bar</p> <p>Volume bar</p>
@@ -328,7 +328,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="soundsButton"> <tr id="soundsButton">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-music"></i> <i class="fas fa-music"></i>
<p>Sounds</p> <p>Sounds</p>
@@ -341,7 +341,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="shareOnJoinButton"> <tr id="shareOnJoinButton">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-share-alt"></i> <i class="fas fa-share-alt"></i>
<p>Share</p> <p>Share</p>
@@ -354,7 +354,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="keepButtonsVisibleButton"> <tr id="keepButtonsVisibleButton">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
<p>Buttons</p> <p>Buttons</p>
@@ -376,6 +376,7 @@ access to use this app.
<p id="roomId" class="cp">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p> <p id="roomId" class="cp">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
</div> </div>
</td> </td>
<td></td>
</tr> </tr>
<tr> <tr>
<td> <td>
@@ -384,6 +385,7 @@ access to use this app.
<p id="sessionTime">00:00:00</p> <p id="sessionTime">00:00:00</p>
</div> </div>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
</div> </div>
@@ -501,9 +503,9 @@ access to use this app.
<!-- onclick="event.stopPropagation()" --> <!-- onclick="event.stopPropagation()" -->
<table class="settingsTable"> <table class="settingsTable">
<tr id="autoGainControlButton"> <tr id="autoGainControlButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-ear-listen"></i> --> <i class="fas fa-ear-listen"></i>
<p>Auto gain control</p> <p>Auto gain control</p>
</div> </div>
</td> </td>
@@ -518,9 +520,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="echoCancellationButton"> <tr id="echoCancellationButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-ear-listen"></i> --> <i class="fas fa-ear-listen"></i>
<p>Echo cancellation</p> <p>Echo cancellation</p>
</div> </div>
</td> </td>
@@ -536,9 +538,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="noiseSuppressionButton"> <tr id="noiseSuppressionButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-ear-listen"></i> --> <i class="fas fa-ear-listen"></i>
<p>Noise suppression</p> <p>Noise suppression</p>
</div> </div>
</td> </td>
@@ -554,9 +556,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="sampleRateButton"> <tr id="sampleRateButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-microphone-lines"></i> --> <i class="fas fa-microphone-lines"></i>
<p>Sample rate</p> <p>Sample rate</p>
</div> </div>
</td> </td>
@@ -571,9 +573,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="sampleSizeButton"> <tr id="sampleSizeButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-microphone-lines"></i> --> <i class="fas fa-microphone-lines"></i>
<p>Sample size</p> <p>Sample size</p>
</div> </div>
</td> </td>
@@ -588,9 +590,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="channelCountButton"> <tr id="channelCountButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-microphone-lines"></i> --> <i class="fas fa-microphone-lines"></i>
<p>Channel count</p> <p>Channel count</p>
</div> </div>
</td> </td>
@@ -605,9 +607,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="micLatencyButton"> <tr id="micLatencyButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fab fa-audible"></i> --> <i class="fab fa-audible"></i>
<p>Latency</p> <p>Latency</p>
</div> </div>
</td> </td>
@@ -628,9 +630,9 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="micVolumeButton"> <tr id="micVolumeButton">
<td class="microphone-table-width"> <td>
<div class="title"> <div class="title">
<!-- <i class="fas fa-volume-high"></i> --> <i class="fas fa-volume-high"></i>
<p>Volume</p> <p>Volume</p>
</div> </div>
</td> </td>
@@ -650,8 +652,13 @@ access to use this app.
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<td>
<button id="applyAudioOptionsButton" class="fas fa-check"><p>Apply options</p></button>
</td>
<td></td>
</tr>
</table> </table>
<button id="applyAudioOptionsButton" class="fas fa-check"><p>Apply options</p></button>
</div> </div>
</div> </div>
<div id="speakerSelectDiv"> <div id="speakerSelectDiv">
@@ -671,7 +678,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr> <tr>
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-hand-pointer"></i> <i class="fa-solid fa-hand-pointer"></i>
<p>Push to talk</p> <p>Push to talk</p>
@@ -694,7 +701,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr id="everyonePrivacyBtn"> <tr id="everyonePrivacyBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-circle-user"></i> <i class="fas fa-circle-user"></i>
<p>Start in Privacy Mode</p> <p>Start in Privacy Mode</p>
@@ -712,7 +719,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneMuteBtn"> <tr id="everyoneMuteBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-microphone-slash"></i> <i class="fas fa-microphone-slash"></i>
<p>Join Muted</p> <p>Join Muted</p>
@@ -725,7 +732,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneHideBtn"> <tr id="everyoneHideBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-video-slash"></i> <i class="fas fa-video-slash"></i>
<p>Join Hidden</p> <p>Join Hidden</p>
@@ -743,12 +750,11 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <td></td>
<hr /> <td></td>
</td>
</tr> </tr>
<tr id="everyoneCantUnmuteBtn"> <tr id="everyoneCantUnmuteBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-microphone red"></i> <i class="fas fa-microphone red"></i>
<p>Restrict Self-Unmute</p> <p>Restrict Self-Unmute</p>
@@ -766,7 +772,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneCantUnhideBtn"> <tr id="everyoneCantUnhideBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-video red"></i> <i class="fas fa-video red"></i>
<p>Restrict Self-Unhide</p> <p>Restrict Self-Unhide</p>
@@ -784,7 +790,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneCantShareScreenBtn"> <tr id="everyoneCantShareScreenBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-display red"></i> <i class="fas fa-display red"></i>
<p>Disable Screen Sharing</p> <p>Disable Screen Sharing</p>
@@ -802,7 +808,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneCantChatPrivatelyBtn"> <tr id="everyoneCantChatPrivatelyBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-comments red"></i> <i class="fa-solid fa-comments red"></i>
<p>Disable Private Chat</p> <p>Disable Private Chat</p>
@@ -820,7 +826,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneCantChatGPTBtn"> <tr id="everyoneCantChatGPTBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-robot red"></i> <i class="fa-solid fa-robot red"></i>
<p>Disable ChatGPT Access</p> <p>Disable ChatGPT Access</p>
@@ -838,7 +844,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="everyoneCantChatGPTBtn"> <tr id="everyoneCantChatGPTBtn">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fab fa-youtube red"></i> <i class="fab fa-youtube red"></i>
<p>Disable Media Sharing</p> <p>Disable Media Sharing</p>
@@ -856,7 +862,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="disconnectAllOnLeave"> <tr id="disconnectAllOnLeave">
<td class="wa"> <td>
<div class="title"> <div class="title">
<i class="fas fa-users-slash red"></i> <i class="fas fa-users-slash red"></i>
<p>Disconnect all on Exit</p> <p>Disconnect all on Exit</p>
@@ -881,7 +887,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr> <tr>
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-film"></i> <i class="fa-solid fa-film"></i>
<p>Prioritize H.264</p> <p>Prioritize H.264</p>
@@ -894,7 +900,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="roomHostOnlyRecording" class="hidden"> <tr id="roomHostOnlyRecording" class="hidden">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-user-shield"></i> <i class="fa-solid fa-user-shield"></i>
<p>Only host</p> <p>Only host</p>
@@ -911,7 +917,7 @@ access to use this app.
</td> </td>
</tr> </tr>
<tr id="roomRecordingServer" class="hidden"> <tr id="roomRecordingServer" class="hidden">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fas fa-cloud-arrow-up"></i> <i class="fas fa-cloud-arrow-up"></i>
<p>Server</p> <p>Server</p>
@@ -941,7 +947,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr> <tr>
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-circle pulsate cr"></i> <i class="fa-solid fa-circle pulsate cr"></i>
<p>REC time:</p> <p>REC time:</p>
@@ -967,7 +973,7 @@ access to use this app.
<hr /> <hr />
<table class="settingsTable"> <table class="settingsTable">
<tr id="avatars"> <tr id="avatars">
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-users-line"></i> <i class="fa-solid fa-users-line"></i>
<p>Show free avatars</p> <p>Show free avatars</p>
@@ -1090,10 +1096,8 @@ access to use this app.
</div> </div>
<div id="tabProfile" class="tabcontent"> <div id="tabProfile" class="tabcontent">
<div> <img id="myProfileAvatar" />
<img id="myProfileAvatar" /> <table id="shortcutsTable">
</div>
<table class="settingsTable">
<tr> <tr>
<td> <td>
<div class="title"> <div class="title">
@@ -1131,7 +1135,7 @@ access to use this app.
<div id="tabShortcuts" class="tabcontent"> <div id="tabShortcuts" class="tabcontent">
<table class="settingsTable"> <table class="settingsTable">
<tr> <tr>
<td class="custom-width"> <td>
<div class="title"> <div class="title">
<i class="fa-solid fa-keyboard"></i> <i class="fa-solid fa-keyboard"></i>
<p>Shortcuts</p> <p>Shortcuts</p>
@@ -1307,7 +1311,7 @@ access to use this app.
<input id="themeColorPicker" class="theme-color-picker" type="text" /> <input id="themeColorPicker" class="theme-color-picker" type="text" />
<br /> <br />
<div class="inline-check-box"> <div class="inline-check-box">
<div class="custom-width"> <div>
<i class="fas fa-save"></i> <i class="fas fa-save"></i>
<p>Keep custom</p> <p>Keep custom</p>
</div> </div>