1719 lines
60 KiB
JavaScript
1719 lines
60 KiB
JavaScript
const $ = query => document.getElementById(query);
|
|
const $$ = query => document.body.querySelector(query);
|
|
const isURL = text => /^(https?:\/\/|www)[^\s]+$/g.test(text.toLowerCase());
|
|
window.isProductionEnvironment = !window.location.host.startsWith('localhost');
|
|
window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
window.android = /android/i.test(navigator.userAgent);
|
|
window.pasteMode = {};
|
|
window.pasteMode.activated = false;
|
|
|
|
// set display name
|
|
Events.on('display-name', e => {
|
|
const me = e.detail.message;
|
|
const $displayName = $('displayName')
|
|
$displayName.textContent = 'You are known as ' + me.displayName;
|
|
$displayName.title = me.deviceName;
|
|
});
|
|
|
|
class PeersUI {
|
|
|
|
constructor() {
|
|
Events.on('peer-joined', e => this._onPeerJoined(e.detail));
|
|
Events.on('peer-connected', e => this._onPeerConnected(e.detail));
|
|
Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
|
|
Events.on('peers', e => this._onPeers(e.detail));
|
|
Events.on('set-progress', e => this._onSetProgress(e.detail));
|
|
Events.on('paste', e => this._onPaste(e));
|
|
Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
|
|
Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
|
|
this.peers = {};
|
|
|
|
this.$cancelPasteModeBtn = $('cancelPasteModeBtn');
|
|
this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
|
|
|
|
Events.on('dragover', e => this._onDragOver(e));
|
|
Events.on('dragleave', _ => this._onDragEnd());
|
|
Events.on('dragend', _ => this._onDragEnd());
|
|
|
|
Events.on('drop', e => this._onDrop(e));
|
|
Events.on('keydown', e => this._onKeyDown(e));
|
|
|
|
this.$xNoPeers = $$('x-no-peers');
|
|
this.$xInstructions = $$('x-instructions');
|
|
}
|
|
|
|
_onKeyDown(e) {
|
|
if (document.querySelectorAll('x-dialog[show]').length === 0 && window.pasteMode.activated && e.code === "Escape") {
|
|
Events.fire('deactivate-paste-mode');
|
|
}
|
|
}
|
|
|
|
_onPeerJoined(msg) {
|
|
this._joinPeer(msg.peer, msg.roomType, msg.roomSecret);
|
|
}
|
|
|
|
_joinPeer(peer, roomType, roomSecret) {
|
|
peer.roomType = roomType;
|
|
peer.roomSecret = roomSecret;
|
|
if (this.peers[peer.id]) {
|
|
this.peers[peer.id].roomType = peer.roomType;
|
|
this._redrawPeer(peer);
|
|
return; // peer already exists
|
|
}
|
|
this.peers[peer.id] = peer;
|
|
}
|
|
|
|
_onPeerConnected(peerId) {
|
|
if(this.peers[peerId] && !$(peerId))
|
|
new PeerUI(this.peers[peerId]);
|
|
}
|
|
|
|
_redrawPeer(peer) {
|
|
const peerNode = $(peer.id);
|
|
if (!peerNode) return;
|
|
peerNode.classList.remove('type-ip', 'type-secret');
|
|
peerNode.classList.add(`type-${peer.roomType}`)
|
|
}
|
|
|
|
_onPeers(msg) {
|
|
msg.peers.forEach(peer => this._joinPeer(peer, msg.roomType, msg.roomSecret));
|
|
}
|
|
|
|
_onPeerDisconnected(peerId) {
|
|
const $peer = $(peerId);
|
|
if (!$peer) return;
|
|
$peer.remove();
|
|
if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
|
|
}
|
|
|
|
_onSecretRoomDeleted(roomSecret) {
|
|
for (const peerId in this.peers) {
|
|
const peer = this.peers[peerId];
|
|
if (peer.roomSecret === roomSecret) {
|
|
this._onPeerDisconnected(peerId);
|
|
}
|
|
}
|
|
}
|
|
|
|
_onSetProgress(progress) {
|
|
const $peer = $(progress.peerId);
|
|
if (!$peer) return;
|
|
$peer.ui.setProgress(progress.progress, progress.status)
|
|
}
|
|
|
|
_onDrop(e) {
|
|
e.preventDefault();
|
|
if (!$$('x-peer') || !$$('x-peer').contains(e.target)) {
|
|
this._activatePasteMode(e.dataTransfer.files, '')
|
|
}
|
|
this._onDragEnd();
|
|
}
|
|
|
|
_onDragOver(e) {
|
|
e.preventDefault();
|
|
this.$xInstructions.setAttribute('drop-bg', 1);
|
|
this.$xNoPeers.setAttribute('drop-bg', 1);
|
|
}
|
|
|
|
_onDragEnd() {
|
|
this.$xInstructions.removeAttribute('drop-bg', 1);
|
|
this.$xNoPeers.removeAttribute('drop-bg');
|
|
}
|
|
|
|
_onPaste(e) {
|
|
if(document.querySelectorAll('x-dialog[show]').length === 0) {
|
|
// prevent send on paste when dialog is open
|
|
e.preventDefault()
|
|
const files = e.clipboardData.files;
|
|
const text = e.clipboardData.getData("Text");
|
|
if (files.length === 0 && text.length === 0) return;
|
|
this._activatePasteMode(files, text);
|
|
}
|
|
}
|
|
|
|
_activatePasteMode(files, text) {
|
|
if (!window.pasteMode.activated && (files.length > 0 || text.length > 0)) {
|
|
let descriptor;
|
|
let noPeersMessage;
|
|
|
|
if (files.length === 1) {
|
|
descriptor = files[0].name;
|
|
noPeersMessage = `Open PairDrop on other devices to send<br><i>${descriptor}</i>`;
|
|
} else if (files.length > 1) {
|
|
descriptor = `${files[0].name} and ${files.length-1} other files`;
|
|
noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
|
|
} else {
|
|
descriptor = "pasted text";
|
|
noPeersMessage = `Open PairDrop on other devices to send<br>${descriptor}`;
|
|
}
|
|
|
|
this.$xInstructions.querySelector('p').innerHTML = `<i>${descriptor}</i>`;
|
|
this.$xInstructions.querySelector('p').style.display = 'block';
|
|
this.$xInstructions.setAttribute('desktop', `Click to send`);
|
|
this.$xInstructions.setAttribute('mobile', `Tap to send`);
|
|
|
|
this.$xNoPeers.querySelector('h2').innerHTML = noPeersMessage;
|
|
|
|
const _callback = (e) => this._sendClipboardData(e, files, text);
|
|
Events.on('paste-pointerdown', _callback);
|
|
Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback));
|
|
|
|
this.$cancelPasteModeBtn.removeAttribute('hidden');
|
|
|
|
window.pasteMode.descriptor = descriptor;
|
|
window.pasteMode.activated = true;
|
|
|
|
console.log('Paste mode activated.');
|
|
Events.fire('paste-mode-changed');
|
|
}
|
|
}
|
|
|
|
_cancelPasteMode() {
|
|
Events.fire('deactivate-paste-mode');
|
|
}
|
|
|
|
_deactivatePasteMode(_callback) {
|
|
if (window.pasteMode.activated) {
|
|
window.pasteMode.descriptor = undefined;
|
|
window.pasteMode.activated = false;
|
|
Events.off('paste-pointerdown', _callback);
|
|
|
|
this.$xInstructions.querySelector('p').innerText = '';
|
|
this.$xInstructions.querySelector('p').style.display = 'none';
|
|
|
|
this.$xInstructions.setAttribute('desktop', 'Click to send files or right click to send a message');
|
|
this.$xInstructions.setAttribute('mobile', 'Tap to send files or long tap to send a message');
|
|
|
|
this.$xNoPeers.querySelector('h2').innerHTML = 'Open PairDrop on other devices to send files';
|
|
|
|
this.$cancelPasteModeBtn.setAttribute('hidden', "");
|
|
|
|
console.log('Paste mode deactivated.')
|
|
Events.fire('paste-mode-changed');
|
|
}
|
|
}
|
|
|
|
_sendClipboardData(e, files, text) {
|
|
// send the pasted file/text content
|
|
const peerId = e.detail.peerId;
|
|
|
|
if (files.length > 0) {
|
|
Events.fire('files-selected', {
|
|
files: files,
|
|
to: peerId
|
|
});
|
|
} else if (text.length > 0) {
|
|
Events.fire('send-text', {
|
|
text: text,
|
|
to: peerId
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
class PeerUI {
|
|
|
|
html() {
|
|
let title;
|
|
let input = '';
|
|
if (window.pasteMode.activated) {
|
|
title = `Click to send ${window.pasteMode.descriptor}`;
|
|
} else {
|
|
title = 'Click to send files or right click to send a message';
|
|
input = '<input type="file" multiple>';
|
|
}
|
|
this.$el.innerHTML = `
|
|
<label class="column center" title="${title}">
|
|
${input}
|
|
<x-icon shadow="1">
|
|
<svg class="icon"><use xlink:href="#"/></svg>
|
|
</x-icon>
|
|
<div class="progress">
|
|
<div class="circle"></div>
|
|
<div class="circle right"></div>
|
|
</div>
|
|
<div class="name font-subheading"></div>
|
|
<div class="device-name font-body2"></div>
|
|
<div class="status font-body2"></div>
|
|
</label>`;
|
|
|
|
this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
|
|
this.$el.querySelector('.name').textContent = this._displayName();
|
|
this.$el.querySelector('.device-name').textContent = this._deviceName();
|
|
}
|
|
|
|
constructor(peer) {
|
|
this._peer = peer;
|
|
this._roomType = peer.roomType;
|
|
this._roomSecret = peer.roomSecret;
|
|
this._initDom();
|
|
this._bindListeners();
|
|
$$('x-peers').appendChild(this.$el);
|
|
this.$xInstructions = $$('x-instructions');
|
|
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
|
|
}
|
|
|
|
_initDom() {
|
|
this.$el = document.createElement('x-peer');
|
|
this.$el.id = this._peer.id;
|
|
this.$el.ui = this;
|
|
this.$el.classList.add(`type-${this._roomType}`);
|
|
this.html();
|
|
|
|
this._callbackInput = e => this._onFilesSelected(e)
|
|
this._callbackClickSleep = _ => NoSleepUI.enable()
|
|
this._callbackTouchStartSleep = _ => NoSleepUI.enable()
|
|
this._callbackDrop = e => this._onDrop(e)
|
|
this._callbackDragEnd = e => this._onDragEnd(e)
|
|
this._callbackDragLeave = e => this._onDragEnd(e)
|
|
this._callbackDragOver = e => this._onDragOver(e)
|
|
this._callbackContextMenu = e => this._onRightClick(e)
|
|
this._callbackTouchStart = _ => this._onTouchStart()
|
|
this._callbackTouchEnd = e => this._onTouchEnd(e)
|
|
this._callbackPointerDown = e => this._onPointerDown(e)
|
|
// PasteMode
|
|
Events.on('paste-mode-changed', _ => this._onPasteModeChanged());
|
|
}
|
|
|
|
_onPasteModeChanged() {
|
|
this.html();
|
|
this._bindListeners();
|
|
}
|
|
|
|
_bindListeners() {
|
|
if(!window.pasteMode.activated) {
|
|
// Remove Events Paste Mode
|
|
this.$el.removeEventListener('pointerdown', this._callbackPointerDown);
|
|
|
|
// Add Events Normal Mode
|
|
this.$el.querySelector('input').addEventListener('change', this._callbackInput);
|
|
this.$el.addEventListener('click', this._callbackClickSleep);
|
|
this.$el.addEventListener('touchstart', this._callbackTouchStartSleep);
|
|
this.$el.addEventListener('drop', this._callbackDrop);
|
|
this.$el.addEventListener('dragend', this._callbackDragEnd);
|
|
this.$el.addEventListener('dragleave', this._callbackDragLeave);
|
|
this.$el.addEventListener('dragover', this._callbackDragOver);
|
|
this.$el.addEventListener('contextmenu', this._callbackContextMenu);
|
|
this.$el.addEventListener('touchstart', this._callbackTouchStart);
|
|
this.$el.addEventListener('touchend', this._callbackTouchEnd);
|
|
} else {
|
|
// Remove Events Normal Mode
|
|
this.$el.removeEventListener('click', this._callbackClickSleep);
|
|
this.$el.removeEventListener('touchstart', this._callbackTouchStartSleep);
|
|
this.$el.removeEventListener('drop', this._callbackDrop);
|
|
this.$el.removeEventListener('dragend', this._callbackDragEnd);
|
|
this.$el.removeEventListener('dragleave', this._callbackDragLeave);
|
|
this.$el.removeEventListener('dragover', this._callbackDragOver);
|
|
this.$el.removeEventListener('contextmenu', this._callbackContextMenu);
|
|
this.$el.removeEventListener('touchstart', this._callbackTouchStart);
|
|
this.$el.removeEventListener('touchend', this._callbackTouchEnd);
|
|
|
|
// Add Events Paste Mode
|
|
this.$el.addEventListener('pointerdown', this._callbackPointerDown);
|
|
}
|
|
}
|
|
|
|
_onPointerDown(e) {
|
|
// Prevents triggering of event twice on touch devices
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
Events.fire('paste-pointerdown', {
|
|
peerId: this._peer.id
|
|
});
|
|
}
|
|
|
|
_displayName() {
|
|
return this._peer.name.displayName;
|
|
}
|
|
|
|
_deviceName() {
|
|
return this._peer.name.deviceName;
|
|
}
|
|
|
|
_icon() {
|
|
const device = this._peer.name.device || this._peer.name;
|
|
if (device.type === 'mobile') {
|
|
return '#phone-iphone';
|
|
}
|
|
if (device.type === 'tablet') {
|
|
return '#tablet-mac';
|
|
}
|
|
return '#desktop-mac';
|
|
}
|
|
|
|
_onFilesSelected(e) {
|
|
const $input = e.target;
|
|
const files = $input.files;
|
|
Events.fire('files-selected', {
|
|
files: files,
|
|
to: this._peer.id
|
|
});
|
|
$input.files = null; // reset input
|
|
}
|
|
|
|
setProgress(progress, status) {
|
|
const $progress = this.$el.querySelector('.progress');
|
|
if (0.5 < progress && progress < 1) {
|
|
$progress.classList.add('over50');
|
|
} else {
|
|
$progress.classList.remove('over50');
|
|
}
|
|
if (progress < 1) {
|
|
this.$el.setAttribute('status', status);
|
|
} else {
|
|
this.$el.removeAttribute('status');
|
|
progress = 0;
|
|
}
|
|
const degrees = `rotate(${360 * progress}deg)`;
|
|
$progress.style.setProperty('--progress', degrees);
|
|
}
|
|
|
|
_onDrop(e) {
|
|
e.preventDefault();
|
|
Events.fire('files-selected', {
|
|
files: e.dataTransfer.files,
|
|
to: this._peer.id
|
|
});
|
|
this._onDragEnd();
|
|
}
|
|
|
|
_onDragOver() {
|
|
this.$el.setAttribute('drop', 1);
|
|
this.$xInstructions.setAttribute('drop-peer', 1);
|
|
}
|
|
|
|
_onDragEnd() {
|
|
this.$el.removeAttribute('drop');
|
|
this.$xInstructions.removeAttribute('drop-peer', 1);
|
|
}
|
|
|
|
_onRightClick(e) {
|
|
e.preventDefault();
|
|
Events.fire('text-recipient', this._peer.id);
|
|
}
|
|
|
|
_onTouchStart() {
|
|
this._touchStart = Date.now();
|
|
this._touchTimer = setTimeout(_ => this._onTouchEnd(), 610);
|
|
}
|
|
|
|
_onTouchEnd(e) {
|
|
if (Date.now() - this._touchStart < 500) {
|
|
clearTimeout(this._touchTimer);
|
|
} else { // this was a long tap
|
|
if (e) e.preventDefault();
|
|
Events.fire('text-recipient', this._peer.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
class Dialog {
|
|
constructor(id) {
|
|
this.$el = $(id);
|
|
this.$el.querySelectorAll('[close]').forEach(el => el.addEventListener('click', _ => this.hide()));
|
|
this.$autoFocus = this.$el.querySelector('[autofocus]');
|
|
Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
|
|
}
|
|
|
|
show() {
|
|
this.$el.setAttribute('show', 1);
|
|
if (this.$autoFocus) this.$autoFocus.focus();
|
|
}
|
|
|
|
hide() {
|
|
this.$el.removeAttribute('show');
|
|
if (this.$autoFocus) {
|
|
document.activeElement.blur();
|
|
window.blur();
|
|
}
|
|
document.title = 'PairDrop';
|
|
document.changeFavicon("images/favicon-96x96.png");
|
|
}
|
|
|
|
_onPeerDisconnected(peerId) {
|
|
if (this.correspondingPeerId === peerId) {
|
|
this.hide();
|
|
Events.fire('notify-user', 'Selected peer left.')
|
|
}
|
|
}
|
|
}
|
|
|
|
class ReceiveDialog extends Dialog {
|
|
constructor(id) {
|
|
super(id);
|
|
|
|
this.$fileDescriptionNode = this.$el.querySelector('.file-description');
|
|
this.$fileSizeNode = this.$el.querySelector('.file-size');
|
|
this.$previewBox = this.$el.querySelector('.file-preview')
|
|
}
|
|
|
|
_formatFileSize(bytes) {
|
|
// 1 GB = 1024 MB = 1024^2 KB = 1024^3 B
|
|
// 1024^2 = 104876; 1024^3 = 1073741824
|
|
if (bytes >= 1073741824) {
|
|
return Math.round(10 * bytes / 1073741824) / 10 + ' GB';
|
|
} else if (bytes >= 1048576) {
|
|
return Math.round(bytes / 1048576) + ' MB';
|
|
} else if (bytes > 1024) {
|
|
return Math.round(bytes / 1024) + ' KB';
|
|
} else {
|
|
return bytes + ' Bytes';
|
|
}
|
|
}
|
|
}
|
|
|
|
class ReceiveFileDialog extends ReceiveDialog {
|
|
|
|
constructor() {
|
|
super('receiveFileDialog');
|
|
|
|
this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload');
|
|
this.$receiveTitleNode = this.$el.querySelector('#receiveTitle')
|
|
|
|
Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
|
|
this._filesQueue = [];
|
|
}
|
|
|
|
_onFilesReceived(sender, files, request) {
|
|
this._nextFiles(sender, files, request);
|
|
window.blop.play();
|
|
}
|
|
|
|
_nextFiles(sender, nextFiles, nextRequest) {
|
|
if (nextFiles) this._filesQueue.push({peerId: sender, files: nextFiles, request: nextRequest});
|
|
if (this._busy) return;
|
|
this._busy = true;
|
|
const {peerId, files, request} = this._filesQueue.shift();
|
|
this._displayFiles(peerId, files, request);
|
|
}
|
|
|
|
_dequeueFile() {
|
|
if (!this._filesQueue.length) { // nothing to do
|
|
this._busy = false;
|
|
return;
|
|
}
|
|
// dequeue next file
|
|
setTimeout(_ => {
|
|
this._busy = false;
|
|
this._nextFiles();
|
|
}, 300);
|
|
}
|
|
|
|
createPreviewElement(file) {
|
|
return new Promise((resolve, reject) => {
|
|
let mime = file.type.split('/')[0]
|
|
let previewElement = {
|
|
image: 'img',
|
|
audio: 'audio',
|
|
video: 'video'
|
|
}
|
|
|
|
if (Object.keys(previewElement).indexOf(mime) === -1) {
|
|
resolve(false);
|
|
} else {
|
|
console.log('the file is able to preview');
|
|
let element = document.createElement(previewElement[mime]);
|
|
element.src = URL.createObjectURL(file);
|
|
element.controls = true;
|
|
element.classList.add('element-preview');
|
|
element.onload = _ => {
|
|
this.$previewBox.appendChild(element);
|
|
resolve(true)
|
|
};
|
|
element.addEventListener('loadeddata', _ => resolve(true));
|
|
element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
async _displayFiles(peerId, files, request) {
|
|
if (this.continueCallback) this.$shareOrDownloadBtn.removeEventListener("click", this.continueCallback);
|
|
|
|
let url;
|
|
let title;
|
|
let filenameDownload;
|
|
|
|
let descriptor = request.imagesOnly ? "Image" : "File";
|
|
|
|
let size = this._formatFileSize(request.totalSize);
|
|
let description = files[0].name;
|
|
|
|
let shareInsteadOfDownload = (window.iOS || window.android) && !!navigator.share && navigator.canShare({files});
|
|
|
|
if (files.length === 1) {
|
|
url = URL.createObjectURL(files[0])
|
|
title = `PairDrop - ${descriptor} Received`
|
|
filenameDownload = files[0].name;
|
|
} else {
|
|
title = `PairDrop - ${files.length} ${descriptor}s Received`
|
|
description += ` and ${files.length-1} other ${descriptor.toLowerCase()}`;
|
|
if(files.length>2) description += "s";
|
|
|
|
if(!shareInsteadOfDownload) {
|
|
let bytesCompleted = 0;
|
|
zipper.createNewZipWriter();
|
|
for (let i=0; i<files.length; i++) {
|
|
await zipper.addFile(files[i], {
|
|
onprogress: (progress) => {
|
|
Events.fire('set-progress', {
|
|
peerId: peerId,
|
|
progress: (bytesCompleted + progress) / request.totalSize,
|
|
status: 'process'
|
|
})
|
|
}
|
|
});
|
|
bytesCompleted += files[i].size;
|
|
}
|
|
url = await zipper.getBlobURL();
|
|
|
|
let now = new Date(Date.now());
|
|
let year = now.getFullYear().toString();
|
|
let month = (now.getMonth()+1).toString();
|
|
month = month.length < 2 ? "0" + month : month;
|
|
let date = now.getDate().toString();
|
|
date = date.length < 2 ? "0" + date : date;
|
|
let hours = now.getHours().toString();
|
|
hours = hours.length < 2 ? "0" + hours : hours;
|
|
let minutes = now.getMinutes().toString();
|
|
minutes = minutes.length < 2 ? "0" + minutes : minutes;
|
|
filenameDownload = `PairDrop_files_${year+month+date}_${hours+minutes}.zip`;
|
|
}
|
|
}
|
|
|
|
this.$receiveTitleNode.textContent = title;
|
|
this.$fileDescriptionNode.textContent = description;
|
|
this.$fileSizeNode.textContent = size;
|
|
|
|
if (shareInsteadOfDownload) {
|
|
this.$shareOrDownloadBtn.innerText = "Share";
|
|
this.continueCallback = async _ => {
|
|
navigator.share({
|
|
files: files
|
|
}).catch(err => console.error(err));
|
|
}
|
|
this.$shareOrDownloadBtn.addEventListener("click", this.continueCallback);
|
|
} else {
|
|
this.$shareOrDownloadBtn.innerText = "Download";
|
|
this.$shareOrDownloadBtn.download = filenameDownload;
|
|
this.$shareOrDownloadBtn.href = url;
|
|
}
|
|
|
|
this.createPreviewElement(files[0]).finally(_ => {
|
|
document.title = `PairDrop - ${files.length} Files received`;
|
|
document.changeFavicon("images/favicon-96x96-notification.png");
|
|
this.show();
|
|
Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'})
|
|
this.$shareOrDownloadBtn.click();
|
|
}).catch(r => console.error(r));
|
|
}
|
|
|
|
hide() {
|
|
this.$shareOrDownloadBtn.removeAttribute('href');
|
|
this.$shareOrDownloadBtn.removeAttribute('download');
|
|
this.$previewBox.innerHTML = '';
|
|
super.hide();
|
|
this._dequeueFile();
|
|
}
|
|
}
|
|
|
|
class ReceiveRequestDialog extends ReceiveDialog {
|
|
|
|
constructor() {
|
|
super('receiveRequestDialog');
|
|
|
|
this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName');
|
|
this.$fileStemNode = this.$el.querySelector('#fileStem');
|
|
this.$fileExtensionNode = this.$el.querySelector('#fileExtension');
|
|
this.$fileOtherNode = this.$el.querySelector('#fileOther');
|
|
|
|
this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest');
|
|
this.$declineRequestBtn = this.$el.querySelector('#declineRequest');
|
|
this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
|
|
this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
|
|
|
|
Events.on('files-transfer-request', e => this._onRequestFileTransfer(e.detail.request, e.detail.peerId))
|
|
Events.on('keydown', e => this._onKeyDown(e));
|
|
this._filesTransferRequestQueue = [];
|
|
}
|
|
|
|
_onKeyDown(e) {
|
|
if (this.$el.attributes["show"] && e.code === "Escape") {
|
|
this._respondToFileTransferRequest(false);
|
|
}
|
|
}
|
|
|
|
_onRequestFileTransfer(request, peerId) {
|
|
this._filesTransferRequestQueue.push({request: request, peerId: peerId});
|
|
if (this.$el.attributes["show"]) return;
|
|
this._dequeueRequests();
|
|
}
|
|
|
|
_dequeueRequests() {
|
|
if (!this._filesTransferRequestQueue.length) return;
|
|
let {request, peerId} = this._filesTransferRequestQueue.shift();
|
|
this._showRequestDialog(request, peerId)
|
|
}
|
|
|
|
_showRequestDialog(request, peerId) {
|
|
this.correspondingPeerId = peerId;
|
|
|
|
this.$requestingPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
|
|
|
|
const fileName = request.header[0].name;
|
|
const fileNameSplit = fileName.split('.');
|
|
const fileExtension = '.' + fileNameSplit[fileNameSplit.length - 1];
|
|
this.$fileStemNode.innerText = fileName.substring(0, fileName.length - fileExtension.length);
|
|
this.$fileExtensionNode.innerText = fileExtension
|
|
|
|
if (request.header.length >= 2) {
|
|
let fileOtherText = ` and ${request.header.length - 1} other `;
|
|
fileOtherText += request.imagesOnly ? 'image' : 'file';
|
|
if (request.header.length > 2) fileOtherText += "s";
|
|
this.$fileOtherNode.innerText = fileOtherText;
|
|
}
|
|
|
|
this.$fileSizeNode.innerText = this._formatFileSize(request.totalSize);
|
|
|
|
if (request.thumbnailDataUrl?.substring(0, 22) === "data:image/jpeg;base64") {
|
|
let element = document.createElement('img');
|
|
element.src = request.thumbnailDataUrl;
|
|
element.classList.add('element-preview');
|
|
|
|
this.$previewBox.appendChild(element)
|
|
}
|
|
|
|
document.title = 'PairDrop - File Transfer Requested';
|
|
document.changeFavicon("images/favicon-96x96-notification.png");
|
|
this.show();
|
|
}
|
|
|
|
_respondToFileTransferRequest(accepted) {
|
|
Events.fire('respond-to-files-transfer-request', {
|
|
to: this.correspondingPeerId,
|
|
accepted: accepted
|
|
})
|
|
if (accepted) {
|
|
Events.fire('set-progress', {peerId: this.correspondingPeerId, progress: 0, status: 'wait'});
|
|
NoSleepUI.enable();
|
|
}
|
|
this.hide();
|
|
}
|
|
|
|
hide() {
|
|
this.$previewBox.innerHTML = '';
|
|
super.hide();
|
|
setTimeout(_ => this._dequeueRequests(), 500);
|
|
}
|
|
}
|
|
|
|
class PairDeviceDialog extends Dialog {
|
|
constructor() {
|
|
super('pairDeviceDialog');
|
|
$('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
|
|
this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input');
|
|
this.$submitBtn = this.$el.querySelector('button[type="submit"]');
|
|
this.$roomKey = this.$el.querySelector('#roomKey');
|
|
this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
|
|
this.$clearSecretsBtn = $('clear-pair-devices');
|
|
this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
|
|
let createJoinForm = this.$el.querySelector('form');
|
|
createJoinForm.addEventListener('submit', _ => this._onSubmit());
|
|
|
|
this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
|
|
this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
|
|
this.$inputRoomKeyChars.forEach(el => el.addEventListener('keydown', e => this._onCharsKeyDown(e)));
|
|
this.$inputRoomKeyChars.forEach(el => el.addEventListener('focus', e => e.target.select()));
|
|
this.$inputRoomKeyChars.forEach(el => el.addEventListener('click', e => e.target.select()));
|
|
|
|
Events.on('keydown', e => this._onKeyDown(e));
|
|
Events.on('ws-connected', _ => this._onWsConnected());
|
|
Events.on('ws-disconnected', _ => this.hide());
|
|
Events.on('pair-device-initiated', e => this._pairDeviceInitiated(e.detail));
|
|
Events.on('pair-device-joined', e => this._pairDeviceJoined(e.detail.peerId, e.detail.roomSecret));
|
|
Events.on('pair-device-join-key-invalid', _ => this._pairDeviceJoinKeyInvalid());
|
|
Events.on('pair-device-canceled', e => this._pairDeviceCanceled(e.detail));
|
|
Events.on('clear-room-secrets', e => this._onClearRoomSecrets(e.detail))
|
|
Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
|
|
this.$el.addEventListener('paste', e => this._onPaste(e));
|
|
|
|
this.evaluateRoomKeyChars();
|
|
this.evaluateUrlAttributes();
|
|
}
|
|
|
|
_onCharsInput(e) {
|
|
e.target.value = e.target.value.replace(/\D/g,'');
|
|
if (!e.target.value) return;
|
|
this.evaluateRoomKeyChars();
|
|
|
|
let nextSibling = e.target.nextElementSibling;
|
|
if (nextSibling) {
|
|
e.preventDefault();
|
|
nextSibling.focus();
|
|
}
|
|
}
|
|
|
|
_onKeyDown(e) {
|
|
if (this.$el.attributes["show"] && e.code === "Escape") {
|
|
// Timeout to prevent paste mode from getting cancelled simultaneously
|
|
setTimeout(_ => this._pairDeviceCancel(), 50);
|
|
}
|
|
}
|
|
|
|
_onCharsKeyDown(e) {
|
|
let previousSibling = e.target.previousElementSibling;
|
|
let nextSibling = e.target.nextElementSibling;
|
|
if (e.key === "Backspace" && previousSibling && !e.target.value) {
|
|
previousSibling.value = '';
|
|
previousSibling.focus();
|
|
} else if (e.key === "ArrowRight" && nextSibling) {
|
|
e.preventDefault();
|
|
nextSibling.focus();
|
|
} else if (e.key === "ArrowLeft" && previousSibling) {
|
|
e.preventDefault();
|
|
previousSibling.focus();
|
|
}
|
|
}
|
|
|
|
_onPaste(e) {
|
|
e.preventDefault();
|
|
let num = e.clipboardData.getData("Text").replace(/\D/g,'').substring(0, 6);
|
|
for (let i = 0; i < num.length; i++) {
|
|
document.activeElement.value = num.charAt(i);
|
|
let nextSibling = document.activeElement.nextElementSibling;
|
|
if (!nextSibling) break;
|
|
nextSibling.focus();
|
|
}
|
|
this.evaluateRoomKeyChars();
|
|
}
|
|
|
|
evaluateRoomKeyChars() {
|
|
if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) {
|
|
this.$submitBtn.setAttribute("disabled", "");
|
|
} else {
|
|
this.inputRoomKey = "";
|
|
this.$inputRoomKeyChars.forEach(el => {
|
|
this.inputRoomKey += el.value;
|
|
})
|
|
this.$submitBtn.removeAttribute("disabled");
|
|
if (document.activeElement === this.$inputRoomKeyChars[5]) {
|
|
this._onSubmit();
|
|
}
|
|
}
|
|
}
|
|
|
|
evaluateUrlAttributes() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('room_key')) {
|
|
this._pairDeviceJoin(urlParams.get('room_key'));
|
|
window.history.replaceState({}, "title**", '/'); //remove room_key from url
|
|
}
|
|
}
|
|
|
|
_onWsConnected() {
|
|
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
|
|
Events.fire('room-secrets', roomSecrets);
|
|
this._evaluateNumberRoomSecrets();
|
|
}).catch(_ => PersistentStorage.logBrowserNotCapable());
|
|
}
|
|
|
|
_pairDeviceInitiate() {
|
|
Events.fire('pair-device-initiate');
|
|
}
|
|
|
|
_pairDeviceInitiated(msg) {
|
|
this.roomKey = msg.roomKey;
|
|
this.roomSecret = msg.roomSecret;
|
|
this.$roomKey.innerText = `${this.roomKey.substring(0,3)} ${this.roomKey.substring(3,6)}`
|
|
// Display the QR code for the url
|
|
const qr = new QRCode({
|
|
content: this._getShareRoomURL(),
|
|
width: 80,
|
|
height: 80,
|
|
padding: 0,
|
|
background: "transparent",
|
|
color: getComputedStyle(document.body).getPropertyValue('--text-color'),
|
|
ecl: "L",
|
|
join: true
|
|
});
|
|
this.$qrCode.innerHTML = qr.svg();
|
|
this.$inputRoomKeyChars.forEach(el => el.removeAttribute("disabled"));
|
|
this.show();
|
|
}
|
|
|
|
_getShareRoomURL() {
|
|
let url = new URL(location.href);
|
|
url.searchParams.append('room_key', this.roomKey)
|
|
return url.href;
|
|
}
|
|
|
|
_onSubmit() {
|
|
this._pairDeviceJoin(this.inputRoomKey);
|
|
}
|
|
|
|
_pairDeviceJoin(roomKey) {
|
|
if (/^\d{6}$/g.test(roomKey)) {
|
|
roomKey = roomKey.substring(0,6);
|
|
Events.fire('pair-device-join', roomKey);
|
|
let lastChar = this.$inputRoomKeyChars[5];
|
|
lastChar.focus();
|
|
}
|
|
}
|
|
|
|
_pairDeviceJoined(peerId, roomSecret) {
|
|
this.hide();
|
|
PersistentStorage.addRoomSecret(roomSecret).then(_ => {
|
|
Events.fire('notify-user', 'Devices paired successfully.');
|
|
const oldRoomSecret = $(peerId).ui.roomSecret;
|
|
if (oldRoomSecret) PersistentStorage.deleteRoomSecret(oldRoomSecret);
|
|
$(peerId).ui.roomSecret = roomSecret;
|
|
this._evaluateNumberRoomSecrets();
|
|
}).finally(_ => {
|
|
this._cleanUp();
|
|
})
|
|
.catch(_ => {
|
|
Events.fire('notify-user', 'Paired devices are not persistent.');
|
|
PersistentStorage.logBrowserNotCapable();
|
|
});
|
|
}
|
|
|
|
_pairDeviceJoinKeyInvalid() {
|
|
Events.fire('notify-user', 'Key not valid');
|
|
}
|
|
|
|
_pairDeviceCancel() {
|
|
this.hide();
|
|
this._cleanUp();
|
|
Events.fire('pair-device-cancel');
|
|
}
|
|
|
|
_pairDeviceCanceled(roomKey) {
|
|
Events.fire('notify-user', `Key ${roomKey} invalidated.`);
|
|
}
|
|
|
|
_cleanUp() {
|
|
this.roomSecret = null;
|
|
this.roomKey = null;
|
|
this.inputRoomKey = '';
|
|
this.$inputRoomKeyChars.forEach(el => el.value = '');
|
|
this.$inputRoomKeyChars.forEach(el => el.setAttribute("disabled", ""));
|
|
}
|
|
|
|
_onClearRoomSecrets() {
|
|
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
|
|
Events.fire('room-secrets-cleared', roomSecrets);
|
|
PersistentStorage.clearRoomSecrets().finally(_ => {
|
|
Events.fire('notify-user', 'All Devices unpaired.')
|
|
this._evaluateNumberRoomSecrets();
|
|
})
|
|
}).catch(_ => PersistentStorage.logBrowserNotCapable());
|
|
}
|
|
|
|
_onSecretRoomDeleted(roomSecret) {
|
|
PersistentStorage.deleteRoomSecret(roomSecret).then(_ => {
|
|
this._evaluateNumberRoomSecrets();
|
|
}).catch(e => console.error(e));
|
|
}
|
|
|
|
_evaluateNumberRoomSecrets() {
|
|
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
|
|
if (roomSecrets.length > 0) {
|
|
this.$clearSecretsBtn.removeAttribute('hidden');
|
|
this.$footerInstructionsPairedDevices.removeAttribute('hidden');
|
|
} else {
|
|
this.$clearSecretsBtn.setAttribute('hidden', '');
|
|
this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
|
|
}
|
|
}).catch(_ => PersistentStorage.logBrowserNotCapable());
|
|
}
|
|
}
|
|
|
|
class ClearDevicesDialog extends Dialog {
|
|
constructor() {
|
|
super('clearDevicesDialog');
|
|
$('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
|
|
let clearDevicesForm = this.$el.querySelector('form');
|
|
clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
|
|
}
|
|
|
|
_onClearPairDevices() {
|
|
this.show();
|
|
}
|
|
|
|
_onSubmit() {
|
|
Events.fire('clear-room-secrets');
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
class SendTextDialog extends Dialog {
|
|
constructor() {
|
|
super('sendTextDialog');
|
|
Events.on('text-recipient', e => this._onRecipient(e.detail));
|
|
this.$text = this.$el.querySelector('#textInput');
|
|
this.$form = this.$el.querySelector('form');
|
|
this.$submit = this.$el.querySelector('button[type="submit"]');
|
|
this.$form.addEventListener('submit', _ => this._send());
|
|
this.$text.addEventListener('input', e => this._onChange(e));
|
|
Events.on("keydown", e => this._onKeyDown(e));
|
|
}
|
|
|
|
async _onKeyDown(e) {
|
|
if (this.$el.attributes["show"]) {
|
|
if (e.code === "Escape") {
|
|
this.hide();
|
|
} else if (e.code === "Enter" && (e.ctrlKey || e.metaKey)) {
|
|
if (this._textInputEmpty()) return;
|
|
this._send();
|
|
}
|
|
}
|
|
}
|
|
|
|
_textInputEmpty() {
|
|
return this.$text.innerText === "\n";
|
|
}
|
|
|
|
_onChange(e) {
|
|
if (this._textInputEmpty()) {
|
|
this.$submit.setAttribute('disabled', '');
|
|
} else {
|
|
this.$submit.removeAttribute('disabled');
|
|
}
|
|
}
|
|
|
|
_onRecipient(peerId) {
|
|
this.correspondingPeerId = peerId;
|
|
this.show();
|
|
|
|
const range = document.createRange();
|
|
const sel = window.getSelection();
|
|
|
|
this.$text.focus();
|
|
range.selectNodeContents(this.$text);
|
|
sel.removeAllRanges();
|
|
sel.addRange(range);
|
|
}
|
|
|
|
_send() {
|
|
Events.fire('send-text', {
|
|
to: this.correspondingPeerId,
|
|
text: this.$text.innerText
|
|
});
|
|
this.$text.value = "";
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
class ReceiveTextDialog extends Dialog {
|
|
constructor() {
|
|
super('receiveTextDialog');
|
|
Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
|
|
this.$text = this.$el.querySelector('#text');
|
|
this.$copy = this.$el.querySelector('#copy');
|
|
this.$close = this.$el.querySelector('#close');
|
|
|
|
this.$copy.addEventListener('click', _ => this._onCopy());
|
|
this.$close.addEventListener('click', _ => this.hide());
|
|
|
|
Events.on("keydown", e => this._onKeyDown(e));
|
|
|
|
this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName');
|
|
this._receiveTextQueue = [];
|
|
}
|
|
|
|
async _onKeyDown(e) {
|
|
if (this.$el.attributes["show"]) {
|
|
if (e.code === "KeyC" && (e.ctrlKey || e.metaKey)) {
|
|
await this._onCopy()
|
|
this.hide();
|
|
} else if (e.code === "Escape") {
|
|
this.hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
_onText(text, peerId) {
|
|
window.blop.play();
|
|
this._receiveTextQueue.push({text: text, peerId: peerId});
|
|
if (this.$el.attributes["show"]) return;
|
|
this._dequeueRequests();
|
|
}
|
|
|
|
_dequeueRequests() {
|
|
if (!this._receiveTextQueue.length) return;
|
|
let {text, peerId} = this._receiveTextQueue.shift();
|
|
this._showReceiveTextDialog(text, peerId);
|
|
}
|
|
|
|
_showReceiveTextDialog(text, peerId) {
|
|
this.$receiveTextPeerDisplayNameNode.innerText = $(peerId).ui._displayName();
|
|
|
|
if (isURL(text)) {
|
|
const $a = document.createElement('a');
|
|
$a.href = text;
|
|
$a.target = '_blank';
|
|
$a.textContent = text;
|
|
this.$text.innerHTML = '';
|
|
this.$text.appendChild($a);
|
|
} else {
|
|
this.$text.textContent = text;
|
|
}
|
|
document.title = 'PairDrop - Message Received';
|
|
document.changeFavicon("images/favicon-96x96-notification.png");
|
|
this.show();
|
|
}
|
|
|
|
async _onCopy() {
|
|
await navigator.clipboard.writeText(this.$text.textContent);
|
|
Events.fire('notify-user', 'Copied to clipboard');
|
|
this.hide();
|
|
}
|
|
|
|
hide() {
|
|
super.hide();
|
|
setTimeout(_ => this._dequeueRequests(), 500);
|
|
}
|
|
}
|
|
|
|
class Base64ZipDialog extends Dialog {
|
|
|
|
constructor() {
|
|
super('base64ZipDialog');
|
|
const urlParams = new URL(window.location).searchParams;
|
|
const base64Zip = urlParams.get('base64zip');
|
|
const base64Text = urlParams.get('base64text');
|
|
this.$pasteBtn = this.$el.querySelector('#base64ZipPasteBtn')
|
|
this.$pasteBtn.addEventListener('click', _ => this.processClipboard())
|
|
|
|
if (base64Text) {
|
|
this.processBase64Text(base64Text);
|
|
} else if (base64Zip) {
|
|
if (!navigator.clipboard.readText) {
|
|
setTimeout(_ => Events.fire('notify-user', 'This feature is not available on your device.'), 500);
|
|
this.clearBrowserHistory();
|
|
return;
|
|
}
|
|
this.show();
|
|
}
|
|
}
|
|
|
|
processBase64Text(base64Text){
|
|
try {
|
|
let decodedText = decodeURIComponent(escape(window.atob(base64Text)));
|
|
Events.fire('activate-paste-mode', {files: [], text: decodedText});
|
|
} catch (e) {
|
|
setTimeout(_ => Events.fire('notify-user', 'Content incorrect.'), 500);
|
|
} finally {
|
|
this.clearBrowserHistory();
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
async processClipboard() {
|
|
this.$pasteBtn.pointerEvents = "none";
|
|
this.$pasteBtn.innerText = "Processing...";
|
|
try {
|
|
const base64zip = await navigator.clipboard.readText();
|
|
let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
|
|
const zipBlob = new File([u8arr], 'archive.zip');
|
|
|
|
let files = [];
|
|
const zipEntries = await zipper.getEntries(zipBlob);
|
|
for (let i = 0; i < zipEntries.length; i++) {
|
|
let fileBlob = await zipper.getData(zipEntries[i]);
|
|
files.push(new File([fileBlob], zipEntries[i].filename));
|
|
}
|
|
Events.fire('activate-paste-mode', {files: files, text: ""})
|
|
} catch (e) {
|
|
Events.fire('notify-user', 'Clipboard content is incorrect.')
|
|
} finally {
|
|
this.clearBrowserHistory();
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
clearBrowserHistory() {
|
|
window.history.replaceState({}, "Rewrite URL", '/');
|
|
}
|
|
}
|
|
|
|
class Toast extends Dialog {
|
|
constructor() {
|
|
super('toast');
|
|
Events.on('notify-user', e => this._onNotify(e.detail));
|
|
}
|
|
|
|
_onNotify(message) {
|
|
if (this.hideTimeout) clearTimeout(this.hideTimeout);
|
|
this.$el.textContent = message;
|
|
this.show();
|
|
this.hideTimeout = setTimeout(_ => this.hide(), 5000);
|
|
}
|
|
}
|
|
|
|
class Notifications {
|
|
|
|
constructor() {
|
|
// Check if the browser supports notifications
|
|
if (!('Notification' in window)) return;
|
|
|
|
// Check whether notification permissions have already been granted
|
|
if (Notification.permission !== 'granted') {
|
|
this.$button = $('notification');
|
|
this.$button.removeAttribute('hidden');
|
|
this.$button.addEventListener('click', _ => this._requestPermission());
|
|
}
|
|
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
|
|
Events.on('files-received', e => this._downloadNotification(e.detail.files));
|
|
}
|
|
|
|
_requestPermission() {
|
|
Notification.requestPermission(permission => {
|
|
if (permission !== 'granted') {
|
|
Events.fire('notify-user', Notifications.PERMISSION_ERROR || 'Error');
|
|
return;
|
|
}
|
|
Events.fire('notify-user', 'Notifications enabled.');
|
|
this.$button.setAttribute('hidden', 1);
|
|
});
|
|
}
|
|
|
|
_notify(title, body) {
|
|
const config = {
|
|
body: body,
|
|
icon: '/images/logo_transparent_128x128.png',
|
|
}
|
|
let notification;
|
|
try {
|
|
notification = new Notification(title, config);
|
|
} catch (e) {
|
|
// Android doesn't support "new Notification" if service worker is installed
|
|
if (!serviceWorker || !serviceWorker.showNotification) return;
|
|
notification = serviceWorker.showNotification(title, config);
|
|
}
|
|
|
|
// Notification is persistent on Android. We have to close it manually
|
|
const visibilitychangeHandler = () => {
|
|
if (document.visibilityState === 'visible') {
|
|
notification.close();
|
|
Events.off('visibilitychange', visibilitychangeHandler);
|
|
}
|
|
};
|
|
Events.on('visibilitychange', visibilitychangeHandler);
|
|
|
|
return notification;
|
|
}
|
|
|
|
_messageNotification(message, peerId) {
|
|
if (document.visibilityState !== 'visible') {
|
|
const peerDisplayName = $(peerId).ui._displayName();
|
|
if (isURL(message)) {
|
|
const notification = this._notify(`Link received by ${peerDisplayName} - Click to open`, message);
|
|
this._bind(notification, _ => window.open(message, '_blank', null, true));
|
|
} else {
|
|
const notification = this._notify(`Message received by ${peerDisplayName} - Click to copy`, message);
|
|
this._bind(notification, _ => this._copyText(message, notification));
|
|
}
|
|
}
|
|
}
|
|
|
|
_downloadNotification(files) {
|
|
if (document.visibilityState !== 'visible') {
|
|
let imagesOnly = true;
|
|
for(let i=0; i<files.length; i++) {
|
|
if (files[i].type.split('/')[0] !== 'image') {
|
|
imagesOnly = false;
|
|
break;
|
|
}
|
|
}
|
|
let title = files[0].name;
|
|
if (files.length >= 2) {
|
|
title += ` and ${files.length - 1} other `;
|
|
title += imagesOnly ? 'image' : 'file';
|
|
if (files.length > 2) title += "s";
|
|
}
|
|
const notification = this._notify(title, 'Click to download');
|
|
this._bind(notification, _ => this._download(notification));
|
|
}
|
|
}
|
|
|
|
_download(notification) {
|
|
$('shareOrDownload').click();
|
|
notification.close();
|
|
}
|
|
|
|
_copyText(message, notification) {
|
|
if (navigator.clipboard.writeText(message)) {
|
|
notification.close();
|
|
this._notify('Copied text to clipboard');
|
|
} else {
|
|
this._notify('Writing to clipboard failed. Copy manually!');
|
|
|
|
}
|
|
}
|
|
|
|
_bind(notification, handler) {
|
|
if (notification.then) {
|
|
notification.then(_ => serviceWorker.getNotifications().then(_ => {
|
|
serviceWorker.addEventListener('notificationclick', handler);
|
|
}));
|
|
} else {
|
|
notification.onclick = handler;
|
|
}
|
|
}
|
|
}
|
|
|
|
class NetworkStatusUI {
|
|
|
|
constructor() {
|
|
Events.on('offline', _ => this._showOfflineMessage());
|
|
Events.on('online', _ => this._showOnlineMessage());
|
|
Events.on('ws-connected', _ => this._showOnlineMessage());
|
|
Events.on('ws-disconnected', _ => this._onWsDisconnected());
|
|
if (!navigator.onLine) this._showOfflineMessage();
|
|
}
|
|
|
|
_showOfflineMessage() {
|
|
Events.fire('notify-user', 'You are offline');
|
|
window.animateBackground(false);
|
|
}
|
|
|
|
_showOnlineMessage() {
|
|
window.animateBackground(true);
|
|
if (!this.firstConnect) {
|
|
this.firstConnect = true;
|
|
return;
|
|
}
|
|
Events.fire('notify-user', 'You are back online');
|
|
}
|
|
|
|
_onWsDisconnected() {
|
|
window.animateBackground(false);
|
|
if (!this.firstConnect) this.firstConnect = true;
|
|
}
|
|
}
|
|
|
|
class WebShareTargetUI {
|
|
constructor() {
|
|
const urlParams = new URL(window.location).searchParams;
|
|
const share_target_type = urlParams.get("share-target")
|
|
if (share_target_type) {
|
|
if (share_target_type === "text") {
|
|
const title = urlParams.get('title') || '';
|
|
const text = urlParams.get('text') || '';
|
|
const url = urlParams.get('url') || '';
|
|
let shareTargetText;
|
|
|
|
if (url) {
|
|
shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
|
|
} else if (title && text) {
|
|
shareTargetText = title + '\r\n' + text;
|
|
} else {
|
|
shareTargetText = title + text;
|
|
}
|
|
|
|
console.log('Shared Target Text:', '"' + shareTargetText + '"');
|
|
Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
|
|
} else if (share_target_type === "files") {
|
|
const openRequest = window.indexedDB.open('pairdrop_store')
|
|
openRequest.onsuccess( db => {
|
|
const tx = db.transaction('share_target_files', 'readwrite');
|
|
const store = tx.objectStore('share_target_files');
|
|
const request = store.getAll();
|
|
request.onsuccess = _ => {
|
|
Events.fire('activate-paste-mode', {files: request.result, text: ""})
|
|
const clearRequest = store.clear()
|
|
clearRequest.onsuccess = _ => db.close();
|
|
}
|
|
})
|
|
}
|
|
window.history.replaceState({}, "Rewrite URL", '/');
|
|
}
|
|
}
|
|
}
|
|
|
|
class WebFileHandlersUI {
|
|
constructor() {
|
|
const urlParams = new URL(window.location).searchParams;
|
|
if (urlParams.has("file_handler") && "launchQueue" in window) {
|
|
launchQueue.setConsumer(async launchParams => {
|
|
console.log("Launched with: ", launchParams);
|
|
if (!launchParams.files.length)
|
|
return;
|
|
let files = [];
|
|
|
|
for (let i=0; i<launchParams.files.length; i++) {
|
|
if (i !== 0 && await launchParams.files[i].isSameEntry(launchParams.files[i-1])) continue;
|
|
const fileHandle = launchParams.files[i];
|
|
const file = await fileHandle.getFile();
|
|
files.push(file);
|
|
}
|
|
Events.fire('activate-paste-mode', {files: files, text: ""})
|
|
launchParams = null;
|
|
});
|
|
window.history.replaceState({}, "Rewrite URL", '/');
|
|
}
|
|
}
|
|
}
|
|
|
|
class NoSleepUI {
|
|
constructor() {
|
|
NoSleepUI._nosleep = new NoSleep();
|
|
}
|
|
|
|
static enable() {
|
|
if (!this._interval) {
|
|
NoSleepUI._nosleep.enable();
|
|
NoSleepUI._interval = setInterval(_ => NoSleepUI.disable(), 10000);
|
|
}
|
|
}
|
|
|
|
static disable() {
|
|
if ($$('x-peer[status]') === null) {
|
|
clearInterval(NoSleepUI._interval);
|
|
NoSleepUI._nosleep.disable();
|
|
}
|
|
}
|
|
}
|
|
|
|
class PersistentStorage {
|
|
constructor() {
|
|
if (!('indexedDB' in window)) {
|
|
PersistentStorage.logBrowserNotCapable();
|
|
return;
|
|
}
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store', 2);
|
|
DBOpenRequest.onerror = (e) => {
|
|
PersistentStorage.logBrowserNotCapable();
|
|
console.log('Error initializing database: ');
|
|
console.log(e)
|
|
};
|
|
DBOpenRequest.onsuccess = () => {
|
|
console.log('Database initialised.');
|
|
};
|
|
DBOpenRequest.onupgradeneeded = (e) => {
|
|
const db = e.target.result;
|
|
db.onerror = e => console.log('Error loading database: ' + e);
|
|
try {
|
|
db.createObjectStore('keyval');
|
|
} catch (error) {
|
|
console.log("Object store named 'keyval' already exists")
|
|
}
|
|
|
|
try {
|
|
const roomSecretsObjectStore = db.createObjectStore('room_secrets', {autoIncrement: true});
|
|
roomSecretsObjectStore.createIndex('secret', 'secret', { unique: true });
|
|
} catch (error) {
|
|
console.log("Object store named 'room_secrets' already exists")
|
|
}
|
|
|
|
try {
|
|
db.createObjectStore('share_target_files');
|
|
} catch (error) {
|
|
console.log("Object store named 'share_target_files' already exists")
|
|
}
|
|
}
|
|
}
|
|
|
|
static logBrowserNotCapable() {
|
|
console.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
|
|
}
|
|
|
|
static set(key, value) {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('keyval', 'readwrite');
|
|
const objectStore = transaction.objectStore('keyval');
|
|
const objectStoreRequest = objectStore.put(value, key);
|
|
objectStoreRequest.onsuccess = _ => {
|
|
console.log(`Request successful. Added key-pair: ${key} - ${value}`);
|
|
resolve(value);
|
|
};
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
})
|
|
}
|
|
|
|
static get(key) {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('keyval', 'readwrite');
|
|
const objectStore = transaction.objectStore('keyval');
|
|
const objectStoreRequest = objectStore.get(key);
|
|
objectStoreRequest.onsuccess = _ => {
|
|
console.log(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
|
|
resolve(objectStoreRequest.result);
|
|
}
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
static delete(key) {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('keyval', 'readwrite');
|
|
const objectStore = transaction.objectStore('keyval');
|
|
const objectStoreRequest = objectStore.delete(key);
|
|
objectStoreRequest.onsuccess = _ => {
|
|
console.log(`Request successful. Deleted key: ${key}`);
|
|
resolve();
|
|
};
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
})
|
|
}
|
|
|
|
static addRoomSecret(roomSecret) {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('room_secrets', 'readwrite');
|
|
const objectStore = transaction.objectStore('room_secrets');
|
|
const objectStoreRequest = objectStore.add({'secret': roomSecret});
|
|
objectStoreRequest.onsuccess = _ => {
|
|
console.log(`Request successful. RoomSecret added: ${roomSecret}`);
|
|
resolve();
|
|
}
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
})
|
|
}
|
|
|
|
static getAllRoomSecrets() {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('room_secrets', 'readwrite');
|
|
const objectStore = transaction.objectStore('room_secrets');
|
|
const objectStoreRequest = objectStore.getAll();
|
|
objectStoreRequest.onsuccess = e => {
|
|
let secrets = [];
|
|
for (let i=0; i<e.target.result.length; i++) {
|
|
secrets.push(e.target.result[i].secret);
|
|
}
|
|
console.log(`Request successful. Retrieved ${secrets.length} room_secrets`);
|
|
resolve(secrets);
|
|
}
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
static deleteRoomSecret(room_secret) {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('room_secrets', 'readwrite');
|
|
const objectStore = transaction.objectStore('room_secrets');
|
|
const objectStoreRequestKey = objectStore.index("secret").getKey(room_secret);
|
|
objectStoreRequestKey.onsuccess = e => {
|
|
if (!e.target.result) {
|
|
console.log(`Nothing to delete. room_secret not existing: ${room_secret}`);
|
|
resolve();
|
|
return;
|
|
}
|
|
const objectStoreRequestDeletion = objectStore.delete(e.target.result);
|
|
objectStoreRequestDeletion.onsuccess = _ => {
|
|
console.log(`Request successful. Deleted room_secret: ${room_secret}`);
|
|
resolve();
|
|
}
|
|
objectStoreRequestDeletion.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
};
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
})
|
|
}
|
|
|
|
static clearRoomSecrets() {
|
|
return new Promise((resolve, reject) => {
|
|
const DBOpenRequest = window.indexedDB.open('pairdrop_store');
|
|
DBOpenRequest.onsuccess = (e) => {
|
|
const db = e.target.result;
|
|
const transaction = db.transaction('room_secrets', 'readwrite');
|
|
const objectStore = transaction.objectStore('room_secrets');
|
|
const objectStoreRequest = objectStore.clear();
|
|
objectStoreRequest.onsuccess = _ => {
|
|
console.log('Request successful. All room_secrets cleared');
|
|
resolve();
|
|
};
|
|
}
|
|
DBOpenRequest.onerror = (e) => {
|
|
reject(e);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
class PairDrop {
|
|
constructor() {
|
|
Events.on('load', _ => {
|
|
const server = new ServerConnection();
|
|
const peers = new PeersManager(server);
|
|
const peersUI = new PeersUI();
|
|
const receiveFileDialog = new ReceiveFileDialog();
|
|
const receiveRequestDialog = new ReceiveRequestDialog();
|
|
const sendTextDialog = new SendTextDialog();
|
|
const receiveTextDialog = new ReceiveTextDialog();
|
|
const pairDeviceDialog = new PairDeviceDialog();
|
|
const clearDevicesDialog = new ClearDevicesDialog();
|
|
const base64ZipDialog = new Base64ZipDialog();
|
|
const toast = new Toast();
|
|
const notifications = new Notifications();
|
|
const networkStatusUI = new NetworkStatusUI();
|
|
const webShareTargetUI = new WebShareTargetUI();
|
|
const webFileHandlersUI = new WebFileHandlersUI();
|
|
const noSleepUI = new NoSleepUI();
|
|
});
|
|
}
|
|
}
|
|
|
|
const persistentStorage = new PersistentStorage();
|
|
const pairDrop = new PairDrop();
|
|
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/service-worker.js')
|
|
.then(serviceWorker => {
|
|
console.log('Service Worker registered');
|
|
window.serviceWorker = serviceWorker
|
|
});
|
|
}
|
|
|
|
window.addEventListener('beforeinstallprompt', e => {
|
|
if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
|
|
// only display install btn when installed
|
|
const btn = document.querySelector('#install')
|
|
btn.hidden = false;
|
|
btn.onclick = _ => e.prompt();
|
|
}
|
|
return e.preventDefault();
|
|
});
|
|
|
|
// Background Animation
|
|
Events.on('load', () => {
|
|
let c = document.createElement('canvas');
|
|
document.body.appendChild(c);
|
|
let style = c.style;
|
|
style.width = '100%';
|
|
style.position = 'absolute';
|
|
style.zIndex = -1;
|
|
style.top = 0;
|
|
style.left = 0;
|
|
let ctx = c.getContext('2d');
|
|
let x0, y0, w, h, dw, offset;
|
|
|
|
function init() {
|
|
w = window.innerWidth;
|
|
h = window.innerHeight;
|
|
c.width = w;
|
|
c.height = h;
|
|
offset = h > 800
|
|
? 116
|
|
: h > 380
|
|
? 100
|
|
: 65;
|
|
|
|
if (w < 420) offset += 20;
|
|
x0 = w / 2;
|
|
y0 = h - offset;
|
|
dw = Math.max(w, h, 1000) / 13;
|
|
drawCircles();
|
|
}
|
|
window.onresize = init;
|
|
|
|
function drawCircle(radius) {
|
|
ctx.beginPath();
|
|
let color = Math.round(255 * (1 - radius / Math.max(w, h)));
|
|
ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
|
|
ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
|
|
ctx.stroke();
|
|
ctx.lineWidth = 2;
|
|
}
|
|
|
|
let step = 0;
|
|
|
|
function drawCircles() {
|
|
ctx.clearRect(0, 0, w, h);
|
|
for (let i = 0; i < 8; i++) {
|
|
drawCircle(dw * i + step % dw);
|
|
}
|
|
step += 1;
|
|
}
|
|
|
|
let loading = true;
|
|
|
|
function animate() {
|
|
if (loading || !finished()) {
|
|
requestAnimationFrame(function() {
|
|
drawCircles();
|
|
animate();
|
|
});
|
|
}
|
|
}
|
|
|
|
function finished() {
|
|
return step % dw >= dw - 5;
|
|
}
|
|
|
|
window.animateBackground = function(l) {
|
|
if (!l) {
|
|
loading = false;
|
|
} else if (!loading) {
|
|
loading = true;
|
|
if (finished()) animate();
|
|
}
|
|
};
|
|
init();
|
|
animate();
|
|
});
|
|
|
|
document.changeFavicon = function (src) {
|
|
document.querySelector('[rel="icon"]').href = src;
|
|
document.querySelector('[rel="shortcut icon"]').href = src;
|
|
}
|
|
|
|
// close About PairDrop page on Escape
|
|
window.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
window.location.hash = '#';
|
|
}
|
|
});
|
|
|
|
Notifications.PERMISSION_ERROR = `
|
|
Notifications permission has been blocked
|
|
as the user has dismissed the permission prompt several times.
|
|
This can be reset in Page Info
|
|
which can be accessed by clicking the lock icon next to the URL.`;
|
|
|
|
document.body.onclick = _ => { // safari hack to fix audio
|
|
document.body.onclick = null;
|
|
if (!(/.*Version.*Safari.*/.test(navigator.userAgent))) return;
|
|
blop.play();
|
|
}
|