finished metrics
This commit is contained in:
Abhinav Adduri
parent
76a6f02eb7
commit
99477774cf
9 changed files with 542 additions and 173 deletions
|
|
@ -1,98 +1,142 @@
|
|||
const FileSender = require('./fileSender');
|
||||
const { notify, gcmCompliant } = require('./utils');
|
||||
const { notify, gcmCompliant, findMetric } = require('./utils');
|
||||
const $ = require('jquery');
|
||||
require('jquery-circle-progress');
|
||||
|
||||
const Raven = window.Raven;
|
||||
|
||||
if (!localStorage.hasOwnProperty('totalUploads')) {
|
||||
localStorage.setItem('totalUploads', 0);
|
||||
}
|
||||
|
||||
if (localStorage.hasOwnProperty('referrer')) {
|
||||
window.referrer = localStorage.getItem('referrer');
|
||||
localStorage.removeItem('referrer');
|
||||
} else {
|
||||
window.referrer = 'external';
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
gcmCompliant()
|
||||
.catch(err => {
|
||||
$('#page-one').attr('hidden', true);
|
||||
$('#unsupported-browser').removeAttr('hidden');
|
||||
if (!location.pathname.toString().includes('download')) {
|
||||
gcmCompliant()
|
||||
.catch(err => {
|
||||
$('#page-one').attr('hidden', true);
|
||||
$('#unsupported-browser').removeAttr('hidden');
|
||||
// record unsupported event
|
||||
window.analytics
|
||||
.sendEvent('sender', 'unsupported', {
|
||||
cd6: err
|
||||
});
|
||||
});
|
||||
|
||||
$('#file-upload').change(onUpload);
|
||||
|
||||
$('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
|
||||
target.preventDefault();
|
||||
let metric = findMetric(target.currentTarget.href);
|
||||
// record exited event by recipient
|
||||
window.analytics
|
||||
.sendEvent('sender', 'unsupported', {
|
||||
cd7: err
|
||||
.sendEvent('sender', 'exited', {
|
||||
cd3: metric
|
||||
})
|
||||
.then(() => {
|
||||
location.href = target.currentTarget.href;
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
$('#file-upload').change(onUpload);
|
||||
$('#send-new-completed').click(function(target) {
|
||||
target.preventDefault();
|
||||
// record restarted event
|
||||
window.analytics
|
||||
.sendEvent('sender', 'restarted', {
|
||||
cd2: 'completed'
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.setItem('referrer', 'completed-upload');
|
||||
location.href = target.currentTarget.href;
|
||||
});
|
||||
})
|
||||
|
||||
$('#send-new-completed').click(function() {
|
||||
window.analytics
|
||||
.sendEvent('sender', 'restarted', {
|
||||
cd2: 'completed'
|
||||
});
|
||||
})
|
||||
$('#send-new-error').click(function(target) {
|
||||
target.preventDefault();
|
||||
// record restarted event
|
||||
window.analytics
|
||||
.sendEvent('sender', 'restarted', {
|
||||
cd2: 'errored'
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.setItem('referrer', 'errored-upload');
|
||||
location.href = target.currentTarget.href;
|
||||
});
|
||||
})
|
||||
|
||||
$('#send-new-error').click(function() {
|
||||
window.analytics
|
||||
.sendEvent('sender', 'restarted', {
|
||||
cd2: 'errored'
|
||||
});
|
||||
})
|
||||
$('body').on('dragover', allowDrop).on('drop', onUpload);
|
||||
// reset copy button
|
||||
const $copyBtn = $('#copy-btn');
|
||||
$copyBtn.attr('disabled', false);
|
||||
$('#link').attr('disabled', false);
|
||||
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
|
||||
|
||||
$('body').on('dragover', allowDrop).on('drop', onUpload);
|
||||
// reset copy button
|
||||
const $copyBtn = $('#copy-btn');
|
||||
$copyBtn.attr('disabled', false);
|
||||
$('#link').attr('disabled', false);
|
||||
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
|
||||
|
||||
if (localStorage.length === 0) {
|
||||
toggleHeader();
|
||||
} else {
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const id = localStorage.key(i);
|
||||
//check if file exists before adding to list
|
||||
checkExistence(id, true);
|
||||
if (localStorage.length === 0) {
|
||||
toggleHeader();
|
||||
} else {
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const id = localStorage.key(i);
|
||||
//check if file exists before adding to list
|
||||
checkExistence(id, true);
|
||||
}
|
||||
}
|
||||
|
||||
// copy link to clipboard
|
||||
$copyBtn.click(() => {
|
||||
// record copied event from success screen
|
||||
window.analytics
|
||||
.sendEvent('sender', 'copied', {
|
||||
cd4: 'success-screen'
|
||||
});
|
||||
const aux = document.createElement('input');
|
||||
aux.setAttribute('value', $('#link').attr('value'));
|
||||
document.body.appendChild(aux);
|
||||
aux.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(aux);
|
||||
//disable button for 3s
|
||||
$copyBtn.attr('disabled', true);
|
||||
$('#link').attr('disabled', true);
|
||||
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
|
||||
window.setTimeout(() => {
|
||||
$copyBtn.attr('disabled', false);
|
||||
$('#link').attr('disabled', false);
|
||||
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
$('.upload-window').on('dragover', () => {
|
||||
$('.upload-window').addClass('ondrag');
|
||||
});
|
||||
$('.upload-window').on('dragleave', () => {
|
||||
$('.upload-window').removeClass('ondrag');
|
||||
});
|
||||
//initiate progress bar
|
||||
$('#ul-progress').circleProgress({
|
||||
value: 0.0,
|
||||
startAngle: -Math.PI / 2,
|
||||
fill: '#3B9DFF',
|
||||
size: 158,
|
||||
animation: { duration: 300 }
|
||||
});
|
||||
}
|
||||
|
||||
// copy link to clipboard
|
||||
$copyBtn.click(() => {
|
||||
window.analytics
|
||||
.sendEvent('sender', 'copied', {
|
||||
cd6: 'success-screen'
|
||||
});
|
||||
const aux = document.createElement('input');
|
||||
aux.setAttribute('value', $('#link').attr('value'));
|
||||
document.body.appendChild(aux);
|
||||
aux.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(aux);
|
||||
//disable button for 3s
|
||||
$copyBtn.attr('disabled', true);
|
||||
$('#link').attr('disabled', true);
|
||||
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
|
||||
window.setTimeout(() => {
|
||||
$copyBtn.attr('disabled', false);
|
||||
$('#link').attr('disabled', false);
|
||||
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
$('.upload-window').on('dragover', () => {
|
||||
$('.upload-window').addClass('ondrag');
|
||||
});
|
||||
$('.upload-window').on('dragleave', () => {
|
||||
$('.upload-window').removeClass('ondrag');
|
||||
});
|
||||
//initiate progress bar
|
||||
$('#ul-progress').circleProgress({
|
||||
value: 0.0,
|
||||
startAngle: -Math.PI / 2,
|
||||
fill: '#3B9DFF',
|
||||
size: 158,
|
||||
animation: { duration: 300 }
|
||||
});
|
||||
|
||||
//link back to homepage
|
||||
$('.send-new').attr('href', window.location);
|
||||
|
||||
// on file upload by browse or drag & drop
|
||||
function onUpload(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let totalUploads = localStorage.getItem('totalUploads');
|
||||
localStorage.setItem('totalUploads', Number(totalUploads) + 1);
|
||||
|
||||
let file = '';
|
||||
if (event.type === 'drop') {
|
||||
if (event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files[0].size === 0){
|
||||
|
|
@ -123,6 +167,18 @@ $(document).ready(function() {
|
|||
.then(str => {
|
||||
notify(str);
|
||||
});
|
||||
localStorage.setItem('referrer', 'cancelled-upload');
|
||||
|
||||
// record upload-stopped (cancelled) by sender
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-stopped', {
|
||||
cm1: file.size,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: event.type === 'drop' ? 'drop' : 'click',
|
||||
cd2: 'cancelled'
|
||||
});
|
||||
});
|
||||
|
||||
fileSender.on('progress', progress => {
|
||||
|
|
@ -165,27 +221,82 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
let uploadStart;
|
||||
fileSender.on('encrypting', isStillEncrypting => {
|
||||
// The file is being encrypted
|
||||
if (isStillEncrypting) {
|
||||
console.log('Encrypting');
|
||||
} else {
|
||||
console.log('Finished encrypting');
|
||||
uploadStart = new Date().getTime();
|
||||
}
|
||||
});
|
||||
let t = '';
|
||||
|
||||
let t;
|
||||
const startTime = new Date().getTime();
|
||||
|
||||
let unexpiredFiles = 0;
|
||||
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const id = localStorage.key(i);
|
||||
if (id != 'totalUploads' &&
|
||||
id != 'totalDownloads' &&
|
||||
id != 'referrer') {
|
||||
unexpiredFiles += 1;
|
||||
}
|
||||
}
|
||||
|
||||
let totalDownloads = 0;
|
||||
if (localStorage.hasOwnProperty('totalDownloads')) {
|
||||
totalDownloads = localStorage.getItem('totalDownloads');
|
||||
}
|
||||
|
||||
// record upload-started event by sender
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-started', {
|
||||
cm1: file.size,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: event.type === 'drop' ? 'drop' : 'click',
|
||||
cd5: window.referrer
|
||||
});
|
||||
|
||||
fileSender
|
||||
.upload()
|
||||
.then(info => {
|
||||
const endTime = new Date().getTime();
|
||||
const totalTime = endTime - startTime;
|
||||
const uploadTime = endTime - uploadStart;
|
||||
const uploadSpeed = file.size / (uploadTime / 1000);
|
||||
|
||||
// record upload-stopped (completed) by sender
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-stopped', {
|
||||
cm1: file.size,
|
||||
cm2: totalTime,
|
||||
cm3: uploadSpeed,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: event.type === 'drop' ? 'drop' : 'click',
|
||||
cd2: 'completed'
|
||||
});
|
||||
|
||||
const fileData = {
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
fileId: info.fileId,
|
||||
url: info.url,
|
||||
secretKey: info.secretKey,
|
||||
deleteToken: info.deleteToken,
|
||||
creationDate: new Date(),
|
||||
expiry: expiration
|
||||
expiry: expiration,
|
||||
totalTime: totalTime,
|
||||
typeOfUpload: event.type === 'drop' ? 'drop' : 'click',
|
||||
uploadSpeed: uploadSpeed
|
||||
};
|
||||
|
||||
localStorage.setItem(info.fileId, JSON.stringify(fileData));
|
||||
$('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
|
||||
t = window.setTimeout(() => {
|
||||
|
|
@ -208,6 +319,18 @@ $(document).ready(function() {
|
|||
$('#upload-progress').attr('hidden', true);
|
||||
$('#upload-error').removeAttr('hidden');
|
||||
window.clearTimeout(t);
|
||||
|
||||
// record upload-stopped (errored) by sender
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-stopped', {
|
||||
cm1: file.size,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: event.type === 'drop' ? 'drop' : 'click',
|
||||
cd2: 'errored',
|
||||
cd6: err
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +347,11 @@ $(document).ready(function() {
|
|||
populateFileList(localStorage.getItem(id));
|
||||
}
|
||||
} else if (xhr.status === 404) {
|
||||
localStorage.removeItem(id);
|
||||
if (id != 'totalUploads' &&
|
||||
id != 'totalDownloads' &&
|
||||
id != 'referrer') {
|
||||
localStorage.removeItem(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -282,9 +409,10 @@ $(document).ready(function() {
|
|||
|
||||
//copy link to clipboard when icon clicked
|
||||
$copyIcon.click(function() {
|
||||
// record copied event from upload list
|
||||
window.analytics
|
||||
.sendEvent('sender', 'copied', {
|
||||
cd6: 'upload-list'
|
||||
cd4: 'upload-list'
|
||||
});
|
||||
const aux = document.createElement('input');
|
||||
aux.setAttribute('value', url);
|
||||
|
|
@ -362,7 +490,6 @@ $(document).ready(function() {
|
|||
popupNvmSpan
|
||||
]);
|
||||
|
||||
|
||||
// add data cells to table row
|
||||
row.appendChild(name);
|
||||
$(link).append($copyIcon);
|
||||
|
|
@ -374,18 +501,67 @@ $(document).ready(function() {
|
|||
row.appendChild(del);
|
||||
$('tbody').append(row); //add row to table
|
||||
|
||||
let unexpiredFiles = 0;
|
||||
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const id = localStorage.key(i);
|
||||
if (id != 'totalUploads' &&
|
||||
id != 'totalDownloads' &&
|
||||
id != 'referrer') {
|
||||
unexpiredFiles += 1;
|
||||
}
|
||||
}
|
||||
|
||||
let totalDownloads = 0;
|
||||
if (localStorage.hasOwnProperty('totalDownloads')) {
|
||||
totalDownloads = localStorage.getItem('totalDownloads');
|
||||
}
|
||||
|
||||
// delete file
|
||||
$popupText.find('.del-file').click(e => {
|
||||
FileSender.delete(file.fileId, file.deleteToken).then(() => {
|
||||
$(e.target).parents('tr').remove();
|
||||
localStorage.removeItem(file.fileId);
|
||||
const timeToExpiry = 86400000 - (new Date().getTime() - file.creationDate.getTime());
|
||||
// record upload-deleted from file list
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-deleted', {
|
||||
cm1: file.size,
|
||||
cm2: file.totalTime,
|
||||
cm3: file.uploadSpeed,
|
||||
cm4: timeToExpiry,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: file.typeOfUpload,
|
||||
cd4: 'upload-list'
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.removeItem(file.fileId);
|
||||
})
|
||||
toggleHeader();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('delete-file').onclick = () => {
|
||||
FileSender.delete(file.fileId, file.deleteToken).then(() => {
|
||||
localStorage.removeItem(file.fileId);
|
||||
location.reload();
|
||||
const timeToExpiry = 86400000 - (new Date().getTime() - file.creationDate.getTime());
|
||||
// record upload-deleted from success screen
|
||||
window.analytics
|
||||
.sendEvent('sender', 'upload-deleted', {
|
||||
cm1: file.size,
|
||||
cm2: file.totalTime,
|
||||
cm3: file.uploadSpeed,
|
||||
cm4: timeToExpiry,
|
||||
cm5: localStorage.getItem('totalUploads'),
|
||||
cm6: unexpiredFiles,
|
||||
cm7: totalDownloads,
|
||||
cd1: file.typeOfUpload,
|
||||
cd4: 'success-screen'
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.removeItem(file.fileId);
|
||||
location.reload();
|
||||
})
|
||||
});
|
||||
};
|
||||
// show popup
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue