diff --git a/app/controller.js b/app/controller.js index 2107a8f1e..42d9ad9af 100644 --- a/app/controller.js +++ b/app/controller.js @@ -8,6 +8,7 @@ import copyDialog from './ui/copyDialog'; import shareDialog from './ui/shareDialog'; import signupDialog from './ui/signupDialog'; import surveyDialog from './ui/surveyDialog'; +import qrDialog from './ui/qrDialog'; export default function(state, emitter) { let lastRender = 0; @@ -306,6 +307,11 @@ export default function(state, emitter) { render(); }); + emitter.on('displayQRCode', url => { + state.modal = qrDialog(url); + render(); + }); + setInterval(() => { // poll for updates of the upload list if (!state.modal && state.route === '/') { diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 35ca0f9de..d88febfe8 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -248,6 +248,7 @@ module.exports = function(state, emit, archive) { copyToClipboard(archive.url); const text = event.target.lastChild; text.textContent = state.translate('copiedUrl'); + emit('displayQRCode', archive.url); setTimeout( () => (text.textContent = state.translate('copyLinkButton')), 1000 diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index 71ce61346..f141f3044 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -44,7 +44,7 @@ module.exports = function(name, url) { event.stopPropagation(); copyToClipboard(url); event.target.textContent = state.translate('copiedUrl'); - setTimeout(close, 1000); + emit('displayQRCode', url); } }; dialog.type = 'copy'; diff --git a/app/ui/qrDialog.js b/app/ui/qrDialog.js new file mode 100644 index 000000000..7ebea484f --- /dev/null +++ b/app/ui/qrDialog.js @@ -0,0 +1,37 @@ +const html = require('choo/html'); +const QRious = require('qrious'); + +module.exports = function(url) { + const qr = new QRious({ + value: url, + size: 300 + }); + + const dialog = function(state, emit, close) { + return html` +
+
+
+ +
+ +

+ ${state.translate('copiedUrl')} +

+ +

${state.translate('qrDialogMessage')}

+ + +
+
+ `; + }; + + return dialog; +}; diff --git a/package-lock.json b/package-lock.json index 7fc6af567..e6ec403b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14876,6 +14876,11 @@ "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "dev": true }, + "qrious": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz", + "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g==" + }, "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", diff --git a/package.json b/package.json index 5f117c17a..5129418fc 100644 --- a/package.json +++ b/package.json @@ -155,6 +155,7 @@ "mkdirp": "^0.5.1", "mozlog": "^2.2.0", "node-fetch": "^2.6.0", + "qrious": "^4.0.2", "redis": "^2.8.0", "selenium-standalone": "^6.15.6", "ua-parser-js": "^0.7.20" diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl index b6b456964..81dc87a05 100644 --- a/public/locales/en-US/send.ftl +++ b/public/locales/en-US/send.ftl @@ -13,6 +13,7 @@ timespanHours = { $num -> *[other] { $num } hours } copiedUrl = Copied! +qrDialogMessage = For your convenience, here's a QR code containing that same link unlockInputPlaceholder = Password unlockButtonLabel = Unlock downloadButtonLabel = Download