[mirotalksfu] - UI improvements

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

عرض الملف

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

عرض الملف

@@ -131,7 +131,7 @@ function initClient() {
setTheme();
if (!DetectRTC.isMobileDevice) {
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('stopAudioButton', 'Stop the audio', 'right');
setTippy('startVideoButton', 'Start the video', 'right');
@@ -760,6 +760,7 @@ function joinRoom(peer_name, room_id) {
console.log('Already connected to a room');
} else {
console.log('05 ----> join Room ' + room_id);
roomId.innerText = room_id;
rc = new RoomClient(
localAudio,
remoteAudios,

عرض الملف

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

عرض الملف

@@ -146,15 +146,15 @@ access to use this app.
</header>
<main class="mySettingsMain">
<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">
<p class="tabButtonText">Video</p>
</button>
<button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks">
<p class="tabButtonText">Audio</p>
</button>
<button id="tabRoomBtn" class="fas fa-home tablinks">
<p class="tabButtonText">Room</p>
</button>
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
<p class="tabButtonText">Recording</p>
</button>
@@ -173,6 +173,91 @@ access to use this app.
</div>
<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">
<br />
<div class="title">
@@ -241,78 +326,6 @@ access to use this app.
<br />
</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">
<button id="startRecButton" class="hidden">
<i class="fas fa-record-vinyl"></i>
@@ -335,9 +348,11 @@ access to use this app.
<hr style="border: 1px solid grey" />
<table class="settingsTable">
<tr>
<td>
<i style="color: red" class="fa-solid fa-circle pulsate"></i>&nbsp;&nbsp;REC
time:
<td class="custom-width">
<div class="title">
<i style="color: red" class="fa-solid fa-circle pulsate"></i>
<p>REC time:</p>
</div>
</td>
<td id="recordingStatus">0s</td>
</tr>