pr comment changes and progress line starts from top instead of right

Co-authored-by: timvisee <tim@visee.me>

app/controller.js

@@ -1,13 +1,14 @@
-import FileSender from './fileSender';
-import FileReceiver from './fileReceiver';
-import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 import * as metrics from './metrics';
-import { bytes, locale } from './utils';
-import okDialog from './ui/okDialog';
+import FileReceiver from './fileReceiver';
+import FileSender from './fileSender';
 import copyDialog from './ui/copyDialog';
+import faviconProgressbar from './ui/faviconProgressbar';
+import okDialog from './ui/okDialog';
 import shareDialog from './ui/shareDialog';
 import signupDialog from './ui/signupDialog';
 import surveyDialog from './ui/surveyDialog';
+import { bytes, locale } from './utils';
+import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 
 export default function(state, emitter) {
   let lastRender = 0;
@@ -29,6 +30,7 @@ export default function(state, emitter) {
     if (updateTitle) {
       emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
     }
+    faviconProgressbar.updateFavicon(state.transfer.progressRatio);
     render();
   }
 
@@ -37,6 +39,7 @@ export default function(state, emitter) {
     document.addEventListener('focus', () => {
       updateTitle = false;
       emitter.emit('DOMTitleChange', 'Send');
+      faviconProgressbar.updateFavicon(0);
     });
     checkFiles();
   });

app/ui/archiveTile.js

@@ -3,7 +3,6 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 const assets = require('../../common/assets');
-const faviconProgressBar = require('./faviconProgressbar');
 const {
   bytes,
   copyToClipboard,
@@ -398,7 +397,6 @@ module.exports.uploading = function(state, emit) {
   const progress = state.transfer.progressRatio;
   const progressPercent = percent(progress);
   const archive = state.archive;
-  faviconProgressBar.updateFavicon(progressPercent);
   return html`
     <send-upload-area
       id="${archive.id}"

app/ui/faviconProgressbar.js

@@ -1,32 +1,13 @@
 const { platform } = require('../utils');
 const assets = require('../../common/assets');
 
-module.exports.updateFavicon = function(percentageString) {
-  if (platform() === 'web') {
-    let progress = parseInt(percentageString.replace('%', ''));
-    if (progress === 0 || progress === 100) {
-      const link = document.querySelector("link[rel*='icon']");
-      link.type = 'image/png';
-      link.href = assets.get('favicon-32x32.png');
-      document.getElementsByTagName('head')[0].appendChild(link);
-      return;
-    }
-    progress = progress * 0.01;
-    const link = document.querySelector("link[rel*='icon']");
-    const canvas = document.createElement('canvas');
-    const size = 32;
+const loaderWidth = 5;
+const loaderColor = '#0090ed';
 
-    const loaderWidth = 5;
-    const loaderColor = '#0090ed';
-
-    const span = document.createElement('span');
-    span.textContent = percentageString;
-    const context = canvas.getContext('2d');
-    canvas.width = canvas.height = size;
-
-    context.translate(size * 0.5, size * 0.5);
-
-    const drawCircle = function(color, lineWidth, outerWidth, percent) {
+function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
+  canvas.width = canvas.height = outerWidth;
+  context.translate(outerWidth * 0.5, outerWidth * 0.5);
+  context.rotate(-Math.PI * 0.5);
   const radius = (outerWidth - lineWidth) * 0.5;
   context.beginPath();
   context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
@@ -34,15 +15,29 @@ module.exports.updateFavicon = function(percentageString) {
   context.lineCap = 'square';
   context.lineWidth = lineWidth;
   context.stroke();
-    };
+}
 
-    const drawNewFavicon = function() {
-      drawCircle('#efefef', loaderWidth, size, 1);
-      drawCircle(loaderColor, loaderWidth, size, progress);
-    };
+function drawNewFavicon(progressRatio) {
+  const canvas = document.createElement('canvas');
+  const size = 32;
+  const context = canvas.getContext('2d');
+  drawCircle(canvas, context, '#efefef', loaderWidth, size, 1);
+  drawCircle(canvas, context, loaderColor, loaderWidth, size, progressRatio);
+  return canvas.toDataURL();
+}
 
-    drawNewFavicon(link);
-    link.href = canvas.toDataURL();
+module.exports.updateFavicon = function(progressRatio) {
+  if (platform() === 'web') {
+    const link = document.querySelector("link[rel*='icon']");
+    const progress = progressRatio * 100;
+    if (progress === 0 || progress === 100) {
+      link.type = 'image/png';
+      link.href = assets.get('favicon-32x32.png');
+      document.getElementsByTagName('head')[0].appendChild(link);
+      return;
+    }
+
+    link.href = drawNewFavicon(progressRatio);
     document.getElementsByTagName('head')[0].appendChild(link);
   }
 };

app/ui/home.js

@@ -3,7 +3,6 @@ const { list } = require('../utils');
 const archiveTile = require('./archiveTile');
 const modal = require('./modal');
 const intro = require('./intro');
-const faviconProgressbar = require('./faviconProgressbar');
 
 module.exports = function(state, emit) {
   const archives = state.storage.files
@@ -14,10 +13,8 @@ module.exports = function(state, emit) {
   if (state.uploading) {
     left = archiveTile.uploading(state, emit);
   } else if (state.archive.numFiles > 0) {
-    faviconProgressbar.updateFavicon('0%');
     left = archiveTile.wip(state, emit);
   } else {
-    faviconProgressbar.updateFavicon('0%');
     left = archiveTile.empty(state, emit);
   }
   archives.reverse();