favicon progress bar

Co-authored-by: timvisee <tim@visee.me>
This commit is contained in:
Ashesh Vidyut 2019-03-21 00:07:46 +05:30 committed by timvisee
parent 60146541f2
commit 0460bd2e97
No known key found for this signature in database
GPG Key ID: B8DB720BC383E172
3 changed files with 55 additions and 0 deletions

View File

@ -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}"

View File

@ -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);
}
};

View File

@ -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();