pick the best things from v2 branch

Author: midzer

assets/css/style.css

@@ -4,16 +4,16 @@
     --active-brightness: 0.85;
     --border-radius: 5px;
     --box-shadow: 2px 2px 10px;
-    --color-accent: #43afef15;
-    --color-bg: #43afef;
+    --color-accent: #cf431115;
+    --color-bg: #f7feda;
     --color-bg-secondary: #e9e9e9;
-    --color-link: #424242;
-    --color-secondary: #920de9;
-    --color-secondary-accent: #920de90b;
+    --color-link: #cf4311;
+    --color-secondary: #008820;
+    --color-secondary-accent: #0088200b;
     --color-shadow: #f4f4f4;
     --color-table: #424242;
-    --color-text: #193550;
-    --color-text-secondary: #eee;
+    --color-text: #000;
+    --color-text-secondary: #666;
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     --hover-brightness: 1.2;
     --justify-important: center;
@@ -27,16 +27,16 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-accent: #0097fc4f;
-        --color-bg: #193550;;
+        --color-accent: #cf53114f;
+        --color-bg: #0c0c1c;
         --color-bg-secondary: #555;
-        --color-link: #dfdfdf;
-        --color-secondary: #e20de9;
-        --color-secondary-accent: #e20de94f;
+        --color-link: #cf5311;
+        --color-secondary: #008820;
+        --color-secondary-accent: #0088204f;
         --color-shadow: #bbbbbb20;
         --color-table: #dfdfdf;
-        --color-text: #43afef;
-        --color-text-secondary: #aaa;
+        --color-text: #fff;
+        --color-text-secondary: #999;
     }
 }
 
@@ -518,6 +518,7 @@ video {
   padding: 0.75rem 1.5rem;
   border-radius: var(--border-radius);
   cursor: pointer;
+  margin-top: 1rem;
 }
 
 .progress {

assets/js/app.js

@@ -1,3 +1,14 @@
+function prettyBytes (num) {
+    const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const neg = num < 0;
+    if (neg) num = -num;
+    if (num < 1) return (neg ? '-' : '') + num + ' B';
+    const exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1);
+    const unit = units[exponent];
+    num = Number((num / Math.pow(1000, exponent)).toFixed(2));
+    return (neg ? '-' : '') + num + ' ' + unit;
+}
+
 function logError(err) {
     console.log(err.message);
 }
@@ -20,13 +31,14 @@ function createClient() {
     });
     client.on('error', logError);
     client.on('torrent', function(torrent) {
-        document.getElementById('note').textContent = `Keep this tab open and active while transfering "${torrent.name}".`;
+        document.getElementById('note').innerHTML = `Keep this tab active while <code id="status">${window.location.hash ? 'leeching' : 'seeding'}</code> <sup>${torrent.files.length}</sup> file(s).`;
     });
 
     return client;
 }
 
-function copyLink(btn) {
+function copyLink(event) {
+    const btn = event.target;
     navigator.clipboard.writeText(btn.previousElementSibling.value);
     btn.textContent = 'Copied';
     setTimeout(() => { btn.textContent = 'Copy'; }, 1337);
@@ -39,30 +51,30 @@ function downloadTorrent(infohash) {
 
 function addTorrent(torrent) {
     torrent.on('error', logError);
-    torrent.on('download', function(bytes) {
+    torrent.on('download', function() {
         throttle(function () {
             updateSpeed(torrent);
         }, 1000);
     });
-    torrent.on('upload', function(bytes) {
+    torrent.on('upload', function() {
         throttle(function () {
             updateSpeed(torrent);
         }, 1000);
     });
     torrent.on('done', () => {
         updateSpeed(torrent);
-        document.getElementById('status').textContent = 'done';
+        document.getElementById('status').textContent = 'seeding';
     });
     const torrentIds = torrent.magnetURI.split('&');
     const torId = torrentIds[0].split(':');
     const torHash = torId[3];
-    const torrentLog = `<label for="link">Share link:</label>
-              <input type="text" id="link" name="link" value="https://${window.location.host}/#${torHash}" readonly>
-              <button class="copy" onclick="copyLink(this)">Copy</button>`;
-    log('log', torrentLog);
-    const filesLog = `<label class="files-label"><sup>${torrent.files.length}</sup> file(s) <code id="status">${window.location.hash ? 'downloading' : 'seeding'}</code></label>
-              <ul class="file-list">
-              </ul>`;
+    const torrentShare = `<label for="link">Share link</label>
+        <input type="text" id="link" name="link" value="https://${window.location.host}/#${torHash}" readonly>
+        <button id="copy-btn">Copy</button>`;
+    log('share', torrentShare);
+    const filesLog = `
+        <ul class="file-list">
+        </ul>`;
     log('files', filesLog);
     torrent.files.forEach(file => {
         // Stream the file in the browser
@@ -74,31 +86,32 @@ function addTorrent(torrent) {
                 logError(err);
                 return;
             }
-            const a = document.createElement('a');
-            a.href = url;
-            a.textContent = file.name + ` (${prettierBytes(file.length)})`;
-            a.download = file.name;
-            const link = `<li><a href="${url}" download="${file.name}" onclick="this.classList.add('visited')">${file.name} <span class="file-size">${prettierBytes(file.length)} ↓</span></a></li>`;
-            document.getElementsByClassName('file-list')[0].insertAdjacentHTML('beforeEnd', link);
+            const li = document.createElement('li');
+            const link = document.createElement('a');
+            link.href = url;
+            link.textContent = file.name + ` (${prettyBytes(file.length)}) ↓`;
+            link.download = file.name;
+            li.appendChild(link);
+            document.querySelector('.file-list').appendChild(li);
         });
     });
+    document.getElementById('copy-btn').addEventListener('click', copyLink);
 }
 
 function updateSpeed(torrent) {
     const progress = (100 * torrent.progress).toFixed(0);
     const speed = `
-            <div class="transfer-info">
-              ${window.location.hash ? `<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Current download progress" style="width: ${progress}%;" aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">${progress}%</div>
-</div>` : ''}
-              <div>Peers: ${torrent.numPeers}</div>
-              <div>Download speed: ${prettierBytes(torrent.downloadSpeed)}/s</div>
-              <div>Upload speed: ${prettierBytes(torrent.uploadSpeed)}/s</div>
-              ${window.location.hash ? `<div class="text-truncate">Remaining: ${torrent.done ? 'done' : convertMS(torrent.timeRemaining)}</div>` : ''}
-            </div>
-      `
+        <div class="progress">
+            <div class="progress-bar" role="progressbar" aria-label="Current download progress" style="width: ${progress}%;" aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">${progress}%</div>
+        </div>
+        <div>Peers: ${torrent.numPeers}</div>
+        <div>Download speed: ${prettyBytes(torrent.downloadSpeed)}/s</div>
+        <div>Upload speed: ${prettyBytes(torrent.uploadSpeed)}/s</div>
+        ${window.location.hash ? `<div class="text-truncate">Remaining: ${torrent.done ? 'done' : convertMS(torrent.timeRemaining)}</div>` : ''}
+    `
     const speedInfo = document.getElementById('speed');
     speedInfo.innerHTML = speed;
+    speedInfo.hidden = false;
 }
 
 function convertMS(ms) {
@@ -128,8 +141,10 @@ function convertMS(ms) {
     return ret;
 }
 
-function log(id, element) {
-    document.getElementById(id).insertAdjacentHTML('afterBegin', element);
+function log(id, item) {
+    const element = document.getElementById(id);
+    element.insertAdjacentHTML('afterBegin', item);
+    element.hidden = false;
 }
 
 const announce = [
@@ -163,22 +178,17 @@ window.addEventListener('DOMContentLoaded', function() {
             downloadTorrent(hash);
 	    }
 	    else {
-	        noteElement.textContent = 'Please select file(s) to start seeding.';
 	        upElement.classList.add('show');
 	    }
     }
     else {
         noteElement.textContent = 'Sorry, WebRTC is not supported in your browser.';
     }
-    noteElement.classList.add('show');
 
-    uploadElement(document.getElementById('upload'), (err, results) => {
-        if (err) {
-	        logError(err);
-	        return;
-	    }
-	    const files = results.map(result => result.file);
-	    if (files.length) {
+    const fileInput = document.getElementById('upload');
+    fileInput.addEventListener('change', () => {
+        const files = fileInput.files;
+        if (files.length) {
 	        upElement.remove();
 	        noteElement.textContent = 'File hashing in progress, please wait...';
 	        const client = createClient();

assets/js/prettier-bytes.min.js

@@ -28,8 +28,6 @@
   <meta property="twitter:description" content="Peer-to-peer file sharing in your browser">
   <meta property="twitter:image" content="https://file.love/android-chrome-512x512.png">
   <script defer src='/assets/js/webtorrent.min.js'></script>
-  <script defer src='/assets/js/prettier-bytes.min.js'></script>
-  <script defer src='/assets/js/upload-element.min.js'></script>
   <script defer src="/assets/js/app.js"></script>
 </head>
 <body>
@@ -46,16 +44,20 @@ <h1><u>Minimal</u> p2p file transfer</h1>
   </header>
   <noscript>Sorry, this App needs JavaScript enabled to run properly.</noscript>
   <main>
+    <article>
+      <aside>
+        <p id="note">Select file(s) to start seeding.</p>
+      </aside>
+    </article>
     <section id="up" class="fade">
-      <label for="upload">Choose file(s)</label>
+      <label for="upload">Upload file(s) ↥</label>
       <input type="file" name="upload" id="upload" multiple hidden>
     </section>
     <section>
-      <aside id="note" class="fade"></aside>
+      <aside id="share" hidden></aside>
+      <aside id="speed" hidden></aside>
     </section>
-    <section id="log"></section>
     <section id="files"></section>
-    <section id="speed"></section>
     <section id="output"></section>
     <article id="faq">
       <h2>FAQ</h2>

assets/js/upload-element.min.js

@@ -1,4 +1,4 @@
-const version = '1.0.2';
+const version = '1.1.0';
 const cacheName = `filelove-${version}`;
 
 self.addEventListener('install', function(event) {
@@ -9,8 +9,6 @@ self.addEventListener('install', function(event) {
           '/index.html',
           '/assets/css/style.css',
           '/assets/js/webtorrent.min.js',
-          '/assets/js/prettier-bytes.min.js',
-          '/assets/js/upload-element.min.js',
           '/assets/js/app.js'
         ]
       );
@@ -46,4 +44,3 @@ self.addEventListener('activate', function(event) {
     })
   );
 });
-