Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

hooked up a lot more of the UI

  • Loading branch information...
commit f59b774dbcf600ea6dbb4b07a31068e0c522391c 1 parent de465f3
@feross authored
View
90 css/main.styl
@@ -1,16 +1,24 @@
@import 'nib'
@import 'util'
-*, *:before, *:after
- box-sizing: border-box
-
FONT_COLOR = #444
LIGHT_FONT_COLOR = #777
-NO_METADATA_COLOR = #FF6C40
+NO_METADATA_COLOR = #bc330d
+NO_METADATA_GLOW_COLOR = #e33100
+
DOWNLOAD_COLOR_1 = #09c
DOWNLOAD_COLOR_2 = #0BF
-SEED_COLOR = #00CC36
+SEED_COLOR = #85AE06
+SEED_GLOW_COLOR = #91bd09
+
+ellipsis()
+ overflow: hidden
+ text-overflow: ellipsis
+ white-space: nowrap
+
+*, *:before, *:after
+ box-sizing: border-box
a, input, button
-webkit-app-region: no-drag !important
@@ -104,10 +112,6 @@ footer
i
margin-right: 4px
-@keyframes animate-stripes
- 100%
- background-position: -40px 0
-
main
height: 100%
@@ -119,12 +123,6 @@ main
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
@@ -142,12 +140,52 @@ main
max-height: 40px
.right
margin-left: 55px
- .title
+ .name
+ ellipsis()
color: #000
font-size: 13px
.stats, .stats2
+ ellipsis()
font-size: 9px
color: LIGHT_FONT_COLOR
+ &.has-metadata
+ .if-no-metadata
+ display: none
+ &:not(.has-metadata)
+ .if-metadata
+ display: none
+ &.is-seeding
+ .if-not-seeding
+ display: none
+ &:not(.is-seeding)
+ .if-seeding
+ display: none
+
+@keyframes animate-stripes
+ 100%
+ background-position: -40px 0
+
+@keyframes green-pulse
+ from
+ background-color: SEED_COLOR
+ box-shadow: 0 0 0 SEED_GLOW_COLOR
+ 50%
+ background-color: SEED_GLOW_COLOR
+ box-shadow: 0 0 18px SEED_GLOW_COLOR
+ to
+ background-color: SEED_COLOR
+ box-shadow: 0 0 0 SEED_GLOW_COLOR
+
+@keyframes red-pulse
+ from
+ background-color: NO_METADATA_COLOR
+ box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR
+ 50%
+ background-color: NO_METADATA_GLOW_COLOR
+ box-shadow: 0 0 18px NO_METADATA_GLOW_COLOR
+ to
+ background-color: NO_METADATA_COLOR
+ box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR
progress
appearance: none
@@ -163,22 +201,22 @@ progress::-webkit-progress-bar
border-radius: 3px
box-shadow: 0 1px 2px rgba(0,0,0,.5) inset
+progress::-webkit-progress-value
+ border-radius: 3px
+
.torrent:not(.has-metadata)
progress::-webkit-progress-bar
- background-color: NO_METADATA_COLOR
+ animation: red-pulse 1s infinite
-.torrent.has-metadata
- progress[value="1"]::-webkit-progress-bar
- background-color: SEED_COLOR
+.torrent.is-seeding
+ progress::-webkit-progress-bar
+ animation: green-pulse 3s infinite
+.torrent.has-metadata:not(.is-seeding)
progress::-webkit-progress-value
- position: relative
- background-size: 40px 15px, 100% 100%, 100% 100%
- border-radius: 3px
-
- progress:not([value="1"])::-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)
-
+ background-size: 40px 15px, 100% 100%, 100% 100%
+ position: relative
View
17 lib/app.js
@@ -32,7 +32,7 @@ function App (torrentManager) {
self.updateUI()
window.setInterval(function () {
self.updateUI()
- }, 1000)
+ }, 500)
}
App.prototype.setupWindow = function () {
@@ -135,11 +135,18 @@ App.prototype.updateTorrentUI = function ($torrent, torrent) {
else
$torrent.removeClass('has-metadata')
+ if (torrent.progress === 1)
+ $torrent.addClass('is-seeding')
+ else
+ $torrent.removeClass('is-seeding')
+
$torrent.find('.name').text(torrent.name)
- $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', Number(torrent.storage && torrent.storage.progress))
+ $torrent.find('.downloaded').text(humanize.filesize(torrent.downloaded))
+ $torrent.find('.uploaded').text(humanize.filesize(torrent.uploaded))
+ $torrent.find('.length').text(humanize.filesize(torrent.length))
+ $torrent.find('.ratio').text(torrent.ratio)
+ $torrent.find('progress').attr('value', torrent.progress)
+ $torrent.find('.percentage').text((torrent.progress * 100).toFixed(2))
$torrent.find('.numPeers').text(torrent.swarm.numConns + torrent.swarm.numQueued)
$torrent.find('.numActivePeers').text(torrent.swarm.numPeers)
$torrent.find('.downloadSpeed').text(humanize.filesize(torrent.swarm.downloadSpeed()))
View
15 lib/storage.js
@@ -206,17 +206,20 @@ function Storage (parsedTorrent) {
})
}
-/**
- * Percentage complete, represented as a number between 0 and 1.
- */
-Object.defineProperty(Storage.prototype, 'progress', {
+
+Object.defineProperty(Storage.prototype, 'downloaded', {
get: function () {
var self = this
- return (self.pieces.length - self.numMissing) / self.pieces.length
+ var downloaded = 0
+ return self.pieces.reduce(function (total, piece) {
+ return total + (piece.verified ? piece.length : 0)
+ }, 0)
}
})
-// Currently unused. Use to implement "end game" mode.
+/**
+ * The number of missing pieces. Used to implement "end game" mode.
+ */
Object.defineProperty(Storage.prototype, 'numMissing', {
get: function () {
var self = this
View
44 lib/torrent.js
@@ -38,6 +38,7 @@ function Torrent (uri, opts) {
self.metadataRaw = null
self.metadata = null
+ self.parsedTorrent = null
self.swarm = new Swarm(self.infoHash, self.peerId, { dht: true })
self.storage = null
@@ -55,6 +56,48 @@ function Torrent (uri, opts) {
self.swarm.on('wire', self._onWire.bind(self))
}
+Object.defineProperty(Torrent.prototype, 'length', {
+ get: function () {
+ var self = this
+ if (!self.parsedTorrent) return 0
+ return self.parsedTorrent.length
+ }
+})
+
+/**
+ * Percentage complete, represented as a number between 0 and 1.
+ */
+Object.defineProperty(Torrent.prototype, 'progress', {
+ get: function () {
+ var self = this
+ if (!self.parsedTorrent) return 0
+ return self.downloaded / self.parsedTorrent.length
+ }
+})
+
+Object.defineProperty(Torrent.prototype, 'downloaded', {
+ get: function () {
+ var self = this
+ return (self.storage && self.storage.downloaded) || 0
+ }
+})
+
+Object.defineProperty(Torrent.prototype, 'uploaded', {
+ get: function () {
+ var self = this
+ return self.swarm.uploaded
+ }
+})
+
+
+Object.defineProperty(Torrent.prototype, 'ratio', {
+ get: function () {
+ var self = this
+ if (self.uploaded === 0) return 0
+ return self.downloaded / self.uploaded
+ }
+})
+
/**
* Add a peer to the swarm
* @param {string} addr
@@ -272,7 +315,6 @@ Torrent.prototype._onMetadata = function () {
self.storage.on('piece', self._onStoragePiece.bind(self))
self.storage.on('file', function (file) {
console.log('FILE', file.name)
- self.file = file.buffer
})
self.storage.on('done', function () {
console.log('done with torrent!')
View
7 views/torrent.html
@@ -6,7 +6,12 @@
<div class="name"></div>
<div class="stats">
<span class="if-metadata">
- <span class="downloaded"></span>, uploaded <span class="uploaded"></span> (Ratio: <span class="ratio"></span>)
+ <span class="if-not-seeding">
+ <span class="downloaded"></span> of <span class="length"></span> (<span class="percentage"></span>%) - <span class="timeRemaining"></span>
+ </span>
+ <span class="if-seeding">
+ <span class="downloaded"></span>, uploaded <span class="uploaded"></span> (Ratio: <span class="ratio"></span>)
+ </span>
</span>
<span class="if-no-metadata">
Getting metadata from peers...
Please sign in to comment.
Something went wrong with that request. Please try again.