diff options
| author | Yoann Ciabaud <yoann@sonora.io> | 2016-07-30 12:03:15 +0300 |
|---|---|---|
| committer | Yoann Ciabaud <yoann@sonora.io> | 2016-07-30 12:03:15 +0300 |
| commit | 774ea9da980f69a6b2e8a26bb223519939e31aab (patch) | |
| tree | 740f8b3cc799b060332e81d99bb3bbe20a74b2b5 /docs/get-started.md | |
| parent | e07939dc1b4b036b6ab4344476cff6afbda76fa8 (diff) | |
Add an HTML example showing status using the torrent API
Diffstat (limited to 'docs/get-started.md')
| -rw-r--r-- | docs/get-started.md | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/docs/get-started.md b/docs/get-started.md index 7e13014..1053234 100644 --- 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/> + ↘<code id="downloadSpeed">0 b/s</code> + / ↗<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. |