Add an HTML example showing status using the torrent API

webtorrent · feross · Aug 3, 2016 · Jul 30, 2016 · Jul 30, 2016 · 774ea9da980f69a6b2e8a26bb223519939e31aab
commit 774ea9da980f69a6b2e8a26bb223519939e31aab
diff --git a/docs/get-started.md b/docs/get-started.md
@@ -184,6 +184,177 @@ downloaded.
 </html>
 ```
 
+### HTML example with status showing UI
+
+This full HTML example mimics the UI of the [webtorrent.io](https://webtorrent.io) homepage. 
+It downloads the [sintel.torrent](https://webtorrent.io/torrents/sintel.torrent) file, streams it in the browser and output 
+some statistics to the user (peers, progress, remaining time, speed...).
+
+You can try it right now on [codepen](http://codepen.io/yciabaud/full/XdOeWM/) to see whats it looks like and play around with it!
+
+Feel free to try out some other torrents but keep in mind that the browser can only download torrents seeded on the webtorrent network.
+Use [instant.io](https://instant.io) to create yours!
+
+Javascript:
+```js
+var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'
+
+var client = new WebTorrent()
+
+// HTML elements
+var $body = document.body
+var $progressBar = document.querySelector('#progressBar')
+var $numPeers = document.querySelector('#numPeers')
+var $downloaded = document.querySelector('#downloaded')
+var $total = document.querySelector('#total')
+var $remaining = document.querySelector('#remaining')
+var $uploadSpeed = document.querySelector('#uploadSpeed')
+var $downloadSpeed = document.querySelector('#downloadSpeed')
+
+// Download the torrent
+client.add(torrentId, function (torrent) {
+
+  // Stream the file in the browser
+  torrent.files[0].appendTo('#output')
+
+  // Trigger statistics refresh
+  torrent.on('done', onDone)
+  setInterval(onProgress, 500)
+  onProgress()
+  
+  // Statistics
+  function onProgress () {
+    // Peers
+    $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' peer' : ' peers')
+
+    // Progress
+    var percent = Math.round(torrent.progress * 100 * 100) / 100
+    $progressBar.style.width = percent + '%'
+    $downloaded.innerHTML = prettyBytes(torrent.downloaded)
+    $total.innerHTML = prettyBytes(torrent.length)
+
+    // Remaining time
+    var remaining
+    if (torrent.done) {
+      remaining = 'Done.'
+    } else {
+      remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
+      remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
+    }
+    $remaining.innerHTML = remaining
+    
+    // Speed rates
+    $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
+    $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
+  }
+  function onDone () {
+    $body.className += ' is-seed'
+    onProgress()
+  }
+})
+
+// Human readable bytes util
+function prettyBytes(num) {
+  var exponent, unit, neg = num < 0, units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  if (neg) num = -num
+  if (num < 1) return (neg ? '-' : '') + num + ' B'
+  exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
+  num = Number((num / Math.pow(1000, exponent)).toFixed(2))
+  unit = units[exponent]
+  return (neg ? '-' : '') + num + ' ' + unit
+}
+```
+
+HTML:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>WebTorrent video player</title>
+  </head>
+  <body>
+    <div id="hero">
+      <div id="output">
+        <div id="progressBar"></div>
+        <!-- The video player will be added here -->
+      </div>
+      <!-- Statistics -->
+      <div id="status">
+        <div>
+          <span class="show-leech">Downloading </span>
+          <span class="show-seed">Seeding </span>
+          <code>
+            <!-- Informative link to the torrent file -->
+            <a id="torrentLink" href="https://webtorrent.io/torrents/sintel.torrent">sintel.torrent</a>
+          </code>
+          <span class="show-leech"> from </span>
+          <span class="show-seed"> to </span>
+          <code id="numPeers">0 peers</code>. 
+        </div>
+        <div>
+          <code id="downloaded"></code>
+          of <code id="total"></code>
+          — <span id="remaining"></span><br/>
+          &#x2198;<code id="downloadSpeed">0 b/s</code>
+          / &#x2197;<code id="uploadSpeed">0 b/s</code>
+        </div>
+      </div>
+    </div>
+    <!-- Include the latest version of WebTorrent -->
+    <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
+    <!-- Moment is used to show human readable remaining time -->
+    <script src="http://momentjs.com/downloads/moment.min.js"></script>
+  </body>
+</html>
+```
+
+CSS:
+```css
+#output video {
+  width: 100%;
+}
+#progressBar {
+    height: 5px;
+    width: 0%;
+    background-color: #35b44f;
+    transition: width .4s ease-in-out;
+}
+body.is-seed .show-seed {
+    display: inline;
+}
+body.is-seed .show-leech {
+    display: none;
+}
+.show-seed {
+    display: none;
+}
+#status code {
+    font-size: 90%;
+    font-weight: 700;
+    margin-left: 3px;
+    margin-right: 3px;
+    border-bottom: 1px dashed rgba(255,255,255,0.3);
+}
+
+.is-seed #hero {
+    background-color: #154820;
+    transition: .5s .5s background-color ease-in-out;
+}
+#hero {
+    background-color: #2a3749;
+}
+#status {
+    color: #fff;
+    font-size: 17px;
+    padding: 5px;
+}
+a:link, a:visited {
+    color: #30a247;
+    text-decoration: none;
+}
+```
+
 ## More Documentation
 
 Check out the [API Documentation](//webtorrent.io/docs) and [FAQ](//webtorrent.io/faq) for more details.