sendrecv/js: Implement state handling for Connect button

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/31>

2 files changed, 13 insertions, 1 deletions

diff --git a/webrtc/sendrecv/js/index.html b/webrtc/sendrecv/js/index.html
index 462a530..772b119 100644
--- a/webrtc/sendrecv/js/index.html
+++ b/webrtc/sendrecv/js/index.html
@@ -30,7 +30,7 @@
     <div>
       <label for="peer-connect">Enter peer id</label>
       <input id="peer-connect" type="text" name="text">
-      <button onclick="onConnectClicked();">Connect</button>
+      <input id="peer-connect-button" onclick="onConnectClicked();" type="button" value="Connect">
     </div>
 
     <div>Our id is <b id="peer-id">unknown</b></div>
diff --git a/webrtc/sendrecv/js/webrtc.js b/webrtc/sendrecv/js/webrtc.js
index 6f893e7..433462f 100644
--- a/webrtc/sendrecv/js/webrtc.js
+++ b/webrtc/sendrecv/js/webrtc.js
@@ -25,7 +25,16 @@ var ws_conn;
 // Promise for local stream after constraints are approved by the user
 var local_stream_promise;
 
+function setConnectButtonState(value) {
+    document.getElementById("peer-connect-button").value = value;
+}
+
 function onConnectClicked() {
+    if (document.getElementById("peer-connect-button").value == "Disconnect") {
+        resetState();
+        return;
+    }
+
     var id = document.getElementById("peer-connect").value;
     if (id == "") {
         alert("Peer id must be filled out");
@@ -33,6 +42,7 @@ function onConnectClicked() {
     }
 
     ws_conn.send("SESSION " + id);
+    setConnectButtonState("Disconnect");
 }
 
 function getOurId() {
@@ -237,6 +247,7 @@ function websocketServerConnect() {
         document.getElementById("peer-id").textContent = peer_id;
         ws_conn.send('HELLO ' + peer_id);
         setStatus("Registering with server");
+        setConnectButtonState("Connect");
     });
     ws_conn.addEventListener('error', onServerError);
     ws_conn.addEventListener('message', onServerMessage);
@@ -327,5 +338,6 @@ function createCall(msg) {
     if (msg != null)
         setStatus("Created peer connection for call, waiting for SDP");
 
+    setConnectButtonState("Disconnect");
     return local_stream_promise;
 }