added warning page for browsers without streams downloading big files (#1175)
* added warning page for browsers without streams downloading big files * fixed illustration size in Edge * updated nostreams style
This commit is contained in:
Danny Coates
GitHub
parent
eddabac191
commit
7716ba6e77
|
|
@ -1,91 +1,12 @@
|
|||
/* global downloadMetadata */
|
||||
const html = require('choo/html');
|
||||
const archiveTile = require('./archiveTile');
|
||||
const assets = require('../../common/assets');
|
||||
const modal = require('./modal');
|
||||
const noStreams = require('./noStreams');
|
||||
const notFound = require('./notFound');
|
||||
|
||||
function password(state, emit) {
|
||||
const fileInfo = state.fileInfo;
|
||||
const invalid = fileInfo.password === null;
|
||||
|
||||
const div = html`
|
||||
<div
|
||||
class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
|
||||
<p
|
||||
class="w-full mb-4 md:w-4/5 font-light text-center text-grey-darkest leading-normal"
|
||||
>
|
||||
${state.translate('downloadMessage')}
|
||||
</p>
|
||||
<form
|
||||
class="flex flex-row flex-no-wrap w-full md:w-4/5"
|
||||
onsubmit="${checkPassword}"
|
||||
data-no-csrf
|
||||
>
|
||||
<input
|
||||
id="password-input"
|
||||
class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
|
||||
? 'border-red'
|
||||
: 'border-grey'} leading-loose px-2 py-1"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput="${inputChanged}"
|
||||
type="password"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
id="password-btn"
|
||||
class="btn rounded-r-lg rounded-l-none ${invalid
|
||||
? 'bg-red hover:bg-red focus:bg-red'
|
||||
: ''}"
|
||||
value="${state.translate('unlockButtonLabel')}"
|
||||
title="${state.translate('unlockButtonLabel')}"
|
||||
/>
|
||||
</form>
|
||||
<label
|
||||
id="password-error"
|
||||
class="${invalid ? '' : 'invisible'} text-red my-4"
|
||||
for="password-input"
|
||||
>
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
}
|
||||
|
||||
function inputChanged(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const label = document.getElementById('password-error');
|
||||
const input = document.getElementById('password-input');
|
||||
const btn = document.getElementById('password-btn');
|
||||
label.classList.add('invisible');
|
||||
input.classList.remove('border-red');
|
||||
btn.classList.remove('bg-red', 'hover:bg-red', 'focus:bg-red');
|
||||
}
|
||||
|
||||
function checkPassword(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const el = document.getElementById('password-input');
|
||||
const password = el.value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('password-btn').disabled = true;
|
||||
state.fileInfo.url = window.location.href;
|
||||
state.fileInfo.password = password;
|
||||
emit('getMetadata');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
const downloadPassword = require('./downloadPassword');
|
||||
const downloadCompleted = require('./downloadCompleted');
|
||||
const BIG_SIZE = 1024 * 1024 * 256;
|
||||
|
||||
function createFileInfo(state) {
|
||||
return {
|
||||
|
|
@ -96,6 +17,36 @@ function createFileInfo(state) {
|
|||
};
|
||||
}
|
||||
|
||||
function downloading(state, emit) {
|
||||
return html`
|
||||
<div
|
||||
class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadingTitle')}</h1>
|
||||
${archiveTile.downloading(state, emit)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function preview(state, emit) {
|
||||
if (!state.capabilities.streamDownload && state.fileInfo.size > BIG_SIZE) {
|
||||
return noStreams(state, emit);
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
|
||||
<p
|
||||
class="w-full md:w-4/5 font-light text-grey-darkest text-center leading-normal"
|
||||
>
|
||||
${state.translate('downloadMessage')}
|
||||
</p>
|
||||
${archiveTile.preview(state, emit)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
let content = '';
|
||||
if (!state.fileInfo) {
|
||||
|
|
@ -113,56 +64,16 @@ module.exports = function(state, emit) {
|
|||
switch (state.transfer.state) {
|
||||
case 'downloading':
|
||||
case 'decrypting':
|
||||
content = html`
|
||||
<div
|
||||
class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadingTitle')}</h1>
|
||||
${archiveTile.downloading(state, emit)}
|
||||
</div>
|
||||
`;
|
||||
content = downloading(state, emit);
|
||||
break;
|
||||
case 'complete':
|
||||
content = html`
|
||||
<div
|
||||
id="download-complete"
|
||||
class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
|
||||
>
|
||||
<h1 class="text-center font-bold my-4 text-2xl">
|
||||
${state.translate('downloadFinish')}
|
||||
</h1>
|
||||
<p class="pb-2 text-grey-darkest leading-normal">
|
||||
${state.translate('downloadFinishText')}
|
||||
</p>
|
||||
<img src="${assets.get('completed.svg')}" class="" />
|
||||
<p class="mb-4">
|
||||
<a
|
||||
href="/"
|
||||
class="btn rounded-lg flex items-center mt-4"
|
||||
role="button"
|
||||
>${state.translate('sendYourFilesLink')}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
content = downloadCompleted(state);
|
||||
break;
|
||||
default:
|
||||
content = html`
|
||||
<div
|
||||
class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
|
||||
<p
|
||||
class="w-full md:w-4/5 font-light text-grey-darkest text-center leading-normal"
|
||||
>
|
||||
${state.translate('downloadMessage')}
|
||||
</p>
|
||||
${archiveTile.preview(state, emit)}
|
||||
</div>
|
||||
`;
|
||||
content = preview(state, emit);
|
||||
}
|
||||
} else if (state.fileInfo.requiresPassword && !state.fileInfo.password) {
|
||||
content = password(state, emit);
|
||||
content = downloadPassword(state, emit);
|
||||
}
|
||||
return html`
|
||||
<main class="main">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<div
|
||||
id="download-complete"
|
||||
class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
|
||||
>
|
||||
<h1 class="text-center font-bold my-4 text-2xl">
|
||||
${state.translate('downloadFinish')}
|
||||
</h1>
|
||||
<p class="pb-2 text-grey-darkest leading-normal">
|
||||
${state.translate('downloadFinishText')}
|
||||
</p>
|
||||
<img src="${assets.get('completed.svg')}" class="max-w-sm" />
|
||||
<p class="mb-4">
|
||||
<a href="/" class="btn rounded-lg flex items-center mt-4" role="button"
|
||||
>${state.translate('sendYourFilesLink')}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const fileInfo = state.fileInfo;
|
||||
const invalid = fileInfo.password === null;
|
||||
|
||||
const div = html`
|
||||
<div
|
||||
class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
|
||||
<p
|
||||
class="w-full mb-4 md:w-4/5 font-light text-center text-grey-darkest leading-normal"
|
||||
>
|
||||
${state.translate('downloadMessage')}
|
||||
</p>
|
||||
<form
|
||||
class="flex flex-row flex-no-wrap w-full md:w-4/5"
|
||||
onsubmit="${checkPassword}"
|
||||
data-no-csrf
|
||||
>
|
||||
<input
|
||||
id="password-input"
|
||||
class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
|
||||
? 'border-red'
|
||||
: 'border-grey'} leading-loose px-2 py-1"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput="${inputChanged}"
|
||||
type="password"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
id="password-btn"
|
||||
class="btn rounded-r-lg rounded-l-none ${invalid
|
||||
? 'bg-red hover:bg-red focus:bg-red'
|
||||
: ''}"
|
||||
value="${state.translate('unlockButtonLabel')}"
|
||||
title="${state.translate('unlockButtonLabel')}"
|
||||
/>
|
||||
</form>
|
||||
<label
|
||||
id="password-error"
|
||||
class="${invalid ? '' : 'invisible'} text-red my-4"
|
||||
for="password-input"
|
||||
>
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
}
|
||||
|
||||
function inputChanged(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const label = document.getElementById('password-error');
|
||||
const input = document.getElementById('password-input');
|
||||
const btn = document.getElementById('password-btn');
|
||||
label.classList.add('invisible');
|
||||
input.classList.remove('border-red');
|
||||
btn.classList.remove('bg-red', 'hover:bg-red', 'focus:bg-red');
|
||||
}
|
||||
|
||||
function checkPassword(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const el = document.getElementById('password-input');
|
||||
const password = el.value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('password-btn').disabled = true;
|
||||
state.fileInfo.url = window.location.href;
|
||||
state.fileInfo.password = password;
|
||||
emit('getMetadata');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = function(state, emit) {
|
|||
<p class="pb-2 max-w-md text-center text-grey-darkest leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<img class="" src="${assets.get('error.svg')}" />
|
||||
<img class="max-w-sm" src="${assets.get('error.svg')}" />
|
||||
<p class="mb-4">
|
||||
<a
|
||||
href="/"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
const html = require('choo/html');
|
||||
const { bytes } = require('../utils');
|
||||
const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const archive = state.fileInfo;
|
||||
return html`
|
||||
<div
|
||||
class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
|
||||
>
|
||||
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
|
||||
<p
|
||||
class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
|
||||
>
|
||||
⚠️ ${state.translate('noStreamsWarning')} ⚠️
|
||||
</p>
|
||||
<form class="md:w-128" onsubmit=${submit}>
|
||||
<fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
|
||||
<div class="flex items-center mb-2">
|
||||
<img class="mr-3 flex-no-shrink" src="${assets.get(
|
||||
'blue_file.svg'
|
||||
)}"/>
|
||||
<p class="flex-grow">
|
||||
<h1 class="text-base font-medium word-break-all">${
|
||||
archive.name
|
||||
}</h1>
|
||||
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class=" mt-6 mb-3">
|
||||
<input class="mx-2" type="radio" name="gus" id="copy" value="copy" checked>
|
||||
<label class="" for="copy">${state.translate(
|
||||
'noStreamsOptionCopy'
|
||||
)}</label>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<input class="mx-2" type="radio" name="gus" id="firefox" value="firefox">
|
||||
<label class="" for="firefox">${state.translate(
|
||||
'noStreamsOptionFirefox'
|
||||
)}</label>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<input class="mx-2" type="radio" name="gus" id="download" value="download">
|
||||
<label class="" for="download">${state.translate(
|
||||
'noStreamsOptionDownload'
|
||||
)}</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<input
|
||||
class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
|
||||
value="${state.translate('copyUrlFormButtonText')}"
|
||||
title="${state.translate('copyUrlFormButtonText')}"
|
||||
type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function optionChanged(event) {
|
||||
event.stopPropagation();
|
||||
const choice = event.target.value;
|
||||
const button = event.currentTarget.nextElementSibling;
|
||||
let title = button.title;
|
||||
switch (choice) {
|
||||
case 'copy':
|
||||
title = state.translate('copyUrlFormButtonText');
|
||||
break;
|
||||
case 'firefox':
|
||||
title = state.translate('downloadFirefox');
|
||||
break;
|
||||
case 'download':
|
||||
title = state.translate('downloadButtonLabel');
|
||||
break;
|
||||
}
|
||||
button.title = title;
|
||||
button.value = title;
|
||||
}
|
||||
|
||||
function submit(event) {
|
||||
const action = document.querySelector('input[type="radio"]:checked').value;
|
||||
switch (action) {
|
||||
case 'copy':
|
||||
emit('copy', { url: window.location.href });
|
||||
document.querySelector('input[type="submit"]').value = state.translate(
|
||||
'copiedUrl'
|
||||
);
|
||||
break;
|
||||
case 'firefox':
|
||||
window.open(
|
||||
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com'
|
||||
);
|
||||
break;
|
||||
case 'download':
|
||||
emit('download', archive);
|
||||
break;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = function(state, emit) {
|
|||
<p class="pb-2 max-w-md text-center text-grey-darkest leading-normal">
|
||||
${state.translate('downloadFinishText')}
|
||||
</p>
|
||||
<img src="${assets.get('notFound.svg')}" class="" />
|
||||
<img src="${assets.get('notFound.svg')}" class="max-w-sm" />
|
||||
<p class="mb-4">
|
||||
<a
|
||||
href="/"
|
||||
|
|
|
|||
|
|
@ -181,3 +181,7 @@ logOut = Sign Out
|
|||
okButton = Ok
|
||||
myUploads = My Uploads
|
||||
downloadingTitle = Downloading
|
||||
noStreamsWarning = This browser might not be able to decrypt a file this big.
|
||||
noStreamsOptionCopy = Copy the link to open in another browser
|
||||
noStreamsOptionFirefox = Try our favorite browser
|
||||
noStreamsOptionDownload = Use this browser
|
||||
Loading…
Reference in New Issue