# _Send it_, with [PairDrop](https://pairdrop.net)
Local file sharing in your web browser.
Inspired by Apple's AirDrop.
Fork of Snapdrop.
Report a bug
Request feature
## Features File sharing on your local network that works on all platforms. - A multi-platform AirDrop-like solution that works. - Send images, documents or text via peer-to-peer connection to devices on the same local network. - Internet transfers - Join temporary public rooms to transfer files easily over the Internet. - Web-app - Works on all devices with a modern web-browser. Send a file from your phone to your laptop?
Share photos in original quality with friends using Android and iOS?
Share private files peer-to-peer between Linux systems?
## Differences to the [Snapdrop](https://github.com/RobinLinus/snapdrop) it is based on
View all differences
### Paired Devices and Public Rooms — Internet Transfer * Transfer files over the Internet between paired devices or by entering temporary public rooms. * Connect to devices in complex network environments (public Wi-Fi, company network, iCloud Private Relay, VPN, etc.). * Connect to devices on your mobile hotspot. * Devices outside of your local network that are behind a NAT are auto-connected via the PairDrop TURN server. * Devices from the local network, in the same public room, or previously paired are shown. #### Persistent Device Pairing Always connect to known devices * Pair devices via a 6-digit code or a QR-Code. * Paired devices always find each other via shared secrets independently of their local network. * Pairing is persistent. You find your devices even after reopening PairDrop. * You can edit and unpair devices easily. #### Temporary Public Rooms Connect to others in complex network situations, or over the Internet. * Enter a public room via a 5-letter code or a QR-code. * Enter a public room to temporarily connect to devices outside your local network. * All devices in the same public room see each other. * Public rooms are temporary. Closing PairDrop leaves all rooms. ### [Improved UI for Sending/Receiving Files](https://github.com/RobinLinus/snapdrop/issues/560) * Files are transferred after a request is accepted. Files are auto-downloaded upon completing a transfer, if possible. * Multiple files are downloaded as a ZIP file * Download, share or save to gallery via the "Share" menu on Android and iOS. * Multiple files are transferred at once with an overall progress indicator. ### Send Files or Text Directly From Share Menu, Context Menu or CLI * [Send files directly from context menu on Ubuntu (using Nautilus)](docs/how-to.md#send-multiple-files-and-directories-directly-from-context-menu-on-ubuntu-using-nautilus) * [Send files directly from the context menu on Windows](docs/how-to.md#send-files-directly-from-context-menu-on-windows) * [Send directly from the "Share" menu on iOS](docs/how-to.md#send-directly-from-share-menu-on-ios) * [Send directly from the "Share" menu on Android](docs/how-to.md#send-directly-from-share-menu-on-android) * [Send directly via the command-line interface](docs/how-to.md#send-directly-via-command-line-interface) ### Other Changes * Change your display name to easily differentiate your devices. * [Paste files/text and choose the recipient afterwards ](https://github.com/RobinLinus/snapdrop/pull/534) * [Prevent devices from sleeping on file transfer](https://github.com/RobinLinus/snapdrop/pull/413) * Warn user before PairDrop is closed on file transfer * Open PairDrop on multiple tabs simultaneously (Thanks [@willstott101](https://github.com/willstott101)) * [Video and audio preview](https://github.com/RobinLinus/snapdrop/pull/455) (Thanks [@victorwads](https://github.com/victorwads)) * Switch theme back to auto/system after dark or light mode is on * Node-only implementation (Thanks [@Bellisario](https://github.com/Bellisario)) * Auto-restart on error (Thanks [@KaKi87](https://github.com/KaKi87)) * Lots of stability fixes (Thanks [@MWY001](https://github.com/MWY001) [@skiby7](https://github.com/skiby7) and [@willstott101](https://github.com/willstott101)) * To host PairDrop on your local network (e.g. on Raspberry Pi): [All peers connected with private IPs are discoverable by each other](https://github.com/RobinLinus/snapdrop/pull/558) * When hosting PairDrop yourself, you can [set your own STUN/TURN servers](docs/host-your-own.md#specify-stunturn-servers) * Translations.
## Built with the following awesome technologies:
* Vanilla HTML5 / JS ES6 / CSS 3 frontend
* [WebRTC](http://webrtc.org/) / WebSockets
* [Node.js](https://nodejs.org/en/) backend
* [Progressive web app (PWA)](https://en.wikipedia.org/wiki/Progressive_web_app) unified functionality
* [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) storage handling
* [zip.js](https://gildas-lormeau.github.io/zip.js/) library
* [cyrb53](https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js) super-fast hash function
* [NoSleep](https://github.com/richtr/NoSleep.js) display sleep, add wake lock ([MIT](licenses/MIT-NoSleep))
* [heic2any](https://github.com/alexcorvi/heic2any) HEIC/HEIF to PNG/GIF/JPEG ([MIT](licenses/MIT-heic2any))
* [Weblate](https://weblate.org/) web-based localization tool
* [BrowserStack](https://www.browserstack.com/) This project is tested with BrowserStack
[FAQ](docs/faq.md)
[Host your own instance with Docker or Node.js](docs/host-your-own.md).
## Support
PairDrop is libre, and always will be. \ If you find it useful and want to support free and open-source software, please consider donating using the button above. \ I footed the bill for the domain and the server, and you can help create and maintain great software by supporting me. \ Thank you very much for your contribution! ## Contributing Feel free to [open an issue](https://github.com/schlagmichdoch/pairdrop/issues/new/choose) or a [pull request](https://github.com/schlagmichdoch/pairdrop/pulls), following the [Contributing Guidelines](CONTRIBUTING.md). ================================================ FILE: dev/nginx/default.conf ================================================ server { listen 80; expires epoch; location / { proxy_connect_timeout 300; proxy_pass http://pairdrop:3000; proxy_set_header Connection "upgrade"; proxy_set_header Upgrade $http_upgrade; } location /ca.crt { alias /etc/ssl/certs/pairdropCA.crt; } # To allow POST on static pages error_page 405 =200 $uri; } server { listen 443 ssl; http2 on; ssl_certificate /etc/ssl/certs/pairdrop-dev.crt; ssl_certificate_key /etc/ssl/certs/pairdrop-dev.key; expires epoch; location / { proxy_connect_timeout 300; proxy_pass http://pairdrop:3000; proxy_set_header Connection "upgrade"; proxy_set_header Upgrade $http_upgrade; } location /ca.crt { alias /etc/ssl/certs/pairdropCA.crt; } # To allow POST on static pages error_page 405 =200 $uri; } ================================================ FILE: dev/nginx-with-openssl.Dockerfile ================================================ FROM nginx:alpine RUN apk add --no-cache openssl ================================================ FILE: dev/openssl/create.sh ================================================ #!/bin/sh cnf_dir='/mnt/openssl/' certs_dir='/etc/ssl/certs/' openssl req -config ${cnf_dir}pairdropCA.cnf -new -x509 -days 1 -keyout ${certs_dir}pairdropCA.key -out ${certs_dir}pairdropCA.crt openssl req -config ${cnf_dir}pairdropCert.cnf -new -out /tmp/pairdrop-dev.csr -keyout ${certs_dir}pairdrop-dev.key openssl x509 -req -in /tmp/pairdrop-dev.csr -CA ${certs_dir}pairdropCA.crt -CAkey ${certs_dir}pairdropCA.key -CAcreateserial -extensions req_ext -extfile ${cnf_dir}pairdropCert.cnf -sha512 -days 1 -out ${certs_dir}pairdrop-dev.crt exec "$@" ================================================ FILE: dev/openssl/pairdropCA.cnf ================================================ [ req ] default_bits = 2048 default_md = sha256 default_days = 1 encrypt_key = no distinguished_name = subject x509_extensions = x509_ext string_mask = utf8only prompt = no [ subject ] organizationName = PairDrop OU = CA commonName = pairdrop-CA [ x509_ext ] subjectKeyIdentifier = hash authorityKeyIdentifier = keyid:always,issuer # You only need digitalSignature below. *If* you don't allow # RSA Key transport (i.e., you use ephemeral cipher suites), then # omit keyEncipherment because that's key transport. basicConstraints = critical, CA:TRUE, pathlen:0 keyUsage = critical, digitalSignature, keyEncipherment, cRLSign, keyCertSign ================================================ FILE: dev/openssl/pairdropCert.cnf ================================================ [ req ] default_bits = 2048 default_md = sha256 default_days = 1 encrypt_key = no distinguished_name = subject req_extensions = req_ext string_mask = utf8only prompt = no [ subject ] organizationName = PairDrop OU = Development # Use a friendly name here because it's presented to the user. The server's DNS # names are placed in Subject Alternate Names. Plus, DNS names here is deprecated # by both IETF and CA/Browser Forums. If you place a DNS name here, then you # must include the DNS name in the SAN too (otherwise, Chrome and others that # strictly follow the CA/Browser Baseline Requirements will fail). commonName = ${ENV::FQDN} [ req_ext ] subjectKeyIdentifier = hash basicConstraints = CA:FALSE keyUsage = digitalSignature, keyEncipherment subjectAltName = DNS:${ENV::FQDN} nsComment = "OpenSSL Generated Certificate" extendedKeyUsage = serverAuth ================================================ FILE: docker-compose-coturn.yml ================================================ version: "3" services: pairdrop: image: "lscr.io/linuxserver/pairdrop:latest" container_name: pairdrop restart: unless-stopped volumes: - ./rtc_config.json:/home/node/app/rtc_config.json environment: - PUID=1000 # UID to run the application as - PGID=1000 # GID to run the application as - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client. - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min. - RTC_CONFIG=/home/node/app/rtc_config.json # Set to the path of a file that specifies the STUN/TURN servers. - DEBUG_MODE=false # Set to true to debug container and peer connections. - TZ=Etc/UTC # Time Zone ports: - "127.0.0.1:3000:3000" # Web UI. Change the port number before the last colon e.g. `127.0.0.1:9000:3000` coturn_server: image: "coturn/coturn" restart: unless-stopped volumes: - ./turnserver.conf:/etc/coturn/turnserver.conf - ./ssl/:/etc/coturn/ssl/ ports: - "3478:3478" - "3478:3478/udp" - "5349:5349" - "5349:5349/udp" - "10000-20000:10000-20000/udp" # see guide at docs/host-your-own.md#coturn-and-pairdrop-via-docker-compose ================================================ FILE: docker-compose-dev.yml ================================================ version: "3" services: pairdrop: build: . container_name: pairdrop restart: unless-stopped environment: - PUID=1000 # UID to run the application as - PGID=1000 # GID to run the application as - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client. - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min. - RTC_CONFIG=false # Set to the path of a file that specifies the STUN/TURN servers. - DEBUG_MODE=false # Set to true to debug container and peer connections. - TZ=Etc/UTC # Time Zone ports: - "127.0.0.1:3000:3000" # Web UI. Change the port number before the last colon e.g. `127.0.0.1:9000:3000` nginx: build: context: dev/ dockerfile: nginx-with-openssl.Dockerfile image: "nginx-with-openssl" volumes: - ./public:/usr/share/nginx/html - ./dev/certs:/etc/ssl/certs - ./dev/openssl:/mnt/openssl - ./dev/nginx/default.conf:/etc/nginx/conf.d/default.conf ports: - "8080:80" - "8443:443" environment: - FQDN=localhost entrypoint: /mnt/openssl/create.sh command: ["nginx", "-g", "daemon off;"] restart: unless-stopped ================================================ FILE: docker-compose.yml ================================================ version: "3" services: pairdrop: image: "lscr.io/linuxserver/pairdrop:latest" container_name: pairdrop restart: unless-stopped environment: - PUID=1000 # UID to run the application as - PGID=1000 # GID to run the application as - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client. - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min. - RTC_CONFIG=false # Set to the path of a file that specifies the STUN/TURN servers. - DEBUG_MODE=false # Set to true to debug container and peer connections. - TZ=Etc/UTC # Time Zone ports: - "127.0.0.1:3000:3000" # Web UI. Change the port number before the last colon e.g. `127.0.0.1:9000:3000` ================================================ FILE: docs/docker-swarm-usage.md ================================================ # Docker Swarm Usage ## Healthcheck The [Docker Image](../Dockerfile) includes a health check with the following options: ``` --interval=30s ``` > Specifies the time interval to run the health check. \ > In this case, the health check is performed every 30 seconds.
``` --timeout=10s ``` > Specifies the amount of time to wait for a response from the \"HEALTHCHECK\" command. \ > If the response does not arrive within 10 seconds, the health check fails.
``` --start-period=5s ``` > Specifies the amount of time to wait before starting the health check process. \ > In this case, the health check process will begin 5 seconds after the container is started.
``` --retries=3 ``` > Specifies the number of times Docker should retry the health check \ > before considering the container to be unhealthy.
The CMD instruction is used to define the command that will be run as part of the health check. \ In this case, the command is `wget --quiet --tries=1 --spider http://localhost:3000/ || exit 1`. \ This command will attempt to connect to `http://localhost:3000/` \ and if it fails it will exit with a status code of `1`. \ If this command returns a status code other than `0`, the health check fails. Overall, this \"HEALTHCHECK\" instruction is defining a health check process \ that runs every 30 seconds, and waits up to 10 seconds for a response, \ begins 5 seconds after the container is started, and retries up to 3 times. \ The health check attempts to connect to http://localhost:3000/ \ and will considers the container unhealthy if unable to connect. ================================================ FILE: docs/faq.md ================================================ # Frequently Asked Questions
Help! I can't install the PWA!
Here is a good guide on how to install PWAs on different platforms: \ https://www.cdc.gov/niosh/mining/content/hearingloss/installPWA.html **Chromium-based browser on Desktop (Chrome, Edge, Vivaldi, Brave, etc.)** \ Easily install PairDrop PWA on your desktop by clicking the install-button in the top-right corner while on [pairdrop.net](https://pairdrop.net).
**Desktop Firefox** \
On Firefox, PWAs are installable via [this browser extensions](https://addons.mozilla.org/de/firefox/addon/pwas-for-firefox/)
**Android** \
PWAs are installable only by using Google Chrome or Samsung Browser:
1. Visit [pairdrop.net](https://pairdrop.net)
2. Click _Install_ on the installation pop-up or use the three-dot-menu and click on _Add to Home screen_
3. Click _Add_ on the pop-up
**iOS** \
PWAs are installable only by using Safari:
1. Visit [pairdrop.net](https://pairdrop.net)
2. Click on the share icon
3. Click _Add to Home Screen_
4. Click _Add_ in the top right corner
**Self-Hosted Instance?** \ To be able to install the PWA from a self-hosted instance, the connection needs to be [established through HTTPS](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs). See [this host your own section](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#testing-pwa-related-features) for more info.
Shortcuts?
Available shortcuts: - Send a message with `CTRL + ENTER` - Close all "Send" and "Pair" dialogs by pressing `Esc`. - Copy a received message to the clipboard with `CTRL/⌘ + C`. - Accept file-transfer requests with `Enter` and decline with `Esc`.
How to save images directly to the gallery on iOS?
~~Apparently, iOS does not allow images shared from a website to be saved to the gallery directly.~~ ~~It simply does not offer that option for images shared from a website.~~ ~~iOS Shortcuts saves the day:~~ \ I created a simple iOS shortcut that takes your photos and saves them to your gallery: https://routinehub.co/shortcut/13988/ Update: \ Apparently, this was only a bug that is fixed in recent iOS version (https://github.com/WebKit/WebKit/pull/13111). \ If you use an older affected iOS version this might still be of use. \ Luckily, you can now simply use `Save Image`/`Save X Images` 🎉
Is it possible to send files or text directly from the "Context" or "Share" menu?
Yes, it finally is. * [Send files directly from the "Context" menu on Windows](/docs/how-to.md#send-files-directly-from-context-menu-on-windows) * [Send directly from the "Share" menu on iOS](/docs/how-to.md#send-directly-from-share-menu-on-ios) * [Send directly from the "Share" menu on Android](/docs/how-to.md#send-directly-from-share-menu-on-android)
Is it possible to send files or text directly via CLI?
Yes. * [Send directly from a command-line interface](/docs/how-to.md#send-directly-via-command-line-interface)
Are there any third-party Apps?
These third-party apps are compatible with PairDrop: 1. [Snapdrop Android App](https://github.com/fm-sys/snapdrop-android) 2. [Snapdrop for Firefox (Addon)](https://github.com/ueen/SnapdropFirefoxAddon) 3. Feel free to make one :)
What about the connection? Is it a P2P connection directly from device to device or is there any third-party-server?
It uses a WebRTC peer-to-peer connection. WebRTC needs a signaling server that is only used to establish a connection. The server is not involved in the file transfer. If the devices are on the same network, none of your files are ever sent to any server. If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC. If you host your own instance and want to support devices that do not support WebRTC, you can [start the PairDrop instance with an activated WebSocket fallback](https://github.com/schlagmichdoch/PairDrop/blob/master/docs/host-your-own.md#websocket-fallback-for-vpn).
What about privacy? Will files be saved on third-party servers?
Files are sent directly between peers. PairDrop doesn't even use a database. If curious, study [the signaling server](https://github.com/schlagmichdoch/PairDrop/blob/master/server/ws-server.js). WebRTC encrypts the files in transit. If the devices are on the same network, none of your files are ever sent to any server. If your devices are paired and behind a NAT, the PairDrop TURN Server is used to route your files and messages. See the [Technical Documentation](technical-documentation.md#encryption-webrtc-stun-and-turn) to learn more about STUN, TURN and WebRTC.
What about security? Are my files encrypted while sent between the computers?
Yes. Your files are sent using WebRTC, encrypting them in transit. Still you have to trust the PairDrop server. To ensure the connection is secure and there is no [MITM](https://en.m.wikipedia.org/wiki/Man-in-the-middle_attack) there is a plan to make PairDrop zero trust by encrypting the signaling and implementing a verification process. See [issue #180](https://github.com/schlagmichdoch/PairDrop/issues/180) to keep updated.
Transferring many files with paired devices takes too long
Naturally, if traffic needs to be routed through the TURN server because your devices are behind different NATs, transfer speed decreases. You can open a hotspot on one of your devices to bridge the connection, which omits the need of the TURN server. - [How to open a hotspot on Windows](https://support.microsoft.com/en-us/windows/use-your-windows-pc-as-a-mobile-hotspot-c89b0fad-72d5-41e8-f7ea-406ad9036b85#WindowsVersion=Windows_11) - [How to open a hotspot on macOS](https://support.apple.com/guide/mac-help/share-internet-connection-mac-network-users-mchlp1540/mac) - [Library to open a hotspot on Linux](https://github.com/lakinduakash/linux-wifi-hotspot) You can also use mobile hotspots on phones to do that. Then, all data should be sent directly between devices and not use your data plan.
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. Not facilitating optimal edge-cases means better flow for average users. Don't be sad. We may decline your feature request for the sake of simplicity. Read *Insanely Simple: The Obsession that Drives Apple's Success*, and/or *Thinking, Fast and Slow* to learn more.
PairDrop is awesome. How can I support it?
* [Buy me a coffee](https://www.buymeacoffee.com/pairdrop) to pay for the domain and the server, and support libre software. * [File bugs, give feedback, submit suggestions](https://github.com/schlagmichdoch/pairdrop/issues) * Share PairDrop on social media. * Fix bugs and create a pull request. * Do some security analysis and make suggestions. * Participate in [active discussions](https://github.com/schlagmichdoch/PairDrop/discussions)
How does it work?
[See here for info about the technical implementation](/docs/technical-documentation.md)
## PairDrop via HTTPS On some browsers PairDrop must be served over TLS in order for some features to work properly. These may include: - Copying an incoming message via the 'copy' button - Installing PairDrop as PWA - Persistent pairing of devices - Changing of the display name - Notifications Naturally, this is also recommended to increase security.
## Deployment with Docker The easiest way to get PairDrop up and running is by using Docker. ### Docker Image from Docker Hub ```bash docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 lscr.io/linuxserver/pairdrop ``` > This image is hosted by [linuxserver.io](https://linuxserver.io). For more information visit https://hub.docker.com/r/linuxserver/pairdrop
### Docker Image from GitHub Container Registry (ghcr.io) ```bash docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop ```
### Docker Image self-built #### Build the image ```bash docker build --pull . -f Dockerfile -t pairdrop ``` > A GitHub action is set up to do this step automatically at the release of new versions. > > `--pull` ensures always the latest node image is used. #### Run the image ```bash docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -it pairdrop ``` > You must use a server proxy to set the `X-Forwarded-For` header > to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > > To prevent bypassing the proxy by reaching the docker container directly, > `127.0.0.1` is specified in the run command.
### Flags Set options by using the following flags in the `docker run` command: #### Port ```bash -p 127.0.0.1:8080:3000 ``` > Specify the port used by the docker image > > - 3000 -> `-p 127.0.0.1:3000:3000` > - 8080 -> `-p 127.0.0.1:8080:3000` #### Set Environment Variables via Docker Environment Variables are set directly in the `docker run` command: \ e.g. `docker run -p 127.0.0.1:3000:3000 -it pairdrop -e DEBUG_MODE="true"` Overview of available Environment Variables are found [here](#environment-variables). Example: ```bash docker run -d \ --name=pairdrop \ --restart=unless-stopped \ -p 127.0.0.1:3000:3000 \ -e PUID=1000 \ -e PGID=1000 \ -e WS_SERVER=false \ -e WS_FALLBACK=false \ -e RTC_CONFIG=false \ -e RATE_LIMIT=false \ -e DEBUG_MODE=false \ -e TZ=Etc/UTC \ lscr.io/linuxserver/pairdrop ```
## Deployment with Docker Compose Here's an example docker compose file: ```yaml version: "3" services: pairdrop: image: "lscr.io/linuxserver/pairdrop:latest" container_name: pairdrop restart: unless-stopped environment: - PUID=1000 # UID to run the application as - PGID=1000 # GID to run the application as - WS_FALLBACK=false # Set to true to enable websocket fallback if the peer to peer WebRTC connection is not available to the client. - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min. - RTC_CONFIG=false # Set to the path of a file that specifies the STUN/TURN servers. - DEBUG_MODE=false # Set to true to debug container and peer connections. - TZ=Etc/UTC # Time Zone ports: - "127.0.0.1:3000:3000" # Web UI ``` Run the compose file with `docker compose up -d`. > You must use a server proxy to set the `X-Forwarded-For` header > to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > > To prevent bypassing the proxy by reaching the Docker container > directly, `127.0.0.1` is specified in the `ports` argument.
## Deployment with Node.js Clone this repository and enter the folder ```bash git clone https://github.com/schlagmichdoch/PairDrop.git && cd PairDrop ``` Install all dependencies with NPM: ```bash npm install ``` Start the server with: ```bash npm start ``` > By default, the node server listens on port 3000.
### Options / Flags These are some flags only reasonable when deploying via Node.js #### Port ```bash PORT=3000 ``` > Default: `3000` > > Environment variable to specify the port used by the Node.js server \ > e.g. `PORT=3010 npm start` #### Local Run ```bash npm start -- --localhost-only ``` > Only allow connections from localhost. > > You must use a server proxy to set the `X-Forwarded-For` header > to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > > Use this when deploying PairDrop with node to prevent > bypassing the reverse proxy by reaching the Node.js server directly. #### Automatic restart on error ```bash npm start -- --auto-restart ``` > Restarts server automatically on error #### Production (autostart and rate-limit) ```bash npm run start:prod ``` > shortcut for `RATE_LIMIT=5 npm start -- --auto-restart` #### Production (autostart, rate-limit, localhost-only) ```bash npm run start:prod -- --localhost-only ``` > To prevent connections to the node server from bypassing \ > the proxy server you should always use "--localhost-only" on production. #### Set Environment Variables via Node.js To specify environment variables set them in the run command in front of `npm start`. The syntax is different on Unix and Windows. On Unix based systems ```bash PORT=3000 RTC_CONFIG="rtc_config.json" npm start ``` On Windows ```bash $env:PORT=3000 RTC_CONFIG="rtc_config.json"; npm start ``` Overview of available Environment Variables are found [here](#environment-variables).
## Environment Variables ### Debug Mode ```bash DEBUG_MODE="true" ``` > Default: `false` > > Logs the used environment variables for debugging. > > Prints debugging information about the connecting peers IP addresses. > > This is quite useful to check whether the [#HTTP-Server](#http-server) > is configured correctly, so the auto-discovery feature works correctly. > Otherwise, all clients discover each other mutually, independently of their network status. > > If this flag is set to `"true"` each peer that connects to the PairDrop server will produce a log to STDOUT like this: > > ``` > ----DEBUGGING-PEER-IP-START---- > remoteAddress: ::ffff:172.17.0.1 > x-forwarded-for: 19.117.63.126 > cf-connecting-ip: undefined > PairDrop uses: 19.117.63.126 > IP is private: false > if IP is private, '127.0.0.1' is used instead > ----DEBUGGING-PEER-IP-END---- > ``` > > If the IP address "PairDrop uses" matches the public IP address of the client device, everything is set up correctly. \ > To find out the public IP address of the client device visit https://whatsmyip.com/. > > To preserve your clients' privacy: \ > **Never use this environment variable in production!**
### Rate limiting requests ```bash RATE_LIMIT=1 ``` > Default: `false` > > Limits clients to 1000 requests per 5 min > > "If you are behind a proxy/load balancer (usually the case with most hosting services, e.g. Heroku, Bluemix, AWS ELB, > Render, Nginx, Cloudflare, Akamai, Fastly, Firebase Hosting, Rackspace LB, Riverbed Stingray, etc.), the IP address of > the request might be the IP of the load balancer/reverse proxy (making the rate limiter effectively a global one and > blocking all requests once the limit is reached) or undefined." > (See: https://express-rate-limit.mintlify.app/guides/troubleshooting-proxy-issues) > > To find the correct number to use for this setting: > > 1. Start PairDrop with `DEBUG_MODE=True` and `RATE_LIMIT=1` > 2. Make a `get` request to `/ip` of the PairDrop instance (e.g. `https://pairdrop-example.net/ip`) > 3. Check if the IP address returned in the response matches your public IP address (find out by visiting e.g. https://whatsmyip.com/) > 4. You have found the correct number if the IP addresses match. If not, then increase `RATE_LIMIT` by one and redo 1. - 4. > > e.g. on Render you must use RATE_LIMIT=5
### IPv6 Localization ```bash IPV6_LOCALIZE=4 ``` > Default: `false` > > To enable Peer Auto-Discovery among IPv6 peers, you can specify a reduced number of segments \ > of the client IPv6 address to be evaluated as the peer's IP. \ > This can be especially useful when using Cloudflare as a proxy. > > The flag must be set to an **integer** between `1` and `7`. \ > The number represents the number of IPv6 [hextets](https://en.wikipedia.org/wiki/IPv6#Address_representation) \ > to match the client IP against. The most common value would be `4`, \ > which will group peers within the same `/64` subnet.
### Websocket Fallback (for VPN) ```bash WS_FALLBACK=true ``` > Default: `false` > > Provides PairDrop to clients with an included websocket fallback \ > if the peer to peer WebRTC connection is not available to the client. > > This is not used on the official https://pairdrop.net website, > but you can activate it on your self-hosted instance.\ > This is especially useful if you connect to your instance via a VPN (as most VPN services block WebRTC completely in > order to hide your real IP address). ([Read more here](https://privacysavvy.com/security/safe-browsing/disable-webrtc-chrome-firefox-safari-opera-edge/)). > > **Warning:** \ > All traffic sent between devices using this fallback > is routed through the server and therefor not peer to peer! > > Beware that the traffic routed via this fallback is readable by the server. \ > Only ever use this on instances you can trust. > > Additionally, beware that all traffic using this fallback debits the servers data plan.
### Specify STUN/TURN Servers ```bash RTC_CONFIG="rtc_config.json" ``` > Default: `false` > > Specify the STUN/TURN servers PairDrop clients use by setting \ > `RTC_CONFIG` to a JSON file including the configuration. \ > You can use `rtc_config_example.json` as a starting point. > > To host your own TURN server you can follow this guide: https://gabrieltanner.org/blog/turn-server/ > Alternatively, use a free, pre-configured TURN server like [OpenRelay](<[url](https://www.metered.ca/tools/openrelay/)>) > > Default configuration: > > ```json > { > "sdpSemantics": "unified-plan", > "iceServers": [ > { > "urls": "stun:stun.l.google.com:19302" > } > ] > } > ```
You can host an instance that uses another signaling server This can be useful if you don't want to trust the client files that are hosted on another instance but still want to connect to devices that use https://pairdrop.net. ### Specify Signaling Server ```bash SIGNALING_SERVER="pairdrop.net" ``` > Default: `false` > > By default, clients connecting to your instance use the signaling server of your instance to connect to other devices. > > By using `SIGNALING_SERVER`, you can host an instance that uses another signaling server. > > This can be useful if you want to ensure the integrity of the client files and don't want to trust the client files that are hosted on another PairDrop instance but still want to connect to devices that use the other instance. > E.g. host your own client files under *pairdrop.your-domain.com* but use the official signaling server under *pairdrop.net* > This way devices connecting to *pairdrop.your-domain.com* and *pairdrop.net* can discover each other. > > Beware that the version of your PairDrop server must be compatible with the version of the signaling server. > > `SIGNALING_SERVER` must be a valid url without the protocol prefix. > Examples of valid values: `pairdrop.net`, `pairdrop.your-domain.com:3000`, `your-domain.com/pairdrop`
### Customizable buttons for the _About PairDrop_ page ```bash DONATION_BUTTON_ACTIVE=true DONATION_BUTTON_LINK="https://www.buymeacoffee.com/pairdrop" DONATION_BUTTON_TITLE="Buy me a coffee" TWITTER_BUTTON_ACTIVE=true TWITTER_BUTTON_LINK="https://twitter.com/account" TWITTER_BUTTON_TITLE="Find me on Twitter" MASTODON_BUTTON_ACTIVE=true MASTODON_BUTTON_LINK="https://mastodon.social/account" MASTODON_BUTTON_TITLE="Find me on Mastodon" BLUESKY_BUTTON_ACTIVE=true BLUESKY_BUTTON_LINK="https://bsky.app/profile/account" BLUESKY_BUTTON_TITLE="Find me on Bluesky" CUSTOM_BUTTON_ACTIVE=true CUSTOM_BUTTON_LINK="https://your-custom-social-network.net/account" CUSTOM_BUTTON_TITLE="Find me on this custom social network" PRIVACYPOLICY_BUTTON_ACTIVE=true PRIVACYPOLICY_BUTTON_LINK="https://link-to-your-privacy-policy.net" PRIVACYPOLICY_BUTTON_TITLE="Open our privacy policy" ``` > Default: unset > > By default, clients will show the default button configuration: GitHub, BuyMeACoffee, Twitter, and FAQ on GitHub. > > The GitHub and FAQ on GitHub buttons are essential, so they are always shown. > > The other buttons can be customized: > > * `*_BUTTON_ACTIVE`: set this to `true` to show a natively hidden button or to `false` to hide a normally shown button > * `*_BUTTON_LINK`: set this to any URL to overwrite the href attribute of the button > * `*_BUTTON_TITLE`: set this to overwrite the hover title of the button. This will prevent the title from being translated.
## Healthcheck > The Docker Image hosted on `ghcr.io` and the self-built Docker Image include a healthcheck. > > Read more about [Docker Swarm Usage](docker-swarm-usage.md#docker-swarm-usage).
## HTTP-Server When running PairDrop, the `X-Forwarded-For` header has to be set by a proxy. \ Otherwise, all clients will be mutually visible. To check if your setup is configured correctly [use the environment variable `DEBUG_MODE="true"`](#debug-mode). ### Using nginx #### Allow http and https requests ``` server { listen 80; expires epoch; location / { proxy_connect_timeout 300; proxy_pass http://127.0.0.1:3000; proxy_set_header Connection "upgrade"; proxy_set_header Upgrade $http_upgrade; proxy_set_header X-Forwarded-for $remote_addr; } } server { listen 443 ssl http2; ssl_certificate /etc/ssl/certs/pairdrop-dev.crt; ssl_certificate_key /etc/ssl/certs/pairdrop-dev.key; expires epoch; location / { proxy_connect_timeout 300; proxy_pass http://127.0.0.1:3000; proxy_set_header Connection "upgrade"; proxy_set_header Upgrade $http_upgrade; proxy_set_header X-Forwarded-for $remote_addr; } } ``` #### Automatic http to https redirect: ``` server { listen 80; expires epoch; location / { return 301 https://$host:3000$request_uri; } } server { listen 443 ssl http2; ssl_certificate /etc/ssl/certs/pairdrop-dev.crt; ssl_certificate_key /etc/ssl/certs/pairdrop-dev.key; expires epoch; location / { proxy_connect_timeout 300; proxy_pass http://127.0.0.1:3000; proxy_set_header Connection "upgrade"; proxy_set_header Upgrade $http_upgrade; proxy_set_header X-Forwarded-for $remote_addr; } } ```
### Using Apache install modules `proxy`, `proxy_http`, `mod_proxy_wstunnel` ```bash a2enmod proxy ``` ```bash a2enmod proxy_http ```
Create a new configuration file under `/etc/apache2/sites-available` (on Debian) **pairdrop.conf** #### Allow HTTP and HTTPS requests ```apacheconf
## Coturn and PairDrop via Docker Compose ### Setup container To run coturn and PairDrop at once by using the `docker-compose-coturn.yml` with TURN over TLS enabled you need to follow these steps: 1. Generate or retrieve certificates for your `
#### Setup container To restart the container including coturn run: \ `docker compose -f docker-compose-coturn.yml restart`
#### Setup container To stop the container including coturn run: \ `docker compose -f docker-compose-coturn.yml stop`
### Firewall To run PairDrop including its own coturn-server you need to punch holes in the firewall. These ports must be opened additionally: - 3478 tcp/udp - 5349 tcp/udp - 10000:20000 tcp/udp
## Local Development ### Install All files needed for developing are available in the folder `./dev`. For convenience, there is also a docker compose file for developing: #### Developing with docker compose First, [Install docker with docker compose.](https://docs.docker.com/compose/install/) Then, clone the repository and run docker compose: ```bash git clone https://github.com/schlagmichdoch/PairDrop.git && cd PairDrop ``` ```bash docker compose -f docker-compose-dev.yml up --no-deps --build ``` Now point your web browser to `http://localhost:8080`. - To debug the Node.js server, run `docker logs pairdrop`. - After changes to the code you have to rerun the `docker compose` command
#### Testing PWA related features PWAs requires the app to be served under a correctly set up and trusted TLS endpoint. The NGINX container creates a CA certificate and a website certificate for you. To correctly set the common name of the certificate, you need to change the FQDN environment variable in `docker-compose-dev.yml` to the fully qualified domain name of your workstation. (Default: localhost) If you want to test PWA features, you need to trust the CA of the certificate for your local deployment. \ For your convenience, you can download the crt file from `http://
## Send directly from share menu on Android The [Web Share Target API](https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target) is implemented. When the PWA is installed, it will register itself to the share-menu of the device automatically.
## Send directly via command-line interface Send files or text with PairDrop via command-line interface. \ This opens PairDrop in the default browser where you can choose the receiver. ### Usage ```bash pairdrop -h ``` ``` Send files or text with PairDrop via command-line interface. Current domain: https://pairdrop-dev.onrender.com/ Usage: Open PairDrop: pairdrop Send files: pairdrop file1/directory1 (file2/directory2 file3/directory3 ...) Send text: pairdrop -t "text" Specify domain: pairdrop -d "https://pairdrop.net/" Show this help text: pairdrop (-h|--help) This pairdrop-cli version was released alongside v1.10.4 ```
### Setup #### Linux / Mac 1. Download the latest _pairdrop-cli.zip_ from the [releases page](https://github.com/schlagmichdoch/PairDrop/releases) ```shell wget "https://github.com/schlagmichdoch/PairDrop/releases/download/v1.11.2/pairdrop-cli.zip" ``` or ```shell curl -LO "https://github.com/schlagmichdoch/PairDrop/releases/download/v1.11.2/pairdrop-cli.zip" ``` 2. Unzip the archive to a folder of your choice e.g. `/usr/share/pairdrop-cli/` ```shell sudo unzip pairdrop-cli.zip -d /usr/share/pairdrop-cli/ ``` 3. Copy the file _.pairdrop-cli-config.example_ to _.pairdrop-cli-config_ ```shell sudo cp /usr/share/pairdrop-cli/.pairdrop-cli-config.example /usr/share/pairdrop-cli/.pairdrop-cli-config ``` 4. Make the bash file _pairdrop_ executable ```shell sudo chmod +x /usr/share/pairdrop-cli/pairdrop ``` 5. Add a symlink to /usr/local/bin/ to include _pairdrop_ to _PATH_ ```shell sudo ln -s /usr/share/pairdrop-cli/pairdrop /usr/local/bin/pairdrop ```
#### Windows 1. Download the latest _pairdrop-cli.zip_ from the [releases page](https://github.com/schlagmichdoch/PairDrop/releases) 2. Put file in a preferred folder e.g. `C:\Program Files\pairdrop-cli` 3. Inside this folder, copy the file _.pairdrop-cli-config.example_ to _.pairdrop-cli-config_ 4. Search for and open `Edit environment variables for your account` 5. Click `Environment Variables…` 6. Under _System Variables_ select `Path` and click _Edit..._ 7. Click _New_, insert the preferred folder (`C:\Program Files\pairdrop-cli`), click *OK* until all windows are closed 8. Reopen Command prompt window **Requirements** As Windows cannot execute bash scripts natively, you need to install [Git Bash](https://gitforwindows.org/). Then, you can also use pairdrop-cli from the default Windows Command Prompt by using the shell file instead of the bash file which then itself executes _pairdrop-cli_ (the bash file) via the Git Bash. ```shell pairdrop.sh -h ```
## Send multiple files and directories directly from context menu on Windows ### Registering to open files with PairDrop It is possible to send multiple files with PairDrop via the context menu by adding pairdrop-cli to Windows `Send to` menu: 1. Download the latest _pairdrop-cli.zip_ from the [releases page](https://github.com/schlagmichdoch/PairDrop/releases) 2. Unzip the archive to a folder of your choice e.g. `C:\Program Files\pairdrop-cli\` 3. Inside this folder, copy the file _.pairdrop-cli-config.example_ to _.pairdrop-cli-config_ 4. Copy the shortcut _send with PairDrop.lnk_ 5. Hit Windows Key+R, type: `shell:sendto` and hit Enter. 6. Paste the copied shortcut into the directory 7. Open the properties window of the shortcut and edit the link field to point to _send-with-pairdrop.ps1_ located in the folder you used in step 2: \ `"C:\Program Files\PowerShell\7\pwsh.exe" -File "C:\Program Files\pairdrop-cli\send-with-pairdrop.ps1"` 8. You are done! You can now send multiple files and directories directly via PairDrop: _context menu_ > _Send to_ > _PairDrop_ ##### Requirements As Windows cannot execute bash scripts natively, you need to install [Git Bash](https://gitforwindows.org/).
## Send multiple files and directories directly from context menu on Ubuntu using Nautilus ### Registering to open files with PairDrop It is possible to send multiple files with PairDrop via the context menu by adding pairdrop-cli to Nautilus `Scripts` menu: 1. Register _pairdrop_ as executable via [guide above](#linux). 2. Copy the shell file _send-with-pairdrop_ to `~/.local/share/nautilus/scripts/` to include it in the context menu ```shell cp /usr/share/pairdrop-cli/send-with-pairdrop ~/.local/share/nautilus/scripts/ ``` 3. Make the shell file _send-with-pairdrop_ executable ```shell chmod +x ~/.local/share/nautilus/scripts/send-with-pairdrop ``` 4. You are done! You can now send multiple files and directories directly via PairDrop: _context menu_ > _Scripts_ > _send-with-pairdrop_
## File Handling API The [File Handling API](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files) was implemented, but it was removed as default file associations were overwritten ([#17](https://github.com/schlagmichdoch/PairDrop/issues/17), [#116](https://github.com/schlagmichdoch/PairDrop/issues/116) [#190](https://github.com/schlagmichdoch/PairDrop/issues/190)) and it only worked with explicitly specified file types and couldn't handle directories at all. [< Back](/README.md) ================================================ FILE: docs/technical-documentation.md ================================================ # Technical Documentation ## Encryption, WebRTC, STUN and TURN Encryption is mandatory for WebRTC connections and completely done by the browser itself. When the peers are first connecting, \ a channel is created by exchanging their signaling info. \ This signaling information includes some sort of public key \ and is specific to the clients IP address. \ That is what the STUN Server is used for: \ it simply returns your public IP address \ as you only know your local ip address \ if behind a NAT (router). The transfer of the signaling info is done by the \ PairDrop / Snapdrop server using secure websockets. \ After that the channel itself is completely peer-to-peer \ and all info can only be decrypted by the receiver. \ When the two peers are on the same network \ or when they are not behind any NAT system \ (which they are always for classic \ Snapdrop and for not paired users on PairDrop) \ the files are send directly peer-to-peer. When a user is behind a NAT (behind a router) \ the contents are channeled through a TURN server. \ But again, the contents send via the channel \ can only be decrypted by the receiver. \ So a rogue TURN server could only \ see that there is a connection, but not what is sent. \ Obviously, connections which are channeled through a TURN server \ are not as fast as peer-to-peer. The selection whether a TURN server is needed \ or not is also done automatically by the web browser. \ It simply iterated through the configured \ RTC iceServers and checks what works. \ Only if the STUN server is not sufficient, \ the TURN server is used.  _Diagram created by wowza.com_ Good thing: if your device has an IPv6 address \ it is uniquely reachable by that address. \ As I understand it, when both devices are using \ IPv6 addresses there is no need for a TURN server in any scenario. Learn more by reading https://www.wowza.com/blog/webrtc-encryption-and-security \ which gives a good insight into STUN, TURN and WebRTC. ## Device Pairing The pairing functionality uses the [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API). It works by creating long secrets that are served \ by the server to the initiating and requesting pair peer, \ when the inserted key is correct. \ These long secrets are then saved to an \ indexedDB database in the web browser. \ IndexedDB is somewhat the successor of localStorage \ as saved data is shared between all tabs. \ It goes one step further by making the data persistent \ and available offline if implemented to a PWA. All secrets a client has saved to its database \ are sent to the PairDrop server. \ Peers with a common secret are discoverable \ to each other analog to peers with the same \ IP address are discoverable by each other. What I really like about this approach (and the reason I implemented it) \ is that devices on the same network are always \ visible regardless whether any devices are paired or not. \ The main user flow is never obstructed. \ Paired devices are simply shown additionally. \ This makes it in my idea better than the idea of \ using a room system as [discussed here](https://github.com/RobinLinus/snapdrop/pull/214). [< Back](/README.md) ================================================ FILE: licenses/BSD_3-Clause-zip-js ================================================ BSD 3-Clause License Copyright (c) 2023, Gildas Lormeau Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: licenses/MIT-NoSleep ================================================ The MIT License (MIT) Copyright (c) Rich Tibbett Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: licenses/MIT-heic2any ================================================ MIT License Copyright (c) 2020 Alex Corvi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: package.json ================================================ { "name": "pairdrop", "version": "1.11.2", "type": "module", "description": "", "main": "server/index.js", "scripts": { "start": "node server/index.js", "start:prod": "node server/index.js --rate-limit --auto-restart" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.18.2", "express-rate-limit": "^7.1.5", "ua-parser-js": "^1.0.37", "unique-names-generator": "^4.3.0", "ws": "^8.16.0" }, "engines": { "node": ">=15" } } ================================================ FILE: pairdrop-cli/.gitignore ================================================ .pairdrop-cli-config ================================================ FILE: pairdrop-cli/.pairdrop-cli-config.example ================================================ DOMAIN=https://pairdrop.net/ ================================================ FILE: pairdrop-cli/pairdrop ================================================ #!/bin/bash set -e # PairDrop version when this file was last changed version="v1.10.4" ############################################################ # Help # ############################################################ help() { # Display Help echo "Send files or text with PairDrop via command-line interface." echo "Current domain: ${DOMAIN}" echo echo "Usage:" echo -e "Open PairDrop:\t\t$(basename "$0")" echo -e "Send files:\t\t$(basename "$0") file1/directory1 (file2/directory2 file3/directory3 ...)" echo -e "Send text:\t\t$(basename "$0") -t \"text\"" echo -e "Specify domain:\t\t$(basename "$0") -d \"https://pairdrop.net/\"" echo -e "Show this help text:\t$(basename "$0") (-h|--help)" echo echo "This pairdrop-cli version was released alongside ${version}" } openPairDrop() { url="$DOMAIN" if [[ -n $params ]];then url="${url}?${params}" fi if [[ -n $hash ]];then url="${url}#${hash}" fi echo "PairDrop is opening at $DOMAIN" if [[ $OS == "Windows" ]];then start "$url" elif [[ $OS == "Mac" ]];then open "$url" elif [[ $OS == "WSL" || $OS == "WSL2" ]];then powershell.exe /c "Start-Process ${url}" else xdg-open "$url" > /dev/null 2>&1 fi exit } setOs() { unameOut=$(uname -a) case "${unameOut}" in *Microsoft*) OS="WSL";; #must be first since Windows subsystem for linux will have Linux in the name too *microsoft*) OS="WSL2";; #WARNING: My v2 uses ubuntu 20.4 at the moment slightly different name may not always work Linux*) OS="Linux";; Darwin*) OS="Mac";; CYGWIN*) OS="Cygwin";; MINGW*) OS="Windows";; *Msys) OS="Windows";; *) OS="UNKNOWN:${unameOut}" esac } specifyDomain() { [[ ! $1 = http* ]] || [[ ! $1 = */ ]] && echo "Incorrect format. Specify domain like https://pairdrop.net/" && exit echo "DOMAIN=${1}" > "$config_path" echo -e "Domain is now set to:\n$1\n" } sendText() { params="base64text=hash" hash=$(echo -n "${OPTARG}" | base64) if [[ $(echo -n "$hash" | wc -m) -gt 32600 ]];then params="base64text=paste" if [[ $OS == "Windows" || $OS == "WSL" || $OS == "WSL2" ]];then echo -n "$hash" | clip.exe elif [[ $OS == "Mac" ]];then echo -n "$hash" | pbcopy else (echo -n "$hash" | xclip) || echo "You need to install xclip for sending bigger files from cli" fi hash= fi openPairDrop exit } escapePSPath() { local path=$1 # escape '[' and ']' with grave accent (`) character pathPS=${path//[/\`[} pathPS=${pathPS//]/\`]} # escape single quote (') with another single quote (') pathPS=${pathPS//\'/\'\'} # Convert GitHub bash path "/i/path" to Windows path "I:/path" if [[ $pathPS == /* ]]; then # Remove preceding slash pathPS="${pathPS#/}" # Convert drive letter to uppercase driveLetter=$(echo "${pathPS::1}" | tr '[:lower:]' '[:upper:]') # Put together absolute path as used in Windows pathPS="${driveLetter}:${pathPS:1}" fi echo "$pathPS" } sendFiles() { params="base64zip=hash" workingDir="$(pwd)" tmpDir="/tmp/pairdrop-cli-temp/" tmpDirPS="\$env:TEMP/pairdrop-cli-temp/" index=0 directoryBaseNamesUnix=() directoryPathsUnix=() filePathsUnix=() directoryCount=0 fileCount=0 pathsPS="" #create tmp folder if it does not exist already if [[ ! -d "$tmpDir" ]]; then mkdir "$tmpDir" fi for arg in "$@"; do echo "$arg" [[ ! -e "$arg" ]] && echo "The given path $arg does not exist." && exit # Remove trailing slash from directory arg="${arg%/}" # get absolute path and basename of file/directory absolutePath=$(realpath "$arg") baseName=$(basename "$absolutePath") directoryPath=$(dirname "$absolutePath") if [[ -d $absolutePath ]]; then # is directory ((directoryCount+=1)) # add basename and directory path to arrays directoryBaseNamesUnix+=("$baseName") directoryPathsUnix+=("$directoryPath") else # is file ((fileCount+=1)) absolutePathUnix=$absolutePath # append new path and separate paths with space filePathsUnix+=("$absolutePathUnix") fi # Prepare paths for PowerShell on Windows if [[ $OS == "Windows" ]];then absolutePathPS=$(escapePSPath "$absolutePath") # append new path and separate paths with commas pathsPS+="'${absolutePathPS}', " fi # set fileNames on first loop if [[ $index == 0 ]]; then baseNameU=${baseName// /_} # Prevent baseNameU being empty for hidden files by removing the preceding dot if [[ $baseNameU == .* ]]; then baseNameU=${baseNameU#.*} fi # only use trunk of basename "document.txt" -> "document" baseNameTrunk=${baseNameU%.*} # remove all special characters zipName=${baseNameTrunk//[^a-zA-Z0-9_]/} zipToSendAbs="${tmpDir}${zipName}_pairdrop.zip" wrapperZipAbs="${tmpDir}${zipName}_pairdrop_wrapper.zip" if [[ $OS == "Windows" ]];then zipToSendAbsPS="${tmpDirPS}${zipName}_pairdrop.zip" wrapperZipAbsPS="${tmpDirPS}${zipName}_pairdrop_wrapper.zip" fi fi ((index+=1)) # somehow ((index++)) stops the script done # Prepare paths for PowerShell on Windows if [[ $OS == "Windows" ]];then # remove trailing comma pathsPS=${pathsPS%??} fi echo "Preparing ${fileCount} files and ${directoryCount} directories..." # if arguments include files only -> zip files once so files it is unzipped by sending browser # if arguments include directories -> wrap first zip in a second wrapper zip so that after unzip by sending browser a zip file is sent to receiver # # Preferred zip structure: # pairdrop "d1/d2/d3/f1" "../../d4/d5/d6/f2" "d7/" "../d8/" "f5" # zip structure: pairdrop.zip # |-f1 # |-f2 # |-d7/ # |-d8/ # |-f5 # -> truncate (relative) paths but keep directories [[ -e "$zipToSendAbs" ]] && echo "Cannot overwrite $zipToSendAbs. Please remove first." && exit if [[ $OS == "Windows" ]];then # Powershell does preferred zip structure natively powershell.exe -Command "Compress-Archive -Path ${pathsPS} -DestinationPath ${zipToSendAbsPS}" else # Workaround needed to create preferred zip structure on unix systems # Create zip file with all single files by junking the path if [[ $fileCount != 0 ]]; then zip -q -b /tmp/ -j -0 -r "$zipToSendAbs" "${filePathsUnix[@]}" fi # Add directories recursively to zip file index=0 while [[ $index < $directoryCount ]]; do # workaround to keep directory name but junk the rest of the paths # cd to path above directory cd "${directoryPathsUnix[index]}" # add directory to zip without junking the path zip -q -b /tmp/ -0 -u -r "$zipToSendAbs" "${directoryBaseNamesUnix[index]}" # cd back to working directory cd "$workingDir" ((index+=1)) # somehow ((index++)) stops the script done fi # If directories are included send as zip # -> Create additional zip wrapper which will be unzipped by the sending browser if [[ "$directoryCount" != 0 ]]; then echo "Bundle as ZIP file..." # Prevent filename from being absolute zip path by "cd"ing to directory before zipping zipToSendDirectory=$(dirname "$zipToSendAbs") zipToSendBaseName=$(basename "$zipToSendAbs") cd "$zipToSendDirectory" [[ -e "$wrapperZipAbs" ]] && echo "Cannot overwrite $wrapperZipAbs. Please remove first." && exit if [[ $OS == "Windows" ]];then powershell.exe -Command "Compress-Archive -Path ${zipToSendBaseName} -DestinationPath ${wrapperZipAbsPS} -CompressionLevel Optimal" else zip -q -b /tmp/ -0 "$wrapperZipAbs" "$zipToSendBaseName" fi cd "$workingDir" # remove inner zip file and set wrapper as zipToSend (do not differentiate between OS as this is done via Git Bash on Windows) rm "$zipToSendAbs" zipToSendAbs=$wrapperZipAbs fi # base64 encode zip file if [[ $OS == "Mac" ]];then hash=$(base64 -i "$zipToSendAbs") else hash=$(base64 -w 0 "$zipToSendAbs") fi # remove zip file (do not differentiate between OS as this is done via Git Bash on Windows) rm "$zipToSendAbs" if [[ $(echo -n "$hash" | wc -m) -gt 1000 ]];then params="base64zip=paste" # Copy $hash to clipboard if [[ $OS == "Windows" || $OS == "WSL" || $OS == "WSL2" ]];then echo -n "$hash" | clip.exe elif [[ $OS == "Mac" ]];then echo -n "$hash" | pbcopy elif [ -n "$WAYLAND_DISPLAY" ]; then # Wayland if ! command -v wl-copy &> /dev/null; then echo -e "You need to install 'wl-copy' to send bigger filePathsUnix from cli" echo "Try: sudo apt install wl-clipboard" exit 1 fi # Workaround to prevent use of Pipe which has a max letter limit echo -n "$hash" > /tmp/pairdrop-cli-temp/pairdrop_hash_temp wl-copy < /tmp/pairdrop-cli-temp/pairdrop_hash_temp rm /tmp/pairdrop-cli-temp/pairdrop_hash_temp else # X11 if ! command -v xclip &> /dev/null; then echo -e "You need to install 'xclip' to send bigger filePathsUnix from cli" echo "Try: sudo apt install xclip" exit 1 fi echo -n "$hash" | xclip -sel c fi hash= fi openPairDrop exit } ############################################################ ############################################################ # Main program # ############################################################ ############################################################ script_path="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )" pushd . > '/dev/null'; script_path="${BASH_SOURCE[0]:-$0}"; while [ -h "$script_path" ]; do cd "$( dirname -- "$script_path"; )"; script_path="$( readlink -f -- "$script_path"; )"; done cd "$( dirname -- "$script_path"; )" > '/dev/null'; script_path="$( pwd; )"; popd > '/dev/null'; config_path="${script_path}/.pairdrop-cli-config" # If config file does not exist, try to create it. If it fails log error message and exit [ ! -f "$config_path" ] && specifyDomain "https://pairdrop.net/" && [ ! -f "$config_path" ] && echo "Could not create config file. Add 'DOMAIN=https://pairdrop.net/' to a file called .pairdrop-cli-config in the same file as this 'pairdrop' bash file (${script_path})" && exit # Read config variables export "$(grep -v '^#' "$config_path" | xargs)" setOs ############################################################ # Process the input options. Add options as needed. # ############################################################ # Get the options # open PairDrop if no options are given [[ $# -eq 0 ]] && openPairDrop && exit # display help and exit if first argument is "--help" or more than 2 arguments are given [ "$1" == "--help" ] && help && exit while getopts "d:ht:*" option; do case $option in d) # specify domain - show help and exit if too many arguments [[ $# -gt 2 ]] && help && exit specifyDomain "$2" exit;; t) # Send text - show help and exit if too many arguments [[ $# -gt 2 ]] && help && exit sendText exit;; h | ?) # display help and exit help exit;; esac done # Send file(s) sendFiles "$@" ================================================ FILE: pairdrop-cli/pairdrop.sh ================================================ #!/bin/bash parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" || exit ; pwd -P ) cd "$parent_path" || exit ./pairdrop "$@" ================================================ FILE: pairdrop-cli/send-with-pairdrop ================================================ #!/bin/bash # Initialize an array lines=() # Read each line into the array while IFS= read -r line; do lines+=("$line") done <<< "$NAUTILUS_SCRIPT_SELECTED_FILE_PATHS" # Get the length of the array length=${#lines[@]} # Remove the last entry unset 'lines[length-1]' pairdrop "${lines[@]}" ================================================ FILE: pairdrop-cli/send-with-pairdrop.ps1 ================================================ $scriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path & "$scriptDir\pairdrop.sh" $args ================================================ FILE: public/fonts/OpenSans/OFL.txt ================================================ Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans) This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL ----------------------------------------------------------- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ----------------------------------------------------------- PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. "Reserved Font Name" refers to any names specified as such after the copyright statement(s). "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. ================================================ FILE: public/fonts/OpenSans/README.txt ================================================ Open Sans Variable Font ======================= This download contains Open Sans as both variable fonts and static fonts. Open Sans is a variable font with these axes: wdth wght This means all the styles are contained in these files: OpenSans-VariableFont_wdth,wght.ttf OpenSans-Italic-VariableFont_wdth,wght.ttf If your app fully supports variable fonts, you can now pick intermediate styles that aren’t available as static fonts. Not all apps support variable fonts, and in those cases you can use the static font files for Open Sans: static/OpenSans_Condensed-Light.ttf static/OpenSans_Condensed-Regular.ttf static/OpenSans_Condensed-Medium.ttf static/OpenSans_Condensed-SemiBold.ttf static/OpenSans_Condensed-Bold.ttf static/OpenSans_Condensed-ExtraBold.ttf static/OpenSans_SemiCondensed-Light.ttf static/OpenSans_SemiCondensed-Regular.ttf static/OpenSans_SemiCondensed-Medium.ttf static/OpenSans_SemiCondensed-SemiBold.ttf static/OpenSans_SemiCondensed-Bold.ttf static/OpenSans_SemiCondensed-ExtraBold.ttf static/OpenSans-Light.ttf static/OpenSans-Regular.ttf static/OpenSans-Medium.ttf static/OpenSans-SemiBold.ttf static/OpenSans-Bold.ttf static/OpenSans-ExtraBold.ttf static/OpenSans_Condensed-LightItalic.ttf static/OpenSans_Condensed-Italic.ttf static/OpenSans_Condensed-MediumItalic.ttf static/OpenSans_Condensed-SemiBoldItalic.ttf static/OpenSans_Condensed-BoldItalic.ttf static/OpenSans_Condensed-ExtraBoldItalic.ttf static/OpenSans_SemiCondensed-LightItalic.ttf static/OpenSans_SemiCondensed-Italic.ttf static/OpenSans_SemiCondensed-MediumItalic.ttf static/OpenSans_SemiCondensed-SemiBoldItalic.ttf static/OpenSans_SemiCondensed-BoldItalic.ttf static/OpenSans_SemiCondensed-ExtraBoldItalic.ttf static/OpenSans-LightItalic.ttf static/OpenSans-Italic.ttf static/OpenSans-MediumItalic.ttf static/OpenSans-SemiBoldItalic.ttf static/OpenSans-BoldItalic.ttf static/OpenSans-ExtraBoldItalic.ttf Get started ----------- 1. Install the font files you want to use 2. Use your app's font picker to view the font family and all the available styles Learn more about variable fonts ------------------------------- https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts https://variablefonts.typenetwork.com https://medium.com/variable-fonts In desktop apps https://theblog.adobe.com/can-variable-fonts-illustrator-cc https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts Online https://developers.google.com/fonts/docs/getting_started https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts Installing fonts MacOS: https://support.apple.com/en-us/HT201749 Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows Android Apps https://developers.google.com/fonts/docs/android https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts License ------- Please read the full license text (OFL.txt) to understand the permissions, restrictions and requirements for usage, redistribution, and modification. You can use them in your products & projects – print or digital, commercial or otherwise. This isn't legal advice, please consider consulting a lawyer and see the full license for all details. ================================================ FILE: public/index.html ================================================
PairDrop
v1.11.2
${roomSecretsEntry.display_name}
${roomSecretsEntry.device_name}
`
$pairedDevice
.querySelector('input[type="checkbox"]')
.addEventListener('click', e => {
PersistentStorage
.updateRoomSecretAutoAccept(roomSecretsEntry.secret, e.target.checked)
.then(roomSecretsEntry => {
Events.fire('auto-accept-updated', {
'roomSecret': roomSecretsEntry.entry.secret,
'autoAccept': e.target.checked
});
});
});
$pairedDevice
.querySelector('button')
.addEventListener('click', e => {
PersistentStorage
.deleteRoomSecret(roomSecretsEntry.secret)
.then(roomSecret => {
Events.fire('room-secrets-deleted', [roomSecret]);
Events.fire('evaluate-number-room-secrets');
$pairedDevice.innerText = "";
});
})
this.$pairedDevicesWrapper.appendChild($pairedDevice)
})
}
hide() {
super.hide();
setTimeout(() => {
this.$pairedDevicesWrapper.innerHTML = ""
}, 300);
}
_onEditPairedDevices() {
this._initDOM()
.then(_ => {
this._evaluateOverflowing(this.$pairedDevicesWrapper);
this.show();
});
}
_clearRoomSecrets() {
PersistentStorage
.getAllRoomSecrets()
.then(roomSecrets => {
PersistentStorage
.clearRoomSecrets()
.finally(() => {
Events.fire('room-secrets-deleted', roomSecrets);
Events.fire('evaluate-number-room-secrets');
Events.fire('notify-user', Localization.getTranslation("notifications.pairing-cleared"));
this.hide();
})
});
}
_onPeerDisplayNameChanged(e) {
const peerId = e.detail.peerId;
const peerNode = $(peerId);
if (!peerNode) return;
const peer = peerNode.ui._peer;
if (!peer || !peer._roomIds["secret"]) return;
PersistentStorage
.updateRoomSecretNames(peer._roomIds["secret"], peer.name.displayName, peer.name.deviceName)
.then(roomSecretEntry => {
console.log(`Successfully updated DisplayName and DeviceName for roomSecretEntry ${roomSecretEntry.key}`);
})
}
}
class PublicRoomDialog extends Dialog {
constructor() {
super('public-room-dialog');
this.$key = this.$el.querySelector('.key');
this.$qrCode = this.$el.querySelector('.key-qr-code');
this.$form = this.$el.querySelector('form');
this.$closeBtn = this.$el.querySelector('[close]');
this.$leaveBtn = this.$el.querySelector('.leave-room');
this.$joinSubmitBtn = this.$el.querySelector('button[type="submit"]');
this.$headerBtnJoinPublicRoom = $('join-public-room');
this.$footerBadgePublicRoomDevices = $$('.discovery-wrapper .badge-room-public-id');
this.$form.addEventListener('submit', e => this._onSubmit(e));
this.$closeBtn.addEventListener('click', _ => this.hide());
this.$leaveBtn.addEventListener('click', _ => this._leavePublicRoom())
this.$headerBtnJoinPublicRoom.addEventListener('click', _ => this._onHeaderBtnClick());
this.$footerBadgePublicRoomDevices.addEventListener('click', _ => this._onHeaderBtnClick());
this.inputKeyContainer = new InputKeyContainer(
this.$el.querySelector('.input-key-container'),
/[a-z|A-Z]/,
() => this.$joinSubmitBtn.removeAttribute('disabled'),
() => this.$joinSubmitBtn.setAttribute('disabled', true),
() => this._submit()
);
Events.on('keydown', e => this._onKeyDown(e));
Events.on('public-room-created', e => this._onPublicRoomCreated(e.detail));
Events.on('peers', e => this._onPeers(e.detail));
Events.on('peer-joined', e => this._onPeerJoined(e.detail));
Events.on('public-room-id-invalid', e => this._onPublicRoomIdInvalid(e.detail));
Events.on('public-room-left', _ => this._onPublicRoomLeft());
this.$el.addEventListener('paste', e => this._onPaste(e));
this.$qrCode.addEventListener('click', _ => this._copyShareRoomUrl());
Events.on('ws-connected', _ => this._onWsConnected());
Events.on('translation-loaded', _ => this.setFooterBadge());
}
_onKeyDown(e) {
if (!this.isShown()) return;
if (e.code === "Escape") {
this.hide();
}
}
_onPaste(e) {
e.preventDefault();
let pastedKey = e.clipboardData.getData("Text");
this.inputKeyContainer._onPaste(pastedKey);
}
_onHeaderBtnClick() {
if (this.roomId) {
this.show();
}
else {
this._createPublicRoom();
}
}
_createPublicRoom() {
Events.fire('create-public-room');
}
_onPublicRoomCreated(roomId) {
this.roomId = roomId;
this._setKeyAndQrCode();
this.show();
sessionStorage.setItem('public_room_id', roomId);
}
_setKeyAndQrCode() {
if (!this.roomId) return;
this.$key.innerText = this.roomId.toUpperCase();
// Display the QR code for the url
const qr = new QRCode({
content: this._getShareRoomUrl(),
width: 130,
height: 130,
padding: 1,
background: 'white',
color: 'rgb(18, 18, 18)',
ecl: "L",
join: true
});
this.$qrCode.innerHTML = qr.svg();
this.setFooterBadge();
}
setFooterBadge() {
if (!this.roomId) return;
this.$footerBadgePublicRoomDevices.innerText = Localization.getTranslation("footer.public-room-devices", null, {
roomId: this.roomId.toUpperCase()
});
this.$footerBadgePublicRoomDevices.removeAttribute('hidden');
Events.fire('evaluate-footer-badges');
}
_getShareRoomUrl() {
let url = new URL(location.href);
url.searchParams.append('room_id', this.roomId)
return url.href;
}
_copyShareRoomUrl() {
navigator.clipboard.writeText(this._getShareRoomUrl())
.then(_ => {
Events.fire('notify-user', Localization.getTranslation("notifications.room-url-copied-to-clipboard"));
})
.catch(_ => {
Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
})
}
_onWsConnected() {
let roomId = sessionStorage.getItem('public_room_id');
if (!roomId) return;
this.roomId = roomId;
this._setKeyAndQrCode();
this._joinPublicRoom(roomId, true);
}
_onSubmit(e) {
e.preventDefault();
this._submit();
}
_submit() {
let inputKey = this.inputKeyContainer._getInputKey();
this._joinPublicRoom(inputKey);
}
_joinPublicRoom(roomId, createIfInvalid = false) {
roomId = roomId.toLowerCase();
if (/^[a-z]{5}$/g.test(roomId)) {
this.roomIdJoin = roomId;
this.inputKeyContainer.focusLastChar();
Events.fire('join-public-room', {
roomId: roomId,
createIfInvalid: createIfInvalid
});
}
}
_onPeers(message) {
message.peers.forEach(messagePeer => {
this._evaluateJoinedPeer(messagePeer.id, message.roomId);
});
}
_onPeerJoined(message) {
this._evaluateJoinedPeer(message.peer.id, message.roomId);
}
_evaluateJoinedPeer(peerId, roomId) {
const isInitiatedRoomId = roomId === this.roomId;
const isJoinedRoomId = roomId === this.roomIdJoin;
if (!peerId || !roomId || !(isInitiatedRoomId || isJoinedRoomId)) return;
this.hide();
sessionStorage.setItem('public_room_id', roomId);
if (isJoinedRoomId) {
this.roomId = roomId;
this.roomIdJoin = false;
this._setKeyAndQrCode();
}
}
_onPublicRoomIdInvalid(roomId) {
Events.fire('notify-user', Localization.getTranslation("notifications.public-room-id-invalid"));
if (roomId === sessionStorage.getItem('public_room_id')) {
sessionStorage.removeItem('public_room_id');
}
}
_leavePublicRoom() {
Events.fire('leave-public-room', this.roomId);
}
_onPublicRoomLeft() {
let publicRoomId = this.roomId.toUpperCase();
this.hide();
this._cleanUp();
Events.fire('notify-user', Localization.getTranslation("notifications.public-room-left", null, {publicRoomId: publicRoomId}));
}
show() {
this.inputKeyContainer._enableChars();
super.show();
}
hide() {
this.inputKeyContainer._cleanUp();
super.hide();
}
_cleanUp() {
this.roomId = null;
this.inputKeyContainer._cleanUp();
sessionStorage.removeItem('public_room_id');
this.$footerBadgePublicRoomDevices.setAttribute('hidden', true);
Events.fire('evaluate-footer-badges');
}
}
class SendTextDialog extends Dialog {
constructor() {
super('send-text-dialog');
this.$text = this.$el.querySelector('.textarea');
this.$peerDisplayName = this.$el.querySelector('.display-name');
this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', e => this._onSubmit(e));
this.$text.addEventListener('input', _ => this._onInput());
this.$text.addEventListener('paste', e => this._onPaste(e));
this.$text.addEventListener('drop', e => this._onDrop(e));
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
Events.on('keydown', e => this._onKeyDown(e));
}
_onKeyDown(e) {
if (!this.isShown()) return;
if (e.code === "Escape") {
this.hide();
}
else if (e.code === "Enter" && (e.ctrlKey || e.metaKey)) {
if (this._textEmpty()) return;
this._send();
}
}
async _onDrop(e) {
e.preventDefault()
const text = e.dataTransfer.getData("text");
const selection = window.getSelection();
if (selection.rangeCount) {
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(text));
}
this._onInput();
}
async _onPaste(e) {
e.preventDefault()
const text = (e.clipboardData || window.clipboardData).getData('text');
const selection = window.getSelection();
if (selection.rangeCount) {
selection.deleteFromDocument();
const textNode = document.createTextNode(text);
const range = document.createRange();
range.setStart(textNode, textNode.length);
range.collapse(true);
selection.getRangeAt(0).insertNode(textNode);
selection.removeAllRanges();
selection.addRange(range);
}
this._onInput();
}
_textEmpty() {
return !this.$text.innerText || this.$text.innerText === "\n";
}
_onInput() {
if (this._textEmpty()) {
this.$submit.setAttribute('disabled', true);
// remove remaining whitespace on Firefox on text deletion
this.$text.innerText = "";
}
else {
this.$submit.removeAttribute('disabled');
}
this._evaluateOverflowing(this.$text);
}
_onRecipient(peerId, deviceName) {
this.correspondingPeerId = peerId;
this.$peerDisplayName.innerText = deviceName;
this.$peerDisplayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id");
this.$peerDisplayName.classList.add($(peerId).ui._badgeClassName());
this.show();
const range = document.createRange();
const sel = window.getSelection();
range.selectNodeContents(this.$text);
sel.removeAllRanges();
sel.addRange(range);
}
_onSubmit(e) {
e.preventDefault();
this._send();
}
_send() {
Events.fire('send-text', {
to: this.correspondingPeerId,
text: this.$text.innerText
});
this.hide();
setTimeout(() => this.$text.innerText = "", 300);
}
}
class ReceiveTextDialog extends Dialog {
constructor() {
super('receive-text-dialog');
Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
this.$text = this.$el.querySelector('#text');
this.$copy = this.$el.querySelector('#copy');
this.$close = this.$el.querySelector('#close');
this.$copy.addEventListener('click', _ => this._onCopy());
this.$close.addEventListener('click', _ => this.hide());
Events.on('keydown', e => this._onKeyDown(e));
this.$displayName = this.$el.querySelector('.display-name');
this._receiveTextQueue = [];
this._hideTimeout = null;
}
selectionEmpty() {
return !window.getSelection().toString()
}
async _onKeyDown(e) {
if (!this.isShown()) return
if (e.code === "KeyC" && (e.ctrlKey || e.metaKey) && this.selectionEmpty()) {
await this._onCopy()
}
else if (e.code === "Escape") {
this.hide();
}
}
_onText(text, peerId) {
window.blop.play();
this._receiveTextQueue.push({text: text, peerId: peerId});
this._setDocumentTitleMessages();
changeFavicon("images/favicon-96x96-notification.png");
if (this.isShown() || this._hideTimeout) return;
this._dequeueRequests();
}
_dequeueRequests() {
this._setDocumentTitleMessages();
changeFavicon("images/favicon-96x96-notification.png");
let {text, peerId} = this._receiveTextQueue.shift();
this._showReceiveTextDialog(text, peerId);
}
_showReceiveTextDialog(text, peerId) {
this.$displayName.innerText = $(peerId).ui._displayName();
this.$displayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id");
this.$displayName.classList.add($(peerId).ui._badgeClassName());
this.$text.innerText = text;
// Beautify text if text is not too long
if (this.$text.innerText.length <= 300000) {
// Hacky workaround to replace URLs with link nodes in all cases
// 1. Use text variable, find all valid URLs via regex and replace URLs with placeholder
// 2. Use html variable, find placeholders with regex and replace them with link nodes
let $textShadow = document.createElement('div');
$textShadow.innerText = text;
let linkNodes = {};
let searchHTML = $textShadow.innerHTML;
const p = "@";
const pRgx = new RegExp(`${p}\\d+`, 'g');
let occP = searchHTML.match(pRgx) || [];
let m = 0;
const chrs = `a-zA-Z0-9áàäčçđéèêŋńñóòôöšŧüžæøåëìíîïðùúýþćěłřśţźǎǐǒǔǥǧǩǯəʒâûœÿãõāēīōūăąĉċďĕėęĝğġģĥħĩĭįıĵķĸĺļľņňŏőŕŗŝşťũŭůűųŵŷżאבגדהוזחטיךכלםמןנסעףפץצקרשתװױײ`; // allowed chars in domain names
const rgxWhitespace = `(^|\\n|\\s)`;
const rgxScheme = `(https?:\\/\\/)`
const rgxSchemeMail = `(mailto:)`
const rgxUserinfo = `(?:(?:[${chrs}.%]*(?::[${chrs}.%]*)?)@)`;
const rgxHost = `(?:(?:[${chrs}](?:[${chrs}-]{0,61}[${chrs}])?\\.)+[${chrs}][${chrs}-]{0,61}[${chrs}])`;
const rgxPort = `(:\\d*)`;
const rgxPath = `(?:(?:\\/[${chrs}\\-\\._~!$&'\\(\\)\\*\\+,;=:@%]*)*)`;
const rgxQueryAndFragment = `(\\?[${chrs}\\-_~:\\/#\\[\\]@!$&'\\(\\)*+,;=%.]*)`;
const rgxUrl = `(${rgxScheme}?${rgxHost}${rgxPort}?${rgxPath}${rgxQueryAndFragment}?)`;
const rgxMail = `(${rgxSchemeMail}${rgxUserinfo}${rgxHost})`;
const rgxUrlAll = new RegExp(`${rgxWhitespace}${rgxUrl}`, 'g');
const rgxMailAll = new RegExp(`${rgxWhitespace}${rgxMail}`, 'g');
const replaceMatchWithPlaceholder = function(match, whitespace, url, scheme) {
let link = url;
// prefix www.example.com with http scheme to prevent it from being a relative link
if (!scheme && link.startsWith('www')) {
link = "http://" + link
}
if (!isUrlValid(link)) {
// link is not valid -> do not replace
return match;
}
// link is valid -> replace with link node placeholder
// find linkNodePlaceholder that is not yet present in text node
m++;
while (occP.includes(`${p}${m}`)) {
m++;
}
let linkNodePlaceholder = `${p}${m}`;
// add linkNodePlaceholder to text node and save a reference to linkNodes object
linkNodes[linkNodePlaceholder] = `${url}`;
return `${whitespace}${linkNodePlaceholder}`;
}
text = text.replace(rgxUrlAll, replaceMatchWithPlaceholder);
$textShadow.innerText = text.replace(rgxMailAll, replaceMatchWithPlaceholder);
this.$text.innerHTML = $textShadow.innerHTML.replace(pRgx,
(m) => {
let urlNode = linkNodes[m];
return urlNode ? urlNode : m;
});
}
this._evaluateOverflowing(this.$text);
this.show();
}
_setDocumentTitleMessages() {
document.title = this._receiveTextQueue.length <= 1
? `${ Localization.getTranslation("document-titles.message-received") } - PairDrop`
: `${ Localization.getTranslation("document-titles.message-received-plural", null, {count: this._receiveTextQueue.length + 1}) } - PairDrop`;
}
async _onCopy() {
const sanitizedText = this.$text.innerText.replace(/\u00A0/gm, ' ');
navigator.clipboard
.writeText(sanitizedText)
.then(_ => {
Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard"));
this.hide();
})
.catch(_ => {
Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
});
}
hide() {
super.hide();
// If queue is empty -> clear text field | else -> open next message
this._hideTimeout = setTimeout(() => {
if (!this._receiveTextQueue.length) {
this.$text.innerHTML = "";
}
else {
this._dequeueRequests();
}
this._hideTimeout = null;
}, 500);
}
}
class ShareTextDialog extends Dialog {
constructor() {
super('share-text-dialog');
this.$text = this.$el.querySelector('.textarea');
this.$approveMsgBtn = this.$el.querySelector('button[type="submit"]');
this.$checkbox = this.$el.querySelector('input[type="checkbox"]')
this.$approveMsgBtn.addEventListener('click', _ => this._approveShareText());
// Only show this per default if user sets checkmark
this.$checkbox.checked = localStorage.getItem('approve-share-text')
? ShareTextDialog.isApproveShareTextSet()
: false;
this._setCheckboxValueToLocalStorage();
this.$checkbox.addEventListener('change', _ => this._setCheckboxValueToLocalStorage());
Events.on('share-text-dialog', e => this._onShareText(e.detail));
Events.on('keydown', e => this._onKeyDown(e));
this.$text.addEventListener('input', _ => this._evaluateEmptyText());
}
static isApproveShareTextSet() {
return localStorage.getItem('approve-share-text') === "true";
}
_setCheckboxValueToLocalStorage() {
localStorage.setItem('approve-share-text', this.$checkbox.checked ? "true" : "false");
}
_onKeyDown(e) {
if (!this.isShown()) return;
if (e.code === "Escape") {
this._approveShareText();
}
else if (e.code === "Enter" && (e.ctrlKey || e.metaKey)) {
if (this._textEmpty()) return;
this._approveShareText();
}
}
_textEmpty() {
return !this.$text.innerText || this.$text.innerText === "\n";
}
_evaluateEmptyText() {
if (this._textEmpty()) {
this.$approveMsgBtn.setAttribute('disabled', true);
// remove remaining whitespace on Firefox on text deletion
this.$text.innerText = "";
}
else {
this.$approveMsgBtn.removeAttribute('disabled');
}
this._evaluateOverflowing(this.$text);
}
_onShareText(text) {
this.$text.innerText = text;
this._evaluateEmptyText();
this.show();
}
_approveShareText() {
Events.fire('activate-share-mode', {text: this.$text.innerText});
this.hide();
}
hide() {
super.hide();
setTimeout(() => this.$text.innerText = "", 500);
}
}
class Base64Dialog extends Dialog {
constructor() {
super('base64-paste-dialog');
this.$title = this.$el.querySelector('.dialog-title');
this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
this.$fallbackTextarea = this.$el.querySelector('.textarea');
}
async evaluateBase64Text(base64Text, hash) {
this.$title.innerText = Localization.getTranslation('dialogs.base64-title-text');
if (base64Text === 'paste') {
// ?base64text=paste
// base64 encoded string is ready to be pasted from clipboard
this.preparePasting('text');
this.show();
}
else if (base64Text === 'hash') {
// ?base64text=hash#BASE64ENCODED
// base64 encoded text is url hash which cannot be seen by the server and is faster (recommended)
this.show();
await this.processBase64Text(hash);
}
else {
// ?base64text=BASE64ENCODED
// base64 encoded text is part of the url param. Seen by server and slow (not recommended)
this.show();
await this.processBase64Text(base64Text);
}
}
async evaluateBase64Zip(base64Zip, hash) {
this.$title.innerText = Localization.getTranslation('dialogs.base64-title-files');
if (base64Zip === 'paste') {
// ?base64zip=paste || ?base64zip=true
this.preparePasting('files');
this.show();
}
else if (base64Zip === 'hash') {
// ?base64zip=hash#BASE64ENCODED
// base64 encoded zip file is url hash which cannot be seen by the server
await this.processBase64Zip(hash);
}
}
_setPasteBtnToProcessing() {
this.$pasteBtn.style.pointerEvents = "none";
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-processing");
}
preparePasting(type) {
const translateType = type === 'text'
? Localization.getTranslation("dialogs.base64-text")
: Localization.getTranslation("dialogs.base64-files");
if (navigator.clipboard.readText) {
this.$pasteBtn.innerText = Localization.getTranslation("dialogs.base64-tap-to-paste", null, {type: translateType});
this._clickCallback = _ => this.processClipboard(type);
this.$pasteBtn.addEventListener('click', _ => this._clickCallback());
}
else {
console.log("`navigator.clipboard.readText()` is not available on your browser.\nOn Firefox you can set `dom.events.asyncClipboard.readText` to true under `about:config` for convenience.")
this.$pasteBtn.setAttribute('hidden', true);
this.$fallbackTextarea.setAttribute('placeholder', Localization.getTranslation("dialogs.base64-paste-to-send", null, {type: translateType}));
this.$fallbackTextarea.removeAttribute('hidden');
this._inputCallback = _ => this.processInput(type);
this.$fallbackTextarea.addEventListener('input', _ => this._inputCallback());
this.$fallbackTextarea.focus();
}
}
async processInput(type) {
const base64 = this.$fallbackTextarea.textContent;
this.$fallbackTextarea.textContent = '';
await this.processPastedBase64(type, base64);
}
async processClipboard(type) {
const base64 = await navigator.clipboard.readText();
await this.processPastedBase64(type, base64);
}
async processPastedBase64(type, base64) {
try {
if (type === 'text') {
await this.processBase64Text(base64);
}
else {
await this.processBase64Zip(base64);
}
}
catch(e) {
Events.fire('notify-user', Localization.getTranslation("notifications.clipboard-content-incorrect"));
console.log("Clipboard content is incorrect.")
}
this.hide();
}
async processBase64Text(base64){
this._setPasteBtnToProcessing();
try {
const decodedText = await decodeBase64Text(base64);
if (ShareTextDialog.isApproveShareTextSet()) {
Events.fire('share-text-dialog', decodedText);
}
else {
Events.fire('activate-share-mode', {text: decodedText});
}
}
catch (e) {
Events.fire('notify-user', Localization.getTranslation("notifications.text-content-incorrect"));
console.log("Text content incorrect.");
}
this.hide();
}
async processBase64Zip(base64) {
this._setPasteBtnToProcessing();
try {
const decodedFiles = await decodeBase64Files(base64);
Events.fire('activate-share-mode', {files: decodedFiles});
}
catch (e) {
Events.fire('notify-user', Localization.getTranslation("notifications.file-content-incorrect"));
console.log("File content incorrect.");
}
this.hide();
}
hide() {
this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
this.$fallbackTextarea.setAttribute('disabled', true);
this.$fallbackTextarea.blur();
super.hide();
}
}
class AboutUI {
constructor() {
this.$donationBtn = $('donation-btn');
this.$twitterBtn = $('x-twitter-btn');
this.$mastodonBtn = $('mastodon-btn');
this.$blueskyBtn = $('bluesky-btn');
this.$customBtn = $('custom-btn');
this.$privacypolicyBtn = $('privacypolicy-btn');
Events.on('config', e => this._onConfig(e.detail.buttons));
}
async _onConfig(btnConfig) {
await this._evaluateBtnConfig(this.$donationBtn, btnConfig.donation_button);
await this._evaluateBtnConfig(this.$twitterBtn, btnConfig.twitter_button);
await this._evaluateBtnConfig(this.$mastodonBtn, btnConfig.mastodon_button);
await this._evaluateBtnConfig(this.$blueskyBtn, btnConfig.bluesky_button);
await this._evaluateBtnConfig(this.$customBtn, btnConfig.custom_button);
await this._evaluateBtnConfig(this.$privacypolicyBtn, btnConfig.privacypolicy_button);
}
async _evaluateBtnConfig($btn, config) {
// if config is not set leave everything as default
if (!Object.keys(config).length) return;
if (config.active === "false") {
$btn.setAttribute('hidden', true);
} else {
if (config.link) {
$btn.setAttribute('href', config.link);
}
if (config.title) {
$btn.setAttribute('title', config.title);
// prevent overwriting of custom title when setting different language
$btn.removeAttribute('data-i18n-key');
$btn.removeAttribute('data-i18n-attrs');
}
if (config.icon) {
$btn.setAttribute('title', config.title);
// prevent overwriting of custom title when setting different language
$btn.removeAttribute('data-i18n-key');
$btn.removeAttribute('data-i18n-attrs');
}
$btn.removeAttribute('hidden');
}
}
}
class Toast extends Dialog {
constructor() {
super('toast');
this.$closeBtn = this.$el.querySelector('.icon-button');
this.$text = this.$el.querySelector('span');
this.$closeBtn.addEventListener('click', _ => this.hide());
Events.on('notify-user', e => this._onNotify(e.detail));
Events.on('share-mode-changed', _ => this.hide());
}
_onNotify(message) {
if (this.hideTimeout) clearTimeout(this.hideTimeout);
this.$text.innerText = typeof message === "object" ? message.message : message;
this.show();
if (typeof message === "object" && message.persistent) return;
this.hideTimeout = setTimeout(() => this.hide(), 5000);
}
hide() {
if (this.hideTimeout) clearTimeout(this.hideTimeout);
super.hide();
}
}
class Notifications {
constructor() {
// Check if the browser supports notifications
if (!('Notification' in window)) return;
this.$headerNotificationButton = $('notification');
this.$downloadBtn = $('download-btn');
this.$headerNotificationButton.addEventListener('click', _ => this._requestPermission());
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files));
Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
}
async _requestPermission() {
await Notification.
requestPermission(permission => {
if (permission !== 'granted') {
Events.fire('notify-user', Localization.getTranslation("notifications.notifications-permissions-error"));
return;
}
Events.fire('notify-user', Localization.getTranslation("notifications.notifications-enabled"));
this.$headerNotificationButton.setAttribute('hidden', true);
});
}
_notify(title, body) {
const config = {
body: body,
icon: '/images/logo_transparent_128x128.png',
}
let notification;
try {
notification = new Notification(title, config);
} catch (e) {
// Android doesn't support "new Notification" if service worker is installed
if (!serviceWorker || !serviceWorker.showNotification) return;
notification = serviceWorker.showNotification(title, config);
}
// Notification is persistent on Android. We have to close it manually
const visibilitychangeHandler = () => {
if (document.visibilityState === 'visible') {
notification.close();
Events.off('visibilitychange', visibilitychangeHandler);
}
};
Events.on('visibilitychange', visibilitychangeHandler);
return notification;
}
_messageNotification(message, peerId) {
if (document.visibilityState !== 'visible') {
const peerDisplayName = $(peerId).ui._displayName();
if (/^((https?:\/\/|www)[abcdefghijklmnopqrstuvwxyz0123456789\-._~:\/?#\[\]@!$&'()*+,;=]+)$/.test(message.toLowerCase())) {
const notification = this._notify(Localization.getTranslation("notifications.link-received", null, {name: peerDisplayName}), message);
this._bind(notification, _ => window.open(message, '_blank', "noreferrer"));
}
else {
const notification = this._notify(Localization.getTranslation("notifications.message-received", null, {name: peerDisplayName}), message);
this._bind(notification, _ => this._copyText(message, notification));
}
}
}
_downloadNotification(files) {
if (document.visibilityState !== 'visible') {
let imagesOnly = files.every(file => file.type.split('/')[0] === 'image');
let title;
if (files.length === 1) {
title = `${files[0].name}`;
}
else {
let fileOther;
if (files.length === 2) {
fileOther = imagesOnly
? Localization.getTranslation("dialogs.file-other-description-image")
: Localization.getTranslation("dialogs.file-other-description-file");
}
else {
fileOther = imagesOnly
? Localization.getTranslation("dialogs.file-other-description-image-plural", null, {count: files.length - 1})
: Localization.getTranslation("dialogs.file-other-description-file-plural", null, {count: files.length - 1});
}
title = `${files[0].name} ${fileOther}`
}
const notification = this._notify(title, Localization.getTranslation("notifications.click-to-download"));
this._bind(notification, _ => this._download(notification));
}
}
_requestNotification(request, peerId) {
if (document.visibilityState !== 'visible') {
let imagesOnly = request.header.every(header => header.mime.split('/')[0] === 'image');
let displayName = $(peerId).querySelector('.name').textContent;
let descriptor;
if (request.header.length === 1) {
descriptor = imagesOnly
? Localization.getTranslation("dialogs.title-image")
: Localization.getTranslation("dialogs.title-file");
}
else {
descriptor = imagesOnly
? Localization.getTranslation("dialogs.title-image-plural")
: Localization.getTranslation("dialogs.title-file-plural");
}
let title = Localization
.getTranslation("notifications.request-title", null, {
name: displayName,
count: request.header.length,
descriptor: descriptor.toLowerCase()
});
const notification = this._notify(title, Localization.getTranslation("notifications.click-to-show"));
}
}
_download(notification) {
this.$downloadBtn.click();
notification.close();
}
async _copyText(message, notification) {
if (await navigator.clipboard.writeText(message)) {
notification.close();
this._notify(Localization.getTranslation("notifications.copied-text"));
}
else {
this._notify(Localization.getTranslation("notifications.copied-text-error"));
}
}
_bind(notification, handler) {
if (notification.then) {
notification.then(_ => {
serviceWorker
.getNotifications()
.then(_ => {
serviceWorker.addEventListener('notificationclick', handler);
})
});
}
else {
notification.onclick = handler;
}
}
}
class NetworkStatusUI {
constructor() {
Events.on('offline', _ => this._showOfflineMessage());
Events.on('online', _ => this._showOnlineMessage());
if (!navigator.onLine) this._showOfflineMessage();
}
_showOfflineMessage() {
Events.fire('notify-user', {
message: Localization.getTranslation("notifications.offline"),
persistent: true
});
}
_showOnlineMessage() {
Events.fire('notify-user', Localization.getTranslation("notifications.online"));
}
}
class WebShareTargetUI {
async evaluateShareTarget(shareTargetType, title, text, url) {
if (shareTargetType === "text") {
let shareTargetText;
if (url) {
shareTargetText = url; // we share only the link - no text.
}
else if (title && text) {
shareTargetText = title + '\r\n' + text;
}
else {
shareTargetText = title + text;
}
if (ShareTextDialog.isApproveShareTextSet()) {
Events.fire('share-text-dialog', shareTargetText);
}
else {
Events.fire('activate-share-mode', {text: shareTargetText});
}
}
else if (shareTargetType === "files") {
let openRequest = window.indexedDB.open('pairdrop_store')
openRequest.onsuccess = e => {
const db = e.target.result;
const tx = db.transaction('share_target_files', 'readwrite');
const store = tx.objectStore('share_target_files');
const request = store.getAll();
request.onsuccess = _ => {
const fileObjects = request.result;
let filesReceived = [];
for (let i = 0; i < fileObjects.length; i++) {
filesReceived.push(new File([fileObjects[i].buffer], fileObjects[i].name));
}
const clearRequest = store.clear()
clearRequest.onsuccess = _ => db.close();
Events.fire('activate-share-mode', {files: filesReceived})
}
}
}
}
}
// Keep for legacy reasons even though this is removed from new PWA installations
class WebFileHandlersUI {
async evaluateLaunchQueue() {
if (!"launchQueue" in window) return;
launchQueue.setConsumer(async launchParams => {
console.log("Launched with: ", launchParams);
if (!launchParams.files.length) return;
let files = [];
for (let i = 0; i < launchParams.files.length; i++) {
if (i !== 0 && await launchParams.files[i].isSameEntry(launchParams.files[i-1])) continue;
const file = await launchParams.files[i].getFile();
files.push(file);
}
Events.fire('activate-share-mode', {files: files})
});
}
}
class NoSleepUI {
constructor() {
NoSleepUI._nosleep = new NoSleep();
}
static enable() {
if (!this._interval) {
NoSleepUI._nosleep.enable();
NoSleepUI._interval = setInterval(() => NoSleepUI.disable(), 10000);
}
}
static disable() {
if ($$('x-peer[status]') === null) {
clearInterval(NoSleepUI._interval);
NoSleepUI._nosleep.disable();
}
}
}
================================================
FILE: public/scripts/util.js
================================================
// Polyfill for Navigator.clipboard.writeText
if (!navigator.clipboard) {
navigator.clipboard = {
writeText: text => {
// A contains the text to copy
const span = document.createElement('span');
span.innerText = text;
span.style.whiteSpace = 'pre'; // Preserve consecutive spaces and newlines
// Paint the span outside the viewport
span.style.position = 'absolute';
span.style.left = '-9999px';
span.style.top = '-9999px';
const win = window;
const selection = win.getSelection();
win.document.body.appendChild(span);
const range = win.document.createRange();
selection.removeAllRanges();
range.selectNode(span);
selection.addRange(range);
let success = false;
try {
success = win.document.execCommand('copy');
} catch (err) {
return Promise.error();
}
selection.removeAllRanges();
span.remove();
return Promise.resolve();
}
}
}
// Polyfills
window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
window.hiddenProperty = 'hidden' in document
? 'hidden'
: 'webkitHidden' in document
? 'webkitHidden'
: 'mozHidden' in document
? 'mozHidden'
: null;
window.visibilityChangeEvent = 'visibilitychange' in document
? 'visibilitychange'
: 'webkitvisibilitychange' in document
? 'webkitvisibilitychange'
: 'mozvisibilitychange' in document
? 'mozvisibilitychange'
: null;
window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
window.android = /android/i.test(navigator.userAgent);
window.isMobile = window.iOS || window.android;
// Helper functions
const zipper = (() => {
let zipWriter;
return {
createNewZipWriter() {
zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"), { bufferedWrite: true, level: 0 });
},
addFile(file, options) {
return zipWriter.add(file.name, new zip.BlobReader(file), options);
},
async getBlobURL() {
if (zipWriter) {
const blobURL = URL.createObjectURL(await zipWriter.close());
zipWriter = null;
return blobURL;
}
else {
throw new Error("Zip file closed");
}
},
async getZipFile(filename = "archive.zip") {
if (zipWriter) {
const file = new File([await zipWriter.close()], filename, {type: "application/zip"});
zipWriter = null;
return file;
}
else {
throw new Error("Zip file closed");
}
},
async getEntries(file, options) {
return await (new zip.ZipReader(new zip.BlobReader(file))).getEntries(options);
},
async getData(entry, options) {
return await entry.getData(new zip.BlobWriter(), options);
},
};
})();
const mime = (() => {
const suffixToMimeMap = {
"cpl": "application/cpl+xml",
"gpx": "application/gpx+xml",
"gz": "application/gzip",
"jar": "application/java-archive",
"war": "application/java-archive",
"ear": "application/java-archive",
"class": "application/java-vm",
"js": "application/javascript",
"mjs": "application/javascript",
"json": "application/json",
"map": "application/json",
"webmanifest": "application/manifest+json",
"doc": "application/msword",
"dot": "application/msword",
"wiz": "application/msword",
"bin": "application/octet-stream",
"dms": "application/octet-stream",
"lrf": "application/octet-stream",
"mar": "application/octet-stream",
"so": "application/octet-stream",
"dist": "application/octet-stream",
"distz": "application/octet-stream",
"pkg": "application/octet-stream",
"bpk": "application/octet-stream",
"dump": "application/octet-stream",
"elc": "application/octet-stream",
"deploy": "application/octet-stream",
"img": "application/octet-stream",
"msp": "application/octet-stream",
"msm": "application/octet-stream",
"buffer": "application/octet-stream",
"oda": "application/oda",
"oxps": "application/oxps",
"pdf": "application/pdf",
"asc": "application/pgp-signature",
"sig": "application/pgp-signature",
"prf": "application/pics-rules",
"p7c": "application/pkcs7-mime",
"cer": "application/pkix-cert",
"ai": "application/postscript",
"eps": "application/postscript",
"ps": "application/postscript",
"apk": "application/vnd.android.package-archive",
"m3u8": "application/vnd.apple.mpegurl",
"pkpass": "application/vnd.apple.pkpass",
"kml": "application/vnd.google-earth.kml+xml",
"kmz": "application/vnd.google-earth.kmz",
"cab": "application/vnd.ms-cab-compressed",
"xls": "application/vnd.ms-excel",
"xlm": "application/vnd.ms-excel",
"xla": "application/vnd.ms-excel",
"xlc": "application/vnd.ms-excel",
"xlt": "application/vnd.ms-excel",
"xlw": "application/vnd.ms-excel",
"msg": "application/vnd.ms-outlook",
"ppt": "application/vnd.ms-powerpoint",
"pot": "application/vnd.ms-powerpoint",
"ppa": "application/vnd.ms-powerpoint",
"pps": "application/vnd.ms-powerpoint",
"pwz": "application/vnd.ms-powerpoint",
"mpp": "application/vnd.ms-project",
"mpt": "application/vnd.ms-project",
"xps": "application/vnd.ms-xpsdocument",
"odb": "application/vnd.oasis.opendocument.database",
"ods": "application/vnd.oasis.opendocument.spreadsheet",
"odt": "application/vnd.oasis.opendocument.text",
"osm": "application/vnd.openstreetmap.data+xml",
"pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
"xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"pcap": "application/vnd.tcpdump.pcap",
"cap": "application/vnd.tcpdump.pcap",
"dmp": "application/vnd.tcpdump.pcap",
"wpd": "application/vnd.wordperfect",
"wasm": "application/wasm",
"7z": "application/x-7z-compressed",
"dmg": "application/x-apple-diskimage",
"bcpio": "application/x-bcpio",
"torrent": "application/x-bittorrent",
"cbr": "application/x-cbr",
"cba": "application/x-cbr",
"cbt": "application/x-cbr",
"cbz": "application/x-cbr",
"cb7": "application/x-cbr",
"vcd": "application/x-cdlink",
"crx": "application/x-chrome-extension",
"cpio": "application/x-cpio",
"csh": "application/x-csh",
"deb": "application/x-debian-package",
"udeb": "application/x-debian-package",
"dvi": "application/x-dvi",
"arc": "application/x-freearc",
"gtar": "application/x-gtar",
"hdf": "application/x-hdf",
"h5": "application/x-hdf5",
"php": "application/x-httpd-php",
"iso": "application/x-iso9660-image",
"key": "application/x-iwork-keynote-sffkey",
"numbers": "application/x-iwork-numbers-sffnumbers",
"pages": "application/x-iwork-pages-sffpages",
"latex": "application/x-latex",
"run": "application/x-makeself",
"mif": "application/x-mif",
"lnk": "application/x-ms-shortcut",
"mdb": "application/x-msaccess",
"exe": "application/x-msdownload",
"dll": "application/x-msdownload",
"com": "application/x-msdownload",
"bat": "application/x-msdownload",
"msi": "application/x-msdownload",
"pub": "application/x-mspublisher",
"cdf": "application/x-netcdf",
"nc": "application/x-netcdf",
"pl": "application/x-perl",
"pm": "application/x-perl",
"prc": "application/x-pilot",
"pdb": "application/x-pilot",
"p12": "application/x-pkcs12",
"pfx": "application/x-pkcs12",
"ram": "application/x-pn-realaudio",
"pyc": "application/x-python-code",
"pyo": "application/x-python-code",
"rar": "application/x-rar-compressed",
"rpm": "application/x-redhat-package-manager",
"sh": "application/x-sh",
"shar": "application/x-shar",
"swf": "application/x-shockwave-flash",
"sql": "application/x-sql",
"srt": "application/x-subrip",
"sv4cpio": "application/x-sv4cpio",
"sv4crc": "application/x-sv4crc",
"gam": "application/x-tads",
"tar": "application/x-tar",
"tcl": "application/x-tcl",
"tex": "application/x-tex",
"roff": "application/x-troff",
"t": "application/x-troff",
"tr": "application/x-troff",
"man": "application/x-troff-man",
"me": "application/x-troff-me",
"ms": "application/x-troff-ms",
"ustar": "application/x-ustar",
"src": "application/x-wais-source",
"xpi": "application/x-xpinstall",
"xhtml": "application/xhtml+xml",
"xht": "application/xhtml+xml",
"xsl": "application/xml",
"rdf": "application/xml",
"wsdl": "application/xml",
"xpdl": "application/xml",
"zip": "application/zip",
"3gp": "audio/3gp",
"3gpp": "audio/3gpp",
"3g2": "audio/3gpp2",
"3gpp2": "audio/3gpp2",
"aac": "audio/aac",
"adts": "audio/aac",
"loas": "audio/aac",
"ass": "audio/aac",
"au": "audio/basic",
"snd": "audio/basic",
"mid": "audio/midi",
"midi": "audio/midi",
"kar": "audio/midi",
"rmi": "audio/midi",
"mpga": "audio/mpeg",
"mp2": "audio/mpeg",
"mp2a": "audio/mpeg",
"mp3": "audio/mpeg",
"m2a": "audio/mpeg",
"m3a": "audio/mpeg",
"oga": "audio/ogg",
"ogg": "audio/ogg",
"spx": "audio/ogg",
"opus": "audio/opus",
"aif": "audio/x-aiff",
"aifc": "audio/x-aiff",
"aiff": "audio/x-aiff",
"flac": "audio/x-flac",
"m4a": "audio/x-m4a",
"m3u": "audio/x-mpegurl",
"wma": "audio/x-ms-wma",
"ra": "audio/x-pn-realaudio",
"wav": "audio/x-wav",
"otf": "font/otf",
"ttf": "font/ttf",
"woff": "font/woff",
"woff2": "font/woff2",
"emf": "image/emf",
"gif": "image/gif",
"heic": "image/heic",
"heif": "image/heif",
"ief": "image/ief",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"pict": "image/pict",
"pct": "image/pict",
"pic": "image/pict",
"png": "image/png",
"svg": "image/svg+xml",
"svgz": "image/svg+xml",
"tif": "image/tiff",
"tiff": "image/tiff",
"psd": "image/vnd.adobe.photoshop",
"djvu": "image/vnd.djvu",
"djv": "image/vnd.djvu",
"dwg": "image/vnd.dwg",
"dxf": "image/vnd.dxf",
"dds": "image/vnd.ms-dds",
"webp": "image/webp",
"3ds": "image/x-3ds",
"ras": "image/x-cmu-raster",
"ico": "image/x-icon",
"bmp": "image/x-ms-bmp",
"pnm": "image/x-portable-anymap",
"pbm": "image/x-portable-bitmap",
"pgm": "image/x-portable-graymap",
"ppm": "image/x-portable-pixmap",
"rgb": "image/x-rgb",
"tga": "image/x-tga",
"xbm": "image/x-xbitmap",
"xpm": "image/x-xpixmap",
"xwd": "image/x-xwindowdump",
"eml": "message/rfc822",
"mht": "message/rfc822",
"mhtml": "message/rfc822",
"nws": "message/rfc822",
"obj": "model/obj",
"stl": "model/stl",
"dae": "model/vnd.collada+xml",
"ics": "text/calendar",
"ifb": "text/calendar",
"css": "text/css",
"csv": "text/csv",
"html": "text/html",
"htm": "text/html",
"shtml": "text/html",
"markdown": "text/markdown",
"md": "text/markdown",
"txt": "text/plain",
"text": "text/plain",
"conf": "text/plain",
"def": "text/plain",
"list": "text/plain",
"log": "text/plain",
"in": "text/plain",
"ini": "text/plain",
"rtx": "text/richtext",
"rtf": "text/rtf",
"tsv": "text/tab-separated-values",
"c": "text/x-c",
"cc": "text/x-c",
"cxx": "text/x-c",
"cpp": "text/x-c",
"h": "text/x-c",
"hh": "text/x-c",
"dic": "text/x-c",
"java": "text/x-java-source",
"lua": "text/x-lua",
"py": "text/x-python",
"etx": "text/x-setext",
"sgm": "text/x-sgml",
"sgml": "text/x-sgml",
"vcf": "text/x-vcard",
"xml": "text/xml",
"xul": "text/xul",
"yaml": "text/yaml",
"yml": "text/yaml",
"ts": "video/mp2t",
"mp4": "video/mp4",
"mp4v": "video/mp4",
"mpg4": "video/mp4",
"mpeg": "video/mpeg",
"m1v": "video/mpeg",
"mpa": "video/mpeg",
"mpe": "video/mpeg",
"mpg": "video/mpeg",
"mov": "video/quicktime",
"qt": "video/quicktime",
"webm": "video/webm",
"flv": "video/x-flv",
"m4v": "video/x-m4v",
"asf": "video/x-ms-asf",
"asx": "video/x-ms-asf",
"vob": "video/x-ms-vob",
"wmv": "video/x-ms-wmv",
"avi": "video/x-msvideo",
"*": "video/x-sgi-movie",
"kdbx": "application/x-keepass2"
}
return {
guessMimeByFilename(filename) {
const split = filename.split('.');
if (split.length === 1) {
// Filename does not include suffix
return false;
}
const suffix = split[split.length - 1].toLowerCase();
return suffixToMimeMap[suffix];
},
addMissingMimeTypesToFiles(files) {
// if filetype is empty guess via suffix otherwise leave unchanged
for (let i = 0; i < files.length; i++) {
if (!files[i].type) {
files[i] = new File([files[i]], files[i].name, {type: mime.guessMimeByFilename(files[i].name) || "application/octet-stream"});
}
}
return files;
}
};
})();
/*
cyrb53 (c) 2018 bryc (github.com/bryc)
A fast and simple hash function with decent collision resistance.
Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity.
Public domain. Attribution appreciated.
*/
const cyrb53 = function(str, seed = 0) {
let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i);
h1 = Math.imul(h1 ^ ch, 2654435761);
h2 = Math.imul(h2 ^ ch, 1597334677);
}
h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909);
h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);
return 4294967296 * (2097151 & h2) + (h1>>>0);
};
function onlyUnique (value, index, array) {
return array.indexOf(value) === index;
}
function getUrlWithoutArguments() {
return `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
}
function changeFavicon(src) {
document.querySelector('[rel="icon"]').href = src;
document.querySelector('[rel="shortcut icon"]').href = src;
}
function arrayBufferToBase64(buffer) {
let binary = '';
let bytes = new Uint8Array(buffer);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa( binary );
}
function base64ToArrayBuffer(base64) {
let binary_string = window.atob(base64);
let len = binary_string.length;
let bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
async function fileToBlob (file) {
return new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type});
}
function getThumbnailAsDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
return new Promise(async (resolve, reject) => {
try {
if (file.type === "image/heif" || file.type === "image/heic") {
// hotfix: Converting heic images taken on iOS 18 crashes page. Waiting for PR #350
reject(new Error(`Hotfix: Converting of HEIC/HEIF images currently disabled.`));
return;
// // browsers can't show heic files --> convert to jpeg before creating thumbnail
// let blob = await fileToBlob(file);
// file = await heic2any({
// blob,
// toType: "image/jpeg",
// quality: quality
// });
}
let imageUrl = URL.createObjectURL(file);
let image = new Image();
image.src = imageUrl;
await waitUntilImageIsLoaded(imageUrl);
let imageWidth = image.width;
let imageHeight = image.height;
let canvas = document.createElement('canvas');
// resize the canvas and draw the image data into it
if (width && height) {
canvas.width = width;
canvas.height = height;
}
else if (width) {
canvas.width = width;
canvas.height = Math.floor(imageHeight * width / imageWidth)
}
else if (height) {
canvas.width = Math.floor(imageWidth * height / imageHeight);
canvas.height = height;
}
else {
canvas.width = imageWidth;
canvas.height = imageHeight
}
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
let dataUrl = canvas.toDataURL("image/jpeg", quality);
resolve(dataUrl);
} catch (e) {
console.error(e);
reject(new Error(`Could not create an image thumbnail from type ${file.type}`));
}
})
}
// Resolves returned promise when image is loaded and throws error if image cannot be shown
function waitUntilImageIsLoaded(imageUrl, timeout = 10000) {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = imageUrl;
const onLoad = () => {
cleanup();
resolve();
};
const onError = () => {
cleanup();
reject(new Error('Image failed to load.'));
};
const cleanup = () => {
clearTimeout(timeoutId);
image.onload = null;
image.onerror = null;
URL.revokeObjectURL(imageUrl);
};
const timeoutId = setTimeout(() => {
cleanup();
reject(new Error('Image loading timed out.'));
}, timeout);
image.onload = onLoad;
image.onerror = onError;
});
}
async function decodeBase64Files(base64) {
if (!base64) throw new Error('Base64 is empty');
let bstr = atob(base64), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const zipBlob = new File([u8arr], 'archive.zip');
let files = [];
const zipEntries = await zipper.getEntries(zipBlob);
for (let i = 0; i < zipEntries.length; i++) {
let fileBlob = await zipper.getData(zipEntries[i]);
files.push(new File([fileBlob], zipEntries[i].filename));
}
return files
}
async function decodeBase64Text(base64) {
if (!base64) throw new Error('Base64 is empty');
return decodeURIComponent(escape(window.atob(base64)))
}
function isUrlValid(url) {
try {
new URL(url);
return true;
}
catch (e) {
return false;
}
}
================================================
FILE: public/scripts/worker/canvas-worker.js
================================================
self.onmessage = (e) => {
switch (e.data.type) {
case "createCanvas": createCanvas(e.data);
break;
case "initCanvas": initCanvas(e.data.footerOffsetHeight, e.data.clientWidth, e.data.clientHeight);
break;
case "startAnimation": startAnimation();
break;
case "onShareModeChange": onShareModeChange(e.data.active);
break;
case "switchAnimation": switchAnimation(e.data.animate);
break;
}
};
let baseColorNormal;
let baseColorShareMode;
let baseOpacityNormal;
let baseOpacityShareMode;
let speed;
let fps;
let c;
let cCtx;
let x0, y0, w, h, dw, offset;
let startTime;
let animate = true;
let currentFrame = 0;
let lastFrame;
let baseColor;
let baseOpacity;
function createCanvas(data) {
baseColorNormal = data.baseColorNormal;
baseColorShareMode = data.baseColorShareMode;
baseOpacityNormal = data.baseOpacityNormal;
baseOpacityShareMode = data.baseOpacityShareMode;
speed = data.speed;
fps = data.fps;
c = data.canvas;
cCtx = c.getContext("2d");
lastFrame = fps / speed - 1;
baseColor = baseColorNormal;
baseOpacity = baseOpacityNormal;
}
function initCanvas(footerOffsetHeight, clientWidth, clientHeight) {
let oldW = w;
let oldH = h;
let oldOffset = offset;
w = clientWidth;
h = clientHeight;
offset = footerOffsetHeight - 28;
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
c.width = w;
c.height = h;
x0 = w / 2;
y0 = h - offset;
dw = Math.round(Math.min(Math.max(0.6 * w, h)) / 10);
drawFrame(currentFrame);
}
function startAnimation() {
startTime = Date.now();
animateBg();
}
function switchAnimation(state) {
if (!animate && state) {
// animation starts again. Set startTime to specific value to prevent frame jump
startTime = Date.now() - 1000 * currentFrame / fps;
}
animate = state;
requestAnimationFrame(animateBg);
}
function onShareModeChange(active) {
baseColor = active ? baseColorShareMode : baseColorNormal;
baseOpacity = active ? baseOpacityShareMode : baseOpacityNormal;
drawFrame(currentFrame);
}
function drawCircle(ctx, radius) {
ctx.lineWidth = 2;
let opacity = Math.max(0, baseOpacity * (1 - 1.2 * radius / Math.max(w, h)));
if (radius > dw * 7) {
opacity *= (8 * dw - radius) / dw
}
if (ctx.setStrokeColor) {
// older blink/webkit based browsers do not understand opacity in strokeStyle. Use deprecated setStrokeColor instead
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle#webkitblink-specific_note
ctx.setStrokeColor("grey", opacity);
}
else {
ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`;
}
ctx.beginPath();
ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke();
}
function drawCircles(ctx, frame) {
ctx.clearRect(0, 0, w, h);
for (let i = 7; i >= 0; i--) {
drawCircle(ctx, dw * i + speed * dw * frame / fps + 33);
}
}
function drawFrame(frame) {
cCtx.clearRect(0, 0, w, h);
drawCircles(cCtx, frame);
}
function animateBg() {
let now = Date.now();
if (!animate && currentFrame === lastFrame) {
// Animation stopped and cycle finished -> stop drawing frames
return;
}
let timeSinceLastFullCycle = (now - startTime) % (1000 / speed);
let nextFrame = Math.trunc(fps * timeSinceLastFullCycle / 1000);
// Only draw frame if it differs from current frame
if (nextFrame !== currentFrame) {
drawFrame(nextFrame);
currentFrame = nextFrame;
}
requestAnimationFrame(animateBg);
}
================================================
FILE: public/service-worker.js
================================================
const cacheVersion = 'v1.11.2';
const cacheTitle = `pairdrop-cache-${cacheVersion}`;
const relativePathsToCache = [
'./',
'index.html',
'manifest.json',
'styles/styles-main.css',
'styles/styles-deferred.css',
'scripts/browser-tabs-connector.js',
'scripts/localization.js',
'scripts/main.js',
'scripts/network.js',
'scripts/persistent-storage.js',
'scripts/ui.js',
'scripts/ui-main.js',
'scripts/util.js',
'scripts/worker/canvas-worker.js',
'scripts/libs/heic2any.min.js',
'scripts/libs/no-sleep.min.js',
'scripts/libs/qr-code.min.js',
'scripts/libs/zip.min.js',
'sounds/blop.mp3',
'sounds/blop.ogg',
'images/favicon-96x96.png',
'images/favicon-96x96-notification.png',
'images/android-chrome-192x192.png',
'images/android-chrome-192x192-maskable.png',
'images/android-chrome-512x512.png',
'images/android-chrome-512x512-maskable.png',
'images/apple-touch-icon.png',
'fonts/OpenSans/static/OpenSans-Medium.ttf',
'lang/ar.json',
'lang/be.json',
'lang/bg.json',
'lang/ca.json',
'lang/cs.json',
'lang/da.json',
'lang/de.json',
'lang/en.json',
'lang/es.json',
'lang/et.json',
'lang/eu.json',
'lang/fa.json',
'lang/fr.json',
'lang/he.json',
'lang/hu.json',
'lang/id.json',
'lang/it.json',
'lang/ja.json',
'lang/kn.json',
'lang/ko.json',
'lang/nb.json',
'lang/nl.json',
'lang/nn.json',
'lang/pl.json',
'lang/pt-BR.json',
'lang/ro.json',
'lang/ru.json',
'lang/sk.json',
'lang/ta.json',
'lang/tr.json',
'lang/uk.json',
'lang/zh-CN.json',
'lang/zh-HK.json',
'lang/zh-TW.json'
];
const relativePathsNotToCache = [
'config'
]
self.addEventListener('install', function(event) {
// Perform install steps
console.log("Cache files for sw:", cacheVersion);
event.waitUntil(
caches.open(cacheTitle)
.then(function(cache) {
return cache
.addAll(relativePathsToCache)
.then(_ => {
console.log('All files cached for sw:', cacheVersion);
self.skipWaiting();
});
})
);
});
// fetch the resource from the network
const fromNetwork = (request, timeout) =>
new Promise((resolve, reject) => {
const timeoutId = setTimeout(reject, timeout);
fetch(request, {cache: "no-store"})
.then(response => {
if (response.redirected) {
throw new Error("Fetch is redirect. Abort usage and cache!");
}
clearTimeout(timeoutId);
resolve(response);
// Prevent requests that are in relativePathsNotToCache from being cached
if (doNotCacheRequest(request)) return;
updateCache(request)
.then(() => console.log("Cache successfully updated for", request.url))
.catch(err => console.log("Cache could not be updated for", request.url, err));
})
.catch(error => {
// Handle any errors that occurred during the fetch
console.error(`Could not fetch ${request.url}.`);
reject(error);
});
});
// fetch the resource from the browser cache
const fromCache = request =>
caches
.open(cacheTitle)
.then(cache =>
cache.match(request)
);
const rootUrl = location.href.substring(0, location.href.length - "service-worker.js".length);
const rootUrlLength = rootUrl.length;
const doNotCacheRequest = request => {
const requestRelativePath = request.url.substring(rootUrlLength);
return relativePathsNotToCache.indexOf(requestRelativePath) !== -1
};
// cache the current page to make it available for offline
const updateCache = request => new Promise((resolve, reject) => {
caches
.open(cacheTitle)
.then(cache =>
fetch(request, {cache: "no-store"})
.then(response => {
if (response.redirected) {
throw new Error("Fetch is redirect. Abort usage and cache!");
}
cache
.put(request, response)
.then(() => resolve());
})
.catch(reason => reject(reason))
);
});
// general strategy when making a request:
// 1. Try to retrieve file from cache
// 2. If cache is not available: Fetch from network and update cache.
// This way, cached files are only updated if the cacheVersion is changed
self.addEventListener('fetch', function(event) {
const swOrigin = new URL(self.location.href).origin;
const requestOrigin = new URL(event.request.url).origin;
if (swOrigin !== requestOrigin) {
// Do not handle requests from other origin
event.respondWith(fetch(event.request));
}
else if (event.request.method === "POST") {
// Requests related to Web Share Target.
event.respondWith((async () => {
const share_url = await evaluateRequestData(event.request);
return Response.redirect(encodeURI(share_url), 302);
})());
}
else {
// Regular requests not related to Web Share Target:
// If request is excluded from cache -> respondWith fromNetwork
// else -> try fromCache first
event.respondWith(
doNotCacheRequest(event.request)
? fromNetwork(event.request, 10000)
: fromCache(event.request)
.then(rsp => {
// if fromCache resolves to undefined fetch from network instead
if (!rsp) {
throw new Error("No match found.");
}
return rsp;
})
.catch(error => {
console.error("Could not retrieve request from cache:", event.request.url, error);
return fromNetwork(event.request, 10000);
})
);
}
});
// on activation, we clean up the previously registered service workers
self.addEventListener('activate', evt => {
console.log("Activate sw:", cacheVersion);
evt.waitUntil(clients.claim());
return evt.waitUntil(
caches
.keys()
.then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheTitle) {
console.log("Delete cache:", cacheName);
return caches.delete(cacheName);
}
})
);
})
)
});
const evaluateRequestData = function (request) {
return new Promise(async (resolve) => {
const formData = await request.formData();
const title = formData.get("title");
const text = formData.get("text");
const url = formData.get("url");
const files = formData.getAll("allfiles");
const pairDropUrl = request.url;
if (files && files.length > 0) {
let fileObjects = [];
for (let i=0; i