refactor "Pairdrop" to "PairDrop"

This commit is contained in:
schlagmichdoch 2023-01-17 10:50:28 +01:00
parent 665aa857d7
commit 785db26882
8 changed files with 41 additions and 39 deletions

View file

@ -1,6 +1,6 @@
# Pairdrop # PairDrop
[Pairdrop](https://pairdrop.net): local file sharing in your browser. Inspired by Apple's Airdrop. [PairDrop](https://pairdrop.net): local file sharing in your browser. Inspired by Apple's Airdrop.
Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop) Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
@ -25,7 +25,7 @@ Developed based on [Snapdrop](https://github.com/RobinLinus/snapdrop)
![test](/docs/pairdrop_screenshot_desktop.png) ![test](/docs/pairdrop_screenshot_desktop.png)
## Snapdrop and Pairdrop are built with the following awesome technologies: ## Snapdrop and PairDrop are built with the following awesome technologies:
* Vanilla HTML5 / ES6 / CSS3 frontend * Vanilla HTML5 / ES6 / CSS3 frontend
* [WebRTC](http://webrtc.org/) / [WebSockets](http://www.websocket.org/) * [WebRTC](http://webrtc.org/) / [WebSockets](http://www.websocket.org/)
* [NodeJS](https://nodejs.org/en/) backend * [NodeJS](https://nodejs.org/en/) backend
@ -38,11 +38,13 @@ You can [host your own instance with Docker](/docs/host-your-own.md).
## Support the Community ## Support the Community
Pairdrop is free and always will be! PairDrop is free and always will be!
If you want to support me and my work you can [buy me a coffee](https://www.buymeacoffee.com/pairdrop) ☕ Do you want to support me?<br>
<a href="https://www.buymeacoffee.com/pairdrop" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
</a>
<br>
To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop). To support the original Snapdrop and its creator go to [his GitHub page](https://github.com/RobinLinus/snapdrop).

View file

@ -9,7 +9,7 @@ string_mask = utf8only
prompt = no prompt = no
[ subject ] [ subject ]
organizationName = Pairdrop organizationName = PairDrop
OU = Development OU = Development
# Use a friendly name here because it's presented to the user. The server's DNS # Use a friendly name here because it's presented to the user. The server's DNS

View file

@ -11,7 +11,7 @@
* [Producthunt](https://www.producthunt.com/posts/snapdrop) * [Producthunt](https://www.producthunt.com/posts/snapdrop)
### Help! I can't install the PWA! ### Help! I can't install the PWA!
if you are using a Chromium-based browser (Chrome, Edge, Brave, etc.), you can easily install Pairdrop PWA on your desktop by clicking the install button in the top-right corner while on [pairdrop.net](https://pairdrop.net) (see below). if you are using a Chromium-based browser (Chrome, Edge, Brave, etc.), you can easily install PairDrop PWA on your desktop by clicking the install button in the top-right corner while on [pairdrop.net](https://pairdrop.net) (see below).
<img src="pwa-install.png"> <img src="pwa-install.png">
### 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?
@ -20,7 +20,7 @@ It uses a P2P connection if WebRTC is supported by the browser. WebRTC needs a S
If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages. If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
### 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 sent to any server. Files are sent only between peers. Pairdrop doesn't even use a database. If you are curious have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/server/). None of your files are ever sent to any server. Files are sent only between peers. PairDrop doesn't even use a database. If you are curious have a look [at the Server](https://github.com/schlagmichdoch/pairdrop/blob/master/server/).
WebRTC encrypts the files on transit. WebRTC encrypts the files on transit.
If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages. If your devices are paired and behind a NAT, the public TURN Server from [Open Relay](https://www.metered.ca/tools/openrelay/) is used to route your files and messages.
@ -29,16 +29,16 @@ If your devices are paired and behind a NAT, the public TURN Server from [Open R
Yes. Your files are sent using WebRTC, which encrypts them on transit. Yes. Your files are sent using WebRTC, which encrypts them on transit.
### Why don't you implement feature xyz? ### Why don't you implement feature xyz?
Snapdrop and Pairdrop are a study in radical simplicity. The user interface is insanely simple. Features are chosen very carefully because complexity grows quadratically since every feature potentially interferes with each other feature. We focus very narrowly on a single use case: instant file transfer. Snapdrop and PairDrop are a study in radical simplicity. The user interface is insanely simple. Features are chosen very carefully because complexity grows quadratically since every feature potentially interferes with each other feature. We focus very narrowly on a single use case: instant file transfer.
We are not trying to optimize for some edge-cases. We are optimizing the user flow of the average users. Don't be sad if we decline your feature request for the sake of simplicity. We are not trying to optimize for some edge-cases. We are optimizing the user flow of the average users. Don't be sad if we decline your feature request for the sake of simplicity.
If you want to learn more about simplicity you can read [Insanely Simple: The Obsession that Drives Apple's Success](https://www.amazon.com/Insanely-Simple-Ken-Segall-audiobook/dp/B007Z9686O) or [Thinking, Fast and Slow](https://www.amazon.com/Thinking-Fast-Slow-Daniel-Kahneman/dp/0374533555). If you want to learn more about simplicity you can read [Insanely Simple: The Obsession that Drives Apple's Success](https://www.amazon.com/Insanely-Simple-Ken-Segall-audiobook/dp/B007Z9686O) or [Thinking, Fast and Slow](https://www.amazon.com/Thinking-Fast-Slow-Daniel-Kahneman/dp/0374533555).
### Snapdrop and Pairdrop are awesome! How can I support them? ### Snapdrop and PairDrop are awesome! How can I support them?
* [Buy me a cover to support open source software](https://www.buymeacoffee.com/pairdrop) * [Buy me a cover to support open source software](https://www.buymeacoffee.com/pairdrop)
* [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues) * [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues)
* Share Pairdrop on social media. * Share PairDrop on social media.
* Fix bugs and make a pull request. * Fix bugs and make a pull request.
* Do security analysis and suggestions * Do security analysis and suggestions

View file

@ -161,11 +161,11 @@ server {
``` ```
## Deployment with Docker ## Deployment with Docker
The easiest way to get Pairdrop up and running is by using Docker. The easiest way to get PairDrop up and running is by using Docker.
By default, docker listens on ports 8080 (http) and 8443 (https) (specified in `docker-compose.yml`). By default, docker listens on ports 8080 (http) and 8443 (https) (specified in `docker-compose.yml`).
When running Pairdrop via Docker, the `X-Forwarded-For` header has to be set by a proxy. Otherwise, all clients will be mutually visible. When running PairDrop via Docker, the `X-Forwarded-For` header has to be set by a proxy. Otherwise, all clients will be mutually visible.
### Installation ### Installation
[See Local Development > Install](#install) [See Local Development > Install](#install)

View file

@ -85,7 +85,7 @@ server.listen(port);
const parser = require('ua-parser-js'); const parser = require('ua-parser-js');
const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator'); const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
class PairdropServer { class PairDropServer {
constructor() { constructor() {
const WebSocket = require('ws'); const WebSocket = require('ws');
@ -95,7 +95,7 @@ class PairdropServer {
this._rooms = {}; this._rooms = {};
this._roomSecrets = {}; this._roomSecrets = {};
console.log('Pairdrop is running on port', port); console.log('PairDrop is running on port', port);
} }
_onConnection(peer) { _onConnection(peer) {
@ -592,4 +592,4 @@ Object.defineProperty(String.prototype, 'hashCode', {
} }
}); });
new PairdropServer(); new PairDropServer();

View file

@ -5,18 +5,18 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Web App Config --> <!-- Web App Config -->
<title>Pairdrop</title> <title>PairDrop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#3367d6"> <meta name="theme-color" content="#3367d6">
<meta name="color-scheme" content="dark light"> <meta name="color-scheme" content="dark light">
<meta name="apple-mobile-web-app-capable" content="no"> <meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-title" content="Pairdrop"> <meta name="apple-mobile-web-app-title" content="PairDrop">
<meta name="application-name" content="Pairdrop"> <meta name="application-name" content="PairDrop">
<!-- Descriptions --> <!-- Descriptions -->
<meta name="description" content="Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup."> <meta name="description" content="Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup.">
<meta name="keywords" content="File, Transfer, Share, Peer2Peer"> <meta name="keywords" content="File, Transfer, Share, Peer2Peer">
<meta name="author" content="RobinLinus"> <meta name="author" content="RobinLinus">
<meta property="og:title" content="Pairdrop"> <meta property="og:title" content="PairDrop">
<meta property="og:type" content="article"> <meta property="og:type" content="article">
<meta property="og:url" content="https://pairdrop.net/"> <meta property="og:url" content="https://pairdrop.net/">
<meta property="og:author" content="https://github.com/schlagmichdoch"> <meta property="og:author" content="https://github.com/schlagmichdoch">
@ -39,7 +39,7 @@
<body translate="no"> <body translate="no">
<header class="row-reverse"> <header class="row-reverse">
<a href="#about" class="icon-button" title="About Pairdrop"> <a href="#about" class="icon-button" title="About PairDrop">
<svg class="icon"> <svg class="icon">
<use xlink:href="#info-outline" /> <use xlink:href="#info-outline" />
</svg> </svg>
@ -54,7 +54,7 @@
<use xlink:href="#notifications" /> <use xlink:href="#notifications" />
</svg> </svg>
</a> </a>
<a id="install" class="icon-button" title="Install Pairdrop" hidden> <a id="install" class="icon-button" title="Install PairDrop" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#homescreen" /> <use xlink:href="#homescreen" />
</svg> </svg>
@ -73,7 +73,7 @@
<!-- Peers --> <!-- Peers -->
<x-peers class="center"></x-peers> <x-peers class="center"></x-peers>
<x-no-peers> <x-no-peers>
<h2>Open Pairdrop on other devices to send files</h2> <h2>Open PairDrop on other devices to send files</h2>
<div>Pair devices to be discoverable on other networks</div> <div>Pair devices to be discoverable on other networks</div>
</x-no-peers> </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>
@ -131,7 +131,7 @@
<x-dialog id="receiveDialog"> <x-dialog id="receiveDialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">Pairdrop</h2> <h2 class="center">PairDrop</h2>
<div class="text-center file-description"></div> <div class="text-center file-description"></div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
@ -146,7 +146,7 @@
<x-dialog id="receiveRequestDialog"> <x-dialog id="receiveRequestDialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">Pairdrop</h2> <h2 class="center">PairDrop</h2>
<div class="text-center file-description"></div> <div class="text-center file-description"></div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
@ -202,10 +202,10 @@
<svg class="icon logo"> <svg class="icon logo">
<use xlink:href="#wifi-tethering" /> <use xlink:href="#wifi-tethering" />
</svg> </svg>
<h1>Pairdrop</h1> <h1>PairDrop</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"> <div class="row">
<a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="Pairdrop on Github" rel="noreferrer"> <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
<svg class="icon"> <svg class="icon">
<use xlink:href="#github" /> <use xlink:href="#github" />
</svg> </svg>
@ -215,7 +215,7 @@
<use xlink:href="#monetarization" /> <use xlink:href="#monetarization" />
</svg> </svg>
</a> </a>
<a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about Pairdrop" rel="noreferrer"> <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer">
<svg class="icon"> <svg class="icon">
<use xlink:href="#twitter" /> <use xlink:href="#twitter" />
</svg> </svg>
@ -298,7 +298,7 @@
<noscript> <noscript>
<x-noscript class="full center column"> <x-noscript class="full center column">
<h1>Enable JavaScript</h1> <h1>Enable JavaScript</h1>
<h3>Pairdrop works only with JavaScript</h3> <h3>PairDrop works only with JavaScript</h3>
</x-noscript> </x-noscript>
<style> <style>
x-noscript { x-noscript {

View file

@ -1,6 +1,6 @@
{ {
"name": "Pairdrop", "name": "PairDrop",
"short_name": "Pairdrop", "short_name": "PairDrop",
"icons": [{ "icons": [{
"src": "images/android-chrome-192x192.png", "src": "images/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",

View file

@ -152,13 +152,13 @@ class PeersUI {
if (files.length === 1) { if (files.length === 1) {
descriptor = files[0].name; descriptor = files[0].name;
noPeersMessage = `Open Pairdrop on other devices to send <i>${descriptor}</i> directly`; noPeersMessage = `Open PairDrop on other devices to send <i>${descriptor}</i> directly`;
} else if (files.length > 1) { } else if (files.length > 1) {
descriptor = `${files.length} files`; descriptor = `${files.length} files`;
noPeersMessage = `Open Pairdrop on other devices to send ${descriptor} directly`; noPeersMessage = `Open PairDrop on other devices to send ${descriptor} directly`;
} else if (text.length > 0) { } else if (text.length > 0) {
descriptor = `pasted text`; descriptor = `pasted text`;
noPeersMessage = `Open Pairdrop on other devices to send ${descriptor} directly`; noPeersMessage = `Open PairDrop on other devices to send ${descriptor} directly`;
} }
const xInstructions = document.querySelectorAll('x-instructions')[0]; const xInstructions = document.querySelectorAll('x-instructions')[0];
@ -200,7 +200,7 @@ class PeersUI {
xInstructions.setAttribute('mobile', 'Tap to send files or long tap to send a message'); xInstructions.setAttribute('mobile', 'Tap to send files or long tap to send a message');
const xNoPeers = document.querySelectorAll('x-no-peers')[0]; const xNoPeers = document.querySelectorAll('x-no-peers')[0];
xNoPeers.getElementsByTagName('h2')[0].innerHTML = 'Open Pairdrop on other devices to send files'; xNoPeers.getElementsByTagName('h2')[0].innerHTML = 'Open PairDrop on other devices to send files';
const cancelPasteModeBtn = document.getElementById('cancelPasteModeBtn'); const cancelPasteModeBtn = document.getElementById('cancelPasteModeBtn');
cancelPasteModeBtn.removeEventListener('click', this._cancelPasteMode); cancelPasteModeBtn.removeEventListener('click', this._cancelPasteMode);
@ -1321,7 +1321,7 @@ class PersistentStorage {
} }
} }
class Pairdrop { class PairDrop {
constructor() { constructor() {
Events.on('load', _ => { Events.on('load', _ => {
const server = new ServerConnection(); const server = new ServerConnection();
@ -1342,7 +1342,7 @@ class Pairdrop {
} }
const persistentStorage = new PersistentStorage(); const persistentStorage = new PersistentStorage();
const pairdrop = new Pairdrop(); const pairDrop = new PairDrop();
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
@ -1443,7 +1443,7 @@ Events.on('load', () => {
animate(); animate();
}); });
// close About Pairdrop page on Escape // close About PairDrop page on Escape
window.addEventListener("keydown", (e) => { window.addEventListener("keydown", (e) => {
if (e.key === "Escape") { if (e.key === "Escape") {
window.location.hash = '#'; window.location.hash = '#';