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

app/ui/download.js

@@ -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');
-
+const downloadPassword = require('./downloadPassword');
-function password(state, emit) {
+const downloadCompleted = require('./downloadCompleted');
-  const fileInfo = state.fileInfo;
+const BIG_SIZE = 1024 * 1024 * 256;
-  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;
-}
 
 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`
+        content = downloading(state, emit);
-          <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>
-        `;
         break;
       case 'complete':
-        content = html`
+        content = downloadCompleted(state);
-          <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>
-        `;
         break;
       default:
-        content = html`
+        content = preview(state, emit);
-          <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>
-        `;
     }
   } else if (state.fileInfo.requiresPassword && !state.fileInfo.password) {
-    content = password(state, emit);
+    content = downloadPassword(state, emit);
   }
   return html`
     <main class="main">

app/ui/downloadCompleted.js

@@ -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>
+  `;
+};

app/ui/downloadPassword.js

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

app/ui/error.js

@@ -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="/"

app/ui/noStreams.js

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

app/ui/notFound.js

@@ -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="/"

public/locales/en-US/send.ftl

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