More API updates

deps/reliable

@@ -1 +1 @@
-Subproject commit 0bbaf986efa550ea261b33ae20e17d85fb5b5bfa
+Subproject commit 856406373194f62fe68407eb680caa289a202a99

docs/api.json

@@ -9,7 +9,7 @@
         "name": "id",
         "optional": true,
         "type": "string",
-        "description": "Other peers can connect to this peer using the provided ID. If no ID is given, one will be generated by the brokering server.<div class='tip'>It is not recommended that you use this ID to identify peers, as it's meant to be used for brokering connections only. You're recommended to set the metadata option to send other identifying information.</div>"
+        "description": "Other peers can connect to this peer using the provided ID. If no ID is given, one will be generated by the brokering server.<div class='tip'>It's not recommended that you use this ID to identify peers, as it's meant to be used for brokering connections only. You're recommended to set the metadata option to send other identifying information.</div>"
       },
       {
         "name": "options",
@@ -76,5 +76,61 @@
         "description": "Something else"
       }
     ]
+  },
+
+  {
+    "name": "MediaConnection",
+    "type": "class",
+    "tags": ["beta"],
+    "description": "Wraps WebRTC's media streams. To get one, use <a href='#peercall'><code>peer.call</code></a>.",
+    "children": [
+      {
+        "name": "#answer",
+        "type": "method",
+        "snippet": "mediaConnection.answer([stream]);",
+        "description": "When recieving a <a href='#peeron-call'><code>call</code></a> event on a Peer, you can call <code>answer</code> on the media connection provided by the callback to accept the call and optionally send your own media stream.",
+        "children": {
+          "name": "stream",
+          "optional": true,
+          "type": "MediaStream",
+          "description": "A WebRTC media stream from <code>getUserMedia</code>."
+        }
+      },
+      {
+        "name": "#close",
+        "type": "method",
+        "snippet": "mediaConnection.close();",
+        "description": "Closes the media connection."
+      },
+      {
+        "name": "#on",
+        "type": "method",
+        "snippet": "mediaConnection.on(event, callback);",
+        "description": "Set listeners for media connection events.",
+        "children": [
+          {
+            "name": "'stream'",
+            "type": "event",
+            "snippet": "mediaConnection.on('stream', function(stream) { ... });",
+            "description": "Fired when the remote peer answers your call. <code>stream</code> is the media stream the remote peer added."
+          }
+        ]
+      },
+      {
+        "name": "#metadata",
+        "type": "object",
+        "description": "Metadata associated with the connection, passed in by whoever initiated the connection."
+      },
+      {
+        "name": "#peer",
+        "type": "string",
+        "description": "The ID of the Peer on the other end of this connection."
+      },
+      {
+        "name": "#type",
+        "type": "string",
+        "description": "For media connections, this is always <code>'media'</code>."
+      }
+    ]
   }
 ]

docs/style.css

@@ -1,5 +1,6 @@
 body, html {
-  font: 14px Helvetica;
+  font-size: 14px;
+  font-family: "Lato", Helvetica, sans-serif;
   color: #454545;
   text-shadow: 0px -1px 0 rgba(255,255,255,0.6);
 }
@@ -27,10 +28,18 @@ body, html {
 }
 
 .child {
-  padding: 8px 0 8px 15px;
+  padding: 5px 0 5px 15px;
 }
 
-.toplevel .children > .child {
+.bracket {
+  color: #ccc;
+}
+
+.toplevel {
+  padding-top: 12px;
+}
+
+.toplevel > .children > .child {
   padding-right: 15px;
 }
 
@@ -38,6 +47,10 @@ body, html {
   border-left: 1px dashed #ccc;
 }
 
+.beta .children {
+  border-left: 1px dashed #E96151;
+}
+
 .api div p {
   margin: 0 0 5px 0;
 }
@@ -47,22 +60,42 @@ body, html {
 }
 
 /** Label stylings */
-.api .type {
+.tag {
   display: inline-block;
   background-color: #454545;
   border-radius: 2px;
-  border: 1px solid rgba(0,0,0,0.2);
   color: #fff;
   line-height: 11px;
   padding: 1px 2px;
   margin-left: 5px;
-  font-size: 10px;
+  font-size: 9px;
+  letter-spacing: 1px;
   font-weight: 600;
   text-transform: uppercase;
+  border: 1px solid rgba(0,0,0,0.2);
   text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
+}
+
+.tag.type {
   background-color: #757E2B;
 }
 
+.tag.beta {
+  background-color: #E96151;
+}
+
+.tag.method {
+  background-color: #E2A62E;
+}
+
+.tag.class, .tag.constructor {
+  background-color: #454545;
+}
+
+.tag.event {
+  background-color: #1295D8;
+}
+
 .toplevel > .name {
   font-size: 20px;
 }
@@ -74,7 +107,7 @@ body, html {
   display: inline-block;
   background-color: #fff;
   padding: 5px 10px;
-  margin-left: 5px;
+  margin: 5px 0 0 5px;
 }
 
 .api .name {
@@ -88,8 +121,20 @@ body, html {
 }
 
 .tip {
-  background-color: #333;
+  background-color: #454545;
   font-size: 12px;
-  padding: 10px;
+  border-radius: 2px;
+  padding: 8px;
   color: #fff;
+  border: 1px solid rgba(0,0,0,0.2);
+  text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
+}
+
+#peer-options-debug .child {
+  padding: 0 15px;
+}
+
+#peer-options-debug .child .description {
+  display: inline-block;
+  margin-left: 10px;
 }

docs/template.html

@@ -1,4 +1,5 @@
 <head>
+  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
   <link href="./style.css" rel="stylesheet" type="text/css">
 </head>