From c49475c25f3be2f1ea8e9f32674e9e9bbd2bb361 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Mon, 1 Jul 2024 10:57:14 +0200
Subject: [PATCH] Disable join button during room joining in javascript and
 electron tutorials

This improvement ensures that user cannot click the join button multiple times while joining process is in progress, causing unexpected behaviors
---
 application-client/openvidu-electron/src/app.js     | 8 ++++++++
 application-client/openvidu-electron/src/index.html | 2 +-
 application-client/openvidu-js/src/app.js           | 8 ++++++++
 application-client/openvidu-js/src/index.html       | 2 +-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/application-client/openvidu-electron/src/app.js b/application-client/openvidu-electron/src/app.js
index 88d5378b..8ae5e89c 100644
--- a/application-client/openvidu-electron/src/app.js
+++ b/application-client/openvidu-electron/src/app.js
@@ -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 = () => {
diff --git a/application-client/openvidu-electron/src/index.html b/application-client/openvidu-electron/src/index.html
index 71b634f1..52a2e996 100644
--- a/application-client/openvidu-electron/src/index.html
+++ b/application-client/openvidu-electron/src/index.html
@@ -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>
diff --git a/application-client/openvidu-js/src/app.js b/application-client/openvidu-js/src/app.js
index 5bd75c34..36a8cff8 100644
--- a/application-client/openvidu-js/src/app.js
+++ b/application-client/openvidu-js/src/app.js
@@ -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 = () => {
diff --git a/application-client/openvidu-js/src/index.html b/application-client/openvidu-js/src/index.html
index 6e3fdac0..58f367bf 100644
--- a/application-client/openvidu-js/src/index.html
+++ b/application-client/openvidu-js/src/index.html
@@ -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>