Style cleanups

Cleaned up style and layout a bit; mostly invisible code tweaks.
mdn · Jun 27, 2015 · 1d34297 · 1d34297
1 parent e83e435
commit 1d34297
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 52 deletions.
diff --git a/s/webrtc-simple-datachannel/index.html b/s/webrtc-simple-datachannel/index.html
@@ -9,22 +9,28 @@
 </head>
 <body>
   <h1>MDN - WebRTC: Simple RTCDataChannel sample</h1>
-  <p>This sample is an admittedly contrived example of how to use an RTCDataChannel to
+  <p>This sample is an admittedly contrived example of how to use an <code>RTCDataChannel</code> to
   exchange data between two objects on the same page. See the
   <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">
   corresponding article</a> for details on how it works.</p>
 
   <div class="controlbox">
-    <button id="connectButton" name="connectButton" class="buttonleft">Connect</button>
-    <button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>Disconnect</button>
+    <button id="connectButton" name="connectButton" class="buttonleft">
+      Connect
+    </button>
+    <button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
+      Disconnect
+    </button>
   </div>
 
   <div class="messagebox">
     <label for="message">Enter a message:
       <input type="text" name="message" id="message" placeholder="Message text" 
               inputmode="latin" size=60 maxlength=120 disabled>
     </label>
-    <button id="sendButton" name="sendButton" class="buttonright" disabled>Send</button>
+    <button id="sendButton" name="sendButton" class="buttonright" disabled>
+      Send
+    </button>
   </div>
   <div class="messagebox" id="receivebox">
     <p>Messages received:</p>

diff --git a/s/webrtc-simple-datachannel/main.js b/s/webrtc-simple-datachannel/main.js
@@ -24,9 +24,9 @@
     sendButton = document.getElementById('sendButton');
     messageInputBox = document.getElementById('message');
     receiveBox = document.getElementById('receivebox');
-    
+
     // Set event listeners for user interface widgets
-    
+
     connectButton.addEventListener('click', connectPeers, false);
     disconnectButton.addEventListener('click', disconnectPeers, false);
     sendButton.addEventListener('click', sendMessage, false);
@@ -37,61 +37,41 @@
   // bypass that step.
 
   function connectPeers() {
-    // Create the local connection and its data channel
+    // Create the local connection and its event listeners
 
     localConnection = new RTCPeerConnection();
-    sendChannel = localConnection.createDataChannel("sendChannel");
-
-    // Set up local event listeners
 
-    localConnection.onicecandidate = localICECallback;
+    // Create the data channel and establish its event listeners
+    sendChannel = localConnection.createDataChannel("sendChannel");
     sendChannel.onopen = handleSendChannelStatusChange;
     sendChannel.onclose = handleSendChannelStatusChange;
 
-    // Create the remote connection and its channel
+    // Create the remote connection and its event listeners
 
     remoteConnection = new RTCPeerConnection();
-
-    // Set up remote event listeners
-
-    remoteConnection.onicecandidate = remoteICECallback;
     remoteConnection.ondatachannel = receiveChannelCallback;
 
-    // Now create an offer to connect
-
-    localConnection.createOffer(gotLocalDescription,
-          handleCreateDescriptionError);
+    // Set up the ICE candidates for the two peers
 
-    // Update UI elements to reflect that the connection is in
-    // the process of opening
-
-    connectButton.disabled = true;
-    disconnectButton.disabled = false;
+    localConnection.onicecandidate = e => !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e => !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    // Now create an offer to connect; this starts the process
+
+    localConnection.createOffer()
+    .then(offer => localConnection.setLocalDescription(offer))
+    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() => remoteConnection.createAnswer())
+    .then(answer => remoteConnection.setLocalDescription(answer))
+    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);
   }
-
-  // Callback executed when the createOffer() request for the
-  // local connection is finished.
-
-  function gotLocalDescription(theDescription) {
-    localConnection.setLocalDescription(theDescription);
-
-    // Since we're also the remote machine, we're going to
-    // kick off the answer process here.
 
-    remoteConnection.setRemoteDescription(theDescription);
-    remoteConnection.createAnswer(gotRemoteDescription,
-          handleCreateDescriptionError);
-  }
-
-  // Handle ICE callbacks for the local connection.
-
-  function localICECallback(event) {
-    if (event.candidate) {
-      remoteConnection.addIceCandidate(event.candidate, handleAddCandidateSuccess,
-              handleAddCandidateError);
-    }
-  }
-
   // Callback executed when the createAnswer() request for
   // the remote connection finishes up.
 
@@ -105,7 +85,7 @@
   function remoteICECallback(event) {
     if (event.candidate) {
       localConnection.addIceCandidate(event.candidate,
-              handleAddCandidateSuccess, handleAddCandidateError);
+              handleLocalAddCandidateSuccess, handleRemoteAddCandidateError);
     }
   }
 
@@ -118,10 +98,18 @@
     console.log("Unable to create an offer: " + error.toString());
   }
 
-  // Handle successful addition of ICE candidate.
+  // Handle successful addition of the ICE candidate
+  // on the "local" end of the connection.
 
-  function handleAddCandidateSuccess() {
-    console.log("Yay! addICECandidate succeeded!");
+  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  // Handle successful addition of the ICE candidate
+  // on the "remote" end of the connection.
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
   }
 
   // Handle an error that occurs during addition of ICE candidate.