added info in templates editor

* openid authentification

* openid middleware

* openId login

* tidied login page

* removed useless email text field

.dockerignore

@@ -1,15 +0,0 @@
-node_modules
-downloads
-dist
-package-lock.json
-pnpm-lock.yaml
-.pnpm-debug.log
-.parcel-cache
-.git
-src/server/core/*.exe
-src/server/core/yt-dlp
-.env
-*.mp4
-*.ytdl
-*.db
-build/

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help improve the project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Version running**
+Provide the docker label or release tag you're running.
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/workflows/docker-image.yml

@@ -1,28 +0,0 @@
-name: Docker Image CI (Dockerhub)
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-  schedule:
-    - cron: '0 1 * * *'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - name: Login to Docker Hub
-      env:
-        DOCKER_USER: ${{secrets.DOCKER_HUB_USERNAME}}
-        DOCKER_PASSWORD: ${{secrets.DOCKER_HUB_PASSWORD}}
-      run: |
-        docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
-    - name: Install buildx
-      uses: crazy-max/ghaction-docker-buildx@v1
-      with:
-        version: latest
-    - name: Build the Docker image
-      run: docker buildx build . --file Dockerfile --tag ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest --push --platform linux/amd64,linux/arm/v7,linux/arm64
-

.github/workflows/docker-publish.yml

@@ -1,31 +1,14 @@
-name: Docker (ghcr.io)
-
-# 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.
-
+name: Docker
 on:
   release:
-    branches: [ master ]
-    tags: [ 'v*.*.*' ]
+    types: [published]
   push:
     branches: [ master ]
-  pull_request:
-    branches: [ master ]
   schedule:
     - cron : '0 1 * * 0'
 
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
-
-
 jobs:
-  build:
-
+  publish:
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -33,65 +16,67 @@ jobs:
       # This is used to complete the identity challenge
       # with sigstore/fulcio when running outside of PRs.
       id-token: write
-
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      # Install the cosign tool except on PR
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
-        if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@1e95c1de343b5b0c23352d6417ee3e48d5bcd422
+        # v3.1.2
+        uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
         with:
-          cosign-release: 'v1.13.1'
+          cosign-release: 'v1.13.6'
 
-
-      # Workaround: https://github.com/docker/build-push-action/issues/461
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-      - name: Setup Docker buildx
-        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
-
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+      - name: Set up QEMU for ARM emulation
+        # v2.2.0
+        uses: docker/setup-qemu-action@2b82ce82d56a2a04d2637cd93a637ae1b359c0a7
         with:
-          registry: ${{ env.REGISTRY }}
+          platforms: all
+      - name: Set up Docker Buildx
+        # 2.10.0
+        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
+
+      - name: Login to Docker Hub
+        # 2.2.0
+        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      - name: Login to GHCR
+        # 2.2.0
+        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc
+        with:
+          registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
+      - name: Generate Docker metadata
         id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        # v4.6.0
+        uses: docker/metadata-action@818d4b7b91585d195f67373fd9cb0332e31a7175
         with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: |
+           ghcr.io/${{ github.repository }}
+           docker.io/${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui
+          tags: |
+            type=raw,value=latest
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        # v4.2.1
+        uses: docker/build-push-action@0a97817b6ade9f46837855d676c4cca3a2471fc9
         with:
           context: .
-          platforms: linux/amd64,linux/arm/v7,linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
+          platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels}}
 
-      # Sign the resulting Docker image digest except on PRs.
-      # This will only write to the public Rekor transparency log when the Docker
-      # repository is public to avoid leaking data.  If you would like to publish
-      # transparency data even for private images, pass --force to cosign below.
-      # https://github.com/sigstore/cosign
       - name: Sign the published Docker image
-        if: ${{ github.event_name != 'pull_request' }}
         env:
           COSIGN_EXPERIMENTAL: "true"
         # This step uses the identity token to provision an ephemeral certificate
         # against the sigstore community Fulcio instance.
-        run: cosign sign ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}@${{ steps.build-and-push.outputs.digest }}
+        run: |
+          cosign sign ghcr.io/${{ github.repository }}@${{ steps.build-and-push.outputs.digest }}
+          cosign sign docker.io/${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui@${{ steps.build-and-push.outputs.digest }}

.github/workflows/test-container.yml

@@ -0,0 +1,16 @@
+name: Docker Image CI
+
+on:
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the Docker image
+      run: docker build . --file Dockerfile --tag my-image-name:$(date +%s)

.gitignore

@@ -1,11 +1,6 @@
-.parcel-cache
 dist
-package-lock.json
-pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
-src/server/core/*.exe
-src/server/core/yt-dlp
 .env
 *.mp4
 *.ytdl
@@ -16,3 +11,12 @@ downloads
 build/
 yt-dlp-webui
 session.dat
+config.yml
+cookies.txt
+__debug*
+ui/
+.idea
+frontend/.pnp.cjs
+frontend/.pnp.loader.mjs
+frontend/.yarn/install-state.gz
+.db.lock

.vscode/launch.json

@@ -4,13 +4,19 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "go",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "main.go"
+        },
         {
             "type": "chrome",
             "request": "launch",
             "name": "Launch Chrome against localhost",
-            "url": "http://localhost:1234",
+            "url": "http://localhost:5173",
             "webRoot": "${workspaceFolder}",
-            "breakOnLoad": true,
             "sourceMapPathOverrides": {
                 "/__parcel_source_root/*": "${webRoot}/*"
             }

Dockerfile

@@ -1,31 +1,42 @@
-FROM golang:1.20-alpine AS build
-# folder structure
-WORKDIR /usr/src/yt-dlp-webui
-# install core dependencies
-RUN apk update && \
-    apk add nodejs npm go
-# copia la salsa
-COPY . .
-# build frontend
-WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN npm install
-RUN npm run build
-# build backend + incubator
-WORKDIR /usr/src/yt-dlp-webui
-RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
+# Node (pnpm) ------------------------------------------------------------------
+FROM node:20-slim AS ui
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /usr/src/yt-dlp-webui
 
-# but here yes :)
+WORKDIR /usr/src/yt-dlp-webui/frontend
+
+RUN rm -rf node_modules
+
+RUN pnpm install
+RUN pnpm run build
+# -----------------------------------------------------------------------------
+
+# Go --------------------------------------------------------------------------
+FROM golang AS build
+
+WORKDIR /usr/src/yt-dlp-webui
+
+COPY . .
+COPY --from=ui /usr/src/yt-dlp-webui/frontend /usr/src/yt-dlp-webui/frontend
+
+RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
+# -----------------------------------------------------------------------------
+
+# dependencies ----------------------------------------------------------------
 FROM alpine:edge
 
-WORKDIR /downloads
-VOLUME /downloads
+RUN apk update && \
+apk add ffmpeg yt-dlp ca-certificates curl wget psmisc
+
+VOLUME /downloads /config
 
 WORKDIR /app
 
-RUN apk update && \
-    apk add psmisc ffmpeg yt-dlp
-
 COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 
+ENV JWT_SECRET=secret
+
 EXPOSE 3033
-CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

Makefile

@@ -1,16 +1,25 @@
+.PHONY : fe clean all
+
 default:
-	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
+	go run main.go
+
+fe:
+	cd frontend && pnpm build
+
+dev:
+	cd frontend && pnpm dev
 
 all:
-	cd frontend && pnpm build && cd ..
+	$(MAKE) fe && cd ..
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
 
 multiarch:
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 main.go
+	$(MAKE) fe
 	mkdir -p build
-	mv yt-dlp-webui* build
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARM=6 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv6 main.go
+	CGO_ENABLED=0 GOOS=linux GOARM=7 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv7 main.go
 
 clean:
-	rm -rf build
+	rm -rf build

README.md

@@ -1,3 +1,8 @@
+> [!IMPORTANT]
+> Major frontend refactoring in progress.  
+> I won't add features or fix minor issues until completition.
+---
+
 # yt-dlp Web UI
 
 A not so terrible web ui for yt-dlp.  
@@ -12,14 +17,23 @@ The bottleneck remains yt-dlp startup time.
 **Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
 
 ```sh
-docker pull marcobaobao/yt-dlp-webui:latest
+docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
+# latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
 
-![](https://i.ibb.co/RCpfg7q/image.png)
-![](https://i.ibb.co/N2749CD/image.png)
+[app.webm](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
+
+
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
+
+### Integrated File browser
+Stream or download your content, easily.
+
+![](https://i.ibb.co/k0qzLds/image.png)
 
 ## Changelog
 ```
@@ -60,25 +74,17 @@ The currently avaible settings are:
 -   Override the output filename
 -   Override the output path
 -   Pass custom yt-dlp arguments safely
+-   Download queue (limit concurrent downloads)
 
 ![](https://i.ibb.co/YdBVcgc/image.png)
 ![](https://i.ibb.co/Sf102b1/image.png)
 
 ## Format selection
 
-![fs1](https://i.ibb.co/8dgS6ym/image.png)
-
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.
 
 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!
 
-Future releases will have:
--   ~~Multi download~~ *done*
--   ~~Exctract audio~~ *done*
--   ~~Format selection~~ *done*
--   Download archive
--   ~~ARM Build~~ *done available through ghcr.io*
-
 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
     - You must set the server ip address in the settings section (gear icon).
@@ -86,16 +92,10 @@ Future releases will have:
     - As before server address is not specified or simply yt-dlp process takes a lot of time to fire up. (Forking yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop where the server is running)
 
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
+## Docker run
 ```sh
-# recomended for ARM and x86 devices 
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# or
-# docker pull marcobaobao/yt-dlp-webui:latest
-docker run -d -p 3033:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-
-# or even
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-docker create --name yt-dlp-webui -p 8082:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+docker pull marcobaobao/yt-dlp-webui
+docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```
 
 Or with docker but building the container manually.
@@ -103,6 +103,51 @@ Or with docker but building the container manually.
 ```sh
 docker build -t yt-dlp-webui .
 docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui
+
+docker run -d -p 3033:3033 \
+  -v <your dir>:/downloads \  
+  -v <your dir>:/config \ # optional
+  yt-dlp-webui
+
+```
+
+If you opt to add RPC authentication...
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    -v /path/for/config:/config \ # optional
+    marcobaobao/yt-dlp-webui \
+    --auth \
+    --user your_username \
+    --pass your_pass
+```
+
+If you wish for limiting the download queue size...
+
+e.g. limiting max 2 concurrent download.
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    marcobaobao/yt-dlp-webui \
+    --qs 2
+```
+
+### Docker Compose
+```yaml
+services:
+  yt-dlp-webui:
+    image: marcobaobao/yt-dlp-webui
+    ports:
+      - 3033:3033
+    volumes:
+      - <your dir>:/downloads # replace <your dir> with a directory on your host system
+    healthcheck:
+      test: curl -f http://localhost:3033 || exit 1
+    restart: unless-stopped
 ```
 
 ## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
@@ -121,6 +166,29 @@ yt-dlp-webui --out /home/user/downloads --driver /opt/soemdir/yt-dlp
 yt-dlp-webui --conf /home/user/.config/yt-dlp-webui.conf
 ```
 
+### Arguments
+```sh
+Usage yt-dlp-webui:
+  -auth
+        Enable RPC authentication
+  -conf string
+        Config file path
+  -driver string
+        yt-dlp executable path (default "yt-dlp")
+  -out string
+        Where files will be saved (default ".")
+  -host string
+        Host where server will listen at (default "0.0.0.0")
+  -port int
+        Port where server will listen at (default 3033)
+  -qs int
+        Download queue size (default 8)
+  -user string
+        Username required for auth
+  -pass string
+        Password required for auth
+```
+
 ### Config file
 By running `yt-dlp-webui` in standalone mode you have the ability to also specify a config file.
 The config file **will overwrite what have been passed as cli argument**.
@@ -129,9 +197,31 @@ The config file **will overwrite what have been passed as cli argument**.
 # Simple configuration file for yt-dlp webui
 
 ---
+# Host where server will listen at (default: "0.0.0.0")
+#host: 0.0.0.0
+
+# Port where server will listen at (default: 3033)
 port: 8989
+
+# Directory where downloaded files will be stored (default: ".")
 downloadPath: /home/ren/archive
+
+# [optional] Enable RPC authentication (requires username and password)
+require_auth: true
+username: my_username
+password: my_random_secret
+
+# [optional] The download queue size (default: 8)
+queue_size: 4
+
+# [optional] Full path to the yt-dlp (default: "yt-dlp")
 downloaderPath: /usr/local/bin/yt-dlp
+
+# [optional] Directory where the log file will be stored (default: ".")
+#log_path: .
+
+# [optional] Directory where the session database file will be stored (default: ".")
+#session_file_path: .
 ```
 
 ### Systemd integration
@@ -154,6 +244,29 @@ WantedBy=multi-user.target
 systemctl enable yt-dlp-webui
 systemctl start yt-dlp-webui
 ```
+It could be that yt-dlp-webui works correctly when started manually from the console, but with systemd, it does not see the yt-dlp executable, or has issues writing to the database file. One way to fix these issues could be as follows:
+```shell
+cd
+mkdir yt-dlp-webui-workingdir
+# optionally move the already existing database file there:
+mv local.db yt-dlp-webui-workingdir
+nano yt-dlp-webui-workingdir/my.conf
+```
+The config file format is described above; make sure to include the `downloaderPath` setting (the path can possibly be found by running `which yt-dlp`). For example, one could have:
+```
+downloadPath: /stuff/media
+downloaderPath: /home/your_user/.local/bin/yt-dlp
+log_path: /home/your_user/yt-dlp-webui-workingdir
+session_file_path: /home/your_user/yt-dlp-webui-workingdir
+```
+Adjust the Service section in the `/etc/systemd/system/yt-dlp-webui.service` file as follows:
+```
+[Service]
+User=your_user
+Group=your_user
+WorkingDirectory=/home/your_user/yt-dlp-webui-workingdir
+ExecStart=/usr/local/bin/yt-dlp-webui --conf /home/your_user/yt-dlp-webui-workingdir/my.conf
+```
 
 ## Manual installation
 ```sh
@@ -165,6 +278,9 @@ npm run build
 
 go build -o yt-dlp-webui main.go
 ```
+## Open-API
+Navigate to `/openapi` to see the related swagger.
+
 
 ## Extendable
 You dont'like the Material feel?
@@ -185,18 +301,5 @@ Just as an overview, these are the available methods:
 
 For more information open an issue on GitHub and I will provide more info ASAP.
 
-## FAQ
--   **Will it availabe for Raspberry Pi/ generic ARM devices?**
-    - Yes, it's currently available through ghcr.io
-      ```
-      docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
-      ```
-      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
--   **Why the docker image is so heavy?**
-    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
-
--   **Why is it so slow to start a download?**
-    - I genuinely don't know. I know that standalone yt-dlp is slow to start up even on my M1 Mac, so....
-
 ## What yt-dlp-webui is not
 `yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.

docker-compose.yml

@@ -0,0 +1,11 @@
+services:
+  yt-dlp-webui:
+    image: marcobaobao/yt-dlp-webui
+    ports:
+      - 3033:3033
+    volumes:
+      - <your dir>:/downloads # replace <your dir> with a directory on your host system
+      - <your dir>:/config    # directory where config.yml will be stored
+    healthcheck:
+      test: curl -f http://localhost:3033 || exit 1
+    restart: unless-stopped

env.nix

@@ -0,0 +1,4 @@
+{ pkgs ? import <nixpkgs> {} }:
+  pkgs.mkShell {
+    nativeBuildInputs = with pkgs.buildPackages; [ yt-dlp nodejs_22 yarn-berry go ];
+}

examples/Caddyfile

@@ -0,0 +1,5 @@
+resource.yourdomain.tld {
+  handle_path /yt-dlp-webui/* {
+    reverse_proxy  127.0.0.1:3033
+  }
+}

examples/nginx.conf

@@ -0,0 +1,37 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       mime.types;
+
+    default_type  application/octet-stream;
+
+    sendfile            on;
+    keepalive_timeout   65;
+
+    gzip  on;
+
+    server {
+        listen       80;
+        server_name  localhost;
+
+        location ~/yt-dlp/(.*)$ {
+            proxy_pass          http://127.0.0.1:3033/$1;
+            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header    Host $http_host;
+            proxy_http_version  1.1;
+            proxy_set_header    Upgrade $http_upgrade;
+            proxy_set_header    Connection "upgrade";
+
+            client_max_body_size    20000m;
+            proxy_connect_timeout   3000;
+            proxy_send_timeout      3000;
+            proxy_read_timeout      3000;
+            send_timeout            3000;
+        }
+    }
+ }

frontend/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./src/assets/favicon.ico">
     <title>yt-dlp Web UI</title>
 </head>
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dlp-webui",
-  "version": "2.0.7",
+  "version": "3.1.0",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
@@ -8,29 +8,32 @@
   },
   "author": "marcopeocchi",
   "license": "MPL-2.0",
+  "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.2",
-    "@reduxjs/toolkit": "^1.9.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.11.2",
-    "rxjs": "^7.8.1",
-    "uuid": "^9.0.0"
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.13",
+    "@fontsource/roboto-mono": "^5.0.18",
+    "@mui/icons-material": "^5.15.16",
+    "@mui/material": "^5.15.16",
+    "fp-ts": "^2.16.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
+    "react-virtuoso": "^4.7.11",
+    "recoil": "^0.7.7",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.2.4",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.0.10",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "buffer": "^6.0.3",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.8"
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "million": "^3.1.11",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   }
 }

frontend/src/App.tsx

@@ -1,208 +1,11 @@
-import { ThemeProvider } from '@emotion/react'
-
-import ChevronLeft from '@mui/icons-material/ChevronLeft'
-import Dashboard from '@mui/icons-material/Dashboard'
-import Menu from '@mui/icons-material/Menu'
-import SettingsIcon from '@mui/icons-material/Settings'
-import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
-import Storage from '@mui/icons-material/Storage'
-
-import { Box, createTheme } from '@mui/material'
-
-import CircularProgress from '@mui/material/CircularProgress'
-import CssBaseline from '@mui/material/CssBaseline'
-import Divider from '@mui/material/Divider'
-import IconButton from '@mui/material/IconButton'
-import List from '@mui/material/List'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-import Toolbar from '@mui/material/Toolbar'
-import Typography from '@mui/material/Typography'
-import DownloadIcon from '@mui/icons-material/Download';
-
-import { grey } from '@mui/material/colors'
-
-import { Suspense, lazy, useMemo, useState } from 'react'
-import { Provider, useDispatch, useSelector } from 'react-redux'
-
-import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
-import { RootState, store } from './stores/store'
-
-import AppBar from './components/AppBar'
-import Drawer from './components/Drawer'
-
-import Archive from './Archive'
-import { formatGiB } from './utils'
-
-function AppContent() {
-  const [open, setOpen] = useState(false)
-
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-
-  const mode = settings.theme
-  const theme = useMemo(() =>
-    createTheme({
-      palette: {
-        mode: settings.theme,
-        background: {
-          default: settings.theme === 'light' ? grey[50] : '#121212'
-        },
-      },
-    }), [settings.theme]
-  )
-
-  const toggleDrawer = () => {
-    setOpen(!open)
-  }
-
-  const Home = lazy(() => import('./Home'))
-  const Settings = lazy(() => import('./Settings'))
-
-  return (
-    <ThemeProvider theme={theme}>
-      <BrowserRouter>
-        <Box sx={{ display: 'flex' }}>
-          <CssBaseline />
-          <AppBar position="absolute" open={open}>
-            <Toolbar sx={{ pr: '24px' }}>
-              <IconButton
-                edge="start"
-                color="inherit"
-                aria-label="open drawer"
-                onClick={toggleDrawer}
-                sx={{
-                  marginRight: '36px',
-                  ...(open && { display: 'none' }),
-                }}
-              >
-                <Menu />
-              </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                color="inherit"
-                noWrap
-                sx={{ flexGrow: 1 }}
-              >
-                yt-dlp WebUI
-              </Typography>
-              {
-                status.freeSpace ?
-                  <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                  }}>
-                    <Storage />
-                    <span>&nbsp;{formatGiB(status.freeSpace)}&nbsp;</span>
-                  </div>
-                  : null
-              }
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-              }}>
-                <SettingsEthernet />
-                <span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <Drawer variant="permanent" open={open}>
-            <Toolbar
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                px: [1],
-              }}
-            >
-              <IconButton onClick={toggleDrawer}>
-                <ChevronLeft />
-              </IconButton>
-            </Toolbar>
-            <Divider />
-            <List component="nav">
-              <Link to={'/'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton disabled={status.downloading}>
-                  <ListItemIcon>
-                    <Dashboard />
-                  </ListItemIcon>
-                  <ListItemText primary="Home" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/archive'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton disabled={status.downloading}>
-                  <ListItemIcon>
-                    <DownloadIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Archive" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/settings'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton disabled={status.downloading}>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Settings" />
-                </ListItemButton>
-              </Link>
-            </List>
-          </Drawer>
-          <Box
-            component="main"
-            sx={{
-              flexGrow: 1,
-              height: '100vh',
-              overflow: 'auto',
-            }}
-          >
-            <Toolbar />
-            <Routes>
-              <Route path="/" element={
-                <Suspense fallback={<CircularProgress />}>
-                  <Home />
-                </Suspense>
-              } />
-              <Route path="/settings" element={
-                <Suspense fallback={<CircularProgress />}>
-                  <Settings />
-                </Suspense>
-              } />
-              <Route path="/archive" element={
-                <Suspense fallback={<CircularProgress />}>
-                  <Archive />
-                </Suspense>
-              } />
-            </Routes>
-          </Box>
-        </Box>
-      </BrowserRouter>
-    </ThemeProvider>
-  )
-}
+import { RouterProvider } from 'react-router-dom'
+import { RecoilRoot } from 'recoil'
+import { router } from './router'
 
 export function App() {
   return (
-    <Provider store={store}>
-      <AppContent />
-    </Provider>
+    <RecoilRoot>
+      <RouterProvider router={router} />
+    </RecoilRoot>
   )
 }

frontend/src/Archive.tsx

@@ -1,221 +0,0 @@
-import {
-  Backdrop,
-  Button,
-  Checkbox,
-  CircularProgress,
-  Container,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Paper,
-  SpeedDial,
-  SpeedDialAction,
-  SpeedDialIcon,
-  Typography
-} from '@mui/material'
-
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
-import VideoFileIcon from '@mui/icons-material/VideoFile'
-import FolderIcon from '@mui/icons-material/Folder'
-import { Buffer } from 'buffer'
-import { useEffect, useMemo, useState, useTransition } from 'react'
-import { useSelector } from 'react-redux'
-import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
-import { useObservable } from './hooks/observable'
-import { RootState } from './stores/store'
-import { DeleteRequest, DirectoryEntry } from './types'
-
-export default function Downloaded() {
-  const settings = useSelector((state: RootState) => state.settings)
-
-  const [openDialog, setOpenDialog] = useState(false)
-
-  const serverAddr =
-    `${window.location.protocol}//${settings.serverAddr}:${settings.serverPort}`
-
-  const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
-  const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
-
-  const [isPending, startTransition] = useTransition()
-
-  const fetcher = () => fetch(`${serverAddr}/downloaded`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ subdir: '' })
-  })
-    .then(res => res.json())
-    .then(data => files$.next(data))
-
-  const fetcherSubfolder = (sub: string) => {
-    const folders = sub.split('/')
-
-    let subdir = folders.length > 2
-      ? folders.slice(-(folders.length - 1)).join('/')
-      : folders.pop()
-
-    fetch(`${serverAddr}/downloaded`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ subdir: subdir })
-    })
-      .then(res => res.json())
-      .then(data => {
-        files$.next([{
-          isDirectory: true,
-          name: '..',
-          path: '',
-        }, ...data])
-      })
-  }
-
-  const selectable$ = useMemo(() => files$.pipe(
-    combineLatestWith(selected$),
-    map(([data, selected]) => data.map(x => ({
-      ...x,
-      selected: selected.includes(x.name)
-    }))),
-    share()
-  ), [])
-
-  const selectable = useObservable(selectable$, [])
-
-  const addSelected = (name: string) => {
-    selected$.value.includes(name)
-      ? selected$.next(selected$.value.filter(val => val !== name))
-      : selected$.next([...selected$.value, name])
-  }
-
-  const deleteSelected = () => {
-    Promise.all(selectable
-      .filter(entry => entry.selected)
-      .map(entry => fetch(`${serverAddr}/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          path: entry.path,
-          shaSum: entry.shaSum,
-        } as DeleteRequest)
-      }))
-    ).then(fetcher)
-  }
-
-  useEffect(() => {
-    fetcher()
-  }, [settings.serverAddr, settings.serverPort])
-
-
-  const onFileClick = (path: string) => startTransition(() => {
-    window.open(`${serverAddr}/play?path=${Buffer.from(path).toString('hex')}`)
-  })
-
-  const onFolderClick = (path: string) => startTransition(() => {
-    fetcherSubfolder(path)
-  })
-
-  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={!(files$.observed) || isPending}
-      >
-        <CircularProgress color="primary" />
-      </Backdrop>
-      <Paper sx={{
-        p: 2,
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
-        <Typography pb={0} variant="h5" color="primary">
-          {'Archive'}
-        </Typography>
-        <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
-          {selectable.length === 0 && 'No files found'}
-          {selectable.map((file, idx) => (
-            <ListItem
-              key={idx}
-              secondaryAction={
-                !file.isDirectory && <Checkbox
-                  edge="end"
-                  checked={file.selected}
-                  onChange={() => addSelected(file.name)}
-                />
-              }
-              disablePadding
-            >
-              <ListItemButton onClick={
-                () => file.isDirectory
-                  ? onFolderClick(file.path)
-                  : onFileClick(file.path)
-              }>
-                <ListItemIcon>
-                  {file.isDirectory
-                    ? <FolderIcon />
-                    : <VideoFileIcon />
-                  }
-                </ListItemIcon>
-                <ListItemText primary={file.name} />
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      </Paper>
-      <SpeedDial
-        ariaLabel="SpeedDial basic example"
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
-        icon={<SpeedDialIcon />}
-      >
-        <SpeedDialAction
-          icon={<DeleteForeverIcon />}
-          tooltipTitle={`Delete selected`}
-          tooltipOpen
-          onClick={() => {
-            if (selected$.value.length > 0) {
-              setOpenDialog(true)
-            }
-          }}
-        />
-      </SpeedDial>
-      <Dialog
-        open={openDialog}
-        onClose={() => setOpenDialog(false)}
-      >
-        <DialogTitle>
-          Are you sure?
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            You're deleting:
-          </DialogContentText>
-          <ul>
-            {selected$.value.map((entry, idx) => (
-              <li key={idx}>{entry}</li>
-            ))}
-          </ul>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button onClick={() => {
-            deleteSelected()
-            setOpenDialog(false)
-          }} autoFocus
-          >
-            Ok
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Container>
-  )
-}

frontend/src/Home.tsx

@@ -1,427 +0,0 @@
-import { FileUpload } from '@mui/icons-material'
-import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
-import {
-  Alert,
-  Backdrop,
-  Button,
-  CircularProgress,
-  Container,
-  FormControl,
-  Grid,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Snackbar,
-  SpeedDial,
-  SpeedDialAction,
-  SpeedDialIcon,
-  styled,
-  TextField
-} from '@mui/material'
-import { Buffer } from 'buffer'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { DownloadsCardView } from './components/DownloadsCardView'
-import { DownloadsListView } from './components/DownloadsListView'
-import FormatsGrid from './components/FormatsGrid'
-import { CliArguments } from './features/core/argsParser'
-import I18nBuilder from './features/core/intl'
-import { RPCClient, socket$ } from './features/core/rpcClient'
-import { toggleListView } from './features/settings/settingsSlice'
-import { connected, setFreeSpace } from './features/status/statusSlice'
-import { RootState } from './stores/store'
-import type { DLMetadata, RPCResponse, RPCResult } from './types'
-import { isValidURL, toFormatArgs } from './utils'
-
-export default function Home() {
-  // redux state
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>()
-  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
-  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
-  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
-  const [pickedBestFormat, setPickedBestFormat] = useState('')
-
-  const [customArgs, setCustomArgs] = useState('')
-  const [downloadPath, setDownloadPath] = useState(0)
-  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([])
-
-  const [fileNameOverride, setFilenameOverride] = useState('')
-
-  const [url, setUrl] = useState('')
-  const [workingUrl, setWorkingUrl] = useState('')
-
-  const [showBackdrop, setShowBackdrop] = useState(true)
-  const [showToast, setShowToast] = useState(true)
-
-  const [socketHasError, setSocketHasError] = useState(false)
-
-  // memos
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(), [settings.serverAddr, settings.serverPort])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
-
-  // refs
-  const urlInputRef = useRef<HTMLInputElement>(null)
-  const customFilenameInputRef = useRef<HTMLInputElement>(null)
-
-  /* -------------------- Effects -------------------- */
-
-  /* WebSocket connect event handler*/
-  useEffect(() => {
-    if (!status.connected) {
-      const sub = socket$.subscribe({
-        next: () => {
-          dispatch(connected())
-          setCustomArgs(localStorage.getItem('last-input-args') ?? '')
-          setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
-        },
-        error: () => {
-          setSocketHasError(true)
-          setShowBackdrop(false)
-        },
-        complete: () => {
-          setSocketHasError(true)
-          setShowBackdrop(false)
-        },
-      })
-      return () => sub.unsubscribe()
-    }
-  }, [socket$, status.connected])
-
-  useEffect(() => {
-    if (status.connected) {
-      client.running()
-      const interval = setInterval(() => client.running(), 1000)
-      return () => clearInterval(interval)
-    }
-  }, [status.connected])
-
-  useEffect(() => {
-    client.freeSpace().then(bytes => dispatch(setFreeSpace(bytes.result)))
-  }, [])
-
-  useEffect(() => {
-    if (status.connected) {
-      const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
-        switch (typeof event.result) {
-          case 'object':
-            setActiveDownloads(
-              (event.result ?? [])
-                .filter((r) => !!r.info.url)
-                .sort((a, b) => a.info.title.localeCompare(b.info.title))
-            )
-            break
-          default:
-            break
-        }
-      })
-      return () => sub.unsubscribe()
-    }
-  }, [socket$, status.connected])
-
-  useEffect(() => {
-    if (activeDownloads && activeDownloads.length >= 0) {
-      setShowBackdrop(false)
-    }
-  }, [activeDownloads?.length])
-
-  useEffect(() => {
-    client.directoryTree()
-      .then(data => {
-        setAvailableDownloadPaths(data.result)
-      })
-  }, [])
-
-  /* -------------------- callbacks-------------------- */
-
-  /**
-   * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
-   */
-  const sendUrl = (immediate?: string) => {
-    const codes = new Array<string>();
-    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat);
-    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat);
-    if (pickedBestFormat !== '') codes.push(pickedBestFormat);
-
-    client.download(
-      immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
-      availableDownloadPaths[downloadPath] ?? '',
-      fileNameOverride
-    )
-
-    setUrl('')
-    setWorkingUrl('')
-    setShowBackdrop(true)
-
-    setTimeout(() => {
-      resetInput()
-      setShowBackdrop(true)
-      setDownloadFormats(undefined)
-    }, 250);
-  }
-
-  /**
-   * Retrive url from input and display the formats selection view
-   */
-  const sendUrlFormatSelection = () => {
-    setWorkingUrl(url)
-    setUrl('')
-    setPickedAudioFormat('')
-    setPickedVideoFormat('')
-    setPickedBestFormat('')
-
-    setShowBackdrop(true)
-
-    client.formats(url)
-      ?.then(formats => {
-        setDownloadFormats(formats.result)
-        setShowBackdrop(false)
-        resetInput()
-      })
-  }
-
-  /**
-   * Update the url state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrl(e.target.value)
-  }
-
-  /**
-   * Update the filename override state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilenameOverride(e.target.value)
-    localStorage.setItem('last-filename-override', e.target.value)
-  }
-
-  /**
-   * Update the custom args state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomArgs(e.target.value)
-    localStorage.setItem("last-input-args", e.target.value)
-  }
-
-  /**
-   * Abort a specific download if id's provided, other wise abort all running ones.
-   * @param id The download id / pid
-   * @returns void
-   */
-  const abort = (id?: string) => {
-    if (id) {
-      client.kill(id)
-      return
-    }
-    client.killAll()
-  }
-
-  const parseUrlListFile = (event: any) => {
-    const urlList = event.target.files
-    const reader = new FileReader()
-    reader.addEventListener('load', $event => {
-      const base64 = $event.target?.result!.toString().split(',')[1]
-      Buffer.from(base64!, 'base64')
-        .toString()
-        .trimEnd()
-        .split('\n')
-        .filter(_url => isValidURL(_url))
-        .forEach(_url => sendUrl(_url))
-    })
-    reader.readAsDataURL(urlList[0])
-  }
-
-  const resetInput = () => {
-    urlInputRef.current!.value = '';
-    if (customFilenameInputRef.current) {
-      customFilenameInputRef.current!.value = '';
-    }
-  }
-
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  });
-
-  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={showBackdrop}
-      >
-        <CircularProgress color="primary" />
-      </Backdrop>
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Paper
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Grid container>
-              <TextField
-                fullWidth
-                ref={urlInputRef}
-                label={i18n.t('urlInput')}
-                variant="outlined"
-                onChange={handleUrlChange}
-                disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <label htmlFor="icon-button-file">
-                        <Input id="icon-button-file" type="file" accept=".txt" onChange={parseUrlListFile} />
-                        <IconButton color="primary" aria-label="upload file" component="span">
-                          <FileUpload />
-                        </IconButton>
-                      </label>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid container spacing={1} sx={{ mt: 1 }}>
-              {
-                settings.enableCustomArgs &&
-                <Grid item xs={12}>
-                  <TextField
-                    fullWidth
-                    label={i18n.t('customArgsInput')}
-                    variant="outlined"
-                    onChange={handleCustomArgsChange}
-                    value={customArgs}
-                    disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                  />
-                </Grid>
-              }
-              {
-                settings.fileRenaming &&
-                <Grid item xs={8}>
-                  <TextField
-                    ref={customFilenameInputRef}
-                    fullWidth
-                    label={i18n.t('customFilename')}
-                    variant="outlined"
-                    value={fileNameOverride}
-                    onChange={handleFilenameOverrideChange}
-                    disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                  />
-                </Grid>
-              }
-              {
-                settings.pathOverriding &&
-                <Grid item xs={4}>
-                  <FormControl fullWidth>
-                    <InputLabel>{i18n.t('customPath')}</InputLabel>
-                    <Select
-                      label={i18n.t('customPath')}
-                      defaultValue={0}
-                      variant={'outlined'}
-                      value={downloadPath}
-                      onChange={(e) => setDownloadPath(Number(e.target.value))}
-                    >
-                      {availableDownloadPaths.map((val: string, idx: number) => (
-                        <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                      ))}
-                    </Select>
-                  </FormControl>
-                </Grid>
-              }
-            </Grid>
-            <Grid container spacing={1} pt={2}>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  disabled={url === ''}
-                  onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
-                >
-                  {settings.formatSelection ? i18n.t('selectFormatButton') : i18n.t('startButton')}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  onClick={() => abort()}
-                >
-                  {i18n.t('abortAllButton')}
-                </Button>
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-      </Grid >
-      {/* Format Selection grid */}
-      {downloadFormats && <FormatsGrid
-        downloadFormats={downloadFormats}
-        onBestQualitySelected={(id) => {
-          setPickedBestFormat(id)
-          setPickedVideoFormat('')
-          setPickedAudioFormat('')
-        }}
-        onVideoSelected={(id) => {
-          setPickedVideoFormat(id)
-          setPickedBestFormat('')
-        }}
-        onAudioSelected={(id) => {
-          setPickedAudioFormat(id)
-          setPickedBestFormat('')
-        }}
-        onClear={() => {
-          setPickedAudioFormat('');
-          setPickedVideoFormat('');
-          setPickedBestFormat('');
-        }}
-        onSubmit={sendUrl}
-        pickedBestFormat={pickedBestFormat}
-        pickedVideoFormat={pickedVideoFormat}
-        pickedAudioFormat={pickedAudioFormat}
-      />}
-      {
-        settings.listView ?
-          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
-          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
-      }
-      <Snackbar
-        open={showToast === status.connected}
-        autoHideDuration={1500}
-        onClose={() => setShowToast(false)}
-      >
-        <Alert variant="filled" severity="success">
-          {`Connected to (${settings.serverAddr}:${settings.serverPort})`}
-        </Alert>
-      </Snackbar>
-      <Snackbar open={socketHasError}>
-        <Alert variant="filled" severity="error">
-          {`${i18n.t('rpcConnErr')} (${settings.serverAddr}:${settings.serverPort})`}
-        </Alert>
-      </Snackbar>
-      <SpeedDial
-        ariaLabel="SpeedDial basic example"
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
-        icon={<SpeedDialIcon />}
-      >
-        <SpeedDialAction
-          icon={<FormatListBulleted />}
-          tooltipTitle={`Table view`}
-          tooltipOpen
-          onClick={() => dispatch(toggleListView())}
-        />
-      </SpeedDial>
-    </Container>
-  );
-}

frontend/src/Layout.tsx

@@ -0,0 +1,170 @@
+import { ThemeProvider } from '@emotion/react'
+import ArchiveIcon from '@mui/icons-material/Archive'
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import Dashboard from '@mui/icons-material/Dashboard'
+import Menu from '@mui/icons-material/Menu'
+import SettingsIcon from '@mui/icons-material/Settings'
+import TerminalIcon from '@mui/icons-material/Terminal'
+import { Box, createTheme } from '@mui/material'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { grey } from '@mui/material/colors'
+import { useMemo, useState } from 'react'
+import { Link, Outlet } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { settingsState } from './atoms/settings'
+import AppBar from './components/AppBar'
+import Drawer from './components/Drawer'
+import Footer from './components/Footer'
+import Logout from './components/Logout'
+import SocketSubscriber from './components/SocketSubscriber'
+import ThemeToggler from './components/ThemeToggler'
+import { useI18n } from './hooks/useI18n'
+import Toaster from './providers/ToasterProvider'
+
+export default function Layout() {
+  const [open, setOpen] = useState(false)
+
+  const settings = useRecoilValue(settingsState)
+
+  const mode = settings.theme
+  const theme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode: settings.theme,
+        background: {
+          default: settings.theme === 'light' ? grey[50] : '#121212'
+        },
+      },
+    }), [settings.theme]
+  )
+
+  const toggleDrawer = () => setOpen(state => !state)
+
+  const { i18n } = useI18n()
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SocketSubscriber />
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        <AppBar position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px' }}>
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={toggleDrawer}
+              sx={{
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
+              }}
+            >
+              <Menu />
+            </IconButton>
+            <Typography
+              component="h1"
+              variant="h6"
+              color="inherit"
+              noWrap
+              sx={{ flexGrow: 1 }}
+            >
+              {settings.appTitle}
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Drawer variant="permanent" open={open}>
+          <Toolbar
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
+            }}
+          >
+            <IconButton onClick={toggleDrawer}>
+              <ChevronLeft />
+            </IconButton>
+          </Toolbar>
+          <Divider />
+          <List component="nav">
+            <Link to={'/'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <Dashboard />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('homeButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/archive'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <ArchiveIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/log'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TerminalIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('logsTitle')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/settings'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('settingsButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <ThemeToggler />
+            <Logout />
+          </List>
+        </Drawer>
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            height: '100vh',
+            overflow: 'auto',
+          }}
+        >
+          <Toolbar />
+          <Outlet />
+        </Box>
+      </Box>
+      <Footer />
+      <Toaster />
+    </ThemeProvider>
+  )
+}

frontend/src/Settings.tsx

@@ -1,288 +0,0 @@
-import {
-  Button,
-  Container,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Grid,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  SelectChangeEvent,
-  Snackbar,
-  Stack,
-  Switch,
-  TextField,
-  Typography
-} from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-  Subject,
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  takeWhile
-} from 'rxjs'
-import { CliArguments } from './features/core/argsParser'
-import I18nBuilder from './features/core/intl'
-import { RPCClient } from './features/core/rpcClient'
-import {
-  LanguageUnion,
-  ThemeUnion,
-  setCliArgs,
-  setEnableCustomArgs,
-  setFileRenaming,
-  setFormatSelection,
-  setLanguage,
-  setPathOverriding,
-  setServerAddr,
-  setServerPort,
-  setTheme
-} from './features/settings/settingsSlice'
-import { updated } from './features/status/statusSlice'
-import { RootState } from './stores/store'
-import { validateDomain, validateIP } from './utils'
-
-export default function Settings() {
-  const dispatch = useDispatch()
-
-  const status = useSelector((state: RootState) => state.status)
-  const settings = useSelector((state: RootState) => state.settings)
-
-  const [invalidIP, setInvalidIP] = useState(false);
-
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-
-  const client = useMemo(() => new RPCClient(), [])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [])
-
-  const serverAddr$ = useMemo(() => new Subject<string>(), [])
-  const serverPort$ = useMemo(() => new Subject<string>(), [])
-
-  useEffect(() => {
-    const sub = serverAddr$
-      .pipe(
-        debounceTime(500),
-        distinctUntilChanged()
-      )
-      .subscribe(addr => {
-        if (validateIP(addr)) {
-          setInvalidIP(false)
-          dispatch(setServerAddr(addr))
-        } else if (validateDomain(addr)) {
-          setInvalidIP(false)
-          dispatch(setServerAddr(addr))
-        } else {
-          setInvalidIP(true)
-        }
-      })
-    return () => sub.unsubscribe()
-  }, [serverAddr$])
-
-  useEffect(() => {
-    const sub = serverPort$
-      .pipe(
-        debounceTime(500),
-        map(val => Number(val)),
-        takeWhile(val => isFinite(val) && val <= 65535),
-      )
-      .subscribe(port => {
-        dispatch(setServerPort(port.toString()))
-      })
-    return () => sub.unsubscribe()
-  }, [])
-
-  /**
-   * Language toggler handler 
-   */
-  const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
-    dispatch(setLanguage(event.target.value as LanguageUnion));
-  }
-
-  /**
-   * Theme toggler handler 
-   */
-  const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
-    dispatch(setTheme(event.target.value as ThemeUnion));
-  }
-
-  /**
-   * Send via WebSocket a message to update yt-dlp binary
-   */
-  const updateBinary = () => {
-    client.updateExecutable().then(() => dispatch(updated()))
-  }
-
-  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12} md={12} lg={12}>
-          <Paper
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-              minHeight: 240,
-            }}
-          >
-            <Typography pb={3} variant="h5" color="primary">
-              {i18n.t('settingsAnchor')}
-            </Typography>
-            <FormGroup>
-              <Grid container spacing={2}>
-                <Grid item xs={12} md={11}>
-                  <TextField
-                    fullWidth
-                    label={i18n.t('serverAddressTitle')}
-                    defaultValue={settings.serverAddr}
-                    error={invalidIP}
-                    onChange={(e) => serverAddr$.next(e.currentTarget.value)}
-                    InputProps={{
-                      startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
-                    }}
-                    sx={{ mb: 2 }}
-                  />
-                </Grid>
-                <Grid item xs={12} md={1}>
-                  <TextField
-                    fullWidth
-                    label={i18n.t('serverPortTitle')}
-                    defaultValue={settings.serverPort}
-                    onChange={(e) => serverPort$.next(e.currentTarget.value)}
-                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
-                    sx={{ mb: 2 }}
-                  />
-                </Grid>
-              </Grid>
-              <Grid container spacing={2}>
-                <Grid item xs={12} md={6}>
-                  <FormControl fullWidth>
-                    <InputLabel>{i18n.t('languageSelect')}</InputLabel>
-                    <Select
-                      defaultValue={settings.language}
-                      label={i18n.t('languageSelect')}
-                      onChange={handleLanguageChange}
-                    >
-                      <MenuItem value="english">English</MenuItem>
-                      <MenuItem value="spanish">Spanish</MenuItem>
-                      <MenuItem value="italian">Italian</MenuItem>
-                      <MenuItem value="chinese">Chinese</MenuItem>
-                      <MenuItem value="russian">Russian</MenuItem>
-                      <MenuItem value="korean">Korean</MenuItem>
-                      <MenuItem value="japanese">Japanese</MenuItem>
-                    </Select>
-                  </FormControl>
-                </Grid>
-                <Grid item xs={12} md={6}>
-                  <FormControl fullWidth>
-                    <InputLabel>{i18n.t('themeSelect')}</InputLabel>
-                    <Select
-                      defaultValue={settings.theme}
-                      label={i18n.t('themeSelect')}
-                      onChange={handleThemeChange}
-                    >
-                      <MenuItem value="light">Light</MenuItem>
-                      <MenuItem value="dark">Dark</MenuItem>
-                    </Select>
-                  </FormControl>
-                </Grid>
-              </Grid>
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={cliArgs.noMTime}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
-                  />
-                }
-                label={i18n.t('noMTimeCheckbox')}
-                sx={{ mt: 3 }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={cliArgs.extractAudio}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
-                    disabled={settings.formatSelection}
-                  />
-                }
-                label={i18n.t('extractAudioCheckbox')}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={settings.formatSelection}
-                    onChange={() => {
-                      dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
-                      dispatch(setFormatSelection(!settings.formatSelection))
-                    }}
-                  />
-                }
-                label={i18n.t('formatSelectionEnabler')}
-              />
-              <Grid>
-                <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
-                  {i18n.t('overridesAnchor')}
-                </Typography>
-                <Stack direction="column">
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        defaultChecked={settings.pathOverriding}
-                        onChange={() => {
-                          dispatch(setPathOverriding(!settings.pathOverriding))
-                        }}
-                      />
-                    }
-                    label={i18n.t('pathOverrideOption')}
-                  />
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        defaultChecked={settings.fileRenaming}
-                        onChange={() => {
-                          dispatch(setFileRenaming(!settings.fileRenaming))
-                        }}
-                      />
-                    }
-                    label={i18n.t('filenameOverrideOption')}
-                  />
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        defaultChecked={settings.enableCustomArgs}
-                        onChange={() => {
-                          dispatch(setEnableCustomArgs(!settings.enableCustomArgs))
-                        }}
-                      />
-                    }
-                    label={i18n.t('customArgs')}
-                  />
-                </Stack>
-              </Grid>
-              <Grid>
-                <Stack direction="row">
-                  <Button
-                    sx={{ mr: 1, mt: 3 }}
-                    variant="contained"
-                    onClick={() => dispatch(updated())}
-                  >
-                    {i18n.t('updateBinButton')}
-                  </Button>
-                </Stack>
-              </Grid>
-            </FormGroup>
-          </Paper>
-        </Grid>
-      </Grid>
-      <Snackbar
-        open={status.updated}
-        autoHideDuration={1500}
-        message={i18n.t('toastUpdated')}
-        onClose={updateBinary}
-      />
-    </Container>
-  );
-}

frontend/src/assets/i18n.yaml

@@ -1,7 +1,7 @@
 ---
 languages:
   english:
-    urlInput: YouTube or other supported service video URL
+    urlInput: Video URL (one per line)
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -26,11 +26,138 @@ languages:
     filenameOverrideOption: Enable output file name overriding
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgs: Enable custom yt-dlp args (great power = great responsibilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may close this window)
+    restartAppMessage: Needs a page reload to take effect
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy
+    urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
+    rpcPollingTimeTitle: RPC polling time
+    rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+    templatesReloadInfo: To register a new template it might need a page reload.
+  german:
+    urlInput: Video URL
+    statusTitle: Status
+    statusReady: Bereit
+    selectFormatButton: Format auswählen
+    startButton: Start
+    abortAllButton: Alle Abbrechen
+    updateBinButton: yt-dlp Binärdatei aktualisieren
+    darkThemeButton: Dunkel Modus
+    lightThemeButton: Hell Modus
+    settingsAnchor: Einstellungen
+    serverAddressTitle: Server Adresse
+    serverPortTitle: Port
+    extractAudioCheckbox: Audio extrahieren
+    noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
+    bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
+    toastConnected: 'Verbunden mit '
+    toastUpdated: yt-dlp Binärdatei aktualisiert!
+    formatSelectionEnabler: Video/Audio Format auswählbar
+    themeSelect: 'Modus'
+    languageSelect: 'Sprache'
+    overridesAnchor: Überschreibungen
+    pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
+    filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
+    customFilename: Custom filemame (leave blank to use default)
+    customPath: Benutzerdefinierter Pfad
+    customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (viel Macht = viel Verantwortung)
+    customArgsInput: Benutzerdefinierte yt-dlp Argumente
+    rpcConnErr: Fehler beim Verbinden mit RPC Server
+    splashText: Keine aktiven Downloads
+    archiveTitle: Archiv
+    clipboardAction: URL in Zwischenablage kopiert
+    playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
+    restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
+    servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
+    newDownloadButton: Neuer Download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archiv
+    settingsButtonLabel: Einstellungen
+    rpcAuthenticationLabel: RPC Authentifizierung
+    themeTogglerLabel: Modus Umschalter
+    loadingLabel: Lädt...
+    appTitle: App Titel
+    savedTemplates: Gespeicherte Vorlage
+    templatesEditor: Vorlagen Bearbeiter
+    templatesEditorNameLabel: Vorlagen Name
+    templatesEditorContentLabel: Vorlagen Inhalt
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
+  french:
+    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
+    statusTitle: Statut
+    statusReady: Prêt
+    selectFormatButton: Sélectionner le format
+    startButton: Démarrer
+    abortAllButton: Tout arrêter
+    updateBinButton: Mettre à jour l'exécutable yt-dlp
+    darkThemeButton: Thème sombre
+    lightThemeButton: Thème clair
+    settingsAnchor: Paramètres
+    serverAddressTitle: Adresse du serveur
+    serverPortTitle: Port
+    extractAudioCheckbox: Extraire l'audio
+    noMTimeCheckbox: Ne pas définir le temps de modification du fichier
+    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
+    toastConnected: 'Connecté à '
+    toastUpdated: L'exécutable yt-dlp a été mis à jour !
+    formatSelectionEnabler: Activer la sélection des formats vidéo/audio
+    themeSelect: 'Thème'
+    languageSelect: 'Langue'
+    overridesAnchor: Remplacer
+    pathOverrideOption: Activer le remplacement du chemin de sortie
+    filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
+    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
+    customPath: Chemin personnalisé
+    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
+    customArgsInput: Arguments yt-dlp personnalisés
+    rpcConnErr: Erreur lors de la connexion au serveur RPC
+    splashText: Aucun téléchargement actif
+    archiveTitle: Archive
+    clipboardAction: URL copiée dans le presse-papiers
+    playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
+    restartAppMessage: Nécessite un rechargement de la page pour prendre effet
+    servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
+    notConnectedText: not connected
+    settingsLabel: Settings
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: Nom de l'application
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
   italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
+    urlInput: URL Video (uno per linea)
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -57,11 +184,33 @@ languages:
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error nella connessione al server RPC
+    splashText: Nessun download attivo
+    archiveTitle: Archivio
+    clipboardAction: URL copiato negli appunti
+    playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
+    restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy
+    newDownloadButton: Nuovo download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: Titolo applicazione
+    savedTemplates: Template salvati
+    templatesEditor: Editor template
+    templatesEditorNameLabel: Nome template
+    templatesEditorContentLabel: Contentunto template
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
   chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
+    urlInput: 视频 URL
     statusTitle: 状态
-    startButton: 开始
     statusReady: 就绪
+    selectFormatButton: 选择格式
+    startButton: 开始
     abortAllButton: 全部中止
     updateBinButton: 更新 yt-dlp 可执行文件
     darkThemeButton: 黑暗主题
@@ -84,63 +233,124 @@ languages:
     customPath: 自定义路径
     customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
     customArgsInput: 自定义 yt-dlp 参数
-    rpcConnErr: Error while conencting to RPC server
+    rpcConnErr: 连接 RPC 服务器发生错误
+    splashText: 没有正在进行的下载
+    archiveTitle: 归档
+    clipboardAction: 复制 URL 到剪贴板
+    playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
+    restartAppMessage: 需要刷新页面才能生效
+    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    newDownloadButton: 新下载
+    homeButtonLabel: 主页
+    archiveButtonLabel: 归档
+    settingsButtonLabel: 设置
+    rpcAuthenticationLabel: RPC 身份验证
+    themeTogglerLabel: 主题切换
+    loadingLabel: 正在加载…
+    appTitle: App 标题
+    savedTemplates: 保存模板
+    templatesEditor: 模板编辑器
+    templatesEditorNameLabel: 模板名称
+    templatesEditorContentLabel: 模板内容
+    logsTitle: '日志'
+    awaitingLogs: '正在等待日志…'
+    bulkDownload: 'Download files in a zip archive'
   spanish:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-    rpcConnErr: Error while conencting to RPC server
+    urlInput: URL de YouTube u otro servicio compatible
+    statusTitle: Estado
+    startButton: Iniciar
+    statusReady: Listo
+    abortAllButton: Cancelar Todo
+    updateBinButton: Actualizar el binario yt-dlp
+    darkThemeButton: Tema oscuro
+    lightThemeButton: Tema claro
+    settingsAnchor: Ajustes
+    serverAddressTitle: Dirección del servidor
+    serverPortTitle: Puerto
+    extractAudioCheckbox: Extraer audio
+    noMTimeCheckbox: No guardar el tiempo de modificación del archivo
+    bgReminder: Si cierras esta página, la descarga continuará en segundo plano.
+    toastConnected: 'Conectado a'
+    toastUpdated: ¡El binario yt-dlp está actualizado!
+    formatSelectionEnabler: Habilitar la selección de formatos de video/audio
+    themeSelect: 'Tema'
+    languageSelect: 'Idiomas'
+    overridesAnchor: Anulaciones
+    pathOverrideOption: Sobreescribir en la ruta de salida
+    filenameOverrideOption: Sobreescribir el nombre del fichero
+    customFilename: Nombre de archivo personalizado (en blanco para usar el predeterminado)
+    customPath: Ruta personalizada
+    customArgs: Habilitar los argumentos yt-dlp personalizados (un gran poder conlleva una gran responsabilidad)
+    customArgsInput: Argumentos yt-dlp personalizados
+    rpcConnErr: Error al conectarse al servidor RPC
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
   russian:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-    rpcConnErr: Error while conencting to RPC server
+    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
+    statusTitle: Статус
+    startButton: Начать
+    statusReady: Готово
+    abortAllButton: Прервать все
+    updateBinButton: Обновить бинарный файл yt-dlp
+    darkThemeButton: Темная тема
+    lightThemeButton: Светлая тема
+    settingsAnchor: Настройки
+    serverAddressTitle: Адрес сервера
+    serverPortTitle: Порт
+    extractAudioCheckbox: Извлечь аудио
+    noMTimeCheckbox: Не устанавливать время модификации файла
+    bgReminder: Как только вы закроете эту страницу, загрузка продолжится в фоновом режиме.
+    toastConnected: 'Подключен к '
+    toastUpdated: Бинарный файл yt-dlp обновлен!
+    formatSelectionEnabler: Активировать выбор видео/аудио форматов
+    themeSelect: 'Тема'
+    languageSelect: 'Язык'
+    overridesAnchor: Переопределить
+    pathOverrideOption: Активировать переопределение выходного пути
+    filenameOverrideOption: Активировать переопределение имени выходного файла
+    customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
+    customPath: Задать путь
+    customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)
+    customArgsInput: Пользовательские аргументы yt-dlp
+    rpcConnErr: Ошибка при подключении к серверу RPC
+    splashText: Нет активных загрузок
+    archiveTitle: Архив
+    clipboardAction: URL скопирован в буфер обмена
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -169,6 +379,26 @@ languages:
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -197,4 +427,168 @@ languages:
     customPath: 保存先
     customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
     customArgsInput: yt-dlpのオプション
-    rpcConnErr: Error while conencting to RPC server
+    rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
+  catalan:
+    urlInput: URL de YouTube o d'un altre servei compatible
+    statusTitle: Estat
+    startButton: Iniciar
+    statusReady: Llest
+    abortAllButton: Cancel·lar Tot
+    updateBinButton: Actualitzar el binari yt-dlp
+    darkThemeButton: Tema fosc
+    lightThemeButton: Tema clar
+    settingsAnchor: Configuració
+    serverAddressTitle: Direcció del servidor
+    serverPortTitle: Port
+    extractAudioCheckbox: Extreure àudio
+    noMTimeCheckbox: No guardar el temps de modificació de l'arxiu
+    bgReminder: Si tanques aquesta pàgina, la descàrrega continuarà en segon pla.
+    toastConnected: 'Connectat a'
+    toastUpdated: El binari yt-dlp està actualitzat!
+    formatSelectionEnabler: Habilitar la selecció de formats de vídeo/àudio
+    themeSelect: 'Tema'
+    languageSelect: 'Idiomes'
+    overridesAnchor: Anul·lacions
+    pathOverrideOption: Sobreescriure en la ruta de sortida
+    filenameOverrideOption: Sobreescriure el nom del fitxer
+    customFilename: Nom d'arxiu personalitzat (en blanc per utilitzar el predeterminat)
+    customPath: Ruta personalitzada
+    customArgs: Habilitar els arguments yt-dlp personalitzats (un gran poder comporta una gran responsabilitat)
+    customArgsInput: Arguments yt-dlp personalitzats
+    rpcConnErr: Error en connectar-se al servidor RPC
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
+  ukrainian:
+    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
+    statusTitle: Статус
+    startButton: Почати
+    statusReady: Готово
+    abortAllButton: Перервати все 
+    updateBinButton: Оновити бінарний файл yt-dlp
+    darkThemeButton: Темна тема 
+    lightThemeButton: Світла тема 
+    settingsAnchor: Налаштування 
+    serverAddressTitle: Адреса сервера
+    serverPortTitle: Порт 
+    extractAudioCheckbox: Витягти аудіо 
+    noMTimeCheckbox: Не встановлювати час модифікації файлу
+    bgReminder: Як тільки ви закриєте цю сторінку, завантаження продовжиться у фоновому режимі. 
+    toastConnected: 'Підключений до '
+    toastUpdated: Бінарний файл yt-dlp оновлено!
+    formatSelectionEnabler: Активувати вибір відео/аудіо форматів
+    themeSelect: 'Тема'
+    languageSelect: 'Мова'
+    overridesAnchor: Перевизначити
+    pathOverrideOption: Активувати перевизначення вихідного шляху
+    filenameOverrideOption: Активувати перевизначення імені вихідного файлу
+    customFilename: Введіть ім'я файлу (залишіть порожнім, щоб використовувати значення за замовчуванням)
+    customPath: Задати шлях
+    customArgs: Включити аргументи, що настроюються yt-dlp (велика сила = велика відповідальність)
+    customArgsInput: Користувальницькі аргументи yt-dlp
+    rpcConnErr: Помилка при підключенні до сервера RPC
+    splashText: Немає активних завантажень
+    archiveTitle: Архів
+    clipboardAction: URL скопійовано в буфер обміну
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'
+  polish:
+    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
+    statusTitle: Status
+    startButton: Początek
+    statusReady: Gotowy
+    abortAllButton: Anuluj wszystko
+    updateBinButton: Zaktualizuj plik binarny yt-dlp
+    darkThemeButton: Ciemny motyw
+    lightThemeButton: Światło motyw
+    settingsAnchor: Ustawienia
+    serverAddressTitle: Adres serwera
+    serverPortTitle: Port
+    extractAudioCheckbox: Wyodrębnij dźwięk
+    noMTimeCheckbox: Nie ustawiaj czasu modyfikacji pliku
+    bgReminder: Po zamknięciu tej strony pobieranie będzie kontynuowane w tle. 
+    toastConnected: 'Połączony z '
+    toastUpdated: Zaktualizowano plik binarny yt-dlp!
+    formatSelectionEnabler: Aktywuj wybór formatów wideo/audio
+    themeSelect: 'Motyw'
+    languageSelect: 'Język'
+    overridesAnchor: Przedefiniuj
+    pathOverrideOption: Aktywuj zastąpienie ścieżki źródłowej
+    filenameOverrideOption: Aktywuj zastępowanie nazwy pliku źródłowego
+    customFilename: Wprowadź nazwę pliku (pozostaw puste, aby użyć nazwy domyślnej)
+    customPath: Ustaw ścieżkę
+    customArgs: Uwzględnij konfigurowalne argumenty yt-dlp (wielka moc = wielka odpowiedzialność)
+    customArgsInput: Niestandardowe argumenty yt-dlp
+    rpcConnErr: Wystąpił błąd podczas łączenia z serwerem RPC
+    splashText: Brak aktywnych pobrań
+    archiveTitle: Archiwum
+    clipboardAction: Adres URL zostanie skopiowany do schowka
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+    bulkDownload: 'Download files in a zip archive'

frontend/src/atoms/downloadTemplate.ts

@@ -0,0 +1,51 @@
+import { atom, selector } from 'recoil'
+import { CustomTemplate } from '../types'
+import { ffetch } from '../lib/httpClient'
+import { serverURL } from './settings'
+import { pipe } from 'fp-ts/lib/function'
+import { getOrElse } from 'fp-ts/lib/Either'
+
+export const cookiesTemplateState = atom({
+  key: 'cookiesTemplateState',
+  default: localStorage.getItem('cookiesTemplate') ?? '',
+  effects: [
+    ({ onSet }) => onSet(e => localStorage.setItem('cookiesTemplate', e))
+  ]
+})
+
+export const customArgsState = atom({
+  key: 'customArgsState',
+  default: localStorage.getItem('customArgs') ?? '',
+  effects: [
+    ({ onSet }) => onSet(e => localStorage.setItem('customArgs', e))
+  ]
+})
+
+export const filenameTemplateState = atom({
+  key: 'filenameTemplateState',
+  default: localStorage.getItem('lastFilenameTemplate') ?? '',
+  effects: [
+    ({ onSet }) => onSet(e => localStorage.setItem('lastFilenameTemplate', e))
+  ]
+})
+
+export const downloadTemplateState = selector({
+  key: 'downloadTemplateState',
+  get: ({ get }) =>
+    `${get(customArgsState)} ${get(cookiesTemplateState)}`
+      .replace(/  +/g, ' ')
+      .trim()
+})
+
+export const savedTemplatesState = selector<CustomTemplate[]>({
+  key: 'savedTemplatesState',
+  get: async ({ get }) => {
+    const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
+    const either = await task()
+
+    return pipe(
+      either,
+      getOrElse(() => new Array<CustomTemplate>())
+    )
+  }
+})

frontend/src/atoms/downloads.ts

@@ -0,0 +1,22 @@
+import * as O from 'fp-ts/Option'
+import { pipe } from 'fp-ts/lib/function'
+import { atom, selector } from 'recoil'
+import { RPCResult } from '../types'
+
+export const downloadsState = atom<O.Option<RPCResult[]>>({
+  key: 'downloadsState',
+  default: O.none
+})
+
+export const loadingDownloadsState = selector<boolean>({
+  key: 'loadingDownloadsState',
+  get: ({ get }) => O.isNone(get(downloadsState))
+})
+
+export const activeDownloadsState = selector<RPCResult[]>({
+  key: 'activeDownloadsState',
+  get: ({ get }) => pipe(
+    get(downloadsState),
+    O.getOrElse(() => new Array<RPCResult>())
+  )
+})

frontend/src/atoms/i18n.ts

@@ -0,0 +1,9 @@
+import { selector } from 'recoil'
+import I18nBuilder from '../lib/intl'
+import { languageState } from './settings'
+
+export const i18nBuilderState = selector({
+  key: 'i18nBuilderState',
+  get: ({ get }) => new I18nBuilder(get(languageState)),
+  dangerouslyAllowMutability: true,
+})

frontend/src/atoms/rpc.ts

@@ -0,0 +1,23 @@
+import { atom, selector } from 'recoil'
+import { RPCClient } from '../lib/rpcClient'
+import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+
+export const rpcClientState = selector({
+  key: 'rpcClientState',
+  get: ({ get }) =>
+    new RPCClient(
+      get(rpcHTTPEndpoint),
+      get(rpcWebSocketEndpoint),
+      localStorage.getItem('token') ?? ''
+    ),
+  dangerouslyAllowMutability: true,
+})
+
+export const rpcPollingTimeState = atom({
+  key: 'rpcPollingTimeState',
+  default: Number(localStorage.getItem('rpc-polling-time')) || 1000,
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('rpc-polling-time', a.toString()))
+  ]
+})

frontend/src/atoms/settings.ts

@@ -0,0 +1,226 @@
+import { atom, selector } from 'recoil'
+import { prefersDarkMode } from '../utils'
+
+export const languages = [
+  'english',
+  'chinese',
+  'russian',
+  'italian',
+  'spanish',
+  'korean',
+  'japanese',
+  'catalan',
+  'ukrainian',
+  'polish',
+  'german'
+] as const
+
+export type Language = (typeof languages)[number]
+
+export type Theme = 'light' | 'dark' | 'system'
+export type ThemeNarrowed = 'light' | 'dark'
+
+export interface SettingsState {
+  serverAddr: string
+  serverPort: number
+  language: Language
+  theme: ThemeNarrowed
+  cliArgs: string
+  formatSelection: boolean
+  fileRenaming: boolean
+  pathOverriding: boolean
+  enableCustomArgs: boolean
+  listView: boolean
+  servedFromReverseProxy: boolean
+  appTitle: string
+}
+
+export const languageState = atom<Language>({
+  key: 'languageState',
+  default: localStorage.getItem('language') as Language || 'english',
+  effects: [
+    ({ onSet }) =>
+      onSet(l => localStorage.setItem('language', l.toString()))
+  ]
+})
+
+export const themeState = atom<Theme>({
+  key: 'themeStateState',
+  default: localStorage.getItem('theme') as Theme || 'system',
+  effects: [
+    ({ onSet }) =>
+      onSet(l => localStorage.setItem('theme', l.toString()))
+  ]
+})
+
+export const serverAddressState = atom<string>({
+  key: 'serverAddressState',
+  default: localStorage.getItem('server-addr') || window.location.hostname,
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('server-addr', a.toString()))
+  ]
+})
+
+export const serverPortState = atom<number>({
+  key: 'serverPortState',
+  default: Number(localStorage.getItem('server-port')) || Number(window.location.port),
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('server-port', a.toString()))
+  ]
+})
+
+export const latestCliArgumentsState = atom<string>({
+  key: 'latestCliArgumentsState',
+  default: localStorage.getItem('cli-args') || '--no-mtime',
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('cli-args', a.toString()))
+  ]
+})
+
+export const formatSelectionState = atom({
+  key: 'formatSelectionState',
+  default: localStorage.getItem('format-selection') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('format-selection', a.toString()))
+  ]
+})
+
+export const fileRenamingState = atom({
+  key: 'fileRenamingState',
+  default: localStorage.getItem('file-renaming') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('file-renaming', a.toString()))
+  ]
+})
+
+export const pathOverridingState = atom({
+  key: 'pathOverridingState',
+  default: localStorage.getItem('path-overriding') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('path-overriding', a.toString()))
+  ]
+})
+
+export const enableCustomArgsState = atom({
+  key: 'enableCustomArgsState',
+  default: localStorage.getItem('enable-custom-args') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('enable-custom-args', a.toString()))
+  ]
+})
+
+export const listViewState = atom({
+  key: 'listViewState',
+  default: localStorage.getItem('listview') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('listview', a.toString()))
+  ]
+})
+
+export const servedFromReverseProxyState = atom({
+  key: 'servedFromReverseProxyState',
+  default: localStorage.getItem('reverseProxy') === "true" || window.location.port == "",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('reverseProxy', a.toString()))
+  ]
+})
+
+export const servedFromReverseProxySubDirState = atom<string>({
+  key: 'servedFromReverseProxySubDirState',
+  default: localStorage.getItem('reverseProxySubDir') ?? '',
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('reverseProxySubDir', a))
+  ]
+})
+
+export const appTitleState = atom({
+  key: 'appTitleState',
+  default: localStorage.getItem('appTitle') ?? 'yt-dlp Web UI',
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('appTitle', a.toString()))
+  ]
+})
+
+export const serverAddressAndPortState = selector({
+  key: 'serverAddressAndPortState',
+  get: ({ get }) => {
+    if (get(servedFromReverseProxySubDirState)) {
+      return `${get(serverAddressState)}/${get(servedFromReverseProxySubDirState)}/`
+    }
+    if (get(servedFromReverseProxyState)) {
+      return `${get(serverAddressState)}`
+    }
+    return `${get(serverAddressState)}:${get(serverPortState)}`
+  }
+})
+
+export const serverURL = selector({
+  key: 'serverURL',
+  get: ({ get }) =>
+    `${window.location.protocol}//${get(serverAddressAndPortState)}`
+})
+
+export const rpcWebSocketEndpoint = selector({
+  key: 'rpcWebSocketEndpoint',
+  get: ({ get }) => {
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    return `${proto}//${get(serverAddressAndPortState)}/rpc/ws`
+  }
+})
+
+export const rpcHTTPEndpoint = selector({
+  key: 'rpcHTTPEndpoint',
+  get: ({ get }) => {
+    const proto = window.location.protocol
+    return `${proto}//${get(serverAddressAndPortState)}/rpc/http`
+  }
+})
+
+export const cookiesState = atom({
+  key: 'cookiesState',
+  default: localStorage.getItem('yt-dlp-cookies') ?? '',
+  effects: [
+    ({ onSet }) =>
+      onSet(c => localStorage.setItem('yt-dlp-cookies', c))
+  ]
+})
+
+const themeSelector = selector<ThemeNarrowed>({
+  key: 'themeSelector',
+  get: ({ get }) => {
+    const theme = get(themeState)
+    if ((theme === 'system' && prefersDarkMode()) || theme === 'dark') {
+      return 'dark'
+    }
+    return 'light'
+  }
+})
+
+export const settingsState = selector<SettingsState>({
+  key: 'settingsState',
+  get: ({ get }) => ({
+    serverAddr: get(serverAddressState),
+    serverPort: get(serverPortState),
+    language: get(languageState),
+    theme: get(themeSelector),
+    cliArgs: get(latestCliArgumentsState),
+    formatSelection: get(formatSelectionState),
+    fileRenaming: get(fileRenamingState),
+    pathOverriding: get(pathOverridingState),
+    enableCustomArgs: get(enableCustomArgsState),
+    listView: get(listViewState),
+    servedFromReverseProxy: get(servedFromReverseProxyState),
+    appTitle: get(appTitleState)
+  })
+})

frontend/src/atoms/status.ts

@@ -0,0 +1,25 @@
+import { atom, selector } from 'recoil'
+import { rpcClientState } from './rpc'
+
+export const connectedState = atom({
+  key: 'connectedState',
+  default: false
+})
+
+export const freeSpaceBytesState = selector({
+  key: 'freeSpaceBytesState',
+  get: async ({ get }) => {
+    const res = await get(rpcClientState).freeSpace()
+      .catch(() => ({ result: 0 }))
+    return res.result
+  }
+})
+
+export const availableDownloadPathsState = selector({
+  key: 'availableDownloadPathsState',
+  get: async ({ get }) => {
+    const res = await get(rpcClientState).directoryTree()
+      .catch(() => ({ result: [] }))
+    return res.result
+  }
+})

frontend/src/atoms/toast.ts

@@ -0,0 +1,15 @@
+import { AlertColor } from '@mui/material'
+import { atom } from 'recoil'
+
+export type Toast = {
+  open: boolean,
+  message: string
+  autoClose: boolean
+  createdAt: number,
+  severity?: AlertColor
+}
+
+export const toastListState = atom<Toast[]>({
+  key: 'toastListState',
+  default: [],
+})

frontend/src/atoms/ui.ts

@@ -0,0 +1,14 @@
+import { atom, selector } from 'recoil'
+import { activeDownloadsState } from './downloads'
+
+export const loadingAtom = atom({
+  key: 'loadingAtom',
+  default: true
+})
+
+export const totalDownloadSpeedState = selector<number>({
+  key: 'totalDownloadSpeedState',
+  get: ({ get }) => get(activeDownloadsState)
+    .map(d => d.progress.speed)
+    .reduce((curr, next) => curr + next, 0)
+})

frontend/src/components/AppBar.tsx

@@ -1,11 +1,11 @@
-import { styled } from '@mui/material';
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import { styled } from '@mui/material'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean
 }
 
-const drawerWidth = 240;
+const drawerWidth = 240
 
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== 'open',
@@ -23,6 +23,6 @@ const AppBar = styled(MuiAppBar, {
       duration: theme.transitions.duration.enteringScreen,
     }),
   }),
-}));
+}))
 
 export default AppBar

frontend/src/components/ArchiveResult.tsx

@@ -1,37 +0,0 @@
-import {
-    Card,
-    CardActionArea,
-    CardContent,
-    CardMedia,
-    Skeleton,
-    Typography
-} from '@mui/material'
-import { ellipsis } from '../utils'
-
-type Props = {
-    title: string,
-    thumbnail: string,
-    url: string,
-}
-
-export function ArchiveResult({ title, thumbnail, url }: Props) {
-    return (
-        <Card>
-            <CardActionArea onClick={() => window.open(url)}>
-                {thumbnail ?
-                    <CardMedia
-                        component="img"
-                        height={180}
-                        image={thumbnail}
-                    /> :
-                    <Skeleton variant="rectangular" height={180} />
-                }
-                <CardContent>
-                    <Typography gutterBottom variant="body2" component="div">
-                        {ellipsis(title, 72)}
-                    </Typography>
-                </CardContent>
-            </CardActionArea>
-        </Card>
-    )
-}

frontend/src/components/CookiesTextField.tsx

@@ -0,0 +1,157 @@
+import { TextField } from '@mui/material'
+import * as A from 'fp-ts/Array'
+import * as E from 'fp-ts/Either'
+import * as O from 'fp-ts/Option'
+import { pipe } from 'fp-ts/lib/function'
+import { useMemo } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
+import { cookiesTemplateState } from '../atoms/downloadTemplate'
+import { cookiesState, serverURL } from '../atoms/settings'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+
+const validateCookie = (cookie: string) => pipe(
+  cookie,
+  cookie => cookie.replace(/\s\s+/g, ' '),
+  cookie => cookie.replaceAll('\t', ' '),
+  cookie => cookie.split(' '),
+  E.of,
+  E.flatMap(
+    E.fromPredicate(
+      f => f.length === 7,
+      () => `missing parts`
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[0].length > 0,
+      () => 'missing domain'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[1] === 'TRUE' || f[1] === 'FALSE',
+      () => `invalid include subdomains`
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[2].length > 0,
+      () => 'invalid path'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[3] === 'TRUE' || f[3] === 'FALSE',
+      () => 'invalid secure flag'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => isFinite(Number(f[4])),
+      () => 'invalid expiration'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[5].length > 0,
+      () => 'invalid name'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[6].length > 0,
+      () => 'invalid value'
+    )
+  ),
+)
+
+const CookiesTextField: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
+  const [, setCookies] = useRecoilState(cookiesTemplateState)
+  const [savedCookies, setSavedCookies] = useRecoilState(cookiesState)
+
+  const { pushMessage } = useToast()
+  const flag = '--cookies=cookies.txt'
+
+  const cookies$ = useMemo(() => new Subject<string>(), [])
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${serverAddr}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies
+      })
+    })()
+
+  const validateNetscapeCookies = (cookies: string) => pipe(
+    cookies,
+    cookies => cookies.split('\n'),
+    cookies => cookies.filter(f => !f.startsWith('\n')), // empty lines
+    cookies => cookies.filter(f => !f.startsWith('# ')), // comments
+    cookies => cookies.filter(Boolean), // empty lines
+    A.map(validateCookie),
+    A.mapWithIndex((i, either) => pipe(
+      either,
+      E.matchW(
+        (l) => pushMessage(`Error in line ${i + 1}: ${l}`, 'warning'),
+        () => E.isRight(either)
+      ),
+    )),
+    A.filter(Boolean),
+    A.match(
+      () => false,
+      (c) => {
+        pushMessage(`Valid ${c.length} Netscape cookies`, 'info')
+        return true
+      }
+    )
+  )
+
+  useSubscription(
+    cookies$.pipe(
+      debounceTime(650),
+      distinctUntilChanged()
+    ),
+    (cookies) => pipe(
+      cookies,
+      cookies => {
+        setSavedCookies(cookies)
+        return cookies
+      },
+      validateNetscapeCookies,
+      O.fromPredicate(f => f === true),
+      O.match(
+        () => setCookies(''),
+        async () => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => pushMessage(`${l}`, 'error'),
+              () => {
+                pushMessage(`Saved Netscape cookies`, 'success')
+                setCookies(flag)
+              }
+            )
+          )
+        }
+      )
+    )
+  )
+
+  return (
+    <TextField
+      label="Netscape Cookies"
+      multiline
+      maxRows={20}
+      minRows={4}
+      fullWidth
+      defaultValue={savedCookies}
+      onChange={(e) => cookies$.next(e.currentTarget.value)}
+    />
+  )
+}
+
+export default CookiesTextField

frontend/src/components/DownloadCard.tsx

@@ -0,0 +1,151 @@
+import EightK from '@mui/icons-material/EightK'
+import FourK from '@mui/icons-material/FourK'
+import Hd from '@mui/icons-material/Hd'
+import Sd from '@mui/icons-material/Sd'
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  LinearProgress,
+  Skeleton,
+  Stack,
+  Typography
+} from '@mui/material'
+import { useCallback } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { RPCResult } from '../types'
+import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+
+type Props = {
+  download: RPCResult
+  onStop: () => void
+  onCopy: () => void
+}
+
+const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
+  if (!resolution) return null
+  if (resolution.includes('4320')) return <EightK color="primary" />
+  if (resolution.includes('2160')) return <FourK color="primary" />
+  if (resolution.includes('1080')) return <Hd color="primary" />
+  if (resolution.includes('720')) return <Sd color="primary" />
+  return null
+}
+
+const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+  const serverAddr = useRecoilValue(serverURL)
+
+  const isCompleted = useCallback(
+    () => download.progress.percentage === '-1',
+    [download.progress.percentage]
+  )
+
+  const percentageToNumber = useCallback(
+    () => isCompleted()
+      ? 100
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => {
+        navigator.clipboard.writeText(download.info.url)
+        onCopy()
+      }}>
+        {download.info.thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={download.info.thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        {download.progress.percentage ?
+          <LinearProgress
+            variant="determinate"
+            value={percentageToNumber()}
+            color={isCompleted() ? "success" : "primary"}
+          /> :
+          null
+        }
+        <CardContent>
+          {download.info.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(download.info.title, 100)}
+            </Typography> :
+            <Skeleton />
+          }
+          <Stack direction="row" spacing={0.5} py={1}>
+            <Chip
+              label={
+                isCompleted()
+                  ? 'Completed'
+                  : mapProcessStatus(download.progress.process_status)
+              }
+              color="primary"
+              size="small"
+            />
+            <Typography>
+              {!isCompleted() ? download.progress.percentage : ''}
+            </Typography>
+            <Typography>
+              &nbsp;
+              {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
+            </Typography>
+            <Typography>
+              {formatSize(download.info.filesize_approx ?? 0)}
+            </Typography>
+            <Resolution resolution={download.info.resolution} />
+          </Stack>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button
+          variant="contained"
+          size="small"
+          color="primary"
+          onClick={onStop}
+        >
+          {isCompleted() ? "Clear" : "Stop"}
+        </Button>
+        {isCompleted() &&
+          <>
+            <Button
+              variant="contained"
+              size="small"
+              color="primary"
+              onClick={() => downloadFile(download.output.savedFilePath)}
+            >
+              Download
+            </Button>
+            <Button
+              variant="contained"
+              size="small"
+              color="primary"
+              onClick={() => viewFile(download.output.savedFilePath)}
+            >
+              View
+            </Button>
+          </>
+        }
+      </CardActions>
+    </Card>
+  )
+}
+
+export default DownloadCard

frontend/src/components/DownloadDialog.tsx

@@ -0,0 +1,375 @@
+import { FileUpload } from '@mui/icons-material'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+  Autocomplete,
+  Backdrop,
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  InputAdornment,
+  Paper,
+  TextField
+} from '@mui/material'
+import AppBar from '@mui/material/AppBar'
+import Dialog from '@mui/material/Dialog'
+import Slide from '@mui/material/Slide'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { TransitionProps } from '@mui/material/transitions'
+import {
+  FC,
+  Suspense,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useTransition
+} from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { settingsState } from '../atoms/settings'
+import { availableDownloadPathsState, connectedState } from '../atoms/status'
+import FormatsGrid from '../components/FormatsGrid'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import type { DLMetadata } from '../types'
+import { toFormatArgs } from '../utils'
+import ExtraDownloadOptions from './ExtraDownloadOptions'
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  onDownloadStart: (url: string) => void
+}
+
+const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)
+
+  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
+  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
+  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
+  const [pickedBestFormat, setPickedBestFormat] = useState('')
+
+  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+
+  const [downloadPath, setDownloadPath] = useState('')
+
+  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+    filenameTemplateState
+  )
+
+  const [url, setUrl] = useState('')
+
+  const [isPlaylist, setIsPlaylist] = useState(false)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const urlInputRef = useRef<HTMLInputElement>(null)
+  const customFilenameInputRef = useRef<HTMLInputElement>(null)
+
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    setCustomArgs('')
+  }, [open])
+
+  /**
+    * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
+  */
+  const sendUrl = async (immediate?: string) => {
+    for (const line of url.split('\n')) {
+      const codes = new Array<string>()
+      if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
+      if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
+      if (pickedBestFormat !== '') codes.push(pickedBestFormat)
+
+      await new Promise(r => setTimeout(r, 10))
+      client.download({
+        url: immediate || line,
+        args: `${toFormatArgs(codes)} ${downloadTemplate}`,
+        pathOverride: downloadPath ?? '',
+        renameTo: settings.fileRenaming ? filenameTemplate : '',
+        playlist: isPlaylist,
+      })
+
+      setTimeout(() => {
+        resetInput()
+        setDownloadFormats(undefined)
+        onDownloadStart(immediate || line)
+      }, 100)
+    }
+
+    setUrl('')
+  }
+
+  /**
+   * Retrive url from input and display the formats selection view
+   */
+  const sendUrlFormatSelection = () => {
+    setPickedAudioFormat('')
+    setPickedVideoFormat('')
+    setPickedBestFormat('')
+
+    client.formats(url)
+      ?.then(formats => {
+        setDownloadFormats(formats.result)
+        resetInput()
+      })
+  }
+
+  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value)
+  }
+
+  const handleFilenameTemplateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilenameTemplate(e.target.value)
+  }
+
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomArgs(e.target.value)
+  }
+
+  const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.currentTarget.files
+    if (!files || files.length < 1) {
+      return
+    }
+
+    const file = await files[0].text()
+
+    file
+      .split('\n')
+      .forEach(u => sendUrl(u))
+  }
+
+  const resetInput = () => {
+    urlInputRef.current!.value = ''
+    if (customFilenameInputRef.current) {
+      customFilenameInputRef.current!.value = ''
+    }
+  }
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isPending}
+      />
+      <AppBar sx={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={onClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            Download
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
+        <Container sx={{ my: 4 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <Paper
+                elevation={4}
+                sx={{
+                  p: 2,
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <Grid container>
+                  <TextField
+                    multiline
+                    fullWidth
+                    ref={urlInputRef}
+                    label={i18n.t('urlInput')}
+                    variant="outlined"
+                    onChange={handleUrlChange}
+                    disabled={
+                      !isConnected
+                      || (settings.formatSelection && downloadFormats != null)
+                    }
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <label htmlFor="icon-button-file">
+                            <input
+                              hidden
+                              id="icon-button-file"
+                              type="file"
+                              accept=".txt"
+                              onChange={e => parseUrlListFile(e)}
+                            />
+                            <IconButton
+                              color="primary"
+                              aria-label="upload file"
+                              component="span"
+                            >
+                              <FileUpload />
+                            </IconButton>
+                          </label>
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </Grid>
+                <Grid container spacing={1} sx={{ mt: 1 }}>
+                  {
+                    settings.enableCustomArgs &&
+                    <Grid item xs={12}>
+                      <TextField
+                        fullWidth
+                        label={i18n.t('customArgsInput')}
+                        variant="outlined"
+                        onChange={handleCustomArgsChange}
+                        value={customArgs}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
+                      />
+                    </Grid>
+                  }
+                  {
+                    settings.fileRenaming &&
+                    <Grid item xs={settings.pathOverriding ? 8 : 12}>
+                      <TextField
+                        sx={{ mt: 1 }}
+                        ref={customFilenameInputRef}
+                        fullWidth
+                        label={i18n.t('customFilename')}
+                        variant="outlined"
+                        value={filenameTemplate}
+                        onChange={handleFilenameTemplateChange}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
+                      />
+                    </Grid>
+                  }
+                  {
+                    settings.pathOverriding &&
+                    <Grid item xs={4}>
+                      <FormControl fullWidth>
+                        <Autocomplete
+                          disablePortal
+                          options={availableDownloadPaths.map((dir) => ({ label: dir, dir }))}
+                          autoHighlight
+                          getOptionLabel={(option) => option.label}
+                          onChange={(_, value) => {
+                            setDownloadPath(value?.dir!)
+                          }}
+                          renderOption={(props, option) => (
+                            <Box
+                              component="li"
+                              sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                              {...props}>
+                              {option.label}
+                            </Box>
+                          )}
+                          sx={{ width: '100%', mt: 1 }}
+                          renderInput={(params) => <TextField {...params} label={i18n.t('customPath')} />}
+                        />
+                      </FormControl>
+                    </Grid>
+                  }
+                </Grid>
+                <Suspense>
+                  {savedTemplates.length > 0 && <ExtraDownloadOptions />}
+                </Suspense>
+                <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Grid item>
+                      <FormControlLabel
+                        control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                        checked={isPlaylist}
+                        label={i18n.t('playlistCheckbox')}
+                      />
+                    </Grid>
+                  </Grid>
+                  <Grid item>
+                    <Button
+                      variant="contained"
+                      disabled={url === ''}
+                      onClick={() => settings.formatSelection
+                        ? startTransition(() => sendUrlFormatSelection())
+                        : sendUrl()
+                      }
+                    >
+                      {
+                        settings.formatSelection
+                          ? i18n.t('selectFormatButton')
+                          : i18n.t('startButton')
+                      }
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid >
+          {/* Format Selection grid */}
+          {downloadFormats && <FormatsGrid
+            downloadFormats={downloadFormats}
+            onBestQualitySelected={(id) => {
+              setPickedBestFormat(id)
+              setPickedVideoFormat('')
+              setPickedAudioFormat('')
+            }}
+            onVideoSelected={(id) => {
+              setPickedVideoFormat(id)
+              setPickedBestFormat('')
+            }}
+            onAudioSelected={(id) => {
+              setPickedAudioFormat(id)
+              setPickedBestFormat('')
+            }}
+            onClear={() => {
+              setPickedAudioFormat('')
+              setPickedVideoFormat('')
+              setPickedBestFormat('')
+            }}
+            onSubmit={sendUrl}
+            pickedBestFormat={pickedBestFormat}
+            pickedVideoFormat={pickedVideoFormat}
+            pickedAudioFormat={pickedAudioFormat}
+          />}
+        </Container>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default DownloadDialog

frontend/src/components/Downloads.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { loadingDownloadsState } from '../atoms/downloads'
+import { listViewState } from '../atoms/settings'
+import { loadingAtom } from '../atoms/ui'
+import DownloadsGridView from './DownloadsGridView'
+import DownloadsTableView from './DownloadsTableView'
+
+const Downloads: React.FC = () => {
+  const tableView = useRecoilValue(listViewState)
+  const loadingDownloads = useRecoilValue(loadingDownloadsState)
+
+  const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
+
+  useEffect(() => {
+    if (loadingDownloads) {
+      return setIsLoading(true)
+    }
+    setIsLoading(false)
+  }, [loadingDownloads, isLoading])
+
+  if (tableView) return <DownloadsTableView />
+
+  return <DownloadsGridView />
+}
+
+export default Downloads

frontend/src/components/DownloadsCardView.tsx

@@ -1,34 +0,0 @@
-import { Grid } from "@mui/material"
-import { Fragment } from "react"
-
-import type { RPCResult } from "../types"
-import { StackableResult } from "./StackableResult"
-
-type Props = {
-  downloads: RPCResult[]
-  abortFunction: (id: string) => void
-}
-
-export function DownloadsCardView({ downloads, abortFunction }: Props) {
-  return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
-      {
-        downloads.map(download => (
-          <Grid item xs={4} sm={8} md={6} key={download.id}>
-            <Fragment>
-              <StackableResult
-                title={download.info.title}
-                thumbnail={download.info.thumbnail}
-                percentage={download.progress.percentage}
-                stopCallback={() => abortFunction(download.id)}
-                resolution={download.info.resolution ?? ''}
-                speed={download.progress.speed}
-                size={download.info.filesize_approx ?? 0}
-              />
-            </Fragment>
-          </Grid>
-        ))
-      }
-    </Grid>
-  )
-}

frontend/src/components/DownloadsGridView.tsx

@@ -0,0 +1,38 @@
+import { Grid } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { ProcessStatus, RPCResult } from '../types'
+import DownloadCard from './DownloadCard'
+
+const DownloadsGridView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const stop = (r: RPCResult) => r.progress.process_status === ProcessStatus.Completed
+    ? client.clear(r.id)
+    : client.kill(r.id)
+
+  return (
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
+      {
+        downloads.map(download => (
+          <Grid item xs={4} sm={8} md={6} xl={4} key={download.id}>
+            <DownloadCard
+              download={download}
+              onStop={() => stop(download)}
+              onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
+            />
+          </Grid>
+        ))
+      }
+    </Grid>
+  )
+}
+
+export default DownloadsGridView

frontend/src/components/DownloadsListView.tsx

@@ -1,82 +0,0 @@
-import {
-  Button,
-  Grid,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from "@mui/material"
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
-import type { RPCResult } from "../types"
-
-type Props = {
-  downloads: RPCResult[]
-  abortFunction: Function
-}
-
-export function DownloadsListView({ downloads, abortFunction }: Props) {
-  return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
-      <Grid item xs={12}>
-        <TableContainer component={Paper} sx={{ minHeight: '65vh' }} elevation={2}>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Progress</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Speed</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Size</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Actions</Typography>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {
-                downloads.map(download => (
-                  <TableRow key={download.id}>
-                    <TableCell>{ellipsis(download.info.title, 80)}</TableCell>
-                    <TableCell>
-                      <LinearProgress
-                        value={
-                          download.progress.percentage === '-1' ? 100 :
-                            Number(download.progress.percentage.replace('%', ''))
-                        }
-                        variant="determinate"
-                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
-                      />
-                    </TableCell>
-                    <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
-                    <TableCell>{roundMiB(download.info.filesize_approx ?? 0)}</TableCell>
-                    <TableCell>
-                      <Button
-                        variant="contained"
-                        size="small"
-                        onClick={() => abortFunction(download.id)}
-                      >
-                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              }
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-    </Grid>
-  )
-}

frontend/src/components/DownloadsTableView.tsx

@@ -0,0 +1,216 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DownloadIcon from '@mui/icons-material/Download'
+import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import SmartDisplayIcon from '@mui/icons-material/SmartDisplay'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import {
+  Box,
+  ButtonGroup,
+  IconButton,
+  LinearProgress,
+  LinearProgressProps,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
+import { forwardRef } from 'react'
+import { TableComponents, TableVirtuoso } from 'react-virtuoso'
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { serverURL } from '../atoms/settings'
+import { useRPC } from '../hooks/useRPC'
+import { ProcessStatus, RPCResult } from '../types'
+import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
+
+const columns = [
+  {
+    width: 8,
+    label: 'Status',
+    dataKey: 'status',
+    numeric: false,
+  },
+  {
+    width: 500,
+    label: 'Title',
+    dataKey: 'title',
+    numeric: false,
+  },
+  {
+    width: 50,
+    label: 'Speed',
+    dataKey: 'speed',
+    numeric: true,
+  },
+  {
+    width: 150,
+    label: 'Progress',
+    dataKey: 'progress',
+    numeric: true,
+  },
+  {
+    width: 80,
+    label: 'Size',
+    dataKey: 'size',
+    numeric: true,
+  },
+  {
+    width: 100,
+    label: 'Added on',
+    dataKey: 'addedon',
+    numeric: true,
+  },
+  {
+    width: 80,
+    label: 'Actions',
+    dataKey: 'actions',
+    numeric: true,
+  },
+] as const
+
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value,
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
+
+const VirtuosoTableComponents: TableComponents<RPCResult> = {
+  Scroller: forwardRef<HTMLDivElement>((props, ref) => (
+    <TableContainer {...props} ref={ref} />
+  )),
+  Table: (props) => (
+    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed', mt: 2 }} size='small' />
+  ),
+  TableHead,
+  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
+  TableBody: forwardRef<HTMLTableSectionElement>((props, ref) => (
+    <TableBody {...props} ref={ref} />
+  )),
+}
+
+function fixedHeaderContent() {
+  return (
+    <TableRow>
+      {columns.map((column) => (
+        <TableCell
+          key={column.dataKey}
+          variant="head"
+          align={column.numeric || false ? 'right' : 'left'}
+          style={{ width: column.width }}
+        >
+          {column.label}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+const DownloadsTableView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState)
+  const serverAddr = useRecoilValue(serverURL)
+  const { client } = useRPC()
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const stop = (r: RPCResult) => r.progress.process_status === ProcessStatus.Completed
+    ? client.clear(r.id)
+    : client.kill(r.id)
+
+
+  function rowContent(_index: number, download: RPCResult) {
+    return (
+      <>
+        <TableCell>
+          {download.progress.percentage === '-1'
+            ? <DownloadDoneIcon color="primary" />
+            : <DownloadIcon color="primary" />
+          }
+        </TableCell>
+        <TableCell>{download.info.title}</TableCell>
+        <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
+        <TableCell align="right">
+          <LinearProgressWithLabel
+            sx={{ height: '16px' }}
+            value={
+              download.progress.percentage === '-1'
+                ? 100
+                : Number(download.progress.percentage.replace('%', ''))
+            }
+            variant={
+              download.progress.process_status === 0
+                ? 'indeterminate'
+                : 'determinate'
+            }
+            color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
+          />
+        </TableCell>
+        <TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
+        <TableCell align="right">
+          {new Date(download.info.created_at).toLocaleString()}
+        </TableCell>
+        <TableCell align="right">
+          <ButtonGroup>
+            <IconButton
+              size="small"
+              onClick={() => stop(download)}
+            >
+              {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
+
+            </IconButton>
+            {download.progress.percentage === '-1' &&
+              <>
+                <IconButton
+                  size="small"
+                  onClick={() => viewFile(download.output.savedFilePath)}
+                >
+                  <SmartDisplayIcon />
+                </IconButton>
+                <IconButton
+                  size="small"
+                  onClick={() => downloadFile(download.output.savedFilePath)}
+                >
+                  <FileDownloadIcon />
+                </IconButton>
+              </>
+            }
+          </ButtonGroup>
+        </TableCell>
+      </>
+    )
+  }
+
+  return (
+    <Box style={{ height: downloads.length === 0 ? '0vh' : '80vh', width: '100%' }}>
+      <TableVirtuoso
+        hidden={downloads.length === 0}
+        data={downloads}
+        components={VirtuosoTableComponents}
+        fixedHeaderContent={fixedHeaderContent}
+        itemContent={rowContent}
+      />
+    </Box>
+  )
+}
+
+export default DownloadsTableView

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import ErrorIcon from '@mui/icons-material/Error'
+import { Button, Container, SvgIcon, Typography, styled } from '@mui/material'
+import { Link } from 'react-router-dom'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+const ErrorBoundary: React.FC = () => {
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <ErrorIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        An error occurred :\
+      </Title>
+      <Title fontWeight={'400'} fontSize={28} color={'gray'}>
+        Check your settings!
+      </Title>
+      <Link to={'/settings'} >
+        <Button variant='contained' sx={{ mt: 2 }}>
+          Goto Settings
+        </Button>
+      </Link>
+      <Typography sx={{ mt: 2 }} color={'gray'} fontWeight={500}>
+        Or login if authentification is enabled
+      </Typography>
+      <Link to={'/login'} >
+        <Button variant='contained' sx={{ mt: 2 }}>
+          login
+        </Button>
+      </Link>
+    </FlexContainer>
+  )
+}
+
+export default ErrorBoundary

frontend/src/components/ExtraDownloadOptions.tsx

@@ -0,0 +1,57 @@
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { useI18n } from '../hooks/useI18n'
+
+const ExtraDownloadOptions: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const customTemplates = useRecoilValue(savedTemplatesState)
+  const [, setCustomArgs] = useRecoilState(customArgsState)
+
+  return (
+    <>
+      <Autocomplete
+        disablePortal
+        options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
+        autoHighlight
+        defaultValue={
+          customTemplates
+            .filter(({ id, name }) => id === "0" || name === "default")
+            .map(({ name, content }) => ({ label: name, content }))
+            .at(0)
+        }
+        getOptionLabel={(option) => option.label}
+        onChange={(_, value) => {
+          setCustomArgs(value?.content!)
+        }}
+        renderOption={(props, option) => (
+          <Box
+            component="li"
+            {...props}
+          >
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignContent: 'flex-start',
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              width: '100%'
+            }}>
+              <Typography>
+                {option.label}
+              </Typography>
+              <Typography variant="subtitle2" color="primary">
+                {option.content}
+              </Typography>
+            </Box>
+          </Box>
+        )}
+        sx={{ width: '100%', mt: 2 }}
+        renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
+      />
+    </>
+  )
+}
+
+export default ExtraDownloadOptions

frontend/src/components/Footer.tsx

@@ -0,0 +1,69 @@
+import DownloadIcon from '@mui/icons-material/Download'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import { AppBar, Chip, Divider, Toolbar } from '@mui/material'
+import { Suspense } from 'react'
+import { useRecoilValue } from 'recoil'
+import { settingsState } from '../atoms/settings'
+import { connectedState } from '../atoms/status'
+import { totalDownloadSpeedState } from '../atoms/ui'
+import { useI18n } from '../hooks/useI18n'
+import { formatSpeedMiB } from '../utils'
+import FreeSpaceIndicator from './FreeSpaceIndicator'
+import VersionIndicator from './VersionIndicator'
+
+const Footer: React.FC = () => {
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+  const totalDownloadSpeed = useRecoilValue(totalDownloadSpeedState)
+
+  const mode = settings.theme
+  const { i18n } = useI18n()
+
+  return (
+    <AppBar position="fixed" color="default" sx={{
+      top: 'auto',
+      bottom: 0,
+      height: 48,
+      zIndex: 1200,
+      borderTop: mode === 'light'
+        ? '1px solid rgba(0, 0, 0, 0.12)'
+        : '1px solid rgba(255, 255, 255, 0.12)',
+    }}>
+      <Toolbar sx={{
+        paddingBottom: 2,
+        fontSize: 14,
+        display: 'flex', gap: 1, justifyContent: 'space-between'
+      }}>
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <Chip label="RPC v3.1.0" variant="outlined" size="small" />
+          <VersionIndicator />
+        </div>
+        <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            marginRight: 'px',
+            gap: 3,
+          }}>
+            <DownloadIcon />
+            <span>
+              {formatSpeedMiB(totalDownloadSpeed)}
+            </span>
+            <Divider orientation="vertical" flexItem />
+            <SettingsEthernet />
+            <span>
+              {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
+            </span>
+          </div>
+          <Divider orientation="vertical" flexItem />
+          <Suspense fallback={i18n.t('loadingLabel')}>
+            <FreeSpaceIndicator />
+          </Suspense>
+        </div>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default Footer

frontend/src/components/FreeSpaceIndicator.tsx

@@ -0,0 +1,24 @@
+import StorageIcon from '@mui/icons-material/Storage'
+import { useRecoilValue } from 'recoil'
+import { freeSpaceBytesState } from '../atoms/status'
+import { formatSize } from '../utils'
+
+const FreeSpaceIndicator = () => {
+  const freeSpace = useRecoilValue(freeSpaceBytesState)
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: 3
+    }}>
+      <StorageIcon />
+      <span>
+        {formatSize(freeSpace)}
+      </span>
+    </div>
+  )
+}
+
+export default FreeSpaceIndicator

frontend/src/components/HomeActions.tsx

@@ -0,0 +1,46 @@
+import { Suspense, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
+import { useToast } from '../hooks/toast'
+import DownloadDialog from './DownloadDialog'
+import HomeSpeedDial from './HomeSpeedDial'
+import TemplatesEditor from './TemplatesEditor'
+
+const HomeActions: React.FC = () => {
+  const [, setIsLoading] = useRecoilState(loadingAtom)
+
+  const [openDownload, setOpenDownload] = useState(false)
+  const [openEditor, setOpenEditor] = useState(false)
+
+  const { pushMessage } = useToast()
+
+  return (
+    <>
+      <HomeSpeedDial
+        onDownloadOpen={() => setOpenDownload(true)}
+        onEditorOpen={() => setOpenEditor(true)}
+      />
+      <Suspense>
+        <DownloadDialog
+          open={openDownload}
+          onClose={() => {
+            setOpenDownload(false)
+            setIsLoading(true)
+          }}
+          // TODO: handle optimistic UI update
+          onDownloadStart={(url) => {
+            pushMessage(`Requested ${url}`, 'info')
+            setOpenDownload(false)
+            setIsLoading(true)
+          }}
+        />
+      </Suspense>
+      <TemplatesEditor
+        open={openEditor}
+        onClose={() => setOpenEditor(false)}
+      />
+    </>
+  )
+}
+
+export default HomeActions

frontend/src/components/HomeSpeedDial.tsx

@@ -0,0 +1,64 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle'
+import BuildCircleIcon from '@mui/icons-material/BuildCircle'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import FolderZipIcon from '@mui/icons-material/FolderZip'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
+import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
+import {
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon
+} from '@mui/material'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { listViewState, serverURL } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+
+type Props = {
+  onDownloadOpen: () => void
+  onEditorOpen: () => void
+}
+
+const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
+  const serverAddr = useRecoilValue(serverURL)
+  const [listView, setListView] = useRecoilState(listViewState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  return (
+    <SpeedDial
+      ariaLabel="Home speed dial"
+      sx={{ position: 'absolute', bottom: 64, right: 24 }}
+      icon={<SpeedDialIcon />}
+    >
+      <SpeedDialAction
+        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
+        tooltipTitle={listView ? 'Card view' : 'Table view'}
+        onClick={() => setListView(state => !state)}
+      />
+      <SpeedDialAction
+        icon={<FolderZipIcon />}
+        tooltipTitle={i18n.t('bulkDownload')}
+        onClick={() => window.open(`${serverAddr}/archive/bulk?token=${localStorage.getItem('token')}`)}
+      />
+      <SpeedDialAction
+        icon={<DeleteForeverIcon />}
+        tooltipTitle={i18n.t('abortAllButton')}
+        onClick={() => client.killAll()}
+      />
+      <SpeedDialAction
+        icon={<BuildCircleIcon />}
+        tooltipTitle={i18n.t('templatesEditor')}
+        onClick={onEditorOpen}
+      />
+      <SpeedDialAction
+        icon={<AddCircleIcon />}
+        tooltipTitle={i18n.t('newDownloadButton')}
+        onClick={onDownloadOpen}
+      />
+    </SpeedDial>
+  )
+}
+
+export default HomeSpeedDial

frontend/src/components/LoadingBackdrop.tsx

@@ -0,0 +1,18 @@
+import { Backdrop, CircularProgress } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
+
+const LoadingBackdrop: React.FC = () => {
+  const isLoading = useRecoilValue(loadingAtom)
+
+  return (
+    <Backdrop
+      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      open={isLoading}
+    >
+      <CircularProgress color="primary" />
+    </Backdrop>
+  )
+}
+
+export default LoadingBackdrop

frontend/src/components/LogTerminal.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+
+const token = localStorage.getItem('token')
+
+const LogTerminal: React.FC = () => {
+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+  const [isConnecting, setIsConnecting] = useState(true)
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
+  const serverAddr = useRecoilValue(serverURL)
+
+  const { i18n } = useI18n()
+
+  const eventSource = useMemo(
+    () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
+    [serverAddr]
+  )
+
+  useEffect(() => {
+    eventSource.addEventListener('log', event => {
+      const msg: string[] = JSON.parse(event.data)
+      setLogBuffer(buff => [...buff, ...msg].slice(-500))
+
+      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
+    })
+
+    // TODO: in dev mode it breaks sse
+    return () => eventSource.close()
+  }, [eventSource])
+
+  useEffect(() => {
+    eventSource.onopen = () => setIsConnecting(false)
+  }, [eventSource])
+
+  const logEntryStyle = (data: string) => {
+    const sx = {}
+
+    if (data.includes("level=ERROR")) {
+      return { ...sx, color: 'red' }
+    }
+    if (data.includes("level=WARN")) {
+      return { ...sx, color: 'orange' }
+    }
+
+    return sx
+  }
+
+  return (
+
+    <div
+      ref={boxRef}
+      style={{
+        fontFamily: 'Roboto Mono',
+        height: '70.5vh',
+        overflowY: 'auto',
+        overflowX: 'auto',
+        fontSize: '13.5px',
+        fontWeight: '600',
+        backgroundColor: 'black',
+        color: 'white',
+        padding: '0.5rem',
+        borderRadius: '0.25rem'
+      }}
+    >
+      {isConnecting ? <div>{'Connecting...'}</div> : <div>{'Connected!'}</div>}
+
+      {logBuffer.length === 0 && <div>{i18n.t('awaitingLogs')}</div>}
+
+      {logBuffer.map((log, idx) => (
+        <div key={idx} style={logEntryStyle(log)}>
+          {log}
+        </div>
+      ))}
+    </div>
+
+  )
+}
+
+export default LogTerminal

frontend/src/components/Logout.tsx

@@ -0,0 +1,24 @@
+import LogoutIcon from '@mui/icons-material/Logout'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useI18n } from '../hooks/useI18n'
+
+export default function Logout() {
+  const navigate = useNavigate()
+
+  const logout = async () => {
+    localStorage.removeItem('token')
+    navigate('/login')
+  }
+
+  const { i18n } = useI18n()
+
+  return (
+    <ListItemButton onClick={logout}>
+      <ListItemIcon>
+        <LogoutIcon />
+      </ListItemIcon>
+      <ListItemText primary={i18n.t('rpcAuthenticationLabel')} />
+    </ListItemButton>
+  )
+}

frontend/src/components/SocketSubscriber.tsx

@@ -0,0 +1,83 @@
+import * as O from 'fp-ts/Option'
+import { useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { take, timer } from 'rxjs'
+import { downloadsState } from '../atoms/downloads'
+import { rpcPollingTimeState } from '../atoms/rpc'
+import { serverAddressAndPortState } from '../atoms/settings'
+import { connectedState } from '../atoms/status'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { datetimeCompareFunc, isRPCResponse } from '../utils'
+
+interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
+
+const SocketSubscriber: React.FC<Props> = () => {
+  const [connected, setIsConnected] = useRecoilState(connectedState)
+  const [, setDownloads] = useRecoilState(downloadsState)
+
+  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
+  const rpcPollingTime = useRecoilValue(rpcPollingTimeState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const navigate = useNavigate()
+
+  const socketOnce$ = useMemo(() => client.socket$.pipe(take(1)), [])
+
+  useEffect(() => {
+    if (!connected) {
+      socketOnce$.subscribe(() => {
+        setIsConnected(true)
+        pushMessage(
+          `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+          "success"
+        )
+      })
+    }
+  }, [connected])
+
+  useSubscription(
+    client.socket$,
+    event => {
+      if (!isRPCResponse(event)) { return }
+      if (!Array.isArray(event.result)) { return }
+
+      if (event.result) {
+        return setDownloads(
+          O.of(event.result
+            .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
+              b.info.created_at,
+              a.info.created_at,
+            )),
+          )
+        )
+      }
+      setDownloads(O.none)
+    },
+    err => {
+      console.error(err)
+      pushMessage(
+        `${i18n.t('rpcConnErr')} (${serverAddressAndPort})`,
+        "error"
+      ),
+        navigate(`/error`)
+    }
+  )
+
+  useEffect(() => {
+    if (connected) {
+      const sub = timer(0, rpcPollingTime).subscribe(() => client.running())
+      return () => sub.unsubscribe()
+    }
+  }, [connected, client, rpcPollingTime])
+
+  return null
+}
+
+export default SocketSubscriber

frontend/src/components/Splash.tsx

@@ -0,0 +1,44 @@
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import { Container, SvgIcon, Typography, styled } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useI18n } from '../hooks/useI18n'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+export default function Splash() {
+  const { i18n } = useI18n()
+  const activeDownloads = useRecoilValue(activeDownloadsState)
+
+  if (activeDownloads.length !== 0) {
+    return null
+  }
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <CloudDownloadIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        {i18n.t('splashText')}
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/components/StackableResult.tsx

@@ -1,107 +0,0 @@
-import { EightK, FourK, Hd, Sd } from '@mui/icons-material'
-import {
-  Button,
-  Card,
-  CardActionArea,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-  LinearProgress,
-  Skeleton,
-  Stack,
-  Typography
-} from '@mui/material'
-import { useEffect, useState } from 'react'
-import { ellipsis, formatSpeedMiB, roundMiB } from '../utils'
-
-type Props = {
-  title: string,
-  thumbnail: string,
-  resolution: string
-  percentage: string,
-  size: number,
-  speed: number,
-  stopCallback: VoidFunction,
-}
-
-export function StackableResult({
-  title,
-  thumbnail,
-  resolution,
-  percentage,
-  speed,
-  size,
-  stopCallback
-}: Props) {
-  const [isCompleted, setIsCompleted] = useState(false)
-
-  useEffect(() => {
-    if (percentage === '-1') {
-      setIsCompleted(true)
-    }
-  }, [percentage])
-
-  const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
-
-  const guessResolution = (xByY: string): any => {
-    if (!xByY) return null;
-    if (xByY.includes('4320')) return (<EightK color="primary" />);
-    if (xByY.includes('2160')) return (<FourK color="primary" />);
-    if (xByY.includes('1080')) return (<Hd color="primary" />);
-    if (xByY.includes('720')) return (<Sd color="primary" />);
-    return null;
-  }
-
-  return (
-    <Card>
-      <CardActionArea>
-        {thumbnail !== '' ?
-          <CardMedia
-            component="img"
-            height={180}
-            image={thumbnail}
-          /> :
-          <Skeleton variant="rectangular" height={180} />
-        }
-        <CardContent>
-          {title !== '' ?
-            <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(title, 54)}
-            </Typography> :
-            <Skeleton />
-          }
-          <Stack direction="row" spacing={1} py={2}>
-            <Chip
-              label={isCompleted ? 'Completed' : 'Downloading'}
-              color="primary"
-              size="small"
-            />
-            <Typography>{!isCompleted ? percentage : ''}</Typography>
-            <Typography> {!isCompleted ? formatSpeedMiB(speed) : ''}</Typography>
-            <Typography>{roundMiB(size ?? 0)}</Typography>
-            {guessResolution(resolution)}
-          </Stack>
-          {percentage ?
-            <LinearProgress
-              variant="determinate"
-              value={percentageToNumber()}
-              color={isCompleted ? "secondary" : "primary"}
-            /> :
-            null
-          }
-        </CardContent>
-      </CardActionArea>
-      <CardActions>
-        <Button
-          variant="contained"
-          size="small"
-          color="primary"
-          onClick={stopCallback}
-        >
-          {isCompleted ? "Clear" : "Stop"}
-        </Button>
-      </CardActions>
-    </Card>
-  )
-}

frontend/src/components/TemplatesEditor.tsx

@@ -0,0 +1,232 @@
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  Alert,
+  AppBar,
+  Backdrop,
+  Box,
+  Button,
+  Dialog,
+  Grid,
+  IconButton,
+  Paper,
+  Slide,
+  TextField,
+  Toolbar,
+  Typography
+} from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { matchW } from 'fp-ts/lib/Either'
+import { pipe } from 'fp-ts/lib/function'
+import { forwardRef, useEffect, useState, useTransition } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { ffetch } from '../lib/httpClient'
+import { CustomTemplate } from '../types'
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+interface Props extends React.HTMLAttributes<HTMLBaseElement> {
+  open: boolean
+  onClose: () => void
+}
+
+const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
+  const [templateName, setTemplateName] = useState('')
+  const [templateContent, setTemplateContent] = useState('')
+
+  const serverAddr = useRecoilValue(serverURL)
+  const [isPending, startTransition] = useTransition()
+
+  const [templates, setTemplates] = useState<CustomTemplate[]>([])
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  useEffect(() => {
+    if (open) {
+      getTemplates()
+    }
+  }, [open])
+
+  const getTemplates = async () => {
+    const task = ffetch<CustomTemplate[]>(`${serverAddr}/api/v1/template/all`)
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l),
+        (r) => setTemplates(r)
+      )
+    )
+  }
+
+  const addTemplate = async () => {
+    const task = ffetch<unknown>(`${serverAddr}/api/v1/template`, {
+      method: 'POST',
+      body: JSON.stringify({
+        name: templateName,
+        content: templateContent,
+      })
+    })
+
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'warning'),
+        () => {
+          pushMessage('Added template')
+          getTemplates()
+          setTemplateName('')
+          setTemplateContent('')
+        }
+      )
+    )
+  }
+
+  const deleteTemplate = async (id: string) => {
+    const task = ffetch<unknown>(`${serverAddr}/api/v1/template/${id}`, {
+      method: 'DELETE',
+    })
+
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'warning'),
+        () => {
+          pushMessage('Deleted template')
+          getTemplates()
+        }
+      )
+    )
+  }
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isPending}
+      />
+      <AppBar sx={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={onClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            {i18n.t('templatesEditor')}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
+        <Grid container spacing={2} sx={{ px: 4, pt: 3, pb: 4 }}>
+          <Grid item>
+            <Alert severity="info">
+              {i18n.t('templatesReloadInfo')}
+            </Alert>
+          </Grid>
+          <Grid item xs={12}>
+            <Paper
+              elevation={4}
+              sx={{
+                p: 2,
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Grid container spacing={2} justifyContent="center" alignItems="center">
+                <Grid item xs={3}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('templatesEditorNameLabel')}
+                    onChange={e => setTemplateName(e.currentTarget.value)}
+                    value={templateName}
+                  />
+                </Grid>
+                <Grid item xs={9}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('templatesEditorContentLabel')}
+                    onChange={e => setTemplateContent(e.currentTarget.value)}
+                    value={templateContent}
+                    InputProps={{
+                      endAdornment: <Button
+                        variant='contained'
+                        onClick={() => startTransition(() => { addTemplate() })}
+                      >
+                        <AddIcon />
+                      </Button>
+                    }}
+                  />
+                </Grid>
+              </Grid>
+              {templates.map(template => (
+                <Grid
+                  container
+                  spacing={2}
+                  justifyContent="center"
+                  alignItems="center"
+                  key={template.id}
+                  sx={{ mt: 1 }}
+                >
+                  <Grid item xs={3}>
+                    <TextField
+                      fullWidth
+                      label={i18n.t('templatesEditorNameLabel')}
+                      value={template.name}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <TextField
+                      fullWidth
+                      label={i18n.t('templatesEditorContentLabel')}
+                      value={template.content}
+                      InputProps={{
+                        endAdornment: <Button
+                          variant='contained'
+                          onClick={() => {
+                            startTransition(() => { deleteTemplate(template.id) })
+                          }}>
+                          <DeleteIcon />
+                        </Button>
+                      }}
+                    />
+                  </Grid>
+                </Grid>
+              ))}
+            </Paper>
+          </Grid>
+        </Grid>
+      </Box>
+    </Dialog >
+  )
+}
+
+export default TemplatesEditor

frontend/src/components/ThemeToggler.tsx

@@ -0,0 +1,35 @@
+import Brightness4 from '@mui/icons-material/Brightness4'
+import Brightness5 from '@mui/icons-material/Brightness5'
+import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { Theme, themeState } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+
+const ThemeToggler: React.FC = () => {
+  const [theme, setTheme] = useRecoilState(themeState)
+
+  const actions: Record<Theme, React.ReactNode> = {
+    system: <BrightnessAuto />,
+    light: <Brightness4 />,
+    dark: <Brightness5 />,
+  }
+
+  const themes: Theme[] = ['system', 'light', 'dark']
+  const currentTheme = themes.indexOf(theme)
+
+  const { i18n } = useI18n()
+
+  return (
+    <ListItemButton onClick={() => {
+      setTheme(themes[(currentTheme + 1) % themes.length])
+    }}>
+      <ListItemIcon>
+        {actions[theme]}
+      </ListItemIcon>
+      <ListItemText primary={i18n.t('themeTogglerLabel')} />
+    </ListItemButton>
+  )
+}
+
+export default ThemeToggler

frontend/src/components/VersionIndicator.tsx

@@ -0,0 +1,38 @@
+import { Chip, CircularProgress } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+
+const VersionIndicator: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
+
+  const [version, setVersion] = useState('')
+  const { pushMessage } = useToast()
+
+  const fetchVersion = async () => {
+    const res = await fetch(`${serverAddr}/api/v1/version`, {
+      headers: {
+        'X-Authentication': localStorage.getItem('token') ?? ''
+      }
+    })
+
+    if (!res.ok) {
+      return pushMessage(await res.text(), 'error')
+    }
+
+    setVersion(await res.json())
+  }
+
+  useEffect(() => {
+    fetchVersion()
+  }, [])
+
+  return (
+    version
+      ? <Chip label={`yt-dlp v${version}`} variant="outlined" size="small" />
+      : <CircularProgress size={15} />
+  )
+}
+
+export default VersionIndicator

frontend/src/features/core/argsParser.ts

@@ -1,61 +0,0 @@
-export class CliArguments {
-    private _extractAudio: boolean;
-    private _noMTime: boolean;
-    private _proxy: string;
-
-    constructor(extractAudio = false, noMTime = false) {
-        this._extractAudio = extractAudio;
-        this._noMTime = noMTime;
-        this._proxy = ""
-    }
-
-    public get extractAudio(): boolean {
-        return this._extractAudio;
-    }
-
-    public toggleExtractAudio() {
-        this._extractAudio = !this._extractAudio;
-        return this;
-    }
-
-    public disableExtractAudio() {
-        this._extractAudio = false;
-        return this;
-    }
-
-    public get noMTime(): boolean {
-        return this._noMTime;
-    }
-
-    public toggleNoMTime() {
-        this._noMTime = !this._noMTime;
-        return this;
-    }
-
-    public toString(): string {
-        let args = '';
-
-        if (this._extractAudio) {
-            args += '-x '
-        }
-
-        if (this._noMTime) {
-            args += '--no-mtime '
-        }
-
-        return args.trim();
-    }
-
-    public fromString(str: string): CliArguments {
-        if (str) {
-            if (str.includes('-x')) {
-                this._extractAudio = true;
-            }
-
-            if (str.includes('--no-mtime')) {
-                this._noMTime = true;
-            }
-        }
-        return this;
-    }
-}

frontend/src/features/core/events.ts

@@ -1,10 +0,0 @@
-export function on(eventType: string, listener: any) {
-    document.addEventListener(eventType, listener)
-}
-
-export const serverStates = {
-    PROC_DOWNLOAD: 'download',
-    PROC_MERGING: 'merging',
-    PROC_ABORT: 'abort',
-    PROG_DONE: 'status_done',
-}

frontend/src/features/core/intl.ts

@@ -1,28 +0,0 @@
-// @ts-nocheck
-import i18n from "../../assets/i18n.yaml"
-
-export default class I18nBuilder {
-    private language: string
-    private textMap = i18n.languages
-
-    constructor(language: string) {
-        this.language = language
-    }
-
-    getLanguage(): string {
-        return this.language
-    }
-
-    setLanguage(language: string): void {
-        this.language = language
-    }
-
-    t(key: string): string {
-        const map = this.textMap[this.language]
-        if (map) {
-            const translation = map[key]
-            return translation ?? 'caption not defined'
-        }
-        return 'caption not defined'
-    }
-}

frontend/src/features/core/rpcClient.ts

@@ -1,105 +0,0 @@
-import type { DLMetadata, RPCRequest, RPCResponse } from '../../types'
-
-import { webSocket } from 'rxjs/webSocket'
-import { getHttpRPCEndpoint, getWebSocketEndpoint } from '../../utils'
-
-export const socket$ = webSocket<any>(getWebSocketEndpoint())
-
-export class RPCClient {
-  private seq: number
-
-  constructor() {
-    this.seq = 0
-  }
-
-  private incrementSeq() {
-    return String(this.seq++)
-  }
-
-  private send(req: RPCRequest) {
-    socket$.next({
-      ...req,
-      id: this.incrementSeq(),
-    })
-  }
-
-  private async sendHTTP<T>(req: RPCRequest) {
-    const res = await fetch(getHttpRPCEndpoint(), {
-      method: 'POST',
-      body: JSON.stringify({
-        ...req,
-        id: this.incrementSeq(),
-      })
-    })
-    const data: RPCResponse<T> = await res.json()
-
-    return data
-  }
-
-  public download(url: string, args: string, pathOverride = '', renameTo = '') {
-    if (url) {
-      this.send({
-        method: 'Service.Exec',
-        params: [{
-          URL: url.split("?list").at(0)!,
-          Params: args.split(" ").map(a => a.trim()),
-          Path: pathOverride,
-          Rename: renameTo,
-        }]
-      })
-    }
-  }
-
-  public formats(url: string) {
-    if (url) {
-      return this.sendHTTP<DLMetadata>({
-        method: 'Service.Formats',
-        params: [{
-          URL: url.split("?list").at(0)!,
-        }]
-      })
-    }
-  }
-
-  public running() {
-    this.send({
-      method: 'Service.Running',
-      params: [],
-    })
-  }
-
-  public kill(id: string) {
-    this.send({
-      method: 'Service.Kill',
-      params: [id],
-    })
-  }
-
-  public killAll() {
-    this.send({
-      method: 'Service.KillAll',
-      params: [],
-    })
-  }
-
-  public freeSpace() {
-    return this.sendHTTP<number>({
-      method: 'Service.FreeSpace',
-      params: [],
-    })
-  }
-
-  public directoryTree() {
-    return this.sendHTTP<string[]>({
-      method: 'Service.DirectoryTree',
-      params: [],
-    })
-  }
-
-  public updateExecutable() {
-    return this.sendHTTP({
-      method: 'Service.UpdateExecutable',
-      params: []
-    })
-  }
-}

frontend/src/features/settings/settingsSlice.ts

@@ -1,99 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit"
-
-export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spanish" | "korean" | "japanese"
-export type ThemeUnion = "light" | "dark"
-
-export interface SettingsState {
-    serverAddr: string
-    serverPort: string
-    language: LanguageUnion
-    theme: ThemeUnion
-    cliArgs: string
-    formatSelection: boolean
-    ratelimit: string
-    fileRenaming: boolean
-    pathOverriding: boolean
-    enableCustomArgs: boolean
-    listView: boolean
-}
-
-const initialState: SettingsState = {
-    serverAddr: localStorage.getItem("server-addr") || window.location.hostname,
-    serverPort: localStorage.getItem("server-port") || window.location.port,
-    language: (localStorage.getItem("language") || "english") as LanguageUnion,
-    theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
-    cliArgs: localStorage.getItem("cli-args") ?? "",
-    formatSelection: localStorage.getItem("format-selection") === "true",
-    ratelimit: localStorage.getItem("rate-limit") ?? "",
-    fileRenaming: localStorage.getItem("file-renaming") === "true",
-    pathOverriding: localStorage.getItem("path-overriding") === "true",
-    enableCustomArgs: localStorage.getItem("enable-custom-args") === "true",
-    listView: localStorage.getItem("listview") === "true",
-}
-
-export const settingsSlice = createSlice({
-    name: "settings",
-    initialState,
-    reducers: {
-        setServerAddr: (state, action: PayloadAction<string>) => {
-            state.serverAddr = action.payload
-            localStorage.setItem("server-addr", action.payload)
-        },
-        setServerPort: (state, action: PayloadAction<string>) => {
-            state.serverPort = action.payload
-            localStorage.setItem("server-port", action.payload)
-        },
-        setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
-            state.language = action.payload
-            localStorage.setItem("language", action.payload)
-        },
-        setCliArgs: (state, action: PayloadAction<string>) => {
-            state.cliArgs = action.payload
-            localStorage.setItem("cli-args", action.payload)
-        },
-        setTheme: (state, action: PayloadAction<ThemeUnion>) => {
-            state.theme = action.payload
-            localStorage.setItem("theme", action.payload)
-        },
-        setFormatSelection: (state, action: PayloadAction<boolean>) => {
-            state.formatSelection = action.payload
-            localStorage.setItem("format-selection", action.payload.toString())
-        },
-        setRateLimit: (state, action: PayloadAction<string>) => {
-            state.ratelimit = action.payload
-            localStorage.setItem("rate-limit", action.payload)
-        },
-        setPathOverriding: (state, action: PayloadAction<boolean>) => {
-            state.pathOverriding = action.payload
-            localStorage.setItem("path-overriding", action.payload.toString())
-        },
-        setFileRenaming: (state, action: PayloadAction<boolean>) => {
-            state.fileRenaming = action.payload
-            localStorage.setItem("file-renaming", action.payload.toString())
-        },
-        setEnableCustomArgs: (state, action: PayloadAction<boolean>) => {
-            state.enableCustomArgs = action.payload
-            localStorage.setItem("enable-custom-args", action.payload.toString())
-        },
-        toggleListView: (state) => {
-            state.listView = !state.listView
-            localStorage.setItem("listview", state.listView.toString())
-        },
-    }
-})
-
-export const {
-    setLanguage,
-    setCliArgs,
-    setTheme,
-    setServerAddr,
-    setServerPort,
-    setFormatSelection,
-    setRateLimit,
-    setFileRenaming,
-    setPathOverriding,
-    setEnableCustomArgs,
-    toggleListView
-} = settingsSlice.actions
-
-export default settingsSlice.reducer

frontend/src/features/status/statusSlice.ts

@@ -1,55 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit"
-
-export interface StatusState {
-    connected: boolean,
-    updated: boolean,
-    downloading: boolean,
-    freeSpace: number,
-}
-
-const initialState: StatusState = {
-    connected: false,
-    updated: false,
-    downloading: false,
-    freeSpace: 0,
-}
-
-export const statusSlice = createSlice({
-    name: 'status',
-    initialState,
-    reducers: {
-        connected: (state) => {
-            state.connected = true
-        },
-        disconnected: (state) => {
-            state.connected = false
-        },
-        updated: (state) => {
-            state.updated = true
-        },
-        alreadyUpdated: (state) => {
-            state.updated = false
-        },
-        downloading: (state) => {
-            state.downloading = true
-        },
-        finished: (state) => {
-            state.downloading = false
-        },
-        setFreeSpace: (state, action: PayloadAction<number>) => {
-            state.freeSpace = action.payload
-        }
-    }
-})
-
-export const {
-    connected,
-    disconnected,
-    updated,
-    alreadyUpdated,
-    downloading,
-    finished,
-    setFreeSpace
-} = statusSlice.actions
-
-export default statusSlice.reducer 

frontend/src/hooks/toast.ts

@@ -0,0 +1,19 @@
+import { AlertColor } from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { toastListState } from '../atoms/toast'
+
+export const useToast = () => {
+  const [, setToasts] = useRecoilState(toastListState)
+
+  return {
+    pushMessage: (message: string, severity?: AlertColor) => {
+      setToasts(state => [...state, {
+        open: true,
+        message: message,
+        severity: severity,
+        autoClose: true,
+        createdAt: Date.now()
+      }])
+    }
+  }
+}

frontend/src/hooks/useI18n.ts

@@ -0,0 +1,10 @@
+import { useRecoilValue } from 'recoil'
+import { i18nBuilderState } from '../atoms/i18n'
+
+export const useI18n = () => {
+  const instance = useRecoilValue(i18nBuilderState)
+
+  return {
+    i18n: instance
+  }
+}

frontend/src/hooks/useRPC.ts

@@ -0,0 +1,10 @@
+import { useRecoilValue } from 'recoil'
+import { rpcClientState } from '../atoms/rpc'
+
+export const useRPC = () => {
+  const client = useRecoilValue(rpcClientState)
+
+  return {
+    client
+  }
+}

frontend/src/index.tsx

@@ -2,9 +2,17 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+
+import '@fontsource/roboto-mono'
+
 const root = createRoot(document.getElementById('root')!)
+
 root.render(
-    <StrictMode>
-        <App />
-    </StrictMode>
+  <StrictMode>
+    <App />
+  </StrictMode>
 )

frontend/src/lib/httpClient.ts

@@ -0,0 +1,30 @@
+import { tryCatch } from 'fp-ts/TaskEither'
+
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
+)
+
+
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
+  const jwt = localStorage.getItem('token')
+
+  if (opt && !opt.headers) {
+    opt.headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
+}

frontend/src/lib/intl.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import i18n from "../assets/i18n.yaml"
+
+export default class I18nBuilder {
+  private language: string
+  private textMap = i18n.languages
+  private current: string[]
+
+  constructor(language: string) {
+    this.setLanguage(language)
+  }
+
+  getLanguage(): string {
+    return this.language
+  }
+
+  setLanguage(language: string): void {
+    this.language = language
+    this.current = this.textMap[this.language]
+  }
+
+  t(key: string): string {
+    if (this.current) {
+      return this.current[key] ?? 'caption not defined'
+    }
+    return 'caption not defined'
+  }
+}

frontend/src/lib/rpcClient.ts

@@ -0,0 +1,169 @@
+import { Observable } from 'rxjs'
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
+
+import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
+
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocketSubject<any>
+  private readonly token?: string
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this._socket$ = webSocket<any>({
+      url: token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    })
+    this.token = token
+  }
+
+  public get socket$(): Observable<RPCResponse<RPCResult[]>> {
+    return this._socket$
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.next({
+      ...req,
+      id: this.incrementSeq(),
+    })
+  }
+
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  public download(req: DownloadRequestArgs) {
+    if (!req.url) {
+      return
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
+        }]
+      })
+    }
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
+  }
+
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split('?list').at(0)!,
+        }]
+      })
+    }
+  }
+
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  public clear(id: string) {
+    this.sendHTTP({
+      method: 'Service.Clear',
+      params: [id],
+    })
+  }
+
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}

frontend/src/providers/ToasterProvider.tsx

@@ -0,0 +1,45 @@
+import { Alert, Snackbar } from "@mui/material"
+import { useRecoilState } from 'recoil'
+import { Toast, toastListState } from '../atoms/toast'
+import { useEffect } from 'react'
+
+const Toaster: React.FC = () => {
+  const [toasts, setToasts] = useRecoilState(toastListState)
+
+  const deletePredicate = (t: Toast) => (Date.now() - t.createdAt) < 2000
+
+  useEffect(() => {
+    if (toasts.length > 0) {
+      const closer = setInterval(() => {
+        setToasts(t => t.map(t => ({ ...t, open: deletePredicate(t) })))
+      }, 900)
+
+      const cleaner = setInterval(() => {
+        setToasts(t => t.filter(deletePredicate))
+      }, 2005)
+
+      return () => {
+        clearInterval(closer)
+        clearInterval(cleaner)
+      }
+    }
+  }, [setToasts, toasts.length])
+
+  return (
+    <>
+      {toasts.map((toast, index) => (
+        <Snackbar
+          key={index}
+          open={toast.open}
+          sx={index > 0 ? { marginBottom: index * 6.5 } : null}
+        >
+          <Alert variant="filled" severity={toast.severity}>
+            {toast.message}
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
+  )
+}
+
+export default Toaster

frontend/src/router.tsx

@@ -0,0 +1,79 @@
+import { CircularProgress } from '@mui/material'
+import { Suspense, lazy } from 'react'
+import { createHashRouter } from 'react-router-dom'
+import Layout from './Layout'
+import Terminal from './views/Terminal'
+
+const Home = lazy(() => import('./views/Home'))
+const Login = lazy(() => import('./views/Login'))
+const Archive = lazy(() => import('./views/Archive'))
+const Settings = lazy(() => import('./views/Settings'))
+
+const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
+
+export const router = createHashRouter([
+  {
+    path: '/',
+    Component: () => <Layout />,
+    children: [
+      {
+        path: '/',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Home />
+          </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+      {
+        path: '/settings',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Settings />
+          </Suspense >
+        )
+      },
+      {
+        path: '/log',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Terminal />
+          </Suspense >
+        )
+      },
+      {
+        path: '/archive',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Archive />
+          </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+      {
+        path: '/login',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Login />
+          </Suspense >
+        )
+      },
+      {
+        path: '/error',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+    ]
+  },
+])

frontend/src/stores/store.ts

@@ -1,15 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit'
-import settingsReducer from '../features/settings/settingsSlice'
-import statussReducer from '../features/status/statusSlice'
-
-export const store = configureStore({
-    reducer: {
-        settings: settingsReducer,
-        status: statussReducer,
-    },
-})
-
-export type RootState = ReturnType<typeof store.getState>
-
-export type AppDispatch = typeof store.dispatch
-

frontend/src/types/index.d.ts

@@ -1,75 +0,0 @@
-export type RPCMethods =
-  | "Service.Exec"
-  | "Service.Kill"
-  | "Service.Clear"
-  | "Service.Running"
-  | "Service.KillAll"
-  | "Service.FreeSpace"
-  | "Service.Formats"
-  | "Service.DirectoryTree"
-  | "Service.UpdateExecutable"
-
-export type RPCRequest = {
-  method: RPCMethods
-  params?: any[]
-  id?: string
-}
-
-export type RPCResponse<T> = {
-  result: T
-  error: number | null
-  id?: string
-}
-
-export type RPCResult = {
-  id: string
-  progress: {
-    speed: number
-    eta: number
-    percentage: string
-  }
-  info: {
-    url: string
-    filesize_approx?: number
-    resolution?: string
-    thumbnail: string
-    title: string
-    vcodec?: string
-    acodec?: string
-    ext?: string
-  }
-}
-
-export type RPCParams = {
-  URL: string
-  Params?: string
-}
-
-export interface DLMetadata {
-  formats: Array<DLFormat>
-  best: DLFormat
-  thumbnail: string
-  title: string
-}
-
-export type DLFormat = {
-  format_id: string
-  format_note: string
-  fps: number
-  resolution: string
-  vcodec: string
-  acodec: string
-  filesize_approx: number
-}
-
-export type DirectoryEntry = {
-  name: string
-  path: string
-  shaSum: string
-  isDirectory: boolean
-}
-
-export type DeleteRequest = Omit<DirectoryEntry, 'name' | 'isDirectory'>
-
-export type PlayRequest = Omit<DirectoryEntry, 'shaSum' | 'name' | 'isDirectory'>
-

frontend/src/types/index.ts

@@ -0,0 +1,99 @@
+export type RPCMethods =
+  | "Service.Exec"
+  | "Service.Kill"
+  | "Service.Clear"
+  | "Service.Running"
+  | "Service.KillAll"
+  | "Service.FreeSpace"
+  | "Service.Formats"
+  | "Service.ExecPlaylist"
+  | "Service.DirectoryTree"
+  | "Service.UpdateExecutable"
+
+export type RPCRequest = {
+  method: RPCMethods
+  params?: any[]
+  id?: string
+}
+
+export type RPCResponse<T> = Readonly<{
+  result: T
+  error: number | null
+  id?: string
+}>
+
+type DownloadInfo = {
+  url: string
+  filesize_approx?: number
+  resolution?: string
+  thumbnail: string
+  title: string
+  vcodec?: string
+  acodec?: string
+  ext?: string
+  created_at: string
+}
+
+export enum ProcessStatus {
+  Pending = 0,
+  Downloading,
+  Completed,
+  Errored,
+}
+
+type DownloadProgress = {
+  speed: number
+  eta: number
+  percentage: string
+  process_status: ProcessStatus
+}
+
+export type RPCResult = Readonly<{
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+  output: {
+    savedFilePath: string
+  }
+}>
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export type DLMetadata = {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
+}
+
+export type DLFormat = {
+  format_id: string
+  format_note: string
+  fps: number
+  resolution: string
+  vcodec: string
+  acodec: string
+  filesize_approx: number
+}
+
+export type DirectoryEntry = {
+  name: string
+  path: string
+  size: number
+  modTime: string
+  isVideo: boolean
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Pick<DirectoryEntry, 'path'>
+
+export type PlayRequest = DeleteRequest
+
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}

frontend/src/utils.ts

@@ -1,94 +1,80 @@
-/**
- * Validate an ip v4 via regex
- * @param {string} ipAddr 
- * @returns ip validity test
- */
+import { pipe } from 'fp-ts/lib/function'
+import type { RPCResponse } from "./types"
+import { ProcessStatus } from './types'
+
 export function validateIP(ipAddr: string): boolean {
-    let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
-    return ipRegex.test(ipAddr)
+  let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
+  return ipRegex.test(ipAddr)
 }
 
-/**
- * Validate a domain via regex.  
- * The validation pass if the domain respects the following formats:  
- * - localhost
- * - domain.tld
- * - dir.domain.tld
- * @param domainName 
- * @returns domain validity test
- */
-export function validateDomain(domainName: string): boolean {
-    let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
-    return domainRegex.test(domainName) || domainName === 'localhost'
+export function validateDomain(url: string): boolean {
+  const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+  const [name, slug] = url.split('/')
+
+  return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
 }
 
-/**
- * Validate a domain via regex.  
- * Exapmples
- * - http://example.com
- * - https://example.com
- * - http://www.example.com
- * - https://www.example.com
- * - http://10.0.0.1/[something]/[something-else]
- * @param url 
- * @returns url validity test
- */
-export function isValidURL(url: string): boolean {
-    let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
-    return urlRegex.test(url)
-}
-
-export function ellipsis(str: string, lim: number): string {
-    if (str) {
-        return str.length > lim ? `${str.substring(0, lim)}...` : str
-    }
-    return ''
-}
-
-/**
- * Parse the downlaod speed sent by server and converts it to KiB/s
- * @param str the downlaod speed, ex. format: 5 MiB/s => 5000 | 50 KiB/s => 50
- * @returns download speed in KiB/s
- */
-export function detectSpeed(str: string): number {
-    let effective = str.match(/[\d,]+(\.\d+)?/)![0]
-    const unit = str.replace(effective, '')
-    switch (unit) {
-        case 'MiB/s':
-            return Number(effective) * 1000
-        case 'KiB/s':
-            return Number(effective)
-        default:
-            return 0
-    }
-}
+export const ellipsis = (str: string, lim: number) =>
+  str.length > lim
+    ? `${str.substring(0, lim)}...`
+    : str
 
 export function toFormatArgs(codes: string[]): string {
-    if (codes.length > 1) {
-        return codes.reduce((v, a) => ` -f ${v}+${a}`)
-    }
-    if (codes.length === 1) {
-        return ` -f ${codes[0]}`;
-    }
-    return '';
+  if (codes.length > 1) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
 }
 
-export function getWebSocketEndpoint() {
-    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-    return `${protocol}://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/ws-rpc`
+export function formatSize(bytes: number): string {
+  const threshold = 1024
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+
+  let i = 0
+  while (bytes >= threshold) {
+    bytes /= threshold
+    i = i + 1
+  }
+
+  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
 }
 
-export function getHttpRPCEndpoint() {
-    return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/http-rpc`
+export const formatSpeedMiB = (val: number) =>
+  `${(val / 1_048_576).toFixed(2)} MiB/s`
+
+export const datetimeCompareFunc = (a: string, b: string) =>
+  new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse<any> {
+  return 'result' in object && 'id' in object
 }
 
-export function getHttpEndpoint() {
-    return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
+export function mapProcessStatus(status: ProcessStatus) {
+  switch (status) {
+    case ProcessStatus.Pending:
+      return 'Pending'
+    case ProcessStatus.Downloading:
+      return 'Downloading'
+    case ProcessStatus.Completed:
+      return 'Completed'
+    case ProcessStatus.Errored:
+      return 'Error'
+    default:
+      return 'Pending'
+  }
 }
 
-export function formatGiB(bytes: number) {
-    return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
-}
+export const prefersDarkMode = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches
 
-export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB`
-export const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s`
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)

frontend/src/views/Archive.tsx

@@ -0,0 +1,363 @@
+import {
+  Backdrop,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  MenuList,
+  Paper,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Typography
+} from '@mui/material'
+
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import FolderIcon from '@mui/icons-material/Folder'
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
+import VideoFileIcon from '@mui/icons-material/VideoFile'
+
+import DownloadIcon from '@mui/icons-material/Download'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
+import { useEffect, useMemo, useState, useTransition } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
+import { serverURL } from '../atoms/settings'
+import { useObservable } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { ffetch } from '../lib/httpClient'
+import { DirectoryEntry } from '../types'
+import { base64URLEncode, formatSize } from '../utils'
+
+export default function Downloaded() {
+  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
+  const [showMenu, setShowMenu] = useState(false)
+  const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
+
+  const serverAddr = useRecoilValue(serverURL)
+  const navigate = useNavigate()
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  const [openDialog, setOpenDialog] = useState(false)
+
+  const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
+  const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
+
+  const [isPending, startTransition] = useTransition()
+
+  const fetcher = () => pipe(
+    ffetch<DirectoryEntry[]>(
+      `${serverAddr}/archive/downloaded`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          subdir: '',
+        })
+      }
+    ),
+    matchW(
+      (e) => {
+        pushMessage(e, 'error')
+        navigate('/login')
+      },
+      (d) => files$.next(d ?? []),
+    )
+  )()
+
+  const fetcherSubfolder = (sub: string) => {
+    const folders = sub.startsWith('/')
+      ? sub.substring(1).split('/')
+      : sub.split('/')
+
+    const relpath = folders.length >= 2
+      ? folders.slice(-(folders.length - 1)).join('/')
+      : folders.pop()
+
+    const _upperLevel = folders.slice(1, -1)
+    const upperLevel = _upperLevel.length === 2
+      ? ['.', ..._upperLevel].join('/')
+      : _upperLevel.join('/')
+
+    const task = ffetch<DirectoryEntry[]>(`${serverAddr}/archive/downloaded`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ subdir: relpath })
+    })
+
+    pipe(
+      task,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (r) => files$.next(sub
+          ? [{
+            isDirectory: true,
+            isVideo: false,
+            modTime: '',
+            name: '..',
+            path: upperLevel,
+            size: 0,
+          }, ...r.filter(f => f.name !== '')]
+          : r.filter(f => f.name !== '')
+        )
+      )
+    )()
+  }
+
+  const selectable$ = useMemo(() => files$.pipe(
+    combineLatestWith(selected$),
+    map(([data, selected]) => data.map(x => ({
+      ...x,
+      selected: selected.includes(x.name)
+    }))),
+    share()
+  ), [])
+
+  const selectable = useObservable(selectable$, [])
+
+  const addSelected = (name: string) => {
+    selected$.value.includes(name)
+      ? selected$.next(selected$.value.filter(val => val !== name))
+      : selected$.next([...selected$.value, name])
+  }
+
+  const deleteFile = (entry: DirectoryEntry) => pipe(
+    ffetch(`${serverAddr}/archive/delete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        path: entry.path,
+      })
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => fetcher()
+    )
+  )()
+
+  const deleteSelected = () => {
+    Promise.all(selectable
+      .filter(entry => entry.selected)
+      .map(deleteFile)
+    ).then(fetcher)
+  }
+
+  useEffect(() => {
+    fetcher()
+  }, [serverAddr])
+
+  const onFileClick = (path: string) => startTransition(() => {
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  })
+
+  const downloadFile = (path: string) => startTransition(() => {
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+  })
+
+  const onFolderClick = (path: string) => startTransition(() => {
+    fetcherSubfolder(path)
+  })
+
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{ mt: 4, mb: 4, height: '100%' }}
+      onClick={() => setShowMenu(false)}
+    >
+      <IconMenu
+        posX={menuPos.x}
+        posY={menuPos.y}
+        hide={!showMenu}
+        onDownload={() => {
+          if (currentFile) {
+            downloadFile(currentFile?.path)
+            setCurrentFile(undefined)
+          }
+        }}
+        onDelete={() => {
+          if (currentFile) {
+            deleteFile(currentFile)
+            setCurrentFile(undefined)
+          }
+        }}
+      />
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={!(files$.observed) || isPending}
+      >
+        <CircularProgress color="primary" />
+      </Backdrop>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={() => setShowMenu(false)}
+      >
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('archiveTitle')}
+        </Typography>
+        <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+          {selectable.length === 0 && 'No files found'}
+          {selectable.map((file, idx) => (
+            <ListItem
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCurrentFile(file)
+                setMenuPos({ x: e.clientX, y: e.clientY })
+                setShowMenu(true)
+              }}
+              key={idx}
+              secondaryAction={
+                <div>
+                  {!file.isDirectory && <Typography
+                    variant="caption"
+                    component="span"
+                  >
+                    {formatSize(file.size)}
+                  </Typography>
+                  }
+                  {!file.isDirectory && <>
+                    <Checkbox
+                      edge="end"
+                      checked={file.selected}
+                      onChange={() => addSelected(file.name)}
+                    />
+                  </>}
+                </div>
+              }
+              disablePadding
+            >
+              <ListItemButton onClick={
+                () => file.isDirectory
+                  ? onFolderClick(file.path)
+                  : onFileClick(file.path)
+              }>
+                <ListItemIcon>
+                  {file.isDirectory
+                    ? <FolderIcon />
+                    : file.isVideo
+                      ? <VideoFileIcon />
+                      : <InsertDriveFileIcon />
+                  }
+                </ListItemIcon>
+                <ListItemText
+                  primary={file.name}
+                  secondary={file.name != '..' && new Date(file.modTime).toLocaleString()}
+                />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Paper>
+      <SpeedDial
+        ariaLabel='archive actions'
+        sx={{ position: 'absolute', bottom: 64, right: 24 }}
+        icon={<SpeedDialIcon />}
+      >
+        <SpeedDialAction
+          icon={<DeleteForeverIcon />}
+          tooltipTitle={`Delete selected`}
+          tooltipOpen
+          onClick={() => {
+            if (selected$.value.length > 0) {
+              setOpenDialog(true)
+            }
+          }}
+        />
+      </SpeedDial>
+      <Dialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+      >
+        <DialogTitle>
+          Are you sure?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            You're deleting:
+          </DialogContentText>
+          <ul>
+            {selected$.value.map((entry, idx) => (
+              <li key={idx}>{entry}</li>
+            ))}
+          </ul>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              deleteSelected()
+              setOpenDialog(false)
+            }}
+            autoFocus
+          >
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  )
+}
+
+const IconMenu: React.FC<{
+  posX: number
+  posY: number
+  hide: boolean
+  onDownload: () => void
+  onDelete: () => void
+}> = ({ posX, posY, hide, onDelete, onDownload }) => {
+  return (
+    <Paper sx={{
+      width: 320,
+      maxWidth: '100%',
+      position: 'absolute',
+      top: posY,
+      left: posX,
+      display: hide ? 'none' : 'block',
+      zIndex: (theme) => theme.zIndex.drawer + 1,
+    }}>
+      <MenuList>
+        <MenuItem onClick={onDownload}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Download
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={onDelete}>
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Delete
+          </ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  )
+}

frontend/src/views/Home.tsx

@@ -0,0 +1,18 @@
+import {
+  Container
+} from '@mui/material'
+import Downloads from '../components/Downloads'
+import HomeActions from '../components/HomeActions'
+import LoadingBackdrop from '../components/LoadingBackdrop'
+import Splash from '../components/Splash'
+
+export default function Home() {
+  return (
+    <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
+      <LoadingBackdrop />
+      <Splash />
+      <Downloads />
+      <HomeActions />
+    </Container>
+  )
+}

frontend/src/views/Login.tsx

@@ -0,0 +1,129 @@
+/*
+  Login view component
+*/
+
+import styled from '@emotion/styled'
+import {
+  Button,
+  Container,
+  Divider,
+  Paper,
+  Stack,
+  TextField,
+  Typography
+} from '@mui/material'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+
+const LoginContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '85vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+export default function Login() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  const [formHasError, setFormHasError] = useState(false)
+
+  const url = useRecoilValue(serverURL)
+
+  const navigate = useNavigate()
+
+  const { pushMessage } = useToast()
+
+  const navigateAndReload = () => {
+    navigate('/')
+    window.location.reload()
+  }
+
+  const login = async () => {
+    const task = ffetch<string>(`${url}/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+    })
+
+    pipe(
+      task,
+      matchW(
+        (error) => {
+          setFormHasError(true)
+          pushMessage(error, 'error')
+        },
+        (token) => {
+          console.log(token)
+          localStorage.setItem('token', token)
+          navigateAndReload()
+        }
+      )
+    )()
+  }
+
+  const loginWithOpenId = () => window.open(`${url}/auth/openid/login`)
+
+  return (
+    <LoginContainer>
+      <Paper sx={{ padding: '1.5rem', minWidth: '25%' }}>
+        <Stack direction="column" spacing={2}>
+          <Title fontWeight={'700'} fontSize={32} color={'primary'}>
+            yt-dlp WebUI
+          </Title>
+          <Title fontWeight={'500'} fontSize={16} color={'gray'}>
+            To configure authentication check the&nbsp;
+            <a href='https://github.com/marcopeocchi/yt-dlp-web-ui/wiki/Authentication-methods'>wiki</a>.
+          </Title>
+          <TextField
+            label="Username"
+            type="text"
+            autoComplete="yt-dlp-webui-username"
+            error={formHasError}
+            onChange={e => setUsername(e.currentTarget.value)}
+          />
+          <TextField
+            label="Password"
+            type="password"
+            autoComplete="yt-dlp-webui-password"
+            error={formHasError}
+            onChange={e => setPassword(e.currentTarget.value)}
+          />
+          <Button variant="contained" size="large" onClick={() => login()}>
+            Submit
+          </Button>
+
+          <Divider>
+            <Typography color={'gray'}>
+              or use your authentication provider
+            </Typography>
+          </Divider>
+
+          <Button variant="contained" size="large" onClick={loginWithOpenId}>
+            Login with OpenID
+          </Button>
+        </Stack>
+      </Paper>
+    </LoginContainer>
+  )
+}

frontend/src/views/Settings.tsx

@@ -0,0 +1,366 @@
+import {
+  Button,
+  Checkbox,
+  Container,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Slider,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+  capitalize
+} from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import {
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  takeWhile
+} from 'rxjs'
+import { rpcPollingTimeState } from '../atoms/rpc'
+import {
+  Language,
+  Theme,
+  appTitleState,
+  enableCustomArgsState,
+  fileRenamingState,
+  formatSelectionState,
+  languageState,
+  languages,
+  pathOverridingState,
+  servedFromReverseProxyState,
+  servedFromReverseProxySubDirState,
+  serverAddressState,
+  serverPortState,
+  themeState
+} from '../atoms/settings'
+import CookiesTextField from '../components/CookiesTextField'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { validateDomain, validateIP } from '../utils'
+
+// NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
+export default function Settings() {
+  const [reverseProxy, setReverseProxy] = useRecoilState(servedFromReverseProxyState)
+  const [baseURL, setBaseURL] = useRecoilState(servedFromReverseProxySubDirState)
+
+  const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
+  const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
+  const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
+  const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
+
+  const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
+  const [serverPort, setServerPort] = useRecoilState(serverPortState)
+
+  const [pollingTime, setPollingTime] = useRecoilState(rpcPollingTimeState)
+  const [language, setLanguage] = useRecoilState(languageState)
+  const [appTitle, setApptitle] = useRecoilState(appTitleState)
+
+  const [theme, setTheme] = useRecoilState(themeState)
+
+  const [invalidIP, setInvalidIP] = useState(false)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const { pushMessage } = useToast()
+
+  const baseURL$ = useMemo(() => new Subject<string>(), [])
+  const serverAddr$ = useMemo(() => new Subject<string>(), [])
+  const serverPort$ = useMemo(() => new Subject<string>(), [])
+
+  useEffect(() => {
+    const sub = baseURL$
+      .pipe(debounceTime(500))
+      .subscribe(baseURL => {
+        setBaseURL(baseURL)
+        pushMessage(i18n.t('restartAppMessage'), 'info')
+      })
+    return () => sub.unsubscribe()
+  }, [])
+
+  useEffect(() => {
+    const sub = serverAddr$
+      .pipe(
+        debounceTime(500),
+        distinctUntilChanged()
+      )
+      .subscribe(addr => {
+        if (validateIP(addr)) {
+          setInvalidIP(false)
+          setServerAddr(addr)
+          pushMessage(i18n.t('restartAppMessage'), 'info')
+        } else if (validateDomain(addr)) {
+          setInvalidIP(false)
+          setServerAddr(addr)
+          pushMessage(i18n.t('restartAppMessage'), 'info')
+        } else {
+          setInvalidIP(true)
+        }
+      })
+    return () => sub.unsubscribe()
+  }, [serverAddr$])
+
+  useEffect(() => {
+    const sub = serverPort$
+      .pipe(
+        debounceTime(500),
+        map(val => Number(val)),
+        takeWhile(val => isFinite(val) && val <= 65535),
+      )
+      .subscribe(port => {
+        setServerPort(port)
+        pushMessage(i18n.t('restartAppMessage'), 'info')
+      })
+    return () => sub.unsubscribe()
+  }, [])
+
+  /**
+   * Language toggler handler 
+   */
+  const handleLanguageChange = (event: SelectChangeEvent<Language>) => {
+    setLanguage(event.target.value as Language)
+  }
+
+  /**
+   * Theme toggler handler 
+   */
+  const handleThemeChange = (event: SelectChangeEvent<Theme>) => {
+    setTheme(event.target.value as Theme)
+  }
+
+  /**
+   * Updates yt-dlp binary via RPC
+   */
+  const updateBinary = () => {
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+  }
+
+  return (
+    <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: 240,
+        }}
+      >
+        <Typography pb={2} variant="h6" color="primary">
+          {i18n.t('settingsAnchor')}
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={11}>
+            <TextField
+              fullWidth
+              label={i18n.t('serverAddressTitle')}
+              defaultValue={serverAddr}
+              error={invalidIP}
+              onChange={(e) => serverAddr$.next(e.currentTarget.value)}
+              InputProps={{
+                startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} md={1}>
+            <TextField
+              disabled={reverseProxy}
+              fullWidth
+              label={i18n.t('serverPortTitle')}
+              defaultValue={serverPort}
+              onChange={(e) => serverPort$.next(e.currentTarget.value)}
+              error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
+            />
+          </Grid>
+          <Grid item xs={12} md={12}>
+            <TextField
+              disabled={reverseProxy}
+              fullWidth
+              label={i18n.t('appTitle')}
+              defaultValue={appTitle}
+              onChange={(e) => setApptitle(e.currentTarget.value)}
+              error={appTitle === ''}
+            />
+          </Grid>
+          <Grid item xs={12} md={12}>
+            <Typography>
+              {i18n.t('rpcPollingTimeTitle')}
+            </Typography>
+            <Typography variant='caption' sx={{ mb: 0.5 }}>
+              {i18n.t('rpcPollingTimeDescription')}
+            </Typography>
+            <Slider
+              aria-label="rpc polling time"
+              defaultValue={pollingTime}
+              max={2000}
+              getAriaValueText={(v: number) => `${v} ms`}
+              step={null}
+              valueLabelDisplay="off"
+              marks={[
+                { value: 100, label: '100 ms' },
+                { value: 250, label: '250 ms' },
+                { value: 500, label: '500 ms' },
+                { value: 750, label: '750 ms' },
+                { value: 1000, label: '1000 ms' },
+                { value: 2000, label: '2000 ms' },
+              ]}
+              onChange={(_, value) => typeof value === 'number'
+                ? setPollingTime(value)
+                : setPollingTime(1000)
+              }
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="h6" color="primary" sx={{ mb: 0.5 }}>
+              Reverse Proxy
+            </Typography>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  defaultChecked={reverseProxy}
+                  onChange={() => setReverseProxy(state => !state)}
+                />
+              }
+              label={i18n.t('servedFromReverseProxyCheckbox')}
+              sx={{ mb: 1 }}
+            />
+            <TextField
+              fullWidth
+              label={i18n.t('urlBase')}
+              defaultValue={baseURL}
+              onChange={(e) => {
+                let value = e.currentTarget.value
+                if (value.startsWith('/')) {
+                  value = value.substring(1)
+                }
+                if (value.endsWith('/')) {
+                  value = value.substring(0, value.length - 1)
+                }
+                baseURL$.next(value)
+              }}
+              sx={{ mb: 2 }}
+            />
+          </Grid>
+        </Grid>
+        <Typography variant="h6" color="primary" sx={{ mt: 0.5, mb: 2 }}>
+          Appearance
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel>{i18n.t('languageSelect')}</InputLabel>
+              <Select
+                defaultValue={language}
+                label={i18n.t('languageSelect')}
+                onChange={handleLanguageChange}
+              >
+                {languages.toSorted((a, b) => a.localeCompare(b)).map(l => (
+                  <MenuItem value={l} key={l}>
+                    {capitalize(l)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel>{i18n.t('themeSelect')}</InputLabel>
+              <Select
+                defaultValue={theme}
+                label={i18n.t('themeSelect')}
+                onChange={handleThemeChange}
+              >
+                <MenuItem value="light">Light</MenuItem>
+                <MenuItem value="dark">Dark</MenuItem>
+                <MenuItem value="system">System</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+        </Grid>
+        <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
+          General download settings
+        </Typography>
+
+        <FormControlLabel
+          control={
+            <Switch
+              defaultChecked={formatSelection}
+              onChange={() => {
+                setFormatSelection(!formatSelection)
+              }}
+            />
+          }
+          label={i18n.t('formatSelectionEnabler')}
+        />
+        <Grid>
+          <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
+            {i18n.t('overridesAnchor')}
+          </Typography>
+          <Stack direction="column">
+            <FormControlLabel
+              control={
+                <Switch
+                  defaultChecked={!!pathOverriding}
+                  onChange={() => {
+                    setPathOverriding(state => !state)
+                  }}
+                />
+              }
+              label={i18n.t('pathOverrideOption')}
+            />
+            <FormControlLabel
+              control={
+                <Switch
+                  defaultChecked={fileRenaming}
+                  onChange={() => {
+                    setFileRenaming(state => !state)
+                  }}
+                />
+              }
+              label={i18n.t('filenameOverrideOption')}
+            />
+            <FormControlLabel
+              control={
+                <Switch
+                  defaultChecked={enableArgs}
+                  onChange={() => {
+                    setEnableArgs(state => !state)
+                  }}
+                />
+              }
+              label={i18n.t('customArgs')}
+            />
+          </Stack>
+        </Grid>
+        <Grid sx={{ mr: 1, mt: 2 }}>
+          <Typography variant="h6" color="primary" sx={{ mb: 2 }}>
+            Cookies
+          </Typography>
+          <CookiesTextField />
+        </Grid>
+        <Grid>
+          <Stack direction="row">
+            <Button
+              sx={{ mr: 1, mt: 3 }}
+              variant="contained"
+              onClick={() => updateBinary()}
+            >
+              {i18n.t('updateBinButton')}
+            </Button>
+          </Stack>
+        </Grid>
+      </Paper>
+    </Container>
+  )
+}

frontend/src/views/Terminal.tsx

@@ -0,0 +1,26 @@
+import { Container, Paper, Typography } from '@mui/material'
+import LogTerminal from '../components/LogTerminal'
+import { useI18n } from '../hooks/useI18n'
+
+const Terminal: React.FC = () => {
+  const { i18n } = useI18n()
+
+  return (
+    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography pb={2} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        <LogTerminal />
+      </Paper>
+    </Container >
+  )
+}
+
+export default Terminal

frontend/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "jsx": "react-jsx",
-        "target": "es6",
+        "target": "ES2018",
         "lib": [
             "dom",
             "dom.iterable",

frontend/vite.config.ts

@@ -1,18 +1,18 @@
-import react from "@vitejs/plugin-react";
-import ViteYaml from '@modyfi/vite-plugin-yaml';
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
+import react from '@vitejs/plugin-react-swc'
+import million from 'million/compiler'
+import ViteYaml from '@modyfi/vite-plugin-yaml'
+import { defineConfig } from 'vite'
 
 export default defineConfig(() => {
-    return {
-        plugins: [
-            react(),
-            ViteYaml(),
-        ],
-        root: resolve(__dirname, '.'),
-        build: {
-            emptyOutDir: true,
-            outDir: resolve(__dirname, 'dist'),
-        }
+  return {
+    plugins: [
+      million.vite({ auto: true }),
+      react(),
+      ViteYaml(),
+    ],
+    base: '',
+    build: {
+      emptyOutDir: true,
     }
+  }
 })

go.mod

@@ -1,30 +1,42 @@
 module github.com/marcopeocchi/yt-dlp-web-ui
 
-go 1.19
+go 1.22
 
 require (
-	github.com/goccy/go-json v0.10.2
-	github.com/gofiber/fiber/v2 v2.43.0
-	github.com/gofiber/websocket/v2 v2.1.5
-	github.com/google/uuid v1.3.0
-	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
-	golang.org/x/sys v0.7.0
+	github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef
+	github.com/coreos/go-oidc/v3 v3.11.0
+	github.com/go-chi/chi/v5 v5.1.0
+	github.com/go-chi/cors v1.2.1
+	github.com/golang-jwt/jwt/v5 v5.2.1
+	github.com/google/uuid v1.6.0
+	github.com/gorilla/websocket v1.5.3
+	github.com/reactivex/rxgo/v2 v2.5.0
+	golang.org/x/oauth2 v0.21.0
+	golang.org/x/sync v0.7.0
+	golang.org/x/sys v0.22.0
 	gopkg.in/yaml.v3 v3.0.1
+	modernc.org/sqlite v1.31.1
 )
 
 require (
-	github.com/andybalholm/brotli v1.0.5 // indirect
-	github.com/fasthttp/websocket v1.5.2 // indirect
-	github.com/klauspost/compress v1.16.4 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.18 // indirect
-	github.com/mattn/go-runewidth v0.0.14 // indirect
-	github.com/philhofer/fwd v1.1.2 // indirect
-	github.com/rivo/uniseg v0.4.4 // indirect
-	github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 // indirect
-	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
-	github.com/tinylib/msgp v1.1.8 // indirect
-	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.45.0 // indirect
-	github.com/valyala/tcplisten v1.0.0 // indirect
+	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/emirpasic/gods v1.18.1 // indirect
+	github.com/go-jose/go-jose/v4 v4.0.4 // indirect
+	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/ncruces/go-strftime v0.1.9 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/stretchr/objx v0.5.2 // indirect
+	github.com/stretchr/testify v1.9.0 // indirect
+	github.com/teivah/onecontext v1.3.0 // indirect
+	golang.org/x/crypto v0.25.0 // indirect
+	modernc.org/gc/v3 v3.0.0-20240722195230-4a140ff9c08e // indirect
+	modernc.org/libc v1.55.7 // indirect
+	modernc.org/mathutil v1.6.0 // indirect
+	modernc.org/memory v1.8.0 // indirect
+	modernc.org/strutil v1.2.0 // indirect
+	modernc.org/token v1.1.0 // indirect
 )

go.sum

@@ -1,93 +1,125 @@
-github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
-github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
-github.com/fasthttp/websocket v1.5.2 h1:KdCb0EpLpdJpfE3IPA5YLK/aYBO3dhZcvwxz6tXe2LQ=
-github.com/fasthttp/websocket v1.5.2/go.mod h1:S0KC1VBlx1SaXGXq7yi1wKz4jMub58qEnHQG9oHuqBw=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
-github.com/gofiber/fiber/v2 v2.43.0 h1:yit3E4kHf178B60p5CQBa/3v+WVuziWMa/G2ZNyLJB0=
-github.com/gofiber/fiber/v2 v2.43.0/go.mod h1:mpS1ZNE5jU+u+BA4FbM+KKnUzJ4wzTK+FT2tG3tU+6I=
-github.com/gofiber/websocket/v2 v2.1.5 h1:2weAMr0Shb2ubhZ3+P4bkeWL+uCZ/NlgjSa1siEcvFM=
-github.com/gofiber/websocket/v2 v2.1.5/go.mod h1:BZZEk+XsjjF0V6/sAw00iGcB69dFb6Hb85ER9gr/xaU=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/klauspost/compress v1.16.4 h1:91KN02FnsOYhuunwU4ssRe8lc2JosWmizWa91B5v1PU=
-github.com/klauspost/compress v1.16.4/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
-github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
-github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.18 h1:DOKFKCQ7FNG2L1rbrmstDN4QVRdS89Nkh85u68Uwp98=
-github.com/mattn/go-isatty v0.0.18/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
-github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
-github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
-github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=
-github.com/philhofer/fwd v1.1.2/go.mod h1:qkPdfjR2SIEbspLqpe1tO4n5yICnr2DY7mqEx2tUTP0=
-github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
-github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
-github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 h1:rmMl4fXJhKMNWl+K+r/fq4FbbKI+Ia2m9hYBLm2h4G4=
-github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94/go.mod h1:90zrgN3D/WJsDd1iXHT96alCoN2KJo6/4x1DZC3wZs8=
-github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
-github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
-github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
-github.com/tinylib/msgp v1.1.6/go.mod h1:75BAfg2hauQhs3qedfdDZmWAPcFMAvJE5b9rGOMufyw=
-github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
-github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
-github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
-github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.45.0 h1:zPkkzpIn8tdHZUrVa6PzYd0i5verqiPSkgTd3bSUcpA=
-github.com/valyala/fasthttp v1.45.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
-github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
-github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
-github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
-github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef h1:2JGTg6JapxP9/R33ZaagQtAM4EkkSYnIAlOG5EI8gkM=
+github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef/go.mod h1:JS7hed4L1fj0hXcyEejnW57/7LCetXggd+vwrRnYeII=
+github.com/cenkalti/backoff/v4 v4.0.0/go.mod h1:eEew/i+1Q6OrCDZh3WiXYv3+nJwBASZ8Bog/87DQnVg=
+github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
+github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/coreos/go-oidc/v3 v3.11.0 h1:Ia3MxdwpSw702YW0xgfmP1GVCMA9aEFWu12XUZ3/OtI=
+github.com/coreos/go-oidc/v3 v3.11.0/go.mod h1:gE3LgjOgFoHi9a4ce4/tJczr0Ai2/BoDhf0r5lltWI0=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
+github.com/emirpasic/gods v1.18.1 h1:FXtiHYKDGKCW2KzwZKx0iC0PQmdlorYgdFG9jPXJ1Bc=
+github.com/emirpasic/gods v1.18.1/go.mod h1:8tpGGwCnJ5H4r6BWwaV6OrWmMoPhUl5jm/FMNAnJvWQ=
+github.com/go-chi/chi/v5 v5.1.0 h1:acVI1TYaD+hhedDJ3r54HyA6sExp3HfXq7QWEEY/xMw=
+github.com/go-chi/chi/v5 v5.1.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
+github.com/go-jose/go-jose/v4 v4.0.3 h1:o8aphO8Hv6RPmH+GfzVuyf7YXSBibp+8YyHdOoDESGo=
+github.com/go-jose/go-jose/v4 v4.0.3/go.mod h1:NKb5HO1EZccyMpiZNbdUw/14tiXNyUJh188dfnMCAfc=
+github.com/go-jose/go-jose/v4 v4.0.4 h1:VsjPI33J0SB9vQM6PLmNjoHqMQNGPiZ0rHL7Ni7Q6/E=
+github.com/go-jose/go-jose/v4 v4.0.4/go.mod h1:NKb5HO1EZccyMpiZNbdUw/14tiXNyUJh188dfnMCAfc=
+github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
+github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/pprof v0.0.0-20240409012703-83162a5b38cd h1:gbpYu9NMq8jhDVbvlGkMFWCjLFlqqEZjEmObmhUy6Vo=
+github.com/google/pprof v0.0.0-20240409012703-83162a5b38cd/go.mod h1:kf6iHlnVGwgKolg33glAes7Yg/8iWP8ukqeldJSO7jw=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
+github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
+github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
+github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/reactivex/rxgo/v2 v2.5.0 h1:FhPgHwX9vKdNQB2gq9EPt+EKk9QrrzoeztGbEEnZam4=
+github.com/reactivex/rxgo/v2 v2.5.0/go.mod h1:bs4fVZxcb5ZckLIOeIeVH942yunJLWDABWGbrHAW+qU=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.5.2 h1:xuMeJ0Sdp5ZMRXx/aWO6RZxdr3beISkG5/G/aIRr3pY=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775/go.mod h1:XUZ4x3oGhWfiOnUvTslnKKs39AWUct3g3yJvXTQSJOQ=
+github.com/teivah/onecontext v1.3.0 h1:tbikMhAlo6VhAuEGCvhc8HlTnpX4xTNPTOseWuhO1J0=
+github.com/teivah/onecontext v1.3.0/go.mod h1:hoW1nmdPVK/0jrvGtcx8sCKYs2PiS4z0zzfdeuEVyb0=
+go.uber.org/goleak v1.1.10 h1:z+mqJhf6ss6BSfSM671tgKyZBFPTTJM+HLxnhPC3wu0=
+go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
-golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
-golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/crypto v0.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
+golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de h1:5hukYrvBGR8/eNkX5mdUezrA6JiaEZDtJb9Ei+1LlBs=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
+golang.org/x/mod v0.16.0 h1:QX4fJ0Rr5cPQCF7O9lh9Se4pmwfwskqZfq5moyldzic=
+golang.org/x/mod v0.16.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.19.0 h1:fEdghXQSo20giMthA7cd28ZC+jts4amQ3YMXiP5oMQ8=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
-golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/oauth2 v0.21.0 h1:tsimM75w1tF/uws5rbeHzIWxEqElMehnc+iW793zsZs=
+golang.org/x/oauth2 v0.21.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.7.0 h1:YsImfSBoP9QPYL0xyKJPq0gcaJdG3rInoqxTWbfQu9M=
+golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
-golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/term v0.3.0/go.mod h1:q750SLmJuPmVoN1blW3UFBPREJfb1KmY3vwxfr+nFDA=
+golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
+golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
-golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
-golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.19.0 h1:tfGCXNR1OsFG+sVdLAitlpjAvD/I6dHDKnYrpEZUHkw=
+golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
+golang.org/x/tools v0.23.0 h1:SGsXPZ+2l4JsgaCKkx+FQ9YZ5XEtA1GZYuoDjenLjvg=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+modernc.org/cc/v4 v4.21.4 h1:3Be/Rdo1fpr8GrQ7IVw9OHtplU4gWbb+wNgeoBMmGLQ=
+modernc.org/cc/v4 v4.21.4/go.mod h1:HM7VJTZbUCR3rV8EYBi9wxnJ0ZBRiGE5OeGXNA0IsLQ=
+modernc.org/ccgo/v4 v4.19.2 h1:lwQZgvboKD0jBwdaeVCTouxhxAyN6iawF3STraAal8Y=
+modernc.org/ccgo/v4 v4.19.2/go.mod h1:ysS3mxiMV38XGRTTcgo0DQTeTmAO4oCmJl1nX9VFI3s=
+modernc.org/ccgo/v4 v4.20.5 h1:s04akhT2dysD0DFOlv9fkQ6oUTLPYgMnnDk9oaqjszM=
+modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
+modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
+modernc.org/gc/v2 v2.4.1 h1:9cNzOqPyMJBvrUipmynX0ZohMhcxPtMccYgGOJdOiBw=
+modernc.org/gc/v2 v2.4.1/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
+modernc.org/gc/v2 v2.4.3 h1:Ik4ZcMbC7aY4ZDPUhzXVXi7GMub9QcXLTfXn3mWpNw8=
+modernc.org/gc/v3 v3.0.0-20240722195230-4a140ff9c08e h1:WPC4v0rNIFb2PY+nBBEEKyugPPRHPzUgyN3xZPpGK58=
+modernc.org/gc/v3 v3.0.0-20240722195230-4a140ff9c08e/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
+modernc.org/libc v1.55.3 h1:AzcW1mhlPNrRtjS5sS+eW2ISCgSOLLNyFzRh/V3Qj/U=
+modernc.org/libc v1.55.3/go.mod h1:qFXepLhz+JjFThQ4kzwzOjA/y/artDeg+pcYnY+Q83w=
+modernc.org/libc v1.55.7 h1:/5PMGAF3tyZhK72WpoqeLNtgUUpYMrnhT+Gm/5tVDgs=
+modernc.org/libc v1.55.7/go.mod h1:JXguUpMkbw1gknxspNE9XaG+kk9hDAAnBxpA6KGLiyA=
+modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
+modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
+modernc.org/memory v1.8.0 h1:IqGTL6eFMaDZZhEWwcREgeMXYwmW83LYW8cROZYkg+E=
+modernc.org/memory v1.8.0/go.mod h1:XPZ936zp5OMKGWPqbD3JShgd/ZoQ7899TUuQqxY+peU=
+modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
+modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
+modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
+modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
+modernc.org/sqlite v1.31.1 h1:XVU0VyzxrYHlBhIs1DiEgSl0ZtdnPtbLVy8hSkzxGrs=
+modernc.org/sqlite v1.31.1/go.mod h1:UqoylwmTb9F+IqXERT8bW9zzOWN8qwAIcLdzeBZs4hA=
+modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
+modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=

main.go

@@ -5,45 +5,102 @@ import (
 	"flag"
 	"io/fs"
 	"log"
+	"os"
+	"runtime"
 
 	"github.com/marcopeocchi/yt-dlp-web-ui/server"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/openid"
 )
 
 var (
-	port           int
-	downloadPath   string
-	downloaderPath string
-	configFile     string
+	host              string
+	port              int
+	queueSize         int
+	configFile        string
+	downloadPath      string
+	downloaderPath    string
+	sessionFilePath   string
+	localDatabasePath string
 
-	//go:embed frontend/dist
+	requireAuth bool
+	username    string
+	password    string
+
+	userFromEnv = os.Getenv("USERNAME")
+	passFromEnv = os.Getenv("PASSWORD")
+
+	logFile           string
+	enableFileLogging bool
+
+	//go:embed frontend/dist/index.html
+	//go:embed frontend/dist/assets/*
 	frontend embed.FS
+
+	//go:embed openapi/*
+	swagger embed.FS
 )
 
 func init() {
+	flag.StringVar(&host, "host", "0.0.0.0", "Host where server will listen at")
 	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
-	flag.StringVar(&downloadPath, "out", ".", "Directory where files will be saved")
+	flag.IntVar(&queueSize, "qs", 2, "Queue size (concurrent downloads)")
+
+	flag.StringVar(&configFile, "conf", "./config.yml", "Config file path")
+	flag.StringVar(&downloadPath, "out", ".", "Where files will be saved")
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
-	flag.StringVar(&configFile, "conf", "", "yt-dlp-WebUI config file path")
+	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
+	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")
+
+	flag.BoolVar(&enableFileLogging, "fl", false, "enable outputting logs to a file")
+	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
+
+	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
+	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
+	flag.StringVar(&password, "pass", passFromEnv, "Password required for auth")
+
 	flag.Parse()
 }
 
 func main() {
 	frontend, err := fs.Sub(frontend, "frontend/dist")
-
 	if err != nil {
 		log.Fatalln(err)
 	}
 
-	cfg := config.Instance()
+	c := config.Instance()
 
-	if configFile != "" {
-		cfg.LoadFromFile(configFile)
+	c.Host = host
+	c.Port = port
+	c.QueueSize = queueSize
+	c.DownloadPath = downloadPath
+	c.DownloaderPath = downloaderPath
+	c.SessionFilePath = sessionFilePath
+
+	c.RequireAuth = requireAuth
+	c.Username = username
+	c.Password = password
+
+	// limit concurrent downloads for systems with 2 or less logical cores
+	if runtime.NumCPU() <= 2 {
+		c.QueueSize = 1
 	}
 
-	cfg.SetPort(port)
-	cfg.DownloadPath(downloadPath)
-	cfg.DownloaderPath(downloaderPath)
+	// if config file is found it will be merged with the current config struct
+	if err := c.LoadFile(configFile); err != nil {
+		log.Println(cli.BgRed, "config", cli.Reset, err)
+	}
 
-	server.RunBlocking(port, frontend)
+	openid.Configure()
+
+	server.RunBlocking(&server.RunConfig{
+		Host:        c.Host,
+		Port:        c.Port,
+		DBPath:      localDatabasePath,
+		FileLogging: enableFileLogging,
+		LogFile:     logFile,
+		App:         frontend,
+		Swagger:     swagger,
+	})
 }

openapi/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="SwaggerUI" />
+  <title>SwaggerUI</title>
+  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.17.2/swagger-ui.css" />
+</head>
+
+<body>
+  <div id="swagger-ui"></div>
+  <script src="https://unpkg.com/swagger-ui-dist@5.17.2/swagger-ui-bundle.js" crossorigin></script>
+  <script>
+    window.onload = () => {
+      window.ui = SwaggerUIBundle({
+        url: './openapi.json',
+        dom_id: '#swagger-ui',
+      });
+    };
+  </script>
+</body>
+
+</html>

openapi/openapi.json

@@ -0,0 +1,273 @@
+{
+  "openapi": "3.1.0",
+  "info": {
+    "title": "Swagger yt-dlp-webui - OpenAPI 3.1",
+    "description": "yt-dlp-webui api based on the OpenAPI 3.1 specification.  You can find out more about\nSwagger at [https://swagger.io](https://swagger.io). \n\nSome useful links:\n- [yt-dlp-webui repository](https://github.com/marcopeocchi/yt-dlp-web-ui)",
+    "termsOfService": "http://swagger.io/terms/",
+    "contact": {
+      "email": "apiteam@swagger.io"
+    },
+    "license": {
+      "name": "Apache 2.0",
+      "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
+    },
+    "version": "1.0.11"
+  },
+  "externalDocs": {
+    "description": "Find out more about Swagger",
+    "url": "http://swagger.io"
+  },
+  "servers": [
+    {
+      "url": "/api/v1"
+    }
+  ],
+  "tags": [
+    {
+      "name": "download",
+      "description": "Everything about your Pets",
+      "externalDocs": {
+        "description": "Find out more",
+        "url": "https://github.com/marcopeocchi/yt-dlp-web-ui"
+      }
+    }
+  ],
+  "paths": {
+    "/exec": {
+      "post": {
+        "tags": [
+          "download"
+        ],
+        "summary": "Add a new download in the pending state ready to be processed",
+        "description": "Add a new download in the pending state ready to be processed",
+        "operationId": "addDownload",
+        "requestBody": {
+          "description": "Create a new download",
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/DownloadRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful operation",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "string",
+                  "description": "Process uuid"
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input"
+          },
+          "422": {
+            "description": "Validation exception"
+          }
+        },
+        "security": [
+          {
+            "api_key": [
+              "write:download",
+              "read:download"
+            ]
+          }
+        ]
+      }
+    },
+    "/running": {
+      "get": {
+        "tags": [
+          "download"
+        ],
+        "summary": "Returns all running and pending process",
+        "description": "Returns all running and pending process",
+        "operationId": "running",
+        "responses": {
+          "200": {
+            "description": "Successful operation",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProcessResponse"
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input"
+          },
+          "422": {
+            "description": "Validation exception"
+          }
+        },
+        "security": [
+          {
+            "api_key": [
+              "write:download",
+              "read:download"
+            ]
+          }
+        ]
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "DownloadRequest": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "examples": [
+              "https://..."
+            ]
+          },
+          "params": {
+            "type": "array",
+            "format": "string",
+            "examples": [
+              "-N",
+              "4",
+              "-R",
+              "infinite"
+            ]
+          }
+        }
+      },
+      "DownloadResponse": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "examples": [
+              "https://..."
+            ]
+          },
+          "params": {
+            "type": "array",
+            "format": "string",
+            "examples": [
+              "-N",
+              "4",
+              "-R",
+              "infinite"
+            ]
+          }
+        }
+      },
+      "DownloadProgress": {
+        "type": "object",
+        "properties": {
+          "process_status": {
+            "type": "integer",
+            "examples": [
+              0,
+              1,
+              2,
+              3
+            ]
+          },
+          "percentage": {
+            "type": "string",
+            "examples": [
+              "50%"
+            ]
+          },
+          "speed": {
+            "type": "integer",
+            "examples": [
+              7289347
+            ]
+          },
+          "eta": {
+            "type": "integer",
+            "examples": [
+              3600
+            ]
+          }
+        }
+      },
+      "DownloadInfo": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "thumbnail": {
+            "type": "string"
+          },
+          "resolution": {
+            "type": "string"
+          },
+          "size": {
+            "type": "integer"
+          },
+          "vcodec": {
+            "type": "string"
+          },
+          "acodec": {
+            "type": "string"
+          },
+          "extension": {
+            "type": "string"
+          },
+          "original_url": {
+            "type": "string"
+          },
+          "created_at": {
+            "type": "object"
+          }
+        }
+      },
+      "DownloadOutput": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "filename": {
+            "type": "string"
+          },
+          "saveFilePath": {
+            "type": "string"
+          }
+        }
+      },
+      "ProcessResponse": {
+        "type": "object",
+        "properties": {
+          "progress": {
+            "$ref": "#/components/schemas/DownloadProgress"
+          },
+          "info": {
+            "$ref": "#/components/schemas/DownloadInfo"
+          },
+          "output": {
+            "$ref": "#/components/schemas/DownloadOutput"
+          },
+          "params": {
+            "type": "array",
+            "format": "string"
+          }
+        }
+      }
+    },
+    "securitySchemes": {
+      "api_key": {
+        "type": "apiKey",
+        "name": "api_key",
+        "in": "header"
+      }
+    }
+  }
+}

proto/yt-dlp.proto

@@ -0,0 +1,65 @@
+syntax = "proto3";
+
+message Empty {}
+
+message BaseRequest {
+  string id = 1;
+  string url = 2;
+}
+
+message DownloadRequest {
+  string id = 1;
+  string url = 2;
+  string path = 3;
+  string rename = 4;
+  repeated string params = 5;
+}
+
+message ExecResponse {
+  string id = 1;
+}
+
+message DownloadProgress {
+  int32 status = 1;
+  string percentage = 2;
+  float speed = 3;
+  float eta = 4;
+}
+
+message DownloadInfo {
+  string url = 1;
+  string title = 2;
+  string thumbnail = 3;
+  string resolution = 4;
+  int32  size = 5;
+  string vcodec = 6;
+  string acodec = 7;
+  string extension = 8;
+  string originalURL = 9;
+  string createdAt = 10;
+}
+
+message DownloadOutput {
+  string path = 1;
+  string filename = 2;
+  string savedFilePath = 3;
+}
+
+message ProcessResponse {
+  string id = 1;
+  DownloadProgress progress = 2;
+  DownloadInfo info = 3;
+  DownloadOutput output = 4;
+  repeated string params = 5;
+}
+
+service Ytdlp {
+  rpc Exec (DownloadRequest) returns (ExecResponse);
+  rpc ExecPlaylist (DownloadRequest) returns (ExecResponse);
+
+  rpc Progress (BaseRequest) returns (DownloadProgress);
+  rpc Running (Empty) returns (stream ProcessResponse);
+
+  rpc Kill (BaseRequest) returns (ExecResponse);
+  rpc KillAll (Empty) returns (stream ExecResponse);
+}

server/cli/ascii.go

@@ -1,7 +1,5 @@
 package cli
 
-import "fmt"
-
 const (
 	// FG
 	Red     = "\033[31m"
@@ -12,12 +10,8 @@ const (
 	Cyan    = "\033[36m"
 	Reset   = "\033[0m"
 	// BG
-	BgRed   = "\033[1;41m"
-	BgBlue  = "\033[1;44m"
-	BgGreen = "\033[1;42m"
+	BgRed     = "\033[1;41m"
+	BgBlue    = "\033[1;44m"
+	BgGreen   = "\033[1;42m"
+	BgMagenta = "\033[1;45m"
 )
-
-// Formats a message with the specified ascii escape code, then reset.
-func Format(message string, code string) string {
-	return fmt.Sprintf("%s%s%s", code, message, Reset)
-}

server/config/config.go

@@ -0,0 +1,67 @@
+package config
+
+import (
+	"os"
+	"path/filepath"
+	"sync"
+
+	"gopkg.in/yaml.v3"
+)
+
+type Config struct {
+	CurrentLogFile  string
+	LogPath         string `yaml:"log_path"`
+	BaseURL         string `yaml:"base_url"`
+	Host            string `yaml:"host"`
+	Port            int    `yaml:"port"`
+	DownloadPath    string `yaml:"downloadPath"`
+	DownloaderPath  string `yaml:"downloaderPath"`
+	RequireAuth     bool   `yaml:"require_auth"`
+	Username        string `yaml:"username"`
+	Password        string `yaml:"password"`
+	QueueSize       int    `yaml:"queue_size"`
+	SessionFilePath string `yaml:"session_file_path"`
+	path            string
+
+	UseOpenId          bool   `yaml:"use_openid"`
+	OpenIdProviderURL  string `yaml:"openid_provider_url"`
+	OpenIdClientId     string `yaml:"openid_client_id"`
+	OpenIdClientSecret string `yaml:"openid_client_secret"`
+	OpenIdRedirectURL  string `yaml:"openid_redirect_url"`
+}
+
+var (
+	instance     *Config
+	instanceOnce sync.Once
+)
+
+func Instance() *Config {
+	if instance == nil {
+		instanceOnce.Do(func() {
+			instance = &Config{}
+		})
+	}
+	return instance
+}
+
+// Initialises the Config struct given its config file
+func (c *Config) LoadFile(filename string) error {
+	fd, err := os.Open(filename)
+	if err != nil {
+		return err
+	}
+
+	c.path = filename
+
+	if err := yaml.NewDecoder(fd).Decode(c); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// Path of the directory containing the config file
+func (c *Config) Dir() string { return filepath.Dir(c.path) }
+
+// Absolute path of the config file
+func (c *Config) Path() string { return c.path }

server/config/parser.go

@@ -1,60 +0,0 @@
-package config
-
-import (
-	"os"
-	"sync"
-
-	"gopkg.in/yaml.v3"
-)
-
-var lock = &sync.Mutex{}
-
-type serverConfig struct {
-	Port           int    `yaml:"port"`
-	DownloadPath   string `yaml:"downloadPath"`
-	DownloaderPath string `yaml:"downloaderPath"`
-}
-
-type config struct {
-	cfg serverConfig
-}
-
-func (c *config) LoadFromFile(filename string) (serverConfig, error) {
-	bytes, err := os.ReadFile(filename)
-	if err != nil {
-		return serverConfig{}, err
-	}
-
-	yaml.Unmarshal(bytes, &c.cfg)
-
-	return c.cfg, nil
-}
-
-func (c *config) GetConfig() serverConfig {
-	return c.cfg
-}
-
-func (c *config) SetPort(port int) {
-	c.cfg.Port = port
-}
-
-func (c *config) DownloadPath(path string) {
-	c.cfg.DownloadPath = path
-}
-
-func (c *config) DownloaderPath(path string) {
-	c.cfg.DownloaderPath = path
-}
-
-var instance *config
-
-func Instance() *config {
-	if instance == nil {
-		lock.Lock()
-		defer lock.Unlock()
-		if instance == nil {
-			instance = &config{serverConfig{}}
-		}
-	}
-	return instance
-}

server/dbutil/migrate.go

@@ -0,0 +1,58 @@
+package dbutil
+
+import (
+	"context"
+	"database/sql"
+	"os"
+	"path/filepath"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+var lockFilePath = filepath.Join(config.Instance().Dir(), ".db.lock")
+
+// Run the table migration
+func Migrate(ctx context.Context, db *sql.DB) error {
+	conn, err := db.Conn(ctx)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		conn.Close()
+		createLockFile()
+	}()
+
+	if _, err := db.ExecContext(
+		ctx,
+		`CREATE TABLE IF NOT EXISTS templates (
+			id CHAR(36) PRIMARY KEY,
+			name VARCHAR(255) NOT NULL,
+			content TEXT NOT NULL
+		)`,
+	); err != nil {
+		return err
+	}
+
+	if lockFileExists() {
+		return nil
+	}
+
+	db.ExecContext(
+		ctx,
+		`INSERT INTO templates (id, name, content) VALUES
+			($1, $2, $3),
+			($4, $5, $6);`,
+		"0", "default", "--no-mtime",
+		"1", "audio only", "-x",
+	)
+
+	return nil
+}
+
+func createLockFile() { os.Create(lockFilePath) }
+
+func lockFileExists() bool {
+	_, err := os.Stat(lockFilePath)
+	return os.IsExist(err)
+}

server/handlers/archive.go

@@ -0,0 +1,252 @@
+package handlers
+
+import (
+	"archive/zip"
+	"encoding/base64"
+	"encoding/json"
+	"io"
+	"io/fs"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"regexp"
+	"slices"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+/*
+	File based operation handlers (should be moved to rest/handlers.go) or in
+	a entirely self-contained package
+*/
+
+var (
+	videoRe = regexp.MustCompile(`(?i)/\.mov|\.mp4|\.webm|\.mvk|/gmi`)
+)
+
+func isVideo(d fs.DirEntry) bool {
+	return videoRe.MatchString(d.Name())
+}
+
+func isValidEntry(d fs.DirEntry) bool {
+	return !strings.HasPrefix(d.Name(), ".") &&
+		!strings.HasSuffix(d.Name(), ".part") &&
+		!strings.HasSuffix(d.Name(), ".ytdl")
+}
+
+type DirectoryEntry struct {
+	Name        string    `json:"name"`
+	Path        string    `json:"path"`
+	Size        int64     `json:"size"`
+	ModTime     time.Time `json:"modTime"`
+	IsVideo     bool      `json:"isVideo"`
+	IsDirectory bool      `json:"isDirectory"`
+}
+
+func walkDir(root string) (*[]DirectoryEntry, error) {
+	dirs, err := os.ReadDir(root)
+	if err != nil {
+		return nil, err
+	}
+
+	var files []DirectoryEntry
+
+	for _, d := range dirs {
+		if !isValidEntry(d) {
+			continue
+		}
+
+		path := filepath.Join(root, d.Name())
+
+		info, err := d.Info()
+		if err != nil {
+			return nil, err
+		}
+
+		files = append(files, DirectoryEntry{
+			Path:        path,
+			Name:        d.Name(),
+			Size:        info.Size(),
+			IsVideo:     isVideo(d),
+			IsDirectory: d.IsDir(),
+			ModTime:     info.ModTime(),
+		})
+	}
+
+	return &files, err
+}
+
+type ListRequest struct {
+	SubDir  string `json:"subdir"`
+	OrderBy string `json:"orderBy"`
+}
+
+func ListDownloaded(w http.ResponseWriter, r *http.Request) {
+	root := config.Instance().DownloadPath
+	req := new(ListRequest)
+
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	files, err := walkDir(filepath.Join(root, req.SubDir))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	if req.OrderBy == "modtime" {
+		sort.SliceStable(*files, func(i, j int) bool {
+			return (*files)[i].ModTime.After((*files)[j].ModTime)
+		})
+	}
+
+	w.WriteHeader(http.StatusOK)
+
+	if err := json.NewEncoder(w).Encode(files); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
+type DeleteRequest = DirectoryEntry
+
+func DeleteFile(w http.ResponseWriter, r *http.Request) {
+	req := new(DeleteRequest)
+
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	if err := os.Remove(req.Path); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode("ok")
+}
+
+func SendFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	path, err := url.QueryUnescape(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	filename := string(decoded)
+
+	root := config.Instance().DownloadPath
+
+	// TODO: further path / file validations
+	if strings.Contains(filepath.Dir(filename), root) {
+		http.ServeFile(w, r, filename)
+		return
+	}
+
+	w.WriteHeader(http.StatusUnauthorized)
+}
+
+func DownloadFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	path, err := url.QueryUnescape(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	filename := string(decoded)
+
+	root := config.Instance().DownloadPath
+
+	if strings.Contains(filepath.Dir(filename), root) {
+		w.Header().Add("Content-Disposition", "inline; filename=\""+filepath.Base(filename)+"\"")
+		w.Header().Set("Content-Type", "application/octet-stream")
+
+		fd, err := os.Open(filename)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
+	}
+
+	w.WriteHeader(http.StatusUnauthorized)
+}
+
+func BulkDownload(mdb *internal.MemoryDB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		ps := slices.DeleteFunc(*mdb.All(), func(e internal.ProcessResponse) bool {
+			return e.Progress.Status != internal.StatusCompleted
+		})
+
+		if len(ps) == 0 {
+			return
+		}
+
+		zipWriter := zip.NewWriter(w)
+
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename=download-archive-"+time.Now().Format(time.RFC3339)+".zip",
+		)
+		w.Header().Set("Content-Type", "application/zip")
+
+		for _, p := range ps {
+			wr, err := zipWriter.Create(filepath.Base(p.Output.SavedFilePath))
+			if err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+
+			fd, err := os.Open(p.Output.SavedFilePath)
+			if err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+
+			if _, err := io.Copy(wr, fd); err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+		}
+
+		if err := zipWriter.Close(); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+}

server/handlers/login.go

@@ -0,0 +1,68 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+	"os"
+	"time"
+
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+const TOKEN_COOKIE_NAME = "jwt-yt-dlp-webui"
+
+type LoginRequest struct {
+	Username string `json:"username"`
+	Password string `json:"password"`
+}
+
+func Login(w http.ResponseWriter, r *http.Request) {
+	var req LoginRequest
+
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	var (
+		username = config.Instance().Username
+		password = config.Instance().Password
+	)
+
+	if username != req.Username || password != req.Password {
+		http.Error(w, "invalid username or password", http.StatusBadRequest)
+		return
+	}
+
+	expiresAt := time.Now().Add(time.Hour * 24 * 30)
+
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"expiresAt": expiresAt,
+		"username":  req.Username,
+	})
+
+	tokenString, err := token.SignedString([]byte(os.Getenv("JWT_SECRET")))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if err := json.NewEncoder(w).Encode(tokenString); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}
+
+func Logout(w http.ResponseWriter, r *http.Request) {
+	cookie := &http.Cookie{
+		Name:     TOKEN_COOKIE_NAME,
+		HttpOnly: true,
+		Secure:   false,
+		Expires:  time.Now(),
+		Value:    "",
+		Path:     "/",
+	}
+
+	http.SetCookie(w, cookie)
+}

server/internal/balancer.go

@@ -0,0 +1,34 @@
+package internal
+
+import (
+	"container/heap"
+)
+
+type LoadBalancer struct {
+	pool Pool
+	done chan *Worker
+}
+
+func (b *LoadBalancer) Balance(work chan Process) {
+	for {
+		select {
+		case req := <-work:
+			b.dispatch(req)
+		case w := <-b.done:
+			b.completed(w)
+		}
+	}
+}
+
+func (b *LoadBalancer) dispatch(req Process) {
+	w := heap.Pop(&b.pool).(*Worker)
+	w.requests <- req
+	w.pending++
+	heap.Push(&b.pool, w)
+}
+
+func (b *LoadBalancer) completed(w *Worker) {
+	w.pending--
+	heap.Remove(&b.pool, w.index)
+	heap.Push(&b.pool, w)
+}

server/internal/common_types.go

@@ -0,0 +1,103 @@
+package internal
+
+import "time"
+
+// Used to unmarshall yt-dlp progress
+type ProgressTemplate struct {
+	Percentage string  `json:"percentage"`
+	Speed      float32 `json:"speed"`
+	Size       string  `json:"size"`
+	Eta        float32 `json:"eta"`
+}
+
+// Defines where and how the download needs to be saved
+type DownloadOutput struct {
+	Path          string
+	Filename      string
+	SavedFilePath string `json:"savedFilePath"`
+}
+
+// Progress for the Running call
+type DownloadProgress struct {
+	Status     int     `json:"process_status"`
+	Percentage string  `json:"percentage"`
+	Speed      float32 `json:"speed"`
+	ETA        float32 `json:"eta"`
+}
+
+// Used to deser the yt-dlp -J output
+type DownloadInfo struct {
+	URL         string    `json:"url"`
+	Title       string    `json:"title"`
+	Thumbnail   string    `json:"thumbnail"`
+	Resolution  string    `json:"resolution"`
+	Size        int32     `json:"filesize_approx"`
+	VCodec      string    `json:"vcodec"`
+	ACodec      string    `json:"acodec"`
+	Extension   string    `json:"ext"`
+	OriginalURL string    `json:"original_url"`
+	FileName    string    `json:"filename"`
+	CreatedAt   time.Time `json:"created_at"`
+}
+
+// Used to deser the formats in the -J output
+type DownloadFormats struct {
+	Formats   []Format `json:"formats"`
+	Best      Format   `json:"best"`
+	Thumbnail string   `json:"thumbnail"`
+	Title     string   `json:"title"`
+	URL       string   `json:"url"`
+}
+
+// A skimmed yt-dlp format node
+type Format struct {
+	Format_id   string  `json:"format_id"`
+	Format_note string  `json:"format_note"`
+	FPS         float32 `json:"fps"`
+	Resolution  string  `json:"resolution"`
+	VCodec      string  `json:"vcodec"`
+	ACodec      string  `json:"acodec"`
+	Size        float32 `json:"filesize_approx"`
+}
+
+// struct representing the response sent to the client
+// as JSON-RPC result field
+type ProcessResponse struct {
+	Id       string           `json:"id"`
+	Progress DownloadProgress `json:"progress"`
+	Info     DownloadInfo     `json:"info"`
+	Output   DownloadOutput   `json:"output"`
+	Params   []string         `json:"params"`
+}
+
+// struct representing the current status of the memoryDB
+// used for serializaton/persistence reasons
+type Session struct {
+	Processes []ProcessResponse `json:"processes"`
+}
+
+// struct representing the intent to stop a specific process
+type AbortRequest struct {
+	Id string `json:"id"`
+}
+
+// struct representing the intent to start a download
+type DownloadRequest struct {
+	Id     string
+	URL    string   `json:"url"`
+	Path   string   `json:"path"`
+	Rename string   `json:"rename"`
+	Params []string `json:"params"`
+}
+
+// struct representing request of creating a netscape cookies file
+type SetCookiesRequest struct {
+	Cookies string `json:"cookies"`
+}
+
+// represents a user defined collection of yt-dlp arguments
+type CustomTemplate struct {
+	Id      string `json:"id"`
+	Name    string `json:"name"`
+	Content string `json:"content"`
+}

server/internal/memory_db.go

@@ -0,0 +1,124 @@
+package internal
+
+import (
+	"encoding/gob"
+	"errors"
+	"log/slog"
+	"os"
+	"path/filepath"
+	"sync"
+
+	"github.com/google/uuid"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+// In-Memory Thread-Safe Key-Value Storage with optional persistence
+type MemoryDB struct {
+	table sync.Map
+}
+
+// Get a process pointer given its id
+func (m *MemoryDB) Get(id string) (*Process, error) {
+	entry, ok := m.table.Load(id)
+	if !ok {
+		return nil, errors.New("no process found for the given key")
+	}
+
+	return entry.(*Process), nil
+}
+
+// Store a pointer of a process and return its id
+func (m *MemoryDB) Set(process *Process) string {
+	id := uuid.NewString()
+
+	m.table.Store(id, process)
+	process.Id = id
+
+	return id
+}
+
+// Removes a process progress, given the process id
+func (m *MemoryDB) Delete(id string) {
+	m.table.Delete(id)
+}
+
+func (m *MemoryDB) Keys() *[]string {
+	var running []string
+
+	m.table.Range(func(key, value any) bool {
+		running = append(running, key.(string))
+		return true
+	})
+
+	return &running
+}
+
+// Returns a slice of all currently stored processes progess
+func (m *MemoryDB) All() *[]ProcessResponse {
+	running := []ProcessResponse{}
+
+	m.table.Range(func(key, value any) bool {
+		running = append(running, ProcessResponse{
+			Id:       key.(string),
+			Info:     value.(*Process).Info,
+			Progress: value.(*Process).Progress,
+			Output:   value.(*Process).Output,
+			Params:   value.(*Process).Params,
+		})
+		return true
+	})
+
+	return &running
+}
+
+// Persist the database in a single file named "session.dat"
+func (m *MemoryDB) Persist() error {
+	running := m.All()
+
+	sf := filepath.Join(config.Instance().SessionFilePath, "session.dat")
+
+	fd, err := os.Create(sf)
+	if err != nil {
+		return errors.Join(errors.New("failed to persist session"), err)
+	}
+
+	session := Session{Processes: *running}
+
+	if err := gob.NewEncoder(fd).Encode(session); err != nil {
+		return errors.Join(errors.New("failed to persist session"), err)
+	}
+
+	return nil
+}
+
+// Restore a persisted state
+func (m *MemoryDB) Restore(mq *MessageQueue, logger *slog.Logger) {
+	fd, err := os.Open("session.dat")
+	if err != nil {
+		return
+	}
+
+	var session Session
+
+	if err := gob.NewDecoder(fd).Decode(&session); err != nil {
+		return
+	}
+
+	for _, proc := range session.Processes {
+		restored := &Process{
+			Id:       proc.Id,
+			Url:      proc.Info.URL,
+			Info:     proc.Info,
+			Progress: proc.Progress,
+			Output:   proc.Output,
+			Params:   proc.Params,
+			Logger:   logger,
+		}
+
+		m.table.Store(proc.Id, restored)
+
+		if restored.Progress.Status != StatusCompleted {
+			mq.Publish(restored)
+		}
+	}
+}

server/internal/message_queue.go

@@ -0,0 +1,112 @@
+package internal
+
+import (
+	"context"
+	"errors"
+	"log/slog"
+
+	evbus "github.com/asaskevich/EventBus"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"golang.org/x/sync/semaphore"
+)
+
+const queueName = "process:pending"
+
+type MessageQueue struct {
+	concurrency int
+	eventBus    evbus.Bus
+	logger      *slog.Logger
+}
+
+// Creates a new message queue.
+// By default it will be created with a size equals to nthe number of logical
+// CPU cores -1.
+// The queue size can be set via the qs flag.
+func NewMessageQueue(l *slog.Logger) (*MessageQueue, error) {
+	qs := config.Instance().QueueSize
+
+	if qs <= 0 {
+		return nil, errors.New("invalid queue size")
+	}
+
+	return &MessageQueue{
+		concurrency: qs,
+		eventBus:    evbus.New(),
+		logger:      l,
+	}, nil
+}
+
+// Publish a message to the queue and set the task to a peding state.
+func (m *MessageQueue) Publish(p *Process) {
+	// needs to have an id set before
+	p.SetPending()
+
+	m.eventBus.Publish(queueName, p)
+}
+
+func (m *MessageQueue) SetupConsumers() {
+	go m.downloadConsumer()
+	go m.metadataSubscriber()
+}
+
+// Setup the consumer listener which subscribes to the changes to the producer
+// channel and triggers the "download" action.
+func (m *MessageQueue) downloadConsumer() {
+	sem := semaphore.NewWeighted(int64(m.concurrency))
+
+	m.eventBus.SubscribeAsync(queueName, func(p *Process) {
+		//TODO: provide valid context
+		sem.Acquire(context.Background(), 1)
+		defer sem.Release(1)
+
+		m.logger.Info("received process from event bus",
+			slog.String("bus", queueName),
+			slog.String("consumer", "downloadConsumer"),
+			slog.String("id", p.getShortId()),
+		)
+
+		if p.Progress.Status != StatusCompleted {
+			p.Start()
+		}
+
+		m.logger.Info("started process",
+			slog.String("bus", queueName),
+			slog.String("id", p.getShortId()),
+		)
+	}, false)
+}
+
+// Setup the metadata consumer listener which subscribes to the changes to the
+// producer channel and adds metadata to each download.
+func (m *MessageQueue) metadataSubscriber() {
+	// How many concurrent metadata fetcher jobs are spawned
+	// Since there's ongoing downloads, 1 job at time seems a good compromise
+	sem := semaphore.NewWeighted(1)
+
+	m.eventBus.SubscribeAsync(queueName, func(p *Process) {
+		//TODO: provide valid context
+		sem.Acquire(context.TODO(), 1)
+		defer sem.Release(1)
+
+		m.logger.Info("received process from event bus",
+			slog.String("bus", queueName),
+			slog.String("consumer", "metadataConsumer"),
+			slog.String("id", p.getShortId()),
+		)
+
+		if p.Progress.Status == StatusCompleted {
+			m.logger.Warn("proccess has an illegal state",
+				slog.String("id", p.getShortId()),
+				slog.Int("status", p.Progress.Status),
+			)
+			return
+		}
+
+		if err := p.SetMetadata(); err != nil {
+			m.logger.Error("failed to retrieve metadata",
+				slog.String("id", p.getShortId()),
+				slog.String("err", err.Error()),
+			)
+		}
+	}, false)
+}