favicon progress bar

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

app/ui/archiveTile.js

@@ -3,6 +3,7 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 const assets = require('../../common/assets');
+const faviconProgressBar = require('./faviconProgressbar');
 const {
   bytes,
   copyToClipboard,
@@ -397,6 +398,7 @@ 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

@@ -0,0 +1,49 @@
+const { platform } = require('../utils');
+const assets = require('../../common/assets');
+
+module.exports.updateFavicon = function(percentageString) {
+  if (platform() === 'web') {
+    const percentage = parseInt(percentageString.replace('%', ''));
+    if (percentage === 0 || percentage === 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;
+    }
+    const link = document.querySelector("link[rel*='icon']");
+    const canvas = document.createElement('canvas');
+    const size = 32;
+
+    const lineWidth = 5;
+    const color = '#339BFF';
+
+    const span = document.createElement('span');
+    span.textContent = percentageString;
+    const context = canvas.getContext('2d');
+    canvas.width = canvas.height = size;
+
+    context.translate(size / 2, size / 2);
+
+    const radius = (size - lineWidth) / 2;
+
+    const drawCircle = function(color, lineWidth, percent) {
+      context.beginPath();
+      context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+      context.strokeStyle = color;
+      context.lineCap = 'square'; // butt, round or square
+      context.lineWidth = lineWidth;
+      context.textAlign = 'center';
+      context.stroke();
+    };
+
+    const drawNewGraph = function() {
+      drawCircle('#efefef', lineWidth, 100 / 100);
+      drawCircle(color, lineWidth, percentage / 100);
+    };
+
+    drawNewGraph(link);
+    link.href = canvas.toDataURL();
+    document.getElementsByTagName('head')[0].appendChild(link);
+  }
+};

app/ui/home.js

@@ -3,17 +3,21 @@ 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
     .filter(archive => !archive.expired)
     .map(archive => archiveTile(state, emit, archive));
   let left = '';
+
   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();