Squashed commit of the following:
commitc04cdad7dbAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Sat Sep 22 08:47:40 2018 +0200 Cleanup commit891859680aAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Sat Sep 22 05:55:09 2018 +0200 Refactor about page commit04415ef28fAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Sat Sep 22 04:44:17 2018 +0200 Cleanup commit52bd7692e9Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 23:19:54 2018 +0200 Notifications Android & Desktop commitf537b96213Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 22:32:39 2018 +0200 Notifications commit476cb0ae65Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 22:31:46 2018 +0200 Notifications commit5a631d3833Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 21:21:44 2018 +0200 Notfication API on android commit600d3551f4Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 21:12:11 2018 +0200 Add will-change commit3ac40fb3d7Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 21:04:48 2018 +0200 Don’t reconnect if already connecting commit9c9ca70d05Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:55:15 2018 +0200 Reconnect on rejoin room commit7194c65c74Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:51:56 2018 +0200 Reconnect on rejoin room commit0ede41f8d5Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:34:49 2018 +0200 Cancel keep alive on join room commit1d9581632fAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:25:54 2018 +0200 Cancel keep alive on join room commite71564a97cAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:15:55 2018 +0200 Cancel keep alive on join room commit0731a21d68Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:09:49 2018 +0200 Cancel keep alive on join room commit61697d3abcAuthor: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 20:01:59 2018 +0200 Cancel keep alive on join room commitb0fd89eb96Merge:4cf2bedb67afcaAuthor: 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 commit4cf2beda90Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:49:16 2018 +0200 Fix beforeunload on iphone commit728aabd449Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:32:59 2018 +0200 Fix typo in server commit96e37aef40Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:25:01 2018 +0200 Fix typo commit31e5f635d1Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:24:01 2018 +0200 Add connection state handler commite573d57419Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:17:07 2018 +0200 STUN server tests commit6a1de29267Merge:6317c2592a5f3bAuthor: 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 commit6317c25b10Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:14:25 2018 +0200 Cleanup; fix STUN servers commit92a5f3b782Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 19:14:25 2018 +0200 Cleanup; fix STUN servers commite9eeea48e5Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 18:54:52 2018 +0200 Fix notifications on android commit36ec13d428Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 18:53:31 2018 +0200 Fix uncaught error in server commitabf96c0228Author: RobinLinus <robinlinus@users.noreply.github.com> Date: Fri Sep 21 16:36:59 2018 +0200 Test
This commit is contained in:
RobinLinus
parent
44bd3edd7b
commit
87a2dec992
5 changed files with 181 additions and 181 deletions
16
README.md
16
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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,18 @@
|
|||
</head>
|
||||
|
||||
<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 -->
|
||||
<x-peers class="center"></x-peers>
|
||||
<x-no-peers>
|
||||
|
|
@ -97,13 +109,16 @@
|
|||
<div class="toast-container full center">
|
||||
<x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast>
|
||||
</div>
|
||||
<!-- Info Page -->
|
||||
<div id="info" class="full center column">
|
||||
<!-- About Page -->
|
||||
<x-about id="about" class="full center column">
|
||||
<section class="center column fade-in">
|
||||
<header class="row-reverse">
|
||||
<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>
|
||||
|
|
@ -115,29 +130,20 @@
|
|||
<use xlink:href="#github" />
|
||||
</svg>
|
||||
</a>
|
||||
<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 class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="Tweet about Snapdrop">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#twitter" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="frequently asked questions">
|
||||
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="Frequently asked questions">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#help-outline" />
|
||||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
</section>
|
||||
<x-background></x-background>
|
||||
</x-about>
|
||||
<!-- SVG Icon Library -->
|
||||
<svg style="display: none;">
|
||||
<symbol id=wifi-tethering viewBox="0 0 24 24">
|
||||
|
|
@ -172,8 +178,8 @@
|
|||
</g>
|
||||
</svg>
|
||||
<!-- Scripts -->
|
||||
<script type="text/javascript" src="scripts/network.js"></script>
|
||||
<script type="text/javascript" src="scripts/ui.js"></script>
|
||||
<script src="scripts/network.js"></script>
|
||||
<script src="scripts/ui.js"></script>
|
||||
<!-- Sounds -->
|
||||
<audio id="blop" preload="auto" autobuffer="true">
|
||||
<source src="/sounds/blop.mp3" type="audio/mpeg">
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue