Files
tpbproxy/public/partial/header.html
2025-11-17 13:34:35 -05:00

548 lines
15 KiB
HTML

<link rel="stylesheet" href="/__static-modules/jquery-ui/dist/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script src='/__static-modules/mustache/mustache.min.js'></script>
<script src="/__static/lib/js/jq-repeat.js"></script>
<script src="/__static-modules/moment/min/moment-with-locales.min.js"></script>
<script src="/__static-modules/jquery-ui/dist/jquery-ui.min.js"></script>
<script src="/__static/js/app.js"></script>
<style type="text/css">
.ui-dialog{
padding: 0;
}
.ui-dialog .ui-dialog-title{
width: unset;
}
#tbp_proxy_header {
position: fixed;
top: 0;
width: 100%;
z-index: 95;
background: lightblue;
height: 3em;
text-align: initial;
padding-top: .5em;
padding-right: 1em;
}
#tbp_proxy_header_right{
margin-right: 2em;
float: right;
display: flex;
align-items:center;
}
#tbp_proxy_torrent_dialog_opener{
border-radius: 25px;
background: lightseagreen;
display: flex;
align-items:center;
padding: 1em;
padding-top: .3em;
padding-bottom: .3em;
margin-right: .5em;
}
#header {
padding-top: 3.5em;
}
</style>
<!--
Dialog boxes to be displayed
Login Dialog
-->
<div id="tbp_proxy_login_dialog" title="SSO Login">
<div class="shadow-lg card">
<div class="card-header shadow actionMessage" style="display:none"></div>
<div class="card-body">
<form action="auth/login" onsubmit="formAJAX(this)" evalAJAX="
app.auth.setToken(data.token);
app.auth.logInRedirect();
">
<input type="hidden" name="redirect" value="<%= redirect %>">
<div class="form-group">
<label class="control-label">User name</label>
<div class="input-group mb-3 shadow">
<div class="input-group-prepend">
<span class="input-group-text" ><i class="fa-solid fa-user-tie"></i></span>
</div>
<input type="text" name="uid" class="form-control" placeholder="jsmith" />
</div>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<div class="input-group mb-3 shadow">
<div class="input-group-prepend">
<span class="input-group-text" ><i class="fa-solid fa-key"></i></span>
</div>
<input type="password" name="password" class="form-control" placeholder="hunter123!"/>
</div>
</div>
<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i> Log in</button>
</form>
</div>
</div>
</div>
<!--
Torrent List Dialog
-->
<style type="text/css">
#tbp_proxy_torrent_dialog{
padding: 0;
}
#tbp_proxy_torrent_dialog progress{
width: 100%;
height: 2em;
}
#tbp_proxy_torrent_dialog ul{
height: 400px;
/*overflow-y: scroll;*/
list-style-type: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
#tbp_proxy_torrent_dialog li{
padding-left: 1em;
padding-right: 1em;
}
#tbp_proxy_torrent_dialog li p{
margin: .3em;
}
</style>
<div id="tbp_proxy_torrent_dialog" title="Torrents">
<ul>
<li jq-repeat="tbp_proxy_torrent_dialog_torrents" jq-repeat-index="hashString">
<p>
<b>{{name}}</b> - <i>{{statusText}}</i>
</p>
<p>
Is <b>{{sizeWhenDone}}</b>
saved to <b>{{downloadDir}}</b>
added by <b>{{added_by}}</b>
<b>{{createdAtString}}</b>
</p>
{{^isFinished}}
<p>
<progress id="file" max="100" value="{{percentDone}}">{{percentDone}}%</progress>
</p>
{{#isActive}}
<p>
<b>{{rateDownload}}</b>
Finishing <b>{{eta}}</b>
From <b>{{peersConnected}}</b> Peers
</p>
<button class="ui-button ui-widget ui-corner-all" onclick="app.torrent.stop({{hashString}})">
<span class="ui-icon ui-icon-pause"></span>Pause
</button>
{{/isActive}}
{{^isActive}}
<button class="ui-button ui-widget ui-corner-all" onclick="app.torrent.start({{hashString}})">
<span class="ui-icon ui-icon-play"></span> Start
</button>
{{/isActive}}
<button class="ui-button ui-widget ui-corner-all" onclick="
app.torrent.destroy({{hashString}}, function(error, data){
$.scope.tbp_proxy_torrent_dialog_torrents.splice({{__id}}, 1);
});
">
<span class="ui-icon ui-icon-closethick"></span>Delete
</button>
</p>
{{/isFinished}}
{{#errorString}}
<p>
<b>{{errorString}}</b>
</p>
{{/errorString}}
{{#isFinished}}
<p>
Done! <a href="https://stuff.718it.biz/torrents/{{name}}" target="_blank"> HTTP Link</a>
</p>
{{/isFinished}}
<hr />
</li>
<li jq-repeat-defualt="tbp_proxy_torrent_dialog_torrents">
<h3> No Torrents...</h3>
<hr width="300pt" />
</li>
</ul>
</div>
<!--
Torrent Add Dialog
-->
<style type="text/css">
#tbp_proxy_torrent_add_dialog_container{
width: 32em;
}
#tbp_proxy_torrent_add_dialog input[type="text"]{
width: 90%;
}
#tbp_proxy_torrent_add_dialog label,legend{
font-weight: bold;
}
</style>
<div id="tbp_proxy_torrent_add_dialog" title="Add torrent">
<div id="tbp_proxy_torrent_add_dialog_container" class='card'>
<div class="card-header shadow actionMessage" style="display:none"></div>
<div jq-repeat="torrentAdd">
<form action="torrent" method="post" onsubmit="formAJAX(this)" evalAJAX="
app.publish('torrent:add', {...data, __noSocket: true});
$('#tbp_proxy_torrent_add_dialog').dialog('close');
openDialog($('#tbp_proxy_torrent_dialog'));
savePrivateState(data, this);
">
<p>
<label for="_name">Name:</label>
<br />
<input type="text" name="_name" value="{{{name}}}" readonly/>
</p>
<p>
<label for="magnetLink">Magnet Link:</label>
<br />
<input type="text" name="magnetLink" value="{{{magnetLink}}}" readonly/>
</p>
<p>
<label for="hashString">Hash:</label>
<br />
<input type="text" name="hashString" value="{{{hashString}}}" readonly/>
</p>
<p>
<label for="isPrivate-false" title="The download will appare in the communal download folder">Public:</label>
<input type="radio" name="isPrivate" id="isPrivate-false" value="false" />
<label for="isPrivate-true" title="Only you(and the admins) will be able to see this download">Private:</label>
<input type="radio" name="isPrivate" id="isPrivate-true" value="true" />
</p>
<p style="display:none">
<legend>Start on add:</legend>
<label for="isStart-1" title="The download will appare in the communal download folder">Yes</label>
<input type="radio" name="isStart" id="isStart-1" value="true" checked readonly/>
<label for="isStart-2" title="Only you(and the admins) will be able to see this download">No</label>
<input type="radio" name="isStart" id="isStart-2" value="false" readonly/>
</p>
<hr />
<button type="submit">Start Download</button>
<button type="reset" onclick="$('#tbp_proxy_torrent_add_dialog').dialog('close')">Cancel</button>
</form>
</div>
</div>
</div>
<!--
Injected Header bar
-->
<div id="tbp_proxy_header_right">
<span id="tbp_proxy_torrent_dialog_opener" class="tbp_proxy_is_authed">
<img src="/__static/img/Transmission_Icon.svg" height="22" width="22" style="margin-right: .3em;" />
<span jq-repeat="tbp_proxy_torrent_dialog_opener_status">
<b> <span class="ui-icon ui-icon-arrowthick-1-s"></span>{{downloadSpeed}} <span class="ui-icon ui-icon-arrowthick-1-n"></span>{{uploadSpeed}}</b>
</span>
</span>
<button id="tbp_proxy_login_dialog_opener" class="tbp_proxy_not_authed ui-button ui-corner-all ui-widget">Login</button>
<button class="tbp_proxy_is_authed ui-button ui-corner-all ui-widget"
onclick="app.auth.logOut(e => window.location.href='/')">Logout</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var commonDialogOptions = {
position: { my: 'left top', at: 'left bottom', of: '#tbp_proxy_header_right' },
autoOpen: false,
resizable: false,
closeOnEscape: true,
draggable: false,
// maxWidth: document.body.clientWidth,
// width: 'auto',
};
/* Login Button and dialog*/
$('#tbp_proxy_login_dialog').dialog(commonDialogOptions);
$('#tbp_proxy_login_dialog_opener').on('click', function() {
openDialog($('#tbp_proxy_login_dialog'));
});
/* Torrent list button and dialog */
$('#tbp_proxy_torrent_dialog').dialog(commonDialogOptions);
$('#tbp_proxy_torrent_dialog_opener').on('click', function() {
if($('#tbp_proxy_torrent_dialog').dialog('isOpen')){
$('#tbp_proxy_torrent_dialog').dialog('close')
}else{
openDialog($('#tbp_proxy_torrent_dialog'));
}
});
/* Torrent add button and dialog */
$('#tbp_proxy_torrent_add_dialog').dialog(commonDialogOptions);
/* Enable tooltips*/
$('#tbp_proxy_header').tooltip({
track: true
});
app.auth.isLoggedIn(function(error, data){
if(data){
$('body').on('click', 'img.718link', function(event){
// magnetLink
let magnetLinkParams = new URLSearchParams($(this).data('link'));
$.scope.torrentAdd.update({
magnetLink: $(this).data('link'),
name: magnetLinkParams.get('dn'),
hashString: magnetLinkParams.get('magnet:?xt').split(':').pop().toLowerCase(),
});
if(localStorage.getItem('isPrivate') === 'true'){
$('#isPrivate-true').prop('checked', true);
}else{
$('#isPrivate-false').prop('checked', true);
}
openDialog($('#tbp_proxy_torrent_add_dialog'));
});
// Look for
$('a').each(function(idx, el){
var $el = $(el);
if($el.attr('href') && $el.attr('href').match('magnet:?')){
$el.before(`<img class="tbp_proxy_is_authed 718link" src="/__static/img/Transmission_Icon.svg" height=24 width=24 data-link="${$el.attr('href')}"/>`)
}
});
app.subscribe('torrent:add', function(data, topic){
$.scope.tbp_proxy_torrent_dialog_torrents.unshift(app.torrent.parseTorrnetItem(data))
});
app.subscribe('torrent:server:status', function(data, topic){
app.torrent.isDown = false
$('#tbp_proxy_torrent_dialog_opener').css('background', 'lightseagreen')
$.scope.tbp_proxy_torrent_dialog_opener_status.update(app.torrent.parseServerStatus(data));
});
app.subscribe('app:api:error:555', function(data, topics){
app.torrent.isDown = true
$('#tbp_proxy_torrent_dialog_opener').css('background', 'red')
});
app.subscribe('torrent:server:status:down', function(data, topic){
app.torrent.isDown = true
$('#tbp_proxy_torrent_dialog_opener').css('background', 'red')
});
listTorrents();
setInterval(refreshTorrents, 1000);
app.torrent.migrate();
}
});
});
function savePrivateState(data){
localStorage.setItem('isPrivate', data.isPrivate);
if(data.isPrivate){
$('#isPrivate-true').prop('checked', true);
} else {
$('#isPrivate-false').prop('checked', true);
}
}
function humanFileSize(size) {
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
}
function openDialog($el){
// https://stackoverflow.com/a/6500385
$el.parent().css({
position: 'fixed',
'margin-right': '2em',
'margin-top': '3em'
}).end().dialog('open');
}
function listTorrents(){
app.torrent.list(function(err, data){
for(let torrent of data.results){
$.scope.tbp_proxy_torrent_dialog_torrents.push(app.torrent.parseTorrnetItem(torrent))
if(torrent.percentDone !== 1) app.torrent.get(function(error, torrent){
$.scope.tbp_proxy_torrent_dialog_torrents.update('hashString', torrent.result.hashString, app.torrent.parseTorrnetItem(torrent.result))
} , torrent.hashString, true)
}
});
};
function refreshTorrents(){
for(let torrent of $.scope.tbp_proxy_torrent_dialog_torrents){
if(!torrent.isFinished){
app.torrent.get(function(error, torrent){
$.scope.tbp_proxy_torrent_dialog_torrents.update('hashString', torrent.result.hashString, app.torrent.parseTorrnetItem(torrent.result))
} , torrent.hashString, true)
}
}
}
app.torrent = (function(app){
let isDown = false;
// Dont spam the server if its not online
$(document).on('ajaxSend', function(event, ajax, res, ...args) {
if(res.url.startsWith('/__api/torrent') && isDown){
ajax.abort();
}
});
statusMap = [
'Inactive', // 0
'CHECK_WAIT', // 1
'Verifying', // 2
'DOWNLOAD_WAIT', // 3
'Downloading', // 4
'SEED_WAIT', // 5
'Seeding', // 6
'ISOLATED', // 7
'Unknown', // 8
];
function list(callback, username) {
app.api.get('torrent', function(error, data){
if(error) return;
callback(null, data)
});
}
function get(callback, hashString, forceUpdate){
app.api.get(`torrent/${hashString}?${forceUpdate ? 'latest': '' }`, function(error, data){
if(error) return;
callback(null, data)
});
}
function start(hashString, callback){
app.api.post(`torrent/${hashString}/start`, function(error, data){
if(error) return;
callback(null, data)
});
}
function stop(hashString, callback){
app.api.post(`torrent/${hashString}/stop`, function(error, data){
if(error) return;
callback(null, data)
});
}
function destroy(hashString, callback){
app.api.delete(`torrent/${hashString}`, function(error, data){
if(error) return;
callback(null, data)
});
}
function parseServerStatus(data){
return {
...data,
"downloadSpeed": humanFileSize(data.downloadSpeed)+'/s',
"uploadSpeed": humanFileSize(data.uploadSpeed)+'/s',
/* 'activeTorrentCount": 11,
"cumulative-stats": {
"downloadedBytes": 2925927098021,
"filesAdded": 80609,
"secondsActive": 12136579,
"sessionCount": 21,
"uploadedBytes": 107123787853
},
"current-stats": {
"downloadedBytes": 48440590262,
"filesAdded": 544,
"secondsActive": 111907,
"sessionCount": 1,
"uploadedBytes": 461874022
},
"pausedTorrentCount": 462,
"torrentCount": 473,
"__noSocket": true*/
}
}
function parseTorrnetItem(torrent){
let percentDone = (torrent.percentDone || 0)*100;
return {
...torrent,
"eta": torrent.eta > 0 ? moment().seconds(torrent.eta).fromNow() : 'Unknown',
"rateDownload": `${humanFileSize(torrent.rateDownload)}/s`,
"sizeWhenDone": humanFileSize(torrent.sizeWhenDone),
"percentDone": percentDone,
"statusText": statusMap[torrent.status],
"isActive": [3, 4, 5, 6].includes(torrent.status), // DOWNLOAD_WAIT ,DOWNLOAD, SEED_WAIT, SEED
"isFinished": torrent.isFinished || percentDone === 100,
"createdAtString": moment(torrent.createdAt).fromNow(),
}
}
function migrate(){
let torrents = JSON.parse(window.localStorage.getItem('torrents') || '{}').list || [];
if(torrents.length){
console.log(`Migrating ${torrents.length}`)
for(let torrent of torrents){
app.api.post(`torrent/${torrent.hashString}`, {}, function(error, torrent) {
if(Object.keys(torrent).length){
$.scope.tbp_proxy_torrent_dialog_torrents.unshift(app.torrent.parseTorrnetItem(torrent))
}
});
}
localStorage.removeItem('torrents',);
}
}
return {list, get, start, stop, destroy, migrate, parseTorrnetItem, parseServerStatus, isDown};
})(app);
</script>