add virtual-dom boilerplate
This commit is contained in:
Feross Aboukhadijeh
234
client/index.js
234
client/index.js
@@ -1,222 +1,26 @@
|
||||
/* global URL, Blob */
|
||||
var createElement = require('virtual-dom/create-element')
|
||||
var diff = require('virtual-dom/diff')
|
||||
var patch = require('virtual-dom/patch')
|
||||
|
||||
var createTorrent = require('create-torrent')
|
||||
var debug = require('debug')('instant.io')
|
||||
var dragDrop = require('drag-drop')
|
||||
// var listify = require('listify')
|
||||
var path = require('path')
|
||||
var prettyBytes = require('pretty-bytes')
|
||||
var throttle = require('throttleit')
|
||||
var thunky = require('thunky')
|
||||
var uploadElement = require('upload-element')
|
||||
var WebTorrent = require('webtorrent')
|
||||
var xhr = require('xhr')
|
||||
var torrentPoster = require('./torrent-poster')
|
||||
var App = require('./views/app')
|
||||
|
||||
var util = require('./util')
|
||||
|
||||
global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
|
||||
.map(function (arr) {
|
||||
return arr[0]
|
||||
})
|
||||
.filter(function (url) {
|
||||
return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
|
||||
})
|
||||
|
||||
var getClient = thunky(function (cb) {
|
||||
getRtcConfig('https://instant.io/rtcConfig', function (err, rtcConfig) {
|
||||
if (err) util.error(err)
|
||||
createClient(rtcConfig)
|
||||
})
|
||||
|
||||
function createClient (rtcConfig) {
|
||||
var client = window.client = new WebTorrent({ rtcConfig: rtcConfig })
|
||||
client.on('warning', util.warning)
|
||||
client.on('error', util.error)
|
||||
cb(null, client)
|
||||
}
|
||||
})
|
||||
|
||||
// For performance, create the client immediately
|
||||
getClient(function () {})
|
||||
|
||||
// Seed via upload input element
|
||||
var upload = document.querySelector('input[name=upload]')
|
||||
uploadElement(upload, function (err, files) {
|
||||
if (err) return util.error(err)
|
||||
files = files.map(function (file) { return file.file })
|
||||
onFiles(files)
|
||||
})
|
||||
|
||||
// Seed via drag-and-drop
|
||||
dragDrop('body', onFiles)
|
||||
|
||||
// Download via input element
|
||||
document.querySelector('form').addEventListener('submit', function (e) {
|
||||
e.preventDefault()
|
||||
downloadTorrent(document.querySelector('form input[name=torrentId]').value.trim())
|
||||
})
|
||||
|
||||
// Download by URL hash
|
||||
onHashChange()
|
||||
window.addEventListener('hashchange', onHashChange)
|
||||
function onHashChange () {
|
||||
var hash = decodeURIComponent(window.location.hash.substring(1)).trim()
|
||||
if (hash !== '') downloadTorrent(hash)
|
||||
var state = {
|
||||
count: 0
|
||||
}
|
||||
|
||||
// Warn when leaving and there are no other peers
|
||||
// window.addEventListener('beforeunload', onBeforeUnload)
|
||||
// Init app
|
||||
var currentVDom = App(state)
|
||||
var rootElement = createElement(currentVDom)
|
||||
document.body.appendChild(rootElement)
|
||||
|
||||
// Register a protocol handler for "magnet:" (will prompt the user)
|
||||
// navigator.registerProtocolHandler('magnet', window.location.origin + '#%s', 'Instant.io')
|
||||
|
||||
function getRtcConfig (url, cb) {
|
||||
xhr(url, function (err, res) {
|
||||
if (err || res.statusCode !== 200) {
|
||||
cb(new Error('Could not get WebRTC config from server. Using default (without TURN).'))
|
||||
} else {
|
||||
var rtcConfig
|
||||
try {
|
||||
rtcConfig = JSON.parse(res.body)
|
||||
} catch (err) {
|
||||
return cb(new Error('Got invalid WebRTC config from server: ' + res.body))
|
||||
}
|
||||
debug('got rtc config: %o', rtcConfig)
|
||||
cb(null, rtcConfig)
|
||||
}
|
||||
})
|
||||
function update () {
|
||||
var newVDom = App(state)
|
||||
var patches = diff(currentVDom, newVDom)
|
||||
rootElement = patch(rootElement, patches)
|
||||
currentVDom = newVDom
|
||||
}
|
||||
|
||||
function onFiles (files) {
|
||||
debug('got files:')
|
||||
files.forEach(function (file) {
|
||||
debug(' - %s (%s bytes)', file.name, file.size)
|
||||
})
|
||||
|
||||
// .torrent file = start downloading the torrent
|
||||
files.filter(isTorrentFile).forEach(downloadTorrentFile)
|
||||
|
||||
// everything else = seed these files
|
||||
seed(files.filter(isNotTorrentFile))
|
||||
}
|
||||
|
||||
function isTorrentFile (file) {
|
||||
var extname = path.extname(file.name).toLowerCase()
|
||||
return extname === '.torrent'
|
||||
}
|
||||
|
||||
function isNotTorrentFile (file) {
|
||||
return !isTorrentFile(file)
|
||||
}
|
||||
|
||||
function downloadTorrent (torrentId) {
|
||||
util.log('Downloading torrent from ' + torrentId)
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.add(torrentId, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function downloadTorrentFile (file) {
|
||||
util.log('Downloading torrent from <strong>' + file.name + '</strong>')
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.add(file, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function seed (files) {
|
||||
if (files.length === 0) return
|
||||
util.log('Seeding ' + files.length + ' files')
|
||||
|
||||
// Seed from WebTorrent
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.seed(files, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function onTorrent (torrent) {
|
||||
upload.value = upload.defaultValue // reset upload element
|
||||
|
||||
var torrentFileName = path.basename(torrent.name, path.extname(torrent.name)) + '.torrent'
|
||||
|
||||
util.log('"' + torrentFileName + '" contains ' + torrent.files.length + ' files:')
|
||||
torrent.files.forEach(function (file) {
|
||||
util.log(' - ' + file.name + ' (' + prettyBytes(file.length) + ')')
|
||||
})
|
||||
|
||||
util.log(
|
||||
'Torrent info hash: ' + torrent.infoHash + ' ' +
|
||||
'<a href="/#' + torrent.infoHash + '" onclick="prompt(\'Share this link with anyone you want to download this torrent:\', this.href);return false;">[Share link]</a> ' +
|
||||
'<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' +
|
||||
'<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrentFileName + '">[Download .torrent]</a>'
|
||||
)
|
||||
|
||||
function updateSpeed () {
|
||||
var progress = (100 * torrent.progress).toFixed(1)
|
||||
util.updateSpeed(
|
||||
'<b>Peers:</b> ' + torrent.swarm.wires.length + ' ' +
|
||||
'<b>Progress:</b> ' + progress + '% ' +
|
||||
'<b>Download speed:</b> ' + prettyBytes(window.client.downloadSpeed) + '/s ' +
|
||||
'<b>Upload speed:</b> ' + prettyBytes(window.client.uploadSpeed) + '/s'
|
||||
)
|
||||
}
|
||||
|
||||
torrent.on('download', throttle(updateSpeed, 250))
|
||||
torrent.on('upload', throttle(updateSpeed, 250))
|
||||
setInterval(updateSpeed, 5000)
|
||||
updateSpeed()
|
||||
|
||||
torrentPoster(torrent, function (err, buf) {
|
||||
if (err) return util.error(err)
|
||||
var img = document.createElement('img')
|
||||
img.src = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
|
||||
document.body.appendChild(img)
|
||||
})
|
||||
|
||||
// TODO: play torrent when user clicks button
|
||||
// torrent.files.forEach(function (file) {
|
||||
// // append file
|
||||
// file.appendTo(util.logElem, function (err, elem) {
|
||||
// if (err) return util.error(err)
|
||||
// })
|
||||
|
||||
// // append download link
|
||||
// file.getBlobURL(function (err, url) {
|
||||
// if (err) return util.error(err)
|
||||
|
||||
// var a = document.createElement('a')
|
||||
// a.target = '_blank'
|
||||
// a.download = file.name
|
||||
// a.href = url
|
||||
// a.textContent = 'Download ' + file.name
|
||||
// util.log(a)
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
// function onBeforeUnload (e) {
|
||||
// if (!e) e = window.event
|
||||
|
||||
// if (!window.client || window.client.torrents.length === 0) return
|
||||
|
||||
// var isLoneSeeder = window.client.torrents.some(function (torrent) {
|
||||
// return torrent.swarm && torrent.swarm.numPeers === 0 && torrent.progress === 1
|
||||
// })
|
||||
// if (!isLoneSeeder) return
|
||||
|
||||
// var names = listify(window.client.torrents.map(function (torrent) {
|
||||
// return '"' + (torrent.name || torrent.infoHash) + '"'
|
||||
// }))
|
||||
|
||||
// var theseTorrents = window.client.torrents.length >= 2
|
||||
// ? 'these torrents'
|
||||
// : 'this torrent'
|
||||
// var message = 'You are the only person sharing ' + names + '. ' +
|
||||
// 'Consider leaving this page open to continue sharing ' + theseTorrents + '.'
|
||||
|
||||
// if (e) e.returnValue = message // IE, Firefox
|
||||
// return message // Safari, Chrome
|
||||
// }
|
||||
setInterval(function () {
|
||||
state.count += 1
|
||||
update()
|
||||
}, 1000)
|
||||
|
||||
16
client/views/app.js
Normal file
16
client/views/app.js
Normal file
@@ -0,0 +1,16 @@
|
||||
module.exports = App
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
|
||||
function App (state) {
|
||||
var count = state.count
|
||||
return h('div', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
lineHeight: (100 + count) + 'px',
|
||||
border: '1px solid red',
|
||||
width: (100 + count) + 'px',
|
||||
height: (100 + count) + 'px'
|
||||
}
|
||||
}, [ String(count) ])
|
||||
}
|
||||
194
client/webtorrent.js
Normal file
194
client/webtorrent.js
Normal file
@@ -0,0 +1,194 @@
|
||||
/* global URL, Blob */
|
||||
|
||||
var createTorrent = require('create-torrent')
|
||||
var debug = require('debug')('instant.io')
|
||||
var dragDrop = require('drag-drop')
|
||||
var path = require('path')
|
||||
var prettyBytes = require('pretty-bytes')
|
||||
var throttle = require('throttleit')
|
||||
var thunky = require('thunky')
|
||||
var torrentPoster = require('./torrent-poster')
|
||||
var uploadElement = require('upload-element')
|
||||
var WebTorrent = require('webtorrent')
|
||||
var xhr = require('xhr')
|
||||
|
||||
var util = require('./util')
|
||||
|
||||
global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
|
||||
.map(function (arr) {
|
||||
return arr[0]
|
||||
})
|
||||
.filter(function (url) {
|
||||
return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
|
||||
})
|
||||
|
||||
var getClient = thunky(function (cb) {
|
||||
getRtcConfig('https://instant.io/rtcConfig', function (err, rtcConfig) {
|
||||
if (err) util.error(err)
|
||||
createClient(rtcConfig)
|
||||
})
|
||||
|
||||
function createClient (rtcConfig) {
|
||||
var client = window.client = new WebTorrent({ rtcConfig: rtcConfig })
|
||||
client.on('warning', util.warning)
|
||||
client.on('error', util.error)
|
||||
cb(null, client)
|
||||
}
|
||||
})
|
||||
|
||||
// For performance, create the client immediately
|
||||
getClient(function () {})
|
||||
|
||||
// Seed via upload input element
|
||||
var upload = document.querySelector('input[name=upload]')
|
||||
uploadElement(upload, function (err, files) {
|
||||
if (err) return util.error(err)
|
||||
files = files.map(function (file) { return file.file })
|
||||
onFiles(files)
|
||||
})
|
||||
|
||||
// Seed via drag-and-drop
|
||||
dragDrop('body', onFiles)
|
||||
|
||||
// Download via input element
|
||||
document.querySelector('form').addEventListener('submit', function (e) {
|
||||
e.preventDefault()
|
||||
downloadTorrent(document.querySelector('form input[name=torrentId]').value.trim())
|
||||
})
|
||||
|
||||
// Download by URL hash
|
||||
onHashChange()
|
||||
window.addEventListener('hashchange', onHashChange)
|
||||
function onHashChange () {
|
||||
var hash = decodeURIComponent(window.location.hash.substring(1)).trim()
|
||||
if (hash !== '') downloadTorrent(hash)
|
||||
}
|
||||
|
||||
// Register a protocol handler for "magnet:" (will prompt the user)
|
||||
// navigator.registerProtocolHandler('magnet', window.location.origin + '#%s', 'Instant.io')
|
||||
|
||||
function getRtcConfig (url, cb) {
|
||||
xhr(url, function (err, res) {
|
||||
if (err || res.statusCode !== 200) {
|
||||
cb(new Error('Could not get WebRTC config from server. Using default (without TURN).'))
|
||||
} else {
|
||||
var rtcConfig
|
||||
try {
|
||||
rtcConfig = JSON.parse(res.body)
|
||||
} catch (err) {
|
||||
return cb(new Error('Got invalid WebRTC config from server: ' + res.body))
|
||||
}
|
||||
debug('got rtc config: %o', rtcConfig)
|
||||
cb(null, rtcConfig)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onFiles (files) {
|
||||
debug('got files:')
|
||||
files.forEach(function (file) {
|
||||
debug(' - %s (%s bytes)', file.name, file.size)
|
||||
})
|
||||
|
||||
// .torrent file = start downloading the torrent
|
||||
files.filter(isTorrentFile).forEach(downloadTorrentFile)
|
||||
|
||||
// everything else = seed these files
|
||||
seed(files.filter(isNotTorrentFile))
|
||||
}
|
||||
|
||||
function isTorrentFile (file) {
|
||||
var extname = path.extname(file.name).toLowerCase()
|
||||
return extname === '.torrent'
|
||||
}
|
||||
|
||||
function isNotTorrentFile (file) {
|
||||
return !isTorrentFile(file)
|
||||
}
|
||||
|
||||
function downloadTorrent (torrentId) {
|
||||
util.log('Downloading torrent from ' + torrentId)
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.add(torrentId, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function downloadTorrentFile (file) {
|
||||
util.log('Downloading torrent from <strong>' + file.name + '</strong>')
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.add(file, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function seed (files) {
|
||||
if (files.length === 0) return
|
||||
util.log('Seeding ' + files.length + ' files')
|
||||
|
||||
// Seed from WebTorrent
|
||||
getClient(function (err, client) {
|
||||
if (err) return util.error(err)
|
||||
client.seed(files, onTorrent)
|
||||
})
|
||||
}
|
||||
|
||||
function onTorrent (torrent) {
|
||||
upload.value = upload.defaultValue // reset upload element
|
||||
|
||||
var torrentFileName = path.basename(torrent.name, path.extname(torrent.name)) + '.torrent'
|
||||
|
||||
util.log('"' + torrentFileName + '" contains ' + torrent.files.length + ' files:')
|
||||
torrent.files.forEach(function (file) {
|
||||
util.log(' - ' + file.name + ' (' + prettyBytes(file.length) + ')')
|
||||
})
|
||||
|
||||
util.log(
|
||||
'Torrent info hash: ' + torrent.infoHash + ' ' +
|
||||
'<a href="/#' + torrent.infoHash + '" onclick="prompt(\'Share this link with anyone you want to download this torrent:\', this.href);return false;">[Share link]</a> ' +
|
||||
'<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' +
|
||||
'<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrentFileName + '">[Download .torrent]</a>'
|
||||
)
|
||||
|
||||
function updateSpeed () {
|
||||
var progress = (100 * torrent.progress).toFixed(1)
|
||||
util.updateSpeed(
|
||||
'<b>Peers:</b> ' + torrent.swarm.wires.length + ' ' +
|
||||
'<b>Progress:</b> ' + progress + '% ' +
|
||||
'<b>Download speed:</b> ' + prettyBytes(window.client.downloadSpeed) + '/s ' +
|
||||
'<b>Upload speed:</b> ' + prettyBytes(window.client.uploadSpeed) + '/s'
|
||||
)
|
||||
}
|
||||
|
||||
torrent.on('download', throttle(updateSpeed, 250))
|
||||
torrent.on('upload', throttle(updateSpeed, 250))
|
||||
setInterval(updateSpeed, 5000)
|
||||
updateSpeed()
|
||||
|
||||
torrentPoster(torrent, function (err, buf) {
|
||||
if (err) return util.error(err)
|
||||
var img = document.createElement('img')
|
||||
img.src = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
|
||||
document.body.appendChild(img)
|
||||
})
|
||||
|
||||
// TODO: play torrent when user clicks button
|
||||
// torrent.files.forEach(function (file) {
|
||||
// // append file
|
||||
// file.appendTo(util.logElem, function (err, elem) {
|
||||
// if (err) return util.error(err)
|
||||
// })
|
||||
|
||||
// // append download link
|
||||
// file.getBlobURL(function (err, url) {
|
||||
// if (err) return util.error(err)
|
||||
|
||||
// var a = document.createElement('a')
|
||||
// a.target = '_blank'
|
||||
// a.download = file.name
|
||||
// a.href = url
|
||||
// a.textContent = 'Download ' + file.name
|
||||
// util.log(a)
|
||||
// })
|
||||
// })
|
||||
}
|
||||
60
index.html
60
index.html
@@ -1,35 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebTorrent</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="index.css" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<h1>WebTorrent</h1>
|
||||
</header>
|
||||
<h2 id="logHeading" style="display: none">Log</h2>
|
||||
<div class="speed"></div>
|
||||
<div class="log"></div>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebTorrent</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="index.css" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<!-- <main>
|
||||
<header>
|
||||
<h1>WebTorrent</h1>
|
||||
</header>
|
||||
<h2 id="logHeading" style="display: none">Log</h2>
|
||||
<div class="speed"></div>
|
||||
<div class="log"></div>
|
||||
|
||||
<h2>Start seeding</h2>
|
||||
<p>
|
||||
Drag-and-drop a file (or files) to begin sharing. Or choose a file:
|
||||
<input type="file" name="upload" multiple>
|
||||
</p>
|
||||
<h2>Start seeding</h2>
|
||||
<p>
|
||||
Drag-and-drop a file (or files) to begin sharing. Or choose a file:
|
||||
<input type="file" name="upload" multiple>
|
||||
</p>
|
||||
|
||||
<h2>Start downloading</h2>
|
||||
<form>
|
||||
<label for="torrentId">Download from a magnet link or info hash</label>
|
||||
<input name="torrentId" placeholder="magnet:" required>
|
||||
<button type="submit">Download</button>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
require('./client')
|
||||
</script>
|
||||
</body>
|
||||
<h2>Start downloading</h2>
|
||||
<form>
|
||||
<label for="torrentId">Download from a magnet link or info hash</label>
|
||||
<input name="torrentId" placeholder="magnet:" required>
|
||||
<button type="submit">Download</button>
|
||||
</form>
|
||||
</main> -->
|
||||
<script>
|
||||
require('./client')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"throttleit": "^1.0.0",
|
||||
"thunky": "^0.1.0",
|
||||
"upload-element": "^1.0.1",
|
||||
"virtual-dom": "^2.1.1",
|
||||
"webtorrent": "^0.76.0",
|
||||
"xhr": "^2.2.0"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user