diff --git a/README.md b/README.md
index 0744ba4..5cb278f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
[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
* Progressive Web App
* [WebRTC](http://webrtc.org/)
@@ -18,12 +18,12 @@
* [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/)
* [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?
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?
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?
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.
-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?
* [File bugs, give feedback, submit suggestions](https://github.com/RobinLinus/snapdrop/issues)
* 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)
-* 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!
-* Do Security Analysis and suggestions
+* Fix bugs and make a pull request.
+* Do security analysis and suggestions
## Local Development
```
@@ -49,7 +49,9 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
cd snapdrop/server
npm install
node index.js
- cd ../client
+
+ # open a second shell:
+ cd snapdrop/client
python -m SimpleHTTPServer
```
diff --git a/client/index.html b/client/index.html
index 629f84b..ff6eb9e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -36,6 +36,18 @@
+
@@ -97,47 +109,41 @@
File Transfer Completed
-
-
-
-
-
+
-
-
-
Snapdrop
-
The easiest way to transfer files across devices.
-
-
-
-
-
-
-
-
-
-
+ Snapdrop
+ The easiest way to transfer files across devices.
+
+
+
@@ -172,8 +178,8 @@
-
-
+
+
diff --git a/client/scripts/network.js b/client/scripts/network.js
index 6e61a78..efbd601 100644
--- a/client/scripts/network.js
+++ b/client/scripts/network.js
@@ -2,8 +2,8 @@ class ServerConnection {
constructor() {
this._connect();
- Events.on('beforeunload', e => this._disconnect(), false);
- Events.on('pagehide', e => this._disconnect(), false);
+ Events.on('beforeunload', e => this._disconnect());
+ Events.on('pagehide', e => this._disconnect());
document.addEventListener('visibilitychange', e => this._onVisibilityChange());
}
@@ -20,14 +20,6 @@ class ServerConnection {
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) {
msg = JSON.parse(msg);
console.log('WS:', msg);
@@ -68,6 +60,7 @@ class ServerConnection {
_disconnect() {
this.send({ type: 'disconnect' });
+ this._socket.onclose = null;
this._socket.close();
}
@@ -82,6 +75,14 @@ class ServerConnection {
if (document.hidden) return;
this._connect();
}
+
+ _isConnected() {
+ return this._socket && this._socket.readyState === this._socket.OPEN;
+ }
+
+ _isConnecting() {
+ return this._socket && this._socket.readyState === this._socket.CONNECTING;
+ }
}
class Peer {
@@ -130,7 +131,7 @@ class Peer {
}
_onReceivedPartitionEnd(offset) {
- this.sendJSON({ type: 'partition_received', offset: offset });
+ this.sendJSON({ type: 'partition-received', offset: offset });
}
_sendNextPartition() {
@@ -156,7 +157,7 @@ class Peer {
case 'partition':
this._onReceivedPartitionEnd(message);
break;
- case 'partition_received':
+ case 'partition-received':
this._sendNextPartition();
break;
case 'progress':
@@ -192,16 +193,12 @@ class Peer {
}
_onDownloadProgress(progress) {
- Events.fire('file-progress', {
- sender: this._peerId,
- progress: progress
- });
+ Events.fire('file-progress', { sender: this._peerId, progress: progress });
}
_onFileReceived(proxyFile) {
Events.fire('file-received', proxyFile);
this.sendJSON({ type: 'transfer-complete' });
- // this._digester = null;
}
_onTransferCompleted() {
@@ -213,17 +210,13 @@ class Peer {
}
sendText(text) {
- this.sendJSON({
- type: 'text',
- text: btoa(unescape(encodeURIComponent(text)))
- });
+ const unescaped = btoa(unescape(encodeURIComponent(text)));
+ this.sendJSON({ type: 'text', text: unescaped });
}
_onTextReceived(message) {
- Events.fire('text-received', {
- text: decodeURIComponent(escape(atob(message.text))),
- sender: this._peerId
- });
+ const escaped = decodeURIComponent(escape(atob(message.text)));
+ Events.fire('text-received', { text: escaped, sender: this._peerId });
}
}
@@ -232,35 +225,37 @@ class RTCPeer extends Peer {
constructor(serverConnection, peerId) {
super(serverConnection, peerId);
if (!peerId) return; // we will listen for a caller
- this._start(peerId, true);
+ this._connect(peerId, true);
}
- _start(peerId, isCaller) {
- if (!this._peer) {
- 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);
- }
+ _connect(peerId, isCaller) {
+ if (!this._conn) this._openConnection(peerId, isCaller);
if (isCaller) {
- this._createChannel();
+ this._openChannel();
} else {
- this._peer.ondatachannel = e => this._onChannelOpened(e);
+ this._conn.ondatachannel = e => this._onChannelOpened(e);
}
}
- _createChannel() {
- const channel = this._peer.createDataChannel('data-channel', { reliable: true });
+ _openConnection(peerId, isCaller) {
+ 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.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) {
// description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
- this._peer.setLocalDescription(description,
+ this._conn.setLocalDescription(description,
_ => this._sendSignal({ sdp: description }),
e => this._onError(e));
}
@@ -270,23 +265,16 @@ class RTCPeer extends Peer {
this._sendSignal({ ice: event.candidate });
}
- _sendSignal(signal) {
- signal.type = 'signal';
- signal.to = this._peerId;
- this._server.send(signal);
- }
-
onServerMessage(message) {
- if (!this._peer) this._start(message.sender, false);
- const conn = this._peer;
+ if (!this._conn) this._connect(message.sender, false);
if (message.sdp) {
- this._peer.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
+ this._conn.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
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));
} 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() {
console.log('RTC: channel closed', this._peerId);
if (!this.isCaller) return;
- this._start(this._peerId, true); // reopen the channel
+ this._connect(this._peerId, true); // reopen the channel
}
_onConnectionStateChange(e) {
- console.log('RTC: state changed:', this._peer.connectionState);
- switch (this._peer.connectionState) {
+ console.log('RTC: state changed:', this._conn.connectionState);
+ switch (this._conn.connectionState) {
case 'disconnected':
this._onChannelClosed();
break;
case 'failed':
- this._peer = null;
+ this._conn = null;
this._onChannelClosed();
break;
}
}
- _send(message) {
- this._channel.send(message);
- }
-
_onError(error) {
console.error(error);
}
+ _send(message) {
+ this._channel.send(message);
+ }
+
+ _sendSignal(signal) {
+ signal.type = 'signal';
+ signal.to = this._peerId;
+ this._server.send(signal);
+ }
+
refresh() {
- // check if channel open. otherwise create one
- if (this._peer && this._channel && this._channel.readyState !== 'open') return;
- this._start(this._peerId, this._isCaller);
+ // check if channel is open. otherwise create one
+ if (this._isConnected() || this._isConnecting()) return;
+ 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._onChunk(chunk);
if (this._isPartitionEnd() || this.isFileEnd()) {
- this._onPartitionEnd(this._partitionSize);
+ this._onPartitionEnd(this._offset);
return;
}
this._readChunk();
@@ -447,6 +449,7 @@ class FileChunker {
}
class FileDigester {
+
constructor(meta, callback) {
this._buffer = [];
this._bytesReceived = 0;
@@ -462,8 +465,8 @@ class FileDigester {
const totalChunks = this._buffer.length;
this.progress = this._bytesReceived / this._size;
if (this._bytesReceived < this._size) return;
-
- let received = new Blob(this._buffer, { type: this._mime }); // pass a useful mime type here
+ // we are done
+ let received = new Blob(this._buffer, { type: this._mime });
let url = URL.createObjectURL(received);
this._callback({
name: this._name,
@@ -471,8 +474,8 @@ class FileDigester {
size: this._size,
url: url
});
- this._callback = null;
}
+
}
class Events {
@@ -485,7 +488,6 @@ class Events {
}
}
-
window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
RTCPeer.config = {
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 42ca141..8ef5251 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -392,8 +392,8 @@ class Notifications {
}
_copyText(message, notification) {
- document.copy(message);
notification.close();
+ if(!document.copy(message)) return;
this._notify('Copied text to clipboard');
}
diff --git a/client/styles.css b/client/styles.css
index f6e84b5..c3a638a 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -6,6 +6,7 @@
--peer-width: 120px;
}
+
/* Layout */
html {
@@ -57,10 +58,22 @@ body {
bottom: 0;
}
+header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 56px;
+ align-items: center;
+ padding: 16px;
+ box-sizing: border-box;
+}
+
[hidden] {
display: none !important;
}
+
/* Typography */
body {
@@ -112,7 +125,7 @@ body {
a {
text-decoration: none;
- color: var(--primary-color);
+ color: currentColor;
cursor: pointer;
}
@@ -153,7 +166,11 @@ a {
}
}
+/* Main Header */
+body>header a {
+ margin-left: 8px;
+}
/* Peers List */
@@ -164,8 +181,6 @@ x-peers {
z-index: 2;
}
-
-
/* Empty Peers List */
x-no-peers {
@@ -177,7 +192,8 @@ x-no-peers {
animation-fill-mode: backwards;
}
-x-no-peers h2 {
+x-no-peers h2,
+x-no-peers a {
color: var(--primary-color);
}
@@ -266,6 +282,8 @@ x-peer[drop] x-icon {
transform: scale(1.1);
}
+
+
/* Footer */
footer {
@@ -294,7 +312,6 @@ footer .font-body2 {
}
-
/* Dialog */
x-dialog x-background {
@@ -335,7 +352,6 @@ x-dialog .row-reverse>.button {
}
-
/* Receive Dialog */
#receiveTextDialog #text {
@@ -351,15 +367,12 @@ x-dialog .row-reverse>.button {
-
/* Button */
.button {
padding: 0 16px;
box-sizing: border-box;
min-height: 36px;
- border: none;
- outline: none;
min-width: 100px;
font-size: 14px;
line-height: 24px;
@@ -381,6 +394,8 @@ x-dialog .row-reverse>.button {
justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: manipulation;
+ border: none;
+ outline: none;
}
.button:before,
@@ -405,16 +420,18 @@ x-dialog .row-reverse>.button {
border-radius: 8px;
}
-.button:focus:before {
+.button:focus:before,
+.icon-button:focus:before {
opacity: 0.2;
}
+
+
button::-moz-focus-inner {
border: 0;
}
-
/* Icon Button */
.icon-button {
@@ -444,74 +461,56 @@ input {
}
-
/* Info Animation */
-#info {
- text-align: center;
+#about {
color: white;
- transition: opacity 300ms;
- will-change: opacity;
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;
pointer-events: none;
transition-delay: 0;
}
-#info .logo {
+#about .logo {
--icon-size: 96px;
}
-#info .close {
+#about x-background {
position: absolute;
- top: 12px;
- right: 12px;
- color: white;
- border-radius: 50%;
-}
-
-.info-background {
- position: relative;
-}
-
-.info-background:before {
- content: '';
- position: absolute;
- width: 40px;
- height: 40px;
- top: -20px;
- left: -32px;
+ top: calc(32px - 200px);
+ right: calc(32px - 200px);
+ width: 400px;
+ height: 400px;
border-radius: 50%;
background: var(--primary-color);
transform: scale(0);
- transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
will-change: transform;
+ transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
+ z-index: -1;
}
-#info:target+a>.info-background:before {
- transform: scale(100);
+#about:target x-background {
+ transform: scale(10);
}
-a[href="#info"] {
- position: absolute;
- top: 12px;
- right: 12px;
- color: #333;
- z-index: 10;
-}
-
-#info .row a {
- color: currentColor;
+#about .row a {
margin: 8px 8px -16px;
}
-
-
/* Loading Indicator */
.progress {
@@ -544,7 +543,6 @@ a[href="#info"] {
}
-
/* Toast */
.toast-container {
@@ -559,7 +557,6 @@ x-toast {
bottom: 24px;
width: 100%;
max-width: 344px;
- border-radius: 8px;
background-color: #323232;
color: rgba(255, 255, 255, 0.95);
align-items: center;
@@ -569,7 +566,7 @@ x-toast {
transition: opacity 200ms, transform 300ms ease-out;
cursor: default;
line-height: 24px;
- border-radius: 6px;
+ border-radius: 8px;
pointer-events: all;
}
@@ -578,12 +575,6 @@ x-toast:not([show]):not(:hover) {
transform: translateY(100px);
}
-#notification {
- position: absolute;
- right: 56px;
- top: 12px;
- color: #333;
-}
/* Instructions */
@@ -603,12 +594,10 @@ x-peers:empty~x-instructions {
opacity: 0;
}
+
/* Responsive Styles */
@media (min-height: 800px) {
- x-toast {
- right: 24px;
- }
footer {
margin-bottom: 16px;
}
@@ -625,6 +614,7 @@ screen and (min-width: 1100px) {
x-instructions {
top: 24px;
}
+
footer .logo {
--icon-size: 40px;
}