From 4e7dd75266c177c7e035427657dbf06fcc6ce66b Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Fri, 29 Oct 2021 01:01:32 +0200
Subject: [PATCH] add upload donut

---
 copyparty/web/browser.css |  8 ++++++
 copyparty/web/up2k.js     | 53 ++++++++++++++++++++++++++++++++++++++-
 copyparty/web/util.js     | 27 +++++++++++---------
 3 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 5453eecf..1111deba 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -507,6 +507,11 @@ html.light #wfm a:not(.en) {
 	box-shadow: 0 -.15em .2em #000 inset;
 	padding-bottom: .3em;
 }
+#ops a svg {
+	width: 1.75em;
+	height: 1.75em;
+	margin: -.5em -.3em;
+}
 #ops {
 	margin: 1.7em 1.5em 0 1.5em;
 	padding: .3em .6em;
@@ -1117,6 +1122,9 @@ html.light #ops a.act {
 	border-color: #07a;
 	padding-top: .4em;
 }
+html.light #ops svg circle {
+	stroke: black;
+}
 html.light #op_cfg h3 {
 	border-color: #ccc;
 }
diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js
index 71b109d0..ce5a24e9 100644
--- a/copyparty/web/up2k.js
+++ b/copyparty/web/up2k.js
@@ -477,6 +477,52 @@ function U2pvis(act, btns) {
 }
 
 
+function Donut(st) {
+    var r = this,
+        el = null,
+        o = 20 * 2 * Math.PI,
+        optab = QS('#ops a[data-dest="up2k"]');
+
+    optab.setAttribute('ico', optab.textContent);
+
+    function svg(v) {
+        var ico = v !== undefined,
+            bg = ico ? '#333' : 'transparent';
+
+        return (
+            '<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">\n' +
+            (ico ? '<rect width="100%" height="100%" rx="32" fill="#333" />\n' :
+                '<circle stroke="white" stroke-width="6" r="3" cx="32" cy="32" />\n') +
+            '<circle class="donut" stroke="white" fill="' + bg +
+            '" stroke-dashoffset="' + (ico ? v : o) + '" stroke-dasharray="' + o + ' ' + o +
+            '" transform="rotate(270 32 32)" stroke-width="12" r="20" cx="32" cy="32" /></svg>'
+        );
+    }
+
+    r.on = function (ya) {
+        r.fc = 99;
+        r.base = st.bytes.finished;
+        optab.innerHTML = ya ? svg() : optab.getAttribute('ico');
+        el = QS('#ops a .donut');
+        if (!ya)
+            favico.upd();
+    };
+    r.do = function () {
+        if (!el)
+            return;
+
+        var t = st.bytes.total - r.base,
+            v = st.bytes.finished - r.base,
+            ofs = el.style.strokeDashoffset = o - o * v / t;
+
+        if (favico.txt && ++r.fc > 4) {
+            favico.upd(svg(ofs));
+            r.fc = 0;
+        }
+    };
+}
+
+
 function fsearch_explain(n) {
     if (n)
         return toast.inf(60, 'your access to this folder is Read-Only\n\n' + (acct == '*' ? 'you are currently not logged in' : 'you are currently logged in as "' + acct + '"'));
@@ -623,7 +669,8 @@ function up2k_init(subtle) {
             });
     }
 
-    var pvis = new U2pvis("bz", '#u2cards');
+    var pvis = new U2pvis("bz", '#u2cards'),
+        donut = new Donut(st);
 
     var bobslice = null;
     if (window.File)
@@ -1175,6 +1222,8 @@ function up2k_init(subtle) {
                     window[(is_busy ? "add" : "remove") +
                         "EventListener"]("beforeunload", warn_uploader_busy);
 
+                    donut.on(is_busy);
+
                     if (!is_busy) {
                         var k = uc.fsearch ? 'searches' : 'uploads',
                             ks = uc.fsearch ? 'Search' : 'Upload',
@@ -1196,9 +1245,11 @@ function up2k_init(subtle) {
                             toast.err(t, '{0} {1}'.format(ks, tng));
 
                         timer.rm(etafun);
+                        timer.rm(donut.do);
                         op_minh = 0;
                     }
                     else {
+                        timer.add(donut.do);
                         timer.add(etafun, false);
                         ebi('u2etas').style.textAlign = 'left';
                     }
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index 1dd44828..7c7c56d9 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -1221,28 +1221,31 @@ if (ebi('repl'))
     ebi('repl').onclick = repl;
 
 
+var svg_decl = '<?xml version="1.0" encoding="UTF-8"?>\n';
+
+
 var favico = (function () {
     var r = {};
     r.en = true;
+    r.tag = null;
 
     function gx(txt) {
-        return (
-            '<?xml version="1.0" encoding="UTF-8"?>\n' +
-            '<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g>\n' +
+        return (svg_decl +
+            '<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">\n' +
             (r.bg ? '<rect width="100%" height="100%" rx="16" fill="#' + r.bg + '" />\n' : '') +
             '<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle"' +
             ' font-family="sans-serif" font-weight="bold" font-size="64px"' +
-            ' fill="#' + r.fg + '">' + txt + '</text></g></svg>'
+            ' fill="#' + r.fg + '">' + txt + '</text></svg>'
         );
     }
 
-    r.upd = function () {
-        var i = QS('link[rel="icon"]'), b64;
+    r.upd = function (svg) {
         if (!r.txt)
             return;
 
+        var b64;
         try {
-            b64 = btoa(gx(r.txt));
+            b64 = btoa(svg ? svg_decl + svg : gx(r.txt));
         }
         catch (ex) {
             b64 = encodeURIComponent(r.txt).replace(/%([0-9A-F]{2})/g,
@@ -1251,12 +1254,12 @@ var favico = (function () {
             b64 = btoa(gx(unescape(encodeURIComponent(r.txt))));
         }
 
-        if (!i) {
-            i = mknod('link');
-            i.rel = 'icon';
-            document.head.appendChild(i);
+        if (!r.tag) {
+            r.tag = mknod('link');
+            r.tag.rel = 'icon';
+            document.head.appendChild(r.tag);
         }
-        i.href = 'data:image/svg+xml;base64,' + b64;
+        r.tag.href = 'data:image/svg+xml;base64,' + b64;
     };
 
     r.init = function () {