From 0460bd2e97f3f19509cf4f7d9eb1c1d7edf28e89 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:07:46 +0530 Subject: [PATCH 01/12] favicon progress bar Co-authored-by: timvisee --- app/ui/archiveTile.js | 2 ++ app/ui/faviconProgressbar.js | 49 ++++++++++++++++++++++++++++++++++++ app/ui/home.js | 4 +++ 3 files changed, 55 insertions(+) create mode 100644 app/ui/faviconProgressbar.js diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 50c1e5bc..83c1e2ac 100644 --- a/app/ui/archiveTile.js +++ b/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` !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(); From 1cd4adfc2a4984bc0b2a033b6c08b1094f4533be Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:12:12 +0530 Subject: [PATCH 02/12] made variable name more relevant Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 1a90f0c2..f30d6031 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -37,12 +37,12 @@ module.exports.updateFavicon = function(percentageString) { context.stroke(); }; - const drawNewGraph = function() { + const drawNewFavicon = function() { drawCircle('#efefef', lineWidth, 100 / 100); drawCircle(color, lineWidth, percentage / 100); }; - drawNewGraph(link); + drawNewFavicon(link); link.href = canvas.toDataURL(); document.getElementsByTagName('head')[0].appendChild(link); } From 0eda8d20826215be7a9b5bbba10c6366ccfcf65c Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:24:33 +0530 Subject: [PATCH 03/12] removed unsed code Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index f30d6031..23651233 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -33,7 +33,6 @@ module.exports.updateFavicon = function(percentageString) { context.strokeStyle = color; context.lineCap = 'square'; // butt, round or square context.lineWidth = lineWidth; - context.textAlign = 'center'; context.stroke(); }; From e53571e219da4e272e64bd8c9cfbe772f5143ff4 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:27:52 +0530 Subject: [PATCH 04/12] removed unwanted comment Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 23651233..1e67b4e5 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -31,7 +31,7 @@ module.exports.updateFavicon = function(percentageString) { context.beginPath(); context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); context.strokeStyle = color; - context.lineCap = 'square'; // butt, round or square + context.lineCap = 'square'; context.lineWidth = lineWidth; context.stroke(); }; From 305dd2f5efff1bafed9901cbd3c7adefbb2b9259 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:44:13 +0530 Subject: [PATCH 05/12] color changed to #0090ed Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 1e67b4e5..6764a0fe 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -16,7 +16,7 @@ module.exports.updateFavicon = function(percentageString) { const size = 32; const lineWidth = 5; - const color = '#339BFF'; + const color = '#0090ed'; const span = document.createElement('span'); span.textContent = percentageString; From 0acdf3a720d98333e958689a82f26eb7fbfd15c5 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 00:45:24 +0530 Subject: [PATCH 06/12] changed 100/100 to 1 Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 6764a0fe..b2ca84b5 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -37,7 +37,7 @@ module.exports.updateFavicon = function(percentageString) { }; const drawNewFavicon = function() { - drawCircle('#efefef', lineWidth, 100 / 100); + drawCircle('#efefef', lineWidth, 1); drawCircle(color, lineWidth, percentage / 100); }; From acf82a4e3e2c1732fa0f6d177e6848bf0679d81a Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 01:08:11 +0530 Subject: [PATCH 07/12] varaible name changed to more meaningful Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index b2ca84b5..551fb967 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -3,20 +3,21 @@ const assets = require('../../common/assets'); module.exports.updateFavicon = function(percentageString) { if (platform() === 'web') { - const percentage = parseInt(percentageString.replace('%', '')); - if (percentage === 0 || percentage === 100) { + 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 lineWidth = 5; - const color = '#0090ed'; + const loaderWidth = 5; + const loaderColor = '#0090ed'; const span = document.createElement('span'); span.textContent = percentageString; @@ -25,7 +26,7 @@ module.exports.updateFavicon = function(percentageString) { context.translate(size / 2, size / 2); - const radius = (size - lineWidth) / 2; + const radius = (size - loaderWidth) / 2; const drawCircle = function(color, lineWidth, percent) { context.beginPath(); @@ -37,8 +38,8 @@ module.exports.updateFavicon = function(percentageString) { }; const drawNewFavicon = function() { - drawCircle('#efefef', lineWidth, 1); - drawCircle(color, lineWidth, percentage / 100); + drawCircle('#efefef', loaderWidth, 1); + drawCircle(loaderColor, loaderWidth, progress); }; drawNewFavicon(link); From e5f76a7b1f081db07aba0866c9c52f43b5243a08 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 01:20:35 +0530 Subject: [PATCH 08/12] converted division to multiplication and calculating radius inside func Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 551fb967..ceb34d7c 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -24,11 +24,10 @@ module.exports.updateFavicon = function(percentageString) { const context = canvas.getContext('2d'); canvas.width = canvas.height = size; - context.translate(size / 2, size / 2); + context.translate(size * 0.5, size * 0.5); - const radius = (size - loaderWidth) / 2; - - const drawCircle = function(color, lineWidth, percent) { + const drawCircle = function(color, lineWidth, outerWidth, percent) { + const radius = (outerWidth - loaderWidth) * 0.5; context.beginPath(); context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); context.strokeStyle = color; @@ -38,8 +37,8 @@ module.exports.updateFavicon = function(percentageString) { }; const drawNewFavicon = function() { - drawCircle('#efefef', loaderWidth, 1); - drawCircle(loaderColor, loaderWidth, progress); + drawCircle('#efefef', loaderWidth, size, 1); + drawCircle(loaderColor, loaderWidth, size, progress); }; drawNewFavicon(link); From 8d80ba1f69d030828bd42f256784456b2911c684 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 01:27:17 +0530 Subject: [PATCH 09/12] fix var name Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index ceb34d7c..cd5994ea 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -27,7 +27,7 @@ module.exports.updateFavicon = function(percentageString) { context.translate(size * 0.5, size * 0.5); const drawCircle = function(color, lineWidth, outerWidth, percent) { - const radius = (outerWidth - loaderWidth) * 0.5; + const radius = (outerWidth - lineWidth) * 0.5; context.beginPath(); context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); context.strokeStyle = color; From a6a3cae5e9948613e642b2a20bc521db3d26cfed Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 23:37:11 +0530 Subject: [PATCH 10/12] pr comment changes and progress line starts from top instead of right Co-authored-by: timvisee --- app/controller.js | 13 +++++--- app/ui/archiveTile.js | 2 -- app/ui/faviconProgressbar.js | 63 +++++++++++++++++------------------- app/ui/home.js | 3 -- 4 files changed, 37 insertions(+), 44 deletions(-) diff --git a/app/controller.js b/app/controller.js index 6648f85b..6482bc1c 100644 --- a/app/controller.js +++ b/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(); }); diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 83c1e2ac..50c1e5bc 100644 --- a/app/ui/archiveTile.js +++ b/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` 0) { - faviconProgressbar.updateFavicon('0%'); left = archiveTile.wip(state, emit); } else { - faviconProgressbar.updateFavicon('0%'); left = archiveTile.empty(state, emit); } archives.reverse(); From a3e8646ea76e0b08fe77d5cec3b35c0ce5c0c822 Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Thu, 21 Mar 2019 23:41:47 +0530 Subject: [PATCH 11/12] constants at the top Co-authored-by: timvisee --- app/ui/faviconProgressbar.js | 2 +- app/ui/home.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index c7c0358f..04909daf 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -1,6 +1,7 @@ const { platform } = require('../utils'); const assets = require('../../common/assets'); +const size = 32; const loaderWidth = 5; const loaderColor = '#0090ed'; @@ -19,7 +20,6 @@ function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) { 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); diff --git a/app/ui/home.js b/app/ui/home.js index cbc7237f..cfa38564 100644 --- a/app/ui/home.js +++ b/app/ui/home.js @@ -9,7 +9,6 @@ module.exports = function(state, emit) { .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) { From e9b50b7682946ad4a5ff964d51a138ed08f6700a Mon Sep 17 00:00:00 2001 From: Ashesh Vidyut Date: Fri, 22 Mar 2019 03:52:16 +0530 Subject: [PATCH 12/12] query selector fix + revert favicon in case of cancel and complete Co-authored-by: timvisee --- app/controller.js | 3 +++ app/ui/faviconProgressbar.js | 4 +--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/controller.js b/app/controller.js index 6482bc1c..c7c0769c 100644 --- a/app/controller.js +++ b/app/controller.js @@ -86,6 +86,7 @@ export default function(state, emitter) { emitter.on('cancel', () => { state.transfer.cancel(); + faviconProgressbar.updateFavicon(0); }); emitter.on('addFiles', async ({ files }) => { @@ -164,6 +165,7 @@ export default function(state, emitter) { state.storage.totalUploads += 1; const duration = Date.now() - start; metrics.completedUpload(archive, duration); + faviconProgressbar.updateFavicon(0); state.storage.addFile(ownedFile); // TODO integrate password into /upload request @@ -267,6 +269,7 @@ export default function(state, emitter) { duration, password_protected: file.requiresPassword }); + faviconProgressbar.updateFavicon(0); } catch (err) { if (err.message === '0') { // download cancelled diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js index 04909daf..7967f5a3 100644 --- a/app/ui/faviconProgressbar.js +++ b/app/ui/faviconProgressbar.js @@ -28,16 +28,14 @@ function drawNewFavicon(progressRatio) { module.exports.updateFavicon = function(progressRatio) { if (platform() === 'web') { - const link = document.querySelector("link[rel*='icon']"); + const link = document.querySelector("link[rel='icon'][sizes='32x32']"); 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); } };