Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

hook up ui! (eliminate handlebars - it didn't help enough)

  • Loading branch information...
commit c5019d1200a8eccb30a58f7566f3ea003c47674c 1 parent f4f0e70
@feross authored
View
8 chrome/app.html
@@ -28,9 +28,9 @@
</form>
</div>
</header>
- <div class="overallStats">
- <!-- TODO: heart should be colored red -> green based on ratio -->
- <span class="ratio"><i class="fa fa-heart fa-lg"></i>Ratio: {{ ratio }}</span>
+ <div class="overall-stats">
+ <!-- TODO: heart should be colored red/green based on ratio -->
+ <span class="ratio"><i class="fa fa-heart fa-lg"></i>Ratio: <span></span></span>
<span class="upload"><i class="fa fa-arrow-up fa-lg"></i><span>0.0 KB/s</span></span>
<span class="download"><i class="fa fa-arrow-down fa-lg"></i><span>0.0 KB/s</span></span>
</div>
@@ -40,7 +40,7 @@
</main>
<footer>
- <span class="numTransfers">1 transfer</span>
+ <span class="numTransfers"></span>
<span class="issue"><a href="https://github.com/feross/webtorrent/issues/new" target="_blank"><i class="fa fa-github fa-lg"></i>Report an issue</a></span>
</footer>
View
102 css/main.styl
@@ -21,7 +21,7 @@ body
font-size: 11px
margin: 0
-header, .overallStats, footer
+header, .overall-stats, footer
-webkit-app-region: drag
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5)
text-shadow: 0 0 1px rgba(255, 255, 255, 0.75)
@@ -73,7 +73,7 @@ toolbar()
height: 24px
padding: 4px 12px
-.overallStats
+.overall-stats
toolbar()
border-bottom: 1px solid #666
i
@@ -111,37 +111,43 @@ footer
main
height: 100%
- .torrent
- height: 65px
- padding: 4px 10px
- width: 100%
- &:nth-child(odd)
- background-color: #FFF
- &:nth-child(even)
- background-color: #E5F0FA
- .image
- float: left
- height: 57px
- margin-right: 5px
- position: relative
- width: 50px
- img
- bottom: 0
- left: 0
- margin: auto
- position: absolute
- right: 0
- top: 0
- max-width: 50px
- max-height: 40px
- .info
- margin-left: 55px
- .title
- color: #000
- font-size: 13px
- .stats, .stats2
- font-size: 9px
- color: LIGHT_FONT_COLOR
+.torrent
+ height: 65px
+ padding: 4px 10px
+ width: 100%
+ &:nth-child(odd)
+ background-color: #FFF
+ &:nth-child(even)
+ background-color: #E5F0FA
+ &.has-metadata
+ .if-no-metadata
+ display: none
+ &:not(.has-metadata)
+ .if-metadata
+ display: none
+ .left
+ float: left
+ height: 57px
+ margin-right: 5px
+ position: relative
+ width: 50px
+ img
+ bottom: 0
+ left: 0
+ margin: auto
+ position: absolute
+ right: 0
+ top: 0
+ max-width: 50px
+ max-height: 40px
+ .right
+ margin-left: 55px
+ .title
+ color: #000
+ font-size: 13px
+ .stats, .stats2
+ font-size: 9px
+ color: LIGHT_FONT_COLOR
progress
appearance: none
@@ -157,20 +163,22 @@ progress::-webkit-progress-bar
border-radius: 3px
box-shadow: 0 1px 2px rgba(0,0,0,.5) inset
-progress:not([value])::-webkit-progress-bar
- background-color: NO_METADATA_COLOR
+.torrent:not(.has-metadata)
+ progress::-webkit-progress-bar
+ background-color: NO_METADATA_COLOR
-progress[value="100"]::-webkit-progress-bar
- background-color: SEED_COLOR
+.torrent.has-metadata
+ progress[value="100"]::-webkit-progress-bar
+ background-color: SEED_COLOR
-progress::-webkit-progress-value
- position: relative
- background-size: 40px 15px, 100% 100%, 100% 100%
- border-radius: 3px
-
-progress:not([value="100"])::-webkit-progress-value
- animation: animate-stripes 2s linear infinite
- background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
- linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0.2)),
- linear-gradient(left, DOWNLOAD_COLOR_1, DOWNLOAD_COLOR_2)
+ progress::-webkit-progress-value
+ position: relative
+ background-size: 40px 15px, 100% 100%, 100% 100%
+ border-radius: 3px
+
+ progress:not([value="100"])::-webkit-progress-value
+ animation: animate-stripes 2s linear infinite
+ background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
+ linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0.2)),
+ linear-gradient(left, DOWNLOAD_COLOR_1, DOWNLOAD_COLOR_2)
View
6 css/util.styl
@@ -4,9 +4,3 @@
.clearfix:after
clear: both
-
-.left
- float: left
-
-.right
- float: right
View
5 index.js
@@ -1,8 +1,3 @@
-// Load pre-compiled handlebars templates and put them on require('handlebars').templates
-if (!require('handlebars').templates) {
- require('./views/compiled')
-}
-
var App = require('./lib/app')
var TorrentManager = require('./lib/torrent-manager')
View
121 lib/app.js
@@ -1,13 +1,14 @@
module.exports = App
var $ = require('jquery')
+var bncode = require('bncode')
+var fs = require('fs')
var key = require('keymaster')
-var handlebars = require('handlebars')
var humanize = require('humanize')
-handlebars.registerHelper('humanizeFilesize', function (bytes) {
- return humanize.filesize(bytes)
-})
+var TEMPLATE = {
+ TORRENT: fs.readFileSync(__dirname + '/../views/torrent.html')
+}
/**
* WebTorrent App UI
@@ -25,6 +26,13 @@ function App (torrentManager) {
self.setupWindow()
self.setupTorrentManager()
+
+ self.initUI()
+
+ self.updateUI()
+ window.setInterval(function () {
+ self.updateUI()
+ }, 1000)
}
App.prototype.setupWindow = function () {
@@ -65,31 +73,102 @@ App.prototype.setupWindow = function () {
// })
}
+App.prototype.initUI = function () {
+ var self = this
+ self.torrentManager.torrents.forEach(function (torrent) {
+ self.addTorrent(torrent)
+ })
+}
+
App.prototype.setupTorrentManager = function () {
+ var self = this
window.torrentManager.on('addTorrent', function (torrent) {
- var $torrent = $(handlebars.templates.torrent(torrent))
- $('#torrents').append($torrent)
+ self.addTorrent(torrent)
+ })
+ window.torrentManager.on('removeTorrent', function (torrent) {
+ self.removeTorrent(torrent)
+ })
+}
+
+App.prototype.addTorrent = function (torrent) {
+ var self = this
+ var $torrent = $(TEMPLATE.TORRENT)
+ self.updateTorrentUI($torrent, torrent)
- // $('.downloadMetadata').click(function () {
- // t.downloadMetadata()
- // })
+ $torrent.on('click', function () {
+ self.downloadTorrentMetadata(torrent)
})
- // window.torrentManager.on('torrent:metadata', function (torrent, metadata) {
- // var $torrent = $(handlebars.templates.torrent(torrent))
- // $('#torrents').append($torrent)
- // })
+ $('#torrents').append($torrent)
+ self.updateUI()
+}
+
+App.prototype.removeTorrent = function (torrent) {
+ var self = this
+ $('#torrent_' + torrent.infoHash).remove()
+ self.updateUI()
}
+App.prototype.updateUI = function () {
+ var self = this
+
+ self.torrentManager.torrents.forEach(function (torrent) {
+ var $torrent = $('#torrent_' + torrent.infoHash)
+ self.updateTorrentUI($torrent, torrent)
+ })
+ $('.overall-stats .ratio span').text(self.torrentManager.ratio)
- // $('.dhtPeers span').text(Object.keys(this.dht.peers).length)
+ // Number of transfers
+ if (self.torrentManager.torrents.length === 1)
+ $('.numTransfers').text('1 transfer')
+ else
+ $('.numTransfers').text(self.torrentManager.torrents.length + ' transfers')
+}
- // var connectedPeers = 0
- // for (var infoHash in this.torrents) {
- // var torrent = this.torrents[infoHash]
- // connectedPeers += torrent.numPeers
- // }
- // $('.connectedPeers span').text(connectedPeers)
- // $('.downloadMetadata').toggleClass('highlight', !!t.metadata)
+App.prototype.updateTorrentUI = function ($torrent, torrent) {
+ if (!$torrent.attr('id'))
+ $torrent.attr('id', 'torrent_' + torrent.infoHash)
+
+ if (torrent.metadata)
+ $torrent.addClass('has-metadata')
+ else
+ $torrent.removeClass('has-metadata')
+
+ $torrent.find('.title').text(torrent.title)
+ $torrent.find('.downloaded').text(humanize.filesize(torrent.swarm.downloaded))
+ $torrent.find('.uploaded').text(humanize.filesize(torrent.swarm.uploaded))
+ $torrent.find('.ratio').text(torrent.swarm.ratio)
+ $torrent.find('progress').attr('value', torrent.progress)
+ $torrent.find('.numPeers').text(torrent.swarm.numConns + torrent.swarm.numQueued)
+ $torrent.find('.numActivePeers').text(torrent.swarm.numPeers)
+}
+App.prototype.downloadTorrentMetadata = function (torrent) {
+ var self = this
+ if (!torrent.metadata)
+ return
+
+ var errorHandler = function (err) {
+ console.error('error' + err.toString())
+ }
+
+ chrome.fileSystem.chooseEntry({
+ type: 'saveFile',
+ suggestedName: torrent.title + '.torrent'
+ }, function (fileEntry) {
+ if (!fileEntry)
+ return
+
+ fileEntry.createWriter(function (writer) {
+ writer.onerror = errorHandler
+ writer.onwriteend = function (e) {
+ console.log('write complete')
+ }
+
+ var metadata = new Buffer(bncode.encode(torrent.metadata))
+
+ writer.write(new Blob([metadata]), { type: 'application/x-bittorrent' })
+ }, errorHandler)
+ })
+}
View
16 lib/torrent-manager.js
@@ -56,6 +56,22 @@ function TorrentManager () {
})
}
+Object.defineProperty(TorrentManager.prototype, 'ratio', {
+ get: function () {
+ var self = this
+
+ var uploaded = self.torrents.reduce(function (acc, torrent) {
+ return acc + torrent.swarm.uploaded
+ }, 0)
+ var downloaded = self.torrents.reduce(function (acc, torrent) {
+ return acc + torrent.swarm.downloaded
+ }, 0)
+
+ if (downloaded === 0) return 0
+ else return uploaded / downloaded
+ }
+})
+
TorrentManager.prototype.getTorrent = function (infoHash) {
var self = this
var index
View
77 lib/torrent.js
@@ -12,29 +12,30 @@ var WIRE_TIMEOUT = 10000
inherits(Torrent, EventEmitter)
function Torrent (uri, opts) {
- if (!(this instanceof Torrent)) return new Torrent(uri, opts)
- EventEmitter.call(this)
+ var self = this
+ if (!(self instanceof Torrent)) return new Torrent(uri, opts)
+ EventEmitter.call(self)
- var info = this._parseMagnetUri(uri)
+ var info = parseMagnetUri(uri)
if (!info.infoHash)
throw new Error('invalid torrent uri')
- this.infoHash = info.infoHash
- this.title = info.title
- this.metadata = null
+ self.infoHash = info.infoHash
+ self.title = info.title
+ self.metadata = null
- this.swarm = new Swarm(this.infoHash, opts.peerId, { dht: true })
+ self.swarm = new Swarm(self.infoHash, opts.peerId, { dht: true })
if (opts.port) {
- this.swarm.listen(opts.port, function (port) {
- this.emit('listening', port)
- }.bind(this))
+ self.swarm.listen(opts.port, function (port) {
+ self.emit('listening', port)
+ })
}
- this.swarm.on('error', function (err) {
+ self.swarm.on('error', function (err) {
console.error(err.message)
})
- this.swarm.on('wire', function (wire) {
+ self.swarm.on('wire', function (wire) {
// Send KEEP-ALIVE (every 60s) so peers will not disconnect the wire
wire.setKeepAlive(true)
@@ -130,57 +131,22 @@ function Torrent (uri, opts) {
console.log('METADATA')
console.log(wire.metadata.toString())
- this.metadata = {
+ self.metadata = {
'announce-list': [],
info: bncode.decode(wire.metadata),
// info_hash:
}
- console.log(this.metadata)
- this.emit('metadata', this.metadata)
+ console.log(self.metadata)
+ self.emit('metadata', this.metadata)
}
}
- }.bind(this))
-
- }.bind(this))
-}
-
-Torrent.prototype.downloadMetadata = function () {
- if (!this.metadata)
- return
-
- var errorHandler = function (err) {
- console.error('error' + err.toString())
- }
-
- chrome.fileSystem.chooseEntry({
- type: 'saveFile',
- suggestedName: this.title + '.torrent'
- }, function (fileEntry) {
- if (!fileEntry)
- return
-
- fileEntry.createWriter(function (writer) {
- writer.onerror = errorHandler
- writer.onwriteend = function (e) {
- console.log('write complete')
- }
-
- var metadata = new Buffer(bncode.encode(this.metadata))
-
- writer.write(new Blob([metadata]), { type: 'application/x-bittorrent' })
- }.bind(this), errorHandler)
- }.bind(this))
+ })
+ })
}
-Object.defineProperty(Torrent.prototype, 'numPeers', {
- get: function () {
- return this.swarm.wires.length
- }
-})
-
Object.defineProperty(Torrent.prototype, 'progress', {
get: function () {
- return 0.7 // TODO
+ return 0 // TODO
}
})
@@ -189,7 +155,8 @@ Object.defineProperty(Torrent.prototype, 'progress', {
* @param {string} addr
*/
Torrent.prototype.addPeer = function (addr) {
- this.swarm.add(addr)
+ var self = this
+ self.swarm.add(addr)
}
//
@@ -201,7 +168,7 @@ Torrent.prototype.addPeer = function (addr) {
* @param {string} uri
* @return {Object}
*/
-Torrent.prototype._parseMagnetUri = function (uri) {
+function parseMagnetUri (uri) {
var parsed = magnet(uri)
return {
title: parsed.dn, // displayName
View
16 package.json
@@ -38,10 +38,10 @@
"keymaster": "git://github.com/feross/keymaster",
"magnet-uri": "1.x",
"read-torrent": "^0.2.0",
- "speedometer": "^0.1.2"
+ "speedometer": "^0.1.2",
+ "brfs": "^0.2.1"
},
"devDependencies": {
- "handlebars": "^2.0.0-alpha.1",
"nib": "^1.0.2",
"nodemon": "^1.0.15",
"stylus": "^0.42.2",
@@ -65,16 +65,14 @@
"url": "git://github.com/feross/webtorrent.git"
},
"scripts": {
- "build": "npm run build-html && npm run build-css && npm run build-js",
- "build-css": "stylus --use nib css/main.styl --out chrome/ -c && ./bin/post-build.js",
- "build-html": "handlebars views --commonjs handlebars --extension html --output views/compiled.js",
- "build-js": "browserify --debug index.js > chrome/bundle.js",
+ "build": "npm run build-css && npm run build-js",
+ "build-css": "stylus --use nib css/main.styl --compress --out chrome/ && ./bin/post-build.js",
+ "build-js": "browserify --transform brfs --debug index.js > chrome/bundle.js",
"prepublish": "npm run build",
"start": "npm run build && ./bin/start.js",
"test": "tape test/*.js",
- "watch": "npm run watch-js & npm run watch-css & npm run watch-html",
+ "watch": "npm run watch-js & npm run watch-css",
"watch-css": "stylus --use nib css/main.styl --out chrome/ --watch",
- "watch-html": "nodemon --watch views --ext html --exec \"npm run build-html\"",
- "watch-js": "watchify index.js -o chrome/bundle.js --debug --verbose"
+ "watch-js": "watchify --transform brfs index.js --outfile chrome/bundle.js --debug --verbose"
}
}
View
23 views/torrent.html
@@ -1,19 +1,20 @@
-<section class="torrent" id="torrent_{{ infoHash }}">
- <div class="image">
- <img src="img/folder.png">
+<section class="torrent">
+ <div class="left">
+ <img class="image" src="img/folder.png">
</div>
- <div class="info">
- <div class="title">{{ title }}</div>
+ <div class="right">
+ <div class="title"></div>
<div class="stats">
- {{#if metadata }}
- {{humanizeFilesize swarm.downloaded }}, uploaded {{humanizeFilesize swarm.uploaded }} (Ratio: {{ swarm.ratio }})
- {{else}}
+ <span class="if-metadata">
+ <span class="downloaded"></span>, uploaded <span class="uploaded"></span> (Ratio: <span class="ratio"></span>)
+ </span>
+ <span class="if-no-metadata">
Getting metadata from peers...
- {{/if}}
+ </span>
</div>
- <progress max="1" value="{{ progress }}"></progress>
+ <progress max="1" value="0"></progress>
<div class="stats2">
- Downloading from 0 of {{ numPeers }} peers - UL: 0.0 KB/s
+ Downloading from <span class="numActivePeers"></span> of <span class="numPeers"></span> peers - UL: 0.0 KB/s
</div>
</div>
</section>
Please sign in to comment.
Something went wrong with that request. Please try again.