neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable join button during room joining in javascript and electron tutorials

Browse Source 
This improvement ensures that user cannot click the join button multiple times while joining process is in progress, causing unexpected behaviors
This commit is contained in:
juancarmore 2024-07-01 10:57:14 +02:00
parent 1e34ac3459
commit c49475c25f
4 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
application-client/openvidu-electron/src/app.js
View File

@ -7,6 +7,10 @@ const LIVEKIT_URL = "ws://localhost:7880/";
var room;
async function joinRoom() {
// Disable 'Join' button
document.getElementById("join-button").disabled = true;
document.getElementById("join-button").innerText = "Joining...";
// Initialize a new Room object
room = new Room();
@ -77,6 +81,10 @@ async function leaveRoom() {
// Back to 'Join room' page
document.getElementById("join").hidden = false;
document.getElementById("room").hidden = true;
// Enable 'Join' button
document.getElementById("join-button").disabled = false;
document.getElementById("join-button").innerText = "Join!";
}
window.onbeforeunload = () => {

2
application-client/openvidu-electron/src/index.html
View File

@ -65,7 +65,7 @@
<label for="room-name">Room</label>
<input id="room-name" class="form-control" type="text" required />
</div>
<button class="btn btn-lg btn-success" type="submit">Join!</button>
<button id="join-button" class="btn btn-lg btn-success" type="submit">Join!</button>
</form>
</div>
</div>

8
application-client/openvidu-js/src/app.js
View File

@ -28,6 +28,10 @@ function configureUrls() {
}
async function joinRoom() {
// Disable 'Join' button
document.getElementById("join-button").disabled = true;
document.getElementById("join-button").innerText = "Joining...";
// Initialize a new Room object
room = new LivekitClient.Room();
@ -98,6 +102,10 @@ async function leaveRoom() {
// Back to 'Join room' page
document.getElementById("join").hidden = false;
document.getElementById("room").hidden = true;
// Enable 'Join' button
document.getElementById("join-button").disabled = false;
document.getElementById("join-button").innerText = "Join!";
}
window.onbeforeunload = () => {

2
application-client/openvidu-js/src/index.html
View File

@ -67,7 +67,7 @@
<label for="room-name">Room</label>
<input id="room-name" class="form-control" type="text" required />
</div>
<button class="btn btn-lg btn-success" type="submit">Join!</button>
<button id="join-button" class="btn btn-lg btn-success" type="submit">Join!</button>
</form>
</div>
</div>