blitzwing/btorrent
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved debugging, added torrent removal, fixed column max width issue, improved files displaying

Browse source
This commit is contained in:
Diego Rodríguez 2015-11-28 17:30:27 -05:00
parent 24dd22d058
commit bcf197a59b
3 changed files with 88 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
app.js
View file

@ -1,5 +1,17 @@
var client = new WebTorrent({rtcConfig: {"iceServers":[{"url":"stun:23.21.150.121","urls":"stun:23.21.150.121"},{"url":"turn:global.turn.twilio.com:3478?transport=udp","username":"00bb844e6c2a07d4ed3e22a6edd6da6a715714a7c3eb118dc20246e5e0cc50c1","credential":"Wv1IxOBVhm4CGqoWYQWQ0X4Ia0Va7p2SOENv/S7M9Vg=","urls":"turn:global.turn.twilio.com:3478?transport=udp"}]}}); var client = new WebTorrent({
var DEBUG = true; rtcConfig: {
"iceServers": [{
"url": "stun:23.21.150.121",
"urls": "stun:23.21.150.121"
}, {
"url": "turn:global.turn.twilio.com:3478?transport=udp",
"username": "00bb844e6c2a07d4ed3e22a6edd6da6a715714a7c3eb118dc20246e5e0cc50c1",
"credential": "Wv1IxOBVhm4CGqoWYQWQ0X4Ia0Va7p2SOENv/S7M9Vg=",
"urls": "turn:global.turn.twilio.com:3478?transport=udp"
}]
}
});
var debug = true;
var prettyBytes = function (num) { var prettyBytes = function (num) {
var exponent; var exponent;
@ -16,7 +28,7 @@ var prettyBytes = function (num) {
} }
exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1); exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1);
num = (num / Math.pow(1000, exponent)).toFixed(2) * 1; num = (num / Math.pow(1000, exponent)).toFixed(1) * 1;
unit = units[exponent]; unit = units[exponent];
return (neg ? '-' : '') + num + ' ' + unit; return (neg ? '-' : '') + num + ' ' + unit;
@ -29,58 +41,68 @@ angular.module('bTorrent', [], function ($compileProvider, $locationProvider) {
requireBase: false requireBase: false
}).hashPrefix('#'); }).hashPrefix('#');
}).controller('bTorrentCtrl', function ($scope, $http, $log, $location) { }).controller('bTorrentCtrl', function ($scope, $http, $log, $location) {
if(DEBUG) $log.debug($location.hash());
$scope.client = client; $scope.client = client;
$scope.seedIt = true; $scope.seedIt = true;
$scope.updateAll = function() { var dbg = function (string, torrent) {
if (debug) {
if (torrent)
$log.debug("%c" + torrent.name + " (" + torrent.infoHash + "): %c" + string, 'color: #33C3F0', 'color: #333');
else
$log.debug("%cClient: %c" + string, 'color: #33C3F0', 'color: #333');
}
};
var updateAll = function () {
$scope.$apply(); $scope.$apply();
}; };
setInterval($scope.updateAll, 500); setInterval(updateAll, 500);
$scope.client.done = function() { $scope.client.done = function () {
var done = true; var done = true;
$scope.client.torrents.forEach(function(torrent) { $scope.client.torrents.forEach(function (torrent) {
if(!torrent.done) { if (!torrent.done) {
done = false; done = false;
} }
}); });
return done; return done;
}; };
$scope.client.downloading = function() { $scope.client.downloading = function () {
var downloading = true; var downloading = true;
$scope.client.torrents.forEach(function(torrent) { $scope.client.torrents.forEach(function (torrent) {
if(torrent.done) { if (torrent.done) {
downloading = false; downloading = false;
} }
}); });
return downloading; return downloading;
}; };
$scope.uploadFile = function() { $scope.uploadFile = function () {
document.getElementById("fileUpload").click(); document.getElementById("fileUpload").click();
}; };
$scope.uploadFile2 = function(elem) { $scope.uploadFile2 = function (elem) {
$scope.client.processing = true; $scope.client.processing = true;
$scope.client.seed(elem.files, $scope.onTorrent); dbg("Seeding " + elem.files[0].name);
$scope.client.seed(elem.files, $scope.onSeed);
}; };
$scope.fromInput = function() { $scope.fromInput = function () {
if(!$scope.torrentInput == "") { if (!$scope.torrentInput == "") {
$scope.client.processing = true; $scope.client.processing = true;
dbg("Adding " + $scope.torrentInput);
$scope.client.add($scope.torrentInput, $scope.onTorrent); $scope.client.add($scope.torrentInput, $scope.onTorrent);
$scope.torrentInput = ""; $scope.torrentInput = "";
} }
}; };
$scope.toggleTorrent = function(torrent) { $scope.toggleTorrent = function (torrent) {
if(torrent.showFiles) { if (torrent.showFiles) {
torrent.showFiles = false; torrent.showFiles = false;
$scope.sTorrent = null; $scope.sTorrent = null;
} else { } else {
$scope.client.torrents.forEach(function(t) { $scope.client.torrents.forEach(function (t) {
t.showFiles = false; t.showFiles = false;
}); });
torrent.showFiles = true; torrent.showFiles = true;
@ -88,14 +110,19 @@ angular.module('bTorrent', [], function ($compileProvider, $locationProvider) {
} }
}; };
$scope.onTorrent = function(torrent) { $scope.destroyedTorrent = function (err) {
if (err) throw err;
dbg("Destroyed torrent");
};
$scope.onTorrent = function (torrent, isSeed) {
$scope.client.processing = false; $scope.client.processing = false;
torrent.showFiles = false; torrent.showFiles = false;
torrent.pSize = prettyBytes(torrent.length); torrent.pSize = prettyBytes(torrent.length);
torrent.fileName = torrent.name + '.torrent'; torrent.fileName = torrent.name + '.torrent';
torrent.oTorrentFileURL = torrent.torrentFileURL; torrent.oTorrentFileURL = torrent.torrentFileURL;
if(angular.isUndefined($scope.sTorrent) || $scope.sTorrent === null) { if (angular.isUndefined($scope.sTorrent) || $scope.sTorrent === null) {
$scope.sTorrent = torrent; $scope.sTorrent = torrent;
torrent.showFiles = true; torrent.showFiles = true;
} }
@ -114,8 +141,6 @@ angular.module('bTorrent', [], function ($compileProvider, $locationProvider) {
} }
}; };
if(DEBUG) $log.debug("Downloading..." + torrent.infoHash);
torrent.files.forEach(function (file) { torrent.files.forEach(function (file) {
file.pSize = prettyBytes(file.length); file.pSize = prettyBytes(file.length);
file.status = "Downloading"; file.status = "Downloading";
@ -123,42 +148,41 @@ angular.module('bTorrent', [], function ($compileProvider, $locationProvider) {
file.getBlobURL(function (err, url) { file.getBlobURL(function (err, url) {
if (err) throw err; if (err) throw err;
file.url = url; file.url = url;
if(DEBUG) $log.debug("Got BLOB " + file.url); if(!isSeed) dbg("Finished downloading file " + file.name, torrent);
file.status = "Ready"; file.status = "Ready";
$scope.$apply(); $scope.$apply();
}); });
if(DEBUG) $log.debug("FILE"); if(!isSeed) dbg("Received file " + file.name + " metadata", torrent);
}); });
torrent.on('download', function (chunkSize) { torrent.on('download', function (chunkSize) {
if(DEBUG) $log.debug("DOWNLOAD"); if(!isSeed) dbg("Downloaded chunk", torrent);
torrent.update();
}); });
torrent.on('upload', function (chunkSize) { torrent.on('upload', function (chunkSize) {
if(DEBUG) $log.debug("UPLOAD"); dbg("Uploaded chunk", torrent);
torrent.update();
}); });
torrent.on('done', function () { torrent.on('done', function () {
if(DEBUG) $log.debug("DONE"); if(!isSeed) dbg("Done", torrent);
torrent.update(); torrent.update();
}); });
torrent.on('wire', function (wire, addr) { torrent.on('wire', function (wire, addr) {
if(DEBUG) $log.debug("WIRE"); dbg("Wire " + addr, torrent);
});
torrent.on('wire', function (wire, addr) {
console.log('connected to peer with address ' + addr);
}); });
setInterval(torrent.update, 500); setInterval(torrent.update, 500);
torrent.update(); torrent.update();
}; };
if($location.hash() != '') { $scope.onSeed = function(torrent) {
$scope.onTorrent(torrent, true);
};
if ($location.hash() != '') {
$scope.client.processing = true; $scope.client.processing = true;
dbg("Adding " + $location.hash());
client.add($location.hash(), $scope.onTorrent); client.add($location.hash(), $scope.onTorrent);
} }
}).filter('html', function ($sce) { }).filter('html', function ($sce) {

26
index.html
View file

@ -6,21 +6,21 @@
<title>βTorrent: Browser WebTorrent Client</title> <title>βTorrent: Browser WebTorrent Client</title>
<meta name="description" content="βTorrent: Browser WebTorrent Client"> <meta name="description" content="βTorrent: Browser WebTorrent Client">
<meta name="keywords" content="βTorrent, btorrent, webtorrent client, webtorrent"> <meta name="keywords" content="βTorrent, btorrent, client, webtorrent, browser, torrent">
<meta name="author" content="Diego Rodríguez Baquero"> <meta name="author" content="Diego Rodríguez Baquero - DiegoRBaquero">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/g/webtorrent@0.62.3,momentjs@2.10.6,angularjs@1.4.6"></script> <script src="https://cdn.jsdelivr.net/g/webtorrent@0.62,momentjs@2.10,angularjs@1.4"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/normalize@3.0,skeleton@2.0">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.5/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header style="text-align: center"> <header>
<h1>βTorrent<span class="version"> v0.3</span></h1> <h1>βTorrent<span class="version"> v0.4</span></h1>
</header> </header>
<div class="container" ng-controller="bTorrentCtrl" ng-cloak> <div class="container" ng-controller="bTorrentCtrl" ng-cloak>
<div class="row"> <div class="row">
@ -44,6 +44,7 @@
<th ng-hide="client.downloading()">Uploaded</th> <th ng-hide="client.downloading()">Uploaded</th>
<th>Peers</th> <th>Peers</th>
<th>Share</th> <th>Share</th>
<th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody ng-hide="client.torrents.length"> <tbody ng-hide="client.torrents.length">
@ -52,8 +53,8 @@
</tr> </tr>
</tbody> </tbody>
<tbody ng-repeat="torrent in client.torrents" ng-if="torrent.name"> <tbody ng-repeat="torrent in client.torrents" ng-if="torrent.name">
<tr class="torrentRow" ng-class="{selectedTorrent: torrent.showFiles}" ng-click="toggleTorrent(torrent)"> <tr class="torrentRow" ng-class="{selectedTorrent: torrent.showFiles}">
<td><i class="fa fa-cloud-download" ng-hide="torrent.done"></i><i class="fa fa-check" ng-show="torrent.done"></i> {{torrent.name}}<br /><span class="subInfo">{{torrent.pSize}} in {{torrent.files.length}} files</span></td> <td><div><i class="fa fa-cloud-download" ng-hide="torrent.done"></i><i class="fa fa-check" ng-show="torrent.done"></i> {{torrent.name}}</div><span class="subInfo">{{torrent.pSize}} in <a href="#" onclick="return false;" ng-click="toggleTorrent(torrent)">{{torrent.files.length}} files</a></span></td>
<td ng-hide="client.done()">{{torrent.pDownloaded}} <span class="subInfo">({{torrent.pProgress}}%)</span><br /><span class="subInfo">@ {{torrent.pDownloadSpeed}}/s</span></td> <td ng-hide="client.done()">{{torrent.pDownloaded}} <span class="subInfo">({{torrent.pProgress}}%)</span><br /><span class="subInfo">@ {{torrent.pDownloadSpeed}}/s</span></td>
<td ng-hide="client.done()">{{torrent.tRemaining}}</td> <td ng-hide="client.done()">{{torrent.tRemaining}}</td>
<td ng-hide="client.downloading()">{{torrent.pUploaded}}<br /><span class="subInfo">@ {{torrent.pUploadSpeed}}/s</span></td> <td ng-hide="client.downloading()">{{torrent.pUploaded}}<br /><span class="subInfo">@ {{torrent.pUploadSpeed}}/s</span></td>
@ -62,8 +63,9 @@
<a href="#{{torrent.infoHash}}" target="_blank">βTorrent</a> <a href="#{{torrent.infoHash}}" target="_blank">βTorrent</a>
| <a href="{{torrent.magnetURI}}" target="_blank">Magnet URI</a> | <a href="{{torrent.magnetURI}}" target="_blank">Magnet URI</a>
| <a href="{{torrent.oTorrentFileURL}}" target="_blank" download="{{torrent.fileName}}">.torrent</a> | <a href="{{torrent.oTorrentFileURL}}" target="_blank" download="{{torrent.fileName}}">.torrent</a>
<br><span class="subInfo">{{torrent.infoHash}}</span> <br><span class="subInfo"><i class="fa fa-hashtag"></i>{{torrent.infoHash}}</span>
</td> </td>
<td><i class="fa fa-times" ng-click="client.remove(torrent, destroyedTorrent)"></i></td>
</tr> </tr>
<tr ng-show="torrent.showFiles"> <tr ng-show="torrent.showFiles">
<td class="files" colspan="100"> <td class="files" colspan="100">
@ -90,7 +92,7 @@
</div> </div>
</div> </div>
<footer> <footer>
<small>Made in Bogotá, Colombia by <a href="http://diegorbaquero.com">DiegoRBaquero</a><br><small><a href="https://webtorrent.io">WebTorrent</a> is powered by JavaScript and WebRTC. Works in Chrome, Firefox, and Opera (desktop and Android).</small></p> Made in Bogotá, Colombia by <a href="http://diegorbaquero.com">DiegoRBaquero</a><br><small><a href="https://webtorrent.io">WebTorrent</a> is powered by JavaScript and WebRTC. Works in Chrome, Firefox, and Opera (desktop and Android).</small></p>
</footer> </footer>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>

16
style.css
View file

@ -3,6 +3,18 @@ body {
width: 100%; width: 100%;
} }
header, footer, .center {
text-align: center;
}
th, td {
padding-left: 10px;
padding-right: 10px;
max-width: 200px;
overflow: scroll;
white-space: nowrap;
}
.version { .version {
color: #ccc; color: #ccc;
font-size: 0.3em; font-size: 0.3em;
@ -18,9 +30,7 @@ body {
font-size: 0.7em; font-size: 0.7em;
} }
footer, .center {
text-align: center;
}
.column, .columns { .column, .columns {
margin-left: 1%; margin-left: 1%;