jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Squashed commit of the following:

Browse source 
commit c04cdad7db
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Sat Sep 22 08:47:40 2018 +0200

    Cleanup

commit 891859680a
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Sat Sep 22 05:55:09 2018 +0200

    Refactor about page

commit 04415ef28f
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Sat Sep 22 04:44:17 2018 +0200

    Cleanup

commit 52bd7692e9
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 23:19:54 2018 +0200

    Notifications Android & Desktop

commit f537b96213
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 22:32:39 2018 +0200

    Notifications

commit 476cb0ae65
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 22:31:46 2018 +0200

    Notifications

commit 5a631d3833
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 21:21:44 2018 +0200

    Notfication API on android

commit 600d3551f4
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 21:12:11 2018 +0200

    Add will-change

commit 3ac40fb3d7
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 21:04:48 2018 +0200

    Don’t reconnect if already connecting

commit 9c9ca70d05
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:55:15 2018 +0200

    Reconnect on rejoin room

commit 7194c65c74
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:51:56 2018 +0200

    Reconnect on rejoin room

commit 0ede41f8d5
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:34:49 2018 +0200

    Cancel keep alive on join room

commit 1d9581632f
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:25:54 2018 +0200

    Cancel keep alive on join room

commit e71564a97c
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:15:55 2018 +0200

    Cancel keep alive on join room

commit 0731a21d68
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:09:49 2018 +0200

    Cancel keep alive on join room

commit 61697d3abc
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 20:01:59 2018 +0200

    Cancel keep alive on join room

commit b0fd89eb96
Merge: 4cf2bed b67afca
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:55:32 2018 +0200

    Merge remote-tracking branch 'origin/master' into dev

    # Conflicts:
    #	server/index.js

commit 4cf2beda90
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:49:16 2018 +0200

    Fix beforeunload on iphone

commit 728aabd449
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:32:59 2018 +0200

    Fix typo in server

commit 96e37aef40
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:25:01 2018 +0200

    Fix typo

commit 31e5f635d1
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:24:01 2018 +0200

    Add connection state handler

commit e573d57419
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:17:07 2018 +0200

    STUN server tests

commit 6a1de29267
Merge: 6317c25 92a5f3b
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:15:31 2018 +0200

    Merge branch 'dev' of github.com:RobinLinus/snapdrop into dev

    # Conflicts:
    #	client/scripts/network.js

commit 6317c25b10
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:14:25 2018 +0200

    Cleanup; fix STUN servers

commit 92a5f3b782
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 19:14:25 2018 +0200

    Cleanup; fix STUN servers

commit e9eeea48e5
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 18:54:52 2018 +0200

    Fix notifications on android

commit 36ec13d428
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 18:53:31 2018 +0200

    Fix uncaught error in server

commit abf96c0228
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Fri Sep 21 16:36:59 2018 +0200

    Test
This commit is contained in:
RobinLinus 2018-09-24 13:14:11 +02:00
parent 44bd3edd7b
commit 87a2dec992
5 changed files with 181 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -2,7 +2,7 @@
[Snapdrop](https://snapdrop.net): local file sharing in your browser - inspired by Apple's Airdrop. [Snapdrop](https://snapdrop.net): local file sharing in your browser - inspired by Apple's Airdrop.
#### Snapdrop Version 2 is built with the following awesome technologies: #### Snapdrop (Version 2) is built with the following awesome technologies:
* Vanilla HTML5 / ES6 / CSS3 * Vanilla HTML5 / ES6 / CSS3
* Progressive Web App * Progressive Web App
* [WebRTC](http://webrtc.org/) * [WebRTC](http://webrtc.org/)
@ -18,12 +18,12 @@
* [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/) * [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/)
* [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/) * [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/)
* [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html) * [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html)
* [免費資源網路社群](https://free.com.tw/snapdrop/?utm_content=buffere6987&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) * [免費資源網路社群](https://free.com.tw/snapdrop/)
##### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server? ##### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
It uses a P2P connection if WebRTC is supported by the browser. (WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer). It uses a P2P connection if WebRTC is supported by the browser. (WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer).
If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with a stream. If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with each other.
##### What about privacy? Will files be saved on third-party-servers? ##### What about privacy? Will files be saved on third-party-servers?
None of your files are ever saved on any server. None of your files are ever saved on any server.
@ -33,15 +33,15 @@ But it does use Google Analytics.
##### Is SnapDrop a fork of ShareDrop? ##### Is SnapDrop a fork of ShareDrop?
No. ShareDrop is built with Ember. Snapdrop is built with vanilla ES6. No. ShareDrop is built with Ember. Snapdrop is built with vanilla ES6.
I wanted to play around with Progressive Web Apps and then I got the idea of a local file sharing app. By doing research on this idea I found and analysed ShareDrop. I liked it and thought about how to improve it. I wanted to play around with Progressive Web Apps and then I got the idea of a local file sharing app. By doing research on this idea I found and analysed ShareDrop. I liked it and thought about how to improve it.
ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices. ShareDrop uses WebRTC only and isn't compatible with Safari browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices.
### Snapdrop is awesome! How can I support it? ### Snapdrop is awesome! How can I support it?
* [File bugs, give feedback, submit suggestions](https://github.com/RobinLinus/snapdrop/issues) * [File bugs, give feedback, submit suggestions](https://github.com/RobinLinus/snapdrop/issues)
* Share Snapdrop on your social media. * Share Snapdrop on your social media.
* [Buy me a cup of coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R9C5E42UYEQCN) * [Buy me a cup of coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R9C5E42UYEQCN)
* Fix bugs and make a Pull Request. This is my first open source project, so I am not very used to the common workflow, but we'll figure it out! * Fix bugs and make a pull request.
* Do Security Analysis and suggestions * Do security analysis and suggestions
## Local Development ## Local Development
``` ```
@ -49,7 +49,9 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
cd snapdrop/server cd snapdrop/server
npm install npm install
node index.js node index.js
cd ../client
# open a second shell:
cd snapdrop/client
python -m SimpleHTTPServer python -m SimpleHTTPServer
``` ```

90
client/index.html
View file

@ -36,6 +36,18 @@
</head> </head>
<body> <body>
<header class="row-reverse">
<a href="#about" class="icon-button" title="About Snapdrop">
<svg class="icon">
<use xlink:href="#info-outline" />
</svg>
</a>
<a href="#" id="notification" class="icon-button" title="Enable Notifications" hidden>
<svg class="icon">
<use xlink:href="#notifications" />
</svg>
</a>
</header>
<!-- Peers --> <!-- Peers -->
<x-peers class="center"></x-peers> <x-peers class="center"></x-peers>
<x-no-peers> <x-no-peers>
@ -97,47 +109,41 @@
<div class="toast-container full center"> <div class="toast-container full center">
<x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast> <x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast>
</div> </div>
<!-- Info Page --> <!-- About Page -->
<div id="info" class="full center column"> <x-about id="about" class="full center column">
<a href="#" class="close icon-button"> <section class="center column fade-in">
<svg class="icon"> <header class="row-reverse">
<use xlink:href="#close" /> <a href="#" class="close icon-button">
<svg class="icon">
<use xlink:href="#close" />
</svg>
</a>
</header>
<svg class="icon logo">
<use xlink:href="#wifi-tethering" />
</svg> </svg>
</a> <h1>Snapdrop</h1>
<svg class="icon logo"> <div class="font-subheading">The easiest way to transfer files across devices.</div>
<use xlink:href="#wifi-tethering" /> <div class="row">
</svg> <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github">
<h1>Snapdrop</h1> <svg class="icon">
<div class="font-subheading">The easiest way to transfer files across devices.</div> <use xlink:href="#github" />
<div class="row"> </svg>
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github"> </a>
<svg class="icon"> <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="Tweet about Snapdrop">
<use xlink:href="#github" /> <svg class="icon">
</svg> <use xlink:href="#twitter" />
</a> </svg>
<a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="tweet about Snapdrop"> </a>
<svg class="icon"> <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="Frequently asked questions">
<use xlink:href="#twitter" /> <svg class="icon">
</svg> <use xlink:href="#help-outline" />
</a> </svg>
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="frequently asked questions"> </a>
<svg class="icon"> </div>
<use xlink:href="#help-outline" /> </section>
</svg> <x-background></x-background>
</a> </x-about>
</div>
</div>
<a href="#info" class="icon-button" title="about Snapdrop">
<svg class="icon">
<use xlink:href="#info-outline" />
</svg>
<div class="info-background"></div>
</a>
<a id="notification" class="icon-button" hidden title="enable Notifications">
<svg class="icon">
<use xlink:href="#notifications" />
</svg>
</a>
<!-- SVG Icon Library --> <!-- SVG Icon Library -->
<svg style="display: none;"> <svg style="display: none;">
<symbol id=wifi-tethering viewBox="0 0 24 24"> <symbol id=wifi-tethering viewBox="0 0 24 24">
@ -172,8 +178,8 @@
</g> </g>
</svg> </svg>
<!-- Scripts --> <!-- Scripts -->
<script type="text/javascript" src="scripts/network.js"></script> <script src="scripts/network.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script> <script src="scripts/ui.js"></script>
<!-- Sounds --> <!-- Sounds -->
<audio id="blop" preload="auto" autobuffer="true"> <audio id="blop" preload="auto" autobuffer="true">
<source src="/sounds/blop.mp3" type="audio/mpeg"> <source src="/sounds/blop.mp3" type="audio/mpeg">

136
client/scripts/network.js
View file

@ -2,8 +2,8 @@ class ServerConnection {
constructor() { constructor() {
this._connect(); this._connect();
Events.on('beforeunload', e => this._disconnect(), false); Events.on('beforeunload', e => this._disconnect());
Events.on('pagehide', e => this._disconnect(), false); Events.on('pagehide', e => this._disconnect());
document.addEventListener('visibilitychange', e => this._onVisibilityChange()); document.addEventListener('visibilitychange', e => this._onVisibilityChange());
} }
@ -20,14 +20,6 @@ class ServerConnection {
this._socket = ws; this._socket = ws;
} }
_isConnected() {
return this._socket && this._socket.readyState === this._socket.OPEN;
}
_isConnecting() {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
_onMessage(msg) { _onMessage(msg) {
msg = JSON.parse(msg); msg = JSON.parse(msg);
console.log('WS:', msg); console.log('WS:', msg);
@ -68,6 +60,7 @@ class ServerConnection {
_disconnect() { _disconnect() {
this.send({ type: 'disconnect' }); this.send({ type: 'disconnect' });
this._socket.onclose = null;
this._socket.close(); this._socket.close();
} }
@ -82,6 +75,14 @@ class ServerConnection {
if (document.hidden) return; if (document.hidden) return;
this._connect(); this._connect();
} }
_isConnected() {
return this._socket && this._socket.readyState === this._socket.OPEN;
}
_isConnecting() {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
} }
class Peer { class Peer {
@ -130,7 +131,7 @@ class Peer {
} }
_onReceivedPartitionEnd(offset) { _onReceivedPartitionEnd(offset) {
this.sendJSON({ type: 'partition_received', offset: offset }); this.sendJSON({ type: 'partition-received', offset: offset });
} }
_sendNextPartition() { _sendNextPartition() {
@ -156,7 +157,7 @@ class Peer {
case 'partition': case 'partition':
this._onReceivedPartitionEnd(message); this._onReceivedPartitionEnd(message);
break; break;
case 'partition_received': case 'partition-received':
this._sendNextPartition(); this._sendNextPartition();
break; break;
case 'progress': case 'progress':
@ -192,16 +193,12 @@ class Peer {
} }
_onDownloadProgress(progress) { _onDownloadProgress(progress) {
Events.fire('file-progress', { Events.fire('file-progress', { sender: this._peerId, progress: progress });
sender: this._peerId,
progress: progress
});
} }
_onFileReceived(proxyFile) { _onFileReceived(proxyFile) {
Events.fire('file-received', proxyFile); Events.fire('file-received', proxyFile);
this.sendJSON({ type: 'transfer-complete' }); this.sendJSON({ type: 'transfer-complete' });
// this._digester = null;
} }
_onTransferCompleted() { _onTransferCompleted() {
@ -213,17 +210,13 @@ class Peer {
} }
sendText(text) { sendText(text) {
this.sendJSON({ const unescaped = btoa(unescape(encodeURIComponent(text)));
type: 'text', this.sendJSON({ type: 'text', text: unescaped });
text: btoa(unescape(encodeURIComponent(text)))
});
} }
_onTextReceived(message) { _onTextReceived(message) {
Events.fire('text-received', { const escaped = decodeURIComponent(escape(atob(message.text)));
text: decodeURIComponent(escape(atob(message.text))), Events.fire('text-received', { text: escaped, sender: this._peerId });
sender: this._peerId
});
} }
} }
@ -232,35 +225,37 @@ class RTCPeer extends Peer {
constructor(serverConnection, peerId) { constructor(serverConnection, peerId) {
super(serverConnection, peerId); super(serverConnection, peerId);
if (!peerId) return; // we will listen for a caller if (!peerId) return; // we will listen for a caller
this._start(peerId, true); this._connect(peerId, true);
} }
_start(peerId, isCaller) { _connect(peerId, isCaller) {
if (!this._peer) { if (!this._conn) this._openConnection(peerId, isCaller);
this._isCaller = isCaller;
this._peerId = peerId;
this._peer = new RTCPeerConnection(RTCPeer.config);
this._peer.onicecandidate = e => this._onIceCandidate(e);
this._peer.onconnectionstatechange = e => this._onConnectionStateChange(e);
}
if (isCaller) { if (isCaller) {
this._createChannel(); this._openChannel();
} else { } else {
this._peer.ondatachannel = e => this._onChannelOpened(e); this._conn.ondatachannel = e => this._onChannelOpened(e);
} }
} }
_createChannel() { _openConnection(peerId, isCaller) {
const channel = this._peer.createDataChannel('data-channel', { reliable: true }); this._isCaller = isCaller;
this._peerId = peerId;
this._conn = new RTCPeerConnection(RTCPeer.config);
this._conn.onicecandidate = e => this._onIceCandidate(e);
this._conn.onconnectionstatechange = e => this._onConnectionStateChange(e);
}
_openChannel() {
const channel = this._conn.createDataChannel('data-channel', { reliable: true });
channel.binaryType = 'arraybuffer'; channel.binaryType = 'arraybuffer';
channel.onopen = e => this._onChannelOpened(e); channel.onopen = e => this._onChannelOpened(e);
this._peer.createOffer(d => this._onDescription(d), e => this._onError(e)); this._conn.createOffer(d => this._onDescription(d), e => this._onError(e));
} }
_onDescription(description) { _onDescription(description) {
// description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400'); // description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
this._peer.setLocalDescription(description, this._conn.setLocalDescription(description,
_ => this._sendSignal({ sdp: description }), _ => this._sendSignal({ sdp: description }),
e => this._onError(e)); e => this._onError(e));
} }
@ -270,23 +265,16 @@ class RTCPeer extends Peer {
this._sendSignal({ ice: event.candidate }); this._sendSignal({ ice: event.candidate });
} }
_sendSignal(signal) {
signal.type = 'signal';
signal.to = this._peerId;
this._server.send(signal);
}
onServerMessage(message) { onServerMessage(message) {
if (!this._peer) this._start(message.sender, false); if (!this._conn) this._connect(message.sender, false);
const conn = this._peer;
if (message.sdp) { if (message.sdp) {
this._peer.setRemoteDescription(new RTCSessionDescription(message.sdp), () => { this._conn.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
if (message.sdp.type !== 'offer') return; if (message.sdp.type !== 'offer') return;
this._peer.createAnswer(d => this._onDescription(d), e => this._onError(e)); this._conn.createAnswer(d => this._onDescription(d), e => this._onError(e));
}, e => this._onError(e)); }, e => this._onError(e));
} else if (message.ice) { } else if (message.ice) {
this._peer.addIceCandidate(new RTCIceCandidate(message.ice)); this._conn.addIceCandidate(new RTCIceCandidate(message.ice));
} }
} }
@ -301,34 +289,48 @@ class RTCPeer extends Peer {
_onChannelClosed() { _onChannelClosed() {
console.log('RTC: channel closed', this._peerId); console.log('RTC: channel closed', this._peerId);
if (!this.isCaller) return; if (!this.isCaller) return;
this._start(this._peerId, true); // reopen the channel this._connect(this._peerId, true); // reopen the channel
} }
_onConnectionStateChange(e) { _onConnectionStateChange(e) {
console.log('RTC: state changed:', this._peer.connectionState); console.log('RTC: state changed:', this._conn.connectionState);
switch (this._peer.connectionState) { switch (this._conn.connectionState) {
case 'disconnected': case 'disconnected':
this._onChannelClosed(); this._onChannelClosed();
break; break;
case 'failed': case 'failed':
this._peer = null; this._conn = null;
this._onChannelClosed(); this._onChannelClosed();
break; break;
} }
} }
_send(message) {
this._channel.send(message);
}
_onError(error) { _onError(error) {
console.error(error); console.error(error);
} }
_send(message) {
this._channel.send(message);
}
_sendSignal(signal) {
signal.type = 'signal';
signal.to = this._peerId;
this._server.send(signal);
}
refresh() { refresh() {
// check if channel open. otherwise create one // check if channel is open. otherwise create one
if (this._peer && this._channel && this._channel.readyState !== 'open') return; if (this._isConnected() || this._isConnecting()) return;
this._start(this._peerId, this._isCaller); this._connect(this._peerId, this._isCaller);
}
_isConnected() {
return this._channel && this._channel.readyState === 'open';
}
_isConnecting() {
return this._channel && this._channel.readyState === 'connecting';
} }
} }
@ -422,7 +424,7 @@ class FileChunker {
this._partitionSize += chunk.byteLength; this._partitionSize += chunk.byteLength;
this._onChunk(chunk); this._onChunk(chunk);
if (this._isPartitionEnd() || this.isFileEnd()) { if (this._isPartitionEnd() || this.isFileEnd()) {
this._onPartitionEnd(this._partitionSize); this._onPartitionEnd(this._offset);
return; return;
} }
this._readChunk(); this._readChunk();
@ -447,6 +449,7 @@ class FileChunker {
} }
class FileDigester { class FileDigester {
constructor(meta, callback) { constructor(meta, callback) {
this._buffer = []; this._buffer = [];
this._bytesReceived = 0; this._bytesReceived = 0;
@ -462,8 +465,8 @@ class FileDigester {
const totalChunks = this._buffer.length; const totalChunks = this._buffer.length;
this.progress = this._bytesReceived / this._size; this.progress = this._bytesReceived / this._size;
if (this._bytesReceived < this._size) return; if (this._bytesReceived < this._size) return;
// we are done
let received = new Blob(this._buffer, { type: this._mime }); // pass a useful mime type here let received = new Blob(this._buffer, { type: this._mime });
let url = URL.createObjectURL(received); let url = URL.createObjectURL(received);
this._callback({ this._callback({
name: this._name, name: this._name,
@ -471,8 +474,8 @@ class FileDigester {
size: this._size, size: this._size,
url: url url: url
}); });
this._callback = null;
} }
} }
class Events { class Events {
@ -485,7 +488,6 @@ class Events {
} }
} }
window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection); window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
RTCPeer.config = { RTCPeer.config = {

2
client/scripts/ui.js
View file

@ -392,8 +392,8 @@ class Notifications {
} }
_copyText(message, notification) { _copyText(message, notification) {
document.copy(message);
notification.close(); notification.close();
if(!document.copy(message)) return;
this._notify('Copied text to clipboard'); this._notify('Copied text to clipboard');
} }

118
client/styles.css
View file

@ -6,6 +6,7 @@
--peer-width: 120px; --peer-width: 120px;
} }
/* Layout */ /* Layout */
html { html {
@ -57,10 +58,22 @@ body {
bottom: 0; bottom: 0;
} }
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 56px;
align-items: center;
padding: 16px;
box-sizing: border-box;
}
[hidden] { [hidden] {
display: none !important; display: none !important;
} }
/* Typography */ /* Typography */
body { body {
@ -112,7 +125,7 @@ body {
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-color); color: currentColor;
cursor: pointer; cursor: pointer;
} }
@ -153,7 +166,11 @@ a {
} }
} }
/* Main Header */
body>header a {
margin-left: 8px;
}
/* Peers List */ /* Peers List */
@ -164,8 +181,6 @@ x-peers {
z-index: 2; z-index: 2;
} }
/* Empty Peers List */ /* Empty Peers List */
x-no-peers { x-no-peers {
@ -177,7 +192,8 @@ x-no-peers {
animation-fill-mode: backwards; animation-fill-mode: backwards;
} }
x-no-peers h2 { x-no-peers h2,
x-no-peers a {
color: var(--primary-color); color: var(--primary-color);
} }
@ -266,6 +282,8 @@ x-peer[drop] x-icon {
transform: scale(1.1); transform: scale(1.1);
} }
/* Footer */ /* Footer */
footer { footer {
@ -294,7 +312,6 @@ footer .font-body2 {
} }
/* Dialog */ /* Dialog */
x-dialog x-background { x-dialog x-background {
@ -335,7 +352,6 @@ x-dialog .row-reverse>.button {
} }
/* Receive Dialog */ /* Receive Dialog */
#receiveTextDialog #text { #receiveTextDialog #text {
@ -351,15 +367,12 @@ x-dialog .row-reverse>.button {
/* Button */ /* Button */
.button { .button {
padding: 0 16px; padding: 0 16px;
box-sizing: border-box; box-sizing: border-box;
min-height: 36px; min-height: 36px;
border: none;
outline: none;
min-width: 100px; min-width: 100px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
@ -381,6 +394,8 @@ x-dialog .row-reverse>.button {
justify-content: center; justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: manipulation; touch-action: manipulation;
border: none;
outline: none;
} }
.button:before, .button:before,
@ -405,16 +420,18 @@ x-dialog .row-reverse>.button {
border-radius: 8px; border-radius: 8px;
} }
.button:focus:before { .button:focus:before,
.icon-button:focus:before {
opacity: 0.2; opacity: 0.2;
} }
button::-moz-focus-inner { button::-moz-focus-inner {
border: 0; border: 0;
} }
/* Icon Button */ /* Icon Button */
.icon-button { .icon-button {
@ -444,74 +461,56 @@ input {
} }
/* Info Animation */ /* Info Animation */
#info { #about {
text-align: center;
color: white; color: white;
transition: opacity 300ms;
will-change: opacity;
z-index: 11; z-index: 11;
transition-delay: 300ms; overflow: hidden;
pointer-events: none;
} }
#info:not(:target) { #about .fade-in {
transition: opacity 300ms;
will-change: opacity;
transition-delay: 300ms;
z-index: 11;
pointer-events: all;
}
#about:not(:target) .fade-in {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition-delay: 0; transition-delay: 0;
} }
#info .logo { #about .logo {
--icon-size: 96px; --icon-size: 96px;
} }
#info .close { #about x-background {
position: absolute; position: absolute;
top: 12px; top: calc(32px - 200px);
right: 12px; right: calc(32px - 200px);
color: white; width: 400px;
border-radius: 50%; height: 400px;
}
.info-background {
position: relative;
}
.info-background:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
top: -20px;
left: -32px;
border-radius: 50%; border-radius: 50%;
background: var(--primary-color); background: var(--primary-color);
transform: scale(0); transform: scale(0);
transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
will-change: transform; will-change: transform;
transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: -1;
} }
#info:target+a>.info-background:before { #about:target x-background {
transform: scale(100); transform: scale(10);
} }
a[href="#info"] { #about .row a {
position: absolute;
top: 12px;
right: 12px;
color: #333;
z-index: 10;
}
#info .row a {
color: currentColor;
margin: 8px 8px -16px; margin: 8px 8px -16px;
} }
/* Loading Indicator */ /* Loading Indicator */
.progress { .progress {
@ -544,7 +543,6 @@ a[href="#info"] {
} }
/* Toast */ /* Toast */
.toast-container { .toast-container {
@ -559,7 +557,6 @@ x-toast {
bottom: 24px; bottom: 24px;
width: 100%; width: 100%;
max-width: 344px; max-width: 344px;
border-radius: 8px;
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
align-items: center; align-items: center;
@ -569,7 +566,7 @@ x-toast {
transition: opacity 200ms, transform 300ms ease-out; transition: opacity 200ms, transform 300ms ease-out;
cursor: default; cursor: default;
line-height: 24px; line-height: 24px;
border-radius: 6px; border-radius: 8px;
pointer-events: all; pointer-events: all;
} }
@ -578,12 +575,6 @@ x-toast:not([show]):not(:hover) {
transform: translateY(100px); transform: translateY(100px);
} }
#notification {
position: absolute;
right: 56px;
top: 12px;
color: #333;
}
/* Instructions */ /* Instructions */
@ -603,12 +594,10 @@ x-peers:empty~x-instructions {
opacity: 0; opacity: 0;
} }
/* Responsive Styles */ /* Responsive Styles */
@media (min-height: 800px) { @media (min-height: 800px) {
x-toast {
right: 24px;
}
footer { footer {
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -625,6 +614,7 @@ screen and (min-width: 1100px) {
x-instructions { x-instructions {
top: 24px; top: 24px;
} }
footer .logo { footer .logo {
--icon-size: 40px; --icon-size: 40px;
} }