move webtorrent back into main window
We keep webtorrent running when the window is “closed” by hiding the window instead.
This commit is contained in:
Feross Aboukhadijeh
40
main/index.css
Normal file
40
main/index.css
Normal file
@@ -0,0 +1,40 @@
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
body.drag .drag-layer {
|
||||
display: block
|
||||
}
|
||||
|
||||
body.drag::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 0, 0, 0.3);
|
||||
border: 5px #f00 dashed;
|
||||
}
|
||||
|
||||
.player video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.torrent {
|
||||
height: 150px;
|
||||
}
|
||||
12
main/index.html
Normal file
12
main/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!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>
|
||||
<script>require('./index.js')</script>
|
||||
</body>
|
||||
</html>
|
||||
214
main/index.js
Normal file
214
main/index.js
Normal file
@@ -0,0 +1,214 @@
|
||||
/* global URL, Blob */
|
||||
|
||||
// var prettyBytes = require('pretty-bytes')
|
||||
var torrentPoster = require('./lib/torrent-poster')
|
||||
var createTorrent = require('create-torrent')
|
||||
var dragDrop = require('drag-drop')
|
||||
var path = require('path')
|
||||
var throttle = require('throttleit')
|
||||
var thunky = require('thunky')
|
||||
var WebTorrent = require('webtorrent')
|
||||
var xhr = require('xhr')
|
||||
|
||||
var createElement = require('virtual-dom/create-element')
|
||||
var diff = require('virtual-dom/diff')
|
||||
var patch = require('virtual-dom/patch')
|
||||
|
||||
var App = require('./views/app')
|
||||
|
||||
global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
|
||||
.map(function (arr) {
|
||||
return arr[0]
|
||||
})
|
||||
.filter(function (url) {
|
||||
return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
|
||||
})
|
||||
|
||||
var state = global.state = {
|
||||
torrents: []
|
||||
}
|
||||
|
||||
var currentVDom, rootElement, getClient, updateThrottled
|
||||
|
||||
function init () {
|
||||
currentVDom = App(state, handler)
|
||||
rootElement = createElement(currentVDom)
|
||||
document.body.appendChild(rootElement)
|
||||
|
||||
updateThrottled = throttle(update, 250)
|
||||
|
||||
getClient = thunky(function (cb) {
|
||||
getRtcConfig('https://instant.io/rtcConfig', function (err, rtcConfig) {
|
||||
if (err) console.error(err)
|
||||
var client = global.client = new WebTorrent({ rtcConfig: rtcConfig })
|
||||
state.torrents = client.torrents // internal webtorrent array -- do not modify!
|
||||
client.on('warning', onWarning)
|
||||
client.on('error', onError)
|
||||
cb(null, client)
|
||||
})
|
||||
})
|
||||
|
||||
// For performance, create the client immediately
|
||||
getClient(function () {})
|
||||
|
||||
dragDrop('body', onFiles)
|
||||
}
|
||||
init()
|
||||
|
||||
function update () {
|
||||
console.log('update')
|
||||
var newVDom = App(state, handler)
|
||||
var patches = diff(currentVDom, newVDom)
|
||||
rootElement = patch(rootElement, patches)
|
||||
currentVDom = newVDom
|
||||
}
|
||||
|
||||
function handler (action, ...args) {
|
||||
console.log('handler: %s %o', action, args)
|
||||
if (action === 'addTorrent') {
|
||||
var torrentId = args[0]
|
||||
addTorrent(torrentId)
|
||||
}
|
||||
if (action === 'openPlayer') {
|
||||
var torrent = args[0]
|
||||
openPlayer(torrent)
|
||||
}
|
||||
if (action === 'closePlayer') {
|
||||
closePlayer()
|
||||
}
|
||||
}
|
||||
addTorrent()
|
||||
|
||||
function onFiles (files) {
|
||||
// .torrent file = start downloading the torrent
|
||||
files.filter(isTorrentFile).forEach(addTorrent)
|
||||
|
||||
// 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 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) {}
|
||||
if (rtcConfig) {
|
||||
console.log('got rtc config: %o', rtcConfig)
|
||||
cb(null, rtcConfig)
|
||||
} else {
|
||||
cb(new Error('Got invalid WebRTC config from server: ' + res.body))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addTorrent (torrentId) {
|
||||
console.log('Downloading torrent from %s', torrentId)
|
||||
getClient(function (err, client) {
|
||||
if (err) return onError(err)
|
||||
var torrent = client.add(torrentId)
|
||||
addTorrentEvents(torrent)
|
||||
})
|
||||
}
|
||||
|
||||
function seed (files) {
|
||||
if (files.length === 0) return
|
||||
console.log('Seeding ' + files.length + ' files')
|
||||
|
||||
// Seed from WebTorrent
|
||||
getClient(function (err, client) {
|
||||
if (err) return onError(err)
|
||||
var torrent = client.seed(files)
|
||||
addTorrentEvents(torrent)
|
||||
})
|
||||
}
|
||||
|
||||
function addTorrentEvents (torrent) {
|
||||
torrent.on('infoHash', update)
|
||||
torrent.on('done', update)
|
||||
torrent.on('download', updateThrottled)
|
||||
torrent.on('upload', updateThrottled)
|
||||
torrent.on('ready', function () {
|
||||
torrentReady(torrent)
|
||||
})
|
||||
update()
|
||||
}
|
||||
|
||||
function torrentReady (torrent) {
|
||||
torrentPoster(torrent, function (err, buf) {
|
||||
if (err) return onError(err)
|
||||
torrent.posterURL = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
|
||||
console.log(torrent.posterURL)
|
||||
update()
|
||||
})
|
||||
update()
|
||||
}
|
||||
|
||||
function openPlayer (torrent) {
|
||||
var server = torrent.createServer()
|
||||
server.listen(0, function () {
|
||||
var port = server.address().port
|
||||
state.player = {
|
||||
server: server,
|
||||
url: 'http://localhost:' + port + '/0'
|
||||
}
|
||||
update()
|
||||
})
|
||||
}
|
||||
|
||||
function closePlayer () {
|
||||
state.player.server.destroy()
|
||||
state.player = null
|
||||
update()
|
||||
}
|
||||
|
||||
// function onTorrent (torrent) {
|
||||
// function updateSpeed () {
|
||||
// ipc.send('')
|
||||
// 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'
|
||||
// )
|
||||
// }
|
||||
|
||||
// setInterval(updateSpeed, 5000)
|
||||
// updateSpeed()
|
||||
// }
|
||||
|
||||
function onError (err) {
|
||||
console.error(err.stack)
|
||||
window.alert(err.message || err)
|
||||
}
|
||||
|
||||
function onWarning (err) {
|
||||
console.log('warning: %s', err.message)
|
||||
}
|
||||
|
||||
// Seed via upload input element
|
||||
// var uploadElement = require('upload-element')
|
||||
// var upload = document.querySelector('input[name=upload]')
|
||||
// uploadElement(upload, function (err, files) {
|
||||
// if (err) return onError(err)
|
||||
// files = files.map(function (file) { return file.file })
|
||||
// onFiles(files)
|
||||
// })
|
||||
|
||||
// Download via input element
|
||||
// document.querySelector('form').addEventListener('submit', function (e) {
|
||||
// e.preventDefault()
|
||||
// addTorrent(document.querySelector('form input[name=torrentId]').value.trim())
|
||||
// })
|
||||
23
main/lib/capture-video-frame.js
Normal file
23
main/lib/capture-video-frame.js
Normal file
@@ -0,0 +1,23 @@
|
||||
module.exports = captureVideoFrame
|
||||
|
||||
function captureVideoFrame (video, format) {
|
||||
if (typeof video === 'string') video = document.querySelector(video)
|
||||
if (!video || video.nodeName !== 'VIDEO') {
|
||||
throw new Error('First argument must be a <video> element or selector')
|
||||
}
|
||||
if (format == null) format = 'png'
|
||||
if (format !== 'png' && format !== 'jpg' && format !== 'webp') {
|
||||
throw new Error('Second argument must be one of "png", "jpg", or "webp"')
|
||||
}
|
||||
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = video.videoWidth
|
||||
canvas.height = video.videoHeight
|
||||
|
||||
canvas.getContext('2d').drawImage(video, 0, 0)
|
||||
|
||||
var dataUri = canvas.toDataURL('image/' + format)
|
||||
var data = dataUri.split(',')[1]
|
||||
|
||||
return new Buffer(data, 'base64')
|
||||
}
|
||||
26
main/lib/torrent-poster.js
Normal file
26
main/lib/torrent-poster.js
Normal file
@@ -0,0 +1,26 @@
|
||||
module.exports = torrentPoster
|
||||
|
||||
var captureVideoFrame = require('./capture-video-frame')
|
||||
|
||||
function torrentPoster (torrent, cb) {
|
||||
if (torrent.ready) onReady()
|
||||
else torrent.once('ready', onReady)
|
||||
|
||||
function onReady () {
|
||||
// use largest file
|
||||
var file = torrent.files.reduce(function (a, b) {
|
||||
return a.length > b.length ? a : b
|
||||
})
|
||||
var video = document.createElement('video')
|
||||
file.renderTo(video)
|
||||
|
||||
video.currentTime = 10
|
||||
video.addEventListener('seeked', onSeeked)
|
||||
|
||||
function onSeeked (e) {
|
||||
video.removeEventListener('seeked', onSeeked)
|
||||
var buf = captureVideoFrame(video)
|
||||
cb(null, buf)
|
||||
}
|
||||
}
|
||||
}
|
||||
56
main/views/app.js
Normal file
56
main/views/app.js
Normal file
@@ -0,0 +1,56 @@
|
||||
module.exports = App
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
|
||||
function App (state, handler) {
|
||||
if (state.player) {
|
||||
return h('.player', [
|
||||
h('video', {
|
||||
src: state.player.url,
|
||||
autoplay: true,
|
||||
controls: true
|
||||
}),
|
||||
h('button.close', {
|
||||
onclick: closePlayer
|
||||
}, 'Close')
|
||||
])
|
||||
} else {
|
||||
var list = state.torrents.map(function (torrent) {
|
||||
var style = {}
|
||||
if (torrent.posterURL) {
|
||||
style['background-image'] = 'url("' + torrent.posterURL + '")'
|
||||
}
|
||||
return h('.torrent', {
|
||||
style: style
|
||||
}, [
|
||||
h('.name', torrent.name),
|
||||
h('.progress', String(torrent.progress * 100) + '%'),
|
||||
h('button.play', {
|
||||
disabled: !torrent.ready,
|
||||
onclick: openPlayer
|
||||
}, 'Play')
|
||||
])
|
||||
|
||||
function openPlayer () {
|
||||
handler('openPlayer', torrent)
|
||||
}
|
||||
})
|
||||
return h('.app', [
|
||||
h('.torrent-list', list),
|
||||
h('.add', [
|
||||
h('button', {
|
||||
onclick: onAddTorrent
|
||||
}, 'Add New Torrent')
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
function onAddTorrent (e) {
|
||||
var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
|
||||
handler('addTorrent', torrentId)
|
||||
}
|
||||
|
||||
function closePlayer () {
|
||||
handler('closePlayer')
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user