MirrorMirror
/
PairDrop
mirror of https://github.com/schlagmichdoch/PairDrop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into master

This commit is contained in:
Fasih Ahmad Fakhri 2020-12-16 11:29:23 +05:30 committed by GitHub
parent 6147e5200b 4988e9fe7e
commit 026361fd8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -5,13 +5,16 @@
#### Snapdrop is built with the following awesome technologies:
* Vanilla HTML5 / ES6 / CSS3
* Progressive Web App
* [Progressive Web App](https://de.wikipedia.org/wiki/Progressive_Web_App)
* [WebRTC](http://webrtc.org/)
* [WebSockets](http://www.websocket.org/)
* [NodeJS](https://nodejs.org/en/)
* [Material Design](https://material.google.com/)
> If you want to self-host your own instance, [you can with docker.](/docs/local-dev.md)
> Have any questions? You can read our [FAQ](/docs/faq.md).
> If you want to self-host your own instance, [you can with docker](/docs/local-dev.md).
## Support the Snapdrop Community
Snapdrop is free. Still, we have to pay for the server. If you want to contribute, please use PayPal:
@ -27,15 +30,4 @@ Alternatively, you can become a [Github Sponsor](https://github.com/sponsors/Rob
Thanks a lot for supporting free and open software!
> Have any questions? You can read our [FAQ](/docs/faq.md)
## Apps
1. [Snapdrop PWA](/docs/faq.md) <!-- Don't know how to do a direct link -->
1. [Snapdrop Desktop App](https://github.com/infin1tyy/snapdrop-desktop) built on top of Electron. (Thanks to [Infin1tyy!](https://github.com/infin1tyy/)).
1. Feel free to make one :)

18
client/index.html
View File

@ -59,16 +59,16 @@
<!-- Peers -->
<x-peers class="center"></x-peers>
<x-no-peers>
<h2>Open Snapdrop on other devices to send files.</h2>
<h2>Open Snapdrop on other devices to send files</h2>
</x-no-peers>
<x-instructions desktop="Click to send files or right click to send a message." mobile="Tap to send files or long tap to send a message."></x-instructions>
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"></x-instructions>
<!-- Footer -->
<footer class="column">
<svg class="icon logo">
<use xlink:href="#wifi-tethering" />
</svg>
<div id="displayName">The easiest way to transfer data across devices.</div>
<div class="font-body2">Allow me to be discovered by: Everyone in this network.</div>
<div id="displayName" placeholder="The easiest way to transfer data across devices"></div>
<div class="font-body2">You can be discovered by everyone on this network</div>
</footer>
<!-- Receive Dialog -->
<x-dialog id="receiveDialog">
@ -90,7 +90,7 @@
<x-background class="full center">
<x-paper shadow="2">
<h3>Send a Message</h3>
<input id="textInput" placeholder="Send a message" autocomplete="off" autofocus>
<textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea>
<div class="row-reverse">
<button class="button" type="submit" close>Send</button>
<a class="button" close>Cancel</a>
@ -130,7 +130,7 @@
<use xlink:href="#wifi-tethering" />
</svg>
<h1>Snapdrop</h1>
<div class="font-subheading">The easiest way to transfer files across devices.</div>
<div class="font-subheading">The easiest way to transfer files across devices</div>
<div class="row">
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github" rel="noreferrer">
<svg class="icon">
@ -147,7 +147,7 @@
<use xlink:href="#twitter" />
</svg>
</a>
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
<a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
<svg class="icon">
<use xlink:href="#help-outline" />
</svg>
@ -214,7 +214,7 @@
<noscript>
<x-noscript class="full center column">
<h1>Enable Javascript</h1>
<h3>Snapdrop works only with Javascript.</h3>
<h3>Snapdrop works only with Javascript</h3>
</x-noscript>
<style>
x-noscript {
@ -228,4 +228,4 @@
}
</style>
</noscript>
</body>
</body>

4
client/scripts/network.js
View File

@ -41,8 +41,8 @@ class ServerConnection {
case 'ping':
this.send({ type: 'pong' });
break;
case 'displayName':
Events.fire('displayName', msg);
case 'display-name':
Events.fire('display-name', msg);
break;
default:
console.error('WS: unkown message type', msg);

10
client/scripts/ui.js
View File

@ -6,8 +6,8 @@ window.isProductionEnvironment = !window.location.host.startsWith('localhost');
window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// set display name
Events.on('displayName', e => {
$("displayName").textContent = "You are known as " + e.detail.message;
Events.on('display-name', e => {
$('displayName').textContent = 'You are known as ' + e.detail.message;
});
class PeersUI {
@ -70,7 +70,7 @@ class PeerUI {
html() {
return `
<label class="column center">
<label class="column center" title="Click to send files or right click to send a text">
<input type="file" multiple>
<x-icon shadow="1">
<svg class="icon"><use xlink:href="#"/></svg>
@ -473,7 +473,9 @@ class WebShareTargetUI {
let shareTargetText = title ? title : '';
shareTargetText += text ? shareTargetText ? ' ' + text : text : '';
shareTargetText += url ? shareTargetText ? ' ' + url : url : '';
if(url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
if (!shareTargetText) return;
window.shareTargetText = shareTargetText;
history.pushState({}, 'URL Rewrite', '/');

29
client/styles.css
View File

@ -261,7 +261,7 @@ x-peer[transfer] x-icon {
}
x-peer[transfer] .status:before {
content: 'Transfering...';
content: 'Transferring...';
}
x-peer x-icon {
@ -292,6 +292,7 @@ footer {
right: 0;
align-items: center;
padding: 0 0 16px 0;
text-align: center;
}
footer .logo {
@ -365,9 +366,22 @@ x-dialog a{
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
white-space: pre;
}
#receiveTextDialog #text a {
cursor: pointer;
}
#receiveTextDialog #text a:hover {
text-decoration: underline;
}
#receiveTextDialog h3{
/* Select the received text when double-clicking the dialog */
user-select: none;
pointer-events: none;
}
/* Button */
@ -449,16 +463,19 @@ button::-moz-focus-inner {
/* Text Input */
input {
input,
textarea {
width: 100%;
box-sizing: border-box;
border: none;
outline: none;
padding: 16px 24px;
border-radius: 50px;
border-radius: 16px;
margin: 8px 0;
line-height: 16px;
font-size: 14px;
font-family: inherit;
resize: none;
}
@ -549,6 +566,11 @@ input {
}
/* Generic placeholder */
[placeholder]:empty:before {
content: attr(placeholder);
}
/* Toast */
.toast-container {
@ -590,6 +612,7 @@ x-instructions {
opacity: 0.5;
transition: opacity 300ms;
z-index: -1;
text-align: center;
}
x-instructions:before {

15
docs/faq.md
View File

@ -32,4 +32,17 @@ We are not trying to optimize for some edge-cases. We are optimizing the user fl
* Fix bugs and make a pull request.
* Do security analysis and suggestions
[< Back](/README.md)
## Apps
1. [Snapdrop PWA](/docs/faq.md) <!-- Don't know how to do a direct link -->
1. [Snapdrop Desktop App](https://github.com/infin1tyy/snapdrop-desktop) built on top of Electron. (Thanks to [Infin1tyy!](https://github.com/infin1tyy/)).
1. [Snapdrop Android App](https://github.com/fm-sys/snapdrop-android) allows you to also send files directly from other apps via the share action.
1. Feel free to make one :)
[< Back](/README.md)

15
docs/local-dev.md
View File

@ -9,13 +9,16 @@ Then, clone the repository:
cd snapdrop
docker-compose up -d
```
To restart the containers run `docker-compose restart`.
To stop the containers run `docker-compose stop`.
Now point your browser to `http://localhost:8080`.
- To restart the containers run `docker-compose restart`.
- To stop the containers run `docker-compose stop`.
- To display the nodejs logs for debugging run `docker logs snapdrop_node_1`.
## Testing PWA related features
PWAs require that the app is served under a correctly set up and trusted TLS endpoint.
@ -41,4 +44,4 @@ By default, the server listens on port 3000.
For an nginx configuration example, see `docker/nginx/default.conf`.
[< Back](/README.md)
[< Back](/README.md)

20
server/index.js
View File

@ -1,5 +1,4 @@
const parser = require('ua-parser-js');
const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
class SnapdropServer {
@ -20,7 +19,7 @@ class SnapdropServer {
this._keepAlive(peer);
// send displayName
this._send(peer, { type: 'displayName', message: peer.name.displayName });
this._send(peer, { type: 'display-name', message: peer.name.displayName });
}
_onHeaders(headers, response) {
@ -36,7 +35,7 @@ class SnapdropServer {
} catch (e) {
return; // TODO: handle malformed JSON
}
switch (message.type) {
case 'disconnect':
this._leaveRoom(sender);
@ -186,13 +185,22 @@ class Peer {
}
_setName(req) {
var ua = parser(req.headers['user-agent']);
let ua = parser(req.headers['user-agent']);
let displayName = ua.os.name.replace('Mac OS', 'Mac') + ' ';
if (ua.device.model) {
displayName += ua.device.model;
} else {
displayName += ua.browser.name;
}
this.name = {
model: ua.device.model,
os: ua.os.name,
browser: ua.browser.name,
type: ua.device.type,
displayName: uniqueNamesGenerator({ length: 2, separator: ' ', dictionaries: [colors, animals], style: 'capital' })
displayName: displayName
};
}
@ -231,4 +239,4 @@ class Peer {
};
}
const server = new SnapdropServer(process.env.PORT || 3000);
const server = new SnapdropServer(process.env.PORT || 3000);