const html = require('choo/html'); const raw = require('choo/html/raw'); const assets = require('../../common/assets'); const { bytes, copyToClipboard, list, percent, timeLeft } = require('../utils'); const expiryOptions = require('./expiryOptions'); function expiryInfo(translate, archive) { const l10n = timeLeft(archive.expiresAt - Date.now()); return raw( translate('frontPageExpireInfo', { downloadCount: translate('downloadCount', { num: archive.dlimit - archive.dtotal }), timespan: translate(l10n.id, l10n) }) ); } function password(state) { const MAX_LENGTH = 32; return html`
`; function togglePasswordInput(event) { event.stopPropagation(); const checked = event.target.checked; const input = document.getElementById('password-input'); if (checked) { input.classList.remove('invisible'); input.focus(); } else { input.classList.add('invisible'); input.value = ''; document.getElementById('password-msg').textContent = ''; state.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.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 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)), 'list-reset h-full' ) }
`; } function toggled(event) { event.stopPropagation(); archive.open = event.target.open; } } module.exports = function(state, emit, archive) { return html`

${archive.name}

${bytes( archive.size )}

${expiryInfo(state.translate, archive)}
${archiveDetails(state.translate, archive)}
`; function copy(event) { event.stopPropagation(); copyToClipboard(archive.url); const text = event.target.lastChild; text.textContent = state.translate('copiedUrl'); setTimeout( () => (text.textContent = state.translate('copyUrlHover')), 1000 ); } function del(event) { event.stopPropagation(); emit('delete', { file: archive, location: 'success-screen' }); } }; module.exports.wip = function(state, emit) { return html`
${ list( Array.from(state.archive.files) .reverse() .map(f => fileInfo(f, remove(f))), 'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen', 'bg-white px-2 mt-3 border border-grey-light rounded' ) }
${expiryOptions(state, emit)} ${password(state, emit)}
`; function upload(event) { window.scrollTo(0, 0); event.preventDefault(); event.target.disabled = true; if (!state.uploading) { emit('upload', { type: 'click', dlimit: state.downloadCount || 1, password: state.password }); } } 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) { 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`

${archive.name}

${bytes( archive.size )}

${expiryInfo(state.translate, { dlimit: state.downloadCount || 1, dtotal: 0, expiresAt: Date.now() + 500 + state.timeLimit * 1000 })}
${progressPercent}
${progressPercent}
`; function cancel(event) { event.stopPropagation(); event.target.disabled = true; emit('cancel'); } }; module.exports.empty = function(state, emit) { return html`
${state.translate('uploadDropDragMessage')}
${state.translate('uploadDropClickMessage')}
`; 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; } return html`

${archive.name}

${bytes( archive.size )}

${archiveDetails(state.translate, archive)}
`; function download(event) { event.preventDefault(); event.target.disabled = true; emit('download', archive); } }; module.exports.downloading = function(state, emit) { const archive = state.fileInfo; const progress = state.transfer.progressRatio; const progressPercent = percent(progress); return html`

${archive.name}

${bytes( archive.size )}

${progressPercent}
${progressPercent}
`; function cancel(event) { event.preventDefault(); event.target.disabled = true; emit('download', archive); } };