integrate with new ui

app/api.js

@@ -136,7 +136,14 @@ function listenForResponse(ws, canceller) {
   });
 }
 
-async function upload(stream, metadata, verifierB64, onprogress, canceller) {
+async function upload(
+  stream,
+  metadata,
+  verifierB64,
+  timeLimit,
+  onprogress,
+  canceller
+) {
   const host = window.location.hostname;
   const port = window.location.port;
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -151,7 +158,8 @@ async function upload(stream, metadata, verifierB64, onprogress, canceller) {
     const metadataHeader = arrayToB64(new Uint8Array(metadata));
     const fileMeta = {
       fileMetadata: metadataHeader,
-      authorization: `send-v1 ${verifierB64}`
+      authorization: `send-v1 ${verifierB64}`,
+      timeLimit
     };
 
     const responsePromise = listenForResponse(ws, canceller);
@@ -188,7 +196,13 @@ async function upload(stream, metadata, verifierB64, onprogress, canceller) {
   }
 }
 
-export function uploadWs(encrypted, metadata, verifierB64, onprogress) {
+export function uploadWs(
+  encrypted,
+  metadata,
+  verifierB64,
+  onprogress,
+  timeLimit
+) {
   const canceller = { cancelled: false };
 
   return {
@@ -196,7 +210,15 @@ export function uploadWs(encrypted, metadata, verifierB64, onprogress) {
       canceller.error = new Error(0);
       canceller.cancelled = true;
     },
-    result: upload(encrypted, metadata, verifierB64, onprogress, canceller)
+
+    result: upload(
+      encrypted,
+      metadata,
+      verifierB64,
+      timeLimit,
+      onprogress,
+      canceller
+    )
   };
 }
 

app/base.css

@@ -276,7 +276,6 @@ a {
   }
 
   .stripedBox {
-    margin-top: 72;
     min-height: 400px;
     flex: 1;
   }
@@ -289,3 +288,9 @@ a {
     margin: 15px;
   }
 }
+
+@media (max-device-width: 700px), (max-width: 700px) {
+  .stripedBox {
+    margin-top: 72px;
+  }
+}

app/fileManager.js

@@ -1,4 +1,5 @@
 /* global MAXFILESIZE */
+/* global DEFAULT_EXPIRE_SECONDS */
 import FileSender from './fileSender';
 import FileReceiver from './fileReceiver';
 import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
@@ -110,7 +111,9 @@ export default function(state, emitter) {
   emitter.on('upload', async ({ type, dlCount, password }) => {
     if (!state.archive) return;
     const size = state.archive.size;
-    const sender = new FileSender(state.archive);
+    if (!state.timeLimit) state.timeLimit = DEFAULT_EXPIRE_SECONDS;
+    const sender = new FileSender(state.archive, state.timeLimit);
+
     sender.on('progress', updateProgress);
     sender.on('encrypting', render);
     sender.on('complete', render);
@@ -157,7 +160,7 @@ export default function(state, emitter) {
       }
     } finally {
       openLinksInNewTab(links, false);
-      state.files = [];
+      state.archive = null;
       state.password = '';
       state.uploading = false;
       state.transfer = null;

app/fileSender.js

@@ -1,4 +1,4 @@
-/* global EXPIRE_SECONDS */
+/* global DEFAULT_EXPIRE_SECONDS */
 import Nanobus from 'nanobus';
 import OwnedFile from './ownedFile';
 import Keychain from './keychain';
@@ -7,8 +7,9 @@ import { uploadWs } from './api';
 import { encryptedSize } from './ece';
 
 export default class FileSender extends Nanobus {
-  constructor(file) {
+  constructor(file, timeLimit) {
     super('FileSender');
+    this.timeLimit = timeLimit || DEFAULT_EXPIRE_SECONDS;
     this.file = file;
     this.keychain = new Keychain();
     this.reset();
@@ -70,10 +71,16 @@ export default class FileSender extends Nanobus {
     const metadata = await this.keychain.encryptMetadata(this.file);
     const authKeyB64 = await this.keychain.authKeyB64();
 
-    this.uploadRequest = uploadWs(encStream, metadata, authKeyB64, p => {
-      this.progress = [p, totalSize];
-      this.emit('progress');
-    });
+    this.uploadRequest = uploadWs(
+      encStream,
+      metadata,
+      authKeyB64,
+      p => {
+        this.progress = [p, totalSize];
+        this.emit('progress');
+      },
+      this.timeLimit
+    );
 
     if (this.cancelled) {
       throw new Error(0);
@@ -97,10 +104,11 @@ export default class FileSender extends Nanobus {
         time: time,
         speed: this.file.size / (time / 1000),
         createdAt: Date.now(),
-        expiresAt: Date.now() + EXPIRE_SECONDS * 1000,
+        expiresAt: Date.now() + this.timeLimit * 1000,
         secretKey: secretKey,
         nonce: this.keychain.nonce,
-        ownerToken: result.ownerToken
+        ownerToken: result.ownerToken,
+        timeLimit: this.timeLimit
       });
 
       return ownedFile;

app/ownedFile.js

@@ -19,6 +19,7 @@ export default class OwnedFile {
     this.dtotal = obj.dtotal || 0;
     this.keychain = new Keychain(obj.secretKey, obj.nonce);
     this._hasPassword = !!obj.hasPassword;
+    this.timeLimit = obj.timeLimit;
   }
 
   async setPassword(password) {
@@ -80,7 +81,8 @@ export default class OwnedFile {
       ownerToken: this.ownerToken,
       dlimit: this.dlimit,
       dtotal: this.dtotal,
-      hasPassword: this.hasPassword
+      hasPassword: this.hasPassword,
+      timeLimit: this.timeLimit
     };
   }
 }

app/pages/share/index.js

@@ -1,10 +1,10 @@
-/* global EXPIRE_SECONDS */
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 const assets = require('../../../common/assets');
 const notFound = require('../notFound');
 const deletePopup = require('../../templates/popup');
 const uploadedFileList = require('../../templates/uploadedFileList');
+const timeLimitText = require('../../templates/timeLimitText');
 const { allowedCopy, delay, fadeOut } = require('../../utils');
 
 module.exports = function(state, emit) {
@@ -18,7 +18,6 @@ module.exports = function(state, emit) {
     : 'passwordReminder--hidden';
 
   return html`
-
     <div class="page effect--fadeIn" id="shareWrapper">
       <a href="/" class="goBackButton"> 
         <img src="${assets.get('back-arrow.svg')}"/> 
@@ -98,13 +97,14 @@ module.exports = function(state, emit) {
 };
 
 function expireInfo(file, translate) {
-  const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
-  const el = html`<div class="shareTitle">${raw(
-    translate('expireInfo', {
-      downloadCount: translate('downloadCount', { num: file.dlimit }),
-      timespan: translate('timespanHours', { num: hours })
-    })
-  )}</div>`;
+  const el = html`<div class="shareTitle">
+    ${raw(
+      translate('expireInfo', {
+        downloadCount: translate('downloadCount', { num: file.dlimit }),
+        timespan: timeLimitText(translate, file.timeLimit)
+      })
+    )}
+  </div>`;
 
   return el;
 }

app/pages/welcome/index.js

@@ -34,6 +34,7 @@ module.exports = function(state, emit) {
     ${title(state)}
 
     <label class="uploadArea"
+
       ondragover=${dragover}
       ondragleave=${dragleave}>
 

app/templates/expireInfo/index.js

@@ -1,12 +1,13 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 const selectbox = require('../selectbox');
+const timeLimitText = require('../timeLimitText');
 
 module.exports = function(state) {
   const el = html`<div> ${raw(
     state.translate('frontPageExpireInfo', {
       downloadCount: '<select id=dlCount></select>',
-      timespan: state.translate('timespanHours', { num: 24 }) //'<select id=timespan></select>'
+      timespan: '<select id=timespan></select>'
     })
   )}
   </div>`;
@@ -24,13 +25,18 @@ module.exports = function(state) {
     dlCountSelect
   );
 
-  /*
   const timeSelect = el.querySelector('#timespan');
   el.replaceChild(
-    selectbox(1, [1, 2, 3, 4, 5], num => num, () => {}),
+    selectbox(
+      state.timeLimit || 86400,
+      [300, 3600, 86400, 604800, 1209600],
+      num => timeLimitText(state.translate, num),
+      value => {
+        state.timeLimit = value;
+      }
+    ),
     timeSelect
   );
-  */
 
   return el;
 };

app/templates/file/index.js

@@ -51,6 +51,14 @@ module.exports = function(file, state) {
 function timeLeft(milliseconds, state) {
   const minutes = Math.floor(milliseconds / 1000 / 60);
   const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days >= 1) {
+    return state.translate('expiresDaysHoursMinutes', {
+      days,
+      hours: hours % 24,
+      minutes: minutes % 60
+    });
+  }
   if (hours >= 1) {
     return state.translate('expiresHoursMinutes', {
       hours,

app/templates/fileIcon/fileIcon.css

@@ -8,6 +8,7 @@
   width: 22px;
   height: 32px;
   overflow: hidden;
+  user-select: none;
 }
 
 .fileIcon__lock {

app/templates/signupPromo/signupPromo.css

@@ -56,7 +56,7 @@
   text-decoration: underline;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
+@media (max-device-width: 700px), (max-width: 700px) {
   .signupPromo {
     flex-direction: row;
     align-items: center;

app/templates/timeLimitText/index.js

@@ -0,0 +1,14 @@
+module.exports = function(translate, seconds) {
+  const displayText = {
+    300: translate('timespanMinutes', { num: 5 }),
+    3600: translate('timespanHours', { num: 1 }),
+    86400: translate('timespanHours', { num: 24 }),
+    604800: translate('timespanWeeks', { num: 1 }),
+    1209600: translate('timespanWeeks', { num: 2 })
+  };
+
+  if (displayText[seconds]) {
+    return displayText[seconds];
+  }
+  return seconds;
+};

app/templates/uploadedFileList/uploadedFileList.css

@@ -7,4 +7,5 @@
   align-content: center;
   flex: 1;
   overflow-y: scroll;
+  overflow-x: hidden;
 }