[mirotalksfu] - UI improvements

هذا الالتزام موجود في:
Miroslav Pejic
2023-08-26 13:28:20 +02:00
الأصل 26fc83b9c8
التزام d36cdd161b
5 ملفات معدلة مع 101 إضافات و86 حذوفات

عرض الملف

@@ -14,7 +14,7 @@ const getLocalIp = () => {
} }
// Set the local ip to the first IPv4 address found and exit the loop // Set the local ip to the first IPv4 address found and exit the loop
localIp = iface.address; localIp = iface.address;
checkIp = false checkIp = false;
return; return;
} }
}); });

عرض الملف

@@ -333,7 +333,7 @@ body {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.settingsTable { .settingsTable {
width: 320px; width: 100%;
color: #fff; color: #fff;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
@@ -351,9 +351,8 @@ th {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
} }
.custom-width {
#sessionTime { width: 160px;
float: right;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@@ -446,7 +445,7 @@ th {
} }
/* on open display devices tab */ /* on open display devices tab */
#tabVideoDevices { #tabRoom {
display: block; display: block;
} }

عرض الملف

@@ -131,7 +131,7 @@ function initClient() {
setTheme(); setTheme();
if (!DetectRTC.isMobileDevice) { if (!DetectRTC.isMobileDevice) {
setTippy('shareButton', 'Share room', 'right'); setTippy('shareButton', 'Share room', 'right');
setTippy('hideMeButton', 'Toggle hide me', 'right'); setTippy('hideMeButton', 'Toggle hide self view', 'right');
setTippy('startAudioButton', 'Start the audio', 'right'); setTippy('startAudioButton', 'Start the audio', 'right');
setTippy('stopAudioButton', 'Stop the audio', 'right'); setTippy('stopAudioButton', 'Stop the audio', 'right');
setTippy('startVideoButton', 'Start the video', 'right'); setTippy('startVideoButton', 'Start the video', 'right');
@@ -760,6 +760,7 @@ function joinRoom(peer_name, room_id) {
console.log('Already connected to a room'); console.log('Already connected to a room');
} else { } else {
console.log('05 ----> join Room ' + room_id); console.log('05 ----> join Room ' + room_id);
roomId.innerText = room_id;
rc = new RoomClient( rc = new RoomClient(
localAudio, localAudio,
remoteAudios, remoteAudios,

عرض الملف

@@ -2273,7 +2273,7 @@ class RoomClient {
} }
} }
getSelectedIndexValue(elem){ getSelectedIndexValue(elem) {
return elem.options[elem.selectedIndex].value; return elem.options[elem.selectedIndex].value;
} }

عرض الملف

@@ -146,15 +146,15 @@ access to use this app.
</header> </header>
<main class="mySettingsMain"> <main class="mySettingsMain">
<div class="tab"> <div class="tab">
<button id="tabRoomBtn" class="fas fa-home tablinks">
<p class="tabButtonText">Room</p>
</button>
<button id="tabVideoDevicesBtn" class="fas fa-video tablinks"> <button id="tabVideoDevicesBtn" class="fas fa-video tablinks">
<p class="tabButtonText">Video</p> <p class="tabButtonText">Video</p>
</button> </button>
<button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks"> <button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks">
<p class="tabButtonText">Audio</p> <p class="tabButtonText">Audio</p>
</button> </button>
<button id="tabRoomBtn" class="fas fa-home tablinks">
<p class="tabButtonText">Room</p>
</button>
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"> <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
<p class="tabButtonText">Recording</p> <p class="tabButtonText">Recording</p>
</button> </button>
@@ -173,6 +173,91 @@ access to use this app.
</div> </div>
<div class="tabActions"> <div class="tabActions">
<div id="tabRoom" class="tabcontent">
<button id="fullScreenButton" class="hidden">
<i class="fas fa-expand-alt"></i>
<p>Full screen mode</p>
</button>
<br />
<button id="raiseHandButton" class="hidden">
<i class="fas fa-hand-paper"></i>
<p>Raise hand</p>
</button>
<button id="lowerHandButton" class="hidden">
<i id="lowerHandIcon" class="fas fa-hand-paper"></i>
<p>Lower hand</p>
</button>
<br />
<button id="fileShareButton" class="hidden">
<i class="fas fa-folder-open"></i>
<p>File sharing</p>
</button>
<br />
<button id="lockRoomButton" class="hidden">
<i class="fas fa-lock-open"></i>
<p>Lock room</p>
</button>
<button id="unlockRoomButton" class="hidden">
<i class="fas fa-lock"></i>
<p>Unlock room</p>
</button>
<hr style="border: 1px solid grey" />
<table class="settingsTable">
<tr id="lobbyButton" class="hidden">
<td class="custom-width">
<div class="title">
<i class="fas fa-shield-halved"></i>
<p>Lobby</p>
</div>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchLobby" class="form-check-input" type="checkbox" />
</td>
</tr>
<tr id="pitchBarButton">
<td class="custom-width">
<div class="title">
<i class="fas fa-microphone-lines"></i>
<p>Pitch bar</p>
</div>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
</td>
</tr>
<tr id="soundsButton">
<td class="custom-width">
<div class="title">
<i class="fas fa-music"></i>
<p>Sounds</p>
</div>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchSounds" class="form-check-input" type="checkbox" checked />
</td>
</tr>
</table>
<hr style="border: 1px solid grey" />
<table class="settingsTable">
<tr>
<td>
<div class="title">
<i class="fa-solid fa-person-shelter"></i>
<p id="roomId">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="title">
<i class="fas fa-clock"></i>
<p id="sessionTime">00:00:00</p>
</div>
</td>
</tr>
</table>
</div>
<div id="tabVideoDevices" class="tabcontent"> <div id="tabVideoDevices" class="tabcontent">
<br /> <br />
<div class="title"> <div class="title">
@@ -241,78 +326,6 @@ access to use this app.
<br /> <br />
</div> </div>
<div id="tabRoom" class="tabcontent">
<button id="fullScreenButton" class="hidden">
<i class="fas fa-expand-alt"></i>
<p>Full screen mode</p>
</button>
<br />
<button id="raiseHandButton" class="hidden">
<i class="fas fa-hand-paper"></i>
<p>Raise hand</p>
</button>
<button id="lowerHandButton" class="hidden">
<i id="lowerHandIcon" class="fas fa-hand-paper"></i>
<p>Lower hand</p>
</button>
<br />
<button id="fileShareButton" class="hidden">
<i class="fas fa-folder-open"></i>
<p>File sharing</p>
</button>
<br />
<button id="lockRoomButton" class="hidden">
<i class="fas fa-lock-open"></i>
<p>Lock room</p>
</button>
<button id="unlockRoomButton" class="hidden">
<i class="fas fa-lock"></i>
<p>Unlock room</p>
</button>
<hr style="border: 1px solid grey" />
<table class="settingsTable">
<tr id="lobbyButton" class="hidden">
<td>
<label for="switchLobby"
><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;Lobby</label
>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchLobby" class="form-check-input" type="checkbox" />
</td>
</tr>
<tr id="pitchBarButton">
<td>
<label for="switchPitchBar"
><i class="fas fa-microphone-lines"></i>&nbsp;&nbsp;Pitch bar</label
>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
</td>
</tr>
<tr id="soundsButton">
<td>
<label for="switchSounds"><i class="fas fa-music"></i>&nbsp;&nbsp;Sounds</label>
</td>
<td class="form-check form-switch form-switch-md" style="margin-left: 10px">
<input id="switchSounds" class="form-check-input" type="checkbox" checked />
</td>
</tr>
</table>
<hr style="border: 1px solid grey" />
<table class="settingsTable">
<tr>
<td>
<label for="sessionTime"
><i class="fas fa-clock"></i>&nbsp;&nbsp;Session time</label
>
</td>
<td><label id="sessionTime">00:00:00</label></td>
</tr>
</table>
</div>
<div id="tabRecording" class="tabcontent"> <div id="tabRecording" class="tabcontent">
<button id="startRecButton" class="hidden"> <button id="startRecButton" class="hidden">
<i class="fas fa-record-vinyl"></i> <i class="fas fa-record-vinyl"></i>
@@ -335,9 +348,11 @@ access to use this app.
<hr style="border: 1px solid grey" /> <hr style="border: 1px solid grey" />
<table class="settingsTable"> <table class="settingsTable">
<tr> <tr>
<td> <td class="custom-width">
<i style="color: red" class="fa-solid fa-circle pulsate"></i>&nbsp;&nbsp;REC <div class="title">
time: <i style="color: red" class="fa-solid fa-circle pulsate"></i>
<p>REC time:</p>
</div>
</td> </td>
<td id="recordingStatus">0s</td> <td id="recordingStatus">0s</td>
</tr> </tr>