From a4068f062ff21cb81b893025bcd037ca4b2d80e9 Mon Sep 17 00:00:00 2001
From: Julian Gruber <julian@juliangruber.com>
Date: Thu, 23 Feb 2017 15:45:10 +0100
Subject: [PATCH] add progress text and network speeds (#268)

* add WIP progress text

* refactor

* replace ... with ellipsis character

* style download speed stats
---
 elements/status.js  | 41 ++++++++++++++++++++++++++++++++---------
 elements/table.js   | 13 ++++++++-----
 lib/auto-updater.js |  5 ++---
 lib/browserify.js   |  2 +-
 package.json        |  2 +-
 5 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/elements/status.js b/elements/status.js
index 9c3a18c6..e2e0cba0 100644
--- a/elements/status.js
+++ b/elements/status.js
@@ -9,8 +9,7 @@ const progressbar = css`
 
     min-width: 8rem;
     overflow: hidden;
-    padding-top: .85rem;
-    padding-bottom: .5rem;
+    padding-top: .4rem;
     .bar {
       height: var(--progress-height);
       width: calc(100% - var(--counter-width));
@@ -72,25 +71,49 @@ const progressbar = css`
     }
   }
 `
+
+const progressSubline = css`
+  :host {
+    .arrow {
+      vertical-align: top;
+    }
+  }
+`
+
 module.exports = function (dat, stats, send) {
   if (dat.owner && dat.importer) {
-    return html`<div>Watching for updates...</div>`
+    return html`<div>Watching for updates…</div>`
   }
   var progressbarLine = (stats.state === 'loading')
     ? 'line-loading'
     : (stats.state === 'paused')
       ? 'line-paused'
       : 'line-complete'
+  var netStats = dat.stats.network
+  var progressText = (stats.progress === 100)
+    ? `Complete. ↑ ${speed(dat.network.uploadSpeed)}`
+    : (dat.network.connected) ? html`<span><span class="arrow">↓</span> ${speed(netStats.downloadSpeed)}<span class="arrow ml2">↑</span> ${speed(netStats.uploadSpeed)}</span>`
+    : 'waiting for peers…'
+  function speed (n) {
+    return `${n || 0}kB/s`
+  }
 
   return html`
-    <div class="${progressbar}">
-      <div class="counter">
-        ${stats.progress}%
-      </div>
-      <div class="bar">
-        <div class="line ${progressbarLine}" style="width: ${stats.progress}%">
+    <div>
+      <div class="${progressbar}">
+        <div class="counter">
+          ${stats.progress}%
+        </div>
+        <div class="bar">
+          <div class="line ${progressbarLine}" style="width: ${stats.progress}%">
+          </div>
         </div>
       </div>
+      <p class="f7 color-neutral-60 truncate">
+        <span class="${progressSubline}">
+          ${progressText}
+        </span>
+      </p>
     </div>
   `
 }
diff --git a/elements/table.js b/elements/table.js
index a5692cc1..da010810 100644
--- a/elements/table.js
+++ b/elements/table.js
@@ -11,6 +11,9 @@ const icon = require('./icon')
 const table = css`
   :host {
     width: 100%;
+    tr:odd:hover td {
+      background: red;
+    }
     th,
     td {
       padding-right: .75rem;
@@ -34,7 +37,7 @@ const table = css`
     }
     td {
       height: 4rem;
-      vertical-align: middle;
+      vertical-align: top;
       padding-top: 1rem;
     }
     tr:hover td {
@@ -63,7 +66,7 @@ const table = css`
       width: 26vw;
     }
     .row-action {
-      height: 2rem;
+      height: 1.5rem;
       display: inline-block;
       border: 0;
       background: transparent;
@@ -115,8 +118,8 @@ function tableElement (dats, send) {
             <th class="cell-1"></th>
             <th class="tl cell-2">Link</th>
             <th class="tl cell-3">Status</th>
-            <th class="tr cell-4">Size</th>
-            <th class="tr cell-5">Network</th>
+            <th class="tl cell-4">Size</th>
+            <th class="tl cell-5">Peers</th>
             <th class="cell-6"></th>
           </tr>
         </thead>
@@ -214,7 +217,7 @@ function row (dat, send) {
       </td>
       <td class="cell-2">
         <div class="cell-truncate">
-          <h2 class="normal truncate">
+          <h2 class="f6 normal truncate">
             ${title}
           </h2>
           <p class="f7 color-neutral-60 truncate">
diff --git a/lib/auto-updater.js b/lib/auto-updater.js
index 22f0971e..b127bd8e 100644
--- a/lib/auto-updater.js
+++ b/lib/auto-updater.js
@@ -12,7 +12,7 @@ module.exports = ({ log }) => {
   autoUpdater.setFeedURL(`http://dat.land:6000/update/${platform}/${version}`)
   autoUpdater.on('error', onerror)
   autoUpdater.on('checking-for-update', () => log('checking for update'))
-  autoUpdater.on('update-available', () => log('update available, downloading...'))
+  autoUpdater.on('update-available', () => log('update available, downloading…'))
   autoUpdater.on('update-not-available', () => log('update not available'))
   autoUpdater.on('download-progress', p => log('download progress ' + p.percent))
   autoUpdater.on('update-downloaded', (ev, notes, version) => {
@@ -27,7 +27,7 @@ module.exports = ({ log }) => {
     }, res => {
       const update = res === 0
       if (!update) return log('dismiss')
-      log('updating...')
+      log('updating…')
       autoUpdater.quitAndInstall()
     })
   })
@@ -35,4 +35,3 @@ module.exports = ({ log }) => {
   setTimeout(() => autoUpdater.checkForUpdates(), ms('10s'))
   setInterval(() => autoUpdater.checkForUpdates(), ms('30m'))
 }
-
diff --git a/lib/browserify.js b/lib/browserify.js
index f8d42f83..5b9dae4b 100644
--- a/lib/browserify.js
+++ b/lib/browserify.js
@@ -47,7 +47,7 @@ module.exports = opts => {
   b.transform('sheetify/transform', { use: ['sheetify-nested'] })
 
   const bundle = () => {
-    process.stderr.write(`${new Date()} bundling...`)
+    process.stderr.write(`${new Date()} bundling…`)
 
     b.bundle().pipe(concat(js => {
       fs.writeFile(`${__dirname}/../bundle.js`, js, err => {
diff --git a/package.json b/package.json
index 3a46d4af..e65b9f2e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dat-doctor": "^1.2.2",
     "dat-encoding": "^4.0.1",
     "dat-icons": "^1.3.0",
-    "dat-worker": "^5.9.1",
+    "dat-worker": "^5.10.0",
     "electron-auto-updater": "^0.9.2",
     "electron-default-menu": "^1.0.0",
     "electron-window": "^0.8.1",