From b6238b05aeec7be2ba8a749da5cfe1072242e078 Mon Sep 17 00:00:00 2001 From: kylethedeveloper <8023096+kylethedeveloper@users.noreply.github.com> Date: Tue, 21 Feb 2023 22:42:41 -0600 Subject: [PATCH 1/4] add docker-compose instructions to docs --- docs/host-your-own.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/host-your-own.md b/docs/host-your-own.md index e2cf6fe..2be4952 100644 --- a/docs/host-your-own.md +++ b/docs/host-your-own.md @@ -41,6 +41,31 @@ Set options by using the following flags in the `docker run` command:
+## Deployment with Docker Compose + +Here's an example docker-compose file: + +```yaml +version: "2" +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 100 requests per 5 min. + - TZ=Etc/UTC # Time Zone + ports: + - 3000:3000 # Web UI +``` + +Run the compose file with `docker compose up -d`. + +
+ ## Deployment with Docker with self-built image ### Build the image ```bash From 80dc36c00ab44d62673904110f5d8187fa329fcb Mon Sep 17 00:00:00 2001 From: kylethedeveloper <8023096+kylethedeveloper@users.noreply.github.com> Date: Sun, 26 Feb 2023 01:34:37 -0600 Subject: [PATCH 2/4] merge commit --- .github/workflows/github-image.yml | 51 +++++++++++++++++++ package-lock.json | 4 +- package.json | 2 +- public/scripts/ui.js | 4 +- public/service-worker.js | 2 +- public/styles.css | 20 ++++++-- public_included_ws_fallback/scripts/ui.js | 4 +- public_included_ws_fallback/service-worker.js | 2 +- public_included_ws_fallback/styles.css | 20 ++++++-- 9 files changed, 92 insertions(+), 17 deletions(-) create mode 100644 .github/workflows/github-image.yml diff --git a/.github/workflows/github-image.yml b/.github/workflows/github-image.yml new file mode 100644 index 0000000..c240bf8 --- /dev/null +++ b/.github/workflows/github-image.yml @@ -0,0 +1,51 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# GitHub recommends pinning actions to a commit SHA. +# To get a newer version, you will need to update the SHA. +# You can also reference a tag or branch, but the action may change without warning. + +name: GHCR Image CI + +on: + push: + tags: + - "v*.*.*" + +env: + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + +jobs: + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Log in to the Container registry + uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + + - name: Build and push Docker image + uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} diff --git a/package-lock.json b/package-lock.json index 3fb3b38..c9ddb2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pairdrop", - "version": "1.1.0", + "version": "1.1.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "pairdrop", - "version": "1.1.0", + "version": "1.1.3", "license": "ISC", "dependencies": { "express": "^4.18.2", diff --git a/package.json b/package.json index 0196f9f..30444eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pairdrop", - "version": "1.1.0", + "version": "1.1.3", "description": "", "main": "index.js", "scripts": { diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 161f7b3..e864781 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -839,8 +839,8 @@ class PairDeviceDialog extends Dialog { // Display the QR code for the url const qr = new QRCode({ content: this._getShareRoomURL(), - width: 80, - height: 80, + width: 150, + height: 150, padding: 0, background: "transparent", color: getComputedStyle(document.body).getPropertyValue('--text-color'), diff --git a/public/service-worker.js b/public/service-worker.js index e05a378..1f1adc6 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -1,4 +1,4 @@ -const cacheVersion = 'v1.1.0'; +const cacheVersion = 'v1.1.3'; const cacheTitle = `pairdrop-cache-${cacheVersion}`; const urlsToCache = [ 'index.html', diff --git a/public/styles.css b/public/styles.css index dcec033..aa08cbc 100644 --- a/public/styles.css +++ b/public/styles.css @@ -11,7 +11,8 @@ /* Layout */ html { - height: 100%; + min-height: 100%; + height: -webkit-fill-available; } html, @@ -25,6 +26,8 @@ body { } body { + min-height: 100%; + min-height: -webkit-fill-available; flex-grow: 1; align-items: center; justify-content: center; @@ -407,6 +410,7 @@ x-dialog x-background { transition: opacity 300ms; will-change: opacity; padding: 35px; + overflow: overlay; } x-dialog x-paper { @@ -421,6 +425,13 @@ x-dialog x-paper { will-change: transform; } +#pairDeviceDialog x-paper { + position: absolute; + top: max(50%, 350px); + height: 650px; + margin-top: -325px; +} + x-dialog:not([show]) { pointer-events: none; } @@ -491,8 +502,8 @@ x-dialog .font-subheading { #roomKeyQrCode { padding: inherit; margin: auto; - width: 80px; - height: 80px; + width: 150px; + height: 150px; } #pairDeviceDialog hr { @@ -619,6 +630,7 @@ x-dialog .row-reverse { #base64PasteDialog button[close] { margin-top: 20px; } + #base64PasteDialog button[close]:before { border-radius: 8px; } @@ -931,7 +943,7 @@ screen and (min-width: 1100px) { position: fixed; } - x-instructions:before { + x-instructions:not([drop-peer]):not([drop-bg]):before { content: attr(mobile); } } diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index 8e1a306..da103ed 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -840,8 +840,8 @@ class PairDeviceDialog extends Dialog { // Display the QR code for the url const qr = new QRCode({ content: this._getShareRoomURL(), - width: 80, - height: 80, + width: 150, + height: 150, padding: 0, background: "transparent", color: getComputedStyle(document.body).getPropertyValue('--text-color'), diff --git a/public_included_ws_fallback/service-worker.js b/public_included_ws_fallback/service-worker.js index b510684..9e968ec 100644 --- a/public_included_ws_fallback/service-worker.js +++ b/public_included_ws_fallback/service-worker.js @@ -1,4 +1,4 @@ -const cacheVersion = 'v1.1.0'; +const cacheVersion = 'v1.1.3'; const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`; const urlsToCache = [ 'index.html', diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index 9df5852..ab61629 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -12,7 +12,8 @@ /* Layout */ html { - height: 100%; + min-height: 100%; + height: -webkit-fill-available; } html, @@ -26,6 +27,8 @@ body { } body { + min-height: 100%; + min-height: -webkit-fill-available; flex-grow: 1; align-items: center; justify-content: center; @@ -416,6 +419,7 @@ x-dialog x-background { transition: opacity 300ms; will-change: opacity; padding: 35px; + overflow: overlay; } x-dialog x-paper { @@ -430,6 +434,13 @@ x-dialog x-paper { will-change: transform; } +#pairDeviceDialog x-paper { + position: absolute; + top: max(50%, 350px); + height: 650px; + margin-top: -325px; +} + x-dialog:not([show]) { pointer-events: none; } @@ -500,8 +511,8 @@ x-dialog .font-subheading { #roomKeyQrCode { padding: inherit; margin: auto; - width: 80px; - height: 80px; + width: 150px; + height: 150px; } #pairDeviceDialog hr { @@ -628,6 +639,7 @@ x-dialog .row-reverse { #base64PasteDialog button[close] { margin-top: 20px; } + #base64PasteDialog button[close]:before { border-radius: 8px; } @@ -944,7 +956,7 @@ screen and (min-width: 1100px) { position: fixed; } - x-instructions:before { + x-instructions:not([drop-peer]):not([drop-bg]):before { content: attr(mobile); } } From 75726ae5f4e3abfe0806695d2b2ec62d4f2c2f3c Mon Sep 17 00:00:00 2001 From: kylethedeveloper <8023096+kylethedeveloper@users.noreply.github.com> Date: Sun, 26 Feb 2023 01:35:19 -0600 Subject: [PATCH 3/4] resolve comments on documentation --- docs/host-your-own.md | 63 ++++++++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 22 deletions(-) diff --git a/docs/host-your-own.md b/docs/host-your-own.md index 2be4952..88529ea 100644 --- a/docs/host-your-own.md +++ b/docs/host-your-own.md @@ -1,14 +1,17 @@ # Deployment Notes The easiest way to get PairDrop up and running is by using Docker. -## Deployment with Docker from Docker Hub +## Deployment with 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 ``` + > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > -> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command. +> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command. ### Options / Flags Set options by using the following flags in the `docker run` command: @@ -41,6 +44,37 @@ Set options by using the following flags in the `docker run` command:
+### Docker Image from GHCR +```bash +docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop npm run start:prod +``` +> You must use a server proxy to set the X-Forwarded-For 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. +> +> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1) + +### 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. +> +> `--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 npm run start:prod +``` +> You must use a server proxy to set the X-Forwarded-For 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. +> +> To specify options replace `npm run start:prod` according to [the documentation below.](#options--flags-1) + +
+ ## Deployment with Docker Compose Here's an example docker-compose file: @@ -59,31 +93,16 @@ services: - RATE_LIMIT=false # Set to true to limit clients to 100 requests per 5 min. - TZ=Etc/UTC # Time Zone ports: - - 3000:3000 # Web UI + - 127.0.0.1:3000:3000 # Web UI ``` Run the compose file with `docker compose up -d`. -
- -## Deployment with Docker with self-built image -### Build the image -```bash -docker build --pull . -f Dockerfile -t pairdrop -``` -> A GitHub action is set up to do this step automatically. -> -> `--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 npm run start:prod -``` > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > -> To prevent bypassing the proxy and reach the docker container directly, `127.0.0.1` is specified in the run command. -> -> To specify options replace `npm run start:prod` according to [the documentation above.](#options--flags) +> To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command. + +
## Deployment with node @@ -134,7 +153,7 @@ npm start -- --localhost-only > > You must use a server proxy to set the X-Forwarded-For to prevent all clients from discovering each other (See [#HTTP-Server](#http-server)). > -> Use this when deploying PairDrop with node to prevent bypassing the proxy and reach the docker container directly. +> Use this when deploying PairDrop with node to prevent bypassing the proxy by reaching the docker container directly. #### Automatic restart on error ```bash From e96ca53aa4d4c5614a052bac6d8ecfa9c161b436 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Sun, 26 Feb 2023 21:28:17 +0100 Subject: [PATCH 4/4] Fix rate limit docs and set header hierarchy correctly --- docs/host-your-own.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/host-your-own.md b/docs/host-your-own.md index 88529ea..9306fb7 100644 --- a/docs/host-your-own.md +++ b/docs/host-your-own.md @@ -13,23 +13,23 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ls > > To prevent bypassing the proxy by reaching the docker container directly, `127.0.0.1` is specified in the run command. -### Options / Flags +#### Options / Flags Set options by using the following flags in the `docker run` command: -#### Port +##### Port ``` -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` -#### Rate limiting requests +##### Rate limiting requests ``` -e RATE_LIMIT=true ``` -> Limits clients to 100 requests per 5 min +> Limits clients to 1000 requests per 5 min -#### Websocket Fallback (for VPN) +##### Websocket Fallback (for VPN) ``` -e WS_FALLBACK=true ``` @@ -42,8 +42,6 @@ Set options by using the following flags in the `docker run` command: > 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. -
- ### Docker Image from GHCR ```bash docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 ghcr.io/schlagmichdoch/pairdrop npm run start:prod @@ -76,7 +74,6 @@ docker run -d --restart=unless-stopped --name=pairdrop -p 127.0.0.1:3000:3000 -i
## Deployment with Docker Compose - Here's an example docker-compose file: ```yaml @@ -90,7 +87,7 @@ services: - 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 100 requests per 5 min. + - RATE_LIMIT=false # Set to true to limit clients to 1000 requests per 5 min. - TZ=Etc/UTC # Time Zone ports: - 127.0.0.1:3000:3000 # Web UI @@ -167,7 +164,7 @@ npm start -- --auto-restart ```bash npm start -- --rate-limit ``` -> Limits clients to 100 requests per 5 min +> Limits clients to 1000 requests per 5 min