Skip to content

/ webtorrent

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: inline js and css in "getting started" section #1023

Merged
merged 1 commit into from Jan 24, 2017
+115 −121
Merged

docs: inline js and css in "getting started" section #1023

Changes from all commits
Commits
Show all changes
1 commit
Select commit
63015f4
docs: inline js and css in "getting started" section
feross Jan 23, 2017
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Loading status checks…

docs: inline js and css in "getting started" section 

To fix confusion about where the <script> tag should be added. It
belongs right before </body>, not in the <head>.

Prompted by this issue: feross/render-media#23
  • Loading branch information
@feross
feross committed Jan 23, 2017
commit 63015f4cae3cd783e84071dd9b6117c75a7a7933
236 docs/get-started.md
View file
Open in desktop
@@ -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.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.