Continue to Refine Design

This commit is contained in:
Leo Herzog
2020-11-09 14:44:01 -05:00
parent 852481eb0d
commit 9365ab1338
5 changed files with 77 additions and 52 deletions

View File

@@ -33752,13 +33752,14 @@ function start() {
if (window.location.hash) { if (window.location.hash) {
originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>'; originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>';
originalSourceIcon.title = 'Originally sourced from Magnet URL in the address bar of this site'; originalSourceIcon.title = 'Originally sourced from shared torrent.parts link';
parse(window.location.hash.split('#')[1]); parse(window.location.hash.split('#')[1]);
} }
} }
function parse(toLoad) { function parse(toLoad) {
resetProperties();
try { try {
console.info("Attempting parse"); console.info("Attempting parse");
parsed = parser(toLoad); parsed = parser(toLoad);
@@ -33794,15 +33795,15 @@ function display() {
resetProperties(); resetProperties();
hash.value = parsed.infoHash; hash.value = parsed.infoHash;
name.value = parsed.name || ""; name.value = parsed.name ? parsed.name : "";
if (parsed.created) { if (parsed.created) {
created.value = parsed.created.toISOString().slice(0, 19); created.value = parsed.created.toISOString().slice(0, 19);
created.type = "datetime-local"; created.type = "datetime-local";
} else { } else {
created.type = "text"; created.type = "text";
} }
createdBy.value = "by " + parsed.createdBy || ""; createdBy.value = parsed.createdBy ? "by " + parsed.createdBy : "";
comment.value = parsed.comment || ""; comment.value = parsed.comment ? parsed.comment : "";
announce.innerHTML = ""; announce.innerHTML = "";
if (parsed.announce && parsed.announce.length) { if (parsed.announce && parsed.announce.length) {
@@ -33817,9 +33818,9 @@ function display() {
tracker.dataset.group = 'announce'; tracker.dataset.group = 'announce';
tracker.addEventListener('input', propertyChange); tracker.addEventListener('input', propertyChange);
row.appendChild(tracker); row.appendChild(tracker);
let remove = document.createElement('button'); let remove = document.createElement('a');
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="fas fa-minus"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
announce.appendChild(row); announce.appendChild(row);
@@ -33854,7 +33855,7 @@ function display() {
files.innerHTML = ""; files.innerHTML = "";
if (parsed.files && parsed.files.length) { if (parsed.files && parsed.files.length) {
getFiles.disabled = true; getFiles.style.display = "none";
for (let file of parsed.files) { for (let file of parsed.files) {
let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name)); let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
files.appendChild(createFileRow(icon, file.name, file.length)); files.appendChild(createFileRow(icon, file.name, file.length));
@@ -33863,8 +33864,12 @@ function display() {
downloadTorrent.addEventListener('click', saveTorrent); downloadTorrent.addEventListener('click', saveTorrent);
downloadTorrent.disabled = false; downloadTorrent.disabled = false;
} else { } else {
getFiles.disabled = false; getFiles.style.display = "block";
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>"; if (client.torrents.length > 0) {
files.innerHTML = "<em>Attempting fetching files from Webtorrent...</em>";
} else {
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>";
}
downloadTorrent.removeEventListener('click', saveTorrent); downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true; downloadTorrent.disabled = true;
} }
@@ -33940,9 +33945,9 @@ function getFontAwesomeIconForMimetype(mimetype) {
function propertyChange(e) { function propertyChange(e) {
if (this.dataset.group) { if (this.dataset.group) {
parsed[this.dataset.group][this.dataset.index] = this.value || ""; parsed[this.dataset.group][this.dataset.index] = this.value ? this.value : "";
} else { } else {
parsed[this.id] = this.value || ""; parsed[this.id] = this.value ? this.value : "";
} }
window.location.hash = parser.toMagnetURI(parsed); window.location.hash = parser.toMagnetURI(parsed);
updateModified(); updateModified();
@@ -33960,8 +33965,7 @@ function resetProperties() {
announce.innerHTML = ""; announce.innerHTML = "";
urlList.innerHTML = ""; urlList.innerHTML = "";
client.torrents.forEach(torrent => torrent.destroy()); client.torrents.forEach(torrent => torrent.destroy());
getFiles.disabled = false; getFiles.style.display = "block";
getFiles.innerHTML = '<span class="fad fa-chart-network"></span>';
files.innerHTML = ""; files.innerHTML = "";
window.location.hash = ""; window.location.hash = "";
copyURL.setAttribute('data-clipboard-text', ""); copyURL.setAttribute('data-clipboard-text', "");
@@ -34008,29 +34012,34 @@ function removeAllRows(type) {
function updateModified() { function updateModified() {
parsed.created = new Date(); parsed.created = new Date();
parsed.createdBy = "Torrent Parts <https://torrent.parts/>"; parsed.createdBy = "Torrent Parts <https://torrent.parts/>";
if (parsed.created) {
created.value = parsed.created.toISOString().slice(0, 19);
created.type = "datetime-local";
} else {
created.type = "text";
}
createdBy.value = parsed.createdBy ? "by " + parsed.createdBy : "";
} }
function getFilesFromPeers() { function getFilesFromPeers() {
console.info("Attempting fetching files from Webtorrent"); console.info("Attempting fetching files from Webtorrent...");
getFiles.style.display = "none";
parsed.announce.push("wss://tracker.webtorrent.io"); parsed.announce.push("wss://tracker.webtorrent.io");
parsed.announce.push("wss://tracker.openwebtorrent.com"); parsed.announce.push("wss://tracker.openwebtorrent.com");
parsed.announce.push("wss://tracker.btorrent.xyz"); parsed.announce.push("wss://tracker.btorrent.xyz");
parsed.announce.push("wss://tracker.fastcast.nz"); parsed.announce.push("wss://tracker.fastcast.nz");
parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
display();
getFiles.disabled = true;
getFiles.innerHTML = '<span class="fa-blink fad fa-chart-network"></span>';
client.add(parser.toMagnetURI(parsed), (torrent) => { client.add(parser.toMagnetURI(parsed), (torrent) => {
parsed.info = Object.assign({}, torrent.info); // clone object parsed.info = Object.assign({}, torrent.info); // clone object
parsed.files = torrent.files; parsed.files = torrent.files;
parsed.infoBuffer = torrent.infoBuffer; parsed.infoBuffer = torrent.infoBuffer;
parsed.length = torrent.length; parsed.length = torrent.length;
parsed.lastPieceLength = torrent.lastPieceLength; parsed.lastPieceLength = torrent.lastPieceLength;
getFiles.innerHTML = '<span class="fad fa-chart-network"></span>';
updateModified(); updateModified();
display(); display();
torrent.destroy(); torrent.destroy();
}); });
display();
} }
// https://stackoverflow.com/a/36899900/2700296 // https://stackoverflow.com/a/36899900/2700296

8
bundle.min.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -102,13 +102,12 @@
<div class="property"> <div class="property">
<div> <div>
<label for="urlList">Webseed URLs</label> <label for="urlList">Webseed URLs</label>
<button id="removeWebseeds"> <br />
<span class="fas fa-eraser"></span> <a id="removeWebseeds">Remove All</a>
</button>
</div> </div>
<div> <div>
<button id="addWebseed" data-type="urlList"> <button id="addWebseed" data-type="urlList">
<span class="far fa-plus-circle"></span> Add Tracker <span class="far fa-plus-circle"></span> Add Webseed
</button> </button>
<div id="urlList"></div> <div id="urlList"></div>
</div> </div>
@@ -117,9 +116,7 @@
<div class="property"> <div class="property">
<div> <div>
<label for="files">Files</label> <label for="files">Files</label>
<button id="getFiles"> <a id="getFiles">Attempt to Fetch Files from WebTorrent</a>
<span class="fad fa-chart-network"></span>
</button>
</div> </div>
<table id="files"> <table id="files">
<tbody id="filesBody"></tbody> <tbody id="filesBody"></tbody>
@@ -128,7 +125,7 @@
</div> </div>
<script src="bundle.min.js"></script> <script src="bundle.js"></script>
</body> </body>

View File

@@ -89,13 +89,14 @@ function start() {
if (window.location.hash) { if (window.location.hash) {
originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>'; originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>';
originalSourceIcon.title = 'Originally sourced from Magnet URL in the address bar of this site'; originalSourceIcon.title = 'Originally sourced from shared torrent.parts link';
parse(window.location.hash.split('#')[1]); parse(window.location.hash.split('#')[1]);
} }
} }
function parse(toLoad) { function parse(toLoad) {
resetProperties();
try { try {
console.info("Attempting parse"); console.info("Attempting parse");
parsed = parser(toLoad); parsed = parser(toLoad);
@@ -131,15 +132,15 @@ function display() {
resetProperties(); resetProperties();
hash.value = parsed.infoHash; hash.value = parsed.infoHash;
name.value = parsed.name || ""; name.value = parsed.name ? parsed.name : "";
if (parsed.created) { if (parsed.created) {
created.value = parsed.created.toISOString().slice(0, 19); created.value = parsed.created.toISOString().slice(0, 19);
created.type = "datetime-local"; created.type = "datetime-local";
} else { } else {
created.type = "text"; created.type = "text";
} }
createdBy.value = "by " + parsed.createdBy || ""; createdBy.value = parsed.createdBy ? "by " + parsed.createdBy : "";
comment.value = parsed.comment || ""; comment.value = parsed.comment ? parsed.comment : "";
announce.innerHTML = ""; announce.innerHTML = "";
if (parsed.announce && parsed.announce.length) { if (parsed.announce && parsed.announce.length) {
@@ -154,9 +155,9 @@ function display() {
tracker.dataset.group = 'announce'; tracker.dataset.group = 'announce';
tracker.addEventListener('input', propertyChange); tracker.addEventListener('input', propertyChange);
row.appendChild(tracker); row.appendChild(tracker);
let remove = document.createElement('button'); let remove = document.createElement('a');
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="fas fa-minus"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
announce.appendChild(row); announce.appendChild(row);
@@ -191,7 +192,7 @@ function display() {
files.innerHTML = ""; files.innerHTML = "";
if (parsed.files && parsed.files.length) { if (parsed.files && parsed.files.length) {
getFiles.disabled = true; getFiles.style.display = "none";
for (let file of parsed.files) { for (let file of parsed.files) {
let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name)); let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
files.appendChild(createFileRow(icon, file.name, file.length)); files.appendChild(createFileRow(icon, file.name, file.length));
@@ -200,8 +201,12 @@ function display() {
downloadTorrent.addEventListener('click', saveTorrent); downloadTorrent.addEventListener('click', saveTorrent);
downloadTorrent.disabled = false; downloadTorrent.disabled = false;
} else { } else {
getFiles.disabled = false; getFiles.style.display = "block";
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>"; if (client.torrents.length > 0) {
files.innerHTML = "<em>Attempting fetching files from Webtorrent...</em>";
} else {
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>";
}
downloadTorrent.removeEventListener('click', saveTorrent); downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true; downloadTorrent.disabled = true;
} }
@@ -277,9 +282,9 @@ function getFontAwesomeIconForMimetype(mimetype) {
function propertyChange(e) { function propertyChange(e) {
if (this.dataset.group) { if (this.dataset.group) {
parsed[this.dataset.group][this.dataset.index] = this.value || ""; parsed[this.dataset.group][this.dataset.index] = this.value ? this.value : "";
} else { } else {
parsed[this.id] = this.value || ""; parsed[this.id] = this.value ? this.value : "";
} }
window.location.hash = parser.toMagnetURI(parsed); window.location.hash = parser.toMagnetURI(parsed);
updateModified(); updateModified();
@@ -297,8 +302,7 @@ function resetProperties() {
announce.innerHTML = ""; announce.innerHTML = "";
urlList.innerHTML = ""; urlList.innerHTML = "";
client.torrents.forEach(torrent => torrent.destroy()); client.torrents.forEach(torrent => torrent.destroy());
getFiles.disabled = false; getFiles.style.display = "block";
getFiles.innerHTML = '<span class="fad fa-chart-network"></span>';
files.innerHTML = ""; files.innerHTML = "";
window.location.hash = ""; window.location.hash = "";
copyURL.setAttribute('data-clipboard-text', ""); copyURL.setAttribute('data-clipboard-text', "");
@@ -345,29 +349,34 @@ function removeAllRows(type) {
function updateModified() { function updateModified() {
parsed.created = new Date(); parsed.created = new Date();
parsed.createdBy = "Torrent Parts <https://torrent.parts/>"; parsed.createdBy = "Torrent Parts <https://torrent.parts/>";
if (parsed.created) {
created.value = parsed.created.toISOString().slice(0, 19);
created.type = "datetime-local";
} else {
created.type = "text";
}
createdBy.value = parsed.createdBy ? "by " + parsed.createdBy : "";
} }
function getFilesFromPeers() { function getFilesFromPeers() {
console.info("Attempting fetching files from Webtorrent"); console.info("Attempting fetching files from Webtorrent...");
getFiles.style.display = "none";
parsed.announce.push("wss://tracker.webtorrent.io"); parsed.announce.push("wss://tracker.webtorrent.io");
parsed.announce.push("wss://tracker.openwebtorrent.com"); parsed.announce.push("wss://tracker.openwebtorrent.com");
parsed.announce.push("wss://tracker.btorrent.xyz"); parsed.announce.push("wss://tracker.btorrent.xyz");
parsed.announce.push("wss://tracker.fastcast.nz"); parsed.announce.push("wss://tracker.fastcast.nz");
parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
display();
getFiles.disabled = true;
getFiles.innerHTML = '<span class="fa-blink fad fa-chart-network"></span>';
client.add(parser.toMagnetURI(parsed), (torrent) => { client.add(parser.toMagnetURI(parsed), (torrent) => {
parsed.info = Object.assign({}, torrent.info); // clone object parsed.info = Object.assign({}, torrent.info); // clone object
parsed.files = torrent.files; parsed.files = torrent.files;
parsed.infoBuffer = torrent.infoBuffer; parsed.infoBuffer = torrent.infoBuffer;
parsed.length = torrent.length; parsed.length = torrent.length;
parsed.lastPieceLength = torrent.lastPieceLength; parsed.lastPieceLength = torrent.lastPieceLength;
getFiles.innerHTML = '<span class="fad fa-chart-network"></span>';
updateModified(); updateModified();
display(); display();
torrent.destroy(); torrent.destroy();
}); });
display();
} }
// https://stackoverflow.com/a/36899900/2700296 // https://stackoverflow.com/a/36899900/2700296

View File

@@ -8,6 +8,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
--accent: #63A079; --accent: #63A079;
--grey: #BDBDBD; --grey: #BDBDBD;
--white: #FFF; --white: #FFF;
background: #24384D;
} }
body { body {
@@ -16,6 +17,7 @@ body {
font-family: 'Alata', sans-serif; font-family: 'Alata', sans-serif;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
overflow-x: hidden;
} }
input { input {
@@ -52,17 +54,19 @@ button {
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 900px; border-radius: 900px;
text-align: center; text-align: left;
margin: auto; margin: auto;
cursor: pointer; cursor: pointer;
} }
button:disabled { button:disabled {
filter: brightness(0.6); filter: brightness(0.6);
cursor: not-allowed;
} }
a { a {
cursor: pointer; cursor: pointer;
text-decoration: underline;
} }
header { header {
@@ -170,13 +174,17 @@ input {
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 900px; border-radius: 900px;
text-align: left;
cursor: pointer; cursor: pointer;
} }
#announce > *, #urlList > * {
margin: 4px 0;
}
@media (max-width: 1080px) { @media (max-width: 1080px) {
#reset { #reset {
width: auto;
top: 0px; top: 0px;
right: 8px; right: 8px;
} }
@@ -192,6 +200,7 @@ input {
} }
#download > * { #download > * {
width: auto;
margin: 0 4px; margin: 0 4px;
} }
@@ -211,7 +220,7 @@ input {
#properties { #properties {
margin: 0; margin: 0;
padding: 0 2vw; padding: 0 2vw;
width: 96vw; width: 95vw;
} }
.property { .property {
@@ -225,7 +234,8 @@ input {
margin: 8px 0; margin: 8px 0;
} }
input { input, button, #addTracker, #addWebseed {
width: 95vw;
text-align: center; text-align: center;
} }