/* global Android */ const html = require('choo/html'); const raw = require('choo/html/raw'); const assets = require('../../common/assets'); const { bytes, copyToClipboard, list, percent, platform, timeLeft } = require('../utils'); const expiryOptions = require('./expiryOptions'); function expiryInfo(translate, archive) { const l10n = timeLeft(archive.expiresAt - Date.now()); return raw( translate('archiveExpiryInfo', { downloadCount: translate('downloadCount', { num: archive.dlimit - archive.dtotal }), timespan: translate(l10n.id, l10n) }) ); } function password(state) { const MAX_LENGTH = 32; return html`
`; function onPasswordPreviewButtonclicked(event) { event.preventDefault(); const target = event.currentTarget; const input = document.getElementById('password-input'); const eyeOn = target.querySelector('img:first-child'); const eyeOff = target.querySelector('img:last-child'); if (input.type === 'password') { input.type = 'text'; eyeOn.classList.add('hidden'); eyeOff.classList.remove('hidden'); } else { input.type = 'password'; eyeOn.classList.remove('hidden'); eyeOff.classList.add('hidden'); } input.focus(); } function togglePasswordInput(event) { event.stopPropagation(); const checked = event.target.checked; const input = document.getElementById('password-input'); const passwordPreviewButton = document.getElementById( 'password-preview-button' ); if (checked) { input.classList.remove('invisible'); passwordPreviewButton.classList.remove('invisible'); input.focus(); } else { input.classList.add('invisible'); passwordPreviewButton.classList.add('invisible'); input.value = ''; document.getElementById('password-msg').textContent = ''; state.archive.password = null; } } function inputChanged() { const passwordInput = document.getElementById('password-input'); const pwdmsg = document.getElementById('password-msg'); const password = passwordInput.value; const length = password.length; if (length === MAX_LENGTH) { pwdmsg.textContent = state.translate('maxPasswordLength', { length: MAX_LENGTH }); } else { pwdmsg.textContent = ''; } state.archive.password = password; } function focused(event) { event.preventDefault(); const el = document.getElementById('password-input'); if (el.placeholder !== state.translate('unlockInputPlaceholder')) { el.placeholder = ''; } } } function fileInfo(file, action) { return html`

${file.name}

${bytes( file.size )}

${action}
`; } function archiveInfo(archive, action) { return html`

${archive.name}

${bytes( archive.size )}

${action}

`; } function archiveDetails(translate, archive) { if (archive.manifest.files.length > 1) { return html`
${translate('fileCount', { num: archive.manifest.files.length })} ${list(archive.manifest.files.map(f => fileInfo(f)))}
`; } function toggled(event) { event.stopPropagation(); archive.open = event.target.open; } } module.exports = function(state, emit, archive) { const copyOrShare = state.capabilities.share || platform() === 'android' ? html` ` : html` `; const dl = platform() === 'web' ? html` ${state.translate('downloadButtonLabel')} ` : html`
`; return html` ${archiveInfo( archive, html` ` )}
${expiryInfo(state.translate, archive)}
${archiveDetails(state.translate, archive)}
${dl} ${copyOrShare}
`; function copy(event) { event.stopPropagation(); copyToClipboard(archive.url); const text = event.target.lastChild; text.textContent = state.translate('copiedUrl'); setTimeout( () => (text.textContent = state.translate('copyLinkButton')), 1000 ); } function del(event) { event.stopPropagation(); emit('delete', archive); } async function share(event) { event.stopPropagation(); if (platform() === 'android') { Android.shareUrl(archive.url); } else { try { await navigator.share({ title: state.translate('-send-brand'), text: `Download "${archive.name}" with Send: simple, safe file sharing`, //state.translate('shareMessage', { name }), url: archive.url }); } catch (e) { // ignore } } } }; module.exports.wip = function(state, emit) { return html` ${list( Array.from(state.archive.files) .reverse() .map(f => fileInfo(f, remove(f, state.translate('deleteButtonHover'))) ), 'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black', 'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80' )}
${state.translate('totalSize', { size: bytes(state.archive.size) })}
${expiryOptions(state, emit)} ${password(state, emit)}
`; function focus(event) { event.target.nextElementSibling.firstElementChild.classList.add('outline'); } function blur(event) { event.target.nextElementSibling.firstElementChild.classList.remove( 'outline' ); } function upload(event) { window.scrollTo(0, 0); event.preventDefault(); event.target.disabled = true; if (!state.uploading) { emit('upload'); } } function add(event) { event.preventDefault(); const newFiles = Array.from(event.target.files); emit('addFiles', { files: newFiles }); setTimeout(() => { document .querySelector('#wip > ul > li:first-child') .scrollIntoView({ block: 'center' }); }); } function remove(file, desc) { return html` `; function del(event) { event.stopPropagation(); emit('removeUpload', file); } } }; module.exports.uploading = function(state, emit) { const progress = state.transfer.progressRatio; const progressPercent = percent(progress); const archive = state.archive; return html` ${archiveInfo(archive)}
${expiryInfo(state.translate, { dlimit: state.archive.dlimit, dtotal: 0, expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000 })}
${progressPercent}
`; function cancel(event) { event.stopPropagation(); event.target.disabled = true; emit('cancel'); } }; module.exports.empty = function(state, emit) { const upsell = state.user.loggedIn || !state.capabilities.account ? '' : html` `; return html`
${state.translate('dragAndDropFiles')}
${state.translate('orClickWithSize', { size: bytes(state.user.maxSize) })}
${upsell}
`; function focus(event) { event.target.nextElementSibling.classList.add('bg-blue-70', 'outline'); } function blur(event) { event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline'); } function add(event) { event.preventDefault(); const newFiles = Array.from(event.target.files); emit('addFiles', { files: newFiles }); } }; module.exports.preview = function(state, emit) { const archive = state.fileInfo; if (archive.open === undefined) { archive.open = true; } const single = archive.manifest.files.length === 1; const details = single ? '' : html`
${archiveDetails(state.translate, archive)}
`; return html`
${archiveInfo(archive)} ${details}
`; function download(event) { event.preventDefault(); event.target.disabled = true; emit('download', archive); } }; module.exports.downloading = function(state) { const archive = state.fileInfo; const progress = state.transfer.progressRatio; const progressPercent = percent(progress); return html` ${archiveInfo(archive)} ${progressPercent} `; };