Implement section 2.1 and parts of section 4.1 from the Send Android spec (#901)

* Fix #877 Implement Start page (Empty State) Design

* Update some kotlin and android sdk things, and update to the latest code in vnext

* Begin implementing the card ui which shows after uploading.

* Implement a progress bar.

android/android.js

@@ -1,6 +1,6 @@
 /* global window, document, fetch */
 
-const MAXFILESIZE = 1024 * 1024 * 1024 * 2;
+window.MAXFILESIZE = 1024 * 1024 * 1024 * 2;
 
 const EventEmitter = require('events');
 const emitter = new EventEmitter();
@@ -32,41 +32,58 @@ function dom(tagName, attributes, children = []) {
 
 function uploadComplete(file) {
   document.body.innerHTML = '';
-  const input = dom('input', { id: 'url', value: file.url });
-  const copy = dom(
-    'button',
-    {
-      id: 'copy-button',
-      className: 'button',
-      onclick: () => {
-        input.select();
-        document.execCommand('copy');
-        input.blur();
-        copy.textContent = 'Copied!';
-        setTimeout(function() {
-          copy.textContent = 'Copy to clipboard';
-        }, 2000);
-      }
-    },
-    'Copy to clipboard'
-  );
+  const input = dom('input', { id: 'url', value: file.url, readonly: 'true' });
+  const copyText = dom('span', {}, 'Copy link');
+  const copyImage = dom('img', { id: 'copy-image', src: 'copy-link.png' });
   const node = dom(
     'div',
-    { id: 'striped' },
-    dom('div', { id: 'white' }, [
+    { id: 'white' },
+    dom('div', { className: 'card' }, [
+      dom('div', {}, 'The card contents will be here.'),
+      dom('div', {}, [
+        'Expires after: ',
+        dom('span', { className: 'expiresAfter' }, 'exp')
+      ]),
       input,
-      copy,
       dom(
-        'button',
-        { id: 'send-another', className: 'button', onclick: render },
-        'Send another file'
-      )
+        'div',
+        {
+          id: 'copy-link',
+          onclick: e => {
+            e.preventDefault();
+            input.select();
+            document.execCommand('copy');
+            input.selectionEnd = input.selectionStart;
+            copyText.textContent = 'Copied!';
+            setTimeout(function() {
+              copyText.textContent = 'Copy link';
+            }, 2000);
+          }
+        },
+        [copyImage, copyText]
+      ),
+      dom('img', {
+        id: 'send-another',
+        src: 'cloud-upload.png',
+        onclick: () => {
+          render();
+          document.getElementById('label').click();
+        }
+      })
     ])
   );
   document.body.appendChild(node);
 }
 
 const state = {
+  translate: (...toTranslate) => {
+    return toTranslate.map(o => JSON.stringify(o)).toString();
+  },
+  raven: {
+    captureException: e => {
+      console.error('ERROR ' + e + ' ' + e.stack);
+    }
+  },
   storage: {
     files: [],
     remove: function(fileId) {
@@ -92,21 +109,30 @@ function upload(event) {
   if (file.size === 0) {
     return;
   }
-  if (file.size > MAXFILESIZE) {
-    console.log('file too big (no bigger than ' + MAXFILESIZE + ')');
-    return;
-  }
 
-  emitter.emit('upload', { file: file, type: 'click' });
+  emitter.emit('addFiles', { files: [file] });
+  emitter.emit('upload', {});
 }
 
 function render() {
   document.body.innerHTML = '';
-  const striped = dom(
+  const node = dom(
     'div',
-    { id: 'striped' },
-    dom('div', { id: 'white' }, [
-      dom('label', { id: 'label', htmlFor: 'input' }, 'Choose file'),
+    { id: 'white' },
+    dom('div', { id: 'centering' }, [
+      dom('img', { src: 'encrypted-envelope.png' }),
+      dom('h4', {}, 'Private, Encrypted File Sharing'),
+      dom(
+        'div',
+        {},
+        'Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.'
+      ),
+      dom('div', { id: 'spacer' }),
+      dom(
+        'label',
+        { id: 'label', htmlFor: 'input' },
+        dom('img', { src: 'cloud-upload.png' }, [])
+      ),
       dom('input', {
         id: 'input',
         type: 'file',
@@ -115,19 +141,42 @@ function render() {
       })
     ])
   );
-  document.body.appendChild(striped);
+  document.body.appendChild(node);
 }
 
 emitter.on('render', function() {
+  if (!state.transfer || !state.transfer.progress) {
+    return;
+  }
   document.body.innerHTML = '';
-  const percent =
-    (state.transfer.progress[0] / state.transfer.progress[1]) * 100;
+  const percent = Math.floor(state.transfer.progressRatio * 100);
   const node = dom(
     'div',
-    { style: 'background-color: white; width: 100%' },
-    dom('span', {
-      style: `display: inline-block; width: ${percent}%; background-color: blue`
-    })
+    { id: 'white', style: 'width: 90%' },
+    dom('div', { className: 'card' }, [
+      dom('div', {}, `${percent}%`),
+      dom(
+        'span',
+        {
+          style: `display: inline-block; height: 4px; border-radius: 2px; width: ${percent}%; background-color: #1b96ef; color: white`
+        },
+        '.'
+      ),
+      dom(
+        'div',
+        {
+          style: 'text-align: right',
+          onclick: e => {
+            e.preventDefault();
+            if (state.uploading) {
+              emitter.emit('cancel');
+              render();
+            }
+          }
+        },
+        'CANCEL'
+      )
+    ])
   );
   document.body.appendChild(node);
 });
@@ -150,8 +199,10 @@ window.addEventListener(
     fetch(event.data)
       .then(res => res.blob())
       .then(blob => {
-        emitter.emit('upload', { file: blob, type: 'share' });
-      });
+        emitter.emit('addFiles', { files: [blob] });
+        emitter.emit('upload', {});
+      })
+      .catch(e => console.error('ERROR ' + e + ' ' + e.stack));
   },
   false
 );