[mirotalksfu] - UI improvements
هذا الالتزام موجود في:
@@ -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> 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> 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> 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> 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> 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>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم