persist app title + code refactoring

* Update EN, IT langs

Fixed EN lang mistype error
Added missing IT keys + added more translations

* Fixed files location

- livestreams.dat now uses same location as session.data (if specified on config.yml)
- .db.lock now uses same location as database file (if specified on config.yml)

* Update migrate.go

revert edit

---------

Co-authored-by: Marco Piovanello <35533749+marcopiovanello@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,27 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/go
+{
+	"name": "Go",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm",
+	"features": {
+		"ghcr.io/devcontainers-extra/features/pnpm:2": {},
+		"ghcr.io/devcontainers-extra/features/ffmpeg-apt-get:1": {},
+		"ghcr.io/devcontainers-extra/features/yt-dlp:2": {}
+	}
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "go version"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.dockerignore

@@ -1,15 +1,28 @@
-node_modules
+.pre-commit-config.yaml
-downloads
+.direnv/
+result/
+result
 dist
-package-lock.json
-pnpm-lock.yaml
 .pnpm-debug.log
-.parcel-cache
+node_modules
-.git
-src/server/core/*.exe
-src/server/core/yt-dlp
 .env
 *.mp4
 *.ytdl
+*.part
 *.db
+downloads
+.DS_Store
 build/
+yt-dlp-webui
+session.dat
+config.yml
+cookies.txt
+__debug*
+ui/
+.idea
+frontend/.pnp.cjs
+frontend/.pnp.loader.mjs
+frontend/.yarn/install-state.gz
+.db.lock
+livestreams.dat
+.git

.envrc

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

.gitattributes

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

.github/FUNDING.yml

@@ -10,4 +10,4 @@ liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ['https://paypal.me/marcofw']

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/workflows/docker-image.yml

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

.github/workflows/docker-publish.yml

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

.github/workflows/test-container.yml

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

.gitignore

@@ -1,11 +1,11 @@
-.parcel-cache
+.pre-commit-config.yaml
+.direnv/
+result/
+result
 dist
-package-lock.json
+.pnpm-store/
-pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
-src/server/core/*.exe
-src/server/core/yt-dlp
 .env
 *.mp4
 *.ytdl
@@ -15,3 +15,18 @@ downloads
 .DS_Store
 build/
 yt-dlp-webui
+session.dat
+config.yml
+cookies.txt
+__debug*
+ui/
+.idea
+.idea/
+frontend/.pnp.cjs
+frontend/.pnp.loader.mjs
+frontend/.yarn/install-state.gz
+.db.lock
+livestreams.dat
+.vite/deps
+archive.txt
+web_config.yml

.vscode/launch.json

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

Dockerfile

@@ -1,35 +1,42 @@
-# Multi stage build Dockerfile
+# Node (pnpm) ------------------------------------------------------------------
+FROM node:22-slim AS ui
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack prepare pnpm@10.0.0 --activate && corepack enable
+COPY . /usr/src/yt-dlp-webui
 
-# There's no point in using the edge (development branch of alpine)
-FROM alpine:3.17 AS build
-# folder structure
-WORKDIR /usr/src/yt-dlp-webui
-# install core dependencies
-RUN apk update && \
-    apk add nodejs npm go
-# copia la salsa
-COPY . .
-# build frontend
 WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN npm install
+
-RUN npm run build
+RUN rm -rf node_modules
-# build backend + incubator
+
+RUN pnpm install
+RUN pnpm run build
+# -----------------------------------------------------------------------------
+
+# Go --------------------------------------------------------------------------
+FROM golang AS build
+
 WORKDIR /usr/src/yt-dlp-webui
-RUN go build -o yt-dlp-webui
 
+COPY . .
+COPY --from=ui /usr/src/yt-dlp-webui/frontend /usr/src/yt-dlp-webui/frontend
 
-FROM alpine:3.17
+RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
+# -----------------------------------------------------------------------------
 
-WORKDIR /downloads
+# dependencies ----------------------------------------------------------------
-VOLUME /downloads
+FROM alpine:edge
+
+RUN apk update && \
+apk add ffmpeg yt-dlp ca-certificates curl wget psmisc
+
+VOLUME /downloads /config
 
 WORKDIR /app
 
-RUN apk update && \
+COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
-    apk add psmisc ffmpeg yt-dlp
 
-COPY --from=build /usr/src/yt-dlp-webui /app
+ENV JWT_SECRET=secret
-RUN chmod +x /app/yt-dlp-webui
 
 EXPOSE 3033
-CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

LICENSE.md

@@ -1,373 +0,0 @@
-Mozilla Public License Version 2.0
-==================================
-
-1. Definitions
---------------
-
-1.1. "Contributor"
-    means each individual or legal entity that creates, contributes to
-    the creation of, or owns Covered Software.
-
-1.2. "Contributor Version"
-    means the combination of the Contributions of others (if any) used
-    by a Contributor and that particular Contributor's Contribution.
-
-1.3. "Contribution"
-    means Covered Software of a particular Contributor.
-
-1.4. "Covered Software"
-    means Source Code Form to which the initial Contributor has attached
-    the notice in Exhibit A, the Executable Form of such Source Code
-    Form, and Modifications of such Source Code Form, in each case
-    including portions thereof.
-
-1.5. "Incompatible With Secondary Licenses"
-    means
-
-    (a) that the initial Contributor has attached the notice described
-        in Exhibit B to the Covered Software; or
-
-    (b) that the Covered Software was made available under the terms of
-        version 1.1 or earlier of the License, but not also under the
-        terms of a Secondary License.
-
-1.6. "Executable Form"
-    means any form of the work other than Source Code Form.
-
-1.7. "Larger Work"
-    means a work that combines Covered Software with other material, in
-    a separate file or files, that is not Covered Software.
-
-1.8. "License"
-    means this document.
-
-1.9. "Licensable"
-    means having the right to grant, to the maximum extent possible,
-    whether at the time of the initial grant or subsequently, any and
-    all of the rights conveyed by this License.
-
-1.10. "Modifications"
-    means any of the following:
-
-    (a) any file in Source Code Form that results from an addition to,
-        deletion from, or modification of the contents of Covered
-        Software; or
-
-    (b) any new file in Source Code Form that contains any Covered
-        Software.
-
-1.11. "Patent Claims" of a Contributor
-    means any patent claim(s), including without limitation, method,
-    process, and apparatus claims, in any patent Licensable by such
-    Contributor that would be infringed, but for the grant of the
-    License, by the making, using, selling, offering for sale, having
-    made, import, or transfer of either its Contributions or its
-    Contributor Version.
-
-1.12. "Secondary License"
-    means either the GNU General Public License, Version 2.0, the GNU
-    Lesser General Public License, Version 2.1, the GNU Affero General
-    Public License, Version 3.0, or any later versions of those
-    licenses.
-
-1.13. "Source Code Form"
-    means the form of the work preferred for making modifications.
-
-1.14. "You" (or "Your")
-    means an individual or a legal entity exercising rights under this
-    License. For legal entities, "You" includes any entity that
-    controls, is controlled by, or is under common control with You. For
-    purposes of this definition, "control" means (a) the power, direct
-    or indirect, to cause the direction or management of such entity,
-    whether by contract or otherwise, or (b) ownership of more than
-    fifty percent (50%) of the outstanding shares or beneficial
-    ownership of such entity.
-
-2. License Grants and Conditions
---------------------------------
-
-2.1. Grants
-
-Each Contributor hereby grants You a world-wide, royalty-free,
-non-exclusive license:
-
-(a) under intellectual property rights (other than patent or trademark)
-    Licensable by such Contributor to use, reproduce, make available,
-    modify, display, perform, distribute, and otherwise exploit its
-    Contributions, either on an unmodified basis, with Modifications, or
-    as part of a Larger Work; and
-
-(b) under Patent Claims of such Contributor to make, use, sell, offer
-    for sale, have made, import, and otherwise transfer either its
-    Contributions or its Contributor Version.
-
-2.2. Effective Date
-
-The licenses granted in Section 2.1 with respect to any Contribution
-become effective for each Contribution on the date the Contributor first
-distributes such Contribution.
-
-2.3. Limitations on Grant Scope
-
-The licenses granted in this Section 2 are the only rights granted under
-this License. No additional rights or licenses will be implied from the
-distribution or licensing of Covered Software under this License.
-Notwithstanding Section 2.1(b) above, no patent license is granted by a
-Contributor:
-
-(a) for any code that a Contributor has removed from Covered Software;
-    or
-
-(b) for infringements caused by: (i) Your and any other third party's
-    modifications of Covered Software, or (ii) the combination of its
-    Contributions with other software (except as part of its Contributor
-    Version); or
-
-(c) under Patent Claims infringed by Covered Software in the absence of
-    its Contributions.
-
-This License does not grant any rights in the trademarks, service marks,
-or logos of any Contributor (except as may be necessary to comply with
-the notice requirements in Section 3.4).
-
-2.4. Subsequent Licenses
-
-No Contributor makes additional grants as a result of Your choice to
-distribute the Covered Software under a subsequent version of this
-License (see Section 10.2) or under the terms of a Secondary License (if
-permitted under the terms of Section 3.3).
-
-2.5. Representation
-
-Each Contributor represents that the Contributor believes its
-Contributions are its original creation(s) or it has sufficient rights
-to grant the rights to its Contributions conveyed by this License.
-
-2.6. Fair Use
-
-This License is not intended to limit any rights You have under
-applicable copyright doctrines of fair use, fair dealing, or other
-equivalents.
-
-2.7. Conditions
-
-Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
-in Section 2.1.
-
-3. Responsibilities
--------------------
-
-3.1. Distribution of Source Form
-
-All distribution of Covered Software in Source Code Form, including any
-Modifications that You create or to which You contribute, must be under
-the terms of this License. You must inform recipients that the Source
-Code Form of the Covered Software is governed by the terms of this
-License, and how they can obtain a copy of this License. You may not
-attempt to alter or restrict the recipients' rights in the Source Code
-Form.
-
-3.2. Distribution of Executable Form
-
-If You distribute Covered Software in Executable Form then:
-
-(a) such Covered Software must also be made available in Source Code
-    Form, as described in Section 3.1, and You must inform recipients of
-    the Executable Form how they can obtain a copy of such Source Code
-    Form by reasonable means in a timely manner, at a charge no more
-    than the cost of distribution to the recipient; and
-
-(b) You may distribute such Executable Form under the terms of this
-    License, or sublicense it under different terms, provided that the
-    license for the Executable Form does not attempt to limit or alter
-    the recipients' rights in the Source Code Form under this License.
-
-3.3. Distribution of a Larger Work
-
-You may create and distribute a Larger Work under terms of Your choice,
-provided that You also comply with the requirements of this License for
-the Covered Software. If the Larger Work is a combination of Covered
-Software with a work governed by one or more Secondary Licenses, and the
-Covered Software is not Incompatible With Secondary Licenses, this
-License permits You to additionally distribute such Covered Software
-under the terms of such Secondary License(s), so that the recipient of
-the Larger Work may, at their option, further distribute the Covered
-Software under the terms of either this License or such Secondary
-License(s).
-
-3.4. Notices
-
-You may not remove or alter the substance of any license notices
-(including copyright notices, patent notices, disclaimers of warranty,
-or limitations of liability) contained within the Source Code Form of
-the Covered Software, except that You may alter any license notices to
-the extent required to remedy known factual inaccuracies.
-
-3.5. Application of Additional Terms
-
-You may choose to offer, and to charge a fee for, warranty, support,
-indemnity or liability obligations to one or more recipients of Covered
-Software. However, You may do so only on Your own behalf, and not on
-behalf of any Contributor. You must make it absolutely clear that any
-such warranty, support, indemnity, or liability obligation is offered by
-You alone, and You hereby agree to indemnify every Contributor for any
-liability incurred by such Contributor as a result of warranty, support,
-indemnity or liability terms You offer. You may include additional
-disclaimers of warranty and limitations of liability specific to any
-jurisdiction.
-
-4. Inability to Comply Due to Statute or Regulation
----------------------------------------------------
-
-If it is impossible for You to comply with any of the terms of this
-License with respect to some or all of the Covered Software due to
-statute, judicial order, or regulation then You must: (a) comply with
-the terms of this License to the maximum extent possible; and (b)
-describe the limitations and the code they affect. Such description must
-be placed in a text file included with all distributions of the Covered
-Software under this License. Except to the extent prohibited by statute
-or regulation, such description must be sufficiently detailed for a
-recipient of ordinary skill to be able to understand it.
-
-5. Termination
---------------
-
-5.1. The rights granted under this License will terminate automatically
-if You fail to comply with any of its terms. However, if You become
-compliant, then the rights granted under this License from a particular
-Contributor are reinstated (a) provisionally, unless and until such
-Contributor explicitly and finally terminates Your grants, and (b) on an
-ongoing basis, if such Contributor fails to notify You of the
-non-compliance by some reasonable means prior to 60 days after You have
-come back into compliance. Moreover, Your grants from a particular
-Contributor are reinstated on an ongoing basis if such Contributor
-notifies You of the non-compliance by some reasonable means, this is the
-first time You have received notice of non-compliance with this License
-from such Contributor, and You become compliant prior to 30 days after
-Your receipt of the notice.
-
-5.2. If You initiate litigation against any entity by asserting a patent
-infringement claim (excluding declaratory judgment actions,
-counter-claims, and cross-claims) alleging that a Contributor Version
-directly or indirectly infringes any patent, then the rights granted to
-You by any and all Contributors for the Covered Software under Section
-2.1 of this License shall terminate.
-
-5.3. In the event of termination under Sections 5.1 or 5.2 above, all
-end user license agreements (excluding distributors and resellers) which
-have been validly granted by You or Your distributors under this License
-prior to termination shall survive termination.
-
-************************************************************************
-*                                                                      *
-*  6. Disclaimer of Warranty                                           *
-*  -------------------------                                           *
-*                                                                      *
-*  Covered Software is provided under this License on an "as is"       *
-*  basis, without warranty of any kind, either expressed, implied, or  *
-*  statutory, including, without limitation, warranties that the       *
-*  Covered Software is free of defects, merchantable, fit for a        *
-*  particular purpose or non-infringing. The entire risk as to the     *
-*  quality and performance of the Covered Software is with You.        *
-*  Should any Covered Software prove defective in any respect, You     *
-*  (not any Contributor) assume the cost of any necessary servicing,   *
-*  repair, or correction. This disclaimer of warranty constitutes an   *
-*  essential part of this License. No use of any Covered Software is   *
-*  authorized under this License except under this disclaimer.         *
-*                                                                      *
-************************************************************************
-
-************************************************************************
-*                                                                      *
-*  7. Limitation of Liability                                          *
-*  --------------------------                                          *
-*                                                                      *
-*  Under no circumstances and under no legal theory, whether tort      *
-*  (including negligence), contract, or otherwise, shall any           *
-*  Contributor, or anyone who distributes Covered Software as          *
-*  permitted above, be liable to You for any direct, indirect,         *
-*  special, incidental, or consequential damages of any character      *
-*  including, without limitation, damages for lost profits, loss of    *
-*  goodwill, work stoppage, computer failure or malfunction, or any    *
-*  and all other commercial damages or losses, even if such party      *
-*  shall have been informed of the possibility of such damages. This   *
-*  limitation of liability shall not apply to liability for death or   *
-*  personal injury resulting from such party's negligence to the       *
-*  extent applicable law prohibits such limitation. Some               *
-*  jurisdictions do not allow the exclusion or limitation of           *
-*  incidental or consequential damages, so this exclusion and          *
-*  limitation may not apply to You.                                    *
-*                                                                      *
-************************************************************************
-
-8. Litigation
--------------
-
-Any litigation relating to this License may be brought only in the
-courts of a jurisdiction where the defendant maintains its principal
-place of business and such litigation shall be governed by laws of that
-jurisdiction, without reference to its conflict-of-law provisions.
-Nothing in this Section shall prevent a party's ability to bring
-cross-claims or counter-claims.
-
-9. Miscellaneous
-----------------
-
-This License represents the complete agreement concerning the subject
-matter hereof. If any provision of this License is held to be
-unenforceable, such provision shall be reformed only to the extent
-necessary to make it enforceable. Any law or regulation which provides
-that the language of a contract shall be construed against the drafter
-shall not be used to construe this License against a Contributor.
-
-10. Versions of the License
----------------------------
-
-10.1. New Versions
-
-Mozilla Foundation is the license steward. Except as provided in Section
-10.3, no one other than the license steward has the right to modify or
-publish new versions of this License. Each version will be given a
-distinguishing version number.
-
-10.2. Effect of New Versions
-
-You may distribute the Covered Software under the terms of the version
-of the License under which You originally received the Covered Software,
-or under the terms of any subsequent version published by the license
-steward.
-
-10.3. Modified Versions
-
-If you create software not governed by this License, and you want to
-create a new license for such software, you may create and use a
-modified version of this License if you rename the license and remove
-any references to the name of the license steward (except to note that
-such modified license differs from this License).
-
-10.4. Distributing Source Code Form that is Incompatible With Secondary
-Licenses
-
-If You choose to distribute Source Code Form that is Incompatible With
-Secondary Licenses under the terms of this version of the License, the
-notice described in Exhibit B of this License must be attached.
-
-Exhibit A - Source Code Form License Notice
--------------------------------------------
-
-  This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-If it is not possible or desirable to put the notice in a particular
-file, then You may include the notice in a location (such as a LICENSE
-file in a relevant directory) where a recipient would be likely to look
-for such a notice.
-
-You may add additional accurate notices of copyright ownership.
-
-Exhibit B - "Incompatible With Secondary Licenses" Notice
----------------------------------------------------------
-
-  This Source Code Form is "Incompatible With Secondary Licenses", as
-  defined by the Mozilla Public License, v. 2.0.

Makefile

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

README.md

@@ -1,53 +1,42 @@
+> [!NOTE]  
+> A poll is up to decide the future of yt-dlp-web-ui frontend! If you're interested you can take part.  
+> https://github.com/marcopiovanello/yt-dlp-web-ui/discussions/223
+
 # yt-dlp Web UI
 
 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. 😎👍
+High performance extendeable web ui and RPC server for yt-dlp with low impact on resources.
 
-Developed to be as lightweight as possible (because my server is basically an intel atom sbc). 
+Created for the only purpose of *fetching* videos from my server/nas and monitor upcoming livestreams. 
 
-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/marcopiovanello/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
-
-**Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
 
 ```sh
-docker pull marcobaobao/yt-dlp-webui:latest
+docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+# latest dev
+docker pull ghcr.io/marcopiovanello/yt-dlp-web-ui:latest
 ```
 
-![](https://i.ibb.co/RCpfg7q/image.png)
+## Donate to yt-dlp-webui development
-![](https://i.ibb.co/N2749CD/image.png)
+[PayPal](https://paypal.me/marcofw)
 
-## Changelog
+*Keeps the project alive!* 😃
-```
-05/03/22: Korean translation by kimpig
 
-03/03/22: cut-down image size by switching to Alpine linux based container
+## Community stuff
+Feel free to join :)
 
-01/03/22: Chinese translation by deluxghost
+[![Discord Banner](https://api.weblutions.com/discord/invite/3Sj9ZZHv/)](https://discord.gg/3Sj9ZZHv)
 
-03/02/22: i18n enabled! I need help with the translations :/
+## Some screeshots
+![image](https://github.com/user-attachments/assets/fc43a3fb-ecf9-449d-b5cb-5d5635020c00)
+![image](https://github.com/user-attachments/assets/3210f6ac-0dd8-403c-b839-3c24ff7d7d00)
+![image](https://github.com/user-attachments/assets/16450a40-cda6-4c8b-9d20-8ec36282f6ed)
 
-27/01/22: Multidownload implemented!
+## Video showcase
-
+[app.webm](https://github.com/marcopiovanello/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
-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.
-```
 
 ## Settings
 
@@ -60,42 +49,18 @@ The currently avaible settings are:
 -   Override the output filename
 -   Override the output path
 -   Pass custom yt-dlp arguments safely
-
+-   Download queue (limit concurrent downloads)
-![](https://i.ibb.co/YdBVcgc/image.png)
-![](https://i.ibb.co/Sf102b1/image.png)
 
 ## Format selection
 
-![fs1](https://i.ibb.co/8dgS6ym/image.png)
-
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.
 
 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!
 
-Future releases will have:
+## [Docker](https://github.com/marcopiovanello/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) run
--   ~~Multi download~~ *done*
--   ~~Exctract audio~~ *done*
--   ~~Format selection~~ *done*
--   Download archive
--   ~~ARM Build~~ *done available through ghcr.io*
-
-## Troubleshooting
--   **It says that it isn't connected/ip in the header is not defined.**
-    - You must set the server ip address in the settings section (gear icon).
--   **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
 ```sh
-# recomended for ARM and x86 devices 
+docker pull marcobaobao/yt-dlp-webui
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
-# or
-# docker pull marcobaobao/yt-dlp-webui:latest
-docker run -d -p 3033:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-
-# or even
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-docker create --name yt-dlp-webui -p 8082:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
 
 Or with docker but building the container manually.
@@ -103,9 +68,54 @@ Or with docker but building the container manually.
 ```sh
 docker build -t yt-dlp-webui .
 docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui
+
+docker run -d -p 3033:3033 \
+  -v <your dir>:/downloads \  
+  -v <your dir>:/config \ # optional
+  yt-dlp-webui
+
 ```
 
-## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
+If you opt to add RPC authentication...
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    -v /path/for/config:/config \ # optional
+    marcobaobao/yt-dlp-webui \
+    --auth \
+    --user your_username \
+    --pass your_pass
+```
+
+If you wish for limiting the download queue size...
+
+e.g. limiting max 2 concurrent download.
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    marcobaobao/yt-dlp-webui \
+    --qs 2
+```
+
+### Docker Compose
+```yaml
+services:
+  yt-dlp-webui:
+    image: marcobaobao/yt-dlp-webui
+    ports:
+      - 3033:3033
+    volumes:
+      - <your dir>:/downloads # replace <your dir> with a directory on your host system
+    healthcheck:
+      test: curl -f http://localhost:3033 || exit 1
+    restart: unless-stopped
+```
+
+## [Prebuilt binaries](https://github.com/marcopiovanello/yt-dlp-web-ui/releases) installation
 
 ```sh
 # download the latest release from the releases page
@@ -121,17 +131,82 @@ yt-dlp-webui --out /home/user/downloads --driver /opt/soemdir/yt-dlp
 yt-dlp-webui --conf /home/user/.config/yt-dlp-webui.conf
 ```
 
+### Arguments
+```sh
+Usage yt-dlp-webui:
+  -auth
+        Enable RPC authentication
+  -conf string
+        Config file path (default "./config.yml")
+  -db string
+        local database path (default "local.db")
+  -driver string
+        yt-dlp executable path (default "yt-dlp")
+  -fl
+        enable file based logging
+  -host string
+        Host where server will listen at (default "0.0.0.0")
+  -lf string
+        set log file location (default "yt-dlp-webui.log")
+  -out string
+        Where files will be saved (default ".")
+  -pass string
+        Password required for auth
+  -port int
+        Port where server will listen at (default 3033)
+  -qs int
+        Queue size (concurrent downloads) (default 2)
+  -session string
+        session file path (default ".")
+  -user string
+        Username required for auth
+  -web string
+        frontend web resources path
+```
+
 ### 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
 
 ---
+# Host where server will listen at (default: "0.0.0.0")
+#host: 0.0.0.0
+
+# Port where server will listen at (default: 3033)
 port: 8989
+
+# Directory where downloaded files will be stored (default: ".")
 downloadPath: /home/ren/archive
-downloaderPath: /usr/local/bin/yt-dlp
+
+# [optional] Enable RPC authentication (requires username and password)
+require_auth: true
+username: my_username
+password: my_random_secret
+
+# [optional] The download queue size (default: logical cpu cores)
+queue_size: 4 # min. 2
+
+# [optional] Full path to the yt-dlp (default: "yt-dlp")
+#downloaderPath: /usr/local/bin/yt-dlp
+
+# [optional] Enable file based logging with rotation (default: false)
+#enable_file_logging: false
+
+# [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: .
+
+# [optional] Path where the sqlite database will be created/opened (default: "./local.db")
+#local_database_path
+
+# [optional] Path where a custom frontend will be loaded (instead of the embedded one)
+#frontend_path: ./web/solid-frontend
 ```
 
 ### Systemd integration
@@ -154,17 +229,39 @@ 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
-# the dependencies are: python3, ffmpeg, nodejs, psmisc, go.
+# the dependencies are: yt-dlp, ffmpeg, nodejs, go, make.
 
-cd frontend
+make all
-npm i
-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?
@@ -173,30 +270,33 @@ 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
+## Custom frontend
--   **Will it availabe for Raspberry Pi/ generic ARM devices?**
+To load a custom frontend you need to specify its path either in the config file ([see config file](#config-file)) or via flags.
-    - Yes, it's currently available through ghcr.io
-      ```
-      docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
-      ```
-      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
--   **Why the docker image is so heavy?**
-    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
 
--   **Why is it so slow to start a download?**
+The frontend needs to follow this structure:
-    - I genuinely don't know. I know that standalone yt-dlp is slow to start up even on my M1 Mac, so....
+```
+path/to/my/frontend
+├── assets
+│   ├── js-chunk-1.js (example)
+│   ├── js-chunk-2.js (example)
+│   ├── style.css (example)
+└── index.html
+```
+
+`assets` is where the resources will be loaded.  
+`index.html` is the entrypoint.
+
+## 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.**
+    - In some circumstances, you must set the server ip address or hostname in the settings section (gear icon).
+-   **The download  doesn't start.**
+    - Simply, yt-dlp process takes a lot of time to fire up. (yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop. Furthermore some yt-dlp builds are slower than others)

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

examples/Caddyfile

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

examples/docker-compose-nginx/app.conf

@@ -0,0 +1,27 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://app:3033;
+        proxy_redirect off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+
+        client_max_body_size    20000m;
+        proxy_connect_timeout   5000;
+        proxy_send_timeout      5000;
+        proxy_read_timeout      5000;
+        send_timeout            5000;
+    }
+}

examples/docker-compose-nginx/docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  app:
+    image: marcobaobao/yt-dlp-webui
+    volumes:
+      - ./downloads:/downloads
+    restart: unless-stopped
+  nginx:
+    image: nginx:alpine
+    restart: unless-stopped
+    volumes:
+      - ./app.conf:/etc/nginx/conf.d/app.conf
+    depends_on: 
+      - app
+    ports: 
+      - 80:80

examples/nginx.conf

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

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,36 +1,40 @@
 {
   "name": "yt-dlp-webui",
-  "version": "2.0.6",
+  "version": "3.2.5",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build"
   },
-  "author": "marcopeocchi",
+  "type": "module",
-  "license": "MPL-2.0",
+  "author": "marcopiovanello",
+  "license": "GPL-3.0-only",
+  "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.11.0",
+    "@fontsource/roboto": "^5.0.13",
-    "@mui/material": "^5.11.5",
+    "@fontsource/roboto-mono": "^5.0.18",
-    "@reduxjs/toolkit": "^1.9.1",
+    "@mui/icons-material": "^6.2.0",
-    "react": "^18.2.0",
+    "@mui/material": "^6.2.0",
-    "react-dom": "^18.2.0",
+    "fp-ts": "^2.16.5",
-    "react-redux": "^8.0.5",
+    "jotai": "^2.10.3",
-    "react-router-dom": "^6.7.0",
+    "jotai-cache": "^0.5.0",
-    "rxjs": "^7.8.0",
+    "react": "^19.0.0",
-    "uuid": "^9.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.23.1",
+    "react-virtuoso": "^4.7.11",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.14.2",
-    "@types/react": "^18.0.21",
+    "@types/react": "^19.0.1",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^5.7.2",
-    "buffer": "^6.0.3",
+    "vite": "^6.0.3"
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
   }
 }

frontend/src/App.tsx

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

frontend/src/Home.tsx

@@ -1,478 +0,0 @@
-import { FileUpload } from "@mui/icons-material";
-import {
-  Backdrop,
-  Button,
-  ButtonGroup,
-  CircularProgress,
-  Container,
-  FormControl,
-  Grid,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Snackbar,
-  styled,
-  TextField,
-  Typography
-} from "@mui/material";
-import { Buffer } from 'buffer';
-import { useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { DownloadsCardView } from "./components/DownloadsCardView";
-import { DownloadsListView } from "./components/DownloadsListView";
-import { CliArguments } from "./features/core/argsParser";
-import I18nBuilder from "./features/core/intl";
-import { RPCClient } from "./features/core/rpcClient";
-import { connected, setFreeSpace } from "./features/status/statusSlice";
-import { RootState } from "./stores/store";
-import { IDLMetadata, RPCResult } from "./types";
-import { isValidURL, toFormatArgs } from "./utils";
-
-type Props = {
-  socket: WebSocket
-}
-
-export default function Home({ socket }: Props) {
-  // redux state
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>();
-  const [downloadFormats, setDownloadFormats] = useState<IDLMetadata>();
-  const [pickedVideoFormat, setPickedVideoFormat] = useState('');
-  const [pickedAudioFormat, setPickedAudioFormat] = useState('');
-  const [pickedBestFormat, setPickedBestFormat] = useState('');
-
-  const [customArgs, setCustomArgs] = useState('');
-  const [downloadPath, setDownloadPath] = useState(0);
-  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([]);
-
-  const [fileNameOverride, setFilenameOverride] = useState('');
-
-  const [url, setUrl] = useState('');
-  const [workingUrl, setWorkingUrl] = useState('');
-
-  const [showBackdrop, setShowBackdrop] = useState(true);
-  const [showToast, setShowToast] = useState(true);
-
-  // memos
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(socket), [settings.serverAddr, settings.serverPort])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
-
-  /* -------------------- Effects -------------------- */
-  /* WebSocket connect event handler*/
-  useEffect(() => {
-    socket.onopen = () => {
-      dispatch(connected())
-      setCustomArgs(localStorage.getItem('last-input-args') ?? '')
-      setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
-    }
-  }, [])
-
-  useEffect(() => {
-    if (status.connected) {
-      client.running()
-      const interval = setInterval(() => client.running(), 1000)
-      return () => clearInterval(interval)
-    }
-  }, [status.connected])
-
-  useEffect(() => {
-    client.freeSpace()
-      .then(bytes => dispatch(setFreeSpace(bytes.result)))
-  }, [])
-
-  useEffect(() => {
-    socket.onmessage = (event) => {
-      const res = client.decode(event.data)
-      switch (typeof res.result) {
-        case 'object':
-          setActiveDownloads(
-            (res.result ?? [])
-              .filter((r: RPCResult) => !!r.info.url)
-              .sort((a: RPCResult, b: RPCResult) => a.info.title.localeCompare(b.info.title))
-          )
-          break
-        default:
-          break
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (activeDownloads && activeDownloads.length >= 0) {
-      setShowBackdrop(false)
-    }
-  }, [activeDownloads?.length])
-
-  useEffect(() => {
-    client.directoryTree()
-      .then(data => {
-        setAvailableDownloadPaths(data.result)
-      })
-  }, [])
-
-  /* -------------------- component functions -------------------- */
-
-  /**
-   * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
-   */
-  const sendUrl = (immediate?: string) => {
-    const codes = new Array<string>();
-    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat);
-    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat);
-    if (pickedBestFormat !== '') codes.push(pickedBestFormat);
-
-    client.download(
-      immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
-      availableDownloadPaths[downloadPath] ?? '',
-      fileNameOverride
-    )
-
-    setUrl('')
-    setWorkingUrl('')
-    setShowBackdrop(true)
-
-    setTimeout(() => {
-      resetInput()
-      setShowBackdrop(true)
-      setDownloadFormats(undefined)
-    }, 250);
-  }
-
-  /**
-   * Retrive url from input and display the formats selection view
-   */
-  const sendUrlFormatSelection = () => {
-    setWorkingUrl(url)
-    setUrl('')
-    setPickedAudioFormat('')
-    setPickedVideoFormat('')
-    setPickedBestFormat('')
-
-    setShowBackdrop(true)
-
-    client.formats(url)
-      ?.then(formats => {
-        setDownloadFormats(formats.result)
-        setShowBackdrop(false)
-        resetInput()
-      })
-  }
-
-  /**
-   * Update the url state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrl(e.target.value)
-  }
-
-  /**
-   * Update the filename override state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilenameOverride(e.target.value)
-    localStorage.setItem('last-filename-override', e.target.value)
-  }
-
-  /**
-   * Update the custom args state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomArgs(e.target.value)
-    localStorage.setItem("last-input-args", e.target.value)
-  }
-
-  /**
-   * Abort a specific download if id's provided, other wise abort all running ones.
-   * @param id The download id / pid
-   * @returns void
-   */
-  const abort = (id?: string) => {
-    if (id) {
-      client.kill(id)
-      return
-    }
-    client.killAll()
-  }
-
-  const parseUrlListFile = (event: any) => {
-    const urlList = event.target.files
-    const reader = new FileReader()
-    reader.addEventListener('load', $event => {
-      const base64 = $event.target?.result!.toString().split(',')[1]
-      Buffer.from(base64!, 'base64')
-        .toString()
-        .trimEnd()
-        .split('\n')
-        .filter(_url => isValidURL(_url))
-        .forEach(_url => sendUrl(_url))
-    })
-    reader.readAsDataURL(urlList[0])
-  }
-
-  const resetInput = () => {
-    const input = document.getElementById('urlInput') as HTMLInputElement;
-    input.value = '';
-
-    const filename = document.getElementById('customFilenameInput') as HTMLInputElement;
-    if (filename) {
-      filename.value = '';
-    }
-  }
-
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  });
-
-  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={showBackdrop}
-      >
-        <CircularProgress color="primary" />
-      </Backdrop>
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Paper
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Grid container>
-              <TextField
-                fullWidth
-                id="urlInput"
-                label={i18n.t('urlInput')}
-                variant="outlined"
-                onChange={handleUrlChange}
-                disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <label htmlFor="icon-button-file">
-                        <Input id="icon-button-file" type="file" accept=".txt" onChange={parseUrlListFile} />
-                        <IconButton color="primary" aria-label="upload file" component="span">
-                          <FileUpload />
-                        </IconButton>
-                      </label>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid container spacing={1} sx={{ mt: 1 }}>
-              {
-                settings.enableCustomArgs ?
-                  <Grid item xs={12}>
-                    <TextField
-                      id="customArgsInput"
-                      fullWidth
-                      label={i18n.t('customArgsInput')}
-                      variant="outlined"
-                      onChange={handleCustomArgsChange}
-                      value={customArgs}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
-              }
-              {
-                settings.fileRenaming ?
-                  <Grid item xs={8}>
-                    <TextField
-                      id="customFilenameInput"
-                      fullWidth
-                      label={i18n.t('customFilename')}
-                      variant="outlined"
-                      value={fileNameOverride}
-                      onChange={handleFilenameOverrideChange}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
-              }
-              {
-                settings.pathOverriding ?
-                  <Grid item xs={4}>
-                    <FormControl fullWidth>
-                      <InputLabel>{i18n.t('customPath')}</InputLabel>
-                      <Select
-                        label={i18n.t('customPath')}
-                        defaultValue={0}
-                        variant={'outlined'}
-                        value={downloadPath}
-                        onChange={(e) => setDownloadPath(Number(e.target.value))}
-                      >
-                        {availableDownloadPaths.map((val: string, idx: number) => (
-                          <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  </Grid> :
-                  null
-              }
-            </Grid>
-            <Grid container spacing={1} pt={2}>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  disabled={url === ''}
-                  onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
-                >
-                  {i18n.t('startButton')}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  onClick={() => abort()}
-                >
-                  {i18n.t('abortAllButton')}
-                </Button>
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-      </Grid >
-      {/* Format Selection grid */}
-      {
-        downloadFormats ? <Grid container spacing={2} mt={2}>
-          <Grid item xs={12}>
-            <Paper
-              sx={{
-                p: 2,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Grid container>
-                <Grid item xs={12}>
-                  <Typography variant="h6" component="div" pb={1}>
-                    {downloadFormats.title}
-                  </Typography>
-                  {/* <Skeleton variant="rectangular" height={180} /> */}
-                </Grid>
-                <Grid item xs={12} pb={1}>
-                  <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
-                </Grid>
-                {/* video only */}
-                <Grid item xs={12}>
-                  <Typography variant="body1" component="div">
-                    Best quality
-                  </Typography>
-                </Grid>
-                <Grid item pr={2} py={1}>
-                  <Button
-                    variant="contained"
-                    disabled={pickedBestFormat !== ''}
-                    onClick={() => {
-                      setPickedBestFormat(downloadFormats.best.format_id)
-                      setPickedVideoFormat('')
-                      setPickedAudioFormat('')
-                    }}>
-                    {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
-                  </Button>
-                </Grid>
-                {/* video only */}
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Video data {downloadFormats.formats[1].acodec}
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedVideoFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedVideoFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Audio data
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedAudioFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedAudioFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                <Grid item xs={12} pt={2}>
-                  <ButtonGroup disableElevation variant="contained">
-                    <Button
-                      onClick={() => sendUrl()}
-                      disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
-                    > Download
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setPickedAudioFormat('');
-                        setPickedVideoFormat('');
-                        setPickedBestFormat('');
-                      }}
-                    > Clear
-                    </Button>
-                  </ButtonGroup>
-                </Grid>
-              </Grid>
-            </Paper>
-          </Grid>
-        </Grid> : null
-      }
-      {
-        settings.listView ?
-          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
-          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
-      }
-      <Snackbar
-        open={showToast === status.connected}
-        autoHideDuration={1500}
-        message="Connected"
-        onClose={() => setShowToast(false)}
-      />
-    </Container >
-  );
-}

frontend/src/Layout.tsx

@@ -0,0 +1,208 @@
+import { ThemeProvider } from '@emotion/react'
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import Dashboard from '@mui/icons-material/Dashboard'
+import LiveTvIcon from '@mui/icons-material/LiveTv'
+import Menu from '@mui/icons-material/Menu'
+import SettingsIcon from '@mui/icons-material/Settings'
+import TerminalIcon from '@mui/icons-material/Terminal'
+import UpdateIcon from '@mui/icons-material/Update'
+import { Box, createTheme } from '@mui/material'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Toolbar from '@mui/material/Toolbar'
+import { grey } from '@mui/material/colors'
+import { useAtomValue } from 'jotai'
+import { useMemo, useState } from 'react'
+import { Link, Outlet } from 'react-router-dom'
+import { settingsState } from './atoms/settings'
+import AppBar from './components/AppBar'
+import { AppTitle } from './components/AppTitle'
+import Drawer from './components/Drawer'
+import Footer from './components/Footer'
+import Logout from './components/Logout'
+import SocketSubscriber from './components/SocketSubscriber'
+import ThemeToggler from './components/ThemeToggler'
+import { useI18n } from './hooks/useI18n'
+import Toaster from './providers/ToasterProvider'
+import { getAccentValue } from './utils'
+
+export default function Layout() {
+  const [open, setOpen] = useState(false)
+
+  const settings = useAtomValue(settingsState)
+
+  const mode = settings.theme
+  const theme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode: settings.theme,
+        primary: {
+          main: getAccentValue(settings.accent, settings.theme)
+        },
+        background: {
+          default: settings.theme === 'light' ? grey[50] : '#121212'
+        },
+      },
+    }), [settings.theme, settings.accent]
+  )
+
+  const toggleDrawer = () => setOpen(state => !state)
+
+  const { i18n } = useI18n()
+
+  return (
+    <ThemeProvider theme={theme}>
+      <title>{settings.appTitle}</title>
+      <SocketSubscriber />
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        <AppBar position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px' }}>
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={toggleDrawer}
+              sx={{
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
+              }}
+            >
+              <Menu />
+            </IconButton>
+            <AppTitle />
+          </Toolbar>
+        </AppBar>
+        <Drawer variant="permanent" open={open}>
+          <Toolbar
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
+            }}
+          >
+            <IconButton onClick={toggleDrawer}>
+              <ChevronLeft />
+            </IconButton>
+          </Toolbar>
+          <Divider />
+          <List component="nav">
+            <Link to={'/'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <Dashboard />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('homeButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            {/* <Link to={'/archive'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <ArchiveIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link> */}
+            <Link to={'/filebrowser'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <CloudDownloadIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/subscriptions'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <UpdateIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('subscriptionsButtonLabel')} />
+              </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>
+      </Box>
+      <Footer />
+      <Toaster />
+    </ThemeProvider>
+  )
+}

frontend/src/Settings.tsx

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

frontend/src/assets/i18n.yaml

@@ -1,191 +1,22 @@
 ---
+# Check the i18n src/assets/i18n folder.
+#
+# This file maps the language name to its translations file
+# english -> /src/assets/i18n/en_US.yaml
+
 languages:
-  english:
+  catalan: ca.yaml
-    urlInput: YouTube or other supported service video URL
+  german: de.yaml
-    statusTitle: Status
+  english: en_US.yaml
-    statusReady: Ready
+  spanish: es.yaml
-    startButton: Start
+  french: fr.yaml
-    abortAllButton: Abort All
+  italian: it_IT.yaml
-    updateBinButton: Update yt-dlp binary
+  japanese: ja.yaml
-    darkThemeButton: Dark theme
+  korean: ko.yaml
-    lightThemeButton: Light theme
+  polish: pl.yaml
-    settingsAnchor: Settings
+  portuguese-br: pt_BR.yaml
-    serverAddressTitle: Server address
+  russian: ru.yaml
-    serverPortTitle: Port
+  swedish: sv.yaml
-    extractAudioCheckbox: Extract audio
+  ukrainian: uk.yaml
-    noMTimeCheckbox: Don't set file modification time
+  chinese: zh_CN.yaml
-    bgReminder: Once you close this page the download will continue in the background.
+  hungarian: hu.yaml
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-  italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
-    statusTitle: Stato
-    startButton: Inizia
-    statusReady: Pronto
-    abortAllButton: Termina tutto
-    updateBinButton: Aggiorna yt-dlp
-    darkThemeButton: Tema scuro
-    lightThemeButton: Tema chiaro
-    settingsAnchor: Impostazioni
-    serverAddressTitle: Indirizzo server
-    serverPortTitle: Porta
-    extractAudioCheckbox: Estrai l'audio
-    noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
-    bgReminder: Chiusa questa UI il download continuerà in background.
-    toastConnected: 'Connesso a '
-    toastUpdated: yt-dlp aggiornato con successo!
-    formatSelectionEnabler: Abilita la selezione dei formati audio/video
-    themeSelect: 'Tema'
-    languageSelect: 'Lingua'
-    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)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-  chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
-    statusTitle: 状态
-    startButton: 开始
-    statusReady: 就绪
-    abortAllButton: 全部中止
-    updateBinButton: 更新 yt-dlp 可执行文件
-    darkThemeButton: 黑暗主题
-    lightThemeButton: 明亮主题
-    settingsAnchor: 设置
-    serverAddressTitle: 服务器地址
-    serverPortTitle: 端口
-    extractAudioCheckbox: 提取音频
-    noMTimeCheckbox: 不设置文件修改时间
-    bgReminder: 关闭页面后，下载会继续在后台运行。
-    toastConnected: '已连接到 '
-    toastUpdated: 已更新 yt-dlp 可执行文件！
-    formatSelectionEnabler: 启用视频/音频格式选择
-    themeSelect: '主题'
-    languageSelect: '语言'
-    overridesAnchor: 覆盖
-    pathOverrideOption: 启用输出路径覆盖
-    filenameOverrideOption: 启用输出文件名覆盖
-    customFilename: 自定义文件名（留空使用默认值）
-    customPath: 自定义路径
-    customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
-    customArgsInput: 自定义 yt-dlp 参数
-  spanish:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-  russian:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-  korean:
-    urlInput: YouTube나 다른 지원되는 사이트의 URL
-    statusTitle: 상태
-    startButton: 시작
-    statusReady: 준비됨
-    abortAllButton: 모두 중단
-    updateBinButton: yt-dlp 바이너리 업데이트
-    darkThemeButton: 다크 모드
-    lightThemeButton: 라이트 모드
-    settingsAnchor: 설정
-    serverAddressTitle: 서버 주소
-    serverPortTitle: Port
-    extractAudioCheckbox: 오디오 추출
-    noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
-    bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
-    toastConnected: '다음으로 연결됨 '
-    toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
-    formatSelectionEnabler: 비디오/오디오 포멧 옵션 표시
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
-  japanese:
-    urlInput: YouTubeまたはサポート済み動画のURL
-    statusTitle: 状態
-    statusReady: 準備
-    startButton: 開始
-    abortAllButton: すべて中止
-    updateBinButton: yt-dlp更新
-    darkThemeButton: 黒テーマ
-    lightThemeButton: 白テーマ
-    settingsAnchor: 設定
-    serverAddressTitle: サーバーアドレス
-    serverPortTitle: ポート番号
-    extractAudioCheckbox: 音質
-    noMTimeCheckbox: ファイル時間の修正をしない
-    bgReminder: このページを閉じてもバックグラウンドでダウンロードを続けます
-    toastConnected: '接続中 '
-    toastUpdated: yt-dlpを更新しました!
-    formatSelectionEnabler: 選択可能な動画/音源
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments

frontend/src/assets/i18n/ca.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: URL de YouTube o d'un altre servei compatible
+  statusTitle: Estat
+  startButton: Iniciar
+  statusReady: Llest
+  abortAllButton: Cancel·lar Tot
+  updateBinButton: Actualitzar el binari yt-dlp
+  darkThemeButton: Tema fosc
+  lightThemeButton: Tema clar
+  settingsAnchor: Configuració
+  serverAddressTitle: Direcció del servidor
+  serverPortTitle: Port
+  extractAudioCheckbox: Extreure àudio
+  noMTimeCheckbox: No guardar el temps de modificació de l'arxiu
+  bgReminder: Si tanques aquesta pàgina, la descàrrega continuarà en segon pla.
+  toastConnected: 'Connectat a'
+  toastUpdated: El binari yt-dlp està actualitzat!
+  formatSelectionEnabler: Habilitar la selecció de formats de vídeo/àudio
+  themeSelect: 'Tema'
+  languageSelect: 'Idiomes'
+  overridesAnchor: Anul·lacions
+  pathOverrideOption: Sobreescriure en la ruta de sortida
+  filenameOverrideOption: Sobreescriure el nom del fitxer
+  autoFileExtensionOption: Afegeix l'extensió de fitxer automàticament
+  customFilename: Nom d'arxiu personalitzat (en blanc per utilitzar el predeterminat)
+  customPath: Ruta personalitzada
+  customArgs: Habilitar els arguments yt-dlp personalitzats (un gran poder comporta una gran responsabilitat)
+  customArgsInput: Arguments yt-dlp personalitzats
+  rpcConnErr: Error en connectar-se al servidor RPC
+  splashText: No active downloads
+  archiveTitle: Archive
+  clipboardAction: Copied URL to clipboard
+  playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'Ajustes generales de descarga'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/de.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: Video URL
+  statusTitle: Status
+  statusReady: Bereit
+  selectFormatButton: Format auswählen
+  startButton: Start
+  abortAllButton: Alle Abbrechen
+  updateBinButton: yt-dlp Binärdatei aktualisieren
+  darkThemeButton: Dunkler Modus
+  lightThemeButton: Heller Modus
+  settingsAnchor: Einstellungen
+  serverAddressTitle: Adresse des Servers
+  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
+  autoFileExtensionOption: Dateierweiterung automatisch hinzufügen
+  customFilename: Benutzerdefinierter Dateiname (Leer lassen um Standardwert zu nutzen)
+  customPath: Benutzerdefinierter Pfad
+  customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (Auf viel Macht folgt große 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: Vorlageneditor
+  templatesEditorNameLabel: Vorlagen Name
+  templatesEditorContentLabel: Vorlagen Inhalt
+  logsTitle: 'Logausgabe'
+  awaitingLogs: 'Warte auf Log ...'
+  bulkDownload: 'Alles in einem ZIP-Archiv herunterladen'
+  rpcPollingTimeTitle: RPC-Abfragezeit
+  rpcPollingTimeDescription: Ein kürzerer Intervall führt zu einer höheren CPU-Auslastung (Server- und Clientseite)
+  templatesReloadInfo: Um eine neue Vorlage zu registrieren, muss die Seite möglicherweise neu geladen werden.
+  livestreamURLInput: Livestream URL
+  livestreamStatusWaiting: Warte auf Start
+  livestreamStatusDownloading: Herunterladen
+  livestreamStatusCompleted: Abgeschlossen
+  livestreamStatusErrored: Fehlerhaft
+  livestreamStatusUnknown: Status unbekannt
+  livestreamNoMonitoring: Aktuell wird kein Livestream überwacht
+  livestreamDownloadInfo: |
+    Damit wird der noch nicht gestartete Livestream überwacht. Jeder Prozess wird mit --wait-for-video 10 ausgeführt.
+    Wenn ein bereits gestarteter Livestream vorhanden ist, wird er zwar heruntergeladen, aber sein Fortschritt wird nicht verfolgt.
+    Sobald der Livestream gestartet ist, wird er auf der Download-Seite angezeigt.
+  livestreamExperimentalWarning: Dieses Feature ist aktuell noch experimentell, sei vorsichtig, denn es könnte sein, dass etwas nicht genau funktioniert!
+  accentSelect: 'Farbtöne'
+  urlBase: URL-Basis für Reverse-Proxy-Unterstützung (Unterverzeichnis), standardmäßig leer
+  generalDownloadSettings: 'Allgemeine Download Einstellungen'
+  deleteCookies: 'Cookies löschen'
+  noFilesFound: 'Keine Dateien gefunden'
+  tableView: 'Tabellenansicht'
+  deleteSelected: 'Ausgewählte löschen'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/en_US.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: Video URL (one per line)
+  statusTitle: Status
+  statusReady: Ready
+  selectFormatButton: Select format
+  startButton: Start
+  abortAllButton: Abort All
+  updateBinButton: Update yt-dlp binary
+  darkThemeButton: Dark theme
+  lightThemeButton: Light theme
+  settingsAnchor: Settings
+  serverAddressTitle: Server address
+  serverPortTitle: Port
+  extractAudioCheckbox: Extract audio
+  noMTimeCheckbox: Don't set file modification time
+  bgReminder: Once you close this page the download will continue in the background.
+  toastConnected: 'Connected to '
+  toastUpdated: Updated yt-dlp binary!
+  formatSelectionEnabler: Enable video/audio formats selection
+  themeSelect: 'Theme'
+  languageSelect: 'Language'
+  overridesAnchor: Overrides
+  pathOverrideOption: Enable output path overriding
+  filenameOverrideOption: Enable output file name overriding
+  autoFileExtensionOption: Automatically add file extension
+  customFilename: Custom filename (leave blank to use default)
+  customPath: Custom path
+  customArgs: Enable custom yt-dlp args (great power = great responsibilities)
+  customArgsInput: Custom yt-dlp arguments
+  rpcConnErr: Error while connecting to RPC server
+  splashText: No active downloads
+  archiveTitle: Archive
+  clipboardAction: Copied URL to clipboard
+  playlistCheckbox: Download playlist
+  restartAppMessage: Needs a page reload to take effect
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  templatesReloadInfo: To register a new template it might need a page reload.
+  livestreamURLInput: Livestream URL
+  livestreamStatusWaiting: Waiting/Wait start
+  livestreamStatusDownloading: Downloading
+  livestreamStatusCompleted: Completed
+  livestreamStatusErrored: Errored
+  livestreamStatusUnknown: Unknown
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/es.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: URL de YouTube u otro servicio compatible
+  statusTitle: Estado
+  startButton: Iniciar
+  statusReady: Listo
+  abortAllButton: Cancelar Todo
+  updateBinButton: Actualizar el binario yt-dlp
+  darkThemeButton: Tema oscuro
+  lightThemeButton: Tema claro
+  settingsAnchor: Ajustes
+  serverAddressTitle: Dirección del servidor
+  serverPortTitle: Puerto
+  extractAudioCheckbox: Extraer audio
+  noMTimeCheckbox: No guardar el tiempo de modificación del archivo
+  bgReminder: Si cierras esta página, la descarga continuará en segundo plano.
+  toastConnected: 'Conectado a'
+  toastUpdated: ¡El binario yt-dlp está actualizado!
+  formatSelectionEnabler: Habilitar la selección de formatos de video/audio
+  themeSelect: 'Tema'
+  languageSelect: 'Idiomas'
+  overridesAnchor: Anulaciones
+  pathOverrideOption: Sobreescribir en la ruta de salida
+  filenameOverrideOption: Sobreescribir el nombre del fichero
+  autoFileExtensionOption: Agregar extensión de archivo automáticamente
+  customFilename: Nombre de archivo personalizado (en blanco para usar el predeterminado)
+  customPath: Ruta personalizada
+  customArgs: Habilitar los argumentos yt-dlp personalizados (un gran poder conlleva una gran responsabilidad)
+  customArgsInput: Argumentos yt-dlp personalizados
+  rpcConnErr: Error al conectarse al servidor RPC
+  splashText: No active downloads
+  archiveTitle: Archive
+  clipboardAction: Copied URL to clipboard
+  playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/fr.yaml

@@ -0,0 +1,84 @@
+keys:
+  urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
+  statusTitle: Statut
+  statusReady: Prêt
+  selectFormatButton: Sélectionner le format
+  startButton: Démarrer
+  abortAllButton: Tout arrêter
+  updateBinButton: Mettre à jour l'exécutable yt-dlp
+  darkThemeButton: Thème sombre
+  lightThemeButton: Thème clair
+  settingsAnchor: Paramètres
+  serverAddressTitle: Adresse du serveur
+  serverPortTitle: Port
+  extractAudioCheckbox: Extraire l'audio
+  noMTimeCheckbox: Ne pas définir le temps de modification du fichier
+  bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
+  toastConnected: 'Connecté à '
+  toastUpdated: L'exécutable yt-dlp a été mis à jour !
+  formatSelectionEnabler: Activer la sélection des formats vidéo/audio
+  themeSelect: 'Thème'
+  languageSelect: 'Langue'
+  overridesAnchor: Remplacer
+  pathOverrideOption: Activer le remplacement du chemin de sortie
+  filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
+  autoFileExtensionOption: Ajouter automatiquement l'extension de fichier
+  customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
+  customPath: Chemin personnalisé
+  customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
+  customArgsInput: Arguments yt-dlp personnalisés
+  rpcConnErr: Erreur lors de la connexion au serveur RPC
+  splashText: Aucun téléchargement actif
+  archiveTitle: Archive
+  clipboardAction: URL copiée dans le presse-papiers
+  playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
+  restartAppMessage: Nécessite un rechargement de la page pour prendre effet
+  servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
+  notConnectedText: not connected
+  settingsLabel: Settings
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: Nom de l'application
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/hu.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: Video URL (soronként egy)
+  statusTitle: Állapot
+  statusReady: Előkészítve
+  selectFormatButton: Válassz formátumot
+  startButton: Indítás
+  abortAllButton: Összes megszakítása
+  updateBinButton: yt-dlp bináris frissítése
+  darkThemeButton: Sötét téma
+  lightThemeButton: Világos téma
+  settingsAnchor: Beállítások
+  serverAddressTitle: Szerver címe
+  serverPortTitle: Port
+  extractAudioCheckbox: Audio konvertálása
+  noMTimeCheckbox: Fájl módosítás időpontja ne legyen beállítva
+  bgReminder: Miután a lap bezárásra kerül, a letöltés folytatódni fog a háttérben.
+  toastConnected: 'Kapcsolódva: '
+  toastUpdated: yt-dlp bináris frissítése sikeres volt!
+  formatSelectionEnabler: Video/audio formátum manuális kiválasztásának engedélyezése
+  themeSelect: 'Téma'
+  languageSelect: 'Nyelv'
+  overridesAnchor: Felülbírálások
+  pathOverrideOption: Letöltési útvonal felülbírálása
+  filenameOverrideOption: Letöltési fájlnév felülbírálása
+  autoFileExtensionOption: Automatikus fájlkiterjesztés
+  customFilename: Egyedi fájlnév (hagyd üresen, hogy a fájlnév automatikusan generálódjon)
+  customPath: Egyedi útvonal
+  customArgs: Egyedi yt-dlp argumentumok (Nagy hatalommal nagy felelősség jár.)
+  customArgsInput: Egyedi yt-dlp argumentumok
+  rpcConnErr: Hiba történt az RPC szerver történő kapcsolódáskor
+  splashText: Nincs aktív letöltés
+  archiveTitle: Archívum
+  clipboardAction: URL a vágólapra másolva.
+  playlistCheckbox: Lejátszási lista letöltése (Több időt vehet igénybe. A letöltés a háttérben történik, a böngészőablak szabadon bezárható.)
+  restartAppMessage: Az oldal újratöltése lehet szükséges a változtatások megjelenítéséhez.
+  servedFromReverseProxyCheckbox: Reverse proxy mögötti működés
+  urlBase: URL base, reverse proxy támogatásához (subdir), alapból üres
+  newDownloadButton: Új letöltés
+  homeButtonLabel: Kezdőlap
+  archiveButtonLabel: Archívum
+  settingsButtonLabel: Beállítások
+  rpcAuthenticationLabel: RPC bejelentkezés
+  themeTogglerLabel: Témaválasztó
+  loadingLabel: Betöltés...
+  appTitle: Alkalmazás címe
+  savedTemplates: Mentett sablonok
+  templatesEditor: Sablonszerkesztő
+  templatesEditorNameLabel: Sablon neve
+  templatesEditorContentLabel: Sablon tartalma
+  logsTitle: 'Naplók'
+  awaitingLogs: 'Napló letöltése...'
+  bulkDownload: 'Fájlok letöltése ZIP archívumként'
+  rpcPollingTimeTitle: RPC lekérdezési időköz
+  rpcPollingTimeDescription: Rövidebb időköz nagyobb processzor terheléssel járhat (mind szerver és böngésző oldalon is)
+  templatesReloadInfo: Az új sablon megjelenéséhez újra kell tölteni az oldalt.
+  livestreamURLInput: Élő stream URL
+  livestreamStatusWaiting: Várakozás a kezdésre
+  livestreamStatusDownloading: Letöltés
+  livestreamStatusCompleted: Letöltve
+  livestreamStatusErrored: Hiba
+  livestreamStatusUnknown: Ismeretlen
+  livestreamNoMonitoring: Nincsenek figyelt élő adások
+  livestreamDownloadInfo: |
+    Ez figyelni fog egy még el nem indított élő közvetítést. Minden folyamat a --wait-for-video 10 paraméterrel lesz végrehajtva.
+    Ha egy már elindított élő közvetítés van megadva, az továbbra is letöltésre kerül, de a folyamatát nem követi nyomon.
+    Amint elindul, az élő közvetítés átkerül a letöltések oldalra..
+  livestreamExperimentalWarning: Ez a funkció még kísérleti. Nem garantált a hibamentes működés.
+  accentSelect: 'Kiemelt szín'
+  generalDownloadSettings: 'Általános letöltési beállítások'
+  deleteCookies: Sütik törlése
+  noFilesFound: 'Nem található fájlok'
+  tableView: 'Táblázatos Nézet'
+  deleteSelected: 'Kiválasztottak törlése'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/it_IT.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: URL Video (uno per linea)
+  statusTitle: Stato
+  statusReady: Pronto
+  selectFormatButton: Seziona formato
+  startButton: Inizia
+  abortAllButton: Termina tutto
+  updateBinButton: Aggiorna yt-dlp
+  darkThemeButton: Tema scuro
+  lightThemeButton: Tema chiaro
+  settingsAnchor: Impostazioni
+  serverAddressTitle: Indirizzo server
+  serverPortTitle: Porta
+  extractAudioCheckbox: Estrai l'audio
+  noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
+  bgReminder: Chiusa questa UI il download continuerà in background.
+  toastConnected: 'Connesso a '
+  toastUpdated: yt-dlp aggiornato con successo!
+  formatSelectionEnabler: Abilita la selezione dei formati audio/video
+  themeSelect: 'Tema'
+  languageSelect: 'Lingua'
+  overridesAnchor: Sovrascritture
+  pathOverrideOption: Abilita sovrascrittura percorso di output
+  filenameOverrideOption: Abilita sovrascrittura del nome del file di output
+  autoFileExtensionOption: Aggiungi estensione automaticamente
+  customFilename: Nome file personalizzato (lascia vuoto per utilizzare quello predefinito)
+  customPath: Percorso personalizzato
+  customArgs: Abilita argomenti yt-dlp personalizzati (grande potere = grandi responsabilità)
+  customArgsInput: Argomenti yt-dlp personalizzati
+  rpcConnErr: Errore nella connessione al server RPC
+  splashText: Nessun download attivo
+  archiveTitle: Archivio
+  clipboardAction: URL copiato negli appunti
+  playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
+  restartAppMessage: La finestra deve essere ricaricata affinché abbia effetto
+  servedFromReverseProxyCheckbox: È dietro un reverse proxy
+  urlBase: base URL, per supporto a reverse proxy (subdir), default vuoto
+  newDownloadButton: Nuovo download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archivio
+  settingsButtonLabel: Impostazioni
+  rpcAuthenticationLabel: Autenticazione RPC
+  themeTogglerLabel: Selettore Tema
+  loadingLabel: Caricamento...
+  appTitle: Titolo applicazione
+  savedTemplates: Modelli salvati
+  templatesEditor: Editor modelli
+  templatesEditorNameLabel: Nome modello
+  templatesEditorContentLabel: Contenuto del modello
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Scaricare i file in un archivio zip'
+  rpcPollingTimeTitle: Intervallo di polling RPC
+  rpcPollingTimeDescription: Un intervallo più corto implica un maggior utilizzo di CPU (lato client e server)
+  templatesReloadInfo: Per registrare un nuovo modello potrebbe essere necessario ricaricare la pagina.
+  livestreamURLInput: Livestream URL
+  livestreamStatusWaiting: Attesa inizio
+  livestreamStatusDownloading: Downloading
+  livestreamStatusCompleted: Completato
+  livestreamStatusErrored: Errore
+  livestreamStatusUnknown: Sconosciuto
+  livestreamNoMonitoring: Nessun livestream monitorato
+  livestreamDownloadInfo: |
+    Questo monitorerà il livestream ancora da avviare. Ogni processo verrà eseguito con --wait-for-video 10.
+    Se viene fornito un livestream già avviato, questo verrà comunque scaricato, ma il suo progresso non verrà monitorato.
+    Una volta avviato, il livestream verrà migrato nella pagina dei download.
+  livestreamExperimentalWarning: Questa funzione è ancora sperimentale. Qualcosa potrebbe rompersi!
+  accentSelect: 'Accent'
+  generalDownloadSettings: 'Impostazioni generali di download'
+  deleteCookies: Elimina Cookies
+  noFilesFound: 'Nessun file trovato'
+  tableView: 'Vista Tabella'
+  deleteSelected: 'Elimina selezionati'
+  subscriptionsButtonLabel: 'Abbonamenti'
+  subscriptionsEmptyLabel: 'Nessuna iscrizione'
+  subscriptionsURLInput: 'URL Canale'
+  subscriptionsInfo: |
+    Iscrive a un canale definito. Verrà scaricato solo l'ultimo video.
+    Il lavoro di monitoraggio sarà programmato/attivato da un'espressione cron definita (se lasciata vuota, l'impostazione predefinita è ogni 5 minuti).
+  cronExpressionLabel: 'Espressione Cron'
+  editButtonLabel: 'Modifica'
+  newSubscriptionButton: Nuova iscrizione

frontend/src/assets/i18n/ja.yaml

@@ -0,0 +1,81 @@
+keys:
+  urlInput: YouTubeまたはサポート済み動画のURL
+  statusTitle: 状態
+  statusReady: 準備
+  selectFormatButton: フォーマット選択
+  startButton: 開始
+  abortAllButton: すべて中止
+  updateBinButton: yt-dlp更新
+  darkThemeButton: 黒テーマ
+  lightThemeButton: 白テーマ
+  settingsAnchor: 設定
+  serverAddressTitle: サーバーアドレス
+  serverPortTitle: ポート番号
+  extractAudioCheckbox: 音質
+  noMTimeCheckbox: ファイル時間の修正をしない
+  bgReminder: このページを閉じてもバックグラウンドでダウンロードを続けます
+  toastConnected: '接続中 '
+  toastUpdated: yt-dlpを更新しました!
+  formatSelectionEnabler: 選択可能な動画/音源
+  themeSelect: 'テーマ'
+  languageSelect: '言語'
+  overridesAnchor: 上書き
+  pathOverrideOption: 保存するディレクトリ
+  filenameOverrideOption: ファイル名の上書き
+  autoFileExtensionOption: 自動ファイル拡張子
+  customFilename:  (空白の場合は元のファイル名)
+  customPath: 保存先
+  customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
+  customArgsInput: yt-dlpのオプション
+  rpcConnErr: RPCサーバーへの接続中にエラーが発生しました
+  splashText: アクティブなダウンロードはありません
+  archiveTitle: アーカイブ
+  clipboardAction: URLをクリップボードにコピーしました
+  playlistCheckbox: プレイリストをダウンロード (これには時間がかかりますが、処理中はウィンドウを閉じることができます)
+  servedFromReverseProxyCheckbox: リバースプロキシのサブフォルダにあります
+  newDownloadButton: 新しくダウンロード
+  homeButtonLabel: ホーム
+  archiveButtonLabel: アーカイブ
+  settingsButtonLabel: 設定
+  rpcAuthenticationLabel: RPC認証
+  themeTogglerLabel: テーマ切り替え
+  loadingLabel: 読み込み中...
+  appTitle: アプリタイトル
+  savedTemplates: 保存したテンプレート
+  templatesEditor: テンプレートエディター
+  templatesEditorNameLabel: テンプレート名
+  templatesEditorContentLabel: テンプレート内容
+  logsTitle: 'ログ'
+  awaitingLogs: 'ログを待機中...'
+  bulkDownload: 'ダウンロードしたファイルをZIPで保存'
+  templatesReloadInfo: To register a new template it might need a page reload.
+  livestreamURLInput: ライブストリームURL
+  livestreamStatusWaiting: 開始を待っています
+  livestreamStatusDownloading: ダウンロード中
+  livestreamStatusCompleted: 完了
+  livestreamStatusErrored: エラー
+  livestreamStatusUnknown: 不明
+  livestreamNoMonitoring: No livestreams monitored
+  livestreamDownloadInfo: |
+    まだ開始されていないライブストリームを監視します。各プロセスは、--wait-for-video 10 で実行されます。
+    すでに開始されているライブストリームが提供された場合、ダウンロードは継続されますが進行状況は追跡されません。
+    ライブストリームが開始されると、ダウンロードページに移動されます。
+  livestreamExperimentalWarning: この機能は実験的なものです。何かが壊れるかもしれません！
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/ko.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: YouTube나 다른 지원되는 사이트의 URL
+  statusTitle: 상태
+  startButton: 시작
+  statusReady: 준비됨
+  abortAllButton: 모두 중단
+  updateBinButton: yt-dlp 바이너리 업데이트
+  darkThemeButton: 다크 모드
+  lightThemeButton: 라이트 모드
+  settingsAnchor: 설정
+  serverAddressTitle: 서버 주소
+  serverPortTitle: Port
+  extractAudioCheckbox: 오디오 추출
+  noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
+  bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
+  toastConnected: '다음으로 연결됨 '
+  toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
+  formatSelectionEnabler: 비디오/오디오 포멧 옵션 표시
+  themeSelect: 'Theme'
+  languageSelect: 'Language'
+  overridesAnchor: Overrides
+  pathOverrideOption: Enable output path overriding
+  filenameOverrideOption: Enable output file name overriding
+  autoFileExtensionOption: 자동으로 파일 확장자 추가
+  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
+  rpcConnErr: Error while conencting to RPC server
+  splashText: No active downloads
+  archiveTitle: Archive
+  clipboardAction: Copied URL to clipboard
+  playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/pl.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: Adres URL YouTube lub innej obsługiwanej usługi
+  statusTitle: Status
+  startButton: Początek
+  statusReady: Gotowy
+  abortAllButton: Anuluj wszystko
+  updateBinButton: Zaktualizuj plik binarny yt-dlp
+  darkThemeButton: Ciemny motyw
+  lightThemeButton: Światło motyw
+  settingsAnchor: Ustawienia
+  serverAddressTitle: Adres serwera
+  serverPortTitle: Port
+  extractAudioCheckbox: Wyodrębnij dźwięk
+  noMTimeCheckbox: Nie ustawiaj czasu modyfikacji pliku
+  bgReminder: Po zamknięciu tej strony pobieranie będzie kontynuowane w tle. 
+  toastConnected: 'Połączony z '
+  toastUpdated: Zaktualizowano plik binarny yt-dlp!
+  formatSelectionEnabler: Aktywuj wybór formatów wideo/audio
+  themeSelect: 'Motyw'
+  languageSelect: 'Język'
+  overridesAnchor: Przedefiniuj
+  pathOverrideOption: Aktywuj zastąpienie ścieżki źródłowej
+  filenameOverrideOption: Aktywuj zastępowanie nazwy pliku źródłowego
+  autoFileExtensionOption: Automatyczne rozszerzenie pliku
+  customFilename: Wprowadź nazwę pliku (pozostaw puste, aby użyć nazwy domyślnej)
+  customPath: Ustaw ścieżkę
+  customArgs: Uwzględnij konfigurowalne argumenty yt-dlp (wielka moc = wielka odpowiedzialność)
+  customArgsInput: Niestandardowe argumenty yt-dlp
+  rpcConnErr: Wystąpił błąd podczas łączenia z serwerem RPC
+  splashText: Brak aktywnych pobrań
+  archiveTitle: Archiwum
+  clipboardAction: Adres URL zostanie skopiowany do schowka
+  playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/pt_BR.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: URL do vídeo (uma por linha)
+  statusTitle: Status
+  statusReady: Pronto
+  selectFormatButton: Selecionar formato
+  startButton: Iniciar
+  abortAllButton: Cancelar tudo
+  updateBinButton: Atualizar binário yt-dlp
+  darkThemeButton: Tema escuro
+  lightThemeButton: Tema claro
+  settingsAnchor: Configurações
+  serverAddressTitle: Endereço do servidor
+  serverPortTitle: Porta
+  extractAudioCheckbox: Extrair áudio
+  noMTimeCheckbox: Não definir hora de modificação do arquivo
+  bgReminder: Uma vez que você feche esta página, o download continuará em segundo plano.
+  toastConnected: 'Conectado a '
+  toastUpdated: Binário yt-dlp atualizado!
+  formatSelectionEnabler: Habilitar seleção de formatos de vídeo/aúdio
+  themeSelect: 'Tema'
+  languageSelect: 'Idioma'
+  overridesAnchor: Substituições
+  pathOverrideOption: Habilitar substituição do caminho de saída
+  filenameOverrideOption: Habilitar substituição do nome do arquivo de saída
+  autoFileExtensionOption: Adicionar extensão de arquivo automaticamente
+  customFilename: Nome de arquivo personalizado (deixe em branco para usar o padrão)
+  customPath: Caminho personalizado
+  customArgs: Habilitar argumentos personalizados do yt-dlp (grandes poderes = grandes responsabilidades)
+  customArgsInput: Argumentos personalizados do yt-dlp
+  rpcConnErr: Erro ao conectar ao servidor RPC
+  splashText: Nenhum download ativo
+  archiveTitle: Arquivo
+  clipboardAction: URL copiada para a área de transferência
+  playlistCheckbox: Baixar playlist (isso pode levar algum tempo, depois de enviar você pode fechar esta janela)
+  restartAppMessage: Necessário recarregar a página para que a mudança tenha efeito
+  servedFromReverseProxyCheckbox: Está atrás de um proxy reverso
+  urlBase: Base da URL, para suporte de proxy reverso (subdiretório), padrão vazio
+  newDownloadButton: Novo download
+  homeButtonLabel: Início
+  archiveButtonLabel: Arquivo
+  settingsButtonLabel: Configurações
+  rpcAuthenticationLabel: Autenticação RPC
+  themeTogglerLabel: Alternador de tema
+  loadingLabel: Carregando...
+  appTitle: Título do aplicativo
+  savedTemplates: Modelos salvos
+  templatesEditor: Editor de modelos
+  templatesEditorNameLabel: Nome do modelo
+  templatesEditorContentLabel: Conteúdo do modelo
+  logsTitle: 'Logs'
+  awaitingLogs: 'Aguardando logs...'
+  bulkDownload: 'Baixar arquivos em um arquivo zip'
+  rpcPollingTimeTitle: Tempo de polling RPC
+  rpcPollingTimeDescription: Um intervalo menor resulta em maior uso de CPU (lado do servidor e do cliente)
+  templatesReloadInfo: Para registrar um novo modelo, pode ser necessário recarregar a página.
+  livestreamURLInput: URL da transmissão ao vivo
+  livestreamStatusWaiting: Aguardando/Aguarde o início
+  livestreamStatusDownloading: Baixando
+  livestreamStatusCompleted: Concluído
+  livestreamStatusErrored: Erro
+  livestreamStatusUnknown: Desconhecido
+  livestreamNoMonitoring: No livestreams monitored
+  livestreamDownloadInfo: |
+    Isso monitorará uma transmissão ao vivo que ainda não começou. Cada processo será executado com --wait-for-video 10.
+    Se uma transmissão ao vivo já iniciada for fornecida, ela ainda será baixada, mas seu progresso não será rastreado.
+    Uma vez iniciada, a transmissão ao vivo será migrada para a página de downloads.
+  livestreamExperimentalWarning: Este recurso ainda é experimental. Algo pode quebrar!
+  accentSelect: 'Accent'
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/ru.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
+  statusTitle: Статус
+  startButton: Начать
+  statusReady: Готово
+  abortAllButton: Прервать все
+  updateBinButton: Обновить бинарный файл yt-dlp
+  darkThemeButton: Темная тема
+  lightThemeButton: Светлая тема
+  settingsAnchor: Настройки
+  serverAddressTitle: Адрес сервера
+  serverPortTitle: Порт
+  extractAudioCheckbox: Извлечь аудио
+  noMTimeCheckbox: Не устанавливать время модификации файла
+  bgReminder: Как только вы закроете эту страницу, загрузка продолжится в фоновом режиме.
+  toastConnected: 'Подключен к '
+  toastUpdated: Бинарный файл yt-dlp обновлен!
+  formatSelectionEnabler: Активировать выбор видео/аудио форматов
+  themeSelect: 'Тема'
+  languageSelect: 'Язык'
+  overridesAnchor: Переопределить
+  pathOverrideOption: Активировать переопределение выходного пути
+  filenameOverrideOption: Активировать переопределение имени выходного файла
+  autoFileExtensionOption: Автоматическое расширение файла
+  customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
+  customPath: Задать путь
+  customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)
+  customArgsInput: Пользовательские аргументы yt-dlp
+  rpcConnErr: Ошибка при подключении к серверу RPC
+  splashText: Нет активных загрузок
+  archiveTitle: Архив
+  clipboardAction: URL скопирован в буфер обмена
+  playlistCheckbox: Скачать плейлист. Это займет время, после отправки вы сможете закрыть окно
+  servedFromReverseProxyCheckbox: Находится за обратным прокси
+  newDownloadButton: Новая загрузка
+  homeButtonLabel: Home
+  archiveButtonLabel: Архив
+  settingsButtonLabel: Настройки
+  rpcAuthenticationLabel: RPC-аутентификация
+  themeTogglerLabel: Переключить тему
+  loadingLabel: Загрузка...
+  appTitle: Название приложения
+  savedTemplates: Сохраненные шаблоны
+  templatesEditor: Редактор шаблонов
+  templatesEditorNameLabel: Имя шаблона
+  templatesEditorContentLabel: Содержание шаблона
+  logsTitle: 'Логи'
+  awaitingLogs: 'Ожидание логов...'
+  bulkDownload: 'Скачать файлы в zip архиве'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/sv.yaml

@@ -0,0 +1,82 @@
+keys:
+  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
+  autoFileExtensionOption: Lägg till filändelse automatiskt
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/uk.yaml

@@ -0,0 +1,80 @@
+keys:
+  urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
+  statusTitle: Статус
+  startButton: Почати
+  statusReady: Готово
+  abortAllButton: Перервати все 
+  updateBinButton: Оновити бінарний файл yt-dlp
+  darkThemeButton: Темна тема 
+  lightThemeButton: Світла тема 
+  settingsAnchor: Налаштування 
+  serverAddressTitle: Адреса сервера
+  serverPortTitle: Порт 
+  extractAudioCheckbox: Витягти аудіо 
+  noMTimeCheckbox: Не встановлювати час модифікації файлу
+  bgReminder: Як тільки ви закриєте цю сторінку, завантаження продовжиться у фоновому режимі. 
+  toastConnected: 'Підключений до '
+  toastUpdated: Бінарний файл yt-dlp оновлено!
+  formatSelectionEnabler: Активувати вибір відео/аудіо форматів
+  themeSelect: 'Тема'
+  languageSelect: 'Мова'
+  overridesAnchor: Перевизначити
+  pathOverrideOption: Активувати перевизначення вихідного шляху
+  filenameOverrideOption: Активувати перевизначення імені вихідного файлу
+  autoFileExtensionOption: Автоматичне додавання розширення файлу
+  customFilename: Введіть ім'я файлу (залишіть порожнім, щоб використовувати значення за замовчуванням)
+  customPath: Задати шлях
+  customArgs: Включити аргументи, що настроюються yt-dlp (велика сила = велика відповідальність)
+  customArgsInput: Користувальницькі аргументи yt-dlp
+  rpcConnErr: Помилка при підключенні до сервера RPC
+  splashText: Немає активних завантажень
+  archiveTitle: Архів
+  clipboardAction: URL скопійовано в буфер обміну
+  playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+  newDownloadButton: New download
+  homeButtonLabel: Home
+  archiveButtonLabel: Archive
+  settingsButtonLabel: Settings
+  rpcAuthenticationLabel: RPC authentication
+  themeTogglerLabel: Theme toggler
+  loadingLabel: Loading...
+  appTitle: App title
+  savedTemplates: Saved templates
+  templatesEditor: Templates editor
+  templatesEditorNameLabel: Template name
+  templatesEditorContentLabel: Template content
+  logsTitle: 'Logs'
+  awaitingLogs: 'Awaiting logs...'
+  bulkDownload: 'Download files in a zip archive'
+  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
+  livestreamNoMonitoring: No livestreams monitored
+  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!
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/assets/i18n/zh_CN.yaml

@@ -0,0 +1,82 @@
+keys:
+  urlInput: 视频 URL
+  statusTitle: 状态
+  statusReady: 就绪
+  selectFormatButton: 选择格式
+  startButton: 开始
+  abortAllButton: 全部中止
+  updateBinButton: 更新 yt-dlp 可执行文件
+  darkThemeButton: 黑暗主题
+  lightThemeButton: 明亮主题
+  settingsAnchor: 设置
+  serverAddressTitle: 服务器地址
+  serverPortTitle: 端口
+  extractAudioCheckbox: 提取音频
+  noMTimeCheckbox: 不设置文件修改时间
+  bgReminder: 关闭页面后，下载会继续在后台运行。
+  toastConnected: '已连接到 '
+  toastUpdated: 已更新 yt-dlp 可执行文件！
+  formatSelectionEnabler: 启用视频/音频格式选择
+  themeSelect: '主题'
+  languageSelect: '语言'
+  overridesAnchor: 覆盖
+  pathOverrideOption: 启用输出路径覆盖
+  filenameOverrideOption: 启用输出文件名覆盖
+  autoFileExtensionOption: 自动文件扩展名
+  customFilename: 自定义文件名（留空使用默认值）
+  customPath: 自定义路径
+  customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
+  customArgsInput: 自定义 yt-dlp 参数
+  rpcConnErr: 连接 RPC 服务器发生错误
+  splashText: 没有正在进行的下载
+  archiveTitle: 归档
+  clipboardAction: 复制 URL 到剪贴板
+  playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
+  restartAppMessage: 需要刷新页面才能生效
+  servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+  newDownloadButton: 新下载
+  homeButtonLabel: 主页
+  archiveButtonLabel: 归档
+  settingsButtonLabel: 设置
+  rpcAuthenticationLabel: RPC 身份验证
+  themeTogglerLabel: 主题切换
+  loadingLabel: 正在加载…
+  appTitle: App 标题
+  savedTemplates: 保存模板
+  templatesEditor: 模板编辑器
+  templatesEditorNameLabel: 模板名称
+  templatesEditorContentLabel: 模板内容
+  logsTitle: '日志'
+  awaitingLogs: '正在等待日志…'
+  bulkDownload: '下载 zip 压缩包中的文件'
+  templatesReloadInfo: To register a new template it might need a page reload.
+  livestreamURLInput: 直播 URL
+  livestreamStatusWaiting: 等待直播开始
+  livestreamStatusDownloading: 下载中
+  livestreamStatusCompleted: 已完成
+  livestreamStatusErrored: 发生错误
+  livestreamStatusUnknown: 未知
+  livestreamNoMonitoring: No livestreams monitored
+  livestreamDownloadInfo: |
+    本功能将会监控即将开始的直播流，每个进程都会传入参数：--wait-for-video 10 （重试间隔10秒）
+    如果直播已经开始，那么依然可以下载，但是不会记录下载进度。
+    直播开始后，将会转移到下载页面
+  livestreamExperimentalWarning: 实验性功能，可能存在未知Bug，请谨慎使用
+  accentSelect: 'Accent'
+  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+  rpcPollingTimeTitle: RPC polling time
+  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
+  generalDownloadSettings: 'General Download Settings'
+  deleteCookies: Delete Cookies
+  noFilesFound: 'No Files Found'
+  tableView: 'Table View'
+  deleteSelected: 'Delete selected'
+  subscriptionsButtonLabel: 'Subscriptions'
+  subscriptionsEmptyLabel: 'No subscriptions'
+  subscriptionsURLInput: 'Channel URL'
+  subscriptionsInfo: |
+    Subscribes to a defined channel. Only the last video will be downloaded.
+    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
+  cronExpressionLabel: 'Cron expression'
+  editButtonLabel: 'Edit'
+  newSubscriptionButton: New subscription

frontend/src/atoms/downloadTemplate.ts

@@ -0,0 +1,33 @@
+import { getOrElse } from 'fp-ts/lib/Either'
+import { pipe } from 'fp-ts/lib/function'
+import { atomWithCache } from 'jotai-cache'
+import { atomWithStorage } from 'jotai/utils'
+import { ffetch } from '../lib/httpClient'
+import { CustomTemplate } from '../types'
+import { serverSideCookiesState, serverURL } from './settings'
+
+export const cookiesTemplateState = atomWithCache<Promise<string>>(async (get) =>
+  await get(serverSideCookiesState)
+    ? '--cookies=cookies.txt'
+    : ''
+)
+
+export const customArgsState = atomWithStorage(
+  'customArgs',
+  localStorage.getItem('customArgs') ?? ''
+)
+
+export const filenameTemplateState = atomWithStorage(
+  'lastFilenameTemplate',
+  localStorage.getItem('lastFilenameTemplate') ?? ''
+)
+
+export const savedTemplatesState = atomWithCache<Promise<CustomTemplate[]>>(async (get) => {
+  const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
+  const either = await task()
+
+  return pipe(
+    either,
+    getOrElse(() => new Array<CustomTemplate>())
+  )
+})

frontend/src/atoms/downloads.ts

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

frontend/src/atoms/rpc.ts

@@ -0,0 +1,17 @@
+import { atom } from 'jotai'
+import { RPCClient } from '../lib/rpcClient'
+import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+import { atomWithStorage } from 'jotai/utils'
+
+export const rpcClientState = atom((get) =>
+  new RPCClient(
+    get(rpcHTTPEndpoint),
+    get(rpcWebSocketEndpoint),
+    localStorage.getItem('token') ?? ''
+  ),
+)
+
+export const rpcPollingTimeState = atomWithStorage(
+  'rpc-polling-time',
+  Number(localStorage.getItem('rpc-polling-time')) || 1000
+)

frontend/src/atoms/settings.ts

@@ -0,0 +1,185 @@
+import { pipe } from 'fp-ts/lib/function'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { ffetch } from '../lib/httpClient'
+import { prefersDarkMode } from '../utils'
+
+export const languages = [
+  'catalan',
+  'chinese',
+  'english',
+  'french',
+  'german',
+  'italian',
+  'japanese',
+  'korean',
+  'polish',
+  'portuguese-br',
+  'russian',
+  'spanish',
+  'swedish',
+  'ukrainian',
+  'hungarian'
+] as const
+
+export type Language = (typeof languages)[number]
+
+export type Theme = 'light' | 'dark' | 'system'
+export type ThemeNarrowed = 'light' | 'dark'
+
+export const accents = ['default', 'red'] as const
+export type Accent = (typeof accents)[number]
+
+export interface SettingsState {
+  serverAddr: string
+  serverPort: number
+  language: Language
+  theme: ThemeNarrowed
+  accent: Accent
+  cliArgs: string
+  formatSelection: boolean
+  fileRenaming: boolean
+  autoFileExtension: boolean
+  pathOverriding: boolean
+  enableCustomArgs: boolean
+  listView: boolean
+  servedFromReverseProxy: boolean
+  appTitle: string
+}
+
+export const languageState = atomWithStorage<Language>(
+  'language',
+  localStorage.getItem('language') as Language || 'english'
+)
+
+export const themeState = atomWithStorage<Theme>(
+  'theme',
+  localStorage.getItem('theme') as Theme || 'system'
+)
+
+export const serverAddressState = atomWithStorage<string>(
+  'server-addr',
+  localStorage.getItem('server-addr') || window.location.hostname
+)
+
+export const serverPortState = atomWithStorage<number>(
+  'server-port',
+  Number(localStorage.getItem('server-port')) || Number(window.location.port)
+)
+
+export const latestCliArgumentsState = atomWithStorage<string>(
+  'cli-args',
+  localStorage.getItem('cli-args') || '--no-mtime'
+)
+
+export const formatSelectionState = atomWithStorage(
+  'format-selection',
+  localStorage.getItem('format-selection') === 'true'
+)
+
+export const fileRenamingState = atomWithStorage(
+  'file-renaming',
+  localStorage.getItem('file-renaming') === 'true'
+)
+
+export const autoFileExtensionState = atomWithStorage(
+  'auto-file-extension',
+  localStorage.getItem('auto-file-extension') === 'true'
+)
+
+export const pathOverridingState = atomWithStorage(
+  'path-overriding',
+  localStorage.getItem('path-overriding') === 'true'
+)
+
+export const enableCustomArgsState = atomWithStorage(
+  'enable-custom-args',
+  localStorage.getItem('enable-custom-args') === 'true'
+)
+
+export const listViewState = atomWithStorage(
+  'listview',
+  localStorage.getItem('listview') === 'true'
+)
+
+export const servedFromReverseProxyState = atomWithStorage(
+  'reverseProxy',
+  localStorage.getItem('reverseProxy') === 'true' || window.location.port == ''
+)
+
+export const servedFromReverseProxySubDirState = atomWithStorage<string>(
+  'reverseProxySubDir',
+  localStorage.getItem('reverseProxySubDir') ?? ''
+)
+
+export const appTitleState = atomWithStorage(
+  'appTitle',
+  localStorage.getItem('appTitle') ?? 'yt-dlp Web UI'
+)
+
+export const serverAddressAndPortState = atom((get) => {
+  if (get(servedFromReverseProxySubDirState)) {
+    return `${get(serverAddressState)}/${get(servedFromReverseProxySubDirState)}/`
+      .replaceAll('"', '')    // XXX: atomWithStorage uses JSON.stringify to serialize
+      .replaceAll('//', '/')  //      which puts extra double quotes.
+  }
+  if (get(servedFromReverseProxyState)) {
+    return `${get(serverAddressState)}`
+      .replaceAll('"', '')
+  }
+  return `${get(serverAddressState)}:${get(serverPortState)}`
+    .replaceAll('"', '')
+})
+
+export const serverURL = atom((get) =>
+  `${window.location.protocol}//${get(serverAddressAndPortState)}`
+)
+
+export const rpcWebSocketEndpoint = atom((get) => {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  return `${proto}//${get(serverAddressAndPortState)}/rpc/ws`
+})
+
+export const rpcHTTPEndpoint = atom((get) => {
+  const proto = window.location.protocol
+  return `${proto}//${get(serverAddressAndPortState)}/rpc/http`
+})
+
+export const serverSideCookiesState = atom<Promise<string>>(async (get) => await pipe(
+  ffetch<Readonly<{ cookies: string }>>(`${get(serverURL)}/api/v1/cookies`),
+  matchW(
+    () => '',
+    (r) => r.cookies
+  )
+)())
+
+const themeSelector = atom<ThemeNarrowed>((get) => {
+  const theme = get(themeState)
+  if ((theme === 'system' && prefersDarkMode()) || theme === 'dark') {
+    return 'dark'
+  }
+  return 'light'
+})
+
+export const accentState = atomWithStorage<Accent>(
+  'accent-color',
+  localStorage.getItem('accent-color') as Accent ?? 'default',
+)
+
+export const settingsState = atom<SettingsState>((get) => ({
+  serverAddr: get(serverAddressState),
+  serverPort: get(serverPortState),
+  language: get(languageState),
+  theme: get(themeSelector),
+  accent: get(accentState),
+  cliArgs: get(latestCliArgumentsState),
+  formatSelection: get(formatSelectionState),
+  fileRenaming: get(fileRenamingState),
+  autoFileExtension: get(autoFileExtensionState),
+  pathOverriding: get(pathOverridingState),
+  enableCustomArgs: get(enableCustomArgsState),
+  listView: get(listViewState),
+  servedFromReverseProxy: get(servedFromReverseProxyState),
+  appTitle: get(appTitleState)
+}))

frontend/src/atoms/status.ts

@@ -0,0 +1,34 @@
+import { pipe } from 'fp-ts/lib/function'
+import { of } from 'fp-ts/lib/Task'
+import { getOrElse } from 'fp-ts/lib/TaskEither'
+import { ffetch } from '../lib/httpClient'
+import { RPCVersion } from '../types'
+import { rpcClientState } from './rpc'
+import { serverURL } from './settings'
+import { atom } from 'jotai'
+
+export const connectedState = atom(false)
+
+export const freeSpaceBytesState = atom(async (get) => {
+  const res = await get(rpcClientState)
+    .freeSpace()
+    .catch(() => ({ result: 0 }))
+  return res.result
+})
+
+export const availableDownloadPathsState = atom(async (get) => {
+  const res = await get(rpcClientState).directoryTree()
+    .catch(() => ({ result: [] }))
+  return res.result
+})
+
+export const ytdlpRpcVersionState = atom<Promise<RPCVersion>>(async (get) => await pipe(
+  ffetch<RPCVersion>(`${get(serverURL)}/api/v1/version`),
+  getOrElse(() => pipe(
+    {
+      rpcVersion: 'unknown version',
+      ytdlpVersion: 'unknown version',
+    },
+    of
+  )),
+)())

frontend/src/atoms/toast.ts

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

frontend/src/atoms/ui.ts

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

frontend/src/components/AppBar.tsx

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

frontend/src/components/AppTitle.tsx

@@ -0,0 +1,33 @@
+import { Typography } from '@mui/material'
+import { useAtom } from 'jotai'
+import { useEffect } from 'react'
+import { appTitleState } from '../atoms/settings'
+import useFetch from '../hooks/useFetch'
+
+export const AppTitle: React.FC = () => {
+  const [appTitle, setAppTitle] = useAtom(appTitleState)
+
+  const { data } = useFetch<{ title: string }>('/webconfig')
+
+  useEffect(() => {
+    if (data?.title) {
+      setAppTitle(
+        data.title.startsWith('"')
+          ? data.title.substring(1, data.title.length - 1)
+          : data.title
+      )
+    }
+  }, [data])
+
+  return (
+    <Typography
+      component="h1"
+      variant="h6"
+      color="inherit"
+      noWrap
+      sx={{ flexGrow: 1 }}
+    >
+      {appTitle.startsWith('"') ? appTitle.substring(1, appTitle.length - 1) : appTitle}
+    </Typography>
+  )
+}

frontend/src/components/ArchiveCard.tsx

@@ -0,0 +1,98 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
+import SaveAltIcon from '@mui/icons-material/SaveAlt'
+import {
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  IconButton,
+  Skeleton,
+  Tooltip,
+  Typography
+} from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { serverURL } from '../atoms/settings'
+import { ArchiveEntry } from '../types'
+import { base64URLEncode, ellipsis } from '../utils'
+
+type Props = {
+  entry: ArchiveEntry
+  onDelete: (id: string) => void
+  onHardDelete: (id: string) => void
+}
+
+const ArchiveCard: React.FC<Props> = ({ entry, onDelete, onHardDelete }) => {
+  const serverAddr = useAtomValue(serverURL)
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => navigator.clipboard.writeText(entry.source)}>
+        {entry.thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={entry.thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        <CardContent>
+          {entry.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(entry.title, 60)}
+            </Typography> :
+            <Skeleton />
+          }
+          {/* <code>
+            {JSON.stringify(JSON.parse(entry.metadata), null, 2)}
+          </code> */}
+          <p>{new Date(entry.created_at).toLocaleString()}</p>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Tooltip title="Open in browser">
+          <IconButton
+            onClick={() => viewFile(entry.path)}
+          >
+            <OpenInBrowserIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Download this file">
+          <IconButton
+            onClick={() => downloadFile(entry.path)}
+          >
+            <SaveAltIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Delete from archive">
+          <IconButton
+            onClick={() => onDelete(entry.id)}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Delete from disk">
+          <IconButton
+            onClick={() => onHardDelete(entry.id)}
+          >
+            <DeleteForeverIcon />
+          </IconButton>
+        </Tooltip>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default ArchiveCard

frontend/src/components/ArchiveResult.tsx

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

frontend/src/components/CookiesTextField.tsx

@@ -0,0 +1,175 @@
+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 { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
+import { serverSideCookiesState, serverURL } from '../atoms/settings'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+import { useAtomValue } from 'jotai'
+import { useI18n } from '../hooks/useI18n'
+
+const { i18n } = useI18n()
+
+const validateCookie = (cookie: string) => pipe(
+  cookie,
+  cookie => cookie.split('\t'),
+  E.of,
+  E.flatMap(
+    E.fromPredicate(
+      f => f.length === 7,
+      () => `missing parts`
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[0].length > 0,
+      () => 'missing domain'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[1] === 'TRUE' || f[1] === 'FALSE',
+      () => `invalid include subdomains`
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[2].length > 0,
+      () => 'invalid path'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[3] === 'TRUE' || f[3] === 'FALSE',
+      () => 'invalid secure flag'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => isFinite(Number(f[4])),
+      () => 'invalid expiration'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[5].length > 0,
+      () => 'invalid name'
+    )
+  ),
+  E.flatMap(
+    E.fromPredicate(
+      f => f[6].length > 0,
+      () => 'invalid value'
+    )
+  ),
+)
+
+const 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 = useAtomValue(serverURL)
+  const savedCookies = useAtomValue(serverSideCookiesState)
+
+  const { pushMessage } = useToast()
+
+  const cookies$ = useMemo(() => new Subject<string>(), [])
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${serverAddr}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies
+      })
+    })()
+
+  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'),
+    A.map(c => isCommentOrNewLine(c) ? noopValidator(c) : validateCookie(c)), // validate line
+    A.mapWithIndex((i, either) => pipe(                  // detect errors and return the either
+      either,
+      E.match(
+        (l) => {
+          pushMessage(`Error in line ${i + 1}: ${l}`, 'warning')
+          return either
+        },
+        (_) => either
+      ),
+    )),
+    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(
+    cookies$.pipe(
+      debounceTime(650),
+      distinctUntilChanged()
+    ),
+    (cookies) => pipe(
+      cookies,
+      validateNetscapeCookies,
+      O.match(
+        () => pushMessage('No valid cookies', 'warning'),
+        async (some) => {
+          pipe(
+            await submitCookies(some.trimEnd()),
+            E.match(
+              (l) => pushMessage(`${l}`, 'error'),
+              () => {
+                pushMessage(`Saved ${some.split('\n').length} Netscape cookies`, 'success')
+                pushMessage('Reload the page to apply the changes', 'info')
+              }
+            )
+          )
+        }
+      )
+    )
+  )
+
+  return (
+    <>
+      <TextField
+        label="Netscape Cookies"
+        multiline
+        maxRows={20}
+        minRows={4}
+        fullWidth
+        defaultValue={savedCookies}
+        onChange={(e) => cookies$.next(e.currentTarget.value)}
+      />
+      <Button onClick={deleteCookies}>{i18n.t('deleteCookies')}</Button>
+    </>
+  )
+}
+
+export default CookiesTextField

frontend/src/components/CustomArgsTextField.tsx

@@ -0,0 +1,35 @@
+import { TextField } from '@mui/material'
+import { useAtom, useAtomValue } from 'jotai'
+import { customArgsState } from '../atoms/downloadTemplate'
+import { settingsState } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+import { useEffect } from 'react'
+
+const CustomArgsTextField: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const settings = useAtomValue(settingsState)
+
+  const [customArgs, setCustomArgs] = useAtom(customArgsState)
+
+  useEffect(() => {
+    setCustomArgs('')
+  }, [])
+
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomArgs(e.target.value)
+  }
+
+  return (
+    <TextField
+      fullWidth
+      label={i18n.t('customArgsInput')}
+      variant="outlined"
+      onChange={handleCustomArgsChange}
+      value={customArgs}
+      disabled={settings.formatSelection}
+    />
+  )
+}
+
+export default CustomArgsTextField

frontend/src/components/DownloadCard.tsx

@@ -0,0 +1,152 @@
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  IconButton,
+  LinearProgress,
+  Skeleton,
+  Stack,
+  Tooltip,
+  Typography
+} from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { useCallback } from 'react'
+import { serverURL } from '../atoms/settings'
+import { RPCResult } from '../types'
+import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+import ResolutionBadge from './ResolutionBadge'
+import ClearIcon from '@mui/icons-material/Clear'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
+import SaveAltIcon from '@mui/icons-material/SaveAlt'
+
+type Props = {
+  download: RPCResult
+  onStop: () => void
+  onCopy: () => void
+}
+
+const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+  const serverAddr = useAtomValue(serverURL)
+
+  const isCompleted = useCallback(
+    () => download.progress.percentage === '-1',
+    [download.progress.percentage]
+  )
+
+  const percentageToNumber = useCallback(
+    () => isCompleted()
+      ? 100
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => {
+        navigator.clipboard.writeText(download.info.url)
+        onCopy()
+      }}>
+        {download.info.thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={download.info.thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        {download.progress.percentage ?
+          <LinearProgress
+            variant="determinate"
+            value={percentageToNumber()}
+            color={isCompleted() ? "success" : "primary"}
+          /> :
+          null
+        }
+        <CardContent>
+          {download.info.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(download.info.title, 100)}
+            </Typography> :
+            <Skeleton />
+          }
+          <Stack direction="row" spacing={0.5} py={1}>
+            <Chip
+              label={
+                isCompleted()
+                  ? 'Completed'
+                  : mapProcessStatus(download.progress.process_status)
+              }
+              color="primary"
+              size="small"
+            />
+            <Typography>
+              {!isCompleted() ? download.progress.percentage : ''}
+            </Typography>
+            <Typography>
+              &nbsp;
+              {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
+            </Typography>
+            <Typography>
+              {formatSize(download.info.filesize_approx ?? 0)}
+            </Typography>
+            <ResolutionBadge resolution={download.info.resolution} />
+          </Stack>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        {isCompleted() ?
+          <Tooltip title="Clear from the view">
+            <IconButton
+              onClick={onStop}
+            >
+              <ClearIcon />
+            </IconButton>
+          </Tooltip>
+          :
+          <Tooltip title="Stop this download">
+            <IconButton
+              onClick={onStop}
+            >
+              <StopCircleIcon />
+            </IconButton>
+          </Tooltip>
+        }
+        {isCompleted() &&
+          <>
+            <Tooltip title="Download this file">
+              <IconButton
+                onClick={() => downloadFile(download.output.savedFilePath)}
+              >
+                <SaveAltIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Open in a new tab">
+              <IconButton
+                onClick={() => viewFile(download.output.savedFilePath)}
+              >
+                <OpenInBrowserIcon />
+              </IconButton>
+            </Tooltip>
+          </>
+        }
+      </CardActions>
+    </Card>
+  )
+}
+
+export default DownloadCard

frontend/src/components/DownloadDialog.tsx

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

frontend/src/components/Downloads.tsx

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

frontend/src/components/DownloadsCardView.tsx

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

frontend/src/components/DownloadsGridView.tsx

@@ -0,0 +1,47 @@
+import { Grid2 } from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { useTransition } from 'react'
+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'
+import LoadingBackdrop from './LoadingBackdrop'
+
+const DownloadsGridView: React.FC = () => {
+  const downloads = useAtomValue(activeDownloadsState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const [isPending, startTransition] = useTransition()
+
+  const stop = async (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED
+    ? await client.clear(r.id)
+    : await client.kill(r.id)
+
+  return (
+    <>
+      <LoadingBackdrop isLoading={isPending} />
+      <Grid2 container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
+        {
+          downloads.map(download => (
+            <Grid2 size={{ xs: 4, sm: 8, md: 6, xl: 4 }} key={download.id}>
+              <DownloadCard
+                download={download}
+                onStop={() => startTransition(async () => {
+                  await stop(download)
+                })}
+                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
+              />
+            </Grid2>
+          ))
+        }
+      </Grid2>
+    </>
+  )
+}
+
+export default DownloadsGridView

frontend/src/components/DownloadsListView.tsx

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

frontend/src/components/DownloadsTableView.tsx

@@ -0,0 +1,216 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DownloadIcon from '@mui/icons-material/Download'
+import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import SmartDisplayIcon from '@mui/icons-material/SmartDisplay'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import {
+  Box,
+  ButtonGroup,
+  IconButton,
+  LinearProgress,
+  LinearProgressProps,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
+import { forwardRef } from 'react'
+import { TableComponents, TableVirtuoso } from 'react-virtuoso'
+import { 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"
+import { useAtomValue } from 'jotai'
+
+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 = useAtomValue(activeDownloadsState)
+  const serverAddr = useAtomValue(serverURL)
+  const { client } = useRPC()
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/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/Drawer.tsx

@@ -1,9 +1,9 @@
-import { styled } from '@mui/material';
+import { styled } from '@mui/material'
-import MuiDrawer from '@mui/material/Drawer';
+import MuiDrawer from '@mui/material/Drawer'
 
-const drawerWidth = 240;
+const drawerWidth = 240
 
-export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme, open }) => ({
     '& .MuiDrawer-paper': {
       position: 'relative',
@@ -27,4 +27,6 @@ export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !==
       }),
     },
   }),
-);
+)
+
+export default Drawer

frontend/src/components/EmptyArchive.tsx

@@ -0,0 +1,45 @@
+import ArchiveIcon from '@mui/icons-material/Archive'
+import { Container, SvgIcon, Typography, styled } from '@mui/material'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useI18n } from '../hooks/useI18n'
+import { useAtomValue } from 'jotai'
+
+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 EmptyArchive() {
+  const { i18n } = useI18n()
+  const activeDownloads = useAtomValue(activeDownloadsState)
+
+  if (activeDownloads.length !== 0) {
+    return null
+  }
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <ArchiveIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        {/* {i18n.t('splashText')} */}
+        Empty Archive
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/components/ErrorBoundary.tsx

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

frontend/src/components/ExtraDownloadOptions.tsx

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

frontend/src/components/Footer.tsx

@@ -0,0 +1,68 @@
+import DownloadIcon from '@mui/icons-material/Download'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import { AppBar, CircularProgress, Divider, Toolbar } from '@mui/material'
+import { Suspense } from 'react'
+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'
+import { useAtomValue } from 'jotai'
+
+const Footer: React.FC = () => {
+  const settings = useAtomValue(settingsState)
+  const isConnected = useAtomValue(connectedState)
+  const totalDownloadSpeed = useAtomValue(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'
+      }}>
+        <Suspense fallback={<CircularProgress size={15} />}>
+          <VersionIndicator />
+        </Suspense>
+        <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

@@ -0,0 +1,127 @@
+import { Button, ButtonGroup, Grid, Paper, Typography } from "@mui/material"
+import type { DLMetadata } from '../types'
+
+type Props = {
+  downloadFormats: DLMetadata
+  onAudioSelected: (format: string) => void
+  onVideoSelected: (format: string) => void
+  onBestQualitySelected: (format: string) => void
+  onSubmit: () => void
+  onClear: () => void
+  pickedBestFormat: string
+  pickedAudioFormat: string
+  pickedVideoFormat: string
+}
+
+export default function FormatsGrid({
+  downloadFormats,
+  onAudioSelected,
+  onVideoSelected,
+  onBestQualitySelected,
+  onSubmit,
+  onClear,
+  pickedBestFormat,
+  pickedAudioFormat,
+  pickedVideoFormat,
+}: Props) {
+  return (
+    <Grid container spacing={2} mt={2}>
+      <Grid item xs={12}>
+        <Paper
+          sx={{
+            p: 2,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="h6" component="div" pb={1}>
+                {downloadFormats.title}
+              </Typography>
+              {/* <Skeleton variant="rectangular" height={180} /> */}
+            </Grid>
+            <Grid item xs={12} pb={1}>
+              <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
+            </Grid>
+            {/* video only */}
+            <Grid item xs={12}>
+              <Typography variant="body1" component="div">
+                Best quality
+              </Typography>
+            </Grid>
+            <Grid item pr={2} py={1}>
+              <Button
+                variant="contained"
+                disabled={pickedBestFormat !== ''}
+                onClick={() => onBestQualitySelected(downloadFormats.best.format_id)}
+              >
+                {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
+                &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx > 0) ? ", ~" + Math.round(downloadFormats.best.filesize_approx / 1024 / 1024) + " MiB" : ""})
+              </Button>
+            </Grid>
+            {/* video only */}
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Video data {downloadFormats.formats[1].acodec}
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onVideoSelected(format.format_id)}
+                    disabled={pickedVideoFormat === format.format_id}
+                  >
+                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                    &nbsp;({format.resolution}{(format.filesize_approx > 0) ? ", ~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB" : ""})
+                  </Button>
+                </Grid>
+              ))
+            }
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Audio data
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onAudioSelected(format.format_id)}
+                    disabled={pickedAudioFormat === format.format_id}
+                  >
+                    {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>
+              ))
+            }
+            <Grid item xs={12} pt={2}>
+              <ButtonGroup disableElevation variant="contained">
+                <Button
+                  onClick={() => onSubmit()}
+                  disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
+                > Download
+                </Button>
+                <Button
+                  onClick={() => onClear()}
+                > Clear
+                </Button>
+              </ButtonGroup>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  )
+}

frontend/src/components/FreeSpaceIndicator.tsx

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

frontend/src/components/HomeActions.tsx

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

frontend/src/components/HomeSpeedDial.tsx

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

frontend/src/components/LoadingBackdrop.tsx

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

frontend/src/components/LogTerminal.tsx

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

frontend/src/components/Logout.tsx

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

frontend/src/components/ResolutionBadge.tsx

@@ -0,0 +1,15 @@
+import EightK from '@mui/icons-material/EightK'
+import FourK from '@mui/icons-material/FourK'
+import Hd from '@mui/icons-material/Hd'
+import Sd from '@mui/icons-material/Sd'
+
+const ResolutionBadge: React.FC<{ resolution?: string }> = ({ resolution }) => {
+  if (!resolution) return null
+  if (resolution.includes('4320')) return <EightK color="primary" />
+  if (resolution.includes('2160')) return <FourK color="primary" />
+  if (resolution.includes('1080')) return <Hd color="primary" />
+  if (resolution.includes('720')) return <Sd color="primary" />
+  return null
+}
+
+export default ResolutionBadge

frontend/src/components/SocketSubscriber.tsx

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

frontend/src/components/Splash.tsx

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

frontend/src/components/StackableResult.tsx

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

frontend/src/components/TemplateTextField.tsx

@@ -0,0 +1,67 @@
+import { FC, useState } from 'react'
+
+import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
+import {
+  Button,
+  Grid,
+  TextField
+} from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { CustomTemplate } from '../types'
+
+interface Props {
+  template: CustomTemplate
+  onChange: (template: CustomTemplate) => void
+  onDelete: (id: string) => void
+}
+
+const TemplateTextField: FC<Props> = ({ template, onChange, onDelete }) => {
+  const { i18n } = useI18n()
+
+  const [editedTemplate, setEditedTemplate] = useState(template)
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      key={template.id}
+      sx={{ mt: 1 }}
+    >
+      <Grid item xs={3}>
+        <TextField
+          fullWidth
+          label={i18n.t('templatesEditorNameLabel')}
+          defaultValue={template.name}
+          onChange={(e) => setEditedTemplate({ ...editedTemplate, name: e.target.value })}
+        />
+      </Grid>
+      <Grid item xs={9}>
+        <TextField
+          fullWidth
+          label={i18n.t('templatesEditorContentLabel')}
+          defaultValue={template.content}
+          onChange={(e) => setEditedTemplate({ ...editedTemplate, content: e.target.value })}
+          InputProps={{
+            endAdornment: <div style={{ display: 'flex', gap: 2 }}>
+              <Button
+                variant='contained'
+                onClick={() => onChange(editedTemplate)}>
+                <EditIcon />
+              </Button>
+              <Button
+                variant='contained'
+                onClick={() => onDelete(editedTemplate.id)}>
+                <DeleteIcon />
+              </Button>
+            </div>
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default TemplateTextField

frontend/src/components/TemplatesEditor.tsx

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

frontend/src/components/ThemeToggler.tsx

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

frontend/src/components/UpdateBinaryButton.tsx

@@ -0,0 +1,33 @@
+import { Button, CircularProgress } from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { useState } from 'react'
+import { useToast } from '../hooks/toast'
+
+const UpdateBinaryButton: React.FC = () => {
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateBinary = () => {
+    setIsLoading(true)
+    client
+      .updateExecutable()
+      .then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+      .then(() => setIsLoading(false))
+  }
+
+  return (
+    <Button
+      variant="contained"
+      endIcon={isLoading ? <CircularProgress size={16} color='secondary' /> : <></>}
+      onClick={updateBinary}
+    >
+      {i18n.t('updateBinButton')}
+    </Button>
+  )
+}
+
+export default UpdateBinaryButton

frontend/src/components/VersionIndicator.tsx

@@ -0,0 +1,17 @@
+import { Chip } from '@mui/material'
+import { ytdlpRpcVersionState } from '../atoms/status'
+import { useAtomValue } from 'jotai'
+
+const VersionIndicator: React.FC = () => {
+  const version = useAtomValue(ytdlpRpcVersionState)
+
+  return (
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <Chip label={`UI v3.2.5`} variant="outlined" size="small" />
+      <Chip label={`RPC v${version.rpcVersion}`} variant="outlined" size="small" />
+      <Chip label={`yt-dlp v${version.ytdlpVersion}`} variant="outlined" size="small" />
+    </div>
+  )
+}
+
+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'}>
+        {i18n.t('livestreamNoMonitoring')}
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/components/subscriptions/NoSubscriptions.tsx

@@ -0,0 +1,38 @@
+import UpdateIcon from '@mui/icons-material/Update'
+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 NoSubscriptions() {
+  const { i18n } = useI18n()
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <UpdateIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        {i18n.t('subscriptionsEmptyLabel')}
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/components/subscriptions/SubscriptionsDialog.tsx

@@ -0,0 +1,159 @@
+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 { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
+import { useAtomValue } from 'jotai'
+import { forwardRef, startTransition, useState } from 'react'
+import { customArgsState } from '../../atoms/downloadTemplate'
+import { serverURL } from '../../atoms/settings'
+import { useToast } from '../../hooks/toast'
+import { useI18n } from '../../hooks/useI18n'
+import { ffetch } from '../../lib/httpClient'
+import { Subscription } from '../../services/subscriptions'
+import ExtraDownloadOptions from '../ExtraDownloadOptions'
+
+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 SubscriptionsDialog: React.FC<Props> = ({ open, onClose }) => {
+  const [subscriptionURL, setSubscriptionURL] = useState('')
+  const [subscriptionCron, setSubscriptionCron] = useState('')
+
+  const customArgs = useAtomValue(customArgsState)
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  const baseURL = useAtomValue(serverURL)
+
+  const submit = async (sub: Omit<Subscription, 'id'>) => pipe(
+    ffetch<void>(`${baseURL}/subscriptions`, {
+      method: 'POST',
+      body: JSON.stringify(sub)
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => onClose()
+    )
+  )()
+
+  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">
+            {i18n.t('subscriptionsButtonLabel')}
+          </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 gap={1.5}>
+                  <Grid item xs={12}>
+                    <Alert severity="info">
+                      {i18n.t('subscriptionsInfo')}
+                    </Alert>
+                    <Alert severity="warning" sx={{ mt: 1 }}>
+                      {i18n.t('livestreamExperimentalWarning')}
+                    </Alert>
+                  </Grid>
+                  <Grid item xs={12} mt={1}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('subscriptionsURLInput')}
+                      variant="outlined"
+                      placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
+                      onChange={(e) => setSubscriptionURL(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item xs={8} mt={-2}>
+                    <ExtraDownloadOptions />
+                  </Grid>
+                  <Grid item xs={3.871}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('cronExpressionLabel')}
+                      variant="outlined"
+                      placeholder="*/5 * * * *"
+                      onChange={(e) => setSubscriptionCron(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <Button
+                      sx={{ mt: 2 }}
+                      variant="contained"
+                      disabled={subscriptionURL === ''}
+                      onClick={() => startTransition(() => submit({
+                        url: subscriptionURL,
+                        params: customArgs,
+                        cron_expression: subscriptionCron
+                      }))}
+                    >
+                      {i18n.t('startButton')}
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default SubscriptionsDialog

frontend/src/components/subscriptions/SubscriptionsEditDialog.tsx

@@ -0,0 +1,162 @@
+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 { matchW } from 'fp-ts/lib/Either'
+import { pipe } from 'fp-ts/lib/function'
+import { useAtomValue } from 'jotai'
+import { forwardRef, startTransition, useState } from 'react'
+import { customArgsState } from '../../atoms/downloadTemplate'
+import { serverURL } from '../../atoms/settings'
+import { useToast } from '../../hooks/toast'
+import { useI18n } from '../../hooks/useI18n'
+import { ffetch } from '../../lib/httpClient'
+import { Subscription } from '../../services/subscriptions'
+import ExtraDownloadOptions from '../ExtraDownloadOptions'
+
+type Props = {
+  subscription: Subscription | undefined
+  onClose: () => void
+}
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+const SubscriptionsEditDialog: React.FC<Props> = ({ subscription, onClose }) => {
+  const [subscriptionURL, setSubscriptionURL] = useState('')
+  const [subscriptionCron, setSubscriptionCron] = useState('')
+
+  const customArgs = useAtomValue(customArgsState)
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  const baseURL = useAtomValue(serverURL)
+
+  const editSubscription = async (sub: Subscription) => {
+    const task = ffetch<void>(`${baseURL}/subscriptions`, {
+      method: 'PATCH',
+      body: JSON.stringify(sub)
+    })
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (_) => onClose()
+      )
+    )
+  }
+
+  return (
+    <Dialog
+      fullScreen
+      open={!!subscription}
+      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">
+            {i18n.t('subscriptionsButtonLabel')}
+          </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 gap={1.5}>
+                  <Grid item xs={12}>
+                    <Alert severity="info">
+                      Editing {subscription?.url}
+                    </Alert>
+                  </Grid>
+                  <Grid item xs={12} mt={1}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('subscriptionsURLInput')}
+                      variant="outlined"
+                      defaultValue={subscription?.url}
+                      placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
+                      onChange={(e) => setSubscriptionURL(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item xs={8} mt={-2}>
+                    <ExtraDownloadOptions />
+                  </Grid>
+                  <Grid item xs={3.871}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('cronExpressionLabel')}
+                      variant="outlined"
+                      placeholder="*/5 * * * *"
+                      defaultValue={subscription?.cron_expression}
+                      onChange={(e) => setSubscriptionCron(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <Button
+                      sx={{ mt: 2 }}
+                      variant="contained"
+                      onClick={() => startTransition(async () => await editSubscription({
+                        id: subscription?.id ?? '',
+                        url: subscriptionURL || subscription?.url!,
+                        params: customArgs || subscription?.params!,
+                        cron_expression: subscriptionCron || subscription?.cron_expression!
+                      }))}
+                    >
+                      {i18n.t('editButtonLabel')}
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default SubscriptionsEditDialog

frontend/src/components/subscriptions/SubscriptionsSpeedDial.tsx

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

frontend/src/features/core/argsParser.ts

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

frontend/src/features/core/events.ts

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

frontend/src/features/core/intl.ts

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

frontend/src/features/core/rpcClient.ts

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

frontend/src/features/settings/settingsSlice.ts

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