Merge pull request #1 from leoherzog/v1.1

v1.1

bin/bundle.js

@@ -37957,6 +37957,7 @@ document.addEventListener('DOMContentLoaded', start);
 
 function start() {
 
+  // magnet input
   document.getElementById('magnet').addEventListener('keyup', function(event) {
     event.preventDefault();
     if (event.key === "Enter") {
@@ -37967,6 +37968,7 @@ function start() {
     }
   });
 
+  // torrent select button
   document.getElementById('torrent').addEventListener('change', function(event) {
     event.preventDefault();
     event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
@@ -37977,6 +37979,22 @@ function start() {
     });
   });
 
+  // body drag-and-drop torrent file support
+  document.addEventListener('dragover', function(event) {
+    event.preventDefault();
+  });
+
+  document.addEventListener('drop', function(event) {
+    event.preventDefault();
+    event.dataTransfer.items[0].getAsFile().arrayBuffer().then(function(arrayBuffer) {
+      source = "torrent-file";
+      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
+      sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
+      parse(Buffer.from(arrayBuffer));
+    });
+  });
+
+  // example buttons
   example1.addEventListener('click', function(event) {
     event.preventDefault();
     notyf.success("Parsing Ubuntu 20.04 Magnet URL");
@@ -37992,11 +38010,12 @@ function start() {
   example3.addEventListener('click', async function(event) {
     event.preventDefault();
     notyf.success("Parsing Jack Johnson Archive.org Torrent File");
-    let response = await fetch("jj2008-06-14.mk4_archive.torrent");
+    let response = await fetch("/ext/jj2008-06-14.mk4_archive.torrent");
     let arrayBuffer = await response.arrayBuffer();
     parse(Buffer.from(arrayBuffer));
   });
 
+  // share buttons
   let copyurl = new clipboard('#copyURL');
   copyurl.on('success', function(e) {
     notyf.success('Copied site URL to clipboard!');
@@ -38024,6 +38043,7 @@ function start() {
     console.warn(e);
   });
 
+  // details field listeners
   name.addEventListener('input', propertyChange);
   name.addEventListener('change', propertyChange);
   name.addEventListener('reset', propertyChange);
@@ -38161,9 +38181,17 @@ function display() {
   files.innerHTML = "";
   if (parsed.files && parsed.files.length) {
     getFiles.style.display = "none";
-    for (let file of parsed.files) {
+    if (parsed.files.length < 100) {
-      let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
+      for (let file of parsed.files) {
-      files.appendChild(createFileRow(icon, file.name, file.length));
+        let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
+        files.appendChild(createFileRow(icon, file.name, file.length));
+      }
+    } else {
+      for (let i = 0; i < 100; i++) {
+        let icon = getFontAwesomeIconForMimetype(mime.lookup(parsed.files[i].name));
+        files.appendChild(createFileRow(icon, parsed.files[i].name, parsed.files[i].length));
+      }
+      files.appendChild(createFileRow('', '...and another ' + (parsed.files.length - 100) + ' more files', ''));
     }
     files.appendChild(createFileRow('folder-tree', '', parsed.length));
     downloadTorrentTooltip.setContent('Download Torrent file');
@@ -38211,7 +38239,7 @@ function display() {
 function createFileRow(icon, name, size) {
   let row = document.createElement('tr');
   let iconcell = document.createElement('td');
-  iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
+  if (icon) iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
   row.appendChild(iconcell);
   let namecell = document.createElement('td');
   namecell.innerHTML = name;

index.html

@@ -14,8 +14,10 @@
   <link href="/favicon.ico" rel="icon" />
   <link href="/img/TorrentParts-Icon-1x.png" rel="icon" type="image/png" sizes="128x128" />
   <link href="/img/TorrentParts-Icon-2x.png" rel="icon" type="image/png" sizes="256x256" />
+  <link href="/img/TorrentParts-Icon-3x.png" rel="icon" type="image/png" sizes="512x512" />
   <link href="/img/TorrentParts-Icon-1x.png" rel="apple-touch-icon" type="image/png" sizes="128x128" />
   <link href="/img/TorrentParts-Icon-2x.png" rel="apple-touch-icon" type="image/png" sizes="256x256" />
+  <link href="/img/TorrentParts-Icon-3x.png" rel="apple-touch-icon" type="image/png" sizes="512x512" />
   <meta name="msapplication-TileColor" content="#102030" />
   <meta name="msapplication-TileImage" content="/img/TorrentParts-Icon-2x.png" />
   <meta property="og:image" content="/img/TorrentParts-Social.png" />
@@ -34,12 +36,12 @@
 
   <title>Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link</title>
 
-  <link href="style.css" rel="stylesheet" />
+  <link href="/src/style.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet" />
+  <link href="/ext/alata-latin-400.woff2" rel="preload" as="style">
-  <link href="notyf.min.css" rel="stylesheet" />
+  <link href="/ext/alata-latin-400.woff" rel="preload" as="style">
-  <script async src="https://kit.fontawesome.com/9ca49f101f.js"></script>
+  <script async src="/ext/fa.min.js"></script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>
-  <script src="notyf.min.js"></script>
+  <script src="/ext/notyf.min.js"></script>
 
   <script async defer src="https://www.googletagmanager.com/gtag/js?id=G-VT4953Z89H"></script>
   <script>
@@ -67,7 +69,7 @@
       Enter URL and press enter
     </label>
 
-    <input id="torrent" type="file" aria-label="Select Torrent file" />
+    <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
     <label for="torrent">
       <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
     </label>
@@ -205,10 +207,16 @@
   </div>
 
   <footer>
-    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank">v1.0</a>
+    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v1.1</a>
   </footer>
 
-  <script src="bundle.min.js"></script>
+  <script src="/bin/bundle.min.js"></script>
+
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => navigator.serviceWorker.register('/src/sw.js'));
+    }
+  </script>
 
 </body>
 

manifest.webmanifest

@@ -22,6 +22,11 @@
     {
       "src": "/img/TorrentParts-Icon-2x.png",
       "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/TorrentParts-Icon-3x.png",
+      "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"
     }

package.json

@@ -1,28 +1,28 @@
 {
   "name": "torrentparts",
-  "version": "0.0.1",
+  "version": "1.1",
   "description": "📑 A website to inspect and edit Torrent files and Magnet URLs",
-  "main": "bundle.js",
+  "main": "bin/bundle.js",
   "dependencies": {
-    "browserify": "latest",
+    "browserify": "^17.0.0",
-    "Buffer": "latest",
+    "bytes": "^3.1.0",
-    "bytes": "latest",
+    "clipboard": "^2.0.6",
-    "clipboard": "latest",
+    "mime-types": "^2.1.27",
-    "dropzone": "latest",
+    "parse-torrent": "^9.0.0",
-    "mime-types": "latest",
+    "tippy.js": "^6.2.7",
-    "parse-torrent": "latest",
+    "webtorrent": "^0.110.1"
-    "tippy.js": "latest",
-    "webtorrent": "latest"
   },
   "devDependencies": {
-    "notyf": "latest",
+    "buffer": "^5.2.1",
-    "terser": "latest",
+    "Buffer": "^0.0.0",
-    "watchify": "latest"
+    "notyf": "^3.9.0",
+    "terser": "^5.3.8",
+    "watchify": "^3.11.1"
   },
   "scripts": {
-    "watch": "watchify parse.js -o bundle.js",
+    "watch": "watchify src/parse.js -o bin/bundle.js",
-    "compile": "browserify parse.js -o bundle.js",
+    "compile": "browserify src/parse.js -o bin/bundle.js",
-    "minify": "terser bundle.js -c -m -o bundle.min.js",
+    "minify": "terser bin/bundle.js -c -m -o bin/bundle.min.js",
     "build": "npm run compile && npm run minify"
   },
   "repository": {

src/parse.js

@@ -79,6 +79,7 @@ document.addEventListener('DOMContentLoaded', start);
 
 function start() {
 
+  // magnet input
   document.getElementById('magnet').addEventListener('keyup', function(event) {
     event.preventDefault();
     if (event.key === "Enter") {
@@ -89,6 +90,7 @@ function start() {
     }
   });
 
+  // torrent select button
   document.getElementById('torrent').addEventListener('change', function(event) {
     event.preventDefault();
     event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
@@ -99,6 +101,22 @@ function start() {
     });
   });
 
+  // body drag-and-drop torrent file support
+  document.addEventListener('dragover', function(event) {
+    event.preventDefault();
+  });
+
+  document.addEventListener('drop', function(event) {
+    event.preventDefault();
+    event.dataTransfer.items[0].getAsFile().arrayBuffer().then(function(arrayBuffer) {
+      source = "torrent-file";
+      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
+      sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
+      parse(Buffer.from(arrayBuffer));
+    });
+  });
+
+  // example buttons
   example1.addEventListener('click', function(event) {
     event.preventDefault();
     notyf.success("Parsing Ubuntu 20.04 Magnet URL");
@@ -114,11 +132,12 @@ function start() {
   example3.addEventListener('click', async function(event) {
     event.preventDefault();
     notyf.success("Parsing Jack Johnson Archive.org Torrent File");
-    let response = await fetch("jj2008-06-14.mk4_archive.torrent");
+    let response = await fetch("/ext/jj2008-06-14.mk4_archive.torrent");
     let arrayBuffer = await response.arrayBuffer();
     parse(Buffer.from(arrayBuffer));
   });
 
+  // share buttons
   let copyurl = new clipboard('#copyURL');
   copyurl.on('success', function(e) {
     notyf.success('Copied site URL to clipboard!');
@@ -146,6 +165,7 @@ function start() {
     console.warn(e);
   });
 
+  // details field listeners
   name.addEventListener('input', propertyChange);
   name.addEventListener('change', propertyChange);
   name.addEventListener('reset', propertyChange);
@@ -283,9 +303,17 @@ function display() {
   files.innerHTML = "";
   if (parsed.files && parsed.files.length) {
     getFiles.style.display = "none";
-    for (let file of parsed.files) {
+    if (parsed.files.length < 100) {
-      let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
+      for (let file of parsed.files) {
-      files.appendChild(createFileRow(icon, file.name, file.length));
+        let icon = getFontAwesomeIconForMimetype(mime.lookup(file.name));
+        files.appendChild(createFileRow(icon, file.name, file.length));
+      }
+    } else {
+      for (let i = 0; i < 100; i++) {
+        let icon = getFontAwesomeIconForMimetype(mime.lookup(parsed.files[i].name));
+        files.appendChild(createFileRow(icon, parsed.files[i].name, parsed.files[i].length));
+      }
+      files.appendChild(createFileRow('', '...and another ' + (parsed.files.length - 100) + ' more files', ''));
     }
     files.appendChild(createFileRow('folder-tree', '', parsed.length));
     downloadTorrentTooltip.setContent('Download Torrent file');
@@ -333,7 +361,7 @@ function display() {
 function createFileRow(icon, name, size) {
   let row = document.createElement('tr');
   let iconcell = document.createElement('td');
-  iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
+  if (icon) iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
   row.appendChild(iconcell);
   let namecell = document.createElement('td');
   namecell.innerHTML = name;

src/sw.js

@@ -0,0 +1,33 @@
+const assets = [
+  '/',
+  '/index.html',
+  '/bin/bundle.min.js',
+  '/src/style.css',
+  '/ext/alata-latin-400.woff2',
+  '/ext/alata-latin-400.woff',
+  '/ext/fa.min.js',
+  '/ext/notyf.min.js',
+  '/ext/jj2008-06-14.mk4_archive.torrent'
+];
+
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('assets')
+      .then(function(cache) {
+        return cache.addAll(assets);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      }
+    )
+  );
+});