2017-08-11 02:01:39 +00:00
|
|
|
import FileSender from './fileSender';
|
|
|
|
import Storage from './storage';
|
|
|
|
import * as metrics from './metrics';
|
|
|
|
import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils';
|
2017-08-14 19:04:03 +00:00
|
|
|
import bel from 'bel';
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
const HOUR = 1000 * 60 * 60;
|
2017-08-11 02:01:39 +00:00
|
|
|
const storage = new Storage();
|
|
|
|
let fileList = null;
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
fileList = document.getElementById('file-list');
|
|
|
|
toggleHeader();
|
2017-08-14 01:44:59 +00:00
|
|
|
Promise.all(
|
|
|
|
storage.files.map(file => {
|
|
|
|
const id = file.fileId;
|
|
|
|
return checkExistence(id).then(exists => {
|
|
|
|
if (exists) {
|
|
|
|
addFile(storage.getFileById(id));
|
|
|
|
} else {
|
|
|
|
storage.remove(id);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
|
|
)
|
|
|
|
.catch(err => console.error(err))
|
|
|
|
.then(toggleHeader);
|
2017-08-11 02:01:39 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
function toggleHeader() {
|
|
|
|
fileList.hidden = storage.files.length === 0;
|
|
|
|
}
|
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function timeLeft(milliseconds) {
|
|
|
|
const minutes = Math.floor(milliseconds / 1000 / 60);
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
|
|
const seconds = Math.floor(milliseconds / 1000 % 60);
|
|
|
|
if (hours >= 1) {
|
|
|
|
return `${hours}h ${minutes % 60}m`;
|
|
|
|
} else if (hours === 0) {
|
|
|
|
return `${minutes}m ${seconds}s`;
|
|
|
|
}
|
|
|
|
return 'Expired';
|
|
|
|
}
|
|
|
|
|
2017-08-11 02:01:39 +00:00
|
|
|
function addFile(file) {
|
|
|
|
if (!file) {
|
|
|
|
return;
|
|
|
|
}
|
2017-08-14 19:04:03 +00:00
|
|
|
file.creationDate = new Date(file.creationDate);
|
|
|
|
const url = `${file.url}#${file.secretKey}`;
|
|
|
|
const future = new Date();
|
|
|
|
future.setTime(file.creationDate.getTime() + file.expiry);
|
|
|
|
const countdown = future.getTime() - Date.now();
|
|
|
|
|
|
|
|
const row = bel`
|
|
|
|
<tr>
|
|
|
|
<td>${file.name}</td>
|
|
|
|
<td>
|
|
|
|
<span class="icon-docs" data-l10n-id="copyUrlHover"></span>
|
|
|
|
<img onclick=${copyClick} src="/resources/copy-16.svg" class="icon-copy" data-l10n-id="copyUrlHover">
|
|
|
|
<span data-l10n-id="copiedUrl" class="text-copied" hidden="true"></span>
|
|
|
|
</td>
|
|
|
|
<td>${timeLeft(countdown)}</td>
|
|
|
|
<td>
|
|
|
|
<span class="icon-cancel-1" data-l10n-id="deleteButtonHover" title="Delete"></span>
|
|
|
|
<img onclick=${showPopup} src="/resources/close-16.svg" class="icon-delete" data-l10n-id="deleteButtonHover" title="Delete">
|
|
|
|
<div class="popup">
|
|
|
|
<div class="popuptext" onclick=${stopProp} onblur=${cancel} tabindex="-1">
|
|
|
|
<div class="popup-message" data-l10n-id="deletePopupText"></div>
|
|
|
|
<div class="popup-action">
|
|
|
|
<span class="popup-no" onclick=${cancel} data-l10n-id="deletePopupCancel"></span>
|
|
|
|
<span class="popup-yes" onclick=${deleteFile} data-l10n-id="deletePopupYes"></span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
`;
|
|
|
|
const popup = row.querySelector('.popuptext');
|
|
|
|
const timeCol = row.querySelectorAll('td')[2];
|
|
|
|
if (!allowedCopy()) {
|
|
|
|
row.querySelector('.icon-copy').disabled = true;
|
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
fileList.querySelector('tbody').appendChild(row);
|
|
|
|
toggleHeader();
|
|
|
|
poll();
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function copyClick(e) {
|
2017-08-11 02:01:39 +00:00
|
|
|
metrics.copiedLink({ location: 'upload-list' });
|
|
|
|
copyToClipboard(url);
|
2017-08-14 19:04:03 +00:00
|
|
|
const icon = e.target;
|
|
|
|
const text = e.target.nextSibling;
|
|
|
|
icon.hidden = true;
|
|
|
|
text.hidden = false;
|
2017-08-11 02:01:39 +00:00
|
|
|
setTimeout(() => {
|
2017-08-14 19:04:03 +00:00
|
|
|
icon.hidden = false;
|
|
|
|
text.hidden = true;
|
2017-08-11 02:01:39 +00:00
|
|
|
}, 500);
|
2017-08-14 19:04:03 +00:00
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function poll() {
|
|
|
|
const countdown = future.getTime() - Date.now();
|
2017-08-11 02:01:39 +00:00
|
|
|
if (countdown <= 0) {
|
|
|
|
storage.remove(file.fileId);
|
2017-08-14 19:04:03 +00:00
|
|
|
row.parentNode.removeChild(row);
|
2017-08-11 02:01:39 +00:00
|
|
|
toggleHeader();
|
|
|
|
}
|
2017-08-14 19:04:03 +00:00
|
|
|
timeCol.textContent = timeLeft(countdown);
|
|
|
|
setTimeout(poll, countdown >= HOUR ? 60000 : 1000);
|
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function deleteFile() {
|
|
|
|
FileSender.delete(file.fileId, file.deleteToken);
|
|
|
|
const ttl = ONE_DAY_IN_MS - (Date.now() - file.creationDate.getTime());
|
|
|
|
metrics.deletedUpload({
|
|
|
|
size: file.size,
|
|
|
|
time: file.totalTime,
|
|
|
|
speed: file.uploadSpeed,
|
|
|
|
type: file.typeOfUpload,
|
|
|
|
location: 'upload-list',
|
|
|
|
ttl
|
2017-08-11 02:01:39 +00:00
|
|
|
});
|
2017-08-14 19:04:03 +00:00
|
|
|
row.parentNode.removeChild(row);
|
|
|
|
storage.remove(file.fileId);
|
|
|
|
toggleHeader();
|
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function showPopup() {
|
|
|
|
popup.classList.add('show');
|
|
|
|
popup.focus();
|
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function cancel(e) {
|
2017-08-11 02:01:39 +00:00
|
|
|
e.stopPropagation();
|
2017-08-14 19:04:03 +00:00
|
|
|
popup.classList.remove('show');
|
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
|
2017-08-14 19:04:03 +00:00
|
|
|
function stopProp(e) {
|
2017-08-11 02:01:39 +00:00
|
|
|
e.stopPropagation();
|
2017-08-14 19:04:03 +00:00
|
|
|
}
|
2017-08-11 02:01:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function checkExistence(id) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.onreadystatechange = () => {
|
2017-08-14 01:44:59 +00:00
|
|
|
if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
|
2017-08-11 02:01:39 +00:00
|
|
|
resolve(xhr.status === 200);
|
|
|
|
}
|
|
|
|
};
|
2017-08-14 01:44:59 +00:00
|
|
|
xhr.onerror = reject;
|
|
|
|
xhr.ontimeout = reject;
|
2017-08-11 02:01:39 +00:00
|
|
|
xhr.open('get', '/exists/' + id);
|
2017-08-14 01:44:59 +00:00
|
|
|
xhr.timeout = 2000;
|
2017-08-11 02:01:39 +00:00
|
|
|
xhr.send();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export { addFile };
|