From 03f08de32fee32bc6516c0c92f6b5de2e98d6917 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 21 Feb 2018 13:59:06 -0800
Subject: [PATCH] added indefinite progress mode

---
 app/fileReceiver.js                 |  4 ++++
 app/fileSender.js                   |  4 ++++
 app/pages/download/index.js         |  2 +-
 app/pages/upload/index.js           |  2 +-
 app/templates/progress/index.js     | 17 ++++++++++-------
 app/templates/progress/progress.css | 17 +++++++++++++++++
 6 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/fileReceiver.js b/app/fileReceiver.js
index b3b5502e..cd80002d 100644
--- a/app/fileReceiver.js
+++ b/app/fileReceiver.js
@@ -18,6 +18,10 @@ export default class FileReceiver extends Nanobus {
     return this.progress[0] / this.progress[1];
   }
 
+  get progressIndefinite() {
+    return this.state !== 'downloading';
+  }
+
   get sizes() {
     return {
       partialSize: bytes(this.progress[0]),
diff --git a/app/fileSender.js b/app/fileSender.js
index e9a86c5a..a6cbc0a5 100644
--- a/app/fileSender.js
+++ b/app/fileSender.js
@@ -20,6 +20,10 @@ export default class FileSender extends Nanobus {
     return this.progress[0] / this.progress[1];
   }
 
+  get progressIndefinite() {
+    return ['fileSizeProgress', 'notifyUploadDone'].indexOf(this.msg) === -1;
+  }
+
   get sizes() {
     return {
       partialSize: bytes(this.progress[0]),
diff --git a/app/pages/download/index.js b/app/pages/download/index.js
index 149eca10..73857dfb 100644
--- a/app/pages/download/index.js
+++ b/app/pages/download/index.js
@@ -24,7 +24,7 @@ module.exports = function(state, emit) {
       <div class="description">
         ${state.translate('downloadingPageMessage')}
       </div>
-      ${progress(transfer.progressRatio)}
+      ${progress(transfer.progressRatio, transfer.progressIndefinite)}
       <div class="progressSection">
         <div class="progressSection__text">
           ${state.translate(transfer.msg, transfer.sizes)}
diff --git a/app/pages/upload/index.js b/app/pages/upload/index.js
index 7d5f7d76..81353e0f 100644
--- a/app/pages/upload/index.js
+++ b/app/pages/upload/index.js
@@ -14,7 +14,7 @@ module.exports = function(state, emit) {
       })}
     </div>
     <div class="description"></div>
-    ${progress(transfer.progressRatio)}
+    ${progress(transfer.progressRatio, transfer.progressIndefinite)}
     <div class="progressSection">
       <div class="progressSection__text">
         ${state.translate(transfer.msg, transfer.sizes)}
diff --git a/app/templates/progress/index.js b/app/templates/progress/index.js
index 74e273d0..5a89cd7e 100644
--- a/app/templates/progress/index.js
+++ b/app/templates/progress/index.js
@@ -6,9 +6,14 @@ const oRadius = radius + 10;
 const oDiameter = oRadius * 2;
 const circumference = 2 * Math.PI * radius;
 
-module.exports = function(progressRatio) {
-  const dashOffset = (1 - progressRatio) * circumference;
-  const percentComplete = percent(progressRatio);
+module.exports = function(progressRatio, indefinite = false) {
+  const p = indefinite ? 0.2 : progressRatio;
+  const dashOffset = (1 - p) * circumference;
+  const progressPercent = html`
+    <text class="progress__percent" text-anchor="middle" x="50%" y="98">
+      ${percent(progressRatio)}
+    </text>`;
+
   return html`
   <div class="progress">
     <svg
@@ -23,7 +28,7 @@ module.exports = function(progressRatio) {
         cy="${oRadius}"
         fill="transparent"/>
       <circle
-        class="progress__bar"
+        class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
         r="${radius}"
         cx="${oRadius}"
         cy="${oRadius}"
@@ -31,9 +36,7 @@ module.exports = function(progressRatio) {
         transform="rotate(-90 ${oRadius} ${oRadius})"
         stroke-dasharray="${circumference}"
         stroke-dashoffset="${dashOffset}"/>
-      <text class="progress__percent" text-anchor="middle" x="50%" y="98">
-        ${percentComplete}
-      </text>
+        ${indefinite ? '' : progressPercent}
     </svg>
   </div>
   `;
diff --git a/app/templates/progress/progress.css b/app/templates/progress/progress.css
index e3856322..1d320515 100644
--- a/app/templates/progress/progress.css
+++ b/app/templates/progress/progress.css
@@ -18,6 +18,23 @@
   transition: stroke-dashoffset 300ms linear;
 }
 
+.progress__indefinite {
+  stroke: #3b9dff;
+  stroke-width: 0.75em;
+  animation: 1s linear infinite spin;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .progress__percent {
   font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
   font-size: 43.2px;