diff options
| author | Feross Aboukhadijeh <feross@feross.org> | 2017-01-24 20:06:21 +0300 |
|---|---|---|
| committer | Joseph Frazier <1212jtraceur@gmail.com> | 2017-01-24 20:06:21 +0300 |
| commit | b2996ae0219733d1c9f5026a4ff1ac4d0bc71f04 (patch) | |
| tree | 04178fbbd7d91461817e4e9c88c20a9b3eeefbe6 /docs | |
| parent | 967001fe338488c7c26f065e950b20ca9332be69 (diff) | |
docs: inline js and css in "getting started" section (#1023)
To fix confusion about where the <script> tag should be added. It
belongs right before </body>, not in the <head>.
Prompted by this issue: https://github.com/feross/render-media/issues/23
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/get-started.md | 236 |
1 files changed, 115 insertions, 121 deletions
diff --git a/docs/get-started.md b/docs/get-started.md index a9369cc..1c9e354 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -200,85 +200,56 @@ keep in mind that the browser can only download torrents that are seeded by WebRTC peers (web peers). Use [WebTorrent Desktop](https://webtorrent.io/desktop) or [Instant.io](https://instant.io) to seed torrents to the WebTorrent network. -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> + <style> + #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; + } + </style> </head> <body> <div id="hero"> @@ -310,59 +281,82 @@ HTML: </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 --> + + <!-- Moment is used to show a human-readable remaining time --> <script src="http://momentjs.com/downloads/moment.min.js"></script> + + <script> + 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 + } + </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. |