added "language" to the Format struct (#194)

* add Nix support

* fix formatter output

* mention Nix in README

* fix common import

* fix frontend old version import

* clarified flake pkgs order

* rm old dataDir option

* comment typo

* fix password assertion

* rm old User/Group logic

* rewrite assertion boolean expr

* General flake touchup

- Rewrite `callPackage` exprs to be more readable
- Add pre-commit support for devShell
- Add direnv support

* add simple test

* use correct test func

.dockerignore

@@ -1,18 +0,0 @@
-dist
-package-lock.json
-pnpm-lock.yaml
-.pnpm-debug.log
-node_modules
-.env
-*.mp4
-*.ytdl
-*.part
-*.db
-downloads
-.DS_Store
-build/
-yt-dlp-webui
-session.dat
-config.yml
-cookies.txt
-examples/

.envrc

@@ -0,0 +1 @@
+use flake

.gitattributes

@@ -0,0 +1,2 @@
+*.tsx linguist-detectable=false
+*.html linguist-detectable=false

.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-publish.yml

@@ -25,7 +25,7 @@ jobs:
         # v3.1.2
         uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
         with:
-          cosign-release: 'v1.13.1'
+          cosign-release: 'v1.13.6'
 
       - name: Set up QEMU for ARM emulation
         # v2.2.0
@@ -68,7 +68,7 @@ jobs:
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64
+          platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels}}
 

.gitignore

@@ -1,6 +1,8 @@
+.pre-commit-config.yaml
+.direnv/
+result/
+result
 dist
-package-lock.json
-pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
 .env
@@ -15,3 +17,11 @@ 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
+livestreams.dat

Dockerfile

@@ -1,30 +1,42 @@
-FROM golang:alpine AS build
-
-RUN apk update && \
-    apk add nodejs npm
-
+# 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
 
 WORKDIR /usr/src/yt-dlp-webui/frontend
 
-RUN npm install
-RUN npm run build
+RUN rm -rf node_modules
+
+RUN pnpm install
+RUN pnpm run build
+# -----------------------------------------------------------------------------
+
+# Go --------------------------------------------------------------------------
+FROM golang AS build
 
 WORKDIR /usr/src/yt-dlp-webui
-RUN CGO_ENABLED=0 GOOS=linux go build -o 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
 
+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 --no-cache
-
 COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 
 ENV JWT_SECRET=secret
 
 EXPOSE 3033
-ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

Makefile

@@ -1,15 +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:
+	$(MAKE) fe
 	mkdir -p build
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o build/yt-dlp-webui_linux-arm 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 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

@@ -3,12 +3,6 @@
 A not so terrible web ui for yt-dlp.  
 Created for the only purpose of *fetching* videos from my server/nas. 
 
-Intended to be used with docker and in standalone mode. 😎👍
-
-Developed to be as lightweight as possible (because my server is basically an intel atom sbc). 
-
-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
@@ -17,45 +11,10 @@ docker pull marcobaobao/yt-dlp-webui
 ```sh
 # latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest stable version
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
 
-![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
-```
-05/03/22: Korean translation by kimpig
-
-03/03/22: cut-down image size by switching to Alpine linux based container
-
-01/03/22: Chinese translation by deluxghost
-
-03/02/22: i18n enabled! I need help with the translations :/
-
-27/01/22: Multidownload implemented!
-
-26/01/22: Multiple downloads are being implemented. Maybe by next release they will be there.
-Refactoring and JSDoc.
-
-04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature.
-
-05/05/22: Material UI update.
-
-03/06/22: The most requested feature finally implemented: Format Selection!!
-
-08/06/22: ARM builds.
-
-28/06/22: Reworked resume download feature. Now it's pratically instantaneous. It no longer stops and restarts each process, references to each process are saved in memory.
-
-12/01/23: Switched from TypeScript to Golang on the backend. It was a great effort but it was worth it.
-```
+## Video showcase
+[app.webm](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
 
 ## Settings
 
@@ -70,34 +29,14 @@ The currently avaible settings are:
 -   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~~ *done*
--   ~~ARM Build~~ *done available through ghcr.io*
--   Playlist support
-
-## 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).
--   **The download  doesn't start.**
-    - 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](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) run
 ```sh
-# recomended for ARM and x86 devices 
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```
@@ -140,6 +79,20 @@ docker run -d \
     --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
 
 ```sh
@@ -167,10 +120,12 @@ Usage yt-dlp-webui:
         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)
+        Download queue size (defaults to the number of logical CPU. A min of 2 is recomended.)
   -user string
         Username required for auth
   -pass string
@@ -180,21 +135,37 @@ Usage yt-dlp-webui:
 ### 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**.
+With Docker, inside the mounted `/conf` volume inside there must be a file named `config.yml`.
 
 ```yaml
 # Simple configuration file for yt-dlp webui
 
 ---
-port: 8989
-downloadPath: /home/ren/archive
-downloaderPath: /usr/local/bin/yt-dlp
+# Host where server will listen at (default: "0.0.0.0")
+#host: 0.0.0.0
 
-# Optional settings
+# 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
@@ -217,6 +188,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
@@ -228,6 +222,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?
@@ -236,24 +233,17 @@ Want to build your own frontend? We got you covered 🤠
 `yt-dlp-webui` now exposes a nice **JSON-RPC 1.0** interface through Websockets and HTTP-POST
 It is **planned** to also expose a **gRPC** server.
 
-Just as an overview, these are the available methods:
--   Service.Exec
--   Service.Progress
--   Service.Formats
--   Service.Pending
--   Service.Running
--   Service.Kill
--   Service.KillAll
--   Service.Clear
-
 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 cross platform :)
-      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.
-    - **Update**: Since Golang migration and Multi-Stage builds the Docker image is now 75MB circa. A reduction of over 400% in size :D.
+## Nix
+This repo adds support for Nix(OS) in various ways through a `flake-parts` flake. 
+For more info, please refer to the [official documentation](https://nixos.org/learn/).
+
 ## 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.
+
+## 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).
+-   **The download  doesn't start.**
+    - 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-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

flake.lock

@@ -0,0 +1,149 @@
+{
+  "nodes": {
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1696426674,
+        "narHash": "sha256-kvjfFW7WAETZlt09AgDn1MrtKzP7t90Vf7vypd3OL1U=",
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "flake-parts": {
+      "inputs": {
+        "nixpkgs-lib": "nixpkgs-lib"
+      },
+      "locked": {
+        "lastModified": 1722555600,
+        "narHash": "sha256-XOQkdLafnb/p9ij77byFQjDf5m5QYl9b2REiVClC+x4=",
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "rev": "8471fe90ad337a8074e957b69ca4d0089218391d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "type": "github"
+      }
+    },
+    "gitignore": {
+      "inputs": {
+        "nixpkgs": [
+          "pre-commit-hooks-nix",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1709087332,
+        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1723637854,
+        "narHash": "sha256-med8+5DSWa2UnOqtdICndjDAEjxr5D7zaIiK4pn0Q7c=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "c3aa7b8938b17aebd2deecf7be0636000d62a2b9",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-lib": {
+      "locked": {
+        "lastModified": 1722555339,
+        "narHash": "sha256-uFf2QeW7eAHlYXuDktm9c25OxOyCoUOQmh5SZ9amE5Q=",
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
+      }
+    },
+    "nixpkgs-stable": {
+      "locked": {
+        "lastModified": 1720386169,
+        "narHash": "sha256-NGKVY4PjzwAa4upkGtAMz1npHGoRzWotlSnVlqI40mo=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "194846768975b7ad2c4988bdb82572c00222c0d7",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-24.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1719082008,
+        "narHash": "sha256-jHJSUH619zBQ6WdC21fFAlDxHErKVDJ5fpN0Hgx4sjs=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "9693852a2070b398ee123a329e68f0dab5526681",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "pre-commit-hooks-nix": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "gitignore": "gitignore",
+        "nixpkgs": "nixpkgs_2",
+        "nixpkgs-stable": "nixpkgs-stable"
+      },
+      "locked": {
+        "lastModified": 1723803910,
+        "narHash": "sha256-yezvUuFiEnCFbGuwj/bQcqg7RykIEqudOy/RBrId0pc=",
+        "owner": "cachix",
+        "repo": "pre-commit-hooks.nix",
+        "rev": "bfef0ada09e2c8ac55bbcd0831bd0c9d42e651ba",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "repo": "pre-commit-hooks.nix",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-parts": "flake-parts",
+        "nixpkgs": "nixpkgs",
+        "pre-commit-hooks-nix": "pre-commit-hooks-nix"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,51 @@
+{
+  description = "A terrible web ui for yt-dlp. Designed to be self-hosted.";
+
+  inputs = {
+    flake-parts.url = "github:hercules-ci/flake-parts";
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    pre-commit-hooks-nix.url = "github:cachix/pre-commit-hooks.nix";
+  };
+
+  outputs = inputs@{ self, flake-parts, ... }:
+    flake-parts.lib.mkFlake { inherit inputs; } {
+      imports = [
+        inputs.pre-commit-hooks-nix.flakeModule
+      ];
+      systems = [
+        "x86_64-linux"
+      ];
+      perSystem = { config, self', pkgs, ... }: {
+
+        packages = {
+          yt-dlp-web-ui-frontend = pkgs.callPackage ./nix/frontend.nix { };
+          default = pkgs.callPackage ./nix/server.nix {
+            inherit (self'.packages) yt-dlp-web-ui-frontend;
+          };
+        };
+
+        checks = import ./nix/tests { inherit self pkgs; };
+
+        pre-commit = {
+          check.enable = true;
+          settings = {
+            hooks = {
+              ${self'.formatter.pname}.enable = true;
+              deadnix.enable = true;
+              nil.enable = true;
+              statix.enable = true;
+            };
+          };
+        };
+
+        devShells.default = pkgs.callPackage ./nix/devShell.nix {
+          inputsFrom = [ config.pre-commit.devShell ];
+        };
+
+        formatter = pkgs.nixpkgs-fmt;
+      };
+      flake = {
+        nixosModules.default = import ./nix/module.nix self.packages;
+      };
+    };
+}

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.10.0",
+  "version": "3.2.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.1",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.6",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "fp-ts": "^2.16.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.17.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.8.7",
-    "@types/react": "^18.2.29",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-helmet": "^6.1.8",
+    "@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",
-    "@vitejs/plugin-react-swc": "^3.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "million": "^3.1.11",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   }
 }

frontend/src/Layout.tsx

@@ -1,10 +1,11 @@
 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 DownloadIcon from '@mui/icons-material/Download'
+import LiveTvIcon from '@mui/icons-material/LiveTv'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
-import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+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'
@@ -17,24 +18,22 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
 import { useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
-import { connectedState } from './atoms/status'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
-import FreeSpaceIndicator from './components/FreeSpaceIndicator'
+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 isConnected = useRecoilValue(connectedState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -50,124 +49,136 @@ export default function Layout() {
 
   const toggleDrawer = () => setOpen(state => !state)
 
+  const { i18n } = useI18n()
+
   return (
     <ThemeProvider theme={theme}>
-      <SocketSubscriber>
-        <Helmet>
-          <title>
-            {settings.appTitle}
-          </title>
-        </Helmet>
-        <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>
-              <FreeSpaceIndicator />
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-              }}>
-                <SettingsEthernet />
-                <span>
-                  &nbsp;{isConnected ? settings.serverAddr : 'not connected'}
-                </span>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <Drawer variant="permanent" open={open}>
-            <Toolbar
+      <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={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                px: [1],
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
               }}
             >
-              <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="Home" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/archive'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <DownloadIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Archive" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/settings'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Settings" />
-                </ListItemButton>
-              </Link>
-              <ThemeToggler />
-              <Logout />
-            </List>
-          </Drawer>
-          <Box
-            component="main"
+              <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={{
-              flexGrow: 1,
-              height: '100vh',
-              overflow: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
             }}
           >
-            <Toolbar />
-            <Outlet />
-          </Box>
+            <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={'/monitor'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <LiveTvIcon />
+                </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>
-        <Toaster />
-      </SocketSubscriber>
+      </Box>
+      <Footer />
+      <Toaster />
     </ThemeProvider>
   )
 }

frontend/src/assets/i18n.yaml

@@ -1,7 +1,7 @@
 ---
 languages:
   english:
-    urlInput: Video URL
+    urlInput: Video URL (one per line)
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -24,9 +24,9 @@ languages:
     overridesAnchor: Overrides
     pathOverrideOption: Enable output path overriding
     filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
+    customFilename: Custom filename (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
@@ -34,12 +34,98 @@ languages:
     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 subfolder
+    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.
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
+  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 filename (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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -75,13 +161,36 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   italian:
-    urlInput: URL Video
+    urlInput: URL Video (uno per linea)
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -103,7 +212,7 @@ languages:
     overridesAnchor: Sovrascritture
     pathOverrideOption: Abilita sovrascrittura percorso di output
     filenameOverrideOption: Abilita sovrascrittura del nome del file di output
-    customFilename: Custom filemame (leave blank to use default)
+    customFilename: Custom filename (leave blank to use default)
     customPath: Custom path
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
@@ -113,14 +222,35 @@ languages:
     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 subfolder
+    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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
+    urlInput: 视频 URL
     statusTitle: 状态
     statusReady: 就绪
     selectFormatButton: 选择格式
@@ -154,11 +284,32 @@ languages:
     playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
     restartAppMessage: 需要刷新页面才能生效
     servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    newDownloadButton: 新下载
+    homeButtonLabel: 主页
+    archiveButtonLabel: 归档
+    settingsButtonLabel: 设置
+    rpcAuthenticationLabel: RPC 身份验证
+    themeTogglerLabel: 主题切换
+    loadingLabel: 正在加载…
     appTitle: App 标题
-    savedTemplates: Saved templates
-    templatesEditor: Templates editor
-    templatesEditorNameLabel: Template name
-    templatesEditorContentLabel: Template content
+    savedTemplates: 保存模板
+    templatesEditor: 模板编辑器
+    templatesEditorNameLabel: 模板名称
+    templatesEditorContentLabel: 模板内容
+    logsTitle: '日志'
+    awaitingLogs: '正在等待日志…'
+    bulkDownload: '下载 zip 压缩包中的文件'
+    livestreamURLInput: 直播 URL
+    livestreamStatusWaiting: 等待直播开始
+    livestreamStatusDownloading: 下载中
+    livestreamStatusCompleted: 已完成
+    livestreamStatusErrored: 发生错误
+    livestreamStatusUnknown: 未知
+    livestreamDownloadInfo: |
+      本功能将会监控即将开始的直播流，每个进程都会传入参数：--wait-for-video 10 （重试间隔10秒）
+      如果直播已经开始，那么依然可以下载，但是不会记录下载进度。
+      直播开始后，将会转移到下载页面
+    livestreamExperimentalWarning: 实验性功能，可能存在未知Bug，请谨慎使用
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -192,11 +343,32 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -228,13 +400,34 @@ languages:
     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
-    appTitle: App title
-    savedTemplates: Saved templates
-    templatesEditor: Templates editor
-    templatesEditorNameLabel: Template name
-    templatesEditorContentLabel: Template content
+    playlistCheckbox: Скачать плейлист. Это займет время, после отправки вы сможете закрыть окно
+    servedFromReverseProxyCheckbox: Находится за обратным прокси
+    newDownloadButton: Новая загрузка
+    homeButtonLabel: Home
+    archiveButtonLabel: Архив
+    settingsButtonLabel: Настройки
+    rpcAuthenticationLabel: RPC-аутентификация
+    themeTogglerLabel: Переключить тему
+    loadingLabel: Загрузка...
+    appTitle: Название приложения
+    savedTemplates: Сохраненные шаблоны
+    templatesEditor: Редактор шаблонов
+    templatesEditorNameLabel: Имя шаблона
+    templatesEditorContentLabel: Содержание шаблона
+    logsTitle: 'Логи'
+    awaitingLogs: 'Ожидание логов...'
+    bulkDownload: 'Скачать файлы в zip архиве'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -258,7 +451,7 @@ languages:
     overridesAnchor: Overrides
     pathOverrideOption: Enable output path overriding
     filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
+    customFilename: Custom filename (leave blank to use default)
     customPath: Custom path
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
@@ -268,11 +461,32 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -307,11 +521,32 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -345,11 +580,32 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -383,11 +639,32 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -421,8 +698,94 @@ languages:
     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'
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!
+  swedish:
+    urlInput: Videolänk (en per rad)
+    statusTitle: Status
+    statusReady: Redo
+    selectFormatButton: Välj format
+    startButton: Start
+    abortAllButton: Avbryt alla
+    updateBinButton: Uppdatera yt-dlp
+    darkThemeButton: Mörkt tema
+    lightThemeButton: Ljust tema
+    settingsAnchor: Inställningar
+    serverAddressTitle: Serveraddress
+    serverPortTitle: Port
+    extractAudioCheckbox: Extrahera ljud
+    noMTimeCheckbox: Lägg inte till info om när filen senast modifierades
+    bgReminder: När du stänger denna sida så kommer nedladdningen att fortsätta i bakgrunden.
+    toastConnected: 'Ansluten till '
+    toastUpdated: Uppdaterade yt-dlp!
+    formatSelectionEnabler: Tillåt val av ljud- och bildformat
+    themeSelect: 'Tema'
+    languageSelect: 'Språk'
+    overridesAnchor: Överskrivningar
+    pathOverrideOption: Tillåt överskrivning av filsökvägen
+    filenameOverrideOption: Tillåt överskrivning av filnamn
+    customFilename: Eget filnamn (lämna blankt för standardnamn)
+    customPath: Egen filsökväg
+    customArgs: Tillåt egna yt-dlp-argument (frihet under ansvar!)
+    customArgsInput: Egna yt-dlp-argument
+    rpcConnErr: Ett fel inträffade vid anslutning till RPC-server
+    splashText: Inga pågående nedladdningar
+    archiveTitle: Arkiv
+    clipboardAction: Kopierade länken
+    playlistCheckbox: Ladda ner spellista (detta kommer ta did, efter start så kan du stänga detta fönster)
+    restartAppMessage: En sidomladdning behövs innan förändringen får effekt
+    servedFromReverseProxyCheckbox: Servern befinner sig bakom en omvänd proxy
+    urlBase: "URL-bas, måste anges när en omvänd proxy används. Standardinställning: lämna blank"
+    newDownloadButton: Ny nedladdning
+    homeButtonLabel: Hem
+    archiveButtonLabel: Arkiv
+    settingsButtonLabel: Inställningar
+    rpcAuthenticationLabel: RPC-Autentisering
+    themeTogglerLabel: Tema-knapp
+    loadingLabel: Laddar...
+    appTitle: Apptitel
+    savedTemplates: Sparade mallar
+    templatesEditor: Mallredigerare
+    templatesEditorNameLabel: Namn
+    templatesEditorContentLabel: Innehåll 
+    logsTitle: 'Loggar'
+    awaitingLogs: 'Väntar på loggar...'
+    bulkDownload: 'Ladda ner filer i ett zip-arkiv'
+    rpcPollingTimeTitle: Frekvens av RPC-uppdateringar
+    rpcPollingTimeDescription: En högre frekvens kräver mer CPU-resurser för både server och klient
+    templatesReloadInfo: För att registrera en ny mall så kan en sidomladdning krävas.
+    livestreamURLInput: Livestream URL
+    livestreamStatusWaiting: Waiting/Wait start
+    livestreamStatusDownloading: Downloading
+    livestreamStatusCompleted: Completed
+    livestreamStatusErrored: Errored
+    livestreamStatusUnknown: Unknown
+    livestreamDownloadInfo: |
+      This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
+      If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
+      Once started the livestream will be migrated to the downloads page.
+    livestreamExperimentalWarning: This feature is still experimental. Something might break!

frontend/src/atoms/downloadTemplate.ts

@@ -1,16 +1,15 @@
-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'
+import { pipe } from 'fp-ts/lib/function'
+import { atom, selector } from 'recoil'
+import { ffetch } from '../lib/httpClient'
+import { CustomTemplate } from '../types'
+import { serverSideCookiesState, serverURL } from './settings'
 
-export const cookiesTemplateState = atom({
+export const cookiesTemplateState = selector({
   key: 'cookiesTemplateState',
-  default: localStorage.getItem('cookiesTemplate') ?? '',
-  effects: [
-    ({ onSet }) => onSet(e => localStorage.setItem('cookiesTemplate', e))
-  ]
+  get: ({ get }) => get(serverSideCookiesState)
+    ? '--cookies=cookies.txt'
+    : ''
 })
 
 export const customArgsState = atom({
@@ -47,6 +46,5 @@ export const savedTemplatesState = selector<CustomTemplate[]>({
       either,
       getOrElse(() => new Array<CustomTemplate>())
     )
-  },
-  dangerouslyAllowMutability: true
+  }
 })

frontend/src/atoms/format.ts

@@ -1,7 +0,0 @@
-import { atom } from 'recoil'
-import { DLMetadata } from '../types'
-
-export const selectedFormatState = atom<Partial<DLMetadata>>({
-  key: 'selectedFormatState',
-  default: {},
-})

frontend/src/atoms/rpc.ts

@@ -1,12 +1,23 @@
-import { selector } from 'recoil'
+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)),
-  set: ({ get }) =>
-    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+    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

@@ -1,4 +1,7 @@
+import { pipe } from 'fp-ts/lib/function'
+import { matchW } from 'fp-ts/lib/TaskEither'
 import { atom, selector } from 'recoil'
+import { ffetch } from '../lib/httpClient'
 import { prefersDarkMode } from '../utils'
 
 export const languages = [
@@ -12,6 +15,7 @@ export const languages = [
   'catalan',
   'ukrainian',
   'polish',
+  'german'
 ] as const
 
 export type Language = (typeof languages)[number]
@@ -63,8 +67,7 @@ export const serverAddressState = atom<string>({
 
 export const serverPortState = atom<number>({
   key: 'serverPortState',
-  default: Number(localStorage.getItem('server-port')) ||
-    Number(window.location.port),
+  default: Number(localStorage.getItem('server-port')) || Number(window.location.port),
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('server-port', a.toString()))
@@ -73,7 +76,7 @@ export const serverPortState = atom<number>({
 
 export const latestCliArgumentsState = atom<string>({
   key: 'latestCliArgumentsState',
-  default: localStorage.getItem('cli-args') || '',
+  default: localStorage.getItem('cli-args') || '--no-mtime',
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('cli-args', a.toString()))
@@ -127,13 +130,22 @@ export const listViewState = atom({
 
 export const servedFromReverseProxyState = atom({
   key: 'servedFromReverseProxyState',
-  default: localStorage.getItem('reverseProxy') === "true",
+  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',
@@ -145,9 +157,15 @@ export const appTitleState = atom({
 
 export const serverAddressAndPortState = selector({
   key: 'serverAddressAndPortState',
-  get: ({ get }) => get(servedFromReverseProxyState)
-    ? `${get(serverAddressState)}`
-    : `${get(serverAddressState)}:${get(serverPortState)}`
+  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({
@@ -172,16 +190,18 @@ export const rpcHTTPEndpoint = selector({
   }
 })
 
-export const cookiesState = atom({
-  key: 'cookiesState',
-  default: localStorage.getItem('yt-dlp-cookies') ?? '',
-  effects: [
-    ({ onSet }) =>
-      onSet(c => localStorage.setItem('yt-dlp-cookies', c))
-  ]
+export const serverSideCookiesState = selector<string>({
+  key: 'serverSideCookiesState',
+  get: async ({ get }) => await pipe(
+    ffetch<Readonly<{ cookies: string }>>(`${get(serverURL)}/api/v1/cookies`),
+    matchW(
+      () => '',
+      (r) => r.cookies
+    )
+  )()
 })
 
-export const themeSelector = selector<ThemeNarrowed>({
+const themeSelector = selector<ThemeNarrowed>({
   key: 'themeSelector',
   get: ({ get }) => {
     const theme = get(themeState)

frontend/src/atoms/status.ts

@@ -1,40 +1,41 @@
+import { pipe } from 'fp-ts/lib/function'
+import { of } from 'fp-ts/lib/Task'
+import { getOrElse } from 'fp-ts/lib/TaskEither'
 import { atom, selector } from 'recoil'
+import { ffetch } from '../lib/httpClient'
 import { rpcClientState } from './rpc'
-
-type StatusState = {
-  connected: boolean,
-  updated: boolean,
-  downloading: boolean,
-}
-
+import { serverURL } from './settings'
 
 export const connectedState = atom({
   key: 'connectedState',
   default: false
 })
 
-export const updatedBinaryState = atom({
-  key: 'updatedBinaryState',
-  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 isDownloadingState = atom({
-  key: 'isDownloadingState',
-  default: false
-})
-
-// export const freeSpaceBytesState = selector({
-//   key: 'freeSpaceBytesState',
-//   get: async ({ get }) => {
-//     const res = await get(rpcClientState).freeSpace()
-//     return res.result
-//   }
-// })
-
 export const availableDownloadPathsState = selector({
   key: 'availableDownloadPathsState',
   get: async ({ get }) => {
     const res = await get(rpcClientState).directoryTree()
+      .catch(() => ({ result: [] }))
     return res.result
   }
+})
+
+export const ytdlpVersionState = selector<string>({
+  key: 'ytdlpVersionState',
+  get: async ({ get }) => await pipe(
+    ffetch<string>(`${get(serverURL)}/api/v1/version`),
+    getOrElse(() => pipe(
+      'unknown version',
+      of
+    )),
+  )()
 })

frontend/src/atoms/ui.ts

@@ -1,6 +1,14 @@
-import { atom } from 'recoil'
+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/CookiesTextField.tsx

@@ -1,66 +1,64 @@
-import { TextField } from '@mui/material'
+import { Button, 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 { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useMemo } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
-import { cookiesTemplateState } from '../atoms/downloadTemplate'
-import { cookiesState, serverURL } from '../atoms/settings'
+import { serverSideCookiesState, 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(' '),
+  cookie => cookie.split('\t'),
   E.of,
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f.length === 7,
       () => `missing parts`
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[0].length > 0,
       () => 'missing domain'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[1] === 'TRUE' || f[1] === 'FALSE',
       () => `invalid include subdomains`
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[2].length > 0,
       () => 'invalid path'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[3] === 'TRUE' || f[3] === 'FALSE',
       () => 'invalid secure flag'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => isFinite(Number(f[4])),
       () => 'invalid expiration'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[5].length > 0,
       () => 'invalid name'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[6].length > 0,
       () => 'invalid value'
@@ -68,13 +66,19 @@ const validateCookie = (cookie: string) => pipe(
   ),
 )
 
+const noopValidator = (s: string): E.Either<string, string[]> => pipe(
+  s,
+  s => s.split('\t'),
+  E.of
+)
+
+const isCommentOrNewLine = (s: string) => s === '' || s.startsWith('\n') || s.startsWith('#')
+
 const CookiesTextField: React.FC = () => {
   const serverAddr = useRecoilValue(serverURL)
-  const [, setCookies] = useRecoilState(cookiesTemplateState)
-  const [savedCookies, setSavedCookies] = useRecoilState(cookiesState)
+  const savedCookies = useRecoilValue(serverSideCookiesState)
 
   const { pushMessage } = useToast()
-  const flag = '--cookies=cookies.txt'
 
   const cookies$ = useMemo(() => new Subject<string>(), [])
 
@@ -86,28 +90,41 @@ const CookiesTextField: React.FC = () => {
       })
     })()
 
+  const deleteCookies = () => pipe(
+    ffetch(`${serverAddr}/api/v1/cookies`, {
+      method: 'DELETE',
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => {
+        pushMessage('Deleted cookies', 'success')
+        pushMessage(`Reload the page to apply the changes`, 'info')
+      }
+    )
+  )()
+
   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(
+    A.map(c => isCommentOrNewLine(c) ? noopValidator(c) : validateCookie(c)), // validate line
+    A.mapWithIndex((i, either) => pipe(                  // detect errors and return the either
       either,
-      E.matchW(
-        (l) => pushMessage(`Error in line ${i + 1}: ${l}`, 'warning'),
-        () => E.isRight(either)
+      E.match(
+        (l) => {
+          pushMessage(`Error in line ${i + 1}: ${l}`, 'warning')
+          return either
+        },
+        (_) => either
       ),
     )),
-    A.filter(Boolean),
-    A.match(
-      () => false,
-      (c) => {
-        pushMessage(`Valid ${c.length} Netscape cookies`, 'info')
-        return true
-      }
-    )
+    A.filter(c => E.isRight(c)),                         // filter the line who didn't pass the validation
+    A.map(E.getOrElse(() => new Array<string>())),       // cast the array of eithers to an array of tokens
+    A.filter(f => f.length > 0),                         // filter the empty tokens
+    A.map(f => f.join('\t')),                            // join the tokens in a TAB separated string
+    A.reduce('', (c, n) => `${c}${n}\n`),                // reduce all to a single string separated by \n
+    parsed => parsed.length > 0                          // if nothing has passed the validation return none
+      ? O.some(parsed)
+      : O.none
   )
 
   useSubscription(
@@ -117,22 +134,17 @@ const CookiesTextField: React.FC = () => {
     ),
     (cookies) => pipe(
       cookies,
-      cookies => {
-        setSavedCookies(cookies)
-        return cookies
-      },
       validateNetscapeCookies,
-      O.fromPredicate(f => f === true),
       O.match(
-        () => setCookies(''),
-        async () => {
+        () => pushMessage('No valid cookies', 'warning'),
+        async (some) => {
           pipe(
-            await submitCookies(cookies),
+            await submitCookies(some.trimEnd()),
             E.match(
               (l) => pushMessage(`${l}`, 'error'),
               () => {
-                pushMessage(`Saved Netscape cookies`, 'success')
-                setCookies(flag)
+                pushMessage(`Saved ${some.split('\n').length} Netscape cookies`, 'success')
+                pushMessage('Reload the page to apply the changes', 'info')
               }
             )
           )
@@ -142,15 +154,18 @@ const CookiesTextField: React.FC = () => {
   )
 
   return (
-    <TextField
-      label="Netscape Cookies"
-      multiline
-      maxRows={20}
-      minRows={4}
-      fullWidth
-      defaultValue={savedCookies}
-      onChange={(e) => cookies$.next(e.currentTarget.value)}
-    />
+    <>
+      <TextField
+        label="Netscape Cookies"
+        multiline
+        maxRows={20}
+        minRows={4}
+        fullWidth
+        defaultValue={savedCookies}
+        onChange={(e) => cookies$.next(e.currentTarget.value)}
+      />
+      <Button onClick={deleteCookies}>Delete cookies</Button>
+    </>
   )
 }
 

frontend/src/components/DownloadCard.tsx

@@ -15,8 +15,11 @@ import {
   Stack,
   Typography
 } from '@mui/material'
+import { useCallback } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
+import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
 
 type Props = {
   download: RPCResult
@@ -34,11 +37,29 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const isCompleted = () => download.progress.percentage === '-1'
+  const serverAddr = useRecoilValue(serverURL)
 
-  const percentageToNumber = () => isCompleted()
-    ? 100
-    : Number(download.progress.percentage.replace('%', ''))
+  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>
@@ -54,14 +75,22 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
           /> :
           <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, 54)}
+              {ellipsis(download.info.title, 100)}
             </Typography> :
             <Skeleton />
           }
-          <Stack direction="row" spacing={1} py={2}>
+          <Stack direction="row" spacing={0.5} py={1}>
             <Chip
               label={
                 isCompleted()
@@ -79,18 +108,10 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
               {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
             </Typography>
             <Typography>
-              {roundMiB(download.info.filesize_approx ?? 0)}
+              {formatSize(download.info.filesize_approx ?? 0)}
             </Typography>
             <Resolution resolution={download.info.resolution} />
           </Stack>
-          {download.progress.percentage ?
-            <LinearProgress
-              variant="determinate"
-              value={percentageToNumber()}
-              color={isCompleted() ? "secondary" : "primary"}
-            /> :
-            null
-          }
         </CardContent>
       </CardActionArea>
       <CardActions>
@@ -102,6 +123,26 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
         >
           {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>
   )

frontend/src/components/DownloadDialog.tsx

@@ -22,22 +22,23 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
 import {
+  FC,
+  Suspense,
   forwardRef,
-  useMemo,
+  useEffect,
   useRef,
   useState,
   useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
+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 { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
-import { isValidURL, toFormatArgs } from '../utils'
+import { toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
 
 const Transition = forwardRef(function Transition(
@@ -55,15 +56,12 @@ type Props = {
   onDownloadStart: (url: string) => void
 }
 
-export default function DownloadDialog({
-  open,
-  onClose,
-  onDownloadStart
-}: Props) {
+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('')
@@ -71,6 +69,7 @@ export default function DownloadDialog({
   const [pickedBestFormat, setPickedBestFormat] = useState('')
 
   const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+
   const [downloadPath, setDownloadPath] = useState('')
 
   const [filenameTemplate, setFilenameTemplate] = useRecoilState(
@@ -78,14 +77,9 @@ export default function DownloadDialog({
   )
 
   const [url, setUrl] = useState('')
-  const [workingUrl, setWorkingUrl] = useState('')
 
   const [isPlaylist, setIsPlaylist] = useState(false)
 
-  const cliArgs = useMemo(() =>
-    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
-  )
-
   const { i18n } = useI18n()
   const { client } = useRPC()
 
@@ -94,39 +88,43 @@ export default function DownloadDialog({
 
   const [isPending, startTransition] = useTransition()
 
+  useEffect(() => {
+    setCustomArgs('')
+  }, [open])
+
   /**
     * 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)
+  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)
 
-    client.download({
-      url: immediate || url || workingUrl,
-      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
-      pathOverride: downloadPath ?? '',
-      renameTo: settings.fileRenaming ? filenameTemplate : '',
-      playlist: isPlaylist,
-    })
+      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('')
-    setWorkingUrl('')
-
-    setTimeout(() => {
-      resetInput()
-      setDownloadFormats(undefined)
-      onDownloadStart(url)
-    }, 250)
   }
 
   /**
    * Retrive url from input and display the formats selection view
    */
   const sendUrlFormatSelection = () => {
-    setWorkingUrl(url)
-    setUrl('')
     setPickedAudioFormat('')
     setPickedVideoFormat('')
     setPickedBestFormat('')
@@ -160,7 +158,6 @@ export default function DownloadDialog({
 
     file
       .split('\n')
-      .filter(u => isValidURL(u))
       .forEach(u => sendUrl(u))
   }
 
@@ -201,7 +198,7 @@ export default function DownloadDialog({
         backgroundColor: (theme) => theme.palette.background.default,
         minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
       }}>
-        <Container sx={{ my: 4 }} >
+        <Container sx={{ my: 4 }}>
           <Grid container spacing={2}>
             <Grid item xs={12}>
               <Paper
@@ -214,6 +211,7 @@ export default function DownloadDialog({
               >
                 <Grid container>
                   <TextField
+                    multiline
                     fullWidth
                     ref={urlInputRef}
                     label={i18n.t('urlInput')}
@@ -309,8 +307,19 @@ export default function DownloadDialog({
                     </Grid>
                   }
                 </Grid>
-                <ExtraDownloadOptions />
+                <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"
@@ -327,13 +336,6 @@ export default function DownloadDialog({
                       }
                     </Button>
                   </Grid>
-                  <Grid item>
-                    <FormControlLabel
-                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
-                      checked={isPlaylist}
-                      label={i18n.t('playlistCheckbox')}
-                    />
-                  </Grid>
                 </Grid>
               </Paper>
             </Grid>
@@ -368,4 +370,6 @@ export default function DownloadDialog({
       </Box>
     </Dialog>
   )
-}
+}
+
+export default DownloadDialog

frontend/src/components/Downloads.tsx

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

frontend/src/components/DownloadsGridView.tsx

@@ -4,29 +4,30 @@ 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 DownloadsCardView: React.FC = () => {
+const DownloadsGridView: React.FC = () => {
   const downloads = useRecoilValue(activeDownloadsState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
   const { pushMessage } = useToast()
 
-  const abort = (id: string) => client.kill(id)
+  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 }} pt={2}>
+    <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} key={download.id}>
-            <>
-              <DownloadCard
-                download={download}
-                onStop={() => abort(download.id)}
-                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-              />
-            </>
+          <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>
         ))
       }
@@ -34,4 +35,4 @@ const DownloadsCardView: React.FC = () => {
   )
 }
 
-export default DownloadsCardView
+export default DownloadsGridView

frontend/src/components/DownloadsListView.tsx

@@ -1,93 +0,0 @@
-import {
-  Button,
-  Grid,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from "@mui/material"
-import { useRecoilValue } from 'recoil'
-import { activeDownloadsState } from '../atoms/downloads'
-import { useRPC } from '../hooks/useRPC'
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
-
-
-const DownloadsListView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
-
-  const { client } = useRPC()
-
-  const abort = (id: string) => client.kill(id)
-
-  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: '100%' }} elevation={2}>
-          <Table>
-            <TableHead hidden={downloads.length === 0}>
-              <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={
-                          download.progress.process_status === 0
-                            ? 'indeterminate'
-                            : '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={() => abort(download.id)}
-                      >
-                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              }
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-    </Grid>
-  )
-}
-
-export default DownloadsListView

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

@@ -39,7 +39,7 @@ const ErrorBoundary: React.FC = () => {
         </Button>
       </Link>
       <Typography sx={{ mt: 2 }} color={'gray'} fontWeight={500}>
-        Or login if authentication is enabled
+        Or login if authentification is enabled
       </Typography>
       <Link to={'/login'} >
         <Button variant='contained' sx={{ mt: 2 }}>
@@ -50,4 +50,4 @@ const ErrorBoundary: React.FC = () => {
   )
 }
 
-export default ErrorBoundary
+export default ErrorBoundary

frontend/src/components/ExtraDownloadOptions.tsx

@@ -15,6 +15,12 @@ const ExtraDownloadOptions: React.FC = () => {
         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!)
@@ -22,9 +28,23 @@ const ExtraDownloadOptions: React.FC = () => {
         renderOption={(props, option) => (
           <Box
             component="li"
-            sx={{ mr: 2, flexShrink: 0 }}
-            {...props}>
-            {option.label}
+            {...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 }}

frontend/src/components/Footer.tsx

@@ -0,0 +1,72 @@
+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' }}>
+          {/* TODO: make it dynamic */}
+          <Chip label="RPC v3.2.0" variant="outlined" size="small" />
+          <Suspense>
+            <VersionIndicator />
+          </Suspense>
+        </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/FormatsGrid.tsx

@@ -101,6 +101,7 @@ export default function FormatsGrid({
                   >
                     {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
                     {(format.filesize_approx > 0) ? " (~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB)" : ""}
+                    {format.language}
                   </Button>
                 </Grid>
               ))

frontend/src/components/FreeSpaceIndicator.tsx

@@ -1,26 +1,21 @@
 import StorageIcon from '@mui/icons-material/Storage'
-import { useEffect, useState } from 'react'
-import { formatGiB } from '../utils'
-import { useRPC } from '../hooks/useRPC'
+import { useRecoilValue } from 'recoil'
+import { freeSpaceBytesState } from '../atoms/status'
+import { formatSize } from '../utils'
 
 const FreeSpaceIndicator = () => {
-  const [freeSpace, setFreeSpace] = useState(0)
-
-  const { client } = useRPC()
-
-  useEffect(() => {
-    client.freeSpace().then(r => setFreeSpace(r.result))
-  }, [client])
+  const freeSpace = useRecoilValue(freeSpaceBytesState)
 
   return (
     <div style={{
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
+      gap: 3
     }}>
       <StorageIcon />
       <span>
-        &nbsp;{formatGiB(freeSpace)}&nbsp;
+        {formatSize(freeSpace)}
       </span>
     </div>
   )

frontend/src/components/HomeActions.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
+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 { useToast } from '../hooks/toast'
 import TemplatesEditor from './TemplatesEditor'
 
 const HomeActions: React.FC = () => {
@@ -20,18 +20,21 @@ const HomeActions: React.FC = () => {
         onDownloadOpen={() => setOpenDownload(true)}
         onEditorOpen={() => setOpenEditor(true)}
       />
-      <DownloadDialog
-        open={openDownload}
-        onClose={() => {
-          setOpenDownload(false)
-          setIsLoading(true)
-        }}
-        onDownloadStart={(url) => {
-          pushMessage(`Requested ${url}`, 'info')
-          setOpenDownload(false)
-          setIsLoading(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)}

frontend/src/components/HomeSpeedDial.tsx

@@ -1,14 +1,16 @@
 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 } from 'recoil'
-import { listViewState } from '../atoms/settings'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { listViewState, serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 
@@ -18,28 +20,32 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const [, setListView] = useRecoilState(listViewState)
+  const serverAddr = useRecoilValue(serverURL)
+  const [listView, setListView] = useRecoilState(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
 
-  const abort = () => client.killAll()
-
   return (
     <SpeedDial
       ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 32, right: 32 }}
+      sx={{ position: 'absolute', bottom: 64, right: 24 }}
       icon={<SpeedDialIcon />}
     >
       <SpeedDialAction
-        icon={<FormatListBulleted />}
-        tooltipTitle={`Table view`}
+        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={abort}
+        onClick={() => client.killAll()}
       />
       <SpeedDialAction
         icon={<BuildCircleIcon />}
@@ -48,7 +54,7 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
       />
       <SpeedDialAction
         icon={<AddCircleIcon />}
-        tooltipTitle={i18n.t('newDownload')}
+        tooltipTitle={i18n.t('newDownloadButton')}
         onClick={onDownloadOpen}
       />
     </SpeedDial>

frontend/src/components/LoadingBackdrop.tsx

@@ -1,10 +1,10 @@
 import { Backdrop, CircularProgress } from '@mui/material'
-import { useRecoilValue } from 'recoil'
-import { loadingAtom } from '../atoms/ui'
 
-const LoadingBackdrop: React.FC = () => {
-  const isLoading = useRecoilValue(loadingAtom)
+type Props = {
+  isLoading: boolean
+}
 
+const LoadingBackdrop: React.FC<Props> = ({ isLoading }) => {
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}

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

@@ -1,26 +1,24 @@
-import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import LogoutIcon from '@mui/icons-material/Logout'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
-import { useRecoilValue } from 'recoil'
-import { serverURL } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
 
 export default function Logout() {
   const navigate = useNavigate()
-  const url = useRecoilValue(serverURL)
 
   const logout = async () => {
-    const res = await fetch(`${url}/auth/logout`)
-    if (res.ok) {
-      navigate('/login')
-    }
+    localStorage.removeItem('token')
+    navigate('/login')
   }
 
+  const { i18n } = useI18n()
+
   return (
     <ListItemButton onClick={logout}>
       <ListItemIcon>
         <LogoutIcon />
       </ListItemIcon>
-      <ListItemText primary="RPC authentication" />
+      <ListItemText primary={i18n.t('rpcAuthenticationLabel')} />
     </ListItemButton>
   )
 }

frontend/src/components/SocketSubscriber.tsx

@@ -1,8 +1,10 @@
 import * as O from 'fp-ts/Option'
 import { useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { share, take, timer } from 'rxjs'
+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'
@@ -13,29 +15,35 @@ import { datetimeCompareFunc, isRPCResponse } from '../utils'
 
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
-const SocketSubscriber: React.FC<Props> = ({ children }) => {
+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 sharedSocket$ = useMemo(() => client.socket$.pipe(share()), [])
-  const socketOnce$ = useMemo(() => sharedSocket$.pipe(take(1)), [])
+  const navigate = useNavigate()
 
-  useSubscription(socketOnce$, () => {
-    setIsConnected(true)
-    pushMessage(
-      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
-      "success"
-    )
-  })
+  const socketOnce$ = useMemo(() => client.socket$.pipe(take(1)), [])
+
+  useEffect(() => {
+    if (!connected) {
+      socketOnce$.subscribe(() => {
+        setIsConnected(true)
+        pushMessage(
+          `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+          "success"
+        )
+      })
+    }
+  }, [connected])
 
   useSubscription(
-    sharedSocket$,
+    client.socket$,
     event => {
       if (!isRPCResponse(event)) { return }
       if (!Array.isArray(event.result)) { return }
@@ -46,11 +54,10 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
             .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
               b.info.created_at,
               a.info.created_at,
-            ))
+            )),
           )
         )
       }
-
       setDownloads(O.none)
     },
     err => {
@@ -58,19 +65,19 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
       pushMessage(
         `${i18n.t('rpcConnErr')} (${serverAddressAndPort})`,
         "error"
-      )
+      ),
+        navigate(`/error`)
     }
   )
 
   useEffect(() => {
     if (connected) {
-      timer(0, 1000).subscribe(() => client.running())
+      const sub = timer(0, rpcPollingTime).subscribe(() => client.running())
+      return () => sub.unsubscribe()
     }
-  }, [connected])
+  }, [connected, client, rpcPollingTime])
 
-  return (
-    <>{children}</>
-  )
+  return null
 }
 
 export default SocketSubscriber

frontend/src/components/Splash.tsx

@@ -25,7 +25,7 @@ export default function Splash() {
   const { i18n } = useI18n()
   const activeDownloads = useRecoilValue(activeDownloadsState)
 
-  if (!activeDownloads || activeDownloads.length !== 0) {
+  if (activeDownloads.length !== 0) {
     return null
   }
 

frontend/src/components/TemplatesEditor.tsx

@@ -2,6 +2,7 @@ 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,
@@ -145,7 +146,12 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
         backgroundColor: (theme) => theme.palette.background.default,
         minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
       }}>
-        <Grid container spacing={2} sx={{ p: 4 }}>
+        <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}

frontend/src/components/ThemeToggler.tsx

@@ -4,6 +4,7 @@ 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)
@@ -17,6 +18,8 @@ const ThemeToggler: React.FC = () => {
   const themes: Theme[] = ['system', 'light', 'dark']
   const currentTheme = themes.indexOf(theme)
 
+  const { i18n } = useI18n()
+
   return (
     <ListItemButton onClick={() => {
       setTheme(themes[(currentTheme + 1) % themes.length])
@@ -24,7 +27,7 @@ const ThemeToggler: React.FC = () => {
       <ListItemIcon>
         {actions[theme]}
       </ListItemIcon>
-      <ListItemText primary="Toggle theme" />
+      <ListItemText primary={i18n.t('themeTogglerLabel')} />
     </ListItemButton>
   )
 }

frontend/src/components/VersionIndicator.tsx

@@ -0,0 +1,15 @@
+import { Chip, CircularProgress } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { ytdlpVersionState } from '../atoms/status'
+
+const VersionIndicator: React.FC = () => {
+  const version = useRecoilValue(ytdlpVersionState)
+
+  return (
+    version
+      ? <Chip label={`yt-dlp v${version}`} variant="outlined" size="small" />
+      : <CircularProgress size={15} />
+  )
+}
+
+export default VersionIndicator

frontend/src/components/livestream/LivestreamDialog.tsx

@@ -0,0 +1,125 @@
+import CloseIcon from '@mui/icons-material/Close'
+import {
+  Alert,
+  AppBar,
+  Box,
+  Button,
+  Container,
+  Dialog,
+  Grid,
+  IconButton,
+  Paper,
+  Slide,
+  TextField,
+  Toolbar,
+  Typography
+} from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { forwardRef, useState } from 'react'
+import { useToast } from '../../hooks/toast'
+import { useI18n } from '../../hooks/useI18n'
+import { useRPC } from '../../hooks/useRPC'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+}
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+const LivestreamDialog: React.FC<Props> = ({ open, onClose }) => {
+  const [livestreamURL, setLivestreamURL] = useState('')
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const exec = (url: string) => client.execLivestream(url)
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <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">
+            Livestream monitor
+          </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>
+                  <Grid item xs={12} mb={2}>
+                    <Alert severity="info">
+                      {i18n.t('livestreamDownloadInfo')}
+                    </Alert>
+                    <Alert severity="warning" sx={{ mt: 1 }}>
+                      {i18n.t('livestreamExperimentalWarning')}
+                    </Alert>
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('livestreamURLInput')}
+                      variant="outlined"
+                      onChange={(e) => setLivestreamURL(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item>
+                    <Button
+                      sx={{ mt: 2 }}
+                      variant="contained"
+                      disabled={livestreamURL === ''}
+                      onClick={() => {
+                        exec(livestreamURL)
+                        onClose()
+                        pushMessage(`Monitoring ${livestreamURL}`, 'info')
+                      }}
+                    >
+                      {i18n.t('startButton')}
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default LivestreamDialog

frontend/src/components/livestream/LivestreamSpeedDial.tsx

@@ -0,0 +1,34 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import { SpeedDial, SpeedDialAction, SpeedDialIcon } from '@mui/material'
+import { useI18n } from '../../hooks/useI18n'
+
+type Props = {
+  onOpen: () => void
+  onStopAll: () => void
+}
+
+const LivestreamSpeedDial: React.FC<Props> = ({ onOpen, onStopAll }) => {
+  const { i18n } = useI18n()
+
+  return (
+    <SpeedDial
+      ariaLabel="Home speed dial"
+      sx={{ position: 'absolute', bottom: 64, right: 24 }}
+      icon={<SpeedDialIcon />}
+    >
+      <SpeedDialAction
+        icon={<DeleteForeverIcon />}
+        tooltipTitle={i18n.t('abortAllButton')}
+        onClick={onStopAll}
+      />
+      <SpeedDialAction
+        icon={<AddCircleIcon />}
+        tooltipTitle={i18n.t('newDownloadButton')}
+        onClick={onOpen}
+      />
+    </SpeedDial>
+  )
+}
+
+export default LivestreamSpeedDial

frontend/src/components/livestream/NoLivestreams.tsx

@@ -0,0 +1,38 @@
+import LiveTvIcon from '@mui/icons-material/LiveTv'
+import { Container, SvgIcon, Typography, styled } from '@mui/material'
+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 NoLivestreams() {
+  const { i18n } = useI18n()
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <LiveTvIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        No livestreams monitored
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/index.tsx

@@ -7,6 +7,8 @@ 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(

frontend/src/lib/argsParser.ts

@@ -1,61 +0,0 @@
-export class CliArguments {
-  private _extractAudio: boolean
-  private _noMTime: boolean
-  private _proxy: string
-
-  constructor(extractAudio = false, noMTime = true) {
-    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/lib/httpClient.ts

@@ -7,7 +7,7 @@ export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
 
 
 const fetcher = async <T>(url: string, opt?: RequestInit) => {
-  const res = await fetch(url, opt)
+  const jwt = localStorage.getItem('token')
 
   if (opt && !opt.headers) {
     opt.headers = {
@@ -15,6 +15,14 @@ const fetcher = async <T>(url: string, opt?: RequestInit) => {
     }
   }
 
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
   if (!res.ok) {
     throw await res.text()
   }

frontend/src/lib/intl.ts

@@ -4,9 +4,10 @@ import i18n from "../assets/i18n.yaml"
 export default class I18nBuilder {
   private language: string
   private textMap = i18n.languages
+  private current: string[]
 
   constructor(language: string) {
-    this.language = language
+    this.setLanguage(language)
   }
 
   getLanguage(): string {
@@ -15,13 +16,12 @@ export default class I18nBuilder {
 
   setLanguage(language: string): void {
     this.language = language
+    this.current = this.textMap[this.language]
   }
 
   t(key: string): string {
-    const map = this.textMap[this.language]
-    if (map) {
-      const translation = map[key]
-      return translation ?? 'caption not defined'
+    if (this.current) {
+      return this.current[key] ?? 'caption not defined'
     }
     return 'caption not defined'
   }

frontend/src/lib/rpcClient.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs'
-import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
+import type { DLMetadata, LiveStreamProgress, RPCRequest, RPCResponse, RPCResult } from '../types'
 
 import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
 
@@ -15,15 +15,19 @@ export class RPCClient {
   private seq: number
   private httpEndpoint: string
   private readonly _socket$: WebSocketSubject<any>
+  private readonly token?: string
 
-  constructor(httpEndpoint: string, webSocketEndpoint: string) {
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
     this.seq = 0
     this.httpEndpoint = httpEndpoint
-    this._socket$ = webSocket<any>(webSocketEndpoint)
+    this._socket$ = webSocket<any>({
+      url: token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    })
+    this.token = token
   }
 
   public get socket$(): Observable<RPCResponse<RPCResult[]>> {
-    return this._socket$.asObservable()
+    return this._socket$
   }
 
   private incrementSeq() {
@@ -47,6 +51,9 @@ export class RPCClient {
   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(),
@@ -75,7 +82,9 @@ export class RPCClient {
       : ''
 
     const sanitizedArgs = this.argsSanitizer(
-      req.args.replace('-o', '').replace(rename, '')
+      req.args
+        .replace('-o', '')
+        .replace(rename, '')
     )
 
     if (req.playlist) {
@@ -125,6 +134,13 @@ export class RPCClient {
     })
   }
 
+  public clear(id: string) {
+    this.sendHTTP({
+      method: 'Service.Clear',
+      params: [id],
+    })
+  }
+
   public killAll() {
     this.sendHTTP({
       method: 'Service.KillAll',
@@ -146,9 +162,32 @@ export class RPCClient {
     })
   }
 
-  public updateExecutable() {
+  public execLivestream(url: string) {
     return this.sendHTTP({
-      method: 'Service.UpdateExecutable',
+      method: 'Service.ExecLivestream',
+      params: [{
+        URL: url
+      }]
+    })
+  }
+
+  public progressLivestream() {
+    return this.sendHTTP<LiveStreamProgress>({
+      method: 'Service.ProgressLivestream',
+      params: []
+    })
+  }
+
+  public killLivestream(url: string) {
+    return this.sendHTTP({
+      method: 'Service.KillLivestream',
+      params: [url]
+    })
+  }
+
+  public killAllLivestream() {
+    return this.sendHTTP({
+      method: 'Service.KillAllLivestream',
       params: []
     })
   }

frontend/src/router.tsx

@@ -2,11 +2,13 @@ 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 LiveStream = lazy(() => import('./views/Livestream'))
 
 const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
 
@@ -36,6 +38,14 @@ export const router = createHashRouter([
           </Suspense >
         )
       },
+      {
+        path: '/log',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Terminal />
+          </Suspense >
+        )
+      },
       {
         path: '/archive',
         element: (
@@ -57,6 +67,22 @@ export const router = createHashRouter([
           </Suspense >
         )
       },
+      {
+        path: '/error',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+      {
+        path: '/monitor',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <LiveStream />
+          </Suspense >
+        )
+      },
     ]
   },
 ])

frontend/src/types/index.ts

@@ -9,6 +9,10 @@ export type RPCMethods =
   | "Service.ExecPlaylist"
   | "Service.DirectoryTree"
   | "Service.UpdateExecutable"
+  | "Service.ExecLivestream"
+  | "Service.ProgressLivestream"
+  | "Service.KillLivestream"
+  | "Service.KillAllLivestream"
 
 export type RPCRequest = {
   method: RPCMethods
@@ -34,17 +38,28 @@ type DownloadInfo = {
   created_at: string
 }
 
+export enum ProcessStatus {
+  PENDING = 0,
+  DOWNLOADING,
+  COMPLETED,
+  ERRORED,
+  LIVESTREAM,
+}
+
 type DownloadProgress = {
   speed: number
   eta: number
   percentage: string
-  process_status: number
+  process_status: ProcessStatus
 }
 
 export type RPCResult = Readonly<{
   id: string
   progress: DownloadProgress
   info: DownloadInfo
+  output: {
+    savedFilePath: string
+  }
 }>
 
 export type RPCParams = {
@@ -67,24 +82,37 @@ export type DLFormat = {
   vcodec: string
   acodec: string
   filesize_approx: number
+  language: string
 }
 
 export type DirectoryEntry = {
   name: string
   path: string
   size: number
-  shaSum: string
   modTime: string
   isVideo: boolean
   isDirectory: boolean
 }
 
-export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
+export type DeleteRequest = Pick<DirectoryEntry, 'path'>
 
-export type PlayRequest = Pick<DirectoryEntry, 'path'>
+export type PlayRequest = DeleteRequest
 
 export type CustomTemplate = {
   id: string
   name: string
   content: string
-}
+}
+
+export enum LiveStreamStatus {
+  WAITING,
+  IN_PROGRESS,
+  COMPLETED,
+  ERRORED
+}
+
+export type LiveStreamProgress = Record<string, {
+  status: LiveStreamStatus
+  waitTime: string
+  liveDate: string
+}>

frontend/src/utils.ts

@@ -1,11 +1,7 @@
 import { pipe } from 'fp-ts/lib/function'
 import type { RPCResponse } from "./types"
+import { ProcessStatus } from './types'
 
-/**
- * Validate an ip v4 via regex
- * @param {string} ipAddr 
- * @returns ip validity test
- */
 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)
@@ -20,17 +16,10 @@ export function validateDomain(url: string): boolean {
   return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
 }
 
-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 ''
-}
+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) {
@@ -42,14 +31,21 @@ export function toFormatArgs(codes: string[]): string {
   return ''
 }
 
-export const formatGiB = (bytes: number) =>
-  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+export function formatSize(bytes: number): string {
+  const threshold = 1024
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
 
-export const roundMiB = (bytes: number) =>
-  `${(bytes / 1_000_000).toFixed(2)} MiB`
+  let i = 0
+  while (bytes >= threshold) {
+    bytes /= threshold
+    i = i + 1
+  }
+
+  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
+}
 
 export const formatSpeedMiB = (val: number) =>
-  `${roundMiB(val)}/s`
+  `${(val / 1_048_576).toFixed(2)} MiB/s`
 
 export const datetimeCompareFunc = (a: string, b: string) =>
   new Date(a).getTime() - new Date(b).getTime()
@@ -58,16 +54,18 @@ export function isRPCResponse(object: any): object is RPCResponse<any> {
   return 'result' in object && 'id' in object
 }
 
-export function mapProcessStatus(status: number) {
+export function mapProcessStatus(status: ProcessStatus) {
   switch (status) {
-    case 0:
+    case ProcessStatus.PENDING:
       return 'Pending'
-    case 1:
+    case ProcessStatus.DOWNLOADING:
       return 'Downloading'
-    case 2:
+    case ProcessStatus.COMPLETED:
       return 'Completed'
-    case 3:
+    case ProcessStatus.ERRORED:
       return 'Error'
+    case ProcessStatus.LIVESTREAM:
+      return 'Livestream'
     default:
       return 'Pending'
   }

frontend/src/views/Archive.tsx

@@ -14,6 +14,8 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  MenuList,
   Paper,
   SpeedDial,
   SpeedDialAction,
@@ -26,6 +28,7 @@ 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'
@@ -37,10 +40,14 @@ import { useObservable } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
-import { DeleteRequest, DirectoryEntry } from '../types'
-import { base64URLEncode, roundMiB } from '../utils'
+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()
 
@@ -69,7 +76,7 @@ export default function Downloaded() {
         pushMessage(e, 'error')
         navigate('/login')
       },
-      (d) => files$.next(d),
+      (d) => files$.next(d ?? []),
     )
   )()
 
@@ -106,10 +113,9 @@ export default function Downloaded() {
             modTime: '',
             name: '..',
             path: upperLevel,
-            shaSum: '',
             size: 0,
-          }, ...r]
-          : r
+          }, ...r.filter(f => f.name !== '')]
+          : r.filter(f => f.name !== '')
         )
       )
     )()
@@ -132,19 +138,23 @@ export default function Downloaded() {
       : 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(entry => fetch(`${serverAddr}/archive/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          path: entry.path,
-          shaSum: entry.shaSum,
-        } as DeleteRequest)
-      }))
+      .map(deleteFile)
     ).then(fetcher)
   }
 
@@ -155,7 +165,13 @@ export default function Downloaded() {
   const onFileClick = (path: string) => startTransition(() => {
     const encoded = base64URLEncode(path)
 
-    window.open(`${serverAddr}/archive/d/${encoded}`)
+    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(() => {
@@ -163,18 +179,42 @@ export default function Downloaded() {
   })
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <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',
-      }}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={() => setShowMenu(false)}
+      >
         <Typography py={1} variant="h5" color="primary">
           {i18n.t('archiveTitle')}
         </Typography>
@@ -182,6 +222,12 @@ export default function Downloaded() {
           {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>
@@ -189,14 +235,16 @@ export default function Downloaded() {
                     variant="caption"
                     component="span"
                   >
-                    {roundMiB(file.size)}
+                    {formatSize(file.size)}
                   </Typography>
                   }
-                  {!file.isDirectory && <Checkbox
-                    edge="end"
-                    checked={file.selected}
-                    onChange={() => addSelected(file.name)}
-                  />}
+                  {!file.isDirectory && <>
+                    <Checkbox
+                      edge="end"
+                      checked={file.selected}
+                      onChange={() => addSelected(file.name)}
+                    />
+                  </>}
                 </div>
               }
               disablePadding
@@ -224,8 +272,8 @@ export default function Downloaded() {
         </List>
       </Paper>
       <SpeedDial
-        ariaLabel="SpeedDial basic example"
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        ariaLabel='archive actions'
+        sx={{ position: 'absolute', bottom: 64, right: 24 }}
         icon={<SpeedDialIcon />}
       >
         <SpeedDialAction
@@ -257,11 +305,15 @@ export default function Downloaded() {
           </ul>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button onClick={() => {
-            deleteSelected()
-            setOpenDialog(false)
-          }} autoFocus
+          <Button onClick={() => setOpenDialog(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              deleteSelected()
+              setOpenDialog(false)
+            }}
+            autoFocus
           >
             Ok
           </Button>
@@ -269,4 +321,43 @@ export default function Downloaded() {
       </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

@@ -1,15 +1,19 @@
 import {
   Container
 } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
 import Downloads from '../components/Downloads'
 import HomeActions from '../components/HomeActions'
 import LoadingBackdrop from '../components/LoadingBackdrop'
 import Splash from '../components/Splash'
 
 export default function Home() {
+  const isLoading = useRecoilValue(loadingAtom)
+
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <LoadingBackdrop />
+    <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
+      <LoadingBackdrop isLoading={isLoading} />
       <Splash />
       <Downloads />
       <HomeActions />

frontend/src/views/Livestream.tsx

@@ -0,0 +1,134 @@
+import {
+  Box,
+  Button,
+  Chip,
+  Container,
+  Paper,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow
+} from '@mui/material'
+import { useState } from 'react'
+import { interval } from 'rxjs'
+import LivestreamDialog from '../components/livestream/LivestreamDialog'
+import LivestreamSpeedDial from '../components/livestream/LivestreamSpeedDial'
+import NoLivestreams from '../components/livestream/NoLivestreams'
+import LoadingBackdrop from '../components/LoadingBackdrop'
+import { useSubscription } from '../hooks/observable'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { LiveStreamProgress, LiveStreamStatus } from '../types'
+
+const LiveStreamMonitorView: React.FC = () => {
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const [progress, setProgress] = useState<LiveStreamProgress>()
+  const [openDialog, setOpenDialog] = useState(false)
+
+  useSubscription(interval(1000), () => {
+    client
+      .progressLivestream()
+      .then(r => setProgress(r.result))
+  })
+
+  const formatMicro = (microseconds: number) => {
+    const ms = microseconds / 1_000_000
+    let s = ms / 1000
+
+    const hr = s / 3600
+    s %= 3600
+
+    const mt = s / 60
+    s %= 60
+
+    //           huh?
+    const ss = (Math.abs(s - 1)).toFixed(0).padStart(2, '0')
+    const mts = mt.toFixed(0).padStart(2, '0')
+    const hrs = hr.toFixed(0).padStart(2, '0')
+
+    return `${hrs}:${mts}:${ss}`
+  }
+
+  const mapStatusToChip = (status: LiveStreamStatus): React.ReactNode => {
+    switch (status) {
+      case LiveStreamStatus.WAITING:
+        return <Chip label='Waiting/Wait start' color='warning' size='small' />
+      case LiveStreamStatus.IN_PROGRESS:
+        return <Chip label='Downloading' color='primary' size='small' />
+      case LiveStreamStatus.COMPLETED:
+        return <Chip label='Completed' color='success' size='small' />
+      case LiveStreamStatus.ERRORED:
+        return <Chip label='Errored' color='error' size='small' />
+      default:
+        return <Chip label='Unknown state' color='secondary' size='small' />
+    }
+  }
+
+  const stopAll = () => client.killAllLivestream()
+  const stop = (url: string) => client.killLivestream(url)
+
+  return (
+    <>
+      <LoadingBackdrop isLoading={!progress} />
+
+      <LivestreamSpeedDial onOpen={() => setOpenDialog(s => !s)} onStopAll={stopAll} />
+      <LivestreamDialog open={openDialog} onClose={() => setOpenDialog(s => !s)} />
+
+      {!progress || Object.keys(progress).length === 0 ?
+        <NoLivestreams /> :
+        <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
+          <Paper sx={{
+            p: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '80vh',
+          }}>
+            <TableContainer component={Box}>
+              <Table sx={{ minWidth: '100%' }}>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>{i18n.t('livestreamURLInput')}</TableCell>
+                    <TableCell align="right">Status</TableCell>
+                    <TableCell align="right">Time to live</TableCell>
+                    <TableCell align="right">Starts on</TableCell>
+                    <TableCell align="right">Actions</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {progress && Object.keys(progress).map(k => (
+                    <TableRow
+                      key={k}
+                      sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                    >
+                      <TableCell>{k}</TableCell>
+                      <TableCell align='right'>
+                        {mapStatusToChip(progress[k].status)}
+                      </TableCell>
+                      <TableCell align='right'>
+                        {progress[k].status === LiveStreamStatus.WAITING
+                          ? formatMicro(Number(progress[k].waitTime))
+                          : "-"
+                        }
+                      </TableCell>
+                      <TableCell align='right'>
+                        {progress[k].status === LiveStreamStatus.WAITING
+                          ? new Date(progress[k].liveDate).toLocaleString()
+                          : "-"
+                        }
+                      </TableCell>
+                      <TableCell align='right'>
+                        <Button variant='contained' size='small' onClick={() => stop(k)}>
+                          Stop
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Paper>
+        </Container>}
+    </>
+  )
+}
+
+export default LiveStreamMonitorView

frontend/src/views/Login.tsx

@@ -6,19 +6,20 @@ 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'
-import { matchW } from 'fp-ts/lib/TaskEither'
-import { pipe } from 'fp-ts/lib/function'
 
 const LoginContainer = styled(Container)({
   display: 'flex',
@@ -54,7 +55,7 @@ export default function Login() {
   }
 
   const login = async () => {
-    const task = ffetch(`${url}/auth/login`, {
+    const task = ffetch<string>(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -63,21 +64,26 @@ export default function Login() {
         username,
         password,
       }),
-      redirect: 'follow'
     })
 
     pipe(
       task,
       matchW(
-        (l) => {
+        (error) => {
           setFormHasError(true)
-          pushMessage(l, 'error')
+          pushMessage(error, 'error')
         },
-        () => navigateAndReload()
+        (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%' }}>
@@ -86,12 +92,8 @@ export default function Login() {
             yt-dlp WebUI
           </Title>
           <Title fontWeight={'500'} fontSize={16} color={'gray'}>
-            Authentication token will expire after 30 days.
-          </Title>
-          <Title fontWeight={'500'} fontSize={16} color={'gray'}>
-            In order to enable RPC authentication append the --auth,
-            <br />
-            --user [username] and --pass [password] flags.
+            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"
@@ -110,6 +112,16 @@ export default function Login() {
           <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

@@ -4,7 +4,6 @@ import {
   Container,
   FormControl,
   FormControlLabel,
-  FormGroup,
   Grid,
   InputAdornment,
   InputLabel,
@@ -12,13 +11,14 @@ import {
   Paper,
   Select,
   SelectChangeEvent,
+  Slider,
   Stack,
   Switch,
   TextField,
   Typography,
   capitalize
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { Suspense, useEffect, useMemo, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import {
   Subject,
@@ -27,6 +27,7 @@ import {
   map,
   takeWhile
 } from 'rxjs'
+import { rpcPollingTimeState } from '../atoms/rpc'
 import {
   Language,
   Theme,
@@ -36,9 +37,9 @@ import {
   formatSelectionState,
   languageState,
   languages,
-  latestCliArgumentsState,
   pathOverridingState,
   servedFromReverseProxyState,
+  servedFromReverseProxySubDirState,
   serverAddressState,
   serverPortState,
   themeState
@@ -47,21 +48,25 @@ import CookiesTextField from '../components/CookiesTextField'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
-import { CliArguments } from '../lib/argsParser'
 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 [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
   const [theme, setTheme] = useRecoilState(themeState)
 
   const [invalidIP, setInvalidIP] = useState(false)
@@ -71,11 +76,20 @@ export default function Settings() {
 
   const { pushMessage } = useToast()
 
-  const argsBuilder = useMemo(() => new CliArguments().fromString(cliArgs), [])
-
+  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(
@@ -130,196 +144,225 @@ export default function Settings() {
    * Updates yt-dlp binary via RPC
    */
   const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
   }
 
   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')}
+    <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>
-            <FormGroup>
-              <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}>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        defaultChecked={reverseProxy}
-                        onChange={() => setReverseProxy(state => !state)}
-                      />
-                    }
-                    label={i18n.t('servedFromReverseProxyCheckbox')}
-                    sx={{ mb: 2 }}
-                  />
-                </Grid>
-              </Grid>
-              <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.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>
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={argsBuilder.noMTime}
-                    onChange={() => setCliArgs(argsBuilder.toggleNoMTime().toString())}
-                  />
+            <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)
                 }
-                label={i18n.t('noMTimeCheckbox')}
-                sx={{ mt: 3 }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={argsBuilder.extractAudio}
-                    onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
-                    disabled={formatSelection}
-                  />
+                if (value.endsWith('/')) {
+                  value = value.substring(0, value.length - 1)
                 }
-                label={i18n.t('extractAudioCheckbox')}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    defaultChecked={formatSelection}
-                    onChange={() => {
-                      setCliArgs(argsBuilder.disableExtractAudio().toString())
-                      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: 3 }}>
-                <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>
-            </FormGroup>
-          </Paper>
+                baseURL$.next(value)
+              }}
+              sx={{ mb: 2 }}
+            />
+          </Grid>
         </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>
+          <Suspense>
+            <CookiesTextField />
+          </Suspense>
+        </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/vite.config.ts

@@ -1,10 +1,12 @@
 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: [
+      million.vite({ auto: true }),
       react(),
       ViteYaml(),
     ],

go.mod

@@ -1,34 +1,42 @@
 module github.com/marcopeocchi/yt-dlp-web-ui
 
-go 1.20
+go 1.23
 
 require (
-	github.com/go-chi/chi/v5 v5.0.10
+	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.0.0
-	github.com/google/uuid v1.3.1
-	github.com/gorilla/websocket v1.5.0
-	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
-	golang.org/x/sys v0.13.0
+	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.23.0
+	golang.org/x/sync v0.8.0
+	golang.org/x/sys v0.25.0
 	gopkg.in/yaml.v3 v3.0.1
+	modernc.org/sqlite v1.32.0
 )
 
 require (
+	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/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
-	github.com/mattn/go-isatty v0.0.16 // 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
-	golang.org/x/mod v0.3.0 // indirect
-	golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 // indirect
-	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
-	lukechampine.com/uint128 v1.2.0 // indirect
-	modernc.org/cc/v3 v3.40.0 // indirect
-	modernc.org/ccgo/v3 v3.16.13 // indirect
-	modernc.org/libc v1.24.1 // indirect
-	modernc.org/mathutil v1.5.0 // indirect
-	modernc.org/memory v1.6.0 // indirect
-	modernc.org/opt v0.1.3 // indirect
-	modernc.org/sqlite v1.26.0 // indirect
-	modernc.org/strutil v1.1.3 // indirect
-	modernc.org/token v1.0.1 // 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.26.0 // indirect
+	modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a // indirect
+	modernc.org/libc v1.60.1 // 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,72 +1,124 @@
+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/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
-github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+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/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
-github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
-github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
-github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
-github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
-github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
-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-isatty v0.0.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+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/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+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/mod v0.3.0 h1:RM4zey1++hCTbCVQfnWeKs9/IEsaBLA8vTkd0WVtmH4=
-golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
+golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
+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.19.0 h1:fEdghXQSo20giMthA7cd28ZC+jts4amQ3YMXiP5oMQ8=
+golang.org/x/mod v0.19.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+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/oauth2 v0.22.0 h1:BzDx2FehcG7jJwgWLELCdmLuxk2i+x9UDpSiss2u0ZA=
+golang.org/x/oauth2 v0.22.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/oauth2 v0.23.0 h1:PbgcYx2W7i4LvjJWEbf0ngHV6qJYr86PkAV3bXdLEbs=
+golang.org/x/oauth2 v0.23.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-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.8.0 h1:3NFvSEYkUoMifnESzZl15y791HH1qU2xm6eCJU5ZPXQ=
+golang.org/x/sync v0.8.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-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
+golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.25.0 h1:r+8e+loiHxRqhXVl6ML1nO3l1+oFoWbnlu2Ehimmi34=
+golang.org/x/sys v0.25.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/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-20201124115921-2c860bdd6e78 h1:M8tBwCtWD/cZV9DZpFYRUgaymAYAr+aIUTWzDaM3uPs=
-golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+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.23.0 h1:SGsXPZ+2l4JsgaCKkx+FQ9YZ5XEtA1GZYuoDjenLjvg=
+golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
 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 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
-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=
-lukechampine.com/uint128 v1.2.0 h1:mBi/5l91vocEN8otkC5bDLhi2KdCticRiwbdB0O+rjI=
-lukechampine.com/uint128 v1.2.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
-modernc.org/cc/v3 v3.40.0 h1:P3g79IUS/93SYhtoeaHW+kRCIrYaxJ27MFPv+7kaTOw=
-modernc.org/cc/v3 v3.40.0/go.mod h1:/bTg4dnWkSXowUO6ssQKnOV0yMVxDYNIsIrzqTFDGH0=
-modernc.org/ccgo/v3 v3.16.13 h1:Mkgdzl46i5F/CNR/Kj80Ri59hC8TKAhZrYSaqvkwzUw=
-modernc.org/ccgo/v3 v3.16.13/go.mod h1:2Quk+5YgpImhPjv2Qsob1DnZ/4som1lJTodubIcoUkY=
-modernc.org/libc v1.24.1 h1:uvJSeCKL/AgzBo2yYIPPTy82v21KgGnizcGYfBHaNuM=
-modernc.org/libc v1.24.1/go.mod h1:FmfO1RLrU3MHJfyi9eYYmZBfi/R+tqZ6+hQ3yQQUkak=
-modernc.org/mathutil v1.5.0 h1:rV0Ko/6SfM+8G+yKiyI830l3Wuz1zRutdslNoQ0kfiQ=
-modernc.org/mathutil v1.5.0/go.mod h1:mZW8CKdRPY1v87qxC/wUdX5O1qDzXMP5TH3wjfpga6E=
-modernc.org/memory v1.6.0 h1:i6mzavxrE9a30whzMfwf7XWVODx2r5OYXvU46cirX7o=
-modernc.org/memory v1.6.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
+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.20.7 h1:skrinQsjxWfvj6nbC3ztZPJy+NuwmB3hV9zX/pthNYQ=
+modernc.org/ccgo/v4 v4.20.7/go.mod h1:UOkI3JSG2zT4E2ioHlncSOZsXbuDCZLvPi3uMlZT5GY=
+modernc.org/ccgo/v4 v4.21.0 h1:kKPI3dF7RIag8YcToh5ZwDcVMIv6VGa0ED5cvh0LMW4=
+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.5.0 h1:bJ9ChznK1L1mUtAQtxi0wi5AtAs5jQuw4PrPHO5pb6M=
+modernc.org/gc/v2 v2.5.0/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
+modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a h1:CfbpOLEo2IwNzJdMvE8aiRbPMxoTpgAJeyePh0SmO8M=
+modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
+modernc.org/libc v1.59.9 h1:k+nNDDakwipimgmJ1D9H466LhFeSkaPPycAs1OZiDmY=
+modernc.org/libc v1.59.9/go.mod h1:EY/egGEU7Ju66eU6SBqCNYaFUDuc4npICkMWnU5EE3A=
+modernc.org/libc v1.60.1 h1:at373l8IFRTkJIkAU85BIuUoBM4T1b51ds0E1ovPG2s=
+modernc.org/libc v1.60.1/go.mod h1:xJuobKuNxKH3RUatS7GjR+suWj+5c2K7bi4m/S5arOY=
+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/sqlite v1.26.0 h1:SocQdLRSYlA8W99V8YH0NES75thx19d9sB/aFc4R8Lw=
-modernc.org/sqlite v1.26.0/go.mod h1:FL3pVXie73rg3Rii6V/u5BoHlSoyeZeIgKZEgHARyCU=
-modernc.org/strutil v1.1.3 h1:fNMm+oJklMGYfU9Ylcywl0CO5O6nTfaowNsh2wpPjzY=
-modernc.org/strutil v1.1.3/go.mod h1:MEHNA7PdEnEwLvspRMtWTNnp2nnyvMfkimT1NKNAGbw=
-modernc.org/token v1.0.1 h1:A3qvTqOwexpfZZeyI0FeGPDlSWX5pjZu9hF4lU+EKWg=
-modernc.org/token v1.0.1/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
+modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
+modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
+modernc.org/sqlite v1.32.0 h1:6BM4uGza7bWypsw4fdLRsLxut6bHe4c58VeqjRgST8s=
+modernc.org/sqlite v1.32.0/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

@@ -11,9 +11,11 @@ import (
 	"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 (
+	host              string
 	port              int
 	queueSize         int
 	configFile        string
@@ -29,15 +31,21 @@ var (
 	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.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
+	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")
@@ -45,6 +53,9 @@ func init() {
 	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")
@@ -54,13 +65,13 @@ func init() {
 
 func main() {
 	frontend, err := fs.Sub(frontend, "frontend/dist")
-
 	if err != nil {
 		log.Fatalln(err)
 	}
 
 	c := config.Instance()
 
+	c.Host = host
 	c.Port = port
 	c.QueueSize = queueSize
 	c.DownloadPath = downloadPath
@@ -71,10 +82,25 @@ func main() {
 	c.Username = username
 	c.Password = password
 
-	// 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, "no config file found")
+	// limit concurrent downloads for systems with 2 or less logical cores
+	if runtime.NumCPU() <= 2 {
+		c.QueueSize = 1
 	}
 
-	server.RunBlocking(port, frontend, localDatabasePath)
+	// 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)
+	}
+
+	openid.Configure()
+
+	server.RunBlocking(&server.RunConfig{
+		Host:        c.Host,
+		Port:        c.Port,
+		DBPath:      localDatabasePath,
+		FileLogging: enableFileLogging,
+		LogFile:     logFile,
+		App:         frontend,
+		Swagger:     swagger,
+	})
 }

nix/common.nix

@@ -0,0 +1,9 @@
+{ lib }: {
+  version = "v3.1.2";
+  meta = {
+    description = "A terrible web ui for yt-dlp. Designed to be self-hosted.";
+    homepage = "https://github.com/marcopeocchi/yt-dlp-web-ui";
+    license = lib.licenses.mpl20;
+  };
+}
+

nix/devShell.nix

@@ -0,0 +1,9 @@
+{ inputsFrom ? [ ], mkShell, yt-dlp, nodejs, go }:
+mkShell {
+  inherit inputsFrom;
+  packages = [
+    yt-dlp
+    nodejs
+    go
+  ];
+}

nix/frontend.nix

@@ -0,0 +1,37 @@
+{ lib
+, stdenv
+, nodejs
+, pnpm
+}:
+let common = import ./common.nix { inherit lib; }; in
+stdenv.mkDerivation (finalAttrs: {
+  pname = "yt-dlp-web-ui-frontend";
+
+  inherit (common) version;
+
+  src = lib.fileset.toSource {
+    root = ../frontend;
+    fileset = ../frontend;
+  };
+
+  buildPhase = ''
+    npm run build
+  '';
+
+  installPhase = ''
+    mkdir -p $out/dist
+    cp -r dist/* $out/dist
+  '';
+
+  nativeBuildInputs = [
+    nodejs
+    pnpm.configHook
+  ];
+
+  pnpmDeps = pnpm.fetchDeps {
+    inherit (finalAttrs) pname version src;
+    hash = "sha256-NvXNDXkuoJ4vGeQA3bOhhc+KLBfke593qK0edcvzWTo=";
+  };
+
+  inherit (common) meta;
+})

nix/module.nix

@@ -0,0 +1,215 @@
+packages: { config, lib, pkgs, ... }:
+let
+  cfg = config.services.yt-dlp-web-ui;
+  inherit (pkgs.stdenv.hostPlatform) system;
+  pkg = packages.${system}.default;
+in
+{
+  /*
+    Some notes on the module design:
+    - Usually, you don't map out all of the options like this in attrsets,
+      but due to the software's nonstandard "config file overrides CLI" behavior,
+      we don't want to expose a config file catchall, and as such don't use '-conf'.
+
+    - Notably, '-driver' is missing as a configuration option. 
+      This should instead be customized with idiomatic Nix, overriding 'cfg.package' with
+      the desired yt-dlp package.
+
+    - The systemd service has been sandboxed as much as possible. This restricts configuration of 
+      data and logs dir. If you really need a custom data and logs dir, use BindPaths (man systemd.exec)
+  */
+  options.services.yt-dlp-web-ui = {
+    enable = lib.mkEnableOption "yt-dlp-web-ui";
+    package = lib.mkOption {
+      type = lib.types.package;
+      default = pkg;
+      defaultText = lib.literalMD "`packages.default` from the yt-dlp-web-ui flake.";
+      description = ''
+        The yt-dlp-web-ui package to use.
+      '';
+    };
+
+    user = lib.mkOption {
+      type = lib.types.str;
+      default = "yt-dlp-web-ui";
+      description = lib.mdDoc ''
+        User under which yt-dlp-web-ui runs.
+      '';
+    };
+
+    group = lib.mkOption {
+      type = lib.types.str;
+      default = "yt-dlp-web-ui";
+      description = lib.mdDoc ''
+        Group under which yt-dlp-web-ui runs.
+      '';
+    };
+
+    openFirewall = lib.mkOption {
+      type = lib.types.bool;
+      default = false;
+      description = lib.mdDoc ''
+        Whether to open the TCP port in the firewall.
+      '';
+    };
+
+    host = lib.mkOption {
+      default = "0.0.0.0";
+      type = lib.types.str;
+      description = lib.mdDoc ''
+        Host where yt-dlp-web-ui will listen at.
+      '';
+    };
+
+    port = lib.mkOption {
+      default = 3033;
+      type = lib.types.port;
+      description = lib.mdDoc ''
+        Port where yt-dlp-web-ui will listen at.
+      '';
+    };
+
+    downloadDir = lib.mkOption {
+      type = lib.types.str;
+      description = lib.mdDoc ''
+        The directory where yt-dlp-web-ui stores downloads.
+      '';
+    };
+
+    queueSize = lib.mkOption {
+      default = 2;
+      type = lib.types.ints.unsigned; # >= 0
+      description = lib.mdDoc ''
+        Queue size (concurrent downloads).
+      '';
+    };
+
+    logging = lib.mkEnableOption "logging";
+
+    rpcAuth = lib.mkOption {
+      description = lib.mdDoc ''
+        RPC Authentication settings.
+      '';
+      default = { };
+      type = lib.types.submodule {
+        options = {
+          enable = lib.mkEnableOption "RPC authentication";
+          user = lib.mkOption {
+            type = lib.types.str;
+            description = lib.mdDoc ''
+              Username required for auth.
+            '';
+          };
+          passwordFile = lib.mkOption {
+            type = with lib.types; nullOr str;
+            default = null;
+            description = lib.mdDoc ''
+              Path to the file containing the password required for auth.
+            '';
+          };
+          insecurePasswordText = lib.mkOption {
+            type = with lib.types; nullOr str;
+            default = null;
+            description = lib.mdDoc ''
+              Raw password required for auth.
+
+              It's strongly recommended to use 'passwordFile' instead of this option.
+              
+              **Don't use this option unless you know what you're doing!**. 
+              It writes the password to the world-readable Nix store, which is a big security risk.
+              More info: https://wiki.nixos.org/wiki/Comparison_of_secret_managing_schemes 
+            '';
+          };
+        };
+      };
+    };
+
+  };
+  config = lib.mkIf cfg.enable {
+    assertions = [
+      (lib.mkIf cfg.rpcAuth.enable {
+        assertion = lib.xor (cfg.rpcAuth.passwordFile == null) (cfg.rpcAuth.insecurePasswordText == null);
+        message = ''
+          RPC Auth is enabled for yt-dlp-web-ui! Exactly one RPC auth password source must be set!
+
+          Tip: You should set 'services.yt-dlp-web-ui.rpcAuth.passwordfile'!
+        '';
+      })
+    ];
+
+    networking.firewall.allowedTCPPorts = lib.mkIf cfg.openFirewall [ cfg.port ];
+
+    users.users = lib.mkIf (cfg.user == "yt-dlp-web-ui") {
+      yt-dlp-web-ui = {
+        inherit (cfg) group;
+        isSystemUser = true;
+      };
+    };
+
+    users.groups = lib.mkIf (cfg.group == "yt-dlp-web-ui") { yt-dlp-web-ui = { }; };
+
+    systemd.services.yt-dlp-web-ui = {
+      description = "yt-dlp-web-ui system service";
+      after = [ "network.target" ];
+      path = [ cfg.package pkgs.tree ];
+      wantedBy = [ "multi-user.target" ];
+      serviceConfig =
+        rec {
+          ExecStart =
+            let
+              password =
+                if cfg.rpcAuth.passwordFile == null
+                then cfg.rpcAuth.insecurePasswordText
+                else "$(cat ${cfg.rpcAuth.passwordFile})";
+              args = [
+                "-host ${cfg.host}"
+                "-port ${builtins.toString cfg.port}"
+                ''-out "${cfg.downloadDir}"''
+                "-qs ${builtins.toString cfg.queueSize}"
+              ] ++ (lib.optionals cfg.logging [
+                "-fl"
+                ''-lf "/var/log/${LogsDirectory}/yt-dlp-web-ui.log"''
+              ]) ++ (lib.optionals cfg.rpcAuth.enable [
+                "-auth"
+                "-user ${cfg.rpcAuth.user}"
+                "-pass ${password}"
+              ]);
+            in
+            "${lib.getExe cfg.package} ${lib.concatStringsSep " " args}";
+          User = cfg.user;
+          Group = cfg.group;
+          ProtectSystem = "strict";
+          ProtectHome = "read-only";
+          StateDirectory = "yt-dlp-web-ui";
+          WorkingDirectory = "/var/lib/${StateDirectory}"; # equivalent to the dir above
+          LogsDirectory = "yt-dlp-web-ui";
+          ReadWritePaths = [
+            cfg.downloadDir
+          ];
+          BindReadOnlyPaths = [
+            builtins.storeDir
+            # required for youtube DNS lookup
+            "${config.environment.etc."ssl/certs/ca-certificates.crt".source}:/etc/ssl/certs/ca-certificates.crt"
+          ] ++ lib.optionals (cfg.rpcAuth.enable && cfg.rpcAuth.passwordFile != null) [
+            cfg.rpcAuth.passwordFile
+          ];
+          CapabilityBoundingSet = "";
+          RestrictAddressFamilies = [ "AF_UNIX" "AF_INET" "AF_INET6" ];
+          RestrictNamespaces = true;
+          PrivateDevices = true;
+          PrivateUsers = true;
+          ProtectClock = true;
+          ProtectControlGroups = true;
+          ProtectKernelLogs = true;
+          ProtectKernelModules = true;
+          ProtectKernelTunables = true;
+          SystemCallArchitectures = "native";
+          SystemCallFilter = [ "@system-service" "~@privileged" ];
+          RestrictRealtime = true;
+          LockPersonality = true;
+          MemoryDenyWriteExecute = true;
+          ProtectHostname = true;
+        };
+    };
+  };
+}

nix/server.nix

@@ -0,0 +1,52 @@
+{ yt-dlp-web-ui-frontend, buildGoModule, lib, makeWrapper, yt-dlp, ... }:
+let
+  fs = lib.fileset;
+  common = import ./common.nix { inherit lib; };
+in
+buildGoModule {
+  pname = "yt-dlp-web-ui";
+  inherit (common) version;
+  src = fs.toSource rec {
+    root = ../.;
+    fileset = fs.difference root (fs.unions [
+      ### LIST OF FILES TO IGNORE ###
+      # frontend (this is included by the frontend.nix drv instead)
+      ../frontend
+      # documentation
+      ../examples
+      # docker
+      ../Dockerfile
+      ../docker-compose.yml
+      # nix
+      ./devShell.nix
+      ../.envrc
+      ./tests
+      # make
+      ../Makefile # this derivation does not use the project Makefile
+      # repo commons
+      ../.github
+      ../README.md
+      ../LICENSE.md
+      ../.gitignore
+      ../.vscode
+    ]);
+  };
+
+  # https://github.com/golang/go/issues/44507
+  preBuild = ''
+    cp -r ${yt-dlp-web-ui-frontend} frontend
+  '';
+
+  nativeBuildInputs = [ makeWrapper ];
+
+  postInstall = ''
+    wrapProgram $out/bin/yt-dlp-web-ui \
+      --prefix PATH : ${lib.makeBinPath [ yt-dlp ]}
+  '';
+
+  vendorHash = "sha256-guM/U9DROJMx2ctPKBQis1YRhaf6fKvvwEWgswQKMG0=";
+
+  meta = common.meta // {
+    mainProgram = "yt-dlp-web-ui";
+  };
+}

nix/tests/default.nix

@@ -0,0 +1,20 @@
+{ self, pkgs }: {
+  testServiceStarts = pkgs.testers.runNixOSTest (_: {
+    name = "service-starts";
+    nodes = {
+      machine = _: {
+        imports = [
+          self.nixosModules.default
+        ];
+
+        services.yt-dlp-web-ui = {
+          enable = true;
+          downloadDir = "/var/lib/yt-dlp-web-ui";
+        };
+      };
+    };
+    testScript = ''
+      machine.wait_for_unit("yt-dlp-web-ui")
+    '';
+  });
+}

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/config/config.go

@@ -2,12 +2,17 @@ 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"`
@@ -16,6 +21,13 @@ type Config struct {
 	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 (
@@ -32,15 +44,24 @@ 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/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/dbutils/migrate.go

@@ -1,26 +0,0 @@
-package dbutils
-
-import (
-	"context"
-	"database/sql"
-)
-
-func AutoMigrate(ctx context.Context, db *sql.DB) error {
-	conn, err := db.Conn(ctx)
-	if err != nil {
-		return err
-	}
-
-	defer conn.Close()
-
-	_, err = db.ExecContext(
-		ctx,
-		`CREATE TABLE IF NOT EXISTS templates (
-			id CHAR(36) PRIMARY KEY,
-			name VARCHAR(255) NOT NULL,
-			content TEXT NOT NULL
-		)`,
-	)
-
-	return err
-}

server/handlers/archive.go

@@ -1,41 +1,64 @@
 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/utils"
+	"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"`
-	SHASum      string    `json:"shaSum"`
 	ModTime     time.Time `json:"modTime"`
 	IsVideo     bool      `json:"isVideo"`
 	IsDirectory bool      `json:"isDirectory"`
 }
 
 func walkDir(root string) (*[]DirectoryEntry, error) {
-	files := []DirectoryEntry{}
-
 	dirs, err := os.ReadDir(root)
 	if err != nil {
 		return nil, err
 	}
 
+	var files []DirectoryEntry
+
 	for _, d := range dirs {
-		if !utils.IsValidEntry(d) {
+		if !isValidEntry(d) {
 			continue
 		}
 
@@ -50,8 +73,7 @@ func walkDir(root string) (*[]DirectoryEntry, error) {
 			Path:        path,
 			Name:        d.Name(),
 			Size:        info.Size(),
-			SHASum:      utils.ShaSumString(path),
-			IsVideo:     utils.IsVideo(d),
+			IsVideo:     isVideo(d),
 			IsDirectory: d.IsDir(),
 			ModTime:     info.ModTime(),
 		})
@@ -69,8 +91,7 @@ func ListDownloaded(w http.ResponseWriter, r *http.Request) {
 	root := config.Instance().DownloadPath
 	req := new(ListRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
@@ -88,9 +109,8 @@ func ListDownloaded(w http.ResponseWriter, r *http.Request) {
 	}
 
 	w.WriteHeader(http.StatusOK)
-	err = json.NewEncoder(w).Encode(files)
 
-	if err != nil {
+	if err := json.NewEncoder(w).Encode(files); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 	}
 }
@@ -100,21 +120,13 @@ type DeleteRequest = DirectoryEntry
 func DeleteFile(w http.ResponseWriter, r *http.Request) {
 	req := new(DeleteRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
-	sum := utils.ShaSumString(req.Path)
-	if sum != req.SHASum {
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
-		return
-	}
-
-	err = os.Remove(req.Path)
-	if err != nil {
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+	if err := os.Remove(req.Path); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
@@ -142,19 +154,98 @@ func SendFile(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	decodedStr := string(decoded)
+	filename := string(decoded)
 
 	root := config.Instance().DownloadPath
 
-	// TODO: further path / file validations
-	if strings.Contains(filepath.Dir(decodedStr), root) {
-		w.Header().Add(
-			"Content-Disposition",
-			"inline; filename="+filepath.Base(decodedStr),
-		)
-
-		http.ServeFile(w, r, decodedStr)
+	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

@@ -8,18 +8,19 @@ import (
 
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
+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) {
-	req := new(LoginRequest)
-	err := json.NewDecoder(r.Body).Decode(req)
-	if err != nil {
+	var req LoginRequest
+
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
@@ -30,7 +31,7 @@ func Login(w http.ResponseWriter, r *http.Request) {
 	)
 
 	if username != req.Username || password != req.Password {
-		http.Error(w, err.Error(), http.StatusBadRequest)
+		http.Error(w, "invalid username or password", http.StatusBadRequest)
 		return
 	}
 
@@ -47,21 +48,15 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	cookie := &http.Cookie{
-		Name:     utils.TOKEN_COOKIE_NAME,
-		HttpOnly: true,
-		Secure:   false,
-		Expires:  expiresAt, // 30 days
-		Value:    tokenString,
-		Path:     "/",
+	if err := json.NewEncoder(w).Encode(tokenString); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
 	}
-
-	http.SetCookie(w, cookie)
 }
 
 func Logout(w http.ResponseWriter, r *http.Request) {
 	cookie := &http.Cookie{
-		Name:     utils.TOKEN_COOKIE_NAME,
+		Name:     TOKEN_COOKIE_NAME,
 		HttpOnly: true,
 		Secure:   false,
 		Expires:  time.Now(),

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

@@ -2,6 +2,21 @@ 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"`
@@ -21,6 +36,7 @@ type DownloadInfo struct {
 	ACodec      string    `json:"acodec"`
 	Extension   string    `json:"ext"`
 	OriginalURL string    `json:"original_url"`
+	FileName    string    `json:"filename"`
 	CreatedAt   time.Time `json:"created_at"`
 }
 
@@ -42,6 +58,7 @@ type Format struct {
 	VCodec      string  `json:"vcodec"`
 	ACodec      string  `json:"acodec"`
 	Size        float32 `json:"filesize_approx"`
+	Language    string  `json:"language"`
 }
 
 // struct representing the response sent to the client
@@ -79,6 +96,7 @@ 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"`

server/internal/livestream/livestream.go

@@ -0,0 +1,215 @@
+package livestream
+
+import (
+	"bufio"
+	"errors"
+	"io"
+	"os"
+	"os/exec"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+const (
+	waiting = iota
+	inProgress
+	completed
+	errored
+)
+
+// Defines a generic livestream.
+// A livestream is identified by its url.
+type LiveStream struct {
+	url          string
+	proc         *os.Process        // used to manually kill the yt-dlp process
+	status       int                // whether is monitoring or completed
+	done         chan *LiveStream   // where to signal the completition
+	waitTimeChan chan time.Duration // time to livestream start
+	waitTime     time.Duration
+	liveDate     time.Time
+
+	mq *internal.MessageQueue
+	db *internal.MemoryDB
+}
+
+func New(url string, done chan *LiveStream, mq *internal.MessageQueue, db *internal.MemoryDB) *LiveStream {
+	return &LiveStream{
+		url:          url,
+		done:         done,
+		status:       waiting,
+		waitTime:     time.Second * 0,
+		waitTimeChan: make(chan time.Duration),
+		mq:           mq,
+		db:           db,
+	}
+}
+
+// Start the livestream monitoring process, once completion signals on the done channel
+func (l *LiveStream) Start() error {
+	cmd := exec.Command(
+		config.Instance().DownloaderPath,
+		l.url,
+		"--wait-for-video", "30", // wait for the stream to be live and recheck every 10 secs
+		"--no-colors", // no ansi color fuzz
+		"--simulate",
+		"--newline",
+		"--paths", config.Instance().DownloadPath,
+	)
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		l.status = errored
+		return err
+	}
+	defer stdout.Close()
+
+	if err := cmd.Start(); err != nil {
+		l.status = errored
+		return err
+	}
+
+	l.proc = cmd.Process
+	l.status = waiting
+
+	// Start monitoring when the livestream is goin to be live.
+	// If already live do nothing.
+	go l.monitorStartTime(stdout)
+
+	// Wait to the simulated download process to finish.
+	cmd.Wait()
+
+	// Set the job as completed and notify the parent the completion.
+	l.status = completed
+	l.done <- l
+
+	// Send the started livestream to the message queue! :D
+	p := &internal.Process{
+		Url:        l.url,
+		Livestream: true,
+		Params:     []string{"--downloader", "ffmpeg", "--no-part"},
+	}
+	l.db.Set(p)
+	l.mq.Publish(p)
+
+	return nil
+}
+
+func (l *LiveStream) monitorStartTime(r io.Reader) {
+	// yt-dlp shows the time in the stdout
+	scanner := bufio.NewScanner(r)
+
+	defer func() {
+		l.status = inProgress
+		close(l.waitTimeChan)
+	}()
+
+	// however the time to live is not shown in a new line (and atm there's nothing to do about)
+	// use a custom split funciton to set the line separator to \r instead of \r\n or \n
+	scanner.Split(stdoutSplitFunc)
+
+	waitTimeScanner := func() {
+		for scanner.Scan() {
+			// l.log <- scanner.Bytes()
+
+			// if this substring is in the current line the download is starting,
+			// no need to monitor the time to live.
+			//TODO: silly
+			if !strings.Contains(scanner.Text(), "Remaining time until next attempt") {
+				return
+			}
+
+			parts := strings.Split(scanner.Text(), ": ")
+			if len(parts) < 2 {
+				continue
+			}
+
+			startsIn := parts[1]
+			parsed, err := parseTimeSpan(startsIn)
+			if err != nil {
+				continue
+			}
+
+			l.liveDate = parsed
+
+			//TODO: check if using channels is stupid or not
+			// l.waitTimeChan <- time.Until(start)
+			l.waitTime = time.Until(parsed)
+		}
+	}
+
+	const TRIES = 5
+	/*
+		if it's waiting a livestream the 5th line will indicate the time to live
+		its a dumb and not robust method.
+
+		example:
+			[youtube] Extracting URL: https://www.youtube.com/watch?v=IQVbGfVVjgY
+			[youtube] IQVbGfVVjgY: Downloading webpage
+			[youtube] IQVbGfVVjgY: Downloading ios player API JSON
+			[youtube] IQVbGfVVjgY: Downloading web creator player API JSON
+			WARNING: [youtube] This live event will begin in 27 minutes.       <- STDERR, ignore
+			[wait] Waiting for 00:27:15 - Press Ctrl+C to try now              <- 5th line
+	*/
+	for range TRIES {
+		scanner.Scan()
+
+		if strings.Contains(scanner.Text(), "Waiting for") {
+			waitTimeScanner()
+		}
+	}
+}
+
+func (l *LiveStream) WaitTime() <-chan time.Duration {
+	return l.waitTimeChan
+}
+
+// Kills a livestream process and signal its completition
+func (l *LiveStream) Kill() error {
+	l.done <- l
+
+	if l.proc != nil {
+		return l.proc.Kill()
+	}
+
+	return errors.New("nil yt-dlp process")
+}
+
+// Parse the timespan returned from yt-dlp (time to live)
+//
+//	parsed := parseTimeSpan("76:12:15")
+//	fmt.Println(parsed) // 2024-07-21 13:59:59.634781 +0200 CEST
+func parseTimeSpan(timeStr string) (time.Time, error) {
+	parts := strings.Split(timeStr, ":")
+
+	hh, err := strconv.Atoi(parts[0])
+	if err != nil {
+		return time.Time{}, err
+	}
+	mm, err := strconv.Atoi(parts[1])
+	if err != nil {
+		return time.Time{}, err
+	}
+	ss, err := strconv.Atoi(parts[2])
+	if err != nil {
+		return time.Time{}, err
+	}
+
+	dd := 0
+
+	if hh > 24 {
+		dd = hh / 24
+		hh = hh % 24
+	}
+
+	start := time.Now()
+	start = start.AddDate(0, 0, dd)
+	start = start.Add(time.Duration(hh) * time.Hour)
+	start = start.Add(time.Duration(mm) * time.Minute)
+	start = start.Add(time.Duration(ss) * time.Second)
+
+	return start, nil
+}

server/internal/livestream/livestream_test.go

@@ -0,0 +1,36 @@
+package livestream
+
+import (
+	"testing"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+func setupTest() {
+	config.Instance().DownloaderPath = "yt-dlp"
+}
+
+func TestLivestream(t *testing.T) {
+	setupTest()
+
+	done := make(chan *LiveStream)
+
+	ls := New("https://www.youtube.com/watch?v=LSm1daKezcE", done, &internal.MessageQueue{}, &internal.MemoryDB{})
+	go ls.Start()
+
+	time.AfterFunc(time.Second*20, func() {
+		ls.Kill()
+	})
+
+	for {
+		select {
+		case wt := <-ls.WaitTime():
+			t.Log(wt)
+		case <-done:
+			t.Log("done")
+			return
+		}
+	}
+}

server/internal/livestream/monitor.go

@@ -0,0 +1,112 @@
+package livestream
+
+import (
+	"encoding/gob"
+	"log/slog"
+	"os"
+	"path/filepath"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+type Monitor struct {
+	db      *internal.MemoryDB     // where the just started livestream will be published
+	mq      *internal.MessageQueue // where the just started livestream will be published
+	streams map[string]*LiveStream // keeps track of the livestreams
+	done    chan *LiveStream       // to signal individual processes completition
+}
+
+func NewMonitor(mq *internal.MessageQueue, db *internal.MemoryDB) *Monitor {
+	return &Monitor{
+		mq:      mq,
+		db:      db,
+		streams: make(map[string]*LiveStream),
+		done:    make(chan *LiveStream),
+	}
+}
+
+// Detect each livestream completition, if done detach it from the monitor.
+func (m *Monitor) Schedule() {
+	for l := range m.done {
+		delete(m.streams, l.url)
+	}
+}
+
+func (m *Monitor) Add(url string) {
+	ls := New(url, m.done, m.mq, m.db)
+
+	go ls.Start()
+	m.streams[url] = ls
+}
+
+func (m *Monitor) Remove(url string) error {
+	return m.streams[url].Kill()
+}
+
+func (m *Monitor) RemoveAll() error {
+	for _, v := range m.streams {
+		if err := v.Kill(); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+func (m *Monitor) Status() LiveStreamStatus {
+	status := make(LiveStreamStatus)
+
+	for k, v := range m.streams {
+		// wt, ok := <-v.WaitTime()
+		// if !ok {
+		// 	continue
+		// }
+
+		status[k] = Status{
+			Status:   v.status,
+			WaitTime: v.waitTime,
+			LiveDate: v.liveDate,
+		}
+	}
+
+	return status
+}
+
+// Persist the monitor current state to a file.
+// The file is located in the configured config directory
+func (m *Monitor) Persist() error {
+	fd, err := os.Create(filepath.Join(config.Instance().Dir(), "livestreams.dat"))
+	if err != nil {
+		return err
+	}
+
+	defer fd.Close()
+
+	slog.Debug("persisting livestream monitor state")
+
+	return gob.NewEncoder(fd).Encode(m.streams)
+}
+
+// Restore a saved state and resume the monitored livestreams
+func (m *Monitor) Restore() error {
+	fd, err := os.Open(filepath.Join(config.Instance().Dir(), "livestreams.dat"))
+	if err != nil {
+		return err
+	}
+
+	defer fd.Close()
+
+	restored := make(map[string]*LiveStream)
+
+	if err := gob.NewDecoder(fd).Decode(&restored); err != nil {
+		return err
+	}
+
+	for k := range restored {
+		m.Add(k)
+	}
+
+	slog.Debug("restored livestream monitor state")
+
+	return nil
+}

server/internal/livestream/monitor_test.go

@@ -0,0 +1 @@
+package livestream

server/internal/livestream/status.go

@@ -0,0 +1,11 @@
+package livestream
+
+import "time"
+
+type LiveStreamStatus = map[string]Status
+
+type Status = struct {
+	Status   int           `json:"status"`
+	WaitTime time.Duration `json:"waitTime"`
+	LiveDate time.Time     `json:"liveDate"`
+}

server/internal/livestream/utils.go

@@ -0,0 +1,16 @@
+package livestream
+
+import "bufio"
+
+var stdoutSplitFunc = func(data []byte, atEOF bool) (advance int, token []byte, err error) {
+	for i := 0; i < len(data); i++ {
+		if data[i] == '\r' || data[i] == '\n' {
+			return i + 1, data[:i], nil
+		}
+	}
+	if !atEOF {
+		return 0, nil, nil
+	}
+
+	return 0, data, bufio.ErrFinalToken
+}

server/internal/memory_db.go

@@ -3,133 +3,128 @@ package internal
 import (
 	"encoding/gob"
 	"errors"
-	"fmt"
-	"log"
 	"os"
 	"path/filepath"
 	"sync"
 
 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"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
+	table map[string]*Process
+	mu    sync.RWMutex
+}
+
+func NewMemoryDB() *MemoryDB {
+	return &MemoryDB{
+		table: make(map[string]*Process),
+	}
 }
 
 // Get a process pointer given its id
 func (m *MemoryDB) Get(id string) (*Process, error) {
-	entry, ok := m.table.Load(id)
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+
+	entry, ok := m.table[id]
 	if !ok {
 		return nil, errors.New("no process found for the given key")
 	}
-	return entry.(*Process), nil
+
+	return entry, 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)
+
+	m.mu.Lock()
 	process.Id = id
+	m.table[id] = process
+	m.mu.Unlock()
+
 	return id
 }
 
-// Update a process info/metadata, given the process id
-//
-// Deprecated: will be removed anytime soon.
-func (m *MemoryDB) UpdateInfo(id string, info DownloadInfo) error {
-	entry, ok := m.table.Load(id)
-	if ok {
-		entry.(*Process).Info = info
-		m.table.Store(id, entry)
-		return nil
-	}
-	return fmt.Errorf("can't update row with id %s", id)
-}
-
-// Update a process progress data, given the process id
-// Used for updating completition percentage or ETA.
-//
-// Deprecated: will be removed anytime soon.
-func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {
-	entry, ok := m.table.Load(id)
-	if ok {
-		entry.(*Process).Progress = progress
-		m.table.Store(id, entry)
-		return nil
-	}
-	return fmt.Errorf("can't update row with id %s", id)
-}
-
 // Removes a process progress, given the process id
 func (m *MemoryDB) Delete(id string) {
-	m.table.Delete(id)
+	m.mu.Lock()
+	delete(m.table, id)
+	m.mu.Unlock()
 }
 
 func (m *MemoryDB) Keys() *[]string {
-	running := []string{}
-	m.table.Range(func(key, value any) bool {
-		running = append(running, key.(string))
-		return true
-	})
+	var running []string
+
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+
+	for id := range m.table {
+		running = append(running, id)
+	}
+
 	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 {
+
+	m.mu.RLock()
+	for k, v := range m.table {
 		running = append(running, ProcessResponse{
-			Id:       key.(string),
-			Info:     value.(*Process).Info,
-			Progress: value.(*Process).Progress,
-			Output:   value.(*Process).Output,
-			Params:   value.(*Process).Params,
+			Id:       k,
+			Info:     v.Info,
+			Progress: v.Progress,
+			Output:   v.Output,
+			Params:   v.Params,
 		})
-		return true
-	})
+	}
+	m.mu.RUnlock()
+
 	return &running
 }
 
-// WIP: Persist the database in a single file named "session.dat"
-func (m *MemoryDB) Persist() {
+// 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 {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
-	session := Session{
-		Processes: *running,
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+	session := Session{Processes: *running}
+
+	if err := gob.NewEncoder(fd).Encode(session); err != nil {
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
-	err = gob.NewEncoder(fd).Encode(session)
-	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
-	}
-
-	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
+	return nil
 }
 
-// WIP: Restore a persisted state
-func (m *MemoryDB) Restore() {
+// Restore a persisted state
+func (m *MemoryDB) Restore(mq *MessageQueue) {
 	fd, err := os.Open("session.dat")
 	if err != nil {
 		return
 	}
 
-	session := Session{}
+	var session Session
 
-	err = gob.NewDecoder(fd).Decode(&session)
-	if err != nil {
+	if err := gob.NewDecoder(fd).Decode(&session); err != nil {
 		return
 	}
 
+	m.mu.Lock()
+	defer m.mu.Unlock()
+
 	for _, proc := range session.Processes {
 		restored := &Process{
 			Id:       proc.Id,
@@ -140,12 +135,10 @@ func (m *MemoryDB) Restore() {
 			Params:   proc.Params,
 		}
 
-		m.table.Store(proc.Id, restored)
+		m.table[proc.Id] = restored
 
-		if restored.Progress.Percentage != "-1" {
-			go restored.Start()
+		if restored.Progress.Status != StatusCompleted {
+			mq.Publish(restored)
 		}
 	}
-
-	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }

server/internal/message_queue.go

@@ -1,65 +1,112 @@
 package internal
 
 import (
-	"log"
+	"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 {
-	producerCh chan *Process
-	consumerCh chan struct{}
+	concurrency int
+	eventBus    evbus.Bus
 }
 
 // Creates a new message queue.
 // By default it will be created with a size equals to nthe number of logical
-// CPU cores.
+// CPU cores -1.
 // The queue size can be set via the qs flag.
-func NewMessageQueue() *MessageQueue {
-	size := config.Instance().QueueSize
+func NewMessageQueue() (*MessageQueue, error) {
+	qs := config.Instance().QueueSize
 
-	if size <= 0 {
-		log.Fatalln("invalid queue size")
+	if qs <= 0 {
+		return nil, errors.New("invalid queue size")
 	}
 
 	return &MessageQueue{
-		producerCh: make(chan *Process, size),
-		consumerCh: make(chan struct{}, size),
-	}
+		concurrency: qs,
+		eventBus:    evbus.New(),
+	}, 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()
-	go p.SetMetadata()
-	m.producerCh <- p
+
+	m.eventBus.Publish(queueName, p)
 }
 
-// Publish a message to the queue and set the task to a peding state.
-// ENSURE P IS PART OF A PLAYLIST
-// Needs a further review
-func (m *MessageQueue) PublishPlaylistEntry(p *Process) {
-	m.producerCh <- 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) Subscriber() {
-	for msg := range m.producerCh {
-		m.consumerCh <- struct{}{}
-		go func(p *Process) {
-			p.Start()
-			<-m.consumerCh
-		}(msg)
-	}
+func (m *MessageQueue) downloadConsumer() {
+	sem := semaphore.NewWeighted(int64(m.concurrency))
+
+	m.eventBus.SubscribeAsync(queueName, func(p *Process) {
+		sem.Acquire(context.Background(), 1)
+		defer sem.Release(1)
+
+		slog.Info("received process from event bus",
+			slog.String("bus", queueName),
+			slog.String("consumer", "downloadConsumer"),
+			slog.String("id", p.getShortId()),
+		)
+
+		if p.Progress.Status != StatusCompleted {
+			slog.Info("started process",
+				slog.String("bus", queueName),
+				slog.String("id", p.getShortId()),
+			)
+			if p.Livestream {
+				// livestreams have higher priorty and they ignore the semaphore
+				go p.Start()
+			} else {
+				p.Start()
+			}
+		}
+	}, false)
 }
 
-// Empties the message queue
-func (m *MessageQueue) Empty() {
-	for range m.producerCh {
-		<-m.producerCh
-	}
-	for range m.consumerCh {
-		<-m.consumerCh
-	}
+// 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) {
+		sem.Acquire(context.Background(), 1)
+		defer sem.Release(1)
+
+		slog.Info("received process from event bus",
+			slog.String("bus", queueName),
+			slog.String("consumer", "metadataConsumer"),
+			slog.String("id", p.getShortId()),
+		)
+
+		if p.Progress.Status == StatusCompleted {
+			slog.Warn("proccess has an illegal state",
+				slog.String("id", p.getShortId()),
+				slog.Int("status", p.Progress.Status),
+			)
+			return
+		}
+
+		if err := p.SetMetadata(); err != nil {
+			slog.Error("failed to retrieve metadata",
+				slog.String("id", p.getShortId()),
+				slog.String("err", err.Error()),
+			)
+		}
+	}, false)
 }

server/internal/playlist.go

@@ -3,24 +3,26 @@ package internal
 import (
 	"encoding/json"
 	"errors"
-	"log"
+	"log/slog"
 	"os/exec"
+	"slices"
+	"strings"
 	"time"
 
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
 type metadata struct {
-	Entries []DownloadInfo `json:"entries"`
-	Count   int            `json:"playlist_count"`
-	Type    string         `json:"_type"`
+	Entries       []DownloadInfo `json:"entries"`
+	Count         int            `json:"playlist_count"`
+	PlaylistTitle string         `json:"title"`
+	Type          string         `json:"_type"`
 }
 
 func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 	var (
 		downloader = config.Instance().DownloaderPath
-		cmd        = exec.Command(downloader, req.URL, "-J")
+		cmd        = exec.Command(downloader, req.URL, "--flat-playlist", "-J")
 	)
 
 	stdout, err := cmd.StdoutPipe()
@@ -28,62 +30,73 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 		return err
 	}
 
-	m := metadata{}
+	var m metadata
 
-	err = cmd.Start()
-	if err != nil {
+	if err := cmd.Start(); err != nil {
 		return err
 	}
 
-	log.Println(cli.BgRed, "Decoding metadata", cli.Reset, req.URL)
+	slog.Info("decoding playlist metadata", slog.String("url", req.URL))
 
-	err = json.NewDecoder(stdout).Decode(&m)
-	if err != nil {
+	if err := json.NewDecoder(stdout).Decode(&m); err != nil {
 		return err
 	}
 
-	log.Println(cli.BgGreen, "Decoded metadata", cli.Reset, req.URL)
+	if err := cmd.Wait(); err != nil {
+		return err
+	}
+
+	slog.Info("decoded playlist metadata", slog.String("url", req.URL))
 
 	if m.Type == "" {
-		cmd.Wait()
 		return errors.New("probably not a valid URL")
 	}
 
 	if m.Type == "playlist" {
-		log.Println(
-			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
-		)
+		entries := slices.CompactFunc(slices.Compact(m.Entries), func(a DownloadInfo, b DownloadInfo) bool {
+			return a.URL == b.URL
+		})
 
-		for i, meta := range m.Entries {
-			delta := time.Second.Microseconds() * int64(i+1)
+		slog.Info("playlist detected", slog.String("url", req.URL), slog.Int("count", len(entries)))
+
+		for i, meta := range entries {
+			// detect playlist title from metadata since each playlist entry will be
+			// treated as an individual download
+			req.Rename = strings.Replace(
+				req.Rename,
+				"%(playlist_title)s",
+				m.PlaylistTitle,
+				1,
+			)
+
+			//XXX: it's idiotic but it works: virtually delay the creation time
+			meta.CreatedAt = time.Now().Add(time.Millisecond * time.Duration(i*10))
 
 			proc := &Process{
-				Url:      meta.OriginalURL,
+				Url:      meta.URL,
 				Progress: DownloadProgress{},
-				Output: DownloadOutput{
-					Filename: req.Rename,
-				},
-				Info:   meta,
-				Params: req.Params,
+				Output:   DownloadOutput{Filename: req.Rename},
+				Info:     meta,
+				Params:   req.Params,
 			}
 
-			proc.Info.URL = meta.OriginalURL
-			proc.Info.CreatedAt = time.Now().Add(time.Duration(delta))
+			proc.Info.URL = meta.URL
+
+			time.Sleep(time.Millisecond)
 
 			db.Set(proc)
-			proc.SetPending()
-			mq.PublishPlaylistEntry(proc)
+			mq.Publish(proc)
 		}
-
-		err = cmd.Wait()
-		return err
 	}
 
-	proc := &Process{Url: req.URL, Params: req.Params}
+	proc := &Process{
+		Url:    req.URL,
+		Params: req.Params,
+	}
 
+	db.Set(proc)
 	mq.Publish(proc)
-	log.Println("Sending new process to message queue", proc.Url)
+	slog.Info("sending new process to message queue", slog.String("url", proc.Url))
 
-	err = cmd.Wait()
-	return err
+	return cmd.Wait()
 }

server/internal/pool.go

@@ -0,0 +1,16 @@
+package internal
+
+type Pool []*Worker
+
+func (h Pool) Len() int           { return len(h) }
+func (h Pool) Less(i, j int) bool { return h[i].index < h[j].index }
+func (h Pool) Swap(i, j int)      { h[i], h[j] = h[j], h[i] }
+func (h *Pool) Push(x any)        { *h = append(*h, x.(*Worker)) }
+
+func (h *Pool) Pop() any {
+	old := *h
+	n := len(old)
+	x := old[n-1]
+	*h = old[0 : n-1]
+	return x
+}

server/internal/process.go

@@ -2,22 +2,24 @@ package internal
 
 import (
 	"bufio"
+	"bytes"
+	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
+	"io"
+	"log/slog"
 	"regexp"
+	"slices"
 	"sync"
 	"syscall"
 
-	"log"
 	"os"
 	"os/exec"
 	"strings"
 	"time"
 
-	"github.com/marcopeocchi/fazzoletti/slices"
-	"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/rx"
 )
 
 const template = `download:
@@ -34,27 +36,16 @@ const (
 	StatusErrored
 )
 
-type ProgressTemplate struct {
-	Percentage string  `json:"percentage"`
-	Speed      float32 `json:"speed"`
-	Size       string  `json:"size"`
-	Eta        float32 `json:"eta"`
-}
-
 // Process descriptor
 type Process struct {
-	Id       string
-	Url      string
-	Params   []string
-	Info     DownloadInfo
-	Progress DownloadProgress
-	Output   DownloadOutput
-	proc     *os.Process
-}
-
-type DownloadOutput struct {
-	Path     string
-	Filename string
+	Id         string
+	Url        string
+	Livestream bool
+	Params     []string
+	Info       DownloadInfo
+	Progress   DownloadProgress
+	Output     DownloadOutput
+	proc       *os.Process
 }
 
 // Starts spawns/forks a new yt-dlp process and parse its stdout.
@@ -65,13 +56,13 @@ type DownloadOutput struct {
 func (p *Process) Start() {
 	// escape bash variable escaping and command piping, you'll never know
 	// what they might come with...
-	p.Params = slices.Filter(p.Params, func(e string) bool {
+	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
 		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return !match
+		return match
 	})
 
-	p.Params = slices.Filter(p.Params, func(e string) bool {
-		return e != ""
+	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
+		return e == ""
 	})
 
 	out := DownloadOutput{
@@ -84,82 +75,127 @@ func (p *Process) Start() {
 	}
 
 	if p.Output.Filename != "" {
-		out.Filename = p.Output.Filename + ".%(ext)s"
+		out.Filename = p.Output.Filename
 	}
 
-	params := append([]string{
+	buildFilename(&p.Output)
+
+	//TODO: it spawn another one yt-dlp process, too slow.
+	go p.GetFileName(&out)
+
+	baseParams := []string{
 		strings.Split(p.Url, "?list")[0], //no playlist
 		"--newline",
 		"--no-colors",
 		"--no-playlist",
 		"--progress-template",
 		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
-		"-o",
-		fmt.Sprintf("%s/%s", out.Path, out.Filename),
-	}, p.Params...)
+	}
+
+	// if user asked to manually override the output path...
+	if !(slices.Contains(p.Params, "-P") || slices.Contains(p.Params, "--paths")) {
+		p.Params = append(p.Params, "-o")
+		p.Params = append(p.Params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
+	}
+
+	params := append(baseParams, p.Params...)
+
+	slog.Info("requesting download", slog.String("url", p.Url), slog.Any("params", params))
 
-	// ----------------- main block ----------------- //
 	cmd := exec.Command(config.Instance().DownloaderPath, params...)
 	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
 
-	r, err := cmd.StdoutPipe()
+	stdout, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Panicln(err)
+		slog.Error("failed to get a stdout pipe", slog.Any("err", err))
+		panic(err)
 	}
-	scan := bufio.NewScanner(r)
 
-	err = cmd.Start()
+	stderr, err := cmd.StderrPipe()
 	if err != nil {
-		log.Panicln(err)
+		slog.Error("failed to get a stderr pipe", slog.Any("err", err))
+		panic(err)
+	}
+
+	if err := cmd.Start(); err != nil {
+		slog.Error("failed to start yt-dlp process", slog.Any("err", err))
+		panic(err)
 	}
 
 	p.proc = cmd.Process
 
-	// --------------- progress block --------------- //
-	var (
-		sourceChan = make(chan []byte)
-		doneChan   = make(chan struct{})
-	)
+	ctx, cancel := context.WithCancel(context.Background())
+	defer func() {
+		stdout.Close()
+		p.Complete()
+		cancel()
+	}()
 
-	// spawn a goroutine that does the dirty job of parsing the stdout
-	// filling the channel with as many stdout line as yt-dlp produces (producer)
+	logs := make(chan []byte)
+	go produceLogs(stdout, logs)
+	go p.consumeLogs(ctx, logs)
+
+	go p.detectYtDlpErrors(stderr)
+
+	cmd.Wait()
+}
+
+func produceLogs(r io.Reader, logs chan<- []byte) {
 	go func() {
-		defer func() {
-			r.Close()
-			p.Complete()
-			doneChan <- struct{}{}
-			close(sourceChan)
-			close(doneChan)
-		}()
+		scanner := bufio.NewScanner(r)
 
-		for scan.Scan() {
-			sourceChan <- scan.Bytes()
+		for scanner.Scan() {
+			logs <- scanner.Bytes()
 		}
 	}()
+}
 
-	// Slows down the unmarshal operation to every 500ms
-	go func() {
-		rx.Sample(time.Millisecond*500, sourceChan, doneChan, func(event []byte) {
-			stdout := ProgressTemplate{}
-			err := json.Unmarshal(event, &stdout)
-			if err == nil {
-				p.Progress = DownloadProgress{
-					Status:     StatusDownloading,
-					Percentage: stdout.Percentage,
-					Speed:      stdout.Speed,
-					ETA:        stdout.Eta,
-				}
-				log.Println(
-					cli.BgGreen, "DL", cli.Reset,
-					cli.BgBlue, p.getShortId(), cli.Reset,
-					p.Url, stdout.Percentage,
-				)
-			}
-		})
-	}()
+func (p *Process) consumeLogs(ctx context.Context, logs <-chan []byte) {
+	for {
+		select {
+		case <-ctx.Done():
+			slog.Info("detaching from yt-dlp stdout",
+				slog.String("id", p.getShortId()),
+				slog.String("url", p.Url),
+			)
+			return
+		case entry := <-logs:
+			p.parseLogEntry(entry)
+		}
+	}
+}
 
-	// ------------- end progress block ------------- //
-	cmd.Wait()
+func (p *Process) parseLogEntry(entry []byte) {
+	var progress ProgressTemplate
+
+	if err := json.Unmarshal(entry, &progress); err != nil {
+		return
+	}
+
+	p.Progress = DownloadProgress{
+		Status:     StatusDownloading,
+		Percentage: progress.Percentage,
+		Speed:      progress.Speed,
+		ETA:        progress.Eta,
+	}
+
+	slog.Info("progress",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
+		slog.String("percentage", progress.Percentage),
+	)
+}
+
+func (p *Process) detectYtDlpErrors(r io.Reader) {
+	scanner := bufio.NewScanner(r)
+
+	for scanner.Scan() {
+		slog.Error("yt-dlp process error",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", scanner.Text()),
+		)
+	}
 }
 
 // Keep process in the memoryDB but marks it as complete
@@ -173,29 +209,30 @@ func (p *Process) Complete() {
 		ETA:        0,
 	}
 
-	shortId := p.getShortId()
-
-	log.Println(
-		cli.BgMagenta, "FINISH", cli.Reset,
-		cli.BgBlue, shortId, cli.Reset,
-		p.Url,
+	slog.Info("finished",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)
 }
 
 // Kill a process and remove it from the memory
 func (p *Process) Kill() error {
+	defer func() {
+		p.Progress.Status = StatusCompleted
+	}()
 	// yt-dlp uses multiple child process the parent process
 	// has been spawned with setPgid = true. To properly kill
 	// all subprocesses a SIGTERM need to be sent to the correct
 	// process group
-	if p.proc != nil {
-		pgid, err := syscall.Getpgid(p.proc.Pid)
-		if err != nil {
-			return err
-		}
-		err = syscall.Kill(-pgid, syscall.SIGTERM)
+	if p.proc == nil {
+		return errors.New("*os.Process not set")
+	}
 
-		log.Println("Killed process", p.Id)
+	pgid, err := syscall.Getpgid(p.proc.Pid)
+	if err != nil {
+		return err
+	}
+	if err := syscall.Kill(-pgid, syscall.SIGTERM); err != nil {
 		return err
 	}
 
@@ -203,14 +240,23 @@ func (p *Process) Kill() error {
 }
 
 // Returns the available format for this URL
-func (p *Process) GetFormatsSync() (DownloadFormats, error) {
+//
+// TODO: Move out from process.go
+func (p *Process) GetFormats() (DownloadFormats, error) {
 	cmd := exec.Command(config.Instance().DownloaderPath, p.Url, "-J")
-	stdout, err := cmd.Output()
 
+	stdout, err := cmd.Output()
 	if err != nil {
+		slog.Error("failed to retrieve metadata", slog.String("err", err.Error()))
 		return DownloadFormats{}, err
 	}
 
+	slog.Info(
+		"retrieving metadata",
+		slog.String("caller", "getFormats"),
+		slog.String("url", p.Url),
+	)
+
 	info := DownloadFormats{URL: p.Url}
 	best := Format{}
 
@@ -221,21 +267,10 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 
 	wg.Add(2)
 
-	if err != nil {
-		return DownloadFormats{}, err
-	}
-
-	log.Println(
-		cli.BgRed, "Metadata", cli.Reset,
-		cli.BgBlue, "Formats", cli.Reset,
-		p.Url,
-	)
-
 	go func() {
 		decodingError = json.Unmarshal(stdout, &info)
 		wg.Done()
 	}()
-
 	go func() {
 		decodingError = json.Unmarshal(stdout, &best)
 		wg.Done()
@@ -252,7 +287,31 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 	return info, nil
 }
 
+func (p *Process) GetFileName(o *DownloadOutput) error {
+	cmd := exec.Command(
+		config.Instance().DownloaderPath,
+		"--print", "filename",
+		"-o", fmt.Sprintf("%s/%s", o.Path, o.Filename),
+		p.Url,
+	)
+	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	out, err := cmd.Output()
+	if err != nil {
+		return err
+	}
+
+	p.Output.SavedFilePath = strings.Trim(string(out), "\n")
+	return nil
+}
+
 func (p *Process) SetPending() {
+	// Since video's title isn't available yet, fill in with the URL.
+	p.Info = DownloadInfo{
+		URL:       p.Url,
+		Title:     p.Url,
+		CreatedAt: time.Now(),
+	}
 	p.Progress.Status = StatusPending
 }
 
@@ -262,7 +321,21 @@ func (p *Process) SetMetadata() error {
 
 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Println("Cannot retrieve info for", p.Url)
+		slog.Error("failed to connect to stdout",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", err.Error()),
+		)
+		return err
+	}
+
+	stderr, err := cmd.StderrPipe()
+	if err != nil {
+		slog.Error("failed to connect to stderr",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", err.Error()),
+		)
 		return err
 	}
 
@@ -271,30 +344,46 @@ func (p *Process) SetMetadata() error {
 		CreatedAt: time.Now(),
 	}
 
-	err = cmd.Start()
-	if err != nil {
+	if err := cmd.Start(); err != nil {
 		return err
 	}
 
-	log.Println(
-		cli.BgRed, "Metadata", cli.Reset,
-		cli.BgBlue, p.getShortId(), cli.Reset,
-		p.Url,
+	var bufferedStderr bytes.Buffer
+
+	go func() {
+		io.Copy(&bufferedStderr, stderr)
+	}()
+
+	slog.Info("retrieving metadata",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)
 
-	err = json.NewDecoder(stdout).Decode(&info)
-	if err != nil {
+	if err := json.NewDecoder(stdout).Decode(&info); err != nil {
 		return err
 	}
 
 	p.Info = info
 	p.Progress.Status = StatusPending
 
-	err = cmd.Wait()
+	if err := cmd.Wait(); err != nil {
+		return errors.New(bufferedStderr.String())
+	}
 
-	return err
+	return nil
 }
 
-func (p *Process) getShortId() string {
-	return strings.Split(p.Id, "-")[0]
+func (p *Process) getShortId() string { return strings.Split(p.Id, "-")[0] }
+
+func buildFilename(o *DownloadOutput) {
+	if o.Filename != "" && strings.Contains(o.Filename, ".%(ext)s") {
+		o.Filename += ".%(ext)s"
+	}
+
+	o.Filename = strings.Replace(
+		o.Filename,
+		".%(ext)s.%(ext)s",
+		".%(ext)s",
+		1,
+	)
 }

server/internal/worker.go

@@ -0,0 +1,15 @@
+package internal
+
+type Worker struct {
+	requests chan Process // downloads to do
+	pending  int          // downloads pending
+	index    int          // index in the heap
+}
+
+func (w *Worker) Work(done chan *Worker) {
+	for {
+		req := <-w.requests
+		req.Start()
+		done <- w
+	}
+}

server/logging/file_logger.go

@@ -0,0 +1,89 @@
+package logging
+
+import (
+	"compress/gzip"
+	"io"
+	"os"
+	"sync"
+	"time"
+)
+
+/*
+	File base logger with log-rotate capabilities.
+	The rotate process must be initiated from an external goroutine.
+
+	After rotation the previous logs file are compressed with gzip algorithm.
+
+	The rotated log follows this naming: [filename].UTC time.gz
+*/
+
+// implements io.Writer interface
+type LogRotateWriter struct {
+	mu       sync.Mutex
+	fd       *os.File
+	filename string
+}
+
+func NewRotableLogger(filename string) (*LogRotateWriter, error) {
+	fd, err := os.Create(filename)
+	if err != nil {
+		return nil, err
+	}
+	w := &LogRotateWriter{filename: filename, fd: fd}
+	return w, nil
+}
+
+func (w *LogRotateWriter) Write(b []byte) (int, error) {
+	w.mu.Lock()
+	defer w.mu.Unlock()
+	return w.fd.Write(b)
+}
+
+func (w *LogRotateWriter) Rotate() error {
+	var err error
+	w.mu.Lock()
+
+	gzFile, err := os.Create(w.filename + "." + time.Now().Format(time.RFC3339) + ".gz")
+	if err != nil {
+		return err
+	}
+
+	data, err := io.ReadAll(w.fd)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		w.mu.Unlock()
+		w.gzipLog(gzFile, &data)
+	}()
+
+	_, err = os.Stat(w.filename)
+	if err != nil {
+		return err
+	}
+
+	if w.fd != nil {
+		err = w.fd.Close()
+		w.fd = nil
+		if err != nil {
+			return err
+		}
+	}
+
+	err = os.Remove(w.filename)
+	if err != nil {
+		return err
+	}
+
+	w.fd, err = os.Create(w.filename)
+	return err
+}
+
+func (w *LogRotateWriter) gzipLog(wr io.Writer, data *[]byte) error {
+	if _, err := gzip.NewWriter(wr).Write(*data); err != nil {
+		return err
+	}
+
+	return nil
+}

server/logging/handler.go

@@ -0,0 +1,87 @@
+package logging
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/gorilla/websocket"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/openid"
+)
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+	ReadBufferSize:  1000,
+	WriteBufferSize: 1000,
+}
+
+func webSocket(w http.ResponseWriter, r *http.Request) {
+	c, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	for msg := range logsObservable.Observe() {
+		c.WriteJSON(msg.V)
+	}
+}
+
+func sse(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "SSE not supported", http.StatusInternalServerError)
+		return
+	}
+
+	for msg := range logsObservable.Observe() {
+		if msg.E != nil {
+			http.Error(w, msg.E.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		var (
+			b  bytes.Buffer
+			sb strings.Builder
+		)
+
+		if err := json.NewEncoder(&b).Encode(msg.V); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		sb.WriteString("event: log\n")
+		sb.WriteString("data: ")
+		sb.WriteString(b.String())
+		sb.WriteRune('\n')
+		sb.WriteRune('\n')
+
+		fmt.Fprint(w, sb.String())
+
+		flusher.Flush()
+	}
+}
+
+func ApplyRouter() func(chi.Router) {
+	return func(r chi.Router) {
+		if config.Instance().RequireAuth {
+			r.Use(middlewares.Authenticated)
+		}
+		if config.Instance().UseOpenId {
+			r.Use(openid.Middleware)
+		}
+		r.Get("/ws", webSocket)
+		r.Get("/sse", sse)
+	}
+}

server/logging/observable_logger.go

@@ -0,0 +1,40 @@
+package logging
+
+import (
+	"time"
+
+	"github.com/reactivex/rxgo/v2"
+)
+
+/*
+	Logger implementation using the observable pattern.
+	Implements io.Writer interface.
+
+	The observable is an event source which drops everythigng unless there's
+	a subscriber connected.
+
+	The observer implementatios are a http ServerSentEvents handler and a
+	websocket one in handler.go
+*/
+
+var (
+	logsChan       = make(chan rxgo.Item, 100)
+	logsObservable = rxgo.
+			FromEventSource(logsChan, rxgo.WithBackPressureStrategy(rxgo.Drop)).
+			BufferWithTime(rxgo.WithDuration(time.Millisecond * 500))
+)
+
+type ObservableLogger struct{}
+
+func NewObservableLogger() *ObservableLogger {
+	return &ObservableLogger{}
+}
+
+func (o *ObservableLogger) Write(p []byte) (n int, err error) {
+	logsChan <- rxgo.Of(string(p))
+
+	n = len(p)
+	err = nil
+
+	return
+}

server/middleware/jwt.go

@@ -1,56 +1,54 @@
 package middlewares
 
 import (
+	"errors"
 	"fmt"
 	"net/http"
 	"os"
 	"time"
 
 	"github.com/golang-jwt/jwt/v5"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
+func validateToken(tokenValue string) error {
+	token, err := jwt.Parse(tokenValue, func(t *jwt.Token) (interface{}, error) {
+		if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
+			return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
+		}
+		return []byte(os.Getenv("JWT_SECRET")), nil
+	})
+	if err != nil {
+		return err
+	}
+
+	if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
+		expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
+		if err != nil {
+			return err
+		}
+
+		if time.Now().After(expiresAt) {
+			return errors.New("token expired")
+		}
+	} else {
+		return errors.New("invalid token")
+	}
+
+	return nil
+}
+
+// Authentication does NOT use http-Only cookies since there's not risk for XSS
+// By exposing the server through https it's completely safe to use httpheaders
+
 func Authenticated(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		if !config.Instance().RequireAuth {
-			next.ServeHTTP(w, r)
-			return
+		token := r.Header.Get("X-Authentication")
+		if token == "" {
+			token = r.URL.Query().Get("token")
 		}
 
-		cookie, err := r.Cookie(utils.TOKEN_COOKIE_NAME)
-
-		if err != nil {
-			http.Error(w, "invalid token", http.StatusBadRequest)
-			return
-		}
-
-		if cookie == nil {
-			http.Error(w, "invalid token", http.StatusBadRequest)
-			return
-		}
-
-		token, _ := jwt.Parse(cookie.Value, func(t *jwt.Token) (interface{}, error) {
-			if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
-				return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
-			}
-			return []byte(os.Getenv("JWT_SECRET")), nil
-		})
-
-		if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
-			expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
-
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			if time.Now().After(expiresAt) {
-				http.Error(w, "token expired", http.StatusBadRequest)
-				return
-			}
-		} else {
-			http.Error(w, "invalid token", http.StatusBadRequest)
+		if err := validateToken(token); err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}